/* Group green leads. Colored surfaces use white type; neutral surfaces use black type. */
:root{--green:#0dcea9;--brand-blue:#0088db;--blue:#161b19;--paper:#fff;--gold:#0dcea9;--line:#161b1933}
body{background:#fff;color:var(--blue);font-size:17px}
.page-content .dialog-label{font-size:16px;opacity:1;color:var(--blue)}
.hero .hero-title-wrap>p{font-size:19px}
.header{background:#fff;color:var(--blue);border-color:var(--line)}
.header nav{font-size:16px;gap:25px}.header nav a.active{color:var(--blue)}.menu-toggle{font-size:16px}
.logo .brand-type{display:block}.brand-type strong{font-size:25px}.logo img{width:49px;height:49px}
.hero,.hero[data-scene=city]{background:var(--green);color:#fff;height:calc(100svh - 94px);min-height:690px;max-height:900px}
.hero-title-wrap{left:6%;top:15%;width:43%;z-index:3}
.hero-word{font-size:clamp(145px,15vw,230px);line-height:1.15;color:#fff;letter-spacing:-.07em}
.hero h1,.hero[data-scene=city] h1{font-size:clamp(32px,3.5vw,50px);margin-top:32px;line-height:1.45;letter-spacing:1px;max-width:none}
.hero-title-wrap>p,.hero[data-scene=city] .hero-title-wrap>p{font-size:19px;line-height:1.8;opacity:1;color:#fff;letter-spacing:0;margin-top:26px}
.city-stage{transform:none!important;inset:0;transition:none}
.hero .landmark{display:none;opacity:1;filter:none;transform:none;transition:opacity .3s;object-fit:contain}
.hero .main-landmark{display:block;left:53%;top:auto;bottom:16%;width:42%;height:65%}
.hero[data-scene=city] .main-landmark{display:none}
.hero[data-scene=city] .bridge{display:block;width:36%;height:44%;left:52%;top:auto;bottom:16%;opacity:1;transform:none}
.hero[data-scene=city] .pagoda{display:block;width:15%;height:40%;left:82%;top:auto;bottom:46%;opacity:1}
.hero[data-scene=city] .extra-landmark.flower{display:block;width:12%;height:26%;left:56%;top:auto;bottom:57%;opacity:1}
.scene-controls{left:6%;bottom:40px;gap:32px}
.scene-controls button,.hero[data-scene=city] .scene-controls button{font-size:18px!important;opacity:1;color:#fff;padding:14px 0;border-color:transparent}
.scene-controls button[aria-selected=true],.hero[data-scene=city] .scene-controls button[aria-selected=true]{border-color:#fff;border-bottom-width:2px}
.service-dock{background:var(--brand-blue);color:#fff}
.service-dock>a{color:#fff;border-color:#ffffff66!important;padding:28px 24px}
.service-dock>a>span:nth-child(1){font-size:25px;font-weight:500}.service-dock>a b{color:#fff;font-size:30px}
.announcement{font-size:16px;border-color:var(--line)}.announcement>span:first-child{font-size:16px}
.section{padding:72px 4% 82px}.section-index,.section-index>a,.section-index>span:last-child{font-size:16px;letter-spacing:0;opacity:1;color:var(--blue)}
.section-index>a{font-weight:500}.profile-layout,.pharma-layout,.strength-layout{gap:6%}
.profile-copy h2,.pharma-layout h2,.strength-layout h2{font:500 clamp(38px,3.5vw,54px)/1.45 var(--serif);letter-spacing:0}
.profile-copy>p,.pharma-layout p,.strength-layout p{font-size:18px;line-height:1.95;color:var(--blue);margin-top:25px}
.profile-facts>span{font-size:16px;color:var(--blue)}.profile-facts strong{font-size:40px;color:var(--green)}
.line-link{font-size:18px;padding:21px 0}.line-link>span{color:inherit}
.photo figcaption,.concept-photo figcaption,.page-content .photo figcaption{background:var(--blue);color:#fff;font-size:14px;line-height:1.7;padding:8px 13px;border:0;letter-spacing:0}
.city-gallery{background:#fff;border-color:var(--line);padding:40px 4%}
.city-gallery-heading h2{font-size:32px}.landmark-gallery{gap:22px;margin-top:30px}.landmark-gallery img{height:165px;padding:8px}
.landmark-gallery figcaption{border-color:var(--line);padding-top:16px}.landmark-gallery figcaption span{font-size:18px;color:var(--blue)}
.home-pharma,.business{background:#fff}.pharma-categories small{font-size:16px;color:var(--blue)}.pharma-categories strong{font-size:25px}.pharma-categories>a>span{color:var(--blue)}
.business-heading{margin:35px 0}.business-heading h2{font-size:48px;letter-spacing:0}
.business-accordion{height:370px;border:0;gap:2px}
.business-panel,.business-panel.active,.business-panel:not(.active):hover{display:block;background:var(--green);color:#fff;border:0;padding:24px;min-width:0;text-decoration:none;transition:flex .4s}
.business-panel{flex:1}.business-panel.active{flex:3.5}
.sector-name{font-size:27px;left:26px;top:30px;letter-spacing:5px}
.sector-glyph{color:#fff;font-size:215px;bottom:35px;right:3px}.active .sector-glyph{opacity:.12}
.sector-summary{font-size:17px;left:26px;bottom:70px;line-height:1.9;color:#fff;text-shadow:none}
.sector-hint{opacity:1;left:auto;right:25px;bottom:22px;font:30px Arial;color:#fff}
.business-panel:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.home-strength{background:var(--green);color:#fff}
.home-strength .section-index,.home-strength .section-index>a,.home-strength .strength-layout p,.home-strength .strength-numbers>div>span,.home-strength .strength-numbers strong,.home-strength .data-source,.strength-links a{color:#fff;opacity:1}
.strength-numbers{gap:34px;margin-top:32px}.strength-numbers>div strong{font-size:52px}.strength-numbers strong small{font-size:18px}.strength-numbers>div>span{font-size:16px}
.data-source,.home-strength .data-source{font-size:14px;line-height:1.8}.strength-links{font-size:17px;gap:23px;flex-wrap:wrap;border-color:#ffffff66}
.journal-cover{background:var(--brand-blue);color:#fff}.journal-cover .section-index,.journal-cover h2>span{color:#fff}
.journal-bottom{font-size:17px;line-height:1.8;color:#fff}.journal-tabs button{font-size:18px;opacity:1}
.journal-row small{font-size:15px;color:var(--blue);opacity:1}.journal-row h3{font-size:24px;line-height:1.6}.journal-row{padding:27px 0}
.anniversary-link{background:var(--green);color:#fff}.anniversary-link img{filter:grayscale(1) brightness(0) invert(1)}.anniversary-link strong{font-size:20px}.anniversary-link small{display:none}
.journal-empty h3{font-size:27px}.journal-empty p{font-size:17px;line-height:1.9}
.catalog{background:#fff;border-bottom:1px solid var(--line)}.catalog-title h2{font-size:48px}.catalog-title p{font-size:18px;opacity:1;line-height:1.9}.catalog-table a strong{font-size:27px}.catalog-table a b{color:var(--blue)}
.story-title{padding-left:0;gap:7%}.story-title h2{font-size:46px;line-height:1.6}.story-title p{font-size:18px;line-height:1.9;opacity:1}
.timeline-year{color:var(--green);font-size:82px}.timeline-caption{font-size:18px;line-height:1.8}.story-values>span,.story-values a{font-size:16px}.story-values p{font-size:23px;letter-spacing:0}
.contact{background:var(--green);color:#fff}.contact h2>span{color:#fff}.contact>div>span{font-size:17px}.contact-details>span{font-size:17px!important;opacity:1!important}.contact-details a{font-size:38px}.contact-details p{font-size:16px;line-height:1.8}
footer{color:var(--blue);background:#fff}.footer-logo+div{display:none}.footer-links{font-size:16px}.footer-bottom{font-size:14px;opacity:1}.footer-bottom>span:nth-child(2){display:none}.footer-logo .brand-type strong{font-size:23px}
.site-menu{background:var(--green);color:#fff}.menu-statement{color:#fff;font-size:60px}.menu-layout nav>*{font-size:27px}.site-menu nav>*:hover{color:#fff;text-decoration:underline}
.site-menu form{width:70%}.site-menu form label{font-size:16px;opacity:1}.site-menu input{font-size:18px}.site-menu input::placeholder{color:#fff;opacity:1}#search-results>a,#search-results>p{font-size:17px;opacity:1}.close-dialog{font-size:17px}
.page-hero{background:var(--green);color:#fff;border:0;padding:30px 4% 55px}.breadcrumbs,.breadcrumbs a{font-size:16px;color:#fff;opacity:1}.page-hero h1{font-size:clamp(40px,4vw,62px);margin-top:0}.page-hero-row>p{font-size:18px;color:#fff;max-width:340px}
.page-sidebar>a{font-size:17px;color:var(--blue)}.page-sidebar>a.active{color:var(--green)}.page-content>p,.page-content li,.page-content .data-source{font-size:18px;line-height:2;color:var(--blue)}.page-content>h2{font-size:38px}.page-content>h3{font-size:27px}.page-content>.article-lead{font-size:27px;color:var(--blue)}
.page-content .reference-note{background:#fff;color:var(--blue);font-size:16px;border:1px solid var(--line);border-left:3px solid var(--green);line-height:1.9}.reference-note b{font-size:16px;color:var(--blue)}
.page-content .photo.anniversary-figure{background:var(--green)}.anniversary-figure img{filter:grayscale(1) brightness(0) invert(1)}
.page-link-grid a{font-size:26px}.business-directory h2{font-size:30px}.business-directory p{font-size:18px}.business-directory>a small{font-size:16px}
.facts-strip strong{font-size:40px;color:var(--green)}.facts-strip>span{font-size:16px;color:var(--blue)}.file-list strong{font-size:23px}.file-list span{font-size:16px;color:var(--blue)}
.catalog-filter label,.catalog-filter button,.filter-status{font-size:16px}.catalog-filter input{font-size:18px}.product-form{background:var(--green);color:#fff;font-size:16px}.product-row strong{font-size:24px}.product-row small{font-size:16px}.sample-badge{color:var(--blue);font-size:14px}
.specifications dt,.specifications dd{font-size:17px}.specifications dt{background:var(--green);color:#fff}.product-detail-top h2{font-size:36px}.product-detail-top p{font-size:18px}.process-list strong{font-size:26px}.process-list p,.editorial-topics p{font-size:18px}.process-list li:before{color:var(--green)}
.contact-page small{font-size:17px}.contact-page a{color:var(--blue)}.page-end{font-size:17px}
@media(max-width:1100px){.header nav{display:none}.hero .main-landmark{left:53%;width:44%}.hero h1,.hero[data-scene=city] h1{font-size:34px}.hero-title-wrap>p{font-size:17px}.profile-layout,.pharma-layout,.strength-layout{gap:5%}.profile-copy h2,.pharma-layout h2,.strength-layout h2{font-size:38px}.profile-facts{gap:10px}.profile-facts>span{font-size:14px}.strength-numbers{gap:22px}.strength-numbers>div strong{font-size:42px}.business-panel.active{flex:3}.sector-name{left:17px;font-size:23px}.sector-summary{left:17px;font-size:16px}.sector-hint{right:19px}.catalog-title h2,.story-title h2{font-size:38px}.interior-layout{grid-template-columns:175px 1fr;gap:5%}.page-hero-row>p{max-width:245px}.story-values p{font-size:19px}.service-dock>a>span:nth-child(1){font-size:23px}}
@media(max-width:650px){
 .header{height:78px;padding:0 22px}.logo img{width:43px;height:43px}.logo .brand-type{padding:0}.brand-type strong{font-size:23px;letter-spacing:3px}.menu-toggle{font-size:16px}
 .hero,.hero[data-scene=city]{height:760px;min-height:0;max-height:none}.hero-title-wrap{top:48px;left:22px;width:calc(100% - 44px)}.hero-word{font-size:126px;line-height:1.1}.hero h1,.hero[data-scene=city] h1{font-size:30px;line-height:1.5;margin-top:21px;max-width:none}.hero h1 br{display:block}.hero-title-wrap>p,.hero[data-scene=city] .hero-title-wrap>p{font-size:17px;margin-top:14px}
 .hero .main-landmark{left:12%;width:81%;height:37%;top:auto;bottom:11%}.hero[data-scene=city] .bridge{left:8%;width:66%;height:29%;bottom:10%;top:auto}.hero[data-scene=city] .pagoda{width:25%;left:72%;height:28%;bottom:19%;top:auto}.hero[data-scene=city] .extra-landmark.flower{width:18%;height:18%;left:15%;bottom:29%;top:auto}
 .scene-controls{left:22px;bottom:17px;gap:30px}.scene-controls button{font-size:17px!important}
 .service-dock{padding:0 22px}.service-dock>a{min-height:84px}.service-dock>a>span:nth-child(1){font-size:22px}.service-dock>a b{font-size:28px}
 .announcement{font-size:15px;padding:20px 22px;gap:13px}.announcement>span:first-child{font-size:15px;padding-right:13px}.announcement>a{font-size:15px}
 .hero .hero-title-wrap>p,.hero[data-scene=city] .hero-title-wrap>p{font-size:17px}.profile-copy>.line-link,.pharma-layout .line-link{font-size:17px}.journal-cover>.section-index{font-size:15px}
 .section{padding:45px 22px 52px}.section-index,.section-index>a,.section-index>span:last-child{font-size:15px}.section-index{gap:15px}
 .profile-copy h2,.pharma-layout h2,.strength-layout h2{font-size:36px;line-height:1.5}.profile-copy>p,.pharma-layout p,.strength-layout p{font-size:17px;line-height:1.95}.profile-facts>span{font-size:14px}.profile-facts strong{font-size:33px}.line-link{font-size:17px}
 .city-gallery{padding:32px 22px}.city-gallery-heading h2{font-size:27px}.landmark-gallery{grid-template-columns:repeat(2,1fr);gap:28px 24px}.landmark-gallery img{height:128px}.landmark-gallery figcaption span{font-size:17px}.photo figcaption,.concept-photo figcaption,.page-content .photo figcaption{font-size:14px}
 .pharma-categories strong{font-size:23px}.pharma-categories small{font-size:16px}.business-heading h2{font-size:34px;line-height:1.5}
 .business-accordion{display:grid;grid-template-columns:1fr 1fr;height:auto;gap:2px}.business-panel,.business-panel.active{height:202px;min-height:0;padding:0}.sector-name{writing-mode:horizontal-tb;top:21px;left:17px;font-size:21px;letter-spacing:0;white-space:normal;line-height:1.5}.sector-summary,.sector-glyph{display:none}.sector-hint{right:18px;bottom:15px;font-size:30px}
 .strength-numbers{gap:28px}.strength-numbers>div strong{font-size:44px}.strength-numbers strong small{font-size:17px}.strength-links{gap:19px;font-size:16px}.strength-numbers>div>span{font-size:16px}.data-source{font-size:14px}
 .journal-cover h2{font-size:70px}.journal-bottom{font-size:16px}.journal-tabs{gap:23px}.journal-tabs button{font-size:17px}.journal-row small{font-size:14px}.journal-row h3{font-size:22px}.anniversary-link{gap:14px}.anniversary-link strong{font-size:18px}
 .catalog-title h2{font-size:36px}.catalog-title p{font-size:17px}.catalog-table a strong{font-size:24px}.catalog-table a{gap:15px}
 .story-title{padding:0}.story-title h2{font-size:33px}.story-title p{font-size:17px}.timeline>a{display:flex;flex-direction:column;align-items:flex-start;gap:8px}.timeline-year{font-size:67px;width:100%}.timeline-caption{font-size:17px}.story-values p{font-size:17px;line-height:2}.story-values i{margin:0 7px}
 .contact h2{font-size:62px}.contact-details a{font-size:34px}.contact-details>span{font-size:16px!important}.contact-details p{font-size:16px}.footer-links{font-size:16px;gap:22px}.footer-bottom{font-size:14px;line-height:1.8;flex-wrap:wrap}.footer-logo .brand-type strong{font-size:22px}
 .site-menu{padding:23px}.menu-statement{font-size:34px}.menu-layout nav>*{font-size:24px;padding:14px 0}.site-menu form{width:100%}#search-results>a{font-size:17px}
 .page-hero{padding:26px 22px 35px}.breadcrumbs,.breadcrumbs a{font-size:15px;gap:9px}.page-hero-row{margin-top:30px}.page-hero h1{font-size:38px}.page-hero-row>p{font-size:17px;max-width:none;line-height:1.8}.interior-layout{display:block;margin:30px auto 45px;width:calc(100% - 44px)}.page-sidebar{position:static;display:flex;overflow-x:auto;gap:24px;margin-bottom:30px}.page-sidebar>a{font-size:16px;white-space:nowrap;flex-shrink:0}.page-content>p,.page-content li,.page-content .data-source{font-size:17px}.page-content>.article-lead{font-size:23px}.page-content>h2{font-size:31px}.page-content>h3{font-size:25px}.page-content .reference-note{font-size:16px}.page-link-grid a{font-size:23px}.page-content .journal-row h3{font-size:22px}
 .business-directory h2{font-size:25px}.business-directory p{font-size:17px}.facts-strip{gap:12px}.facts-strip strong{font-size:27px}.facts-strip>span{font-size:14px}.file-list strong{font-size:21px}.file-list span{font-size:16px}.catalog-filter label,.catalog-filter button{font-size:16px}.product-row strong{font-size:21px}.product-row small{font-size:16px}.sample-badge{display:none}.product-form{font-size:15px}.specifications dt,.specifications dd{font-size:16px;padding:14px 11px}.specifications{grid-template-columns:105px 1fr}.product-detail-top h2{font-size:29px}.product-detail-top p{font-size:17px}.process-list strong{font-size:24px}.process-list p,.editorial-topics p{font-size:17px}.page-end{font-size:16px}
}
@media(max-width:360px){.hero-word{font-size:110px}.hero h1,.hero[data-scene=city] h1{font-size:27px}.hero-title-wrap>p{font-size:16px}.service-dock>a>span:nth-child(1){font-size:20px}.announcement{font-size:14px}.announcement>span:first-child{font-size:14px}.business-heading h2{font-size:30px}.sector-name{font-size:19px;left:14px}.strength-numbers>div strong{font-size:39px}.strength-links{font-size:15px;gap:14px}.catalog-table a strong{font-size:22px}.story-values p{font-size:16px}.journal-tabs{gap:19px}.journal-tabs button{font-size:16px}.contact-details a{font-size:30px}.facts-strip strong{font-size:23px}.contact-page a{font-size:27px}}

/* Exact logo colors; a diagonal blue plane gives the architectural artwork depth. */
:root{--green:#0dcea9;--gold:#0dcea9;--brand-blue:#0088db}
.hero,.hero[data-scene=city]{background:#0dcea9;height:calc(100svh - 94px);min-height:740px;max-height:1000px}
.hero:before{content:"";position:absolute;inset:0;background:#0088db;clip-path:polygon(88% 0,100% 0,100% 100%,49% 100%);z-index:0;pointer-events:none}
.hero-title-wrap{top:5%;left:5%;width:50%;z-index:3}
.hero-word{font-size:clamp(180px,21vw,330px);font-weight:500;line-height:1.15;letter-spacing:-.085em;margin-left:-.035em}
.hero h1,.hero[data-scene=city] h1{font-size:clamp(34px,3.1vw,50px);line-height:1.4;margin-top:18px;letter-spacing:2px}
.hero .hero-title-wrap>p,.hero[data-scene=city] .hero-title-wrap>p{font-size:21px;line-height:1.8;margin-top:24px;color:#fff}
.hero .main-landmark{left:48%;width:57%;height:66%;top:auto;bottom:6%;object-position:center bottom}
.hero .secondary.pagoda{display:none;left:83%;width:16%;height:32%;top:9%;bottom:auto;opacity:.33}
.hero[data-scene=city] .secondary.pagoda{display:block;left:83%;width:16%;height:37%;top:9%;bottom:auto;opacity:1}
.hero[data-scene=city] .bridge{left:45%;width:61%;height:58%;bottom:3%;top:auto;object-position:center bottom}
.hero[data-scene=city] .extra-landmark.flower{left:65%;width:13%;height:28%;bottom:auto;top:12%;opacity:.5}
.scene-controls{left:5%;bottom:35px;gap:35px}.scene-controls button{font-size:19px!important}
.hero .landmark{transition:opacity .35s,transform .6s}.hero .main-landmark{animation:architect-in .8s both}
@keyframes architect-in{from{opacity:0;transform:translate(24px,30px)}to{opacity:1;transform:translate(0,0)}}
@media(min-width:1600px){.hero-title-wrap{top:7%}.hero h1{margin-top:28px}.hero .main-landmark{left:49%;width:55%;height:69%}}
@media(max-width:1100px) and (min-width:651px){.hero,.hero[data-scene=city]{min-height:730px;height:790px}.hero-title-wrap{top:7%;left:5%;width:54%}.hero-word{font-size:clamp(175px,21vw,235px)}.hero h1,.hero[data-scene=city] h1{font-size:34px;margin-top:22px}.hero .hero-title-wrap>p,.hero[data-scene=city] .hero-title-wrap>p{font-size:18px;max-width:310px}.hero .main-landmark{left:47%;width:64%;height:59%;bottom:7%}.hero .secondary.pagoda{left:79%;width:20%;height:32%;top:9%}.hero[data-scene=city] .bridge{left:45%;width:66%;height:53%;bottom:6%}.hero[data-scene=city] .secondary.pagoda{left:79%;width:20%;height:32%;top:10%}.hero[data-scene=city] .extra-landmark.flower{left:60%;width:15%;height:27%;top:17%}}
@media(max-width:650px){
 .hero,.hero[data-scene=city]{height:790px;min-height:0;max-height:none}
 .hero:before{clip-path:polygon(100% 35%,100% 100%,10% 100%)}
 .hero-title-wrap{left:22px;top:29px;width:calc(100% - 44px)}
 .hero-word{font-size:clamp(138px,39vw,185px);line-height:1.1;letter-spacing:-.09em}
 .hero h1,.hero[data-scene=city] h1{font-size:30px;line-height:1.4;letter-spacing:1px;margin-top:18px}
 .hero .hero-title-wrap>p,.hero[data-scene=city] .hero-title-wrap>p{font-size:17px;line-height:1.7;margin-top:13px;max-width:none}
 .hero .main-landmark{left:5%;width:109%;height:43%;bottom:10%;object-position:center bottom}
 .hero .secondary.pagoda{left:74%;width:25%;height:20%;top:39%;opacity:.35}
 .hero[data-scene=city] .bridge{left:0;width:110%;height:41%;bottom:10%;top:auto}
 .hero[data-scene=city] .secondary.pagoda{left:75%;width:26%;height:23%;top:37%;opacity:1}
 .hero[data-scene=city] .extra-landmark.flower{left:13%;width:20%;height:18%;top:44%;opacity:.55}
 .scene-controls{left:22px;bottom:17px;gap:28px}.scene-controls button{font-size:17px!important}
}
@media(max-width:360px){.hero,.hero[data-scene=city]{height:750px}.hero-word{font-size:132px}.hero h1,.hero[data-scene=city] h1{font-size:27px}.hero .hero-title-wrap>p,.hero[data-scene=city] .hero-title-wrap>p{font-size:16px}.hero .main-landmark{height:40%;bottom:12%}.hero[data-scene=city] .bridge{height:38%;bottom:12%}}
@media(prefers-reduced-motion:reduce){.hero .main-landmark{animation:none}.hero .landmark{transition:none}}

/* Five city motifs accompany the headquarters scene: six original assets in total. */
.hero[data-scene=city] .secondary.pagoda,
.hero[data-scene=city] .extra-landmark.flower,
.hero[data-scene=city] .extra-landmark.statue,
.hero[data-scene=city] .extra-landmark.industry{display:block;top:auto;bottom:58%;opacity:1;object-position:center bottom}
.hero[data-scene=city] .extra-landmark.flower{left:50%;width:10%;height:23%}
.hero[data-scene=city] .extra-landmark.statue{left:62%;width:8%;height:23%}
.hero[data-scene=city] .secondary.pagoda{left:72%;width:11%;height:29%}
.hero[data-scene=city] .extra-landmark.industry{left:85%;width:13%;height:20%}
.hero[data-scene=city] .bridge{left:46%;width:60%;height:51%;bottom:4%;object-position:center bottom}
@media(max-width:1100px) and (min-width:651px){.hero[data-scene=city] .extra-landmark.flower{left:51%;width:10%;height:20%}.hero[data-scene=city] .extra-landmark.statue{left:63%;width:8%;height:21%}.hero[data-scene=city] .secondary.pagoda{left:73%;width:11%;height:25%}.hero[data-scene=city] .extra-landmark.industry{left:85%;width:13%;height:17%}.hero[data-scene=city] .bridge{left:47%;width:62%;height:49%;bottom:6%}}
@media(max-width:650px){.hero[data-scene=city]{height:850px}.hero[data-scene=city] .extra-landmark.flower{left:9%;width:16%;height:13%;bottom:39%}.hero[data-scene=city] .extra-landmark.statue{left:32%;width:13%;height:13%;bottom:39%}.hero[data-scene=city] .secondary.pagoda{left:52%;width:19%;height:16%;bottom:39%}.hero[data-scene=city] .extra-landmark.industry{left:75%;width:23%;height:12%;bottom:39%}.hero[data-scene=city] .bridge{left:0;width:108%;height:29%;bottom:8%;object-position:center bottom}}
@media(max-width:360px){.hero[data-scene=city]{height:810px}}

/* Separate the two full-width colored sections with the page's white background. */
.home-strength + .journal{margin-top:clamp(40px,5vw,80px)}

/* Keep the headquarters fully in frame and let the two brand-color fields glide between scenes. */
.hero:before{content:none}
.hero-color-plane{position:absolute;inset:0;z-index:0;background:#0088db;pointer-events:none;clip-path:polygon(88% 0%,100% 0%,100% 100%,49% 100%)}
.hero[data-scene=city] .hero-color-plane{clip-path:polygon(76% 0%,100% 0%,100% 100%,38% 100%)}
@media(min-width:1101px){.hero .main-landmark{left:46%;width:51%;height:61%;bottom:8%}}
@media(min-width:651px) and (max-width:1100px){.hero .main-landmark{left:44%;width:54%;height:55%;bottom:9%}}
@media(max-width:650px){.hero-color-plane{clip-path:polygon(100% 35%,100% 35%,100% 100%,10% 100%)}.hero[data-scene=city] .hero-color-plane{clip-path:polygon(100% 24%,100% 24%,100% 100%,0% 100%)}}

/* Typography follows the narrower headquarters composition. */
@media(min-width:1101px){
 .hero-title-wrap{left:6%;top:14%;width:39%}
 .hero-word{font-size:clamp(190px,17vw,285px);line-height:1.12;letter-spacing:-.07em;font-weight:500}
 .hero h1,.hero[data-scene=city] h1{font-size:clamp(32px,2.55vw,42px);line-height:1.5;letter-spacing:1px;margin-top:32px;font-weight:400}
 .hero .hero-title-wrap>p,.hero[data-scene=city] .hero-title-wrap>p{font-size:19px;line-height:1.8;margin-top:24px;letter-spacing:0}
 .scene-controls{left:6%}
}

.hero #hero-description.hero-origin{display:flex;flex-direction:column;align-items:flex-start;gap:8px;margin-top:26px;color:#fff;line-height:1.6;letter-spacing:0}
.hero-origin .origin-label{font-size:16px;font-weight:400}
.hero-origin strong{font-size:23px;font-weight:500;letter-spacing:1px}
@media(max-width:1100px){.hero-origin strong{font-size:20px;letter-spacing:0}.hero #hero-description.hero-origin{margin-top:22px}}
@media(max-width:650px){.hero #hero-description.hero-origin{margin-top:16px;gap:5px}.hero-origin .origin-label{font-size:16px}.hero-origin strong{font-size:20px}}
@media(max-width:360px){.hero-origin strong{font-size:18px}}
@media(min-width:651px) and (max-width:1100px){
 .hero-title-wrap{left:6%;top:13%;width:42%}
 .hero-word{font-size:clamp(152px,18vw,198px);line-height:1.12;letter-spacing:-.07em}
 .hero h1,.hero[data-scene=city] h1{font-size:29px;line-height:1.5;letter-spacing:0;margin-top:28px}
 .hero .hero-title-wrap>p,.hero[data-scene=city] .hero-title-wrap>p{font-size:17px;line-height:1.8;margin-top:21px;max-width:none}
 .scene-controls{left:6%}
}