/* PlasticHubs shared design foundation 0.2.2, material-page application. */
:root{--ivory:#EEE6D8;--ivory-soft:#F7F3EC;--ivory-line:#DFD6C8;--ink-blue:#536E86}
.ph-approved-navigation.ph-approved-navigation .ph-nav-trigger.core .ph-nav-text>small>span{font-size:inherit!important;line-height:inherit!important;font-weight:inherit}
body[data-mode=both] .ph-approved-navigation .ph-nav-text>small .nav-zh,body[data-mode=both] .ph-approved-navigation .ph-nav-text>small .nav-en{display:inline!important}
body[data-mode=both] .ph-approved-navigation .ph-nav-text>small .nav-en{margin-left:4px}
.hero{padding-top:64px;padding-bottom:72px}
.hero .split{grid-template-columns:1.02fr .98fr;gap:56px}
.hero h1{max-width:12ch}
.hero figure{background:var(--ivory);box-shadow:none;border:1px solid #ffffff18}
.hero img{aspect-ratio:4/3;object-fit:contain;background:var(--ivory)}
.hero figcaption{background:var(--ivory);color:#526173;padding:14px 20px}
.hero .button{position:relative;isolation:isolate;overflow:hidden;background:#EEE6D8;color:#243B4B;border:1px solid #DDD4C5;box-shadow:none}
.hero .button:hover{background:#EEE6D8;color:#243B4B}
.hero .button::before{content:"";position:absolute;z-index:-1;left:50%;top:50%;width:220%;aspect-ratio:1;border-radius:42% 58% 60% 40%;background:radial-gradient(circle at 50% 50%,rgba(71,99,128,.35) 20%,rgba(92,121,148,.25) 55%,rgba(128,151,172,.14) 72%);transform:translate(-50%,-50%) scale(0);transition:transform 800ms cubic-bezier(.2,.7,.2,1)}
.hero .button:hover::before,.hero .button:focus-visible::before{transform:translate(-50%,-50%) scale(1.1)}
.hero-tags{font-size:14px;line-height:23px}
.hero-property-arrow{margin-left:4px}
body[data-mode=both] .hero .textlink{display:inline-grid;grid-template-columns:minmax(0,1fr) auto;column-gap:8px;row-gap:4px;align-items:center}
body[data-mode=both] .hero .textlink>.zh{grid-column:1;grid-row:1}
body[data-mode=both] .hero .textlink>.en{grid-column:1;grid-row:2;margin-top:0}
body[data-mode=both] .hero .textlink>.hero-property-arrow{grid-column:2;grid-row:1 / span 2;margin:0}
#options{background:white}
.visual-card{box-shadow:none;transition:transform 160ms,border-color 160ms}
.visual-card:hover,.application-card:hover{transform:translateY(-3px);box-shadow:none;border-color:#bbb3a7}
.visual-card>img{aspect-ratio:4/3;object-fit:cover;background:#f4f2ed}
.visual-card .card-copy{padding:24px}
.visual-card h3{margin-bottom:16px}
#quote .brief{background:#F7F3EC;border-color:#DFD6C8}
#properties{background:#F7F3EC}
#properties .table-wrap{border-color:#DFD6C8}
thead{background:#EEE6D8}
.qc{background:#F7F3EC;border-left-color:#536E86}
.qc .steps{background:white;color:#243B4B}
#about{background:white}
.material-photo{border:1px solid #DFD6C8;background:#F7F3EC}
.material-photo img{aspect-ratio:4/3;object-fit:cover}
#applications .application-card{background:#F7F3EC;border-color:#e5ded2}
.application-card>img{object-fit:contain;background:#f4f2ed;padding:12px}
#benefits{background:#F7F3EC}
#benefits .card{background:#fff;border-color:#DFD6C8}
.finish-selector{border-color:#DFD6C8}
.finish-selector [role=tablist]{background:#F7F3EC}
.finish-selector [role=tab]{font-size:14px}
.finish-selector [role=tab][aria-selected=true]{background:#EEE6D8;color:#243B4B;box-shadow:inset 0 -3px #536E86}
.finish-panel{background:#F7F3EC}
.finish-panel figure{background:#f4f2ed}
.finish-panel img{object-fit:cover}
.finish-copy h3{font-size:20px;line-height:28px}
#faq summary>span:last-child{background:#F7F3EC;color:#004BFF}
#faq details{border-bottom-color:#DFD6C8}
.pp-site-footer{border-top:1px solid #DFD6C8}
@media(max-width:979px){.hero{padding-top:48px;padding-bottom:56px}.hero .split{grid-template-columns:1fr;gap:32px}.hero h1{max-width:19ch}.hero figure{max-width:none}.hero img{max-height:560px}.visual-card .card-copy{padding:24px}}
@media(max-width:639px){.hero{padding-top:32px;padding-bottom:40px}.hero .split{gap:28px}.hero h1{max-width:none}.hero img{max-height:none}.hero-tags{font-size:13px;line-height:21px}.visual-card .card-copy{padding:20px}.application-card>img{padding:0}.finish-selector [role=tab]{font-size:13px}.finish-copy h3{font-size:19px;line-height:27px}}
@media(prefers-reduced-motion:reduce){.hero .button::before{transition:none}.visual-card:hover,.application-card:hover{transform:none}}