/* ============================================================================
   STERiJECT homepage sections. Loads on the front page only.
   Shared chrome lives in base.css.
   ========================================================================== */

.hero{position:relative;min-height:100vh;display:flex;align-items:flex-end;background:#00345F;overflow:hidden}
.hero-vid{position:absolute;inset:0;overflow:hidden;background:url("../img/hero-poster.jpg") center 38%/cover no-repeat}
.hero-vid video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 38%}
.hero-vid::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,rgba(11,32,54,.82) 0%,rgba(24,48,74,.5) 55%,rgba(9,29,50,.7) 100%);background:linear-gradient(105deg,oklch(.24 .075 250/.82) 0%,oklch(.30 .07 250/.5) 55%,oklch(.22 .075 250/.7) 100%)}
.hero-in{position:relative;padding:0 var(--pagepad) var(--space-24);width:100%;display:flex;flex-direction:column;gap:var(--space-6)}
/* The hero children share one gap, but the h1's line box adds ~15px of space above
   its capitals at large sizes, so the eyebrow reads further away than the rest.
   Pull just that pair closer; every other gap is unchanged. */
.hero-in>.eyebrow{margin-bottom:calc(-1 * var(--space-3))}
.hero-h1{margin:0;font-size:clamp(2.5rem,1.5rem + 3.75vw,var(--size-7xl));line-height:var(--leading-tight);letter-spacing:var(--tracking-display);font-weight:var(--weight-semibold);color:var(--white);max-width:22ch}
.hero-sub{margin:0;font-size:clamp(1.125rem,1rem + .8vw,var(--size-xl));line-height:var(--leading-snug);font-weight:var(--weight-light);color:var(--white);max-width:44ch}
.hero-cta{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-4)}
.intro{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-20);align-items:start}
.intro-h{margin:0;font-size:clamp(2rem,1.4rem + 2.2vw,48px);line-height:var(--leading-snug);letter-spacing:var(--tracking-heading);font-weight:var(--weight-light);color:var(--text-brand);text-wrap:balance}
.intro-body{display:flex;flex-direction:column;gap:var(--space-6);padding-top:var(--space-2)}
.princ{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-20);margin-top:var(--space-12);padding-top:var(--space-8);border-top:var(--stroke-frame) solid var(--tsk-blue-100)}
.princ-txt{margin:0;font-size:var(--size-xl);line-height:var(--leading-snug);font-weight:var(--weight-light);color:var(--ink);text-wrap:pretty}
.princ-txt b{font-weight:var(--weight-medium);color:var(--text-brand)}
.g3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-6);align-items:stretch}
.sj .path-card{position:relative;display:flex;flex-direction:column;justify-content:flex-end;gap:var(--space-3);min-height:480px;padding:var(--space-8);border-radius:var(--radius-lg);overflow:hidden;background:#00345F;box-shadow:inset 0 0 0 1px rgba(255,255,255,.10);transition:transform .25s ease,box-shadow .25s ease;color:inherit}
.path-media{position:absolute;inset:0;background:url("../img/path-practitioner.jpg") center 38%/cover no-repeat;transition:transform .6s cubic-bezier(.22,.61,.36,1)}
.path-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,52,95,.30) 0%,rgba(0,52,95,.62) 38%,rgba(0,52,95,.94) 68%,#00345F 100%)}
.path-media--drugdev{background-image:url("../img/path-drugdev.jpg");background-position:calc(50% - 142px) calc(40% - 116px)}
.path-media--research{background-image:url("../img/path-research.jpg");background-position:center 55%}
.sj .path-card:hover{transform:translateY(-4px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.20),var(--shadow-md)}
.path-card:hover .path-media{transform:scale(1.045)}
.path-card .h3{color:var(--white);position:relative;font-weight:var(--weight-regular);letter-spacing:var(--tracking-tight)}
/* No forced paragraph height. It was sized for the older, much longer card
   copy and equalised the three cards by brute force; with the V6 copy it just
   padded out empty space between the text and the link. .g3 already stretches
   the cards to a common height, and the card bottom-aligns its own content, so
   the three "Learn more" rows still line up. */
.path-card .p{color:var(--white);position:relative}
.path-num{position:relative;margin-bottom:auto;display:flex;align-items:center;gap:var(--space-3);font-size:var(--size-2xs);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--white);font-variant-numeric:tabular-nums;text-shadow:0 1px 14px rgba(0,0,0,.55)}
.path-num::after{content:"";height:1px;width:32px;background:rgba(255,255,255,.45);box-shadow:0 1px 10px rgba(0,0,0,.4)}
.path-card .link{color:var(--white);position:relative;width:100%;justify-content:space-between;margin-top:var(--space-6);padding-top:var(--space-5);border-top:var(--stroke-hairline) solid rgba(255,255,255,.22);transition:border-color .25s ease}
.path-card:hover .link{border-top-color:rgba(255,255,255,.5)}
.path-card .link svg{transition:transform .2s ease}
.path-card:hover .link svg{transform:translateX(3px)}
.eng{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-6)}
.eng-fig{display:flex;align-items:center;justify-content:center;padding:var(--space-4)}
/* Cap the render height so no single image dictates a taller row than the rest.
   The hub render is square while the others are landscape, which made row one
   40% deeper than rows two and three and stretched its two cards. max-height:100%
   did nothing here — .eng-fig has no fixed height, so the percentage never
   resolved. */
