/* =========================================================
   PLACEMENT V2 — Cinematic anchor · editorial hero CTA
   =========================================================
   Version 2: one anchor photograph runs full-bleed behind the
   hero words, but the words sit bottom-centre on a narrow
   column (not bottom-left over the left kitchen, which is the
   V1 choice), with a horizontal vignette that fades to paper
   so the hero visually melts into the next section rather
   than ending on a hard rule. The "good day" picture is not a
   split panel bleeding an edge: it sits inside the site's
   content column as a large editorial proof photograph, the
   CTA words centred above it, the button below — a "picture
   with the invitation layered into it" read rather than a
   split. ADHD page leaves the hero area for its future top
   picture and applies only the CTA treatment.
   ========================================================= */

/* ---------------- shared picture treatment ---------------- */
/* A light drain + warm cast so the B+W kitchen sits next to
   warm paper without a temperature clash, and the colour
   "good day" photographs don't fight the cream ground.
   Slightly less contrast and a hair brighter than V2 shipped,
   so the man's face reads as a face rather than a silhouette
   when the vignette lands. */
.v2-photo-treat{
  filter: saturate(.78) contrast(.88) brightness(1.08) sepia(.14);
}

/* ---------------- low-testosterone hero (cinematic anchor, words bottom-left) -- */
/* Full-bleed anchor photograph. Removing it leaves the screen
   bare, so it passes the removal test. The B+W kitchen is
   2.33:1 — wider than a 16:9 screen — so it fills a 1440×900
   viewport with the man still at the right and the calm left
   kitchen intact for the words.

   The vignette is directional, not a uniform overlay:
   - darkest along the bottom where the words live
   - feathering diagonally up and right so the man's face stays
     lit (he is the subject; we don't bury him under a wash)
   - feathering down at the very bottom edge into the warm
     paper of the next band section, no hairline — the
     photograph dissolves into the page rather than ending.

   The words sit in a narrow column bottom-left, over the
   empty kitchen, per Mitch's note of 2026-09-22: "the low
   testosterone assessment copy ... fits perfectly on the left
   on its own." The column is capped at ~560px so it never
   reaches across the man's torso at wide viewports. */
body.v2-lt .hero.sm{
  min-height: clamp(620px, 80vh, 820px);
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  border-bottom: none;
  background: var(--paper);
}
body.v2-lt .hero.sm .grain{
  background:
    /* bottom wash that the words sit on — feathered up from a
       warm paper-tinted black so the transition into the next
       paper-band section feels seamless rather than a black
       curtain */
    linear-gradient(180deg,
      rgba(21,19,15,0) 0%,
      rgba(21,19,15,.06) 34%,
      rgba(21,19,15,.24) 56%,
      rgba(21,19,15,.54) 78%,
      rgba(21,19,15,.78) 100%),
    /* diagonal vignette from the bottom-left text corner up-
       right — gives the words a stable dark patch without
       washing the man's face out */
    linear-gradient(115deg,
      rgba(21,19,15,.55) 0%,
      rgba(21,19,15,.32) 28%,
      rgba(21,19,15,.08) 52%,
      rgba(21,19,15,0) 74%),
    /* soft lift at the top-left window so the picture keeps
       its bright morning feel rather than looking dimmed */
    radial-gradient(75% 55% at 12% 18%, rgba(250,245,230,.22), transparent 60%);
  z-index: 2;
}
body.v2-lt .hero.sm .wrap{
  position: relative;
  z-index: 3;
  padding-top: clamp(90px, 14vw, 170px);
  padding-bottom: clamp(72px, 10vw, 120px);
  width: 100%;
}
body.v2-lt .hero.sm .hero-inner{
  max-width: 560px;
  margin: 0;
  text-align: left;
}
body.v2-lt .hero.sm .kicker{
  color: var(--gold-bright);
  justify-content: flex-start;
}
body.v2-lt .hero.sm .kicker::before{
  background: var(--gold-bright);
}
body.v2-lt .hero.sm h1{
  color: var(--champagne);
}
body.v2-lt .hero.sm h1 .gold{
  color: var(--gold-bright);
}
body.v2-lt .hero.sm .lead{
  color: rgba(243,240,232,.90);
  margin-left: 0;
  margin-right: 0;
  max-width: 46ch;
}
body.v2-lt .hero-photo{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* The source has the man's face at about 68% from the left
     edge, eyes ~20% down from the top. At 1440 wide and a
     16:9-ish viewport crop, 74% 22% keeps his eyes on the
     upper-right third, the table running across the bottom,
     and the left kitchen clear for the words. */
  object-position: 74% 22%;
  z-index: 1;
}
@media(min-width: 921px){
  body.v2-lt .hero.sm{
    min-height: clamp(660px, 76vh, 840px);
  }
}
/* Phone: re-crop to a 3:4-ish portrait around the man rather
   than scaling the wide 2.33:1 picture down (per skill rule
   "never scale the wide picture down for a phone — re-crop it
   taller"). Object-position keeps his face near the upper
   third (eyes ~1/3 from top), the mug and both hands in the
   frame below the chin, and leaves the bottom of the frame
   (the table) as the calm dark patch the words sit on. The
   vignette tightens so the headline stays readable against
   the bright window behind him. */
