@font-face{font-family:Poppins;src:url('assets/fonts/poppins-regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:Poppins;src:url('assets/fonts/poppins-medium.ttf') format('truetype');font-weight:500;font-display:swap}
@font-face{font-family:Poppins;src:url('assets/fonts/poppins-bold.ttf') format('truetype');font-weight:700;font-display:swap}
@font-face{font-family:'Bebas Neue';src:url('assets/fonts/bebas-neue.ttf') format('truetype');font-weight:400;font-display:swap}
:root{--background:#d2e7f4;--blue:#0d5d83;--body-blue:#3475a5;--pink:#b94b9a;--yellow:#ffda00;--cyan:#32b3dd}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--background);color:var(--blue);font-family:Poppins,Arial,sans-serif;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
a:focus-visible{outline:3px solid var(--blue);outline-offset:6px}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:fixed;z-index:5;top:12px;left:12px;padding:12px 20px;background:white;transform:translateY(-180%);border-radius:8px}
.skip-link:focus{transform:translateY(0)}
.landing-page{max-width:1280px;margin:auto;overflow:hidden}
.hero{position:relative;aspect-ratio:1.92}
.brand{position:absolute;left:0;top:0;width:22.8%}
.announcement{position:absolute;top:2%;left:50%;width:39%;transform:translateX(-50%)}
.parrot{position:absolute;left:-1%;top:33%;width:29%}
.rabbit{position:absolute;right:0;top:32%;width:33.5%}
.opening{position:absolute;left:30%;top:73%;width:40%;height:22%;display:grid;place-items:center;isolation:isolate}
.opening::before{content:"";position:absolute;inset:0;background:var(--cyan);border-radius:21% 79% 36% 64% / 36% 25% 75% 64%;transform:rotate(-2deg);z-index:-1}
.opening p{margin:0;color:#fff;font-family:'Bebas Neue','Arial Narrow',sans-serif;font-size:clamp(30px,4.15vw,53px);letter-spacing:1px;line-height:1.1}
.introduction{padding:18px 3.6% 0;text-align:center}
.introduction h2{margin:0 auto 14px;max-width:1040px;color:#2c6996;font-size:clamp(20px,2.1vw,27px);line-height:1.45;font-weight:700}
.about-panel{min-height:480px;padding:78px 9% 70px;display:flex;flex-direction:column;justify-content:center;gap:30px;background:url('assets/white-panel.png') center/100% 100% no-repeat;color:var(--body-blue)}
.about-panel p{margin:0;font-size:clamp(18px,1.87vw,24px);line-height:1.35}
.contact-section{position:relative;margin:70px 8.5% 0;padding:78px 0 205px;isolation:isolate}
.yellow-shape{position:absolute;inset:70px 0 75px;background:var(--yellow);border-radius:48% 42% 46% 44% / 44% 46% 50% 48%;transform:rotate(-3deg);z-index:-1}
.contact-cards{display:grid;grid-template-columns:1fr 1fr;gap:9.5%;width:79%;margin:auto}
.contact-card{position:relative;border-radius:34px;background:white;text-align:center;min-width:0;min-height:385px;padding:72px 22px 30px;display:flex;flex-direction:column;align-items:center}
.card-icon{position:absolute;top:-72px;left:50%;transform:translateX(-50%);width:132px;height:132px;border-radius:50%;background:var(--pink);color:white;display:grid;place-items:center}
.card-icon svg{width:80px;height:80px}
.contact-card h2{font-size:28px;line-height:1.45;margin:0 0 24px;font-weight:700}
.contact-card address{font-style:normal;font-weight:700;font-size:18px;line-height:1.4}
.email-icon{width:40px;height:40px;color:var(--pink);margin:25px 0 17px}
.email-link{font-size:18px;font-weight:500;text-decoration:none;white-space:nowrap}
.email-link:hover{text-decoration:underline;text-underline-offset:4px}
.website-card p{margin:0 12px 25px;font-size:18px;line-height:1.4;font-weight:500}
.button{display:inline-flex;align-items:center;justify-content:center;margin-top:auto;padding:14px 27px;border-radius:40px;background:var(--pink);color:white;text-decoration:none;font-size:20px;font-weight:700;transition:background .18s,transform .18s}
.button:hover{background:#9e3782;transform:translateY(-2px)}
.gecko{position:absolute;width:48%;left:28%;bottom:15px}
@media(min-width:1280px){.opening p{font-size:53px}}
@media(max-width:900px) and (min-width:601px){.introduction{padding-top:12px}.about-panel{min-height:360px;padding:45px 9%;gap:22px}.contact-section{margin-top:55px;padding-bottom:160px}.contact-cards{width:87%;gap:7%}.contact-card{padding:55px 15px 24px;min-height:335px;border-radius:26px}.card-icon{width:104px;height:104px;top:-60px}.card-icon svg{width:66px;height:66px}.contact-card h2{font-size:21px;margin-bottom:20px}.contact-card address,.email-link,.website-card p{font-size:14px}.website-card p{margin-inline:4px}.button{font-size:16px;padding:12px 20px}.email-icon{margin-top:20px}.yellow-shape{bottom:50px}.gecko{bottom:0}}
@media(max-width:600px){
  .hero{aspect-ratio:auto;height:700px}
  .brand{width:145px}
  .announcement{top:75px;width:330px;max-width:90%}
  .parrot{width:225px;max-width:55%;left:-20px;top:425px}
  .rabbit{width:260px;max-width:64%;right:0;top:420px}
  .opening{left:17%;top:367px;width:66%;height:78px;z-index:1}
  .opening p{font-size:32px;letter-spacing:.5px}
  .introduction{padding:0 20px}
  .introduction h2{font-size:20px;line-height:1.5;margin:0 4px 25px}
  .desktop-break{display:none}
  .about-panel{background:white;border-radius:48px 40px 52px 35px / 65px 55px 60px 45px;padding:38px 25px;min-height:0;gap:24px}
  .about-panel p{font-size:16px;line-height:1.6}
  .contact-section{margin:45px 18px 0;padding:65px 18px 140px}
  .yellow-shape{inset:35px 0 40px;border-radius:48% 46% 48% 46% / 15% 15% 16% 16%;transform:rotate(-2deg)}
  .contact-cards{width:100%;max-width:350px;grid-template-columns:1fr;gap:90px}
  .contact-card{padding:62px 22px 32px;min-height:340px;border-radius:28px}
  .card-icon{width:106px;height:106px;top:-55px}
  .card-icon svg{width:68px;height:68px}
  .contact-card h2{font-size:24px;margin-bottom:23px}
  .contact-card address,.email-link{font-size:15px}
  .website-card p{font-size:17px;line-height:1.55;margin:0 4px 25px}
  .email-icon{margin:23px 0 14px}
  .button{font-size:18px;padding:14px 25px}
  .gecko{width:85%;left:8%;bottom:15px}
}
@media(max-width:360px){.hero{height:655px}.announcement{top:80px}.opening{top:340px}.opening p{font-size:28px}.parrot{top:400px}.rabbit{top:395px}.email-link{font-size:13px}.contact-card{padding-inline:15px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.button{transition:none}.button:hover{transform:none}}