:root{
  --cyan:#12e0f0; --ink:#0b0b0b; --white:#f2fbfd;
  --display:'Anton',Impact,'Arial Narrow Bold',sans-serif;
  --body:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --ease:cubic-bezier(.2,.8,.2,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{overflow-x:clip}
body{font-family:var(--body);color:var(--white);background:#0a5866;-webkit-font-smoothing:antialiased;line-height:1.6}
a{color:inherit;text-decoration:none}

/* LAYERS */
#ocean,#life{position:fixed;inset:0;width:100vw;height:100vh;display:block}
#ocean{z-index:0}
#life{z-index:1;pointer-events:none}
main{position:relative;z-index:2}

/* NAV */
.nav{position:fixed;top:0;left:0;right:0;z-index:20;display:flex;justify-content:space-between;align-items:center;padding:22px clamp(18px,4vw,48px);transition:color .6s}
.brand{display:flex;align-items:center;gap:.5rem;font-family:var(--display);font-size:1.7rem;letter-spacing:.02em}
.brand svg{width:24px;height:24px}
.cta{font-weight:700;font-size:.9rem;padding:.75rem 1.25rem;border-radius:999px;background:var(--cyan);color:var(--ink);transition:transform .3s var(--ease),box-shadow .3s}
.cta:hover{transform:translateY(-2px);box-shadow:0 0 30px rgba(18,224,240,.6)}
body.above .nav{color:var(--ink)}

/* HUD */
.hud{position:fixed;right:clamp(14px,3vw,40px);top:50%;transform:translateY(-50%);z-index:15;font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;text-align:right;display:grid;gap:1.1rem;pointer-events:none;transition:color .6s,opacity .6s}
.hud b{display:block;font-weight:500;font-size:1.35rem;letter-spacing:0;font-variant-numeric:tabular-nums;color:var(--white)}
.hud span{opacity:.6;text-transform:uppercase}
body.above .hud{opacity:0}
.gauge{position:fixed;left:clamp(14px,3vw,40px);top:18vh;bottom:18vh;width:2px;background:rgba(255,255,255,.12);z-index:15;transition:opacity .6s}
.gauge i{position:absolute;left:-3px;width:8px;height:8px;border-radius:50%;background:var(--cyan);box-shadow:0 0 12px var(--cyan);top:0;transform:translateY(-50%)}
.gauge em{position:absolute;left:-4px;width:10px;height:1px;background:rgba(255,255,255,.45)}
body.above .gauge{opacity:0}

/* HERO */
.hero{height:100vh;position:relative}
.logo{position:absolute;left:50%;top:48vh;transform:translate(-50%,-50%);font-family:var(--display);font-size:clamp(7rem,27vw,25rem);line-height:.8;letter-spacing:-.01em;user-select:none;white-space:nowrap}
.logo .ghost{visibility:hidden}
.logo .l-top,.logo .l-bot{position:absolute;inset:0}
.logo .l-top{color:var(--ink);clip-path:inset(-40% -10% calc(100% - var(--cut,0px)) -10%)}
.logo .l-bot{color:rgba(4,48,60,.72);clip-path:inset(var(--cut,0px) -10% -40% -10%);filter:url(#refract);transform:translateY(6px) scaleY(1.04)}
.hero-eyebrow{position:absolute;top:16vh;left:0;right:0;text-align:center;font-family:var(--mono);font-size:.78rem;letter-spacing:.3em;text-transform:uppercase;color:#13303a}
.hero-sub{position:absolute;top:73vh;left:0;right:0;text-align:center;font-family:var(--mono);font-size:clamp(.85rem,1.4vw,1.05rem);color:#dff8fc}
.hero-sub span{background:var(--ink);color:var(--cyan);padding:.15rem .55rem;border-radius:6px}
.dive{position:absolute;bottom:5vh;left:50%;transform:translateX(-50%);font-family:var(--mono);font-size:.7rem;letter-spacing:.3em;text-transform:uppercase;display:flex;flex-direction:column;align-items:center;gap:.6rem;color:#dff8fc;opacity:.85}
.dive i{width:1px;height:46px;background:linear-gradient(#dff8fc,transparent);animation:drip 2s infinite var(--ease)}
@keyframes drip{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
.fin-wrap{position:fixed;left:0;right:0;top:0;height:0;overflow:hidden;pointer-events:none;z-index:3}
.fin{position:absolute;bottom:-10px;left:0;width:clamp(70px,9vw,140px);will-change:transform}

/* SECTIONS */
.zone{position:relative;min-height:130vh;display:flex;align-items:center;padding:12vh clamp(140px,12vw,190px) 12vh clamp(56px,10vw,160px)}
.zone.right{justify-content:flex-end}
.panel{max-width:620px}
.tag{font-family:var(--mono);font-size:.72rem;letter-spacing:.25em;text-transform:uppercase;color:var(--cyan);display:flex;align-items:center;gap:.7rem;margin-bottom:1.4rem}
.tag::before{content:"";width:26px;height:1px;background:var(--cyan)}
h2{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:clamp(3.2rem,8vw,7.5rem);line-height:.9;letter-spacing:.005em;text-shadow:0 10px 50px rgba(0,20,30,.35)}
h2 em{font-style:normal;color:var(--cyan)}
.lead{font-size:clamp(1rem,1.3vw,1.15rem);color:rgba(232,248,252,.82);margin-top:1.4rem;max-width:520px}
.chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.8rem}
.chips span{font-size:.8rem;font-weight:600;padding:.45rem .9rem;border-radius:999px;border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.06);backdrop-filter:blur(6px)}

/* sticky shark statement */
.pass{height:230vh;position:relative}
.pass .stick{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 6vw}
.pass h2{font-size:clamp(4rem,14vw,13rem)}
.pass p{font-family:var(--mono);font-size:.85rem;letter-spacing:.2em;text-transform:uppercase;opacity:.7;margin-top:1.5rem}

/* glass cards */
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-top:3rem}
.zone.wide{flex-direction:column;align-items:stretch;justify-content:center}
.zone.wide .panel{max-width:none}
.glass{padding:1.8rem 1.5rem;border-radius:20px;background:linear-gradient(160deg,rgba(255,255,255,.10),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:border-color .4s,transform .5s var(--ease),box-shadow .4s}
.glass:hover{border-color:rgba(18,224,240,.6);transform:translateY(-6px);box-shadow:0 0 40px rgba(18,224,240,.15)}
.glass .n{font-family:var(--display);font-size:3.2rem;line-height:1;color:transparent;-webkit-text-stroke:1.2px var(--cyan)}
.glass h4{font-size:1.15rem;margin:1rem 0 .4rem}
.glass p{font-size:.92rem;color:rgba(232,248,252,.7)}
.packs{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.2rem;margin-top:3rem}
.pack{display:flex;flex-direction:column;padding:2.2rem 1.8rem}
.pack h3{font-family:var(--display);font-weight:400;font-size:2.6rem;line-height:1;text-transform:uppercase}
.pack .for{color:rgba(232,248,252,.6);margin:.4rem 0 1.4rem;font-size:.95rem}
.pack ul{list-style:none;display:grid;gap:.6rem;flex:1;margin-bottom:1.8rem;font-size:.93rem}
.pack li{display:flex;gap:.6rem}
.pack li::before{content:"";flex:none;width:7px;height:7px;margin-top:.55rem;border-radius:50%;background:var(--cyan);box-shadow:0 0 10px var(--cyan)}
.pack.feat{border-color:rgba(18,224,240,.55);box-shadow:0 0 60px rgba(18,224,240,.12),inset 0 0 40px rgba(18,224,240,.06)}
.pack .badge{align-self:flex-start;font-family:var(--mono);font-size:.68rem;padding:.3rem .7rem;border-radius:999px;background:var(--cyan);color:var(--ink);margin-bottom:1rem}
.btn{display:inline-flex;justify-content:center;align-items:center;gap:.5rem;font-weight:700;padding:.9rem 1.4rem;border-radius:999px;border:1px solid rgba(255,255,255,.3);transition:.3s}
.btn:hover,.pack.feat .btn{background:var(--cyan);color:var(--ink);border-color:var(--cyan)}

/* contact */
.abyss{min-height:100vh;padding-top:16vh;padding-bottom:24vh;align-items:flex-start}
.abyss .panel{max-width:1150px;width:100%;display:grid;grid-template-columns:1fr 1fr;gap:5vw;align-items:start}
.abyss form{margin-top:0}
.abyss h2{font-size:clamp(3.2rem,7vw,6.5rem)}
@media (max-width:900px){.abyss .panel{grid-template-columns:1fr}.abyss form{margin-top:2rem}}
form{display:grid;gap:1rem;margin-top:2.4rem;max-width:620px}
.row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
label{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(232,248,252,.55);display:grid;gap:.4rem}
input,textarea{font:inherit;font-family:var(--body);font-size:1rem;letter-spacing:0;text-transform:none;color:var(--white);background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.14);border-radius:12px;padding:.85rem 1rem;outline:none;transition:border-color .3s,box-shadow .3s}
input:focus,textarea:focus{border-color:var(--cyan);box-shadow:0 0 0 4px rgba(18,224,240,.12)}
textarea{min-height:120px;resize:vertical}
form button{justify-self:start;font:inherit;font-weight:700;cursor:pointer;background:var(--cyan);color:var(--ink);border:0;padding:1rem 1.6rem;border-radius:999px;box-shadow:0 0 40px rgba(18,224,240,.35);transition:transform .3s var(--ease)}
form button:hover{transform:translateY(-2px)}
footer{position:relative;z-index:2;text-align:center;padding:0 0 4vh;font-family:var(--mono);font-size:.72rem;letter-spacing:.15em;text-transform:uppercase;color:rgba(232,248,252,.35)}

/* reveal */
.rv{opacity:0;transform:translateY(40px);filter:blur(14px);transition:opacity 1.2s var(--ease),transform 1.2s var(--ease),filter 1.2s var(--ease)}
.rv.in{opacity:1;transform:none;filter:none}

@media (max-width:900px){
  .grid{grid-template-columns:1fr 1fr}
  .packs{grid-template-columns:1fr}
  .zone{padding:12vh 8vw 12vh 12vw}
  .zone.right{justify-content:flex-start}
  .hud{top:auto;bottom:16px;transform:none;grid-auto-flow:column;gap:1.2rem}
  .hud b{font-size:1rem}
}
@media (max-width:560px){
  .grid,.row{grid-template-columns:1fr}
  .hud div:nth-child(3),.hud div:nth-child(4){display:none}
}
@media (prefers-reduced-motion:reduce){.rv{transition:none;opacity:1;transform:none;filter:none}}
/* ===== J.A.W.S. template additions ===== */
/* logo: JS fits long business names to the viewport */
.logo{max-width:none;padding:.08em 0}
/* header + contact CTA row (HTML injected by the app) */
.cta-row{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
.cta-row > *{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
.cta-row a,.cta-row button{font:inherit;font-weight:700;font-size:.85rem;line-height:1.2;padding:.7rem 1.1rem;border-radius:999px;border:1px solid currentColor;background:transparent;color:inherit;cursor:pointer;white-space:nowrap;transition:transform .3s var(--ease),box-shadow .3s,background .3s,color .3s}
.cta-row a:last-of-type,.cta-row button:last-of-type{background:var(--cyan);color:var(--ink);border-color:var(--cyan)}
.cta-row a:hover,.cta-row button:hover{transform:translateY(-2px);box-shadow:0 0 30px rgba(18,224,240,.45)}
.nav .cta-row{justify-content:flex-end}
.cta-row a:not(:last-of-type),.cta-row button:not(:last-of-type){background:rgba(255,255,255,.14);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
/* header scrim once underwater, so headings never collide with the nav */
.nav::before{content:"";position:absolute;inset:0 0 -28px 0;z-index:-1;pointer-events:none;background:linear-gradient(rgba(1,14,22,.82),rgba(1,14,22,.55) 60%,rgba(1,14,22,0));backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);-webkit-mask:linear-gradient(#000 65%,transparent);mask:linear-gradient(#000 65%,transparent);opacity:1;transition:opacity .6s}
body.above .nav::before{opacity:0}
.contact-ctas{margin-top:1.8rem;color:var(--white)}
/* accent last word of tokenised headings */
h2 em{font-style:normal;color:var(--cyan)}
/* why chips */
.chips span:empty{display:none}
/* FAQ (midnight zone) */
.faq{display:grid;gap:.8rem;margin-top:2rem}
.faq details{padding:1.1rem 1.4rem;border-radius:16px}
.faq details:hover{transform:none}
.faq summary{cursor:pointer;font-weight:600;list-style:none;display:flex;justify-content:space-between;gap:1rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--mono);color:var(--cyan);transition:transform .3s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{margin-top:.7rem;color:rgba(232,248,252,.75);font-size:.95rem}
/* service packs: badge on the middle card, keeps the original "Most popular" look */
.packs .pack:nth-child(2){border-color:rgba(18,224,240,.55);box-shadow:0 0 60px rgba(18,224,240,.12),inset 0 0 40px rgba(18,224,240,.06)}
.packs .pack:nth-child(2)::before{content:"Most popular";align-self:flex-start;font-family:var(--mono);font-size:.68rem;padding:.3rem .7rem;border-radius:999px;background:var(--cyan);color:var(--ink);margin-bottom:1rem}
.packs .pack:nth-child(2) .btn{background:var(--cyan);color:var(--ink);border-color:var(--cyan)}
.pack .for{white-space:pre-line;flex:1;margin-bottom:1.8rem}
.pack .btn{align-self:stretch}
/* injected enquiry form */
.enquiry form{display:grid;gap:1rem;max-width:620px;margin:0}
.enquiry label{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(232,248,252,.55);display:grid;gap:.4rem}
.enquiry input:not([type=hidden]):not([type=checkbox]):not([type=radio]),.enquiry textarea,.enquiry select{width:100%;font:inherit;font-family:var(--body);font-size:1rem;letter-spacing:0;text-transform:none;color:var(--white);background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.14);border-radius:12px;padding:.85rem 1rem;outline:none;transition:border-color .3s,box-shadow .3s}
.enquiry select option{color:var(--ink)}
.enquiry input::placeholder,.enquiry textarea::placeholder{color:rgba(232,248,252,.4)}
.enquiry input:focus,.enquiry textarea:focus,.enquiry select:focus{border-color:var(--cyan);box-shadow:0 0 0 4px rgba(18,224,240,.12)}
.enquiry button,.enquiry [type=submit]{justify-self:start;font:inherit;font-weight:700;cursor:pointer;background:var(--cyan);color:var(--ink);border:0;padding:1rem 1.6rem;border-radius:999px;box-shadow:0 0 40px rgba(18,224,240,.35);transition:transform .3s var(--ease)}
.enquiry button:hover,.enquiry [type=submit]:hover{transform:translateY(-2px)}
.abyss .panel > *{min-width:0}
/* responsive fixes */
@media (max-width:900px){
  .zone{padding:12vh 8vw 12vh 12vw}
  .hud{left:0;right:0;bottom:0;transform:none;justify-content:center;gap:2rem;padding:.55rem 1rem calc(.55rem + env(safe-area-inset-bottom));background:rgba(1,14,22,.72);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-top:1px solid rgba(255,255,255,.08);text-align:left}
  .hud span{font-size:.6rem}
  .gauge{bottom:12vh}
  .abyss{padding-bottom:30vh}
  footer{padding-bottom:12vh}
}
@media (max-width:560px){
  .nav{padding:14px 16px;gap:.6rem}
  .brand{font-size:1.35rem;min-width:0}
  .nav .cta-row{gap:.35rem}
  .nav .cta-row > *{gap:.35rem}
  .nav .cta-row a,.nav .cta-row button{font-size:.7rem;padding:.5rem .7rem}
  .hud{gap:1.4rem}
}
@media (max-width:420px){
  .brand .brand-name{display:none}
}
/* ===== Override the app-injected enquiry form styling (cream card / invisible fields) ===== */
.enquiry{padding:2rem;border-radius:20px;background:linear-gradient(160deg,rgba(255,255,255,.08),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 0 60px rgba(18,224,240,.08)}
.enquiry :is(div,form,fieldset,section,article,aside){background:transparent!important;border:0!important;box-shadow:none!important;padding:0!important;margin:0!important;max-width:none!important;color:var(--white)!important;border-radius:0!important}
.enquiry :is(form,fieldset){display:grid!important;gap:1rem!important}
.enquiry :is(label,legend,.label,span:not(:empty)){font-family:var(--mono)!important;font-size:.68rem!important;letter-spacing:.14em!important;text-transform:uppercase!important;color:rgba(232,248,252,.7)!important;opacity:1!important;background:transparent!important}
.enquiry :is(input:not([type=hidden]):not([type=checkbox]):not([type=radio]),textarea,select){display:block!important;width:100%!important;margin-top:.4rem!important;font:inherit!important;font-family:var(--body)!important;font-size:1rem!important;letter-spacing:0!important;text-transform:none!important;color:var(--white)!important;-webkit-text-fill-color:var(--white)!important;background:rgba(255,255,255,.05)!important;border:1px solid rgba(255,255,255,.18)!important;border-radius:12px!important;padding:.85rem 1rem!important;outline:none!important;box-shadow:none!important;min-height:0}
.enquiry textarea{min-height:130px!important;resize:vertical}
.enquiry :is(input,textarea,select):focus{border-color:var(--cyan)!important;box-shadow:0 0 0 4px rgba(18,224,240,.14)!important}
.enquiry :is(input,textarea)::placeholder{color:rgba(232,248,252,.4)!important;-webkit-text-fill-color:rgba(232,248,252,.4)!important}
.enquiry input:-webkit-autofill{-webkit-box-shadow:0 0 0 100px #06222c inset!important;-webkit-text-fill-color:var(--white)!important}
.enquiry select option{color:var(--ink)!important;background:#fff!important}
.enquiry :is(button,[type=submit]){justify-self:start!important;width:auto!important;font:inherit!important;font-weight:700!important;cursor:pointer;background:var(--cyan)!important;color:var(--ink)!important;-webkit-text-fill-color:var(--ink)!important;border:0!important;padding:1rem 1.8rem!important;border-radius:999px!important;box-shadow:0 0 40px rgba(18,224,240,.35)!important}
.enquiry :is(p,small,.hint,.error,.success){color:rgba(232,248,252,.75)!important;background:transparent!important}
@media (max-width:560px){.enquiry{padding:1.3rem}}

.enquiry,.enquiry *{max-width:100%;box-sizing:border-box}
.abyss .panel{overflow:visible}
#contact .enquiry :is(input:not([type=hidden]):not([type=checkbox]):not([type=radio]),textarea,select){color:var(--white)!important;-webkit-text-fill-color:var(--white)!important;background:rgba(255,255,255,.06)!important;border:1px solid rgba(255,255,255,.22)!important}
#contact .enquiry :is(div,form,fieldset){background:transparent!important}
#contact .enquiry label{color:rgba(232,248,252,.75)!important}