:root{
  --navy:#002260;
  --navy-deep:#01173F;
  --blue:#0085EB;
  --blue-light:#4FADF2;
  --amber:#E8A33D;
  --stone:#EEF1F5;
  --stone-line:#D9DFE6;
  --ink:#0F1E33;
  --white:#FFFFFF;
  --max: 1120px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;font-family:'Inter',system-ui,sans-serif;color:var(--ink);background:var(--white);line-height:1.55;}
h1,h2,h3,.display{font-family:'Space Grotesk',system-ui,sans-serif;font-weight:600;line-height:1.1;margin:0;color:var(--navy);}
a{color:inherit;}
img{max-width:100%;display:block;}
.wrap{max-width:var(--max);margin:0 auto;padding:0 28px;}
:focus-visible{outline:3px solid var(--amber);outline-offset:2px;}
button{font-family:inherit;}

/* ---------- Top utility bar ---------- */
.topbar{background:var(--navy-deep);color:#AFC5E6;font-size:0.82rem;}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;padding:8px 28px;flex-wrap:wrap;gap:6px;}
.topbar a{color:#AFC5E6;text-decoration:none;}
.topbar a:hover{color:var(--white);}
.topbar-left{display:flex;gap:18px;align-items:center;}
.topbar-left span{display:flex;align-items:center;gap:6px;}

/* ---------- Header / main nav ---------- */
header{position:sticky;top:0;z-index:50;background:var(--white);border-bottom:1px solid var(--stone-line);box-shadow:0 2px 10px rgba(0,10,40,0.04);}
.nav{display:flex;align-items:center;justify-content:space-between;padding:12px 28px;max-width:var(--max);margin:0 auto;gap:20px;}
.brand{display:flex;align-items:center;gap:16px;text-decoration:none;color:var(--navy);flex-shrink:0;}
.brand img{height:140px;width:auto;display:block;}

.nav-links{display:flex;align-items:center;gap:6px;list-style:none;margin:0;padding:0;flex:1;justify-content:center;}
.nav-links > li{position:relative;}
.nav-links > li > a{
  color:var(--ink);text-decoration:none;font-size:0.94rem;font-weight:600;
  padding:10px 14px;border-radius:4px;display:flex;align-items:center;gap:5px;
  background:none;border:none;cursor:pointer;
}
.nav-links > li > a:hover,
.nav-links > li.nav-current > a{
  color:var(--blue);background:var(--stone);
}
.caret{width:9px;height:9px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);margin-top:-3px;transition:transform .15s ease;}
.has-dropdown:hover .caret{transform:rotate(225deg);margin-top:3px;}

.dropdown{
  position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(6px);
  background:var(--white);border:1px solid var(--stone-line);border-radius:6px;
  box-shadow:0 14px 34px rgba(0,10,40,0.14);min-width:260px;padding:10px;
  opacity:0;visibility:hidden;transition:opacity .15s ease, transform .15s ease;
  z-index:60;
}
.has-dropdown:hover .dropdown, .has-dropdown:focus-within .dropdown{
  opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);
}
.dropdown a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:4px;text-decoration:none;color:var(--ink);font-size:0.9rem;font-weight:500;}
.dropdown a:hover{background:var(--stone);color:var(--blue);}
.dropdown a .dot{width:6px;height:6px;border-radius:50%;background:var(--blue);flex-shrink:0;}

