/* Approved editorial additions; established navigation, imagery and transitions stay in place. */
.copy-section{padding-block:80px;background:var(--pale);color:var(--ink)}
.copy-section:nth-of-type(even){background:#fff}
.copy-section h2{font-size:clamp(32px,4vw,56px);line-height:1.12;margin:0 0 32px;max-width:900px}
.copy-section>.wrap>p{max-width:820px;font-size:17px;line-height:1.8}
.copy-section .eyebrow{margin-bottom:24px}
.method-grid,.company-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:32px}
.method-grid article,.company-entry{border-top:1px solid var(--line);padding-top:24px;min-width:0}
.method-grid h3,.company-entry h3{font-size:28px;line-height:1.2;margin:0 0 20px}
.method-grid p,.company-entry p{font-size:17px;line-height:1.8;max-width:620px}
.company-entry .text-link{margin-top:12px}
.hero-intro{position:relative;z-index:2;max-width:500px;font-size:18px;line-height:1.65;margin:24px 0 0;color:var(--ink)}
.business-heading .business-intro{max-width:580px;font-size:16px;line-height:1.6;margin:20px 0 0;color:inherit;text-shadow:0 2px 18px #123b6b60}
.detail-hero .detail-tagline{font-size:clamp(22px,2.4vw,32px);line-height:1.4;color:var(--ink);margin-bottom:20px}
.detail-hero .detail-intro{max-width:900px}
.presence-layout .stats-four{gap:24px}
@media(min-width:761px){
 .method-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:40px}
 .company-grid:has(>.company-entry:nth-child(2)){grid-template-columns:repeat(2,minmax(0,1fr));gap:64px}
}
@media(max-width:760px){
 .hero-intro{font-size:15px;line-height:1.6;max-width:340px;margin-top:20px}
 .business-heading .business-intro{font-size:14px;line-height:1.55;max-width:260px;margin-top:16px}
 .copy-section>.wrap>p,.method-grid p,.company-entry p{font-size:16px;line-height:1.75}
 .method-grid h3,.company-entry h3{font-size:26px}
 .presence-layout>.stats-four{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 24px}
 .presence-layout .stats-four>div{min-width:0}
 .presence-layout .stats-four span{white-space:normal}
}

/* Brand photography: preserve artwork and align image and text top edges. */
.wellbeing-page .brand-section .detail-grid{align-items:start}
.wellbeing-page .brand-section .site-image{position:static;top:auto;margin:0}
.wellbeing-page .brand-section .site-image img{height:auto;aspect-ratio:auto;object-fit:contain}
.wellbeing-page .brand-section .site-image picture{border-radius:6px;overflow:hidden}
.wellbeing-page .brand-section .detail-copy h2{margin-top:0}
@media(max-width:760px){.site-footer .footer-column a[href*="biologics-manufacturing"]{white-space:normal}}

/* Alternate editorial imagery while preserving the mobile reading order. */
.company-entry .company-logo{width:220px;max-width:100%;height:80px;object-fit:contain;object-position:left center;margin:0 0 28px}
.company-entry .button{margin-top:16px}
@media(min-width:761px){.detail-section.reverse-detail .detail-grid>.site-image{grid-column:2;grid-row:1}.detail-section.reverse-detail .detail-grid>.detail-copy{grid-column:1;grid-row:1}}

