:root{--ink:#111a22;--navy:#071b2d;--brand:#00a2e9;--paper:#f3f5f5;--line:#d7dde0;--muted:#65717a;--cream:#efe8df;--warm:#9b4c2e;--max:1440px;--pad:clamp(22px,5vw,78px)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue","PingFang SC",Arial,sans-serif;-webkit-font-smoothing:antialiased;background:#fff}a{color:inherit;text-decoration:none}img{display:block;max-width:100%}button{font:inherit}.case-header{position:sticky;top:0;z-index:20;border-bottom:1px solid rgba(17,26,34,.12);background:rgba(255,255,255,.94);backdrop-filter:blur(14px)}.case-nav{display:flex}.case-actions{display:flex;justify-content:flex-end;align-items:center}.case-lang{position:relative}.case-lang-toggle{cursor:pointer}.case-lang-menu{position:absolute;right:0;top:48px;display:none;width:140px;border:1px solid var(--line);background:#fff;box-shadow:0 14px 30px rgba(0,20,35,.12)}.case-lang-menu.open{display:grid}.case-lang-menu button{padding:12px 15px;border:0;background:#fff;text-align:left;cursor:pointer}.case-lang-menu button:hover,.case-lang-menu button.active{background:#eef8fc;color:#007db8}.cases-hero{max-width:var(--max);margin:auto;padding:110px var(--pad) 72px}.eyebrow{display:flex;align-items:center;gap:12px;margin:0 0 24px;color:#53636e;font-size:11px;font-weight:750;letter-spacing:.18em}.eyebrow:before{content:"";width:34px;height:2px;background:var(--brand)}.cases-hero h1{max-width:900px;margin:0;font-size:clamp(42px,5vw,72px);line-height:1.03;letter-spacing:-.055em}.cases-hero>p:last-child{max-width:650px;margin:28px 0 0;color:var(--muted);font-size:17px;line-height:1.75}.case-index{max-width:var(--max);margin:auto;padding:0 var(--pad) 120px}.case-feature{display:grid;grid-template-columns:1.3fr .7fr;border:1px solid var(--line);background:#fff}.case-feature-image{min-height:620px;overflow:hidden;background:var(--cream)}.case-feature-image img{width:100%;height:100%;object-fit:cover}.case-feature-copy{display:flex;flex-direction:column;padding:clamp(34px,5vw,72px);background:var(--navy);color:#fff}.case-no{color:var(--brand);font-size:12px;font-weight:800;letter-spacing:.15em}.case-feature h2{margin:50px 0 20px;font-size:clamp(34px,3.8vw,56px);line-height:1.05;letter-spacing:-.05em}.case-feature-copy>p{margin:0;color:#aab6bf;font-size:15px;line-height:1.8}.case-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px}.case-tags span{padding:8px 10px;border:1px solid #31485a;color:#dbe4e9;font-size:11px}.case-open{display:flex;justify-content:space-between;align-items:center;margin-top:auto;padding:24px 0 0;border-top:1px solid #31485a;font-size:14px;font-weight:750}.case-open b{color:var(--brand);font-size:20px}.future-cases{display:grid;grid-template-columns:1fr 1fr;margin-top:36px;border-top:1px solid var(--line);border-left:1px solid var(--line)}.future-case{min-height:210px;padding:32px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--paper)}.future-case small{color:var(--brand);font-weight:750;letter-spacing:.12em}.future-case h3{margin:48px 0 10px;font-size:24px}.future-case p{margin:0;color:var(--muted);font-size:13px}.case-hero{max-width:var(--max);margin:auto;padding:72px var(--pad) 0}.case-hero-meta{display:grid;grid-template-columns:.72fr 1.28fr;gap:6vw;align-items:end;padding:54px 0}.case-hero h1{margin:0;font-size:clamp(42px,5vw,74px);line-height:1.02;letter-spacing:-.058em}.case-hero-intro{margin:0;color:var(--muted);font-size:17px;line-height:1.75}.case-cover{height:min(72vw,880px);overflow:hidden;background:var(--cream)}.case-cover img{width:100%;height:100%;object-fit:cover}.case-facts{display:grid;grid-template-columns:repeat(4,1fr);border-left:1px solid var(--line);border-bottom:1px solid var(--line)}.case-facts div{min-height:130px;padding:26px;border-right:1px solid var(--line)}.case-facts small{display:block;color:#7d8991;font-size:10px;letter-spacing:.12em}.case-facts strong{display:block;margin-top:28px;font-size:15px}.case-story{max-width:var(--max);margin:auto;padding:120px var(--pad)}.story-section{display:grid;grid-template-columns:.65fr 1.35fr;gap:7vw;padding:70px 0;border-top:1px solid var(--line)}.story-section:first-child{padding-top:0;border-top:0}.story-label{color:var(--brand);font-size:11px;font-weight:800;letter-spacing:.16em}.story-copy h2{max-width:780px;margin:0 0 28px;font-size:clamp(32px,3vw,48px);line-height:1.12;letter-spacing:-.045em}.story-copy p{max-width:760px;margin:0 0 18px;color:#52616b;font-size:16px;line-height:1.9}.story-quote{padding:80px var(--pad);background:var(--navy);color:#fff}.story-quote blockquote{max-width:1100px;margin:auto;font-size:clamp(30px,4.2vw,62px);line-height:1.15;letter-spacing:-.05em}.story-quote em{color:var(--brand);font-style:normal}.system-grid{display:grid;grid-template-columns:repeat(3,1fr);margin-top:42px;border-left:1px solid var(--line);border-top:1px solid var(--line)}.system-grid div{min-height:210px;padding:28px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}.system-grid b{color:var(--brand);font-size:11px}.system-grid h3{margin:46px 0 12px;font-size:22px}.system-grid p{font-size:13px;line-height:1.7}.crop-study{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:44px}.crop-study figure{margin:0;background:var(--cream);overflow:hidden}.crop-study img{width:100%;aspect-ratio:1/1;object-fit:cover}.crop-study figure:first-child img{object-position:left center}.crop-study figure:last-child img{object-position:right center}.case-next{display:flex;justify-content:space-between;align-items:center;max-width:var(--max);margin:auto;padding:54px var(--pad);border-top:1px solid var(--line);font-weight:750}.case-next span{color:var(--brand)}.case-footer{padding:34px var(--pad);background:var(--ink);color:#fff;font-size:12px}.case-footer div{display:flex;justify-content:space-between;max-width:var(--max);margin:auto}.mobile-case-nav{display:none}
@media(max-width:900px){.case-nav{display:none}.case-hero-meta,.story-section{grid-template-columns:1fr}.case-feature{grid-template-columns:1fr}.case-feature-image{min-height:0;aspect-ratio:16/10}.case-feature-copy{min-height:430px}.case-facts{grid-template-columns:repeat(2,1fr)}.system-grid{grid-template-columns:1fr}.future-cases{grid-template-columns:1fr}.cases-hero{padding-top:76px}.mobile-case-nav{display:block;font-size:12px;color:#52616b}}
@media(max-width:600px){.cases-hero{padding-top:62px;padding-bottom:48px}.cases-hero h1,.case-hero h1{font-size:38px}.case-index{padding-bottom:88px}.case-feature-image{aspect-ratio:4/3}.case-feature-copy{min-height:390px;padding:28px}.case-feature h2{margin-top:34px;font-size:34px}.case-hero{padding-top:32px}.case-hero-meta{padding:38px 0}.case-cover{height:auto;aspect-ratio:4/5}.case-cover img{object-position:center}.case-facts div{min-height:112px;padding:20px 16px}.case-facts strong{margin-top:20px;font-size:13px}.case-story{padding-top:84px;padding-bottom:84px}.story-section{padding:52px 0;gap:24px}.story-copy h2{font-size:30px}.story-copy p{font-size:15px;line-height:1.8}.story-quote{padding-top:62px;padding-bottom:62px}.crop-study{grid-template-columns:1fr}.case-footer div{display:grid;gap:10px}}
.crop-study-single{grid-template-columns:1fr}.crop-study-single img,.crop-study-single figure:first-child img{aspect-ratio:16/9;object-position:center;object-fit:cover}

/* Case-detail rhythm: compact, readable hierarchy across all case pages. */
.case-story{padding-top:82px;padding-bottom:82px}
.story-section{gap:clamp(32px,5vw,72px);padding-top:40px;padding-bottom:40px}
.story-copy h2{margin-bottom:16px;font-size:clamp(25px,2.15vw,35px);line-height:1.17;letter-spacing:-.025em}
.story-copy p{margin-bottom:12px;line-height:1.72}

@media(max-width:600px){
  .case-story{padding-top:58px;padding-bottom:58px}
  .story-section{gap:14px;padding-top:32px;padding-bottom:32px}
  .story-copy h2{margin-bottom:12px;font-size:24px;line-height:1.2}
  .story-copy p{font-size:15px;line-height:1.68}
}
.crop-study-single img,.crop-study-single figure:first-child img{width:100%!important;height:auto!important;aspect-ratio:auto!important;object-fit:contain!important;object-position:center!important}
.cases-hero h1{max-width:1120px;font-size:clamp(40px,4.2vw,58px);line-height:1.08;letter-spacing:-.045em}
.case-hero h1{font-size:clamp(38px,4.2vw,58px);line-height:1.06;letter-spacing:-.045em}
@media(max-width:600px){.cases-hero h1,.case-hero h1{font-size:36px}}
@media(max-width:600px){.mobile-case-nav{display:none}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
.cases-hero h1,.case-hero h1{color:#f06423;font-size:clamp(30px,2.8vw,44px);line-height:1.12;letter-spacing:-.035em;font-weight:780}
.case-feature+.case-feature{margin-top:36px}
.case-feature-alt{grid-template-columns:.78fr 1.22fr}
.case-feature-alt .case-feature-image{order:2;background:#fff}
.case-feature-alt .case-feature-copy{order:1;background:#132b3b}
.case-feature-alt .case-feature-image img{object-fit:contain;object-position:center}
.finish-grid{display:grid;grid-template-columns:repeat(3,1fr);margin-top:42px;border-top:1px solid var(--line);border-left:1px solid var(--line)}
.finish-grid div{min-height:150px;padding:24px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.finish-swatch{display:block;width:38px;height:6px;margin-bottom:30px;background:var(--swatch)}
.finish-grid h3{margin:0 0 8px;font-size:18px}.finish-grid p{margin:0;font-size:13px;line-height:1.65}
.case-cover-vora{height:auto;aspect-ratio:16/9;background:#fff}.case-cover-vora img{object-fit:contain}
@media(max-width:900px){.case-feature-alt{grid-template-columns:1fr}.case-feature-alt .case-feature-image{order:1}.case-feature-alt .case-feature-copy{order:2}.finish-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.cases-hero h1,.case-hero h1{font-size:30px}.case-feature+.case-feature{margin-top:24px}.finish-grid{grid-template-columns:1fr 1fr}.finish-grid div{min-height:138px;padding:18px}.case-cover-vora{aspect-ratio:4/3}.case-cover-vora img{object-fit:contain}}
.case-hero{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);column-gap:clamp(28px,4vw,64px);align-items:center}
.case-hero>.eyebrow,.case-hero>.case-facts{grid-column:1/-1}
.case-hero-meta{display:block;padding:36px 0}.case-hero-intro{margin-top:24px}
.case-hero>.case-cover{height:auto;aspect-ratio:4/3}.case-hero>.case-cover img{object-fit:cover}
@media(max-width:900px){.case-hero{grid-template-columns:1fr}.case-hero>.eyebrow,.case-hero>.case-facts{grid-column:auto}.case-hero-meta{padding:28px 0}.case-hero>.case-cover{aspect-ratio:16/10}}
.case-feature h2{margin:38px 0 18px;color:#f06423;font-size:clamp(26px,2.2vw,36px);line-height:1.18;letter-spacing:-.03em}
@media(max-width:600px){.case-feature h2{margin-top:28px;font-size:28px;line-height:1.2}}

/* Align the hero image edge with the four-column facts grid below. */
@media(min-width:901px){
  .case-hero{grid-template-columns:1fr 1fr;column-gap:0}
  .case-hero-meta{padding-right:clamp(44px,5vw,82px)}
}

.story-quote{padding-top:64px;padding-bottom:64px}
.story-quote blockquote{font-size:clamp(25px,3vw,42px);line-height:1.18;letter-spacing:-.03em}
@media(max-width:600px){
  .story-quote{padding-top:48px;padding-bottom:48px}
  .story-quote blockquote{font-size:26px;line-height:1.22}
}
.case-feature-vodka{grid-template-columns:1.25fr .75fr}
.case-feature-vodka .case-feature-image{background:#141414}
.case-feature-vodka .case-feature-copy{background:#201914}
.case-feature-vodka .case-feature-image img{object-fit:contain;object-position:center}
.case-cover-vodka{height:auto!important;aspect-ratio:16/9!important;background:#111}
.case-cover-vodka img{object-fit:cover!important;object-position:center!important}
.crop-study-vodka figure:first-child img{object-position:left center}
.crop-study-vodka figure:last-child img{object-position:right center}
@media(max-width:900px){.case-feature-vodka{grid-template-columns:1fr}}
@media(max-width:600px){.case-cover-vodka{aspect-ratio:4/3!important}}
.theme-grid{display:grid;grid-template-columns:repeat(3,1fr);margin-top:34px;border-top:1px solid var(--line);border-left:1px solid var(--line)}
.theme-grid>div{min-height:180px;padding:22px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.theme-grid b{color:var(--brand);font-size:10px;letter-spacing:.12em}
.theme-grid h3{margin:24px 0 9px;font-size:18px;line-height:1.25}
.theme-grid p{margin:0;font-size:13px;line-height:1.6}
@media(max-width:900px){.theme-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.theme-grid>div{min-height:165px;padding:17px}.theme-grid h3{margin-top:18px;font-size:16px}.theme-grid p{font-size:12px}}

/* Keep the home shortcut available throughout the design-case section. */
.back-to-top{position:fixed;z-index:80;right:24px;bottom:24px;width:48px;height:48px;min-height:48px;display:flex;align-items:center;justify-content:center;padding:0;background:#f06423;color:#fff;box-shadow:0 14px 34px rgba(0,20,35,.24);transition:background .2s,color .2s,transform .2s}
.back-to-top:hover,.back-to-top:focus-visible{background:#d95418;color:#fff;transform:translateY(-2px)}
.back-to-top:focus-visible{outline:3px solid rgba(240,100,35,.3);outline-offset:3px}
.back-to-top b{font-size:0;line-height:1}
.back-to-top b::before{content:"↑";font-size:30px;font-weight:400}
.back-to-top .home-label{display:none!important}
@media(max-width:680px){.back-to-top{right:16px;bottom:calc(16px + env(safe-area-inset-bottom));width:48px;height:48px;padding:0}}
@media print{.back-to-top{display:none!important}}

/* Readability pass: enlarge supporting copy without changing display headings. */
.eyebrow{font-size:12px}
.case-no{font-size:13px}
.case-feature-copy>p{font-size:16px;line-height:1.75}
.case-tags span{font-size:12px}
.case-open{font-size:15px}
.case-hero-intro{font-size:18px}
.case-facts small{font-size:12px}
.case-facts strong{font-size:16px}
.story-label{font-size:12px}
.story-copy p{font-size:17px;line-height:1.75}
.system-grid b,.finish-grid b,.theme-grid b{font-size:12px}
.system-grid p,.finish-grid p,.theme-grid p{font-size:14px}
.case-footer,.mobile-case-nav,.back-to-top{font-size:13px}
.case-feature-water .case-feature-image{background:#ece9e3}
.case-feature-water .case-feature-image img{object-position:center}
.case-cover-water{height:auto;aspect-ratio:16/9}
.case-cover-water img{object-fit:cover}
@media(max-width:600px){
  .case-feature-copy>p{font-size:16px}
  .case-facts small{font-size:11px}
  .case-facts strong{font-size:14px}
  .story-copy p{font-size:16px;line-height:1.7}
  .system-grid p,.finish-grid p,.theme-grid p{font-size:13px}
  .case-cover-water{aspect-ratio:4/3}
}

/* Design Cases landing title: one fixed size for Chinese, English and Vietnamese. */
.cases-hero h1,
html[lang="en"] .cases-hero h1,
html[lang="vi"] .cases-hero h1{
  font-size:24px;
}

/* Orange primary headings across case listing and detail pages. */
:is(.cases-hero h1,.case-hero h1,.case-feature h2){
  font-size:27px !important;
}

/* 27px is the global display-type ceiling. */
:is(.story-copy h2,.story-quote blockquote,.story-quote em){
  font-size:27px !important;
}

.variable-gallery{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
  margin-top:32px;
}
.variable-gallery img{
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
}
@media(max-width:900px){
  .variable-gallery{grid-template-columns:1fr}
}

/* Variable-system cards: explicit industrial step markers, not image placeholders. */
.system-grid>div{
  position:relative;
  overflow:hidden;
  background:
    linear-gradient(135deg,rgba(0,159,227,.055),transparent 38%),
    #fff;
}
.system-grid>div::after{
  content:"";
  position:absolute;
  top:0;
  right:0;
  width:52px;
  height:4px;
  background:var(--brand);
}
.system-grid b{
  position:relative;
  display:inline-flex;
  width:46px;
  height:46px;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:var(--navy);
  color:#fff;
  font-size:13px;
  line-height:1;
  letter-spacing:.02em;
  box-shadow:0 7px 16px rgba(0,24,43,.14);
}
.system-grid b::after{
  content:"";
  position:absolute;
  top:1px;
  right:1px;
  width:9px;
  height:9px;
  border:2px solid #fff;
  border-radius:50%;
  background:#f26522;
}
.system-grid h3{
  margin:24px 0 12px;
}

/* YADEA OMEE: keep the full-vehicle concept and the raised pet-window detail legible. */
.case-feature-omee{grid-template-columns:1.18fr .82fr}
.case-feature-omee .case-feature-image{background:#f4dce9}
.case-feature-omee .case-feature-copy{background:#3a2733}
.case-feature-omee .case-feature-image img{object-fit:cover;object-position:center}
.case-cover-omee{height:auto!important;aspect-ratio:2/1!important;background:#f4dce9}
.case-cover-omee img{object-fit:cover!important;object-position:center!important}
.omee-detail{margin:34px 0 0;background:#f4eef4;border:1px solid var(--line)}
.omee-detail img{display:block;width:100%;height:auto;object-fit:cover}
.omee-detail figcaption{padding:18px 22px;border-top:1px solid var(--line);color:#52606a;font-size:14px;line-height:1.7}
.omee-layer-grid{margin-top:18px}
@media(max-width:900px){
  .case-feature-omee{grid-template-columns:1fr}
  .case-cover-omee{aspect-ratio:16/10!important}
}
@media(max-width:600px){
  .case-cover-omee{aspect-ratio:4/3!important}
  .case-cover-omee img{object-position:62% center!important}
  .omee-detail figcaption{padding:15px 17px;font-size:13px}
}

/* Recruitment stays accessible beside “Back to Home” without occupying the header. */
.floating-actions{position:fixed;z-index:80;right:24px;bottom:24px;display:flex;align-items:stretch;gap:10px}
.floating-actions .back-to-top,.careers-shortcut{position:static;display:flex;align-items:center;gap:16px;min-height:48px;padding:0 18px;background:var(--ink);color:#fff;box-shadow:0 14px 34px rgba(0,20,35,.2);font-size:13px;font-weight:700;letter-spacing:.02em}
.floating-actions .back-to-top{width:48px;height:48px;padding:0;justify-content:center;gap:0;background:#f06423}.careers-shortcut{background:var(--ink)}.careers-shortcut:hover,.careers-shortcut:focus-visible{background:var(--brand);color:var(--ink)}
.careers-shortcut b{font-size:17px}.join-label{display:none}
html[lang="zh-CN"] .join-label-zh,html[lang="en"] .join-label-en,html[lang="vi"] .join-label-vi{display:inline}
@media(max-width:680px){.floating-actions{right:16px;bottom:calc(16px + env(safe-area-inset-bottom));gap:8px}.floating-actions .back-to-top{width:48px}.careers-shortcut{min-height:48px;padding:0 14px}}