@media(max-width: 720px){
  body.v2-lt .hero.sm{
    min-height: 78svh;
  }
  body.v2-lt .hero-photo{
    object-position: 60% 28%;
  }
  body.v2-lt .hero.sm .grain{
    background:
      linear-gradient(180deg,
        rgba(21,19,15,0) 0%,
        rgba(21,19,15,.12) 30%,
        rgba(21,19,15,.40) 55%,
        rgba(21,19,15,.74) 82%,
        rgba(21,19,15,.88) 100%),
      linear-gradient(110deg,
        rgba(21,19,15,.40) 0%,
        rgba(21,19,15,.16) 40%,
        rgba(21,19,15,0) 72%);
  }
  body.v2-lt .hero.sm .hero-inner{
    max-width: 460px;
    padding: 0 clamp(4px,2vw,12px);
  }
  body.v2-lt .hero.sm .lead{
    max-width: 32ch;
  }
}
/* The hero dissolves into the next section — no border, no
   after-pseudo-element hairline. The bottom of the .grain
   overlay already lands at rgba(21,19,15,.78) which is close
   to the paper band's depth; we let it feather naturally. */
body.v2-lt .hero.sm::after{
  display: none;
}

/* ---------------- low-testosterone CTA (split proof, from version 1 on Mitch's note of 2026-09-22 that the words go left and the man right) ------ */
/* The "good day" picture becomes a proof panel: on desktop it
   bleeds the full right edge of the viewport, and the CTA
   words sit on a paper column to the left. On phone the
   picture goes to a 4:5 portrait crop above the words. */
