/* MATE SPARK: align with CARE's font, balanced hero and footer. */
:root{--mate-font:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif}
body,button,input,select,textarea{font-family:var(--mate-font)}
.spark-footer{background:#f5f9ff;color:#073661;border-top:1px solid #bdd3ec;padding:34px 0 22px}
.spark-footer .footerTop{display:flex;align-items:flex-start;justify-content:space-between;gap:32px}
.spark-footer .footerBrand{flex:0 1 250px;min-width:0}
.spark-footer .footerBrand img{width:min(280px,100%);height:auto;max-height:none;filter:none;object-fit:contain;object-position:left center}
.spark-footer .footerBrand p{font-size:13px;line-height:1.8;color:#607b95}
.spark-footer .footerLinks{display:flex;flex:1;justify-content:flex-end;gap:10px 20px;flex-wrap:wrap;font-size:12px;font-weight:700}
.spark-footer .footerLinks a{font-size:12px;line-height:1.7;color:#607b95}
.spark-footer .footerLinks a:hover{color:#0878ea}
.spark-footer .copyright{border-top:0;margin-top:22px;padding-top:0;color:#8390a0;font-size:10px;line-height:1.8}
.spark-footer .copyright a{color:inherit;font-size:inherit}
/* Option B: keep original edge-to-edge SPARK composition, enlarge the
   family photograph by giving it a taller canvas, not by cropping it.
   The photo's own left edge dissolves independently of screen width; a
   white-to-transparent overlay softens the transition behind the headline.
   None of this changes CARE or PLAY. */
@media(min-width:761px){
 .hero .hero-inner{
  height:clamp(570px,46vw,680px);
  min-height:0;
 }
 .hero .hero-art .hero-visual{
  inset:0 0 0 auto;
  width:auto;
  height:100%;
  max-width:none;
  object-fit:contain;
  object-position:right center;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.38) 10%,#000 29%);
  mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.38) 10%,#000 29%);
 }
 .hero .hero-art::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:3;
  pointer-events:none;
  background:linear-gradient(90deg,
   #fff 0%,
   #fff 23%,
   rgba(255,255,255,.98) 31%,
   rgba(255,255,255,.90) 36%,
   rgba(255,255,255,.70) 42%,
   rgba(255,255,255,.37) 49%,
   rgba(255,255,255,.10) 56%,
   rgba(255,255,255,0) 66%);
 }
}
@media(max-width:760px){
 .hero .hero-art .hero-visual{mask-image:none;-webkit-mask-image:none}
 .spark-footer .footerTop{flex-direction:column;gap:18px}
 .spark-footer .footerBrand{flex:none}
 .spark-footer .footerLinks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%;gap:6px 16px}
 .spark-footer .footerLinks a{min-height:44px;display:flex;align-items:center;overflow-wrap:anywhere}
}
/* 2026-10-31: prominent search button, crisp blue underline and family framing. */
.nav .nav-search-cta{padding:10px 18px;border:1.5px solid #0878ea;background:#fff;color:#0878ea}
.nav .nav-search-cta:hover{background:#edf7ff;color:#075da9}
.hero h1{font-weight:900;letter-spacing:-.055em;line-height:1.32}
.hero h1 strong{font-weight:900;color:#0878ea;display:inline;box-decoration-break:clone;
 background:linear-gradient(transparent 81%,#91d7ff 81%,#91d7ff 94%,transparent 94%);
 padding:0 .025em}
@media(min-width:761px){
 .hero .hero-art .hero-visual{transform:translateX(clamp(22px,5.4vw,88px))}
}
@media(max-width:760px){
 .hero h1{font-size:clamp(34px,9vw,43px);line-height:1.3}
 .nav .nav-search-cta{padding:8px 12px;font-size:11px}
}