/* One centered frame connects the navigation, story, controls and footer. */
:root{--content-width:1560px;--page-gutter:max(6%,calc((100% - var(--content-width))/2));--header:112px}
.wrap{width:min(var(--content-width),88%);margin-inline:auto}
.chapter{scroll-margin-top:var(--header)}
.site-header{min-height:var(--header);padding:24px var(--page-gutter) 16px;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:28px}
.site-header .brand{height:auto;justify-self:start}
.site-header nav{justify-self:center;white-space:nowrap}
.header-actions{justify-self:end;white-space:nowrap}
/* Keep the hero's copy and photograph balanced within the same composition. */
.opening .hero-type{min-height:inherit;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding-block:64px 80px}
.opening .hero-type h1{max-width:790px}
.clients{grid-template-columns:180px minmax(0,1fr);padding-inline:var(--page-gutter);gap:24px}
.clients-label{padding:0;white-space:nowrap}
.logo-window{min-width:0}
.system.scene-light{width:100%;padding-inline:var(--page-gutter)}
.pattern-controls{width:min(660px,88%);margin-left:var(--page-gutter);margin-right:auto}
.history-context{width:min(545px,88%);margin-left:var(--page-gutter);margin-right:auto}
@media(max-width:1100px){.site-header{display:flex;justify-content:space-between;gap:18px}}
@media(max-width:800px){:root{--header:104px}.site-header{padding-block:24px 16px}.pattern-controls{width:88%;max-width:none}.history-context{width:88%;max-width:570px}.opening .hero-type{padding-block:64px 80px}.clients{grid-template-columns:160px minmax(0,1fr);gap:16px}}
@media(max-width:560px){:root{--header:88px}.site-header{padding:22px 5% 14px;gap:8px}.site-header .brand{height:auto}.header-actions{gap:4px}.opening .hero-type{padding-block:50px 65px}.clients{grid-template-columns:minmax(0,1fr);padding-block:20px;gap:10px}.clients-label{text-align:center}.history-context{max-width:none}.bridge-line,.bridge-line.second{text-align:center}.opening .hero-type h1{max-width:100%}}
@media(max-width:360px){.site-header{padding-inline:4%;gap:4px}}

/* Fit the opening composition and client strip into the first viewport. */
.opening{min-height:max(360px,calc(100svh - var(--opening-reserved,252px)))}
@media (min-width: 1001px) {
  .biocycle-page .opening {
    min-height: max(360px, calc(100svh - var(--opening-reserved, 252px) + 4px));
  }
}
.opening .hero-type{padding-block:clamp(24px,4svh,48px)}
.opening .hero-type h1{font-size:clamp(36px,min(4.7vw,7.4svh),72px)}
@media(max-height:800px){
  .opening .hero-type .eyebrow{margin-bottom:18px}
  .opening .hero-intro{margin-top:20px}
  .opening .hero-type .actions{margin-top:20px}
}
@media(max-width:800px){
  .opening .hero-type h1{font-size:clamp(36px,min(6vw,7svh),48px)}
}
@media(max-width:560px){
  .opening .hero-type{padding-block:20px}
  .opening .hero-type h1{font-size:clamp(24.64px,4.158svh,30.03px)}
  .opening .hero-type .actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;width:100%;max-width:370px}
  .opening .hero-type .button{font-size:12px;padding:12px 10px;gap:8px;min-height:48px}
}

/* Compact, evenly padded navigation; retain the exact logo at its approved size. */
:root{--header:80px}
.site-header{min-height:var(--header);padding-block:16px}
.site-header .brand{--logo-source-width:220.8px;position:relative;overflow:hidden;width:calc(var(--logo-source-width) * 355 / 480);height:44px;min-height:44px}
.site-header .brand .brand-image{position:absolute;width:var(--logo-source-width);max-width:none;height:auto;left:calc(var(--logo-source-width) * -58 / 480);top:50%;transform:translateY(-53.81%)}
/* Fill the hero edge to edge with minimal overscan for its gentle parallax. */
.opening{background:#fff}
.opening.scene-image>.hero-image{inset:0;width:100%;background:#fff}
.opening .hero-photo{position:relative;top:0;height:100%;object-fit:cover;object-position:65% 52%}
.opening .hero-type h1{max-width:100%;font-size:clamp(30.8px,min(3.157vw,5.852svh),52.36px);line-height:1.08;text-wrap:initial}
.opening .hero-type h1 .hero-line{white-space:nowrap}
.opening .hero-type h1 .soft-ink{margin-top:8px}
@media(max-width:1100px){
  .opening .hero-type h1{font-size:clamp(26.18px,3.157vw,35.42px)}
}
@media(max-width:800px){
  .opening .hero-type h1{font-size:clamp(21.56px,3.465vw,27.72px)}
}
@media(max-width:560px){
  :root{--header:72px}
  .site-header{padding-block:12px}
  .site-header .brand{--logo-source-width:151.2px;height:44px}
  .opening .hero-type h1{font-size:clamp(24.64px,4.158svh,30.03px)}
  .opening .hero-type h1 .hero-line{white-space:normal}
  .opening .hero-photo{object-fit:cover;object-position:70% center}
}
@media(max-width:360px){.site-header .brand{--logo-source-width:129.6px}}

/* Quieter client strip: smaller marks, deeper gray, no enclosing rules. */
.clients,.clients .logo-window,.clients .logo-track{border:0;outline:0;box-shadow:none}
.clients .logo-crop{transform:scale(.8);transform-origin:center}
.clients .logo-crop img{filter:url(#logo-gray) brightness(.9)}
@media(max-width:560px){.clients .logo-crop{transform:scale(.72)}}

/* Increase only the hero product label by 30%. */
.opening .hero-type .eyebrow{font-size:15.6px}

/* Desktop hero height follows width, so the scene crop matches across window heights. */
@media(min-width:1001px){html body .opening{min-height:max(420px,min(clamp(560px,39vw,860px),calc(100svh - var(--header,76px) - 134px)))!important;height:max(420px,min(clamp(560px,39vw,860px),calc(100svh - var(--header,76px) - 134px)))}}