:root{
  --bg:#020811; --panel:#07111d; --panel2:#091624; --line:#243548;
  --text:#f7f9fc; --muted:#aab7c7; --blue:#0695ff; --blue2:#32b6ff;
}
*{box-sizing:border-box} html{scroll-behavior:smooth;scroll-padding-top:86px}
body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,Arial,sans-serif;line-height:1.6}
a{color:inherit;text-decoration:none} img{max-width:100%;display:block}
.site-header{position:fixed;top:0;left:0;right:0;z-index:50;background:rgba(2,8,17,.82);backdrop-filter:blur(16px);border-bottom:1px solid rgba(255,255,255,.07)}
.nav-wrap{max-width:1180px;margin:auto;display:flex;align-items:center;justify-content:space-between;padding:12px 22px}
.brand{display:flex;align-items:center;gap:12px}.brand img{width:62px;height:62px;object-fit:cover;border-radius:50%}
.brand-copy strong{display:block;font-size:26px;letter-spacing:1px}.brand-copy small{display:block;color:var(--blue);font-weight:700;letter-spacing:.5px}
.nav{display:flex;align-items:center;gap:25px;font-size:13px;font-weight:700;text-transform:uppercase}
.nav a{opacity:.9;padding:10px 0;border-bottom:2px solid transparent}.nav a:hover,.nav a.active{color:var(--blue2);border-bottom-color:var(--blue)}
.nav .nav-quote{border:1px solid var(--blue);border-radius:24px;padding:10px 17px;color:white}.nav .nav-quote:hover{background:var(--blue);color:white}
.menu-btn{display:none;background:none;border:0;color:white;font-size:26px}
.hero{min-height:650px;position:relative;display:flex;align-items:center;overflow:hidden;padding:130px 7% 70px}
.hero-bg{position:absolute;inset:0;background-image:linear-gradient(90deg,rgba(2,8,17,.98) 0%,rgba(2,8,17,.9) 36%,rgba(2,8,17,.18) 72%,rgba(2,8,17,.18)),url("assets/hero-reef.jpg");background-size:cover;background-position:center;filter:saturate(1.08)}
.hero-content{position:relative;z-index:2;max-width:670px}
.eyebrow{color:var(--blue2);font-size:12px;font-weight:800;letter-spacing:2px;margin:0 0 12px}
h1{font-size:clamp(42px,6vw,74px);line-height:1.02;text-transform:uppercase;margin:0 0 22px;letter-spacing:-2px}h1 span,h2 span{color:var(--blue)}
.hero-text{font-size:18px;color:#e1e8f0;max-width:540px}
.actions{display:flex;gap:14px;margin-top:28px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;padding:14px 22px;border-radius:5px;font-weight:800;text-transform:uppercase;font-size:13px;letter-spacing:.3px;border:1px solid var(--blue);cursor:pointer}
.btn.primary{background:linear-gradient(135deg,#057de1,#08a0ff);color:#fff}.btn.secondary{background:rgba(2,8,17,.4);border-color:#718093}
.section{max-width:1180px;margin:auto;padding:90px 22px}.section-heading{text-align:center;max-width:720px;margin:0 auto 42px}.section-heading h2{font-size:36px;text-transform:uppercase;line-height:1.1;margin:0 0 10px}.section-heading>p:last-child{color:var(--muted)}
.cards{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}.card{background:linear-gradient(180deg,#07111d,#050d17);border:1px solid var(--line);border-radius:8px;padding:25px 15px;text-align:center;min-height:250px;transition:.2s transform,.2s border-color}.card:hover{transform:translateY(-5px);border-color:#137fc4}.icon{font-size:38px;color:var(--blue);margin-bottom:14px}.card h3{font-size:14px;line-height:1.35;text-transform:uppercase;margin:0 0 12px}.card p{font-size:13px;color:var(--muted);margin:0}
.about{display:grid;grid-template-columns:1fr 1fr;max-width:1180px;margin:auto;min-height:500px;background:#040c15}.about-copy{padding:75px 50px}.about-copy h2{font-size:38px;line-height:1.08;text-transform:uppercase;margin:0 0 18px}.about-copy p{color:#d7e0e9}.about-copy ul{list-style:none;padding:0;margin:24px 0}.about-copy li{margin:10px 0;color:#d7e0e9}.about-copy li:before{content:"✓";color:var(--blue);font-weight:900;margin-right:10px}.about-image{position:relative;min-height:500px}.about-image img{width:100%;height:100%;object-fit:cover}.trust{position:absolute;right:24px;bottom:24px;background:rgba(2,8,17,.9);border:1px solid #304358;border-radius:8px;padding:18px 20px;max-width:220px}.trust strong{display:block;color:var(--blue2);font-size:13px}.trust span{display:block;color:#d9e2eb;font-size:12px;margin-top:4px}
.faq{max-width:900px}.faq-list details{background:var(--panel);border:1px solid var(--line);border-radius:8px;margin:10px 0;padding:0 20px}.faq-list summary{cursor:pointer;padding:20px 0;font-weight:700}.faq-list p{color:var(--muted);margin:0 0 20px}
.contact{max-width:1180px;margin:40px auto 0;padding:35px 30px;border:1px solid var(--line);border-radius:10px;background:linear-gradient(90deg,#061321,#030a12);display:flex;justify-content:space-between;align-items:center;gap:25px}.contact h2{font-size:32px;margin:0 0 4px}.contact p:not(.eyebrow){margin:0;color:var(--muted)}.contact-actions{display:flex;flex-direction:column;gap:12px}.contact-actions a{font-weight:700;color:#e8f0f7}.contact-actions a:first-letter{color:var(--blue)}
.quote-section{padding:75px 22px}.quote-box{max-width:900px;margin:auto;background:linear-gradient(135deg,#071523,#030a12);border:1px solid #294055;border-radius:12px;padding:42px}.quote-box h2{font-size:38px;margin:0 0 8px}.quote-box>div>p:not(.eyebrow){color:var(--muted)}form{margin-top:25px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}label{display:flex;flex-direction:column;gap:7px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.7px;color:#c9d4df}.full{grid-column:1/-1}input,textarea{width:100%;background:#020811;border:1px solid #2b4053;color:white;border-radius:6px;padding:13px;font:inherit;resize:vertical}input:focus,textarea:focus{outline:2px solid rgba(0,149,255,.35);border-color:var(--blue)}form .btn{margin-top:18px}
footer{border-top:1px solid var(--line);padding:35px 22px;text-align:center;color:var(--muted)}.footer-brand{display:flex;justify-content:center;align-items:center;gap:10px;margin-bottom:12px}.footer-brand img{width:48px;height:48px;border-radius:50%;object-fit:cover}.footer-brand strong{display:block;color:white;font-size:20px}.footer-brand span{display:block;color:var(--blue);font-size:11px;font-weight:800}
@media(max-width:950px){.nav{gap:15px}.cards{grid-template-columns:repeat(3,1fr)}}
@media(max-width:720px){
  .nav-wrap{padding:9px 16px}.brand img{width:52px;height:52px}.brand-copy strong{font-size:21px}.brand-copy small{font-size:10px}
  .menu-btn{display:block}.nav{display:none;position:absolute;top:70px;left:10px;right:10px;background:#050e18;border:1px solid var(--line);border-radius:10px;padding:10px;flex-direction:column;align-items:stretch;gap:2px}.nav.open{display:flex}.nav a{padding:13px 12px}.nav .nav-quote{text-align:center;margin-top:5px}
  .hero{min-height:700px;padding:120px 22px 60px}.hero-bg{background-position:58% center}.hero-content{max-width:100%}h1{font-size:45px;letter-spacing:-1.3px}.hero-text{font-size:16px}
  .actions{flex-wrap:wrap}.btn{padding:13px 17px}.section{padding:70px 18px}.section-heading h2{font-size:29px}.cards{grid-template-columns:1fr 1fr}.card{min-height:230px}
  .about{grid-template-columns:1fr}.about-copy{padding:55px 22px}.about-copy h2{font-size:31px}.about-image{min-height:350px}
  .contact{margin:20px 18px 0;flex-direction:column;align-items:flex-start}.contact-actions{width:100%}.quote-section{padding:55px 18px}.quote-box{padding:28px 20px}.quote-box h2{font-size:31px}.form-grid{grid-template-columns:1fr}.full{grid-column:auto}
}


/* V3 MOBILE POLISH */
@media(max-width:720px){
  .site-header{background:rgba(2,8,17,.92)}
  .nav-wrap{min-height:78px;padding:10px 16px}
  .brand{gap:10px}
  .brand img{width:62px;height:62px;border:1px solid rgba(50,182,255,.35)}
  .brand-copy strong{font-size:24px;line-height:1}
  .brand-copy small{font-size:10.5px;margin-top:5px}
  .hero{min-height:760px;padding:130px 22px 58px;align-items:flex-end}
  .hero-bg{
    background-image:
      linear-gradient(180deg,rgba(2,8,17,.03) 0%,rgba(2,8,17,.10) 35%,rgba(2,8,17,.68) 62%,rgba(2,8,17,.98) 100%),
      url("assets/hero-reef.jpg");
    background-size:cover;
    background-position:64% center;
    filter:saturate(1.22) contrast(1.06);
  }
  .hero-content{max-width:100%;padding-top:18px;text-shadow:0 2px 18px rgba(0,0,0,.85)}
  .hero .eyebrow{font-size:11px;letter-spacing:1.6px}
  h1{font-size:48px;line-height:.98;letter-spacing:-1.5px;margin-bottom:18px}
  .hero-text{font-size:17px;line-height:1.55;max-width:360px;color:#f0f5fa}
  .actions{gap:10px;margin-top:24px}
  .actions .btn{min-height:48px}
  .section{padding:78px 18px}
  .section-heading{margin-bottom:32px}
  .section-heading h2{font-size:31px}
  .cards{gap:12px}
  .card{padding:26px 13px;min-height:245px}
  .card h3{font-size:13.5px}
  .card p{font-size:12.5px;line-height:1.55}
  .icon{font-size:42px}
  .about-copy{padding:62px 22px}
  .about-copy h2{font-size:34px}
  .about-copy>p{font-size:15px}
  .about-copy li{font-size:14px}
  .about-image{min-height:390px}
  .trust{right:16px;bottom:16px;max-width:205px}
  .faq-list details{padding:0 17px}
  .faq-list summary{font-size:14px}
  .contact{padding:30px 24px}
  .contact h2{font-size:32px;line-height:1.05}
  .quote-box{padding:32px 22px}
  .quote-box h2{font-size:34px;line-height:1.05}
  input,textarea{min-height:48px;font-size:16px}
  textarea{min-height:130px}
  footer{padding:40px 22px 50px}
  .footer-brand img{width:58px;height:58px}
}
@media(max-width:390px){
  h1{font-size:43px}
  .brand-copy strong{font-size:21px}
  .brand-copy small{font-size:9.5px}
}


/* V4: reliable image-element hero for iPhone/Safari */
.hero-bg{display:none!important}
.hero{isolation:isolate}
.hero-photo{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  z-index:-3;
}
.hero-shade{
  position:absolute;
  inset:0;
  z-index:-2;
  background:linear-gradient(90deg,rgba(2,8,17,.97) 0%,rgba(2,8,17,.82) 39%,rgba(2,8,17,.18) 72%,rgba(2,8,17,.12) 100%);
}
@media(max-width:720px){
  .nav-wrap{min-height:86px}
  .brand img{width:68px!important;height:68px!important}
  .brand-copy strong{font-size:25px!important}
  .hero{
    min-height:780px!important;
    padding:125px 22px 55px!important;
    align-items:flex-end!important;
  }
  .hero-photo{
    object-position:62% center;
    filter:saturate(1.2) contrast(1.05) brightness(.92);
  }
  .hero-shade{
    background:
      linear-gradient(180deg,
        rgba(2,8,17,.02) 0%,
        rgba(2,8,17,.08) 32%,
        rgba(2,8,17,.46) 52%,
        rgba(2,8,17,.86) 69%,
        rgba(2,8,17,.99) 100%);
  }
  .hero-content{z-index:2}
}


/* V8: V4 layout preserved exactly; V6 image quality + Trusted Care cleanup only */
.hero-photo{
  image-rendering:auto;
  filter:saturate(1.14) contrast(1.07) brightness(.96);
}
.about-image{
  overflow:hidden;
}
.about-image img{
  image-rendering:auto;
  filter:saturate(1.08) contrast(1.06);
}
.trust{
  z-index:3;
  background:rgba(2,8,17,.94);
  box-shadow:0 12px 40px rgba(0,0,0,.36);
  backdrop-filter:blur(10px);
}
@media(max-width:720px){
  .trust{
    left:18px;
    right:18px;
    bottom:18px;
    max-width:none;
    padding:16px 18px;
  }
}


/* V9 — preserve V4 section dimensions; fix ONLY hero artwork framing */
@media(max-width:720px){
  .hero-photo{
    object-fit:cover!important;
    object-position:42% center!important;
    transform:none!important;
    width:100%!important;
    height:100%!important;
    left:0!important;
    top:0!important;
  }
}


/* V10 — clean About image, no baked-in text; preserve one coded Trusted Care card */
.about-image{
  position:relative;
  overflow:hidden;
}
.about-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  transform:none!important;
}
.trust{
  z-index:5;
}
@media(max-width:720px){
  .about-image img{
    object-position:center center!important;
  }
  .trust{
    left:18px!important;
    right:18px!important;
    bottom:18px!important;
    max-width:none!important;
  }
}


/* V11 — realistic reef tank + guaranteed single Trusted Care card */
.about-image{
  position:relative;
  overflow:hidden;
  background:#020811;
}
.about-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
  transform:none!important;
  filter:saturate(1.05) contrast(1.04);
}

/* Only the actual coded trust card is displayed. */
.about-image .trust{
  position:absolute;
  z-index:6;
  right:24px;
  bottom:24px;
  left:auto;
  max-width:240px;
  background:rgba(2,8,17,.94);
  border:1px solid #304358;
  border-radius:8px;
  padding:18px 20px;
  box-shadow:0 12px 40px rgba(0,0,0,.36);
  backdrop-filter:blur(10px);
}

@media(max-width:720px){
  .about-image{
    min-height:420px;
  }
  .about-image img{
    object-position:center center!important;
  }
  .about-image .trust{
    left:18px!important;
    right:18px!important;
    bottom:18px!important;
    max-width:none!important;
    padding:16px 18px!important;
  }
}


/* V12 — taller realistic reef showcase, mobile-first */
.about-image{
  min-height:520px!important;
  position:relative;
  overflow:hidden;
  background:#020811;
}
.about-image img{
  position:absolute;
  inset:0;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:center center!important;
  transform:none!important;
  filter:saturate(1.06) contrast(1.05);
}
.about-image .trust{
  position:absolute!important;
  z-index:8!important;
  left:24px!important;
  right:24px!important;
  bottom:24px!important;
  max-width:none!important;
}
@media(max-width:720px){
  .about-image{
    min-height:500px!important;
  }
  .about-image img{
    object-position:center center!important;
  }
  .about-image .trust{
    left:18px!important;
    right:18px!important;
    bottom:18px!important;
  }
}


/* V13 — compact reef showcase: same realistic tank, smaller footprint */
.about-image{
  min-height:390px!important;
  max-height:390px!important;
}
.about-image img{
  object-fit:cover!important;
  object-position:center 52%!important;
}
.about-image .trust{
  left:auto!important;
  right:20px!important;
  bottom:20px!important;
  max-width:245px!important;
  padding:15px 18px!important;
}

@media(max-width:720px){
  .about-image{
    min-height:345px!important;
    max-height:345px!important;
  }
  .about-image img{
    object-position:center 50%!important;
  }
  .about-image .trust{
    left:18px!important;
    right:18px!important;
    bottom:14px!important;
    max-width:none!important;
    padding:14px 16px!important;
  }
}


/* V14 — SMALLER + CRISPER reef showcase
   Do not enlarge the source image on phones. Crop it into a short panoramic band. */
.about-image{
  min-height:280px!important;
  height:280px!important;
  max-height:280px!important;
  overflow:hidden!important;
  position:relative!important;
  background:#020812!important;
}
.about-image img{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:center 56%!important;
  transform:none!important;
  filter:none!important;
  image-rendering:auto!important;
}
.about-image .trust{
  left:22px!important;
  right:auto!important;
  bottom:16px!important;
  width:auto!important;
  max-width:310px!important;
  padding:12px 16px!important;
  font-size:.92rem!important;
}

@media(max-width:720px){
  .about-image{
    min-height:225px!important;
    height:225px!important;
    max-height:225px!important;
  }
  .about-image img{
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
    object-position:center 58%!important;
  }
  .about-image .trust{
    left:14px!important;
    right:14px!important;
    bottom:10px!important;
    max-width:none!important;
    padding:10px 13px!important;
    font-size:.82rem!important;
    line-height:1.35!important;
  }
  .about-image .trust strong{
    font-size:.88rem!important;
  }
}


/* V15 — smaller reef section + completely rebuilt single Trusted Care box */
.about-image{
  min-height:190px!important;
  height:190px!important;
  max-height:190px!important;
  overflow:hidden!important;
  position:relative!important;
  background:#020812!important;
}
.about-image img{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:center 57%!important;
  transform:none!important;
  filter:none!important;
}

/* Hide any legacy trust remnants if older markup somehow survives. */
.about-image .trust:not(.trust-single){
  display:none!important;
}

/* The one and only Trusted Care box */
.about-image .trust-single{
  display:flex!important;
  flex-direction:column!important;
  gap:4px!important;
  position:absolute!important;
  left:18px!important;
  right:auto!important;
  bottom:12px!important;
  width:auto!important;
  max-width:285px!important;
  padding:10px 14px!important;
  margin:0!important;
  background:rgba(2,8,17,.95)!important;
  border:1px solid #304358!important;
  border-radius:8px!important;
  box-shadow:0 10px 28px rgba(0,0,0,.34)!important;
  backdrop-filter:blur(8px)!important;
  z-index:20!important;
}
.about-image .trust-single strong{
  display:block!important;
  color:#32b6ff!important;
  font-size:13px!important;
  line-height:1.2!important;
}
.about-image .trust-single span{
  display:block!important;
  color:#e7edf4!important;
  font-size:12px!important;
  line-height:1.35!important;
}

@media(max-width:720px){
  .about-image{
    min-height:165px!important;
    height:165px!important;
    max-height:165px!important;
  }
  .about-image img{
    object-position:center 58%!important;
  }
  .about-image .trust-single{
    left:12px!important;
    right:12px!important;
    bottom:8px!important;
    max-width:none!important;
    padding:8px 11px!important;
  }
  .about-image .trust-single strong{
    font-size:12px!important;
  }
  .about-image .trust-single span{
    font-size:11px!important;
  }
}
