/* Homepage hero: three full-screen slides on one pinned stage (assets/home-hero.js).
   The header is three stages tall; the stage fills the screen while the visitor scrolls,
   and each slide's words sit inside it. Loaded after puzzle-home*.css, whose .ph-grain it reuses. */
.hh{--hh-nav:0px;--hh-h:100svh;--hh-vis:100svh;--hh-ink:#fff;--hh-ground:#534666;--hh-bg:#534666;
  position:relative;height:calc(var(--hh-h)*3);padding:0;background:var(--hh-bg)}
.hh-stage{--hh-layout:portrait;position:sticky;top:var(--hh-nav);height:var(--hh-h);overflow:clip;isolation:isolate;container-type:size;background:var(--hh-ground)}
.js .hh-stage{touch-action:pan-x pinch-zoom}
.hh-probe{position:absolute;left:0;top:0;width:0;height:var(--hh-vis);visibility:hidden;pointer-events:none}
.hh-field,.hh-overlay{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.hh-field{z-index:0}
.hh-overlay{z-index:2}
.hh [hidden]{display:none!important}

/* Dr. Deb, the approved cut-paper portrait, anchored to the bottom of the first slide. */
.hh-figure{--fw:min(79cqh,175cqw);position:absolute;z-index:4;left:calc(50cqw - var(--fw)*.53);bottom:calc(var(--fw)*-.192);width:var(--fw);height:calc(var(--fw)*.75);pointer-events:none;will-change:transform,opacity}
.hh-figure .deb-photograph{display:block;width:100%;height:auto;max-width:none;clip-path:url(#deb-cut-paper)}
/* Three patients with Dr. Deb, laid down like prints for the third slide, every one cropped to the same 4:5 upright
   and fanned: the largest in front, the other two tilting out from behind it. The two office shots are stored
   pre-cropped (-upright.jpg), framed so the front print covers only wall, never a face.
   --u is one sixth of the group's width, give or take. */
.hh-card{--u:min(calc((100cqw - 40px)/6.2),8.6cqh);position:absolute;z-index:4;left:calc(50cqw - var(--u)*3.1);top:calc(var(--hh-vis)*.62 - var(--u)*2.25);
  width:calc(var(--u)*6.2);height:calc(var(--u)*4.5);margin:0;pointer-events:none;will-change:transform,opacity}
.hh-card img{position:absolute;display:block;max-width:none;height:auto;object-fit:cover;border:3px solid #fff;border-radius:14px;box-shadow:0 16px 40px rgba(0,0,0,.3)}
.hh-card .hh-print-1{z-index:3;left:27%;top:4%;width:46%;aspect-ratio:4/5;rotate:-1deg;object-position:50% 30%}
.hh-card .hh-print-2{z-index:1;left:0;top:17%;width:36%;aspect-ratio:4/5;rotate:-6deg}
.hh-card .hh-print-3{z-index:2;left:64%;top:19%;width:36%;aspect-ratio:4/5;rotate:5deg}

/* The words. All three slides stay in the document; only the active one is visible. */
.hh-copy{position:absolute;z-index:6;inset:0;pointer-events:none}
.hh-slide{position:absolute;left:24px;right:24px;top:26px;color:var(--hh-ink);text-shadow:0 1px 22px rgba(0,0,0,.16)}
.hh-slide :is(h1,h2){margin:0;font:500 clamp(30px,8.7vw,52px)/1.06 var(--display);letter-spacing:-.035em;color:inherit}
.hh-slide h1 span{display:block}
.hh-slide p{margin:14px 0 0;max-width:30ch;font-size:15px;line-height:1.45;letter-spacing:-.1px;color:inherit;opacity:.92}
.hh-slide .hh-zh{margin-top:6px;letter-spacing:.06em}
.hh-points{display:grid;gap:8px;margin:16px 0 0;padding:0;max-width:34ch;list-style:none;font-size:15px;line-height:1.4;opacity:.92}
.hh-points li{position:relative;padding-left:20px}
.hh-points li::before{content:"";position:absolute;left:0;top:.62em;width:10px;height:2px;border-radius:1px;background:currentColor}
/* Each slide is one link: its headline. The link's ::before stretches over the whole stage, so a tap anywhere on the
   showing slide follows it; the stage clips it. Only the showing slide takes pointers (home-hero.js sets .is-on). */
.hh-go{color:inherit;text-decoration:none}
.hh-go::before{content:"";position:absolute;inset:-200vh -200vw}
.hh-slide.is-on .hh-go{pointer-events:auto}
.hh-slide:has(.hh-go:focus-visible){outline:2px solid #fff;outline-offset:10px;border-radius:6px}
.hh-go:focus-visible{outline:none}
.hh-slide .hh-rating{max-width:none;margin:0 0 12px;font:600 12px/1.4 var(--kicker);letter-spacing:.08em;text-transform:uppercase;opacity:1}
.hh-rating span{letter-spacing:.14em;margin-right:2px}

/* Live counters drawn beside the animation. Decorative: the headline already says it. */
.hh-count{position:absolute;z-index:5;left:0;top:0;display:inline-flex;align-items:baseline;gap:6px;padding:5px 13px 6px;border-radius:999px;
  background:rgba(255,255,255,.16);box-shadow:inset 0 0 0 1px rgba(255,255,255,.38);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  color:#fff;font:500 13px/1.2 var(--body);white-space:nowrap;pointer-events:none;opacity:0;will-change:transform,opacity}
.hh-count b{font:600 22px/1 var(--display);letter-spacing:-.03em;font-variant-numeric:tabular-nums}

/* Where you are: three marks on the right edge. */
.hh-dots{position:absolute;z-index:6;right:12px;top:30px;display:grid;gap:8px;pointer-events:none}
.hh-dots i{display:block;width:5px;height:5px;border-radius:3px;background:rgba(255,255,255,.45);transition:height .3s var(--ease-out),background .3s var(--ease-out)}
.hh-dots i.is-on{height:20px;background:#fff}

/* Landscape screens: the words on the left, the picture on the right. */
@media(min-width:900px) and (min-aspect-ratio:6/5){
  .hh-stage{--hh-layout:landscape}
  .hh-slide{left:max(30px,calc((100cqw - 1200px)/2 + 30px));right:auto;width:min(43cqw,760px);top:calc(var(--hh-vis)*.5);transform:translateY(-50%)}
  .hh-slide :is(h1,h2){font-size:clamp(44px,3.9vw,68px)}
  .hh-slide p{font-size:18px;margin-top:20px}
  .hh-slide .hh-rating{font-size:13px;margin-bottom:16px}
  .hh-slide .hh-zh{font-size:17px;margin-top:8px}
  .hh-points{gap:10px;max-width:46ch;margin-top:22px;font-size:18px}
  .hh-figure{--fw:min(118cqh,64cqw);left:calc(70cqw - var(--fw)*.53)}
  /* The prints take the room right of the words: --tr is where the words end (the .hh-slide rule above). */
  .hh-card{--tr:calc(max(30px,(100cqw - 1200px)/2 + 30px) + min(43cqw,760px));--u:min(12.6cqh,(100cqw - var(--tr) - 88px)/6.2);
    left:calc(var(--tr) + 48px + (100cqw - var(--tr) - 88px - var(--u)*6.2)/2);top:calc(var(--hh-vis)*.5 - var(--u)*2.25)}
  .hh-count{padding:6px 15px 7px;font-size:14px}
  .hh-count b{font-size:26px}
  .hh-dots{right:22px;top:calc(var(--hh-vis)*.5);transform:translateY(-50%)}
}

/* Without script there is no stage to scroll through: the three slides simply stack. */
html:not(.js) .hh{height:auto}
html:not(.js) .hh-stage{position:relative;top:0;height:auto;min-height:var(--hh-vis);padding:28px 0 calc(var(--hh-vis)*.5)}
html:not(.js) .hh-copy{position:relative}
html:not(.js) .hh-slide{position:relative;inset:auto;transform:none;margin:0 24px 40px}
html:not(.js) .hh-go{pointer-events:auto}
html:not(.js) .hh-go::before{content:none}
html:not(.js) :is(.hh-card,.hh-count,.hh-dots,.hh-field,.hh-overlay){display:none}

/* Before the script runs, only the first slide shows. */
.js .hh-slide+.hh-slide,.js .hh-card{opacity:0}

/* ---------- Her story, below the hero ----------
   The three cards that used to sit beside the animation, unchanged, in a normal section. Only show them where all three fit side by side;
   smaller screens already get the same story in the hero. */
@media(max-width:959px){.hh-after{display:none}}
.hh-after{--pz-orange:#E16E37;padding:44px 0 8px}
.hh-after a:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.hh-after .ph-steps{display:grid;gap:4px}
.hh-after .ph-step{padding:22px 0 26px}
.hh-after .ph-step h2{max-width:22ch}
/* The family photo is square: keep all four faces in the 16:10 frame. */
.hh-after .ph-step[data-step="2"] .ph-photo img{object-position:50% 20%}
@media(min-width:960px){
  .hh-after{padding:84px 0 16px}
  .hh-after .ph-steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:40px}
  .visit-refresh .hh-after a.ph-step,.hh-after .ph-step,.hh-after .ph-step:first-child{display:flex;flex-direction:column;justify-content:flex-start;min-height:0;padding:0;opacity:1}
  .hh-after .ph-step h2{font-size:28px;letter-spacing:-.9px;max-width:none}
  .hh-after .ph-step>p:not(.ph-eyebrow){font-size:15px}
  .hh-after .ph-photo{width:100%;max-width:none;margin-top:auto;padding-top:22px}
  .hh-after .ph-link{margin-top:10px}
}
@media(prefers-reduced-motion:reduce){.hh-dots i{transition:none}.hh-figure,.hh-card,.hh-count{will-change:auto}}