:root{--paper:#ffffff;--ink:#132951;--accent:#002063;--line:#d6e0ef}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:100px}body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.65 Arial,"PingFang TC","Microsoft JhengHei",sans-serif}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit}a,button,summary{-webkit-tap-highlight-color:transparent}a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:6px}.skip{position:fixed;top:-100px;background:var(--ink);color:white;padding:12px;z-index:5}.skip:focus{top:10px}header{padding:25px 4.5%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.wordmark{font-size:23px;line-height:1;font-weight:800;letter-spacing:-1px}.wordmark span{display:block;font-size:12px;letter-spacing:1.5px;margin-top:9px;font-weight:400}nav{display:flex;gap:36px;font-size:14px}nav a:hover{color:var(--accent)}.language{background:none;border:0;cursor:pointer;font-size:14px}.language span{color:#687994}.hero{padding:25px 4.5% 0}.hero-top,.hero-bottom{display:flex;align-items:center;justify-content:space-between}.hero-top{font-size:12px;letter-spacing:1px}.hero-grid{display:grid;grid-template-columns:1.25fr 1fr;align-items:center;padding:45px 0 35px;gap:30px}h1{font-size:clamp(76px,9.2vw,154px);font-weight:500;line-height:1.01;letter-spacing:-.065em;margin:0}.graphic{position:relative;height:420px;max-width:480px;width:100%;justify-self:end;overflow:hidden}.shape{position:absolute;width:240px;height:240px}.circle{background:var(--accent);border-radius:50%;top:15px;left:35px}.outline{border:1px solid var(--ink);border-radius:50%;top:110px;left:145px;z-index:2}.square{width:165px;height:165px;background:var(--ink);left:5px;top:232px}.axis{position:absolute;height:1px;background:var(--ink);width:100%;top:230px;transform:rotate(-32deg)}.cross{position:absolute;right:20px;top:8px;font-size:36px;font-weight:200}.graphic-caption{position:absolute;bottom:0;right:0;font-size:11px;letter-spacing:2px}.hero-bottom{border-top:1px solid var(--line);padding:14px 0 20px;font-size:14px}.hero-bottom p{margin:0}.hero-bottom a span{margin-left:35px}.section{padding:100px 4.5%;border-top:1px solid var(--line)}.about{display:grid;grid-template-columns:1fr 2fr;gap:40px}.eyebrow{font-size:12px;letter-spacing:1.8px}h2{font-weight:400;letter-spacing:-.04em;font-size:clamp(36px,4.2vw,64px);line-height:1.14;margin:0 0 35px}.about p{max-width:740px;color:#52647f;margin:20px 0 0}.about .lead{font-size:23px;color:var(--ink);line-height:1.5}footer{padding:40px 4.5%;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:30px;font-size:13px} @media(min-width:1500px){body{max-width:1800px;margin:auto}}@media(max-width:700px){header{padding:22px 6%;flex-wrap:wrap;gap:24px}nav{order:3;width:100%;justify-content:space-between;gap:14px}.hero{padding:20px 6% 0}.hero-top{font-size:10px;gap:15px}.hero-grid{grid-template-columns:1fr;padding:40px 0 25px;gap:10px}h1{font-size:clamp(64px,17vw,114px)}.graphic{height:260px;width:280px;margin-top:-25px}.shape{width:150px;height:150px}.circle{left:40px;top:0}.outline{left:125px;top:60px}.square{left:10px;top:145px;width:100px;height:100px}.axis{top:140px}.cross{font-size:26px}.hero-bottom{font-size:12px;gap:15px}.hero-bottom a span{margin-left:10px}.section{padding:65px 6%}.about{grid-template-columns:1fr;gap:30px}.about .lead{font-size:20px}footer{padding:30px 6%;flex-direction:column;gap:15px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
.section-heading{display:grid;grid-template-columns:1fr 2fr;gap:40px}.business{background:#f0f4fb}.business-list{margin-top:35px}.business-item{border-top:1px solid #c4d2e7}.business-item:last-child{border-bottom:1px solid #c4d2e7}.business-item summary{list-style:none;display:grid;grid-template-columns:80px 1fr 35px;align-items:center;gap:20px;cursor:pointer;padding:27px 0;transition:color .2s}.business-item summary::-webkit-details-marker{display:none}.business-item summary:hover,.business-item[open] summary{color:var(--accent)}.business-item .number{font-size:13px}.business-item h3{margin:0;font-size:clamp(30px,4.2vw,62px);font-weight:400;letter-spacing:-.04em;line-height:1.2}.business-item .plus{font-size:28px;font-weight:300;transition:transform .25s}.business-item[open] .plus{transform:rotate(45deg)}.business-description{padding:0 55px 30px 100px;display:grid;grid-template-columns:1fr 1fr;gap:40px}.business-description h4{font-weight:400;font-size:20px;margin:0}.business-description p{margin:0;max-width:550px;color:#52647f}.approach{background:var(--accent);color:var(--paper)}.principles{display:grid;grid-template-columns:repeat(3,1fr);gap:45px;margin-top:70px}.principles article{border-top:1px solid #ffffff70;padding-top:30px}.principles h3{font-size:clamp(34px,4.2vw,64px);font-weight:400;letter-spacing:-.04em;margin:24px 0 10px;line-height:1.15}.principles p{max-width:270px}.symbol{height:80px;width:80px;position:relative}.dot{border-radius:50%;background:var(--paper)}.evolve{background:var(--paper);transform:rotate(45deg);width:56px;height:56px;margin:12px 0 12px 12px}.connect{width:125px;background:linear-gradient(var(--paper),var(--paper)) center / 100% 1px no-repeat}.connect:before,.connect:after{content:'';position:absolute;width:48px;height:48px;border:1px solid var(--paper);border-radius:50%;top:16px}.connect:after{right:0;background:var(--accent)}.world{position:relative;padding-bottom:75px}.world h2{font-size:clamp(64px,9vw,136px);margin:70px 0 45px;line-height:1.05}.world p{max-width:470px;margin-left:auto;color:#52647f}.route{display:flex;align-items:center;gap:25px;font-size:12px;letter-spacing:2px;margin-bottom:40px}.route i{height:1px;background:var(--ink);flex:1;position:relative}.route i:after{content:'';position:absolute;width:12px;height:12px;background:var(--accent);border-radius:50%;right:25%;top:-6px}.contact{background:var(--ink);color:var(--paper);display:grid;grid-template-columns:1fr 2fr;gap:40px}.contact h2{font-size:clamp(44px,6vw,88px)}.contact p{color:#dce6f5}.contact a{display:inline-block;border-bottom:1px solid #9eb4d5;font-size:clamp(18px,2.3vw,32px);overflow-wrap:anywhere}footer{background:var(--ink);color:#d2dff1;border-color:#50688e}.circle{animation:drift 12s ease-in-out infinite}.outline{animation:orbit 14s ease-in-out infinite}@keyframes drift{50%{transform:translate(18px,12px)}}@keyframes orbit{50%{transform:translate(-14px,14px)}}html[lang="zh-Hant"] h2{letter-spacing:0;line-height:1.35}html[lang="zh-Hant"] .business-item h3{letter-spacing:0}@media(max-width:700px){.section-heading,.contact{grid-template-columns:1fr;gap:28px}.business-item summary{grid-template-columns:28px 1fr 24px;gap:10px;padding:25px 0}.business-description{padding:0 0 25px 38px;grid-template-columns:1fr;gap:10px}.principles{grid-template-columns:1fr;margin-top:40px;gap:35px}.principles article{display:grid;grid-template-columns:110px 1fr;column-gap:20px}.principles .symbol{grid-row:1/3}.principles h3{margin:0;font-size:36px}.principles p{margin:10px 0}.connect{width:100px}.world h2{margin:50px 0 35px}.world p{margin-left:0}.contact h2{font-size:44px}}@media(prefers-reduced-motion:reduce){.shape{animation:none}*{transition:none!important}}

/* Business-first introduction. */
.hero-grid{grid-template-columns:minmax(0,1fr) 180px;gap:40px;padding:46px 0 38px}.hero-brand{font-size:1rem;font-weight:700;letter-spacing:.09em;margin:0 0 22px}.hero-brand span{font-size:.75rem;font-weight:400;margin-left:10px;letter-spacing:.08em}h1{font-size:clamp(2.5rem,4.7vw,5rem);font-weight:500;line-height:1.12;letter-spacing:-.045em}.hero-description{font-size:1.125rem;line-height:1.75;max-width:740px;margin:25px 0 0;color:#52647f}.graphic{height:220px;width:180px;max-width:180px;align-self:center}.shape{width:105px;height:105px}.circle{top:20px;left:5px}.outline{left:60px;top:90px}.axis{top:110px}.hero-top{font-size:.75rem}.hero-bottom{font-size:.875rem}html[lang="zh-Hant"] h1{letter-spacing:0;line-height:1.3}.hero-top span:last-child{font-size:.75rem}
@media(max-width:700px){.hero-grid{grid-template-columns:minmax(0,1fr);gap:0;padding:30px 0}.graphic{display:none}.hero-top{align-items:flex-start;flex-direction:column;gap:4px}.hero-brand{font-size:.875rem;margin-bottom:18px}h1{font-size:clamp(2rem,6.7vw,3rem)}.hero-description{font-size:1rem;margin-top:20px}.hero-bottom{gap:15px;flex-wrap:wrap}.hero-bottom a{font-size:.875rem}}
/* Keep the business scope visible before any interaction. */
.business .section-heading{align-items:baseline}.business h2{margin:0;font-size:clamp(2.25rem,3.5vw,3.5rem)}.business-list{margin-top:36px}.business-summary{min-width:0}.business-item h3{font-size:clamp(1.5rem,2.8vw,2.75rem);line-height:1.3;letter-spacing:-.025em}.business-summary p{font-size:1rem;line-height:1.65;margin:10px 0 0;color:#52647f;max-width:800px}.business-item summary{padding:26px 0}.business-description{padding-top:4px;grid-template-columns:180px 1fr}.business-description h4{font-size:.875rem}.business-description p{font-size:1rem}.business-item .number{font-size:.875rem}.approach{background:var(--paper);color:var(--ink);padding-top:60px;padding-bottom:60px}.principles{margin-top:35px}.principles article{border-color:var(--line)}.principles h3{font-size:clamp(2rem,3.2vw,3rem)}.symbol{height:44px;width:44px}.dot,.evolve{background:var(--accent)}.evolve{height:32px;width:32px;margin:6px}.connect{width:80px;background:linear-gradient(var(--accent),var(--accent)) center / 100% 1px no-repeat}.connect:before,.connect:after{height:28px;width:28px;top:8px;border-color:var(--accent)}.connect:after{background:var(--paper)}.world{padding-top:60px;padding-bottom:60px}.world h2{font-size:clamp(2.5rem,5vw,4.5rem);margin:30px 0}.section.about{padding-top:70px;padding-bottom:70px}
@media(max-width:700px){.business-description{grid-template-columns:1fr;gap:8px}.business-item h3{font-size:1.5rem}.principles article{grid-template-columns:65px 1fr;column-gap:15px}.connect{width:56px}.principles h3{font-size:2rem}}

.work-details{padding-top:75px;padding-bottom:75px}.work-details h2{font-size:clamp(2.25rem,3.5vw,3.5rem);margin:0}.product-heading{display:flex;align-items:baseline;justify-content:space-between;gap:25px;margin-top:55px}.product-heading h3{font-size:1.25rem;font-weight:400}.product-heading p{color:#52647f;font-size:1rem}.product-gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.product-gallery figure{margin:0}.product-gallery img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;background:#f0f4fb}.product-gallery figcaption{padding:14px 0;border-bottom:1px solid var(--line);font-size:.875rem;display:flex;justify-content:space-between;gap:10px}.example-note{font-size:.8125rem;color:#62738f}.consulting-examples{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:60px}.consulting-examples article{padding:32px;min-width:0}.branding-example{background:#f0f4fb}.ai-example{background:#071b43;color:#ffffff}.example-top{display:flex;justify-content:space-between;gap:15px;font-size:.75rem;letter-spacing:.06em;border-bottom:1px solid #607ca566;padding-bottom:18px}.consulting-examples h3{font-size:clamp(1.75rem,2.8vw,2.8rem);line-height:1.25;font-weight:400;letter-spacing:-.025em;margin:32px 0 18px}.example-intro{font-size:1rem;line-height:1.7}.copy-sample{padding:28px 0 10px;margin-top:24px;border-top:1px solid #ccd8ea}.copy-sample blockquote{font-size:clamp(1.75rem,2.5vw,2.5rem);line-height:1.4;margin:24px 0;color:#002063}.copy-sample p{font-size:1rem;line-height:1.8;max-width:390px}.deliverables{font-size:.875rem;border-top:1px solid #ccd8ea;padding-top:20px;margin-top:24px}.ai-flow{margin:30px 0 20px}.flow-node{display:grid;grid-template-columns:35px 1fr;border:1px solid #6d8bb6;padding:14px 18px;gap:2px 12px}.flow-node .node-number{grid-row:1/3;align-self:center;font-size:.75rem;color:#d1e0f5}.flow-node strong{font-size:1rem;font-weight:400}.flow-node small{font-size:.875rem;color:#d7e4f5}.flow-node.processing{border-color:#8bb3ed;background:#ffffff08}.flow-line{height:22px;width:1px;background:#8a9fc0;margin-left:35px;position:relative;overflow:hidden}.flow-line:after{content:'';position:absolute;left:0;top:-8px;width:1px;height:8px;background:#fff;animation:flow 3s linear infinite}.ai-example .example-note{color:#d1e0f5}@keyframes flow{to{transform:translateY(32px)}}@media(max-width:700px){.product-heading{display:block;margin-top:30px}.product-gallery{grid-template-columns:1fr;gap:22px}.consulting-examples{grid-template-columns:1fr;margin-top:40px}.consulting-examples article{padding:24px}.product-gallery img{aspect-ratio:3/2}.example-top{font-size:.75rem}}@media(prefers-reduced-motion:reduce){.flow-line:after{animation:none;top:7px}}

.trade-heading{display:flex;justify-content:space-between;align-items:baseline;gap:25px;margin-top:50px}.trade-heading h3{font-size:1.25rem;font-weight:400}.trade-heading p{font-size:1rem;color:#52647f}.trade-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.trade-gallery figure{margin:0}.trade-gallery img{display:block;width:100%;height:auto;aspect-ratio:2/1;max-height:280px;object-fit:cover}.trade-gallery figcaption{padding:14px 0;border-bottom:1px solid var(--line);font-size:.875rem}@media(max-width:700px){.trade-heading{display:block;margin-top:30px}.trade-gallery{grid-template-columns:1fr}}

/* Brand communication examples. */
.consulting-examples{grid-template-columns:minmax(0,1fr);gap:32px}.branding-example .example-intro{max-width:800px}.branding-gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:30px}.branding-gallery figure{margin:0;min-width:0}.branding-gallery img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block}.branding-gallery figcaption{padding:15px 0;border-bottom:1px solid #ccd8ea}.branding-gallery figcaption strong{display:block;font-size:1rem;font-weight:400}.branding-gallery figcaption span{display:block;color:#5a6d88;font-size:.875rem;margin-top:4px}.branding-example .copy-sample{display:grid;grid-template-columns:1fr 1fr;column-gap:40px}.branding-example .copy-sample .eyebrow{grid-column:1/-1}.branding-example .copy-sample blockquote{margin:20px 0 0}.branding-example .copy-sample p{align-self:center;max-width:100%;margin:20px 0 0}.ai-example{display:grid;grid-template-columns:1fr 1fr;column-gap:50px}.ai-example .example-top{grid-column:1/-1}.ai-example h3{grid-column:1;grid-row:2}.ai-example .example-intro{grid-column:1;grid-row:3;align-self:start;margin-top:0}.ai-example .ai-flow{grid-column:2;grid-row:2/5}.ai-example .example-note{grid-column:1;grid-row:4}@media(max-width:700px){.branding-gallery{grid-template-columns:1fr;gap:25px}.branding-example .copy-sample{grid-template-columns:1fr}.ai-example{display:block}.branding-example .copy-sample p{margin-top:20px}}

.ai-example{background:#071b43;grid-template-columns:1fr 1.3fr;align-items:start}.ai-visual{grid-column:2;grid-row:2/5;margin:28px 0 0;min-width:0}.ai-visual img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}.ai-example .example-note{align-self:start;margin-top:20px}@media(max-width:700px){.ai-example{display:block}.ai-visual{margin-top:25px}}

/* Four product examples, followed by ingredient and packaging details. */
.product-gallery{grid-template-columns:repeat(12,minmax(0,1fr));gap:18px}.product-gallery figure{grid-column:span 4}.product-gallery figure.product-main{grid-column:span 3}.product-gallery figcaption{min-height:52px}.product-gallery figure:not(.product-main) img{aspect-ratio:2/1}.branding-gallery img{background:#f0f4fb}
@media(max-width:700px){.product-gallery{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.product-gallery figure,.product-gallery figure.product-main{grid-column:span 1}.product-gallery figure:last-child{grid-column:1/-1}.product-gallery figure:not(.product-main) img{aspect-ratio:3/2}.product-gallery figure:last-child img{aspect-ratio:2/1}}

/* Show usable brand outputs against a concrete product. */
.brand-product-example{display:grid;grid-template-columns:1.2fr 1fr;gap:40px;margin-top:30px;background:#ffffff}.brand-product-visual{min-width:0}.brand-product-visual img{display:block;width:100%;height:100%;min-height:300px;object-fit:cover;aspect-ratio:3/2}.brand-product-copy{padding:32px 32px 32px 0;align-self:center}.brand-product-copy h4{font-size:clamp(1.75rem,3.3vw,3rem);line-height:1.2;font-weight:400;margin:24px 0 18px;letter-spacing:-.025em}.brand-tagline{font-size:clamp(1.5rem,2.4vw,2.25rem);line-height:1.5;color:#002063;margin:0 0 18px}.brand-copy-use{font-size:.875rem;color:#5a6d88;max-width:360px}.brand-delivery-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px;margin:32px 0}.brand-delivery{border-top:1px solid #ccd8ea;padding-top:24px}.brand-delivery h4{font-size:1.25rem;line-height:1.5;font-weight:400;margin:20px 0 14px}.brand-delivery p{font-size:1rem;line-height:1.85;margin:0 0 22px}.copy-placement{font-size:.8125rem;color:#62738f}@media(max-width:700px){.brand-product-example{grid-template-columns:1fr;gap:0}.brand-product-copy{padding:25px}.brand-product-visual img{min-height:0}.brand-delivery-grid{grid-template-columns:1fr;gap:28px}}

/* Keep the example subordinate to the service offering. */
.brand-services{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:25px;margin:30px 0 45px}.brand-services>div{border-top:1px solid #ccd8ea;padding-top:20px}.brand-services h4{font-size:1.125rem;line-height:1.5;font-weight:400;margin:0 0 12px}.brand-services p{font-size:1rem;color:#5a6d88;line-height:1.7;margin:0}.brand-case-label{display:flex;align-items:baseline;justify-content:space-between;gap:20px;border-top:1px solid #ccd8ea;padding-top:20px}.brand-case-label p{font-size:.875rem;margin:0;color:#5a6d88}.brand-case-label+.brand-product-example{margin-top:18px;grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:30px}.brand-case-label+.brand-product-example img{min-height:0;height:100%;max-height:300px}.brand-case-label+.brand-product-example .brand-product-copy{padding:24px 28px 24px 0}.brand-case-label+.brand-product-example h4{font-size:1.75rem;margin:12px 0}.brand-case-label+.brand-product-example .brand-tagline{font-size:1.5rem;margin-bottom:12px}.brand-case-details{border-bottom:1px solid #ccd8ea}.brand-case-details>summary{font-size:.875rem;cursor:pointer;padding:18px 0;list-style-position:inside}.brand-case-details .brand-delivery-grid{margin-top:8px}@media(max-width:700px){.brand-services{grid-template-columns:1fr;gap:22px;margin-bottom:30px}.brand-case-label{align-items:flex-start;flex-direction:column;gap:8px}.brand-case-label+.brand-product-example{grid-template-columns:1fr;gap:0}.brand-case-label+.brand-product-example .brand-product-copy{padding:24px}.brand-case-label+.brand-product-example img{max-height:none}}

.company-addresses{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px;margin-top:36px}.address-block{border-top:1px solid #667fa4;padding-top:20px}.address-block h3{font-size:.875rem;line-height:1.5;font-weight:400;margin:0 0 12px;color:#ffffff}.address-block address{font-size:1rem;line-height:1.8;font-style:normal;color:#dce6f5;overflow-wrap:anywhere}@media(max-width:950px){.company-addresses{grid-template-columns:1fr;gap:24px}}

/* Keep supporting imagery compact and proportional. */
.work-details{padding-top:60px;padding-bottom:60px}
.trade-heading,.product-heading{margin-top:32px;gap:20px}
.trade-heading h3,.product-heading h3{margin:0}
.trade-heading p,.product-heading p{margin:0}
.trade-gallery,.product-gallery{margin-top:18px;gap:16px}
.trade-gallery figcaption,.product-gallery figcaption{padding:10px 0}
.product-gallery figcaption{min-height:44px}
.consulting-examples{margin-top:40px;gap:24px}
.consulting-examples article{padding:24px}
.consulting-examples h3{margin:24px 0 14px}
.brand-services{margin:24px 0 30px;gap:24px}
.brand-case-label+.brand-product-example{grid-template-columns:minmax(0,260px) minmax(0,1fr);gap:24px}
.brand-product-visual{align-self:center}
.brand-case-label+.brand-product-example img{height:auto;max-height:240px}
.brand-case-label+.brand-product-example .brand-product-copy{padding:20px 24px 20px 0}
.ai-example{grid-template-columns:minmax(0,1fr) minmax(0,360px);column-gap:32px}
.ai-visual{margin-top:24px;align-self:center}
.ai-visual img{max-height:240px}
@media(max-width:700px){
  .work-details{padding-top:44px;padding-bottom:44px}
  .trade-heading p,.product-heading p{margin-top:8px}
  .trade-gallery img{max-height:200px}
  .product-gallery{gap:12px}
  .product-gallery figure:last-child img{max-height:160px}
  .consulting-examples article{padding:20px}
  .brand-case-label+.brand-product-example{grid-template-columns:1fr;gap:0}
  .brand-product-visual{width:100%;max-width:280px}
  .brand-case-label+.brand-product-example .brand-product-copy{padding:20px}
  .ai-visual{max-width:360px}
}

.hero-top{justify-content:flex-end}

/* Blue-and-white palette, with legible links on navy. */
.ai-example .example-top{border-color:#4f6a94}
.contact a:hover{color:#bbd4ff;border-color:currentColor}
.contact a:focus-visible{outline-color:#bbd4ff}

/* Classic deep blue, referenced from YOKU MOKU’s public product page. */
.wordmark,.hero-brand,h1{color:var(--accent)}
.contact,footer{background:var(--accent)}