.hipos-mascot{display:block;max-width:100%;height:auto;object-fit:contain;mix-blend-mode:multiply}
.mascot-welcome{padding:38px 0;background:#fff;border-bottom:1px solid #e4ebf5}
.mascot-welcome-inner{display:grid;grid-template-columns:255px minmax(0,1fr);align-items:center;gap:48px;max-width:1160px}
.mascot-welcome-visual{position:relative;isolation:isolate}
.mascot-welcome-visual:before{content:"";position:absolute;inset:15% 3% 8%;border-radius:50%;background:radial-gradient(circle at 70% 25%,#fff0e0,#edf3ff 65%);z-index:-1}
.mascot-welcome-visual .hipos-mascot{width:255px;transition:transform .35s ease}
.mascot-welcome-inner:hover .hipos-mascot{transform:translateY(-5px) rotate(-1deg)}
.mascot-welcome-copy>.eyebrow{font-size:10px;color:#003fb3;letter-spacing:1.4px}
.mascot-welcome-copy h2{font-size:clamp(27px,2.5vw,36px);line-height:1.2;letter-spacing:-1px;margin:13px 0}
.mascot-welcome-copy h2 span{color:#003fb3}
.mascot-welcome-copy>p{font-size:14px;line-height:1.8;max-width:680px}
.mascot-shortcuts{display:flex;flex-wrap:wrap;gap:10px;margin-top:23px}
.mascot-shortcuts a{display:flex;align-items:center;gap:9px;border:1px solid #dce5f5;border-radius:10px;padding:13px 15px;font-size:11px;font-weight:700;color:#002c5f;background:#f8faff;transition:background .2s,border-color .2s,transform .2s}
.mascot-shortcuts a>svg{color:#003fb3;flex-shrink:0}
.mascot-shortcuts a:hover{background:#fff5eb;border-color:#ffb878;transform:translateY(-3px)}
.mascot-shortcuts a:focus-visible{outline:3px solid #ff8302;outline-offset:4px}
.emission-section-heading.mascot-plan-heading{display:grid;grid-template-columns:minmax(0,1fr) 225px;column-gap:40px;align-items:center}
.mascot-plan-heading>.eyebrow,.mascot-plan-heading>h2,.mascot-plan-heading>p{grid-column:1}
.mascot-plan-heading>.hipos-mascot{grid-column:2;grid-row:1/4;width:225px;align-self:center}
.mascot-workflow-heading{display:grid;grid-template-columns:190px minmax(0,1fr);gap:35px;align-items:center;margin-bottom:32px;background:var(--surface)}
.mascot-workflow-heading>.hipos-mascot{width:190px}
.mascot-workflow-heading>.section-heading{margin-bottom:0}
.mascot-workflow-heading .section-heading h2{font-size:clamp(27px,3vw,39px)}
.mascot-contact-intro{display:grid;grid-template-columns:150px minmax(0,1fr);align-items:center;gap:16px;padding:12px 16px 12px 4px;margin:25px 0;background:#fff;border:1px solid #dce5f5;border-radius:18px}
.mascot-contact-intro>.hipos-mascot{width:150px}
.mascot-contact-intro .eyebrow{display:block;font-size:8px;letter-spacing:1px;color:#a34b00;margin-bottom:9px}
.mascot-contact-intro strong{display:block;font-size:18px;line-height:1.35;letter-spacing:-.4px;color:#002c5f}
.mascot-contact-intro p{font-size:12px;line-height:1.8;margin:9px 0 0}
@media(max-width:1050px){.mascot-welcome-inner{grid-template-columns:210px minmax(0,1fr);gap:30px}.mascot-contact-intro{grid-template-columns:105px minmax(0,1fr);gap:10px}.mascot-workflow-heading{grid-template-columns:155px minmax(0,1fr);gap:25px}.mascot-workflow-heading>.section-heading{display:block}.mascot-workflow-heading .section-heading>p{margin-top:15px;max-width:600px}.mascot-contact-intro strong{font-size:16px}}
@media(max-width:700px){.mascot-welcome{padding:26px 0 35px}.mascot-welcome-inner{grid-template-columns:1fr;gap:8px;text-align:center}.mascot-welcome-visual{width:185px;margin:auto}.mascot-welcome-copy h2{font-size:29px}.mascot-welcome-copy>p{font-size:13px;max-width:450px;margin:auto}.mascot-shortcuts{justify-content:center;gap:8px}.mascot-shortcuts a{font-size:11px;padding:12px}.emission-section-heading.mascot-plan-heading{grid-template-columns:minmax(0,1fr) 100px;column-gap:10px}.mascot-plan-heading>.hipos-mascot{grid-column:2;grid-row:1;width:100px}.mascot-plan-heading>h2,.mascot-plan-heading>p{grid-column:1/-1}.mascot-plan-heading>.eyebrow{line-height:1.8}.mascot-workflow-heading{grid-template-columns:1fr;gap:10px;text-align:center}.mascot-workflow-heading>.hipos-mascot{width:175px;margin:auto}.mascot-workflow-heading>.section-heading{display:block}.mascot-workflow-heading .section-heading>p{margin:15px auto 0}.mascot-contact-intro{grid-template-columns:125px minmax(0,1fr);margin:22px 0}.mascot-contact-intro strong{font-size:17px}}
@media(prefers-reduced-motion:reduce){.mascot-welcome-visual .hipos-mascot,.mascot-shortcuts a{transition:none}.mascot-welcome-inner:hover .hipos-mascot,.mascot-shortcuts a:hover{transform:none}}

.dining-mascot-welcome{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:55px;align-items:center;margin-bottom:40px;background:#fff}
.dining-mascot-welcome>.dining-heading{margin-bottom:0}
.dining-mascot-welcome-visual{position:relative;isolation:isolate}
.dining-mascot-welcome-visual:before{content:"";position:absolute;inset:21% 3% 10%;border-radius:50%;background:linear-gradient(135deg,#edf3ff,#fff3e5);z-index:-1}
.dining-mascot-welcome-visual .hipos-mascot{width:280px;transition:transform .35s ease}
.dining-mascot-welcome:hover .hipos-mascot{transform:translateY(-4px)}
.dining-mascot-orders{display:grid;grid-template-columns:185px minmax(0,1fr);gap:20px;align-items:center;background:#fff;margin-top:26px;padding-top:20px;border-top:1px solid #e0e7f2}
.dining-mascot-orders>.hipos-mascot{width:185px}
.dining-mascot-orders>div>span{display:block;color:#a34b00;font-size:8px;font-weight:750;letter-spacing:1px;line-height:1.8;margin-bottom:10px}
.dining-mascot-orders strong{display:block;color:#002c5f;font-size:19px;line-height:1.4;letter-spacing:-.4px}
.dining-mascot-orders a{display:inline-flex;align-items:center;gap:9px;color:#003fb3;font-size:11px;font-weight:700;padding:13px 0;margin-top:8px}
.dining-mascot-orders a:hover{text-decoration:underline;text-underline-offset:4px}
.dining-mascot-orders a:focus-visible{outline:3px solid #ff8302;outline-offset:3px;border-radius:3px}
@media(max-width:1050px){.dining-mascot-welcome{grid-template-columns:minmax(0,1fr) 220px;gap:30px}.dining-mascot-orders{grid-template-columns:145px minmax(0,1fr);gap:12px}.dining-mascot-orders strong{font-size:17px}}
@media(max-width:600px){.dining-mascot-welcome{grid-template-columns:1fr;gap:16px;margin-bottom:28px}.dining-mascot-welcome-visual{grid-row:1;width:195px;margin:auto}.dining-mascot-welcome>.dining-heading{text-align:center}.dining-mascot-orders{grid-template-columns:145px minmax(0,1fr);gap:12px;max-width:450px}.dining-mascot-orders strong{font-size:17px}.dining-mascot-orders>div>span{font-size:7px}}
@media(prefers-reduced-motion:reduce){.dining-mascot-welcome-visual .hipos-mascot{transition:none}.dining-mascot-welcome:hover .hipos-mascot{transform:none}}
