/* Back to the Ocean — Netlify-ready landing page */
:root{--ink:#071922;--navy:#061c27;--deep:#082635;--ocean:#0d6f8c;--aqua:#2ed3e6;--foam:#e7fbff;--sand:#f5efe2;--white:#fff;--muted:#647986;--line:rgba(7,25,34,.12);--shadow:0 24px 70px rgba(7,25,34,.18);--radius:24px;--radius-lg:34px}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;background:var(--sand);color:var(--ink);line-height:1.6}body.menu-open{overflow:hidden}a{color:inherit;text-decoration:none}img{max-width:100%}code{background:rgba(46,211,230,.14);border:1px solid rgba(46,211,230,.22);border-radius:8px;padding:.12rem .35rem}.container{width:min(1160px,calc(100% - 40px));margin-inline:auto}.skip-link{position:absolute;left:1rem;top:-100px;background:var(--aqua);color:var(--ink);padding:.75rem 1rem;border-radius:999px;z-index:999}.skip-link:focus{top:1rem}.site-header{position:sticky;top:0;z-index:100;background:rgba(6,28,39,.9);backdrop-filter:blur(18px);border-bottom:1px solid rgba(255,255,255,.1)}.nav{display:flex;align-items:center;justify-content:space-between;min-height:78px;gap:24px}.brand{display:inline-flex;align-items:center;gap:12px;color:var(--white);font-weight:850;letter-spacing:-.03em}.brand img{width:42px;height:42px}.nav-menu{display:flex;align-items:center;gap:22px;color:rgba(255,255,255,.78);font-size:.95rem}.nav-menu a:hover,.footer-links a:hover{color:var(--aqua)}.nav-cta,.button{display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:999px;padding:.9rem 1.2rem;font-weight:800;cursor:pointer;transition:180ms transform ease,180ms background ease,180ms border ease}.nav-cta{background:var(--aqua);color:var(--ink);font-size:.92rem}.button:hover,.nav-cta:hover{transform:translateY(-2px)}.button-primary{background:var(--aqua);color:var(--ink);box-shadow:0 14px 40px rgba(46,211,230,.24)}.button-primary:hover{background:#73eff8}.button-secondary{color:var(--white);border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.08)}.nav-toggle{display:none;width:44px;height:44px;border:1px solid rgba(255,255,255,.14);border-radius:999px;background:rgba(255,255,255,.06)}.nav-toggle span{display:block;width:18px;height:2px;background:var(--white);margin:4px auto;border-radius:999px}.hero{position:relative;overflow:hidden;color:var(--white);background:radial-gradient(circle at 25% 12%,rgba(46,211,230,.28),transparent 36%),radial-gradient(circle at 85% 10%,rgba(13,111,140,.45),transparent 42%),linear-gradient(135deg,#04131b 0%,#082635 44%,#05202d 100%);padding:96px 0 86px}.hero::after{content:"";position:absolute;inset:auto -10% -22% -10%;height:260px;background:rgba(46,211,230,.08);filter:blur(40px);border-radius:50%}.hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:1.08fr .92fr;gap:60px;align-items:center}.eyebrow,.section-kicker{margin:0 0 14px;color:var(--aqua);font-size:.78rem;font-weight:900;text-transform:uppercase;letter-spacing:.16em}h1,h2,h3,p{margin-top:0}h1{max-width:760px;font-size:clamp(3rem,7vw,6.8rem);line-height:.88;letter-spacing:-.075em;margin-bottom:28px}h2{font-size:clamp(2rem,4vw,4.1rem);line-height:.95;letter-spacing:-.06em;margin-bottom:18px}h3{line-height:1.1;letter-spacing:-.03em}.lead{max-width:690px;color:rgba(255,255,255,.78);font-size:clamp(1.05rem,2vw,1.25rem);margin-bottom:32px}.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:28px}.trust-strip{display:flex;flex-wrap:wrap;gap:10px}.trust-strip span{color:rgba(255,255,255,.76);border:1px solid rgba(255,255,255,.16);border-radius:999px;padding:.55rem .8rem;background:rgba(255,255,255,.06);font-size:.9rem}.hero-panel{position:relative;min-height:500px}.tank{position:relative;height:430px;border:18px solid rgba(255,255,255,.2);border-radius:34px;overflow:hidden;background:linear-gradient(180deg,#31c7d7 0%,#0c7a96 44%,#06364f 100%);box-shadow:var(--shadow)}.tank::before{content:"";position:absolute;inset:18px 20px auto;height:52px;background:rgba(255,255,255,.24);border-radius:50%;transform:rotate(-2deg)}.water-glow{position:absolute;width:280px;height:280px;border-radius:50%;background:rgba(255,255,255,.16);filter:blur(14px);top:34px;right:-60px}.bubble{position:absolute;width:12px;height:12px;border:2px solid rgba(255,255,255,.58);border-radius:50%}.b1{top:84px;left:28%}.b2{top:150px;right:22%;width:9px;height:9px}.b3{top:210px;left:58%;width:15px;height:15px}.fish{position:absolute;border-radius:50%}.fish::before{content:"";position:absolute;border-top:14px solid transparent;border-bottom:14px solid transparent}.fish::after{content:"";position:absolute;top:11px;width:6px;height:6px;background:#06212d;border-radius:50%}.fish-one{width:86px;height:38px;top:178px;left:78px;background:#ffc857}.fish-one::before{right:-22px;top:5px;border-left:28px solid #ff9f4a}.fish-one::after{left:14px}.fish-two{width:62px;height:28px;top:254px;right:80px;background:#f6798f}.fish-two::before{left:-18px;top:2px;border-right:24px solid #df5b75}.fish-two::after{right:10px;top:8px}.sand{position:absolute;left:0;right:0;bottom:0;height:82px;background:radial-gradient(circle at 18% 60%,#cfb373 0 8px,transparent 9px),radial-gradient(circle at 44% 35%,#e0cc91 0 7px,transparent 8px),radial-gradient(circle at 70% 70%,#b99557 0 9px,transparent 10px),linear-gradient(180deg,#dcc386,#b28e51)}.plant{position:absolute;bottom:70px;width:14px;background:#18a86f;border-radius:999px 999px 0 0;transform-origin:bottom;z-index:2}.p1{height:120px;left:68%;transform:rotate(10deg)}.p2{height:155px;left:75%;transform:rotate(-8deg);background:#36bf78}.coral{position:absolute;bottom:68px;width:34px;height:70px;border-radius:999px 999px 0 0;background:#ed6a5e;z-index:2}.c1{left:14%}.c2{left:22%;height:46px;background:#ffd166}.floating-card{position:absolute;right:0;bottom:18px;width:min(330px,90%);background:rgba(255,255,255,.9);color:var(--ink);border:1px solid rgba(255,255,255,.74);border-radius:24px;padding:18px 20px;box-shadow:var(--shadow)}.floating-card strong,.floating-card span{display:block}.floating-card span{color:var(--muted);margin-top:4px;font-size:.95rem}.section{padding:86px 0}.intro{background:var(--white)}.intro-grid,.sales-grid,.form-grid,.contact-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:48px;align-items:start}.intro p{font-size:1.1rem;color:var(--muted)}.section-head{max-width:850px;margin-bottom:36px}.section-head p{color:var(--muted);font-size:1.05rem}.projects{background:var(--sand)}.project-filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:24px}.filter{border:1px solid var(--line);background:var(--white);padding:.7rem 1rem;border-radius:999px;font-weight:800;cursor:pointer}.filter.active,.filter:hover{background:var(--navy);color:var(--white)}.project-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.project-card,.service-card,.price-card,.card-form,.contact-card{border:1px solid var(--line);background:var(--white);border-radius:var(--radius);box-shadow:0 16px 45px rgba(7,25,34,.08)}.project-card{overflow:hidden}.project-image{position:relative;min-height:210px;background:linear-gradient(135deg,#0d6f8c,#2ed3e6);overflow:hidden}.project-image::before,.project-image::after{content:"";position:absolute;border-radius:50%}.project-image::before{inset:32px auto auto 34px;width:100px;height:100px;background:rgba(255,255,255,.18)}.project-image::after{right:-28px;bottom:-38px;width:180px;height:180px;background:rgba(255,255,255,.14)}.project-image.home{background:linear-gradient(135deg,#0f6f82,#69e0ec)}.project-image.business{background:linear-gradient(135deg,#052a3b,#0f9fb2)}.project-image.planted{background:linear-gradient(135deg,#0b5f48,#77d68f)}.project-image.custom{background:linear-gradient(135deg,#14324a,#b2e4ff)}.project-body{padding:22px}.project-meta{display:flex;justify-content:space-between;gap:14px;color:var(--muted);font-size:.9rem;margin-bottom:8px}.project-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}.project-tags span{border-radius:999px;background:var(--foam);color:#075268;font-size:.82rem;font-weight:800;padding:.35rem .55rem}.services{background:var(--white)}.service-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.service-card{padding:26px}.icon{display:inline-grid;place-items:center;width:48px;height:48px;border-radius:16px;background:var(--foam);color:#075268;font-weight:900;margin-bottom:26px}.service-card p,.price-card p,.form-copy p,.contact-grid p,.card-form .small,.muted{color:var(--muted)}.sales{background:var(--navy);color:var(--white)}.sales-copy p,.sales-copy li{color:rgba(255,255,255,.74)}.check-list{list-style:none;padding:0;margin:28px 0 0;display:grid;gap:14px}.check-list li{position:relative;padding-left:32px}.check-list li::before{content:"✓";position:absolute;left:0;top:0;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--aqua);color:var(--ink);font-weight:900;font-size:.85rem}.price-card{background:rgba(255,255,255,.08);color:var(--white);border-color:rgba(255,255,255,.14);padding:34px}.price-card p{color:rgba(255,255,255,.72)}.label{display:inline-flex;background:rgba(46,211,230,.16);color:var(--aqua);border:1px solid rgba(46,211,230,.3);padding:.4rem .75rem;border-radius:999px;font-weight:900;font-size:.8rem;text-transform:uppercase;letter-spacing:.08em;margin-bottom:22px}.quote{background:linear-gradient(135deg,#f5efe2,#eafafe)}.upload{background:var(--white)}.reverse{grid-template-columns:1.1fr .9fr}.card-form{padding:28px;display:grid;gap:18px}.field-pair{display:grid;grid-template-columns:1fr 1fr;gap:16px}label{display:grid;gap:8px;font-weight:800}input,select,textarea{width:100%;border:1px solid rgba(7,25,34,.16);border-radius:16px;background:#fbfdff;color:var(--ink);padding:.95rem 1rem;font:inherit;outline:none}input:focus,select:focus,textarea:focus{border-color:var(--aqua);box-shadow:0 0 0 4px rgba(46,211,230,.15)}textarea{resize:vertical}.hidden{display:none}.contact-card{padding:24px;margin-top:26px}.contact{background:var(--navy);color:var(--white)}.contact-grid{align-items:center}.contact-grid p{color:rgba(255,255,255,.72)}.contact-methods{display:grid;gap:12px}.contact-methods a{display:grid;gap:4px;padding:18px 20px;border:1px solid rgba(255,255,255,.14);border-radius:18px;background:rgba(255,255,255,.07)}.contact-methods a:hover{border-color:rgba(46,211,230,.55);transform:translateY(-1px)}.contact-methods span{color:var(--aqua);font-size:.82rem;font-weight:900;text-transform:uppercase;letter-spacing:.08em}.site-footer{background:#04131b;color:rgba(255,255,255,.72);padding:44px 0 26px}.footer-grid{display:flex;justify-content:space-between;gap:28px;align-items:start;border-bottom:1px solid rgba(255,255,255,.1);padding-bottom:32px}.footer-brand{margin-bottom:14px}.footer-links{display:flex;flex-wrap:wrap;gap:18px}.legal{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;padding-top:22px;font-size:.9rem}@media(max-width:980px){.nav-cta{display:none}.nav-toggle{display:block;z-index:120}.nav-menu{position:fixed;inset:78px 0 auto;display:none;grid-template-columns:1fr;gap:0;background:rgba(6,28,39,.98);border-bottom:1px solid rgba(255,255,255,.12)}.nav-menu.open{display:grid}.nav-menu a{padding:18px 28px;border-top:1px solid rgba(255,255,255,.08)}.hero-grid,.intro-grid,.sales-grid,.form-grid,.reverse,.contact-grid{grid-template-columns:1fr}.hero-panel{min-height:auto}.project-grid,.service-grid{grid-template-columns:repeat(2,1fr)}h1{letter-spacing:-.065em}}@media(max-width:660px){.container{width:min(100% - 28px,1160px)}.hero{padding:64px 0 58px}.section{padding:62px 0}.tank{height:330px;border-width:12px}.floating-card{position:relative;margin-top:-26px;right:auto;bottom:auto;width:94%;margin-inline:auto}.project-grid,.service-grid,.field-pair{grid-template-columns:1fr}.footer-grid,.legal{display:grid}}


/* Text effects upgrade */
.hero-title {
  animation: heroTextIn 900ms cubic-bezier(.16,1,.3,1) both;
}

.hero-copy .eyebrow {
  animation: softFadeUp 650ms ease both;
}

.hero-copy .lead {
  animation: softFadeUp 760ms ease 120ms both;
}

.hero-actions {
  animation: softFadeUp 820ms ease 220ms both;
}

.trust-strip {
  animation: softFadeUp 900ms ease 300ms both;
}

.text-gradient {
  display: inline-block;
  background: linear-gradient(90deg, #e7fbff, #2ed3e6, #8ff6ff, #ffffff);
  background-size: 240% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: gradientDrift 5s ease-in-out infinite;
  text-shadow: 0 0 34px rgba(46, 211, 230, .28);
}

.shimmer-text {
  position: relative;
  isolation: isolate;
}

.shimmer-text::after {
  content: "";
  position: absolute;
  inset: 8% -12%;
  background: linear-gradient(110deg, transparent 0%, rgba(255,255,255,.42) 45%, transparent 62%);
  transform: translateX(-130%) skewX(-12deg);
  animation: textShimmer 4.8s ease-in-out infinite;
  pointer-events: none;
  mix-blend-mode: screen;
}

.underline-wave {
  position: relative;
  display: inline-block;
}

.underline-wave::after {
  content: "";
  position: absolute;
  left: 3%;
  right: 2%;
  bottom: .03em;
  height: .08em;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--aqua), #e7fbff, transparent);
  transform-origin: left center;
  animation: waveUnderline 2.8s ease-in-out infinite;
  opacity: .9;
}

.section-kicker {
  background: linear-gradient(90deg, var(--aqua), #0d6f8c, var(--aqua));
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: kickerGlow 5.5s ease-in-out infinite;
}

.brand span {
  background: linear-gradient(90deg, #ffffff, #2ed3e6, #ffffff);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: brandGlow 6s ease-in-out infinite;
}

.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 760ms ease, transform 760ms cubic-bezier(.16,1,.3,1), filter 760ms ease;
  transition-delay: var(--delay, 0ms);
  filter: blur(6px);
}

.reveal.in-view {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

.project-card h3,
.service-card h3,
.price-card h3,
.contact-methods a {
  transition: color 220ms ease, text-shadow 220ms ease;
}

.project-card:hover h3,
.service-card:hover h3,
.contact-methods a:hover {
  color: #0d6f8c;
  text-shadow: 0 0 24px rgba(46, 211, 230, .18);
}

.sales .section-kicker,
.contact .section-kicker {
  background: linear-gradient(90deg, #8ff6ff, #ffffff, #2ed3e6);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

@keyframes heroTextIn {
  from {
    opacity: 0;
    transform: translateY(28px) scale(.985);
    filter: blur(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

@keyframes softFadeUp {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes gradientDrift {
  0%, 100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

@keyframes textShimmer {
  0%, 64% {
    transform: translateX(-130%) skewX(-12deg);
    opacity: 0;
  }
  75% {
    opacity: 1;
  }
  100% {
    transform: translateX(130%) skewX(-12deg);
    opacity: 0;
  }
}

@keyframes waveUnderline {
  0%, 100% {
    transform: scaleX(.72);
    opacity: .55;
  }
  50% {
    transform: scaleX(1);
    opacity: 1;
  }
}

@keyframes kickerGlow {
  0%, 100% {
    background-position: 0% 50%;
    filter: drop-shadow(0 0 0 rgba(46,211,230,0));
  }
  50% {
    background-position: 100% 50%;
    filter: drop-shadow(0 0 8px rgba(46,211,230,.18));
  }
}

@keyframes brandGlow {
  0%, 100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-title,
  .hero-copy .eyebrow,
  .hero-copy .lead,
  .hero-actions,
  .trust-strip,
  .text-gradient,
  .shimmer-text::after,
  .underline-wave::after,
  .section-kicker,
  .brand span,
  .reveal {
    animation: none !important;
    transition: none !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
    filter: none;
  }
}


/* Rotating place word effect */
.rotating-place-frame {
  --place-width: 7.2ch;
  position: relative;
  display: inline-grid;
  vertical-align: baseline;
  min-width: var(--place-width);
  height: 1.02em;
  margin-left: .08em;
  margin-right: .03em;
  overflow: visible;
  transition: min-width 520ms cubic-bezier(.16,1,.3,1);
}

.rotating-place-frame::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: .02em;
  height: .08em;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--aqua), #e7fbff, transparent);
  opacity: .78;
  transform-origin: left center;
  animation: waveUnderline 2.8s ease-in-out infinite;
}

.rotating-place {
  grid-area: 1 / 1;
  display: inline-block;
  white-space: nowrap;
  background: linear-gradient(90deg, #ffffff, #8ff6ff, #2ed3e6, #ffffff);
  background-size: 240% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 34px rgba(46, 211, 230, .24);
  animation: gradientDrift 5s ease-in-out infinite;
  will-change: transform, opacity, filter;
}

.rotating-place.enter-from-bottom {
  animation: placeInBottom 560ms cubic-bezier(.16,1,.3,1) both, gradientDrift 5s ease-in-out infinite;
}

.rotating-place.enter-from-top {
  animation: placeInTop 560ms cubic-bezier(.16,1,.3,1) both, gradientDrift 5s ease-in-out infinite;
}

.rotating-place.enter-from-left {
  animation: placeInLeft 560ms cubic-bezier(.16,1,.3,1) both, gradientDrift 5s ease-in-out infinite;
}

.rotating-place.enter-from-right {
  animation: placeInRight 560ms cubic-bezier(.16,1,.3,1) both, gradientDrift 5s ease-in-out infinite;
}

.rotating-place.exit-to-bottom {
  animation: placeOutBottom 420ms cubic-bezier(.7,0,.84,0) both;
}

.rotating-place.exit-to-top {
  animation: placeOutTop 420ms cubic-bezier(.7,0,.84,0) both;
}

.rotating-place.exit-to-left {
  animation: placeOutLeft 420ms cubic-bezier(.7,0,.84,0) both;
}

.rotating-place.exit-to-right {
  animation: placeOutRight 420ms cubic-bezier(.7,0,.84,0) both;
}

.place-measure {
  position: absolute;
  visibility: hidden;
  white-space: nowrap;
  pointer-events: none;
  font: inherit;
  letter-spacing: inherit;
}

@keyframes placeInBottom {
  from { opacity: 0; transform: translateY(.82em); filter: blur(10px); }
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}

@keyframes placeInTop {
  from { opacity: 0; transform: translateY(-.82em); filter: blur(10px); }
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}

@keyframes placeInLeft {
  from { opacity: 0; transform: translateX(-.85em); filter: blur(10px); }
  to { opacity: 1; transform: translateX(0); filter: blur(0); }
}

@keyframes placeInRight {
  from { opacity: 0; transform: translateX(.85em); filter: blur(10px); }
  to { opacity: 1; transform: translateX(0); filter: blur(0); }
}

@keyframes placeOutBottom {
  from { opacity: 1; transform: translateY(0); filter: blur(0); }
  to { opacity: 0; transform: translateY(.78em); filter: blur(8px); }
}

@keyframes placeOutTop {
  from { opacity: 1; transform: translateY(0); filter: blur(0); }
  to { opacity: 0; transform: translateY(-.78em); filter: blur(8px); }
}

@keyframes placeOutLeft {
  from { opacity: 1; transform: translateX(0); filter: blur(0); }
  to { opacity: 0; transform: translateX(-.78em); filter: blur(8px); }
}

@keyframes placeOutRight {
  from { opacity: 1; transform: translateX(0); filter: blur(0); }
  to { opacity: 0; transform: translateX(.78em); filter: blur(8px); }
}

@media (max-width: 660px) {
  .rotating-place-frame {
    display: inline-grid;
    min-width: min(var(--place-width), calc(100vw - 44px));
  }
}

@media (prefers-reduced-motion: reduce) {
  .rotating-place,
  .rotating-place-frame::after {
    animation: none !important;
  }
}