/* helicase-push-oct26: DNA seam v8. Homepage only, linked from the #biology block.
   theme.css keeps the v7 seam rules; this file adds the pause button and the
   still panel (static mode, reduced motion, data saver, slow connections, or a
   clip that had not arrived when the section reached the screen). */

/* the idle spin's pause button (WCAG 2.2.2), top right of the stage */
.seam-pause{position:absolute;z-index:3;top:14px;right:max(var(--gut),14px);font:600 .8rem var(--sans);padding:6px 14px;min-height:32px;border-radius:999px;border:1px solid rgba(255,255,255,.4);background:rgba(14,33,53,.6);color:#fff;cursor:pointer;transition:opacity .3s ease}
.seam-pause[hidden]{display:none}
.seam-pause:hover{background:rgba(14,33,53,.8)}
.seam-pause:focus-visible{outline:2px solid #fff;outline-offset:2px}
.seam.is-unzipping .seam-pause{opacity:0;pointer-events:none}
.seam.is-unzipping .seam-pause:focus-visible{opacity:1;pointer-events:auto}

/* the still panel: no pin, no film, every word visible from the start. It is
   also the layout before seam.js decides, so choosing it never moves anything;
   the film takes over only when the section reaches the screen, with every
   change below the fold. */
.js .seam:not(.seam-film){height:auto!important}
.js .seam:not(.seam-film) .seam-stage{position:relative;top:auto;height:auto!important;overflow:visible;background:#F7F3EB}
.seam:not(.seam-film) .seam-vid,.seam:not(.seam-film) .seam-pause{display:none}
.seam:not(.seam-film) .seam-reveal{position:relative;inset:auto;background:#F7F3EB;padding:clamp(56px,8vw,104px) max(var(--gut),20px)}
/* phones: a plain proof band, left aligned like the film's reveal. The
   physician photo comes back because the panel is no longer one screen tall,
   but only after the load event (seam.js adds .seam-photo-on), so its bytes
   never compete with the hero. */
@media (max-width:900px){
.seam:not(.seam-film) .seam-in{text-align:left}
.seam:not(.seam-film) .btn-row{justify-content:flex-start}
.seam.seam-photo-on:not(.seam-film) .seam-photo{display:block;max-width:320px;margin:4px 0 0}}
/* wide screens: the film's own open frame behind the words, as the film ends */
@media (min-width:901px){
.seam:not(.seam-film) .seam-photo{display:block}
.seam:not(.seam-film) .seam-stage{background:#F7F3EB url(/assets/seam/d-open-v3.webp) center/cover no-repeat}
.seam:not(.seam-film) .seam-reveal{background:transparent;padding-left:clamp(var(--gut),18vw,320px);padding-right:clamp(var(--gut),18vw,320px)}}

/* dna-v9 begin */
/* v9 (2026-10-27): "Meet your providers." Two columns, one per provider, a proof strip and
   one button. Same markup in the film, the phone still panel and reduced motion. */
#biology .nw{white-space:nowrap}
#biology .seam-in{max-width:980px}
#biology h2{text-align:center;font-weight:400;letter-spacing:-.015em;font-size:clamp(34px,1.3rem + 2.5vw,62px);margin:0 0 clamp(14px,3vh,32px)}
#biology .seam-docs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(18px,3vw,44px);text-align:left}
#biology .seam-doc{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(12px,1.4vw,20px);align-items:start;margin:0}
#biology .seam-face{display:block;width:clamp(84px,min(9vw,15vh),160px);height:auto;aspect-ratio:1;border-radius:50%;object-fit:cover;background:#EAE3D8;box-shadow:0 0 0 3px #fff,0 8px 20px rgba(26,54,79,.18)}
#biology .seam-doc h3{margin:2px 0 2px;font-size:clamp(19px,min(1.7vw,3.1vh),27px);line-height:1.2;font-weight:700;color:var(--ink)}
#biology .seam-doc h3 a{color:inherit;text-decoration:none}
#biology .seam-doc h3 a:hover{text-decoration:underline;text-underline-offset:3px}
#biology .seam-role{margin:0 0 8px;font-size:max(16px,clamp(14px,min(1.1vw,2vh),17px));line-height:1.35;color:var(--ink-2)}
#biology .seam-proof{list-style:none;margin:0;padding:0;display:grid;gap:6px}
#biology .seam-proof li{position:relative;padding-left:18px;font-size:max(16px,clamp(15px,min(1.25vw,2.2vh),20px));line-height:1.3;font-weight:500;color:var(--ink)}
#biology .seam-proof li::before{content:"";position:absolute;left:0;top:.42em;width:8px;height:8px;border-radius:50%;background:var(--accent)}
#biology .seam-stats{list-style:none;margin:clamp(16px,3.2vh,34px) 0 0;padding:clamp(12px,2vh,18px) 0 0;border-top:1px solid var(--rule);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,2vw,24px);text-align:left}
#biology .seam-stats li{display:grid;align-content:start;gap:4px;margin:0;font-size:max(16px,clamp(14px,min(1.1vw,2vh),16.5px));line-height:1.3;color:var(--ink-2)}
#biology .seam-stats b{font-size:clamp(26px,min(2.9vw,5.4vh),46px);line-height:1;font-weight:600;letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums}
#biology .btn-row{justify-content:center;margin-top:clamp(16px,3.2vh,32px)}
/* still panel on wide screens (reduced motion, data saver, static mode): the film's own open
   frame behind the words, once seam.js has chosen the still panel (so film visitors never fetch it).
   The v8 rule for this lost to `.js .seam:not(.seam-film) .seam-stage`. */
@media (min-width:901px){.js #biology.seam-static .seam-stage{background:#F7F3EB url(/assets/seam/d-open-v3.webp) center/cover no-repeat}}
/* phones and narrow screens, film or still panel: one column, smaller faces */
@media (max-width:760px){
#biology h2{font-size:clamp(30px,1.2rem + 2vw,40px);text-align:left}
#biology .seam-docs{grid-template-columns:1fr;gap:20px}
#biology .seam-face{width:76px}
#biology .seam-stats{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:14px}
#biology .btn-row{justify-content:flex-start}}
/* the phone film (?seam=film): everything has to fit one screen */
#biology.seam-narrow h2{font-size:30px;margin-bottom:12px}
#biology.seam-narrow .seam-docs{gap:12px}
#biology.seam-narrow .seam-face{width:60px}
#biology.seam-narrow .seam-role{margin-bottom:4px;font-size:max(16px,14px)}
#biology.seam-narrow .seam-proof{gap:2px}
#biology.seam-narrow .seam-proof li{font-size:max(16px,14.5px)}
#biology.seam-narrow .seam-stats{margin-top:12px;padding-top:10px;row-gap:8px}
#biology.seam-narrow .seam-stats li{font-size:max(16px,13px)}
#biology.seam-narrow .seam-stats b{font-size:24px}
#biology.seam-narrow .btn-row{margin-top:12px}
#biology.seam-narrow .btn-ghost{display:none}
/* dna-v9 end */

/* seam-fit begin: short desktop windows, the open film window must hold the whole reveal */
@media (min-width:761px) and (max-height:860px){
#biology.seam-film h2{font-size:clamp(28px,1rem + 2vw,44px);margin-bottom:10px}
#biology.seam-film .seam-docs{gap:clamp(14px,2vw,28px)}
#biology.seam-film .seam-face{width:clamp(56px,9vh,84px)}
#biology.seam-film .seam-doc h3{font-size:clamp(16px,2.6vh,21px)}
#biology.seam-film .seam-role{margin-bottom:4px;font-size:max(16px,13.5px)}
#biology.seam-film .seam-proof{gap:3px}
#biology.seam-film .seam-proof li{font-size:max(16px,clamp(13px,1.9vh,15.5px));line-height:1.25}
#biology.seam-film .seam-stats{margin-top:12px;padding-top:10px}
#biology.seam-film .seam-stats b{font-size:clamp(22px,4.2vh,34px)}
#biology.seam-film .seam-stats li{font-size:max(16px,13px)}
#biology.seam-film .btn-row{margin-top:12px}
#biology.seam-film .btn-row .btn-ghost{display:none}}
@media (min-width:761px) and (max-width:1180px){#biology.seam-film .seam-doc h3 br{display:none}}
/* seam-fit end */

/* polish begin: real headshots in matching portrait frames; one proof stat */
#biology .seam-face{width:clamp(96px,min(10vw,17vh),150px);aspect-ratio:600/680;height:auto;border-radius:14px;object-fit:cover;background:#ECE7DF;box-shadow:0 10px 24px rgba(26,54,79,.16)}
#biology .seam-stats{grid-template-columns:1fr;justify-items:center;text-align:center}
#biology .seam-stats li{justify-items:center;font-size:max(16px,clamp(15px,min(1.2vw,2.2vh),18px))}
@media (max-width:760px){#biology .seam-face{width:96px}#biology .seam-stats{justify-items:start;text-align:left}#biology .seam-stats li{justify-items:start}}
@media (min-width:761px) and (max-height:860px){#biology.seam-film .seam-face{width:clamp(72px,12vh,104px)}}
/* polish end */

/* a2-t2 begin: tablet widths, the two providers stack in one centered column */
@media (min-width:761px) and (max-width:1180px){#biology .seam-docs{grid-template-columns:1fr;max-width:600px;margin-inline:auto}}
/* a2-t2 end */
/* h01: providers one column on small laptops too (A2 owner call) */
@media (min-width:1181px) and (max-width:1366px){#biology .seam-docs{grid-template-columns:1fr;max-width:600px;margin-inline:auto}}