body.v2-lt .sec.cta{
  text-align: left;
  padding: 0;
  overflow: hidden;
  background: var(--paper);
}
body.v2-lt .sec.cta::before{
  display:none;
}
body.v2-lt .sec.cta > .wrap{
  display: grid;
  /* picture left, words right: the man sits on the left of the photo */
  grid-template-columns: minmax(0,1.1fr) minmax(0,1fr);
  gap: 0;
  max-width: none;
  padding: 0;
  align-items: stretch;
}
body.v2-lt .sec.cta .cta-copy{
  padding: clamp(64px,10vw,120px) clamp(20px,4vw,40px) clamp(64px,10vw,120px) clamp(24px,5vw,64px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 640px;
  margin-right: auto;
  width: 100%;
}
body.v2-lt .sec.cta .cta-photo-wrap{
  position: relative;
  overflow: hidden;
  min-height: clamp(480px, 62vh, 720px);
  order: -1;
}
body.v2-lt .sec.cta .cta-photo{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* beach run 3: his face sits 25-30% from the image's left, the dog
     down-right of him. Keep him and the dog inside the right-hand panel. */
  object-position: 28% 30%;
  margin:0;
}
body.v2-lt .sec.cta .mark{
  margin: 0 0 26px;
}
body.v2-lt .sec.cta .h2{
  margin-bottom: 22px;
}
body.v2-lt .sec.cta .lead{
  margin: 0 0 36px;
  text-align: left;
  max-width: 42ch;
}
body.v2-lt .sec.cta .btn{
  align-self: flex-start;
}
/* phone: the picture becomes a full-width hero-style panel with the
   CTA words layered over its bottom-left corner on a dark wash. The
   picture no longer takes a whole screen segment on its own. */
@media(max-width: 820px){
  body.v2-lt .sec.cta > .wrap{
    grid-template-columns: 1fr;
    /* the copy below is absolute; anchor it to this wrap, which ends
       where the photo ends, so the words sit over the photo on a phone
       (the section is the nearest positioned ancestor otherwise, and its
       bottom padding pushed the words below the photo) */
    position: relative;
  }
  body.v2-lt .sec.cta .cta-photo-wrap{
    min-height: clamp(520px, 82svh, 720px);
    order: -1;
    /* position:relative so the absolutely-placed copy anchors to it */
    position: relative;
  }
  body.v2-lt .sec.cta .cta-photo{
    /* the frame shows about a third of the picture's width; start it
       left of him so he sits in frame with the dog at his right */
    object-position: 12% 28%;
  }
  body.v2-lt .sec.cta .cta-copy{
    position: absolute;
    left: 0; right: 0; bottom: 0;
    z-index: 3;
    padding: clamp(80px,18vw,140px) clamp(20px,5vw,40px) clamp(36px,6vw,56px);
    max-width: none;
    margin: 0;
    background: linear-gradient(180deg,
      rgba(21,19,15,0) 0%,
      rgba(21,19,15,.20) 28%,
      rgba(21,19,15,.58) 62%,
      rgba(21,19,15,.82) 100%);
    color: var(--champagne);
  }
  body.v2-lt .sec.cta .cta-copy .mark{ color: var(--gold-bright); }
  body.v2-lt .sec.cta .cta-copy .h2,
  body.v2-lt .sec.cta .cta-copy .h2 .gold{ color: var(--champagne); }
  body.v2-lt .sec.cta .cta-copy .h2 .gold{ color: var(--gold-bright); }
  body.v2-lt .sec.cta .cta-copy .lead{ color: rgba(243,240,232,.90); }
  body.v2-lt .sec.cta .cta-copy .btn-ink{
    background: var(--champagne);
    color: var(--ink);
  }
  body.v2-lt .sec.cta .cta-copy .btn-ink .arr{ color: var(--gold-deep); }
}

/* ---------------- condition split: compact lockup -------- */
/* The .panel beside the condition-intro text was stretching to
   the full height of the long text column (styles.css sets
   align-self:stretch under .condition-page), leaving a tall
   empty frame with a small emblem and a centred caption — that
   is the "super tall logo SVG" and the "pop box thing" Mitch
   flagged, and the caption is also the "top box below Low
   Testosterone Assessment" he wanted left-aligned. The panel is
   a drawn shape (section 7 of the skill: never stand a drawn
   shape in for a photograph), so it is demoted to a compact
   horizontal lockup that sits at the top of its column. Words
   are unchanged; only layout moves. */
body.v2-lt .condition-intro + .panel,
body.v2-adhd .condition-intro + .panel{
  align-self: start;
  justify-self: start;
  aspect-ratio: auto;
  min-height: 0;
  height: auto;
  width: auto;
  max-width: 320px;
  margin: 6px 0 0;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 18px;
}
body.v2-lt .condition-intro + .panel .frameline,
body.v2-adhd .condition-intro + .panel .frameline{
  display: none;
}
body.v2-lt .condition-intro + .panel .emblem,
body.v2-adhd .condition-intro + .panel .emblem{
  width: 56px;
  flex: 0 0 56px;
  opacity: .9;
}
body.v2-lt .condition-intro + .panel .cap,
body.v2-adhd .condition-intro + .panel .cap{
  position: static;
  text-align: left;
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  padding: 0;
  line-height: 1.45;
}
/* on phone the split stacks; keep the lockup flush to the text
   rather than centring it. */
@media(max-width: 920px){
  body.v2-lt .condition-intro + .panel,
  body.v2-adhd .condition-intro + .panel{
    max-width: none;
    margin-top: 8px;
  }
}

/* a single hairline divider under the hero replaces the
   previous section-bottom border, which was removed. */
body.v2-lt .hero.sm::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:0;
  height:1px;
  background:var(--line);
  z-index:4;
}

/* ---------------- adult-adhd hero (cinematic anchor, words bottom-left, mirroring LT) ------ */
/* Picture 4 (v2-r3): university student at a share-house desk, 16:9 colour,
   his face ≈ 30–40% from the left edge of the frame, afternoon sun across
   the desk. The right half is the busy desk/books/plant — we anchor the
   words bottom-left over the calm wall/bed area (left of him) and keep him
   fully readable at the right. */
body.v2-adhd .hero.sm{
  min-height: clamp(620px, 80vh, 820px);
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  border-bottom: none;
  background: var(--paper);
}
body.v2-adhd .hero.sm .grain{
  background:
    linear-gradient(180deg,
      rgba(21,19,15,0) 0%,
      rgba(21,19,15,.06) 34%,
      rgba(21,19,15,.22) 56%,
      rgba(21,19,15,.52) 78%,
      rgba(21,19,15,.76) 100%),
    linear-gradient(245deg,
      rgba(21,19,15,.50) 0%,
      rgba(21,19,15,.28) 28%,
      rgba(21,19,15,.06) 52%,
      rgba(21,19,15,0) 74%),
    radial-gradient(70% 55% at 88% 22%, rgba(250,235,200,.18), transparent 60%);
  z-index: 2;
}
body.v2-adhd .hero.sm .wrap{
  position: relative;
  z-index: 3;
  padding-top: clamp(90px, 14vw, 170px);
  padding-bottom: clamp(72px, 10vw, 120px);
  width: 100%;
}
/* the student sits on the left of the picture, so the words sit right */
body.v2-adhd .hero.sm .hero-inner{
  max-width: 560px;
  margin: 0 0 0 auto;
  text-align: left;
}
body.v2-adhd .hero.sm .kicker{
  color: var(--gold-bright);
  justify-content: flex-start;
}
body.v2-adhd .hero.sm .kicker::before{
  background: var(--gold-bright);
}
body.v2-adhd .hero.sm h1{
  color: var(--champagne);
}
body.v2-adhd .hero.sm h1 .gold{
  color: var(--gold-bright);
}
body.v2-adhd .hero.sm .lead{
  color: rgba(243,240,232,.90);
  margin-left: 0;
  margin-right: 0;
  max-width: 46ch;
}
body.v2-adhd .hero-photo{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* adhd-chad-11: the student asleep, his face 15-20% from the image's
     left, filling the full height. The hero is wider than the image, so it
     fills the width and pans vertically only; keep his face high, above
     the words. */
  object-position: 50% 24%;
  z-index: 1;
}
@media(min-width: 921px){
  body.v2-adhd .hero.sm{
    min-height: clamp(660px, 76vh, 840px);
  }
}
/* Phone: re-crop taller — portrait crop around the student so he reads
   large. Words bottom-left on the dark table/wall wash; never over his
   face. */
