:root{--navy:#123842;--cream:#f8f0e3;--coral:#ff6758;--yellow:#f4bd3b;--aqua:#77d2d8}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--cream);color:var(--navy)}
body{font-family:Arial,Helvetica,sans-serif}
.landing{min-height:100svh;padding:0 clamp(24px,6vw,88px);display:grid;grid-template-rows:100px 1fr 80px;overflow:hidden;position:relative}
.header{display:flex;align-items:center;justify-content:space-between}
.logo{display:flex;align-items:center;gap:12px;color:inherit;text-decoration:none;font-weight:900;font-size:13px;letter-spacing:.13em}
.logo-mark{width:42px;height:32px;border:2px solid var(--navy);border-radius:55% 45% 45% 55%;position:relative;display:block}
.logo-mark:before{content:"";position:absolute;left:-13px;top:5px;border-top:9px solid transparent;border-bottom:9px solid transparent;border-right:14px solid var(--navy)}
.logo-mark i{position:absolute;width:4px;height:4px;border-radius:50%;background:var(--navy);right:8px;top:8px}
.status{text-transform:uppercase;font-weight:900;font-size:10px;letter-spacing:.15em;display:flex;align-items:center;gap:9px}
.status span{width:9px;height:9px;border-radius:50%;background:var(--coral);box-shadow:0 0 0 4px rgba(255,103,88,.15)}
.hero{display:grid;grid-template-columns:1.02fr .98fr;align-items:center;gap:5vw;padding:40px 0 55px}
.eyebrow{text-transform:uppercase;font-weight:900;font-size:11px;letter-spacing:.17em;margin:0 0 26px;display:flex;align-items:center;gap:12px}
.eyebrow:before{content:"";width:36px;height:3px;background:var(--yellow)}
h1{font-family:Georgia,"Times New Roman",serif;font-size:clamp(66px,8vw,126px);line-height:.82;letter-spacing:-.065em;margin:0}
h1 em{font-weight:400;color:var(--coral)}
.intro{font-size:clamp(17px,1.5vw,21px);line-height:1.6;max-width:580px;margin:40px 0 0}
.art{height:min(67vh,650px);min-height:430px;position:relative;isolation:isolate}
.orbit{position:absolute;border:2px solid var(--aqua);border-radius:50%;z-index:-2}
.orbit-one{width:480px;height:480px;right:3%;top:3%;transform:rotate(15deg)}
.orbit-two{width:330px;height:560px;right:19%;top:-5%;transform:rotate(58deg);border-color:rgba(18,56,66,.18)}
.fish{position:absolute;left:10%;top:25%;width:450px;height:260px;animation:float 5s ease-in-out infinite}
.body{position:absolute;right:0;width:330px;height:230px;border-radius:56% 44% 48% 52%;background:var(--yellow);transform:rotate(-6deg);box-shadow:24px 28px 0 rgba(18,56,66,.09)}
.tail{position:absolute;left:6px;top:25px;width:0;height:0;border-top:100px solid transparent;border-bottom:100px solid transparent;border-right:145px solid var(--coral);transform:rotate(7deg)}
.eye{position:absolute;right:67px;top:62px;width:17px;height:17px;border-radius:50%;background:var(--navy);box-shadow:0 0 0 8px var(--cream)}
.smile{position:absolute;right:38px;top:112px;width:70px;height:38px;border-bottom:6px solid var(--navy);border-radius:50%}
.bubble{position:absolute;border-radius:50%;background:var(--aqua)}
.bubble-one{width:25px;height:25px;right:5%;top:18%}
.bubble-two{width:12px;height:12px;right:1%;top:29%;background:var(--coral)}
.bubble-three{width:9px;height:9px;right:8%;top:34%;background:var(--navy)}
.side-note{position:absolute;bottom:5%;left:5%;font-family:"Comic Sans MS",cursive;font-size:18px;line-height:1.2;transform:rotate(-7deg)}
footer{border-top:1px solid rgba(18,56,66,.25);display:grid;grid-template-columns:1fr 1fr 1fr;align-items:center;text-transform:uppercase;font-weight:900;font-size:9px;letter-spacing:.15em}
footer p:nth-child(2){text-align:center}
footer p:last-child{text-align:right}
@keyframes float{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-15px) rotate(2deg)}}
@media(max-width:820px){.landing{grid-template-rows:82px auto 90px}.hero{grid-template-columns:1fr;padding:50px 0 20px}.art{height:390px;min-height:0}.orbit-one{width:340px;height:340px;right:-8%}.orbit-two{width:240px;height:390px}.fish{width:350px;height:210px;left:3%;top:23%}.body{width:260px;height:180px}.tail{border-top-width:75px;border-bottom-width:75px;border-right-width:115px}.eye{right:54px;top:47px}.smile{right:29px;top:85px}.side-note{bottom:3%}footer{grid-template-columns:1fr 1fr}footer p:nth-child(2){display:none}}
@media(max-width:480px){.status{display:none}h1{font-size:64px}.intro{margin-top:28px}.art{height:330px}.fish{transform:scale(.78);transform-origin:left center;animation:none}.orbit-one{width:280px;height:280px}.orbit-two{display:none}.side-note{bottom:0}footer{font-size:8px}}
@media(prefers-reduced-motion:reduce){.fish{animation:none}}