/* Shared alignment across responsive chronology and closing navigation. */
.business-heading,.business-heading .business-intro,.business-card-inner,.morph-front .business-card-inner{text-align:left!important}
.business-heading{align-items:flex-start!important}
.business-card-inner h3,.morph-front h3{align-self:stretch}
/* Auto-sized business column: left-aligned labels, anchored to the right edge. */
.site-footer .footer-column:last-child{justify-self:end;width:max-content;max-width:100%;text-align:left;min-width:0}
.site-footer .footer-column:last-child a{justify-content:flex-start;white-space:normal;overflow-wrap:normal}
@media(min-width:761px){
 .site-footer .footer-sitemap{grid-template-columns:repeat(3,minmax(0,1fr))}
 .site-footer .footer-column{min-width:0}
}
@media(min-width:381px) and (max-width:760px){
 .site-footer .footer-sitemap{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(20px,4vw,32px)}
 .site-footer .footer-column a{white-space:normal}
}
@media(max-width:380px){.site-footer .footer-column:last-child{justify-self:start;width:auto}}
/* Contact and sitemap use the same column starts at every multi-column size. */
.site-footer .footer-column:last-child{justify-self:stretch;width:auto;text-align:left}
@media(min-width:761px){
 .contact .contact-grid,.site-footer .footer-sitemap{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:clamp(24px,3vw,48px)}
 .contact .contact-grid>div:nth-child(1){grid-column:1;grid-row:1}
 .contact .contact-grid>div:nth-child(2){grid-column:2;grid-row:1}
 .contact .contact-grid>div:nth-child(3){grid-column:3;grid-row:1}
}
@media(min-width:381px) and (max-width:760px){
 .contact .contact-grid,.site-footer .footer-sitemap{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(20px,4vw,32px)}
 .contact .contact-grid>div:first-child{grid-column:1/-1;grid-row:1}
 .contact .contact-grid>.contact-direct{grid-column:1;grid-row:2;order:0}
 .contact .contact-grid>div:last-child{grid-column:2;grid-row:2}
}
/* The final photo card shares the same heading layout as every business card. */
.morph-front h3{max-width:none;text-align:center;letter-spacing:-.025em;align-self:stretch;margin:0;line-height:1.15}
/* Keep compact contact rows aligned without duplicate separators. */
@media(max-width:760px){
 .contact .contact-grid>div:first-child{border-top:0;padding-top:0}
 .contact .contact-grid>.contact-direct,
 .contact .contact-grid>div:last-child{border-top:1px solid #ffffff35;padding-top:20px;align-self:start}
 .contact .contact-grid{row-gap:24px}
}

/* Shared company cards keep their CTAs on the same baseline. */
.company-grid{align-items:stretch}
.company-grid .company-entry{display:flex;flex-direction:column;align-items:flex-start}
.company-grid .company-entry>.button{margin-top:auto}
.company-grid .company-entry>p{margin-bottom:32px}

/* CTA hover changes color without translating the button or arrow. */
.button:hover,.button:focus-visible{transform:none}
:is(a,button):hover .arrow-slide:before,:is(a,button):focus-visible .arrow-slide:before{transform:translateX(0)}
:is(a,button):hover .arrow-slide:after,:is(a,button):focus-visible .arrow-slide:after{transform:translateX(-105%)}
.home-logo-intro{display:none;position:fixed;inset:0;z-index:100;background:#fff;place-items:center;pointer-events:none}
.show-home-intro .home-logo-intro{display:grid;animation:logo-intro-exit .5s ease 1.8s forwards}
.intro-lockup{position:relative;width:clamp(260px,26vw,320px);aspect-ratio:957.7/264.24;--intro-scale:2.5}
.intro-lockup img{position:absolute;top:0;height:100%;width:auto}
.intro-sbc{left:0;transform-origin:center;animation:logo-intro-mark 1s ease-in-out both}
.intro-name{right:0;animation:logo-intro-name 1.5s ease both}
@keyframes logo-intro-mark{0%{transform:translateX(32%) scale(var(--intro-scale))}50%{transform:translateX(32%) scale(1)}100%{transform:translateX(0) scale(1)}}
@keyframes logo-intro-name{0%,50%{opacity:0}100%{opacity:1}}
@keyframes logo-intro-exit{to{opacity:0;visibility:hidden}}
@media(max-width:760px){.intro-lockup{--intro-scale:1.8}}
@media(prefers-reduced-motion:reduce){.show-home-intro .home-logo-intro{display:none}}
.hero .hero-business-menu.button{padding:20px 24px;border:1px solid transparent;border-radius:4px;color:#fff;cursor:pointer}
.hero .hero-business-menu.button:hover,.hero .hero-business-menu.button:focus-visible{background:#063777;color:#fff}
@media(max-width:760px){.hero .hero-business-menu.button{padding:17px 20px}}

/* Company marks retain their original colors and proportions. */
.incubated-companies{padding-block:80px;background:#fff;overflow:hidden}
.incubated-companies h2{font-size:clamp(32px,4.2vw,58px);line-height:1.15;margin:0 0 48px;color:var(--ink)}
.company-logo-marquee{overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
.company-logo-marquee:focus-visible{outline:2px solid var(--brand);outline-offset:-4px}
.company-logo-track{display:flex;width:max-content;animation:company-logos-left 44s linear infinite}
.company-logo-group{display:flex;align-items:center;gap:48px;list-style:none;padding:0 48px 0 0;margin:0;flex-shrink:0}
.company-logo-group li{display:flex;align-items:center;justify-content:center;width:auto;height:120px;flex:none}
.company-logo-group img{display:block;max-width:220px;width:auto;height:72px;object-fit:contain}

@keyframes company-logos-left{to{transform:translateX(-50%)}}
@media(max-width:760px){.company-logo-group{gap:32px;padding-right:32px}.company-logo-group li{width:auto;height:100px}.company-logo-group img{height:56px;max-width:180px}.company-logo-track{animation-duration:38s}.incubated-companies h2{margin-bottom:32px}}
@media(prefers-reduced-motion:reduce){.company-logo-marquee{overflow-x:auto;mask-image:none;padding-inline:var(--gutter)}.company-logo-track{animation:none}.company-logo-group[aria-hidden=true]{display:none}}

/* Remove viewport-forced empty space between About and the family marks. */
.about{min-height:0;padding-block:80px}
.incubated-companies{background:#edf4fa}

/* Keep the introduction and family logos together in a desktop viewport. */
@media(min-width:761px){
 .about .about-portrait img{height:clamp(240px,32vh,320px);aspect-ratio:auto;object-fit:cover}
 .incubated-companies{margin-top:-80px;position:relative}
 .incubated-companies h2{font-size:clamp(32px,3.2vw,46px);margin-bottom:24px}
 .company-logo-group li{height:96px}
}
.company-logo-group img[src*="taiwan-bio-tight"]{max-width:none}
@media(max-width:760px){
 .global-presence .presence-layout .stats{grid-template-columns:1fr;gap:56px}
 .global-presence .presence-layout .stats strong{font-size:clamp(96px,28vw,132px);font-weight:650;line-height:1;letter-spacing:-.055em}
 .global-presence .presence-layout .stats span{font-size:clamp(20px,5.6vw,26px);line-height:1.2;margin-top:12px;letter-spacing:0}
}

/* About editorial banner and connected company strip. */
.about{position:relative;isolation:isolate;overflow:hidden;background:var(--brand);color:#fff;min-height:520px;display:flex;align-items:center;padding-block:80px}
.about>.wrap{display:block;position:static;width:100%}
.about .about-heading{display:flex;flex-direction:column;position:relative;z-index:2;max-width:550px;gap:28px;margin:0;align-items:stretch}
.about .about-title h1{color:#fff;font-size:clamp(48px,5vw,72px);line-height:1.08}
.about .about-lead p{color:#fff;font-size:clamp(17px,1.4vw,20px);line-height:1.7;max-width:540px}
.about .about-grid{display:block}
.about .about-grid>.about-portrait{position:absolute;inset:0;top:0;height:100%;width:100%;margin:0;z-index:0;border-radius:0}
.about .about-portrait picture{position:absolute;inset:0;width:100%;height:100%;border-radius:0}
.about .about-portrait img{width:100%;height:100%;aspect-ratio:auto;object-fit:cover;object-position:75% 48%}
.about:after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,#08499efa 0%,#08499eed 30%,#08499eb8 49%,#08499e2b 76%,#08499e26 100%)}
.incubated-companies{display:grid;grid-template-columns:260px minmax(0,1fr);align-items:center;gap:40px;margin-top:0;padding:80px 0 80px var(--gutter);background:#f4f8fb;border-bottom:1px solid #d8e4ee}
.incubated-companies>.wrap{width:auto;max-width:none;margin:0;padding:0}
.incubated-companies h2{font-size:26px;line-height:1.3;letter-spacing:-.025em;margin:0;max-width:240px}
.company-logo-group li{height:80px}
.company-logo-group img{height:60px;max-width:210px}
.company-logo-group img[src*="taiwan-bio-tight"]{max-width:none}
@media(min-width:1101px){.about{min-height:calc(100svh - 336px)}}
@media(min-width:761px) and (max-width:1100px){.about .about-heading{max-width:48%}.incubated-companies{grid-template-columns:210px minmax(0,1fr);gap:24px}.incubated-companies h2{font-size:23px}}
@media(max-width:760px){
 .about{min-height:0;padding-block:80px}
 .about .about-heading{max-width:none;gap:24px}
 .about .about-title h1{font-size:48px}
 .about .about-lead p{font-size:17px;line-height:1.75}
 .about:after{background:linear-gradient(90deg,#08499ef2,#08499ec9)}
 .about .about-portrait img{object-position:65% center}
 .incubated-companies{grid-template-columns:1fr;gap:28px;padding:80px 0}
 .incubated-companies>.wrap{padding-inline:var(--gutter)}
 .incubated-companies h2{max-width:none;font-size:25px;margin:0}
 .company-logo-group img{height:48px;max-width:170px}
 .company-logo-group li{height:64px}
 .global-presence .presence-layout .stats{gap:40px}
 .global-presence .presence-layout .stats strong{font-size:clamp(72px,20vw,96px)}
 .global-presence .presence-layout .stats span{font-size:clamp(14.4px,4vw,19.2px);margin-top:9px}
}

/* Balanced family mark and compact mobile presence metrics. */
.company-logo-group img[src*="taiwan-bio-tight"]{height:50px}
@media(max-width:760px){
 .company-logo-group img[src*="taiwan-bio-tight"]{height:40px}
 .global-presence .presence-layout .stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 24px}
 .global-presence .presence-layout .stats>div{min-width:0}
 .global-presence .presence-layout .stats strong{font-size:clamp(48px,13vw,64px)}
 .global-presence .presence-layout .stats span{font-size:clamp(11px,2.8vw,13px);line-height:1.3;margin-top:8px;white-space:nowrap}
}

/* Mobile hero keeps its full introduction and navigation in one viewport. */
@media(max-width:760px){
 .hero{height:100svh;min-height:660px;padding-top:112px;padding-bottom:max(20px,env(safe-area-inset-bottom))}
 .hero h1{font-size:clamp(32px,9.8vw,44px);line-height:1.08}
 .hero .hero-intro{font-size:14px;line-height:1.55;margin-top:18px;max-width:340px}
 .hero-ring{inset:140px 0 145px}
 .hero .hero-buttons{bottom:46px}
 .hero .hero-business-menu.button{padding:15px 20px}
 .hero .hero-foot{bottom:0;flex-wrap:nowrap}
 .hero .scroll-link{font-size:10px}
}
@media(max-width:760px) and (max-height:740px){
 .hero{padding-top:100px}
 .hero .hero-intro{margin-top:14px;font-size:13px}
 .hero-ring{inset:122px 0 132px}
}

@media(max-width:760px){
 .hero h1>span{display:block}
 .navigation .business-nav a,.navigation .navigation-extra,.navigation .navigation-label{font-size:14px}
}