@font-face{font-family:"Harebare Rounded";src:url("/assets/fonts/hero-rounded-700.ttf") format("truetype");font-style:normal;font-weight:700;font-display:swap}
@font-face{font-family:"Harebare Rounded";src:url("/assets/fonts/hero-rounded-900.ttf") format("truetype");font-style:normal;font-weight:900;font-display:swap}

/* Editable text and layout. Only the original illustrated subjects remain raster assets. */
.hero-coded{--hero-navy:#08345b;--hero-orange:#ff7900;container-type:inline-size;font-family:"Harebare Rounded",var(--font);color:var(--hero-navy);overflow:hidden}
.hero-stage{position:relative;aspect-ratio:1672 / 651;isolation:isolate;overflow:hidden}
.hero-artwork{position:absolute;inset:0 auto 0 0;width:47.8469%;height:100%;overflow:hidden}
.hero-sun{position:absolute;left:4.25%;top:9.3%;width:26.5%;aspect-ratio:1;border-radius:50%;background:linear-gradient(145deg,#ff8500,#ff7400);z-index:0}
.hero-arch{position:absolute;left:.875%;top:6.4%;width:89.25%;height:116%;border-radius:51% 51% 0 0 / 54% 54% 0 0;background:linear-gradient(150deg,#093359,#0c3b65);z-index:1}
.hero-original-art{position:absolute;inset:0;width:100%;height:100%;max-width:none;z-index:2}
.hero-speech{position:absolute;left:62.7%;top:10%;width:31.7%;height:23.5%;display:grid;place-content:center;border:.28cqw solid var(--hero-navy);border-radius:53% 50% 48% 51%;background:#fff;color:var(--hero-navy);font-size:1.74cqw;font-weight:900;line-height:1.3;text-align:center;z-index:3;transform:rotate(-1.5deg);overflow:visible}
.hero-speech:before{content:"";position:absolute;left:10%;bottom:-1.3cqw;width:4.8cqw;height:2.8cqw;background:var(--hero-navy);clip-path:polygon(0 100%,32% 0,100% 0);z-index:-1}
.hero-speech:after{content:"";position:absolute;left:13%;bottom:-.8cqw;width:3.9cqw;height:2.3cqw;background:white;clip-path:polygon(0 100%,30% 0,100% 0);z-index:-1}
.hero-speech-ray{position:absolute;z-index:4;width:.6cqw;height:1.95cqw;background:var(--hero-orange);border-radius:99px}
.hero-speech-ray.ray-one{left:88.6%;top:6.4%;transform:rotate(13deg)}
.hero-speech-ray.ray-two{left:91.5%;top:8.8%;transform:rotate(43deg)}
.hero-native-copy{position:absolute;inset:0;pointer-events:none}
.hero-native-copy p,.hero-native-title{pointer-events:auto}
.hero-category{position:absolute;left:49.35%;top:1.85%;display:inline-block;padding:.16cqw 1.8cqw .27cqw;border-radius:99px;background:var(--hero-orange);color:white;font-size:2.16cqw;font-weight:900;line-height:1.4;letter-spacing:.03em;white-space:nowrap}
.hero-native-title{margin:0;font-weight:900;letter-spacing:0;line-height:1}
.hero-native-title>span{position:absolute;left:49.1%;white-space:nowrap}
.hero-native-first{top:12.2%;font-size:5cqw;line-height:1.3;letter-spacing:-.04em;transform:scaleX(.8);transform-origin:left top;width:max-content}
.hero-native-name{top:29%;display:flex;align-items:baseline;gap:.65cqw;color:var(--hero-orange);font-size:10.55cqw;line-height:1;letter-spacing:-.075em;isolation:isolate}
.hero-native-name>span:first-child{position:relative;padding-bottom:.6cqw}
.hero-native-name>span:first-child:after{content:"";position:absolute;left:.3cqw;bottom:-.05cqw;width:78%;height:1cqw;border-top:.38cqw solid var(--hero-orange);border-radius:55% 48% 0 0;transform:rotate(-1deg)}
.hero-native-name .hero-native-ni{color:var(--hero-navy);font-size:.72em;letter-spacing:-.04em;margin-left:.4cqw}
.hero-native-last{top:57.8%;font-size:6cqw;line-height:1.25;letter-spacing:-.045em;transform:scaleX(.92);transform-origin:left top;width:max-content}
.hero-native-description{position:absolute;left:49.35%;top:79%;font-size:1.97cqw;line-height:1.53;font-weight:700;letter-spacing:.025em;white-space:nowrap}
.hero-native-bar{position:relative;display:flex;align-items:center;justify-content:space-between;gap:2cqw;min-height:9.45cqw;padding:1.45cqw 2.35cqw 1.45cqw 4.4cqw;background:linear-gradient(110deg,#09345d,#073258);color:#fff}
.hero-native-bar>p{font-weight:700;font-size:2.72cqw;letter-spacing:.08em;line-height:1.5;white-space:nowrap}
.hero-native-button{display:flex;align-items:center;justify-content:center;gap:1.6cqw;min-height:6.3cqw;flex:0 0 36.95cqw;padding:1cqw 1.7cqw;border-radius:99px;background:linear-gradient(110deg,#ff8400,#ff7500);color:#fff;font-size:2.65cqw;line-height:1.4;font-weight:900;letter-spacing:.035em;white-space:nowrap;transition:filter .18s,transform .18s}
.hero-native-button:hover{filter:brightness(1.05);transform:translateY(-2px)}
.hero-native-button:focus-visible{outline:3px solid white;outline-offset:5px}
.hero-button-arrow{position:relative;display:block;width:2.4cqw;height:.39cqw;border-radius:99px;background:currentColor;flex-shrink:0}
.hero-button-arrow:before,.hero-button-arrow:after{content:"";position:absolute;right:0;width:1.45cqw;height:.39cqw;border-radius:99px;background:currentColor;transform-origin:calc(100% - .17cqw) center}
.hero-button-arrow:before{transform:rotate(45deg)}
.hero-button-arrow:after{transform:rotate(-45deg)}

/* Character illustrations follow the content without covering text. */
.service-row{grid-template-columns:55px minmax(0,1.08fr) minmax(0,1.1fr) 138px;gap:23px;min-height:216px}
.service-art{width:138px;aspect-ratio:1;align-self:center;justify-self:end}
.service-art>img{width:100%;height:100%;object-fit:contain}
.otter-on-soft{mix-blend-mode:multiply}
.original-otter-medallion{border-radius:50%;overflow:hidden;background:linear-gradient(145deg,#09365c,#0b3a62);aspect-ratio:1;isolation:isolate}
.original-otter-medallion>svg{display:block;width:100%;height:100%;max-width:none;transform:translateY(5%)}
.care-heading{position:relative}
.care-support{display:flex;align-items:center;gap:23px;margin-top:24px}
.care-support .light-link{margin-top:0;max-width:230px}
.care-support img{width:120px;height:135px;object-fit:contain;flex-shrink:0}
.flow-list{gap:32px;margin-top:43px}
.flow-art{width:158px;height:166px;margin:9px auto 22px;display:grid;place-items:center}
.flow-art>img{width:100%;height:100%;object-fit:contain}
.flow-art.original-otter-medallion{width:150px;height:150px;margin-top:19px;margin-bottom:28px}
.flow-list li:not(:last-child):before{z-index:0}
.flow-number{margin-bottom:16px}
.faq-mascot{display:flex;align-items:center;gap:8px;margin-top:28px}
.faq-mascot>img{width:190px;height:195px;object-fit:contain}
.faq-mascot p{position:relative;max-width:160px;padding:13px 14px;border:2px solid var(--navy);border-radius:17px;background:#fff;font-weight:800;font-size:14px;line-height:1.8}
.faq-mascot p:before{content:"";position:absolute;left:-8px;top:44%;width:12px;height:12px;background:white;border-left:2px solid var(--navy);border-bottom:2px solid var(--navy);transform:rotate(45deg)}
.contact-welcome{display:flex;align-items:center;gap:17px;margin-top:12px}
.contact-welcome>p{font-size:17px;line-height:2}
.contact-welcome>img{width:130px;height:145px;object-fit:contain;margin-left:10px}
.contact-status{margin-top:13px}

@media(max-width:1250px){.service-row{grid-template-columns:45px minmax(0,1fr) minmax(0,1fr) 110px;gap:17px;min-height:202px}.service-art{width:110px}.service-name h3{font-size:21px}.service-name>p{font-size:13px}.service-description>p{font-size:15px}.care-support{gap:14px}.care-support img{width:110px}.flow-art{width:145px;height:150px}.flow-art.original-otter-medallion{width:135px;height:135px}.faq-mascot{flex-wrap:wrap;gap:10px}.faq-mascot>img{width:165px;height:175px}.faq-mascot p{font-size:13px}.contact-welcome>p{font-size:16px}.contact-welcome>img{width:110px;height:130px;margin-left:0}}
@media(max-width:1050px){.service-row{grid-template-columns:40px minmax(0,1fr) minmax(0,1fr) 100px;gap:15px}.service-art{width:100px}.service-name h3{font-size:19px}.service-description>p{font-size:14px}.care-support .light-link{font-size:14px;gap:10px}.care-support img{width:94px;height:115px}.flow-list{gap:24px}.flow-art{width:130px;height:138px}.flow-art.original-otter-medallion{width:125px;height:125px;margin-top:15px;margin-bottom:24px}.faq-mascot>img{width:155px;height:164px}.faq-mascot p{max-width:145px}.contact-welcome>img{width:100px;height:124px}.contact-welcome>p{font-size:15px}}
@media(max-width:760px){
  .hero-stage{aspect-ratio:auto;display:flex;flex-direction:column;padding-top:22px;overflow:hidden}
  .hero-native-copy{position:relative;inset:auto;order:0;text-align:center;padding:0 17px;pointer-events:auto}
  .hero-category{position:static;font-size:clamp(13px,3.65cqw,20px);padding:5px 16px 6px;line-height:1.65;letter-spacing:.02em;margin:0 auto 14px}
  .hero-native-title{position:relative;font-weight:900;line-height:1.2}
  .hero-native-title>span{position:relative;left:auto;top:auto;display:block;width:auto;transform:none;white-space:nowrap}
  .hero-native-first{font-size:clamp(19px,5.65cqw,36px);line-height:1.5;letter-spacing:-.065em}
  .hero-native-title .hero-native-name{display:flex;align-items:baseline;justify-content:center;font-size:clamp(53px,15.2cqw,91px);gap:3px;letter-spacing:-.075em;line-height:1.22;margin:3px 0 2px}
  .hero-native-name>span:first-child{padding-bottom:2px}
  .hero-native-name>span:first-child:after{left:1px;bottom:0;width:85%;height:6px;border-top:3px solid var(--hero-orange)}
  .hero-native-name .hero-native-ni{font-size:.73em;margin-left:5px}
  .hero-native-last{font-size:clamp(27px,8cqw,49px);line-height:1.5;letter-spacing:-.04em}
  .hero-native-description{position:static;font-size:clamp(12px,3.23cqw,18px);line-height:1.9;letter-spacing:0;white-space:normal;margin:14px 0 0}
  .hero-artwork{position:relative;inset:auto;order:1;width:95%;max-width:530px;height:auto;aspect-ratio:800 / 651;margin:19px auto 0}
  .hero-speech{width:34%;left:62%;font-size:clamp(12px,3.4cqw,21px);border-width:2.3px}
  .hero-speech:before{left:10%;bottom:-9px;width:31px;height:22px}
  .hero-speech:after{left:13%;bottom:-5px;width:23px;height:17px}
  .hero-speech-ray{width:5px;height:17px}
  .hero-native-bar{min-height:0;display:block;padding:20px 22px 25px;text-align:center}
  .hero-native-bar>p{font-size:clamp(14px,4cqw,21px);line-height:1.8;letter-spacing:.04em;margin-bottom:12px;white-space:normal}
  .hero-native-button{max-width:470px;min-height:60px;margin:0 auto;padding:13px 20px;gap:21px;font-size:clamp(18px,5cqw,25px);letter-spacing:.02em;line-height:1.55;white-space:normal}
  .hero-button-arrow{width:25px;height:4px}
  .hero-button-arrow:before,.hero-button-arrow:after{width:15px;height:4px;transform-origin:calc(100% - 2px) center}
  .service-row{grid-template-columns:34px minmax(0,1fr) 87px;gap:9px 13px;min-height:0;padding:26px 0}
  .service-num{grid-column:1;grid-row:1}
  .service-name{grid-column:2;grid-row:1}
  .service-name>p{font-size:12px;line-height:1.8;margin-bottom:7px}
  .service-name h3{font-size:18px;line-height:1.65}
  .service-description{grid-column:2 / -1;grid-row:2}
  .service-description>p{font-size:14px;line-height:1.95;margin-top:3px}
  .service-art{grid-column:3;grid-row:1;width:87px;align-self:center}
  .care-support{gap:22px;margin-top:15px;justify-content:space-between;max-width:370px}
  .care-support img{width:105px;height:123px}
  .care-support .light-link{font-size:14px;max-width:225px}
  .flow-list{margin-top:33px;gap:0}
  .flow-list li{display:grid;grid-template-columns:minmax(0,1fr) 96px;gap:0 12px;padding:0 0 29px 57px;min-height:170px}
  .flow-list h3{grid-column:1 / -1;grid-row:1;font-size:18px;padding-top:5px;margin-bottom:11px}
  .flow-list p{grid-column:1;grid-row:2;font-size:14px;line-height:1.9}
  .flow-art,.flow-art.original-otter-medallion{grid-column:2;grid-row:2;width:96px;height:105px;margin:3px 0 0;align-self:start}
  .flow-art.original-otter-medallion{height:96px;margin-top:8px}
  .flow-number{left:0;top:0;margin:0}
  .flow-list li:not(:last-child):before{left:21px;top:50px;bottom:8px}
  .flow-list li:last-child{padding-bottom:0;min-height:150px}
  .faq-mascot{flex-wrap:nowrap;gap:18px;margin-top:20px}
  .faq-mascot>img{width:126px;height:142px}
  .faq-mascot p{font-size:14px;max-width:175px;padding:13px 16px}
  .faq-list{margin-top:24px}
  .contact-welcome{gap:13px;margin-top:12px}
  .contact-welcome>p{font-size:14px;line-height:1.95}
  .contact-welcome>img{width:100px;height:121px;margin-left:auto}
  .contact-status{margin-top:15px}
}
@media(max-width:380px){.service-row{grid-template-columns:29px minmax(0,1fr) 72px;gap:8px 10px}.service-art{width:72px}.service-name h3{font-size:17px}.service-name>p{font-size:12px}.flow-list li{grid-template-columns:minmax(0,1fr) 78px;padding-left:52px;gap:0 10px}.flow-art,.flow-art.original-otter-medallion{width:78px;height:88px}.flow-art.original-otter-medallion{height:78px}.flow-list h3{font-size:17px}.flow-list p{font-size:13px}.contact-welcome>img{width:84px;height:109px}.contact-welcome>p{font-size:13px}.hero-native-button{font-size:18px;gap:17px}}