.eng-fig img{max-width:100%;max-height:300px;object-fit:contain}
.eng-item{position:relative;display:flex;flex-direction:column;justify-content:flex-end;padding:var(--space-8);border-radius:var(--radius-lg);overflow:hidden;background:#F4F7FA;box-shadow:inset 0 0 0 1px var(--line);transition:transform .25s ease,box-shadow .25s ease}
.eng-item:hover{transform:translateY(-4px);box-shadow:inset 0 0 0 1px var(--tsk-blue-100),var(--shadow-md)}
.eng-num{position:relative;display:flex;align-items:center;gap:var(--space-3);margin-bottom:var(--space-6);font-size:var(--size-2xs);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-brand);font-variant-numeric:tabular-nums}
.eng-num::after{content:"";height:1px;width:32px;background:var(--line)}
.eng-txt{position:relative;display:flex;flex-direction:column;gap:var(--space-3)}
.eng-txt .h3{color:var(--ink);font-weight:var(--weight-regular);letter-spacing:var(--tracking-tight)}
/* No forced paragraph height — same reason as .path-card .p: it was sized for
   the older long-form copy and now only pads empty space under the text. The
   grid rows already give the cards in a row a common height. */
.eng-txt .p{color:var(--neutral-700)}
.eng-txt .link{color:var(--text-brand);width:100%;justify-content:space-between;margin-top:var(--space-6);padding-top:var(--space-5);border-top:var(--stroke-hairline) solid var(--line);transition:border-color .25s ease}
.eng-item:hover .link{border-top-color:var(--tsk-blue)}
.eng-item .link svg{transition:transform .2s ease}
.eng-item:hover .link svg{transform:translateX(3px)}
.fam{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-6);align-items:stretch}
.sj .fam-item{display:flex;flex-direction:column;padding:var(--space-6);background:var(--white);border:var(--stroke-hairline) solid var(--line);border-radius:var(--radius-lg);text-decoration:none;color:inherit;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.sj .fam-item:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--tsk-blue-100)}
.fam-flag{display:flex;align-items:flex-start;min-height:22px;margin-bottom:var(--space-4)}
.fam-badge{display:inline-flex;font-size:var(--size-3xs);letter-spacing:var(--tracking-label);text-transform:uppercase;font-weight:var(--weight-medium);color:var(--white);background:var(--tsk-blue);padding:3px 8px;border-radius:var(--radius-sm)}
.fam-head{display:flex;flex-direction:column;gap:var(--space-1);margin-bottom:var(--space-4)}
.fam-code{font-size:var(--size-xl);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-tight);color:var(--text-brand);line-height:1.05}
.fam-name{font-size:var(--size-3xs);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--ink-2)}
.fam-sum{margin:0 0 var(--space-5);font-size:var(--size-sm);line-height:var(--leading-body);color:var(--neutral-700)}
.fam-specs{display:flex;flex-direction:column;margin:auto 0 0;padding:0}
.fam-spec{display:flex;flex-direction:column;gap:2px;padding:var(--space-3) 0;border-top:var(--stroke-hairline) solid var(--line-soft)}
.fam-spec dt{margin:0;font-size:var(--size-3xs);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--ink-2)}
.fam-spec dd{margin:0;font-size:var(--size-sm);color:var(--ink);font-variant-numeric:tabular-nums}
.fam-item .link{margin-top:var(--space-5);color:var(--text-brand)}
.fam-item .link svg{transition:transform .2s ease}
.fam-item:hover .link svg{transform:translateX(3px)}
.fam-note{margin:var(--space-6) 0 0;font-size:var(--size-xs);color:var(--text-muted)}
.collab{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:var(--space-20);align-items:stretch}
.collab-fig{align-self:stretch;border-radius:var(--radius-md);overflow:hidden}
.collab-fig img{width:100%;height:100%;object-fit:cover;display:block}
.refs{padding:var(--space-16) var(--pagepad);background:var(--fill)}
.refs-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-6) var(--space-16);margin:var(--space-8) 0 0;padding:0;list-style:none;counter-reset:r}
.refs-list li{display:grid;grid-template-columns:26px minmax(0,1fr);gap:var(--space-4);padding-top:var(--space-4);border-top:var(--stroke-hairline) solid var(--line);font-size:var(--size-xs);line-height:var(--leading-normal);color:var(--neutral-600)}
.refs-list li::before{counter-increment:r;content:counter(r);font-weight:var(--weight-medium);color:var(--text-brand);font-variant-numeric:tabular-nums}
.refs-list em{font-style:italic}
.refs-list a{color:var(--text-brand);text-decoration:none;border-bottom:1px solid rgba(0,114,189,.3);word-break:break-word}
.refs-list a:hover{border-bottom-color:var(--text-brand)}
@media (max-width:1180px){
  .fam{grid-template-columns:repeat(2,minmax(0,1fr))}
  .intro,.princ{gap:var(--space-12)}
  .collab,.cta-in{gap:var(--space-12)}
}
@media (max-width:1024px){
  .g3,.eng{grid-template-columns:repeat(2,minmax(0,1fr))}
  .eng-item,.eng-fig{grid-column:auto !important;grid-row:auto !important}
  .path-card{min-height:460px}
}
@media (max-width:768px){
  .intro,.princ,.collab,.cta-in{grid-template-columns:minmax(0,1fr)}
  .princ{margin-top:var(--space-8)}
  .g3,.eng,.fam{grid-template-columns:minmax(0,1fr)}
  .refs-list{grid-template-columns:minmax(0,1fr);gap:var(--space-5)}
  .hero{min-height:88vh}
}
@media (max-width:520px){
  .hero-cta .btn,.cta-btns .btn{width:100%}
}