/* Shared 1440px content grid; hero artwork stays viewport-wide. */
body[data-page] .container{width:min(1440px,calc(100% - 64px))}

/* Reference header: the existing 水一方 mark and its brand descriptor. */
body[data-page] .site-header .nav-wrap{height:80px}
body[data-page] .site-header .brand img{width:150px;max-height:none;height:auto}
body[data-page] .site-header .brand small{display:block;width:150px;margin:0;color:#153e78;font-size:10px;font-weight:700;line-height:1.2;letter-spacing:0;white-space:nowrap;text-align:justify;text-align-last:justify}

/* The source banners are about 2.6:1. Match their canvas ratio on desktop so
   cover fills the viewport without the side gutters visible in the mockups. */
body[data-page=home] .hero-home,.feature-hero,.solution-hero,.about-hero,.support-hero{
  height:clamp(500px,38.5vw,780px);
}
.home-slide,.feature-hero-image,.solution-hero>img,.about-hero>img,.support-hero>img{
  object-fit:cover;
  object-position:center center;
}
.home-slides,.feature-hero,.solution-hero,.about-hero,.support-hero{background:#eaf7ff}

/* Scene photos use a consistent compact frame; product cutouts remain intact. */
.home-scene-card>img{height:clamp(190px,14vw,250px);aspect-ratio:auto;object-fit:cover;object-position:center 48%}
.home-flow-grid img{height:clamp(140px,10vw,190px);object-fit:cover;object-position:center 45%}
.scene-card>img,.about-belief-photo img,.about-journey-image img,.support-role>img{object-fit:cover;object-position:center}
body[data-page=home] .home-flow-grid img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;object-position:center;border-radius:10px}
body[data-page=support] .support-role>img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;object-position:center}
.about-belief-photo{height:clamp(190px,15vw,240px)}
.about-journey-image{height:clamp(125px,10vw,155px)}
.support-service>img{object-fit:cover;object-position:center 37%}
.support-faq-art{object-fit:cover;object-position:76% center}
.solution-product>img{object-fit:cover}
.solution-case-art img,.product-feature>img{object-fit:contain;background:#eaf7ff}
.about-product>img{object-fit:contain}

/* Support artwork now includes its own labels and branding. */
body[data-page=support] .support-hero>img{object-position:center center}
.support-faq-visual{position:relative;height:360px;min-width:0;overflow:hidden;background:#eaf7ff}
#faq{scroll-margin-top:80px}
.support-faq-visual .support-faq-art{width:100%;height:100%;object-fit:cover;object-position:right center;mask-image:linear-gradient(90deg,transparent,#000 12%)}

/* Give every product category the same square photographic crop. */
body[data-page=home] .home-product-card img{
  flex:0 0 clamp(88px,6vw,112px);
  width:clamp(88px,6vw,112px);
  height:clamp(88px,6vw,112px);
  aspect-ratio:1;
  object-fit:cover;
  object-position:center 52%;
  border-radius:10px;
  mix-blend-mode:normal;
  background:#dff2ff;
}
body[data-page=home] .home-product-card:nth-child(n+2) img{object-position:center 60%}
body[data-page=home] .home-product-card:nth-child(4) img{object-position:center 65%}

/* The About introduction follows the same content width as its neighbors. */
body[data-page=about] .about-intro{
  width:min(1440px,calc(100% - 64px));
  height:auto;
  min-height:0;
  aspect-ratio:2020 / 778;
  margin-inline:auto;
}
body[data-page=about] .about-intro>img{object-fit:contain}
body[data-page=about] .about-intro-inner{position:absolute;inset:0}

@media(max-width:760px){
  body[data-page] .container{width:min(600px,calc(100% - 32px))}
  body[data-page] .site-header .nav-wrap{height:70px}
  body[data-page] .site-header .brand img{width:130px}
  body[data-page] .site-header .brand small{width:130px;font-size:8.5px}
  body[data-page=home] .hero-home{height:620px}
  .home-slides{top:310px;bottom:0}
  .home-slide{object-fit:cover;object-position:76% center}
  .feature-hero{height:570px}
  .feature-hero-image{top:280px;height:290px;object-fit:cover;object-position:73% center}
  .solution-hero{height:560px}
  .solution-hero>img{top:255px;height:305px;object-fit:cover;object-position:75% center}
  .about-hero{height:570px}
  .about-hero>img{top:260px;height:310px;object-fit:cover;object-position:right center}
  .support-hero{height:670px}
  body[data-page=support] .support-hero>img{top:345px;height:325px;object-fit:cover;object-position:right center}
  body[data-page=about] .about-intro{display:flex;width:min(600px,calc(100% - 32px));height:auto;min-height:0;aspect-ratio:auto;padding-bottom:0;flex-direction:column}
  body[data-page=about] .about-intro-inner{position:relative;inset:auto;min-height:0}
  body[data-page=about] .about-intro>img{position:relative;top:auto;height:auto;width:100%;display:block;margin-top:12px;order:1}
  body[data-page=about] .about-intro::after{display:none}
  .home-scene-card>img{height:205px}
  body[data-page=home] .home-product-card img{flex-basis:clamp(64px,18vw,86px);width:clamp(64px,18vw,86px);height:clamp(64px,18vw,86px)}
  body[data-page=home] .home-flow-grid img{height:auto}
  .about-belief-photo{height:200px}
  .about-journey-image{height:130px}
  .product-feature>img{object-fit:contain}
  .solution-case-art img{object-fit:contain}
  .support-faq-visual{height:260px}
}

/* Each page uses its own footer banner artwork from the matching design. */
body[data-page=home] .cta{background:#0754b3 url('assets/cta-home.webp') center 61%/cover no-repeat}
body[data-page=features] .cta{background:#0754b3 url('assets/cta-features.webp') center 62%/cover no-repeat}
body[data-page=solutions] .solution-cta{background:#0754b3 url('assets/cta-solutions.webp') center 60%/cover no-repeat}
body[data-page=about] .about-brand::after{display:none}
body[data-page=about] .about-brand-mascot{bottom:0}
body[data-page=about] .about-brand-art em{bottom:18px}
body[data-page=about] .about-cta{background:#0754b3 url('assets/cta-about.webp') center bottom/cover no-repeat}
@media(max-width:760px){body[data-page=about] .about-cta{background-image:linear-gradient(180deg,rgba(3,65,146,.72),rgba(3,65,146,.36)),url('assets/cta-about.webp')}}
body[data-page=support] .support-cta{background:#0754b3 url('assets/cta-support.webp') center 62%/cover no-repeat}
body[data-page=home] .cta .btn{background:#fff;border-color:#fff;color:#087bff}
.cta-actions{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap}
body[data-page=features] .cta-actions .btn{background:#087bff;border-color:#e7f4ff;color:#fff}
body[data-page=features] .cta-actions .btn-outline{background:transparent;border-color:#fff;color:#fff}
body[data-page=solutions] .solution-cta-inner>img{height:205px;width:205px;left:0;bottom:-3px;object-fit:contain}

/* Contact cards: icon, actionable content and the illustration shown in the reference. */
body[data-page=support] .support-contact{padding:35px 0 28px}
body[data-page=support] .support-contact-grid{gap:16px}
body[data-page=support] .support-contact-grid .support-contact-card{
  position:relative;display:grid;grid-template-columns:56px minmax(0,1fr);
  align-content:start;gap:13px;min-height:182px;padding:18px 18px 58px;
  overflow:hidden;border:1px solid #dcecf9;border-radius:13px;
  background:linear-gradient(145deg,#fff 45%,#f1f9ff 100%);
  box-shadow:0 8px 22px rgba(14,89,160,.035);
}
body[data-page=support] .support-contact-grid .support-contact-icon{
  position:relative;z-index:1;width:56px;height:56px;display:grid;place-items:center;
  border:2px solid #d6ebfd;border-radius:50%;background:#ebf7ff;color:#087bff;
}
body[data-page=support] .support-contact-icon svg{width:28px;height:28px}
body[data-page=support] .support-contact-copy{position:relative;z-index:1;max-width:230px}
body[data-page=support] .support-contact-copy h3{margin:1px 0 5px;font-size:18px}
body[data-page=support] .support-contact-copy p{margin:0;font-size:12px;line-height:1.45}
body[data-page=support] .support-contact-action{
  position:absolute;z-index:2;left:18px;bottom:16px;display:inline-flex;align-items:center;justify-content:center;
  width:auto;height:auto;min-height:36px;padding:0 20px;border:0;border-radius:6px;background:#087bff;color:#fff;
  font-family:inherit;font-size:13px;font-weight:700;line-height:1;cursor:pointer;box-shadow:0 3px 8px rgba(4,101,209,.13);
}
body[data-page=support] .support-contact-action span{margin-left:8px}
body[data-page=support] .support-contact-muted{background:#e5eef9;color:#7c93b1;cursor:default;box-shadow:none;font-size:11px}
body[data-page=support] .support-contact-art{position:absolute;z-index:0;right:0;bottom:-1px;width:125px;height:110px;object-fit:contain;object-position:right bottom;pointer-events:none}
body[data-page=support] .support-contact-agent{right:5px;width:127px}
body[data-page=support] .support-contact-phone{right:5px;width:105px}
body[data-page=support] .support-contact-envelope{right:7px;width:110px}
body[data-page=support] .support-contact-status{margin:10px 0 0;color:#527397;font-size:12px}
body[data-page=support] .support-contact-status:empty{display:none}

@media(max-width:760px){
  body[data-page=solutions] .solution-cta-inner{min-height:225px;justify-content:flex-end;text-align:right}
  body[data-page=solutions] .solution-cta-inner>img{width:145px;height:165px;left:-16px;bottom:-2px}
  body[data-page=solutions] .solution-cta-inner>div{max-width:72%}
  body[data-page=support] .support-contact-grid .support-contact-card{min-height:174px}
}