/* Reference composition: continuous banner, copy left, pets right. */
.hero{position:relative;display:flex;align-items:center;padding:55px 6%;height:clamp(560px,36vw,690px);min-height:560px;background:#fbf8f2;isolation:isolate}
.hero>div:first-child{width:34%;max-width:490px;padding:0;z-index:2}
.hero h1{font-size:clamp(42px,4.4vw,72px);line-height:1.08}
.hero .eyebrow{margin-bottom:20px}
.hero .pet-display{position:absolute;right:0;top:0;bottom:0;width:75%;height:100%;margin:0;z-index:0;max-width:none;overflow:hidden}
.hero .pet-display img{width:100%;height:100%;object-fit:cover;object-position:center bottom}
.hero .pet-display::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#fbf8f2 0%,rgba(251,248,242,.8) 8%,rgba(251,248,242,0) 24%);pointer-events:none}
.hero .pet-display p{display:none}
.hero .actions{gap:10px;margin-top:24px}
.hero .btn{padding:15px 18px}
@media(max-width:1000px) and (min-width:801px){.hero>div:first-child{width:36%}.hero h1{font-size:43px}.hero p{font-size:14px}.hero .pet-display{width:72%}.hero .actions{flex-direction:column;align-items:flex-start}}
@media(max-width:800px){.hero{display:block;height:auto;min-height:0;padding:40px 0 0}.hero>div:first-child{width:auto;max-width:600px;padding:0 6% 25px}.hero .pet-display{position:relative;width:100%;height:auto;top:auto;right:auto;bottom:auto}.hero .pet-display img{height:auto;object-fit:contain}.hero .pet-display::after{background:linear-gradient(180deg,#fbf8f2,rgba(251,248,242,0) 20%)}.hero h1{font-size:clamp(44px,7vw,64px)}}
#about>div:first-child>.eyebrow,#products .section-top .eyebrow{font-size:24px;line-height:1.35;letter-spacing:1.5px}@media(max-width:480px){#about>div:first-child>.eyebrow,#products .section-top .eyebrow{font-size:21px}}
.hero .actions>.btn:first-child{padding:18px 24px;font-size:15px;box-shadow:0 5px 16px rgba(7,44,96,.16);transition:box-shadow .2s,transform .2s}
.hero .actions>.btn:first-child:hover{box-shadow:0 7px 20px rgba(7,44,96,.22);transform:translateY(-1px)}
.about .chinese-logo{margin-bottom:34px!important}
.brand-divider{border:0;border-top:1px solid #e0e5eb;margin:0 0 30px;width:100%}
.services{background:var(--navy);color:white;border:0;border-radius:8px;padding:24px 28px;gap:14px 24px;align-items:center;font-size:15px;line-height:1.6}
.services b{color:var(--yellow);font-size:17px}
footer{flex-wrap:wrap}.copyright{flex-basis:100%;padding-top:18px;border-top:1px solid #e5e9ee;font-size:12px}
#copy-toast{position:fixed;bottom:26px;left:50%;transform:translate(-50%,10px);background:var(--navy);color:white;padding:10px 18px;border-radius:8px;box-shadow:0 4px 16px #072c6026;opacity:0;visibility:hidden;transition:opacity .15s,transform .15s;z-index:30;pointer-events:none;font-size:14px}
#copy-toast.visible{opacity:1;visibility:visible;transform:translate(-50%,0)}
@media(prefers-reduced-motion:reduce){#copy-toast,.hero .actions>.btn:first-child{transition:none}}

.about{grid-template-columns:minmax(220px,.65fr) minmax(0,1.35fr);gap:50px;padding-top:65px;padding-bottom:65px;align-items:start}
.about>div:nth-child(2)>h2{font-size:clamp(30px,3.1vw,43px);letter-spacing:-1.2px;white-space:nowrap;margin-bottom:22px}
.about>div:nth-child(2)>p{line-height:1.7;margin-bottom:18px}
.about .principles{gap:22px;margin-top:25px;padding-top:22px;border-top:1px solid #e0e5eb}
.about .principles p{line-height:1.65;margin-bottom:0}
#products .section-top{display:block;margin-bottom:28px}
#products .section-top h2{margin-bottom:16px}
#products .section-top>p{max-width:720px;margin:0;font-size:16px;line-height:1.7;border-left:3px solid var(--yellow);padding-left:18px}
@media(max-width:800px){.about{grid-template-columns:1fr;gap:35px;padding-top:50px;padding-bottom:50px}.about>div:nth-child(2)>h2{white-space:normal;font-size:clamp(32px,5vw,43px)}.about>div:first-child{max-width:360px}.about .principles{grid-template-columns:1fr}}
.copyright{text-align:center}
.range-photo{display:block;width:100%;height:240px;object-fit:contain;margin-bottom:20px;background:#fff}@media(max-width:480px){.range-photo{height:210px}}
.hero .pet-display{box-shadow:none;border-radius:0;background:transparent}

/* Homepage Chinese logo: keep its natural proportions and show the full image. */
#about {
  max-width: 100%;
  height: auto;
  overflow: visible;
  grid-template-columns: minmax(0, 0.65fr) minmax(0, 1.35fr);
}
#about > div {
  min-width: 0;
  max-width: 100%;
  height: auto;
  overflow: visible;
}
#about .chinese-logo {
  position: static;
  width: auto;
  max-width: 100%;
  height: auto;
  min-height: 0;
  max-height: none;
  overflow: visible;
}
#about .chinese-logo img {
  display: block;
  position: static;
  inset: auto;
  transform: none;
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: none;
  object-fit: contain;
  object-position: center;
}
@media (max-width: 800px) {
  #about { grid-template-columns: minmax(0, 1fr); }
}