.nav-right{display:flex;align-items:center;gap:12px;flex-shrink:0;}
.nav-phone{display:flex;align-items:center;gap:7px;font-weight:700;color:var(--navy);text-decoration:none;font-size:0.92rem;white-space:nowrap;}
.nav-phone svg{color:var(--blue);}
.nav-cta{background:var(--amber);color:var(--navy-deep);padding:11px 20px;border-radius:4px;font-weight:700;font-size:0.88rem;text-decoration:none;white-space:nowrap;border:none;cursor:pointer;}
.nav-cta:hover{background:#F0AE4E;}
.nav-toggle{display:none;background:none;border:none;color:var(--navy);font-size:1.7rem;cursor:pointer;}

/* ---------- Hero (Home) ---------- */
.hero{position:relative;background:linear-gradient(160deg,rgba(1,23,63,0.94) 0%,rgba(0,34,96,0.90) 55%,rgba(0,133,235,0.82) 150%),url('images/water-texture.jpg');background-size:cover;background-position:center;color:var(--white);padding:64px 0 0;overflow:hidden;}
.hero .wrap{position:relative;z-index:2;display:grid;grid-template-columns:1.1fr 0.9fr;gap:44px;align-items:center;padding-bottom:100px;}
.hero-eyebrow{color:var(--blue-light);font-weight:600;font-size:0.85rem;display:flex;align-items:center;gap:8px;margin-bottom:18px;}
.hero-eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--amber);display:inline-block;}
.hero h1{font-size:clamp(2.1rem,4.2vw,3.2rem);color:var(--white);max-width:16ch;}
.hero p.lede{margin-top:20px;font-size:1.06rem;color:#CBDCF2;max-width:46ch;}
.hero-ctas{display:flex;gap:14px;margin-top:32px;flex-wrap:wrap;}
.btn{display:inline-flex;align-items:center;gap:8px;padding:14px 24px;border-radius:4px;font-weight:700;font-size:0.95rem;text-decoration:none;border:1.5px solid transparent;cursor:pointer;transition:transform .12s ease, background .15s ease;font-family:'Inter',sans-serif;}
.btn:hover{transform:translateY(-1px);}
.btn-primary{background:var(--amber);color:var(--navy-deep);}
.btn-primary:hover{background:#F0AE4E;}
.btn-outline{border-color:rgba(255,255,255,0.4);color:var(--white);}
.btn-outline:hover{background:rgba(255,255,255,0.08);}
.hero-badges{display:flex;gap:22px;margin-top:38px;flex-wrap:wrap;}
.hero-badges div{font-size:0.82rem;color:#9FBEDD;border-left:2px solid var(--blue-light);padding-left:10px;}
.hero-badges strong{display:block;color:var(--white);font-size:0.95rem;font-family:'Space Grotesk',sans-serif;}
.hero-photo{position:relative;border-radius:8px;overflow:hidden;box-shadow:0 20px 50px rgba(0,0,0,0.35);}
.hero-photo img{width:100%;aspect-ratio:680/453;object-fit:cover;display:block;}
.hero-photo .tag{position:absolute;top:16px;left:16px;background:rgba(1,23,63,0.85);color:var(--white);font-size:0.78rem;font-weight:600;padding:6px 12px;border-radius:20px;letter-spacing:0.02em;}
.wave-divider{position:absolute;bottom:-1px;left:0;width:100%;line-height:0;z-index:1;}
.wave-divider svg{width:100%;height:80px;display:block;}

/* ---------- Tagline strip ---------- */
.trust{background:var(--stone);border-bottom:1px solid var(--stone-line);}
.trust .wrap{display:flex;flex-wrap:wrap;gap:0;justify-content:space-between;padding:0;}
.trust-item{flex:1;min-width:150px;display:flex;align-items:center;gap:12px;font-size:0.92rem;color:var(--navy);font-weight:600;padding:20px 20px;border-right:1px solid var(--stone-line);}
.trust-item:last-child{border-right:none;}
.trust-item span.num{font-family:'Space Grotesk',sans-serif;color:var(--blue);font-size:0.8rem;}

/* ---------- Generic section shell ---------- */
section.block{padding:80px 0;}
.page-hero{background:var(--navy);color:var(--white);padding:56px 0;}
.page-hero .wrap p{color:#B7CBE8;margin-top:10px;max-width:56ch;}
.page-hero h1{color:var(--white);font-size:clamp(1.9rem,3.6vw,2.6rem);}
.page-hero .kicker{color:var(--blue-light);font-weight:600;font-size:0.85rem;}
.section-head{max-width:56ch;margin-bottom:48px;}
.section-head .kicker{color:var(--blue);font-weight:600;font-size:0.85rem;margin-bottom:10px;display:block;}
.section-head h2{font-size:clamp(1.6rem,2.8vw,2.15rem);}
.section-head p{margin-top:14px;color:#4C5A6B;font-size:1.02rem;}

/* ---------- Home teasers ---------- */
.teaser-row{background:var(--white);}
.teaser-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.teaser-card{border:1px solid var(--stone-line);border-radius:6px;padding:28px 24px;display:flex;flex-direction:column;gap:12px;}
.teaser-card .service-icon{width:46px;height:46px;border-radius:4px;background:var(--stone);display:flex;align-items:center;justify-content:center;color:var(--blue);}
.teaser-card h3{font-size:1.05rem;}
.teaser-card p{margin:0;color:#4C5A6B;font-size:0.92rem;}
.teaser-card .link{margin-top:auto;color:var(--blue);font-weight:600;font-size:0.88rem;text-decoration:none;}

.home-ba{background:var(--stone);}
.home-ba .ba-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.ba-card{position:relative;border-radius:6px;overflow:hidden;}
.ba-card img{width:100%;height:300px;object-fit:cover;}
.ba-label{position:absolute;top:14px;left:14px;padding:6px 13px;border-radius:20px;font-size:0.76rem;font-weight:700;letter-spacing:0.03em;}
.ba-label.before{background:#2F6B2F;color:#fff;}
.ba-label.after{background:var(--blue);color:#fff;}

/* ---------- Services page ---------- */
.service-row{display:grid;grid-template-columns:56px 1fr auto;gap:24px;align-items:start;padding:26px 0;border-top:1px solid var(--stone-line);scroll-margin-top:180px;}
.service-row:last-child{border-bottom:1px solid var(--stone-line);}
.service-row.flash{background:#EAF4FF;}
.service-icon{width:48px;height:48px;border-radius:3px;background:var(--stone);display:flex;align-items:center;justify-content:center;color:var(--blue);}
.service-body h3{font-size:1.15rem;margin-bottom:6px;}
.service-body p{margin:0;color:#4C5A6B;font-size:0.96rem;max-width:60ch;}
.service-tag{align-self:center;font-size:0.78rem;color:#69758A;border:1px solid var(--stone-line);padding:5px 10px;border-radius:20px;white-space:nowrap;background:var(--white);}

.plans{background:var(--stone);}
.plan-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.plan-card{background:var(--white);border:1px solid var(--stone-line);border-radius:4px;padding:30px 26px;display:flex;flex-direction:column;gap:16px;}
.plan-card.featured{border-color:var(--blue);box-shadow:0 0 0 1px var(--blue);}
.plan-name{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:1.15rem;color:var(--navy);}
.plan-freq{font-size:0.82rem;color:#69758A;}
.plan-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;}
.plan-list li{font-size:0.9rem;color:#3D4C5E;display:flex;gap:9px;align-items:flex-start;}
.plan-list svg{flex-shrink:0;margin-top:3px;color:var(--blue);}
.plan-pick{margin-top:auto;padding-top:8px;text-align:center;border:1.5px solid var(--navy);color:var(--navy);border-radius:3px;padding:10px;font-weight:600;font-size:0.88rem;text-decoration:none;cursor:pointer;background:var(--white);display:block;}
.plan-card.featured .plan-pick{background:var(--navy);color:var(--white);}

/* ---------- About page ---------- */
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;}
.about-copy p{color:#4C5A6B;margin-top:14px;}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;position:relative;margin-top:20px;}
.step{position:relative;padding-right:24px;}
.step:not(:last-child)::after{content:"";position:absolute;top:20px;right:0;width:24px;height:1px;background:var(--stone-line);}
.step-num{font-family:'Space Grotesk',sans-serif;font-size:0.85rem;color:var(--amber);font-weight:700;margin-bottom:14px;}
.step h3{font-size:1.02rem;margin-bottom:8px;color:var(--navy);}
.step p{color:#4C5A6B;font-size:0.88rem;margin:0;}
.fleet-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:20px;}
.fleet-item{border-radius:6px;overflow:hidden;background:var(--white);border:1px solid var(--stone-line);}
.fleet-item img{width:100%;height:210px;object-fit:cover;}
.fleet-cap{padding:13px 16px;font-size:0.86rem;color:var(--navy);font-weight:600;}

/* ---------- Gallery page ---------- */
.reno-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.reno-item{position:relative;border-radius:5px;overflow:hidden;aspect-ratio:3/4;}
.reno-item img{width:100%;height:100%;object-fit:cover;}
.reno-step-badge{position:absolute;top:10px;left:10px;background:rgba(1,23,63,0.85);color:#fff;font-size:0.72rem;font-weight:700;padding:5px 10px;border-radius:16px;}
.reno-cap{position:absolute;bottom:0;left:0;right:0;padding:12px 12px;color:#fff;font-size:0.8rem;font-weight:500;background:linear-gradient(to top, rgba(1,23,63,0.85), transparent);}
.ba-caption{margin-top:20px;color:#4C5A6B;font-size:0.95rem;border-left:2px solid var(--amber);padding-left:14px;}

/* ---------- Contact page ---------- */
.contact{background:var(--stone);}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start;}
.contact-info p{color:#4C5A6B;max-width:42ch;}
.info-list{list-style:none;margin:32px 0 0;padding:0;display:flex;flex-direction:column;gap:20px;}
.info-list li{display:flex;gap:14px;align-items:flex-start;}
.info-list svg{flex-shrink:0;color:var(--blue);margin-top:2px;}
.info-list strong{display:block;font-size:0.92rem;color:var(--navy);}
.info-list span{font-size:0.9rem;color:#4C5A6B;}
form{display:flex;flex-direction:column;gap:16px;background:var(--white);padding:30px;border-radius:6px;border:1px solid var(--stone-line);}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
label{font-size:0.82rem;font-weight:600;color:var(--navy);margin-bottom:6px;display:block;}
input,select,textarea{width:100%;padding:12px 14px;border:1px solid var(--stone-line);border-radius:3px;font-family:'Inter',sans-serif;font-size:0.92rem;color:var(--ink);background:var(--white);}
input:focus,select:focus,textarea:focus{border-color:var(--blue);}
textarea{resize:vertical;min-height:100px;}
.form-submit{background:var(--amber);color:var(--navy-deep);border:none;padding:14px 22px;border-radius:3px;font-weight:700;font-size:0.95rem;cursor:pointer;width:fit-content;}
.form-note{font-size:0.78rem;color:#69758A;}

/* ---------- Floating enquiry button ---------- */
.float-enquire{position:fixed;right:22px;bottom:22px;z-index:55;background:var(--amber);color:var(--navy-deep);
  padding:14px 20px;border-radius:30px;font-weight:700;font-size:0.9rem;text-decoration:none;
  box-shadow:0 10px 26px rgba(0,10,40,0.25);display:flex;align-items:center;gap:8px;border:none;cursor:pointer;}
.float-enquire:hover{background:#F0AE4E;}

/* ---------- Footer ---------- */
footer{background:var(--navy-deep);color:#7E99BF;padding:44px 0 26px;}
.footer-top{display:flex;justify-content:space-between;flex-wrap:wrap;gap:28px;padding-bottom:28px;border-bottom:1px solid rgba(255,255,255,0.1);}
.footer-brand{display:flex;align-items:center;gap:12px;color:var(--white);}
.footer-brand img{width:34px;height:34px;border-radius:5px;}
.footer-links{display:flex;gap:26px;list-style:none;margin:0;padding:0;flex-wrap:wrap;}
.footer-links a{color:#7E99BF;text-decoration:none;font-size:0.88rem;cursor:pointer;}
.footer-links a:hover{color:var(--white);}
.footer-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;padding-top:22px;font-size:0.8rem;}

/* ---------- Responsive ---------- */
@media (max-width:960px){
  .nav-links{position:fixed;top:0;left:0;right:0;bottom:0;background:var(--white);
    flex-direction:column;align-items:stretch;padding:90px 24px 24px;gap:6px;display:none;overflow-y:auto;}
  .nav-links.open{display:flex;}
  .nav-toggle{display:block;}
  .nav-phone{display:none;}
  .has-dropdown .dropdown{position:static;transform:none;opacity:1;visibility:visible;box-shadow:none;border:none;display:none;padding-left:14px;margin-top:0;}
  .has-dropdown.mobile-open .dropdown{display:block;}
  .has-dropdown:hover .dropdown{display:none;}
  .has-dropdown.mobile-open:hover .dropdown{display:block;}
  .hero .wrap{grid-template-columns:1fr;padding-bottom:80px;}
  .hero-photo{order:-1;}
  .trust-item{border-right:none;border-bottom:1px solid var(--stone-line);}
  .teaser-grid{grid-template-columns:1fr;}
  .home-ba .ba-grid{grid-template-columns:1fr;}
  .about-grid{grid-template-columns:1fr;}
  .steps{grid-template-columns:1fr 1fr;row-gap:28px;}
  .step:nth-child(2)::after{display:none;}
  .fleet-grid{grid-template-columns:1fr;}
  .reno-grid{grid-template-columns:1fr 1fr;}
  .plan-grid{grid-template-columns:1fr;}
  .contact-grid{grid-template-columns:1fr;}
  .field-row{grid-template-columns:1fr;}
  .service-row{grid-template-columns:44px 1fr;}
  .service-tag{grid-column:2;margin-top:6px;}
}