@media(max-width: 720px){
  body.v2-adhd .hero.sm{
    min-height: 78svh;
  }
  body.v2-adhd .hero-photo{
    /* the frame shows about a third of the width; start it at the left
       edge so his face sits in frame */
    object-position: 4% 26%;
  }
  body.v2-adhd .hero.sm .grain{
    background:
      linear-gradient(180deg,
        rgba(21,19,15,0) 0%,
        rgba(21,19,15,.10) 28%,
        rgba(21,19,15,.36) 52%,
        rgba(21,19,15,.70) 80%,
        rgba(21,19,15,.86) 100%),
      linear-gradient(110deg,
        rgba(21,19,15,.36) 0%,
        rgba(21,19,15,.14) 40%,
        rgba(21,19,15,0) 72%);
  }
  body.v2-adhd .hero.sm .hero-inner{
    max-width: 460px;
    padding: 0 clamp(4px,2vw,12px);
  }
  body.v2-adhd .hero.sm .lead{
    max-width: 32ch;
  }
}
body.v2-adhd .hero.sm::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:0;
  height:1px;
  background:var(--line);
  z-index:4;
}

/* ---------------- adult-adhd CTA ------------------------- */
/* Same split-proof treatment as low-testosterone. The cafe
   picture has the man on the left, so shift object-position
   to keep his face in the panel rather than the storefront. */
body.v2-adhd .sec.cta{
  text-align: left;
  padding: 0;
  overflow: hidden;
  background: var(--paper);
}
body.v2-adhd .sec.cta::before{
  display:none;
}
body.v2-adhd .sec.cta > .wrap{
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1.1fr);
  gap: 0;
  max-width: none;
  padding: 0;
  align-items: stretch;
}
body.v2-adhd .sec.cta .cta-copy{
  padding: clamp(64px,10vw,120px) clamp(24px,5vw,64px) clamp(64px,10vw,120px) clamp(20px,4vw,40px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 640px;
  margin-left: auto;
  width: 100%;
}
body.v2-adhd .sec.cta .cta-photo-wrap{
  position: relative;
  overflow: hidden;
  min-height: clamp(480px, 62vh, 720px);
}
body.v2-adhd .sec.cta .cta-photo{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 22% 40%; /* man left, cafe right */
  margin:0;
}
body.v2-adhd .sec.cta .mark{ margin:0 0 26px; }
body.v2-adhd .sec.cta .h2{ margin-bottom:22px; }
body.v2-adhd .sec.cta .lead{
  margin:0 0 36px;
  text-align:left;
  max-width:42ch;
}
body.v2-adhd .sec.cta .btn{ align-self:flex-start; }
@media(max-width: 820px){
  body.v2-adhd .sec.cta > .wrap{
    grid-template-columns:1fr;
    /* the copy below is absolute; anchor it to this wrap, which ends
       where the photo ends, so the words sit over the photo on a phone
       (the section is the nearest positioned ancestor otherwise, and its
       bottom padding pushed the words below the photo) */
    position: relative;
  }
  body.v2-adhd .sec.cta .cta-photo-wrap{
    min-height: clamp(520px, 82svh, 720px);
    order:-1;
    position: relative;
  }
  body.v2-adhd .sec.cta .cta-photo{
    object-position:28% 32%;
  }
  body.v2-adhd .sec.cta .cta-copy{
    position: absolute;
    left: 0; right: 0; bottom: 0;
    z-index: 3;
    padding: clamp(80px,18vw,140px) clamp(20px,5vw,40px) clamp(36px,6vw,56px);
    max-width:none; margin:0;
    background: linear-gradient(180deg,
      rgba(21,19,15,0) 0%,
      rgba(21,19,15,.20) 28%,
      rgba(21,19,15,.58) 62%,
      rgba(21,19,15,.82) 100%);
    color: var(--champagne);
  }
  body.v2-adhd .sec.cta .cta-copy .mark{ color: var(--gold-bright); }
  body.v2-adhd .sec.cta .cta-copy .h2,
  body.v2-adhd .sec.cta .cta-copy .h2 .gold{ color: var(--champagne); }
  body.v2-adhd .sec.cta .cta-copy .h2 .gold{ color: var(--gold-bright); }
  body.v2-adhd .sec.cta .cta-copy .lead{ color: rgba(243,240,232,.90); }
  body.v2-adhd .sec.cta .cta-copy .btn-ink{
    background: var(--champagne);
    color: var(--ink);
  }
  body.v2-adhd .sec.cta .cta-copy .btn-ink .arr{ color: var(--gold-deep); }
}