:root{--bg:#0b1218;--bg-2:#0e1620;--text:#f5f7fb;--muted:#b7c0cc;--accent:#2556ff;--accent-2:#3b82f6;--border:#1a2430;--card:#0f1822;}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial,'Noto Sans',sans-serif}
a{color:var(--text);text-decoration:none}
a:hover{text-decoration:underline}
.site-header{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--border);background:rgba(10,14,20,.7);backdrop-filter:blur(6px);position:sticky;top:0;z-index:20}
.brand{display:flex;align-items:center;gap:10px}
.brand-logo{height:34px}
.brand-text{font-weight:800;letter-spacing:.2px}
.site-nav ul{display:flex;gap:16px;list-style:none;margin:0;padding:0}
.site-nav a{opacity:.92}
.site-nav a.active,.site-nav a.nav-cta{opacity:1}
.nav-cta{padding:6px 10px;border:1px solid var(--border);border-radius:10px}
.nav-toggle{display:none;background:none;border:1px solid var(--border);color:var(--text);padding:10px 12px;border-radius:12px}
.site-main{max-width:1120px;margin:0 auto;padding:20px 16px 90px}
.hero{position:relative;border-radius:16px;overflow:hidden;padding:48px 20px;background:#0b1117}
.hero::before{content:"";position:absolute;inset:0;background:url('hero-bg.svg') center/cover no-repeat;opacity:.9}
.hero>*{position:relative;z-index:1}
.hero h1{max-width:999px}
.sub{color:var(--muted);max-width:720px}
.micro{opacity:.8;margin-top:8px}
.cta-row{display:flex;gap:12px;margin:18px 0 2px;flex-wrap:wrap}
.btn{display:inline-block;padding:12px 16px;border-radius:12px;border:1px solid var(--border);background:transparent;color:var(--text)}
.btn:hover{border-color:#2a3650}
.btn-primary{background:var(--accent);border-color:var(--accent);color:#081019;font-weight:700}
.btn-primary:hover{background:var(--accent-2);border-color:var(--accent-2)}
.section{margin-top:18px;border-radius:16px;border:1px solid var(--border);background:var(--card);overflow:hidden}
.section-inner{padding:18px}
.grid-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.card{background:#0f1822;border:1px solid var(--border);border-radius:14px;padding:16px}
.banner{display:flex;align-items:center;gap:12px;justify-content:space-between;background:linear-gradient(160deg, rgba(37,86,255,.15), rgba(37,86,255,.05));border:1px solid #1a2a5a;border-radius:14px;padding:14px;margin:18px 0}
.page-hero{padding:10px 0 6px}
.page-hero h1{margin:0}
.content{background:#0f1822;border:1px solid var(--border);border-radius:14px;padding:18px;margin:16px 0}
.content.split{display:grid;grid-template-columns:1fr 520px;gap:32px;align-items:center}
.feature-img{width:100%;height:auto;border-radius:12px;border:1px solid var(--border)}
.checklist{padding-left:18px}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;margin-top:8px}
.card.featured{border-color:var(--border)}
.card .tagline{color:var(--muted);margin:0}
.card .trial{color:#2cb67d;font-weight:700;margin:0 0 6px}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-top:8px}
.step{background:#0f1822;border:1px solid var(--border);border-radius:14px;padding:14px}
.step span{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:100px;background:var(--accent);color:#081019;font-weight:800;margin-bottom:6px}
.faq-list{display:grid;gap:10px;margin:16px 0}
.faq-list details{background:#0f1822;border:1px solid var(--border);border-radius:12px;padding:12px}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.contact-card{background:#0f1822;border:1px solid var(--border);border-radius:12px;padding:16px}
.contact-form{display:grid;gap:10px;max-width:640px}
label{display:grid;gap:6px}
input,textarea,select{background:#0b1218;border:1px solid #1b2634;color:var(--text);border-radius:10px;padding:12px}
.hidden{display:none}
.site-footer{border-top:1px solid var(--border);margin-top:40px;padding:18px 16px}
.footer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.footer-links{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.brand-row{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.fineprint{opacity:.6;margin-top:12px;text-align:center}
.fab{position:fixed;right:18px;bottom:18px;width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:#06111a;border:none;box-shadow:0 6px 22px rgba(0,0,0,.35);font-size:22px}
@media (max-width:820px){
  .site-nav{display:none}
  .nav-toggle{display:block}
  .site-nav.open{display:block;position:absolute;right:12px;top:58px;background:#0c1520;border:1px solid var(--border);border-radius:12px;padding:10px 12px;min-width:60vw}
  .site-nav.open ul{display:grid;gap:8px}
  .content.split{display:grid;grid-template-columns:1fr 520px;gap:32px;align-items:center}
  .hero h1{max-width:999px}
  .btn{width:100%;text-align:center}
  .contact-grid{grid-template-columns:1fr}
}

/* Enquire button (visible light-blue) */
.btn-enquire {
  display:inline-block;
  background:#3B82F6; /* light-ish blue */
  color:#fff;
  padding:0.75rem 1.1rem;
  border-radius:0.75rem;
  font-weight:600;
  text-decoration:none;
  box-shadow:0 6px 18px rgba(59,130,246,0.25);
  transition:transform .06s ease, box-shadow .2s ease, background .2s ease;
}
.btn-enquire:hover,
.btn-enquire:focus {
  background:#2563EB;
  transform:translateY(-1px);
  box-shadow:0 10px 24px rgba(37,99,235,0.32);
}
.btn-enquire:active {
  transform:translateY(0);
}


/* Hero image (responsive) */
.hero-image{
  width:100%;
  height:360px;
  object-fit:cover;
  border-radius:1rem;
  box-shadow:0 12px 28px rgba(0,0,0,.25);
  margin:1.25rem 0 2rem 0;
}
@media(min-width:900px){ .hero-image{ height:460px; } }


/* Side images: small, tucked to the right on desktop */
.side-image{
  display:block;
  max-width:320px;
  width:32%;
  min-width:200px;
  height:auto;
  border-radius:12px;
  float:right;
  margin:0 0 1rem 1rem;
  box-shadow:0 10px 24px rgba(0,0,0,.18);
}
@media (max-width: 800px){
  .side-image{
    float:none;
    width:100%;
    max-width:100%;
    margin:0.75rem 0 1.25rem 0;
  }
}


/* Side placement helpers */
.side-right { float:right; margin-left:1rem; margin-right:0; }
.side-left  { float:left;  margin-right:1rem; margin-left:0; }
.clearfix::after { content:""; display:block; clear:both; }


/* Prevent decorative side images from blocking clicks */
.side-image { pointer-events: none; }

/* Keep site header above any floated/positioned content */
header, .site-header { position: relative; z-index: 5; }

/* === Hotfix: CTA alignment + Services compression + hide stray bubbles === */
.hero .cta-row{display:inline-flex;gap:.75rem;align-items:center;flex-wrap:wrap;margin-top:.5rem}
.hero .cta-row .btn, .cta-row a{display:inline-flex;align-items:center;justify-content:center;
  height:48px; line-height:48px; padding:0 18px; border-radius:10px; vertical-align:middle}
.cta-row a{border:1px solid rgba(255,255,255,.15); text-decoration:none}

.side-image{max-width:340px;width:32%}
.side-image.phone-small{max-width:260px;width:28%}

/* Services: tighten typography wrapping around floats */
.section.clearfix h2 + img.side-image{margin-top:.25rem}
.section.clearfix p, .section.clearfix ul, .section.clearfix div{overflow:hidden}

/* Pull benefits row up a touch */
.section.mt-tight{margin-top:1rem!important}

/* Ensure only one bubble shows (hide legacy) */
a.whatsapp-fab, .whatsapp-fab, [data-fab*="whatsapp"], .floating-whatsapp, .floating-chat, .chat-fab, .chat-circle{
  display:none!important;
}

/* Chat button as single round icon */
.es-chat-btn{width:56px;height:56px;border-radius:50%;padding:0;font-weight:700}
.es-chat-btn::after{content:"";}

/* === Hotfix v2: Hero placement + Services no-gap layout === */

/* HERO */

body{position:relative}
.hero-ctas{display:inline-flex; gap:.75rem; align-items:center; flex-wrap:wrap; margin-top:.35rem}
.hero-ctas .btn, .hero-ctas a{display:inline-flex; align-items:center; justify-content:center; height:48px; line-height:48px; padding:0 18px; border-radius:10px}

/* SERVICES — overlay images so text uses full width (no empty halves) */
.section{position:relative}
.section:has(h2 + img.side-right){padding-right:380px}
.section:has(h2 + img.side-left){padding-left:300px}
img.side-image{position:absolute!important; float:none!important}
img.side-right{right:24px; top:72px}
img.side-left{left:24px; top:76px}
img.phone-small{width:260px; max-width:28vw}
/* keep content readable next to overlays */
.section.clearfix p, .section.clearfix ul{overflow:visible}

/* ensure only one round chat icon bubble remains */
a.whatsapp-fab, .whatsapp-fab, [data-fab*="whatsapp"], .floating-whatsapp, .floating-chat, .chat-fab, .chat-circle{display:none!important}
.es-chat-btn{width:56px;height:56px;border-radius:50%;padding:0;font-weight:700}

/* === Hotfix v3: precise hero + centered service images === */

/* HERO image: top-right below nav */


/* CTA row directly under subheadline, same baseline */
.hero-ctas{display:inline-flex;gap:.75rem;align-items:center;flex-wrap:wrap;margin-top:.5rem}
.hero-ctas .btn, .hero-ctas a{display:inline-flex;align-items:center;justify-content:center;
  height:50px;line-height:50px;padding:0 20px;border-radius:12px}

/* SERVICES: make sections hold image on side with vertical centering and no cropping */
.section{position:relative;min-height:340px}
.section:has(h2 + img.side-right){padding-right:440px}
.section:has(h2 + img.side-left){padding-left:380px}

img.side-image{position:absolute !important; float:none !important; height:auto !important}
img.side-right{right:24px; top:50%; transform:translateY(-50%)}
img.side-left{left:24px; top:50%; transform:translateY(-50%)}
img.phone-small{width:240px; max-width:26vw}

.section.clearfix p, .section.clearfix ul{overflow:visible; font-size:1.075rem; line-height:1.7}

/* Keep only one clean chat icon */
a.whatsapp-fab, .whatsapp-fab, [data-fab*="whatsapp"], .floating-whatsapp, .floating-chat, .chat-fab, .chat-circle{display:none!important}
.es-chat-btn{width:56px;height:56px;border-radius:50%;padding:0;font-weight:700}


/* === FINAL7 hard fix === */
.hero{
  display:grid;
  grid-template-columns: 1.6fr 0.6fr;
  align-items:start;
  column-gap:32px;
}
.hero img
.hero > :not(img.hero-ocean){ grid-column:1 / 2; }
@media (max-width:1024px){
  .hero{ grid-template-columns:1fr; row-gap:24px; }
  .hero img
}

.section:has(> img.side-right),
.section:has(> img.side-left){
  display:flex; align-items:center; gap:40px;
}
.section:has(> img.side-right) > img.side-right{
  order:2; width:420px; max-width:38vw; height:auto; position:static !important; transform:none !important; border-radius:12px;
}
.section:has(> img.side-right) > :not(img.side-right):not(h2){ order:1; flex:1 1 auto; }
.section:has(> img.side-left) > img.side-left{
  order:1; width:340px; max-width:34vw; height:auto; position:static !important; transform:none !important; border-radius:12px;
}
.section:has(> img.side-left) > :not(img.side-left):not(h2){ order:2; flex:1 1 auto; }
@media (max-width:1100px){
  .section:has(> img.side-right),
  .section:has(> img.side-left){ flex-direction:column; align-items:flex-start; }
  .section:has(> img.side-right) > img.side-right,
  .section:has(> img.side-left) > img.side-left{ width:100%; max-width:100%; }
}


/* === ELEVATED SITES: pin hero image to top-right === */
.hero { position: relative !important; }



@media (max-width: 1024px) {
  
}


.hero { position: relative !important; }

@media (max-width:1024px){
  
}

/* ELEVATED SITES HERO GRID */
.hero { padding-top: 32px; }
.hero-inner{position:relative;z-index:1;max-width:1200px;padding-right:420px}
.hero-visual img {
  width: 400px;
  height: auto;
  display: block;
  border-radius: 14px;
}
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; }
@media (max-width:1024px){
  .hero-inner{position:relative;z-index:1;max-width:1200px;padding-right:420px}
  .hero-visual { justify-self: start; }
  .hero-visual img { width: 100%; max-width: 480px; }
}

/* Bubble-style button (matches 'How It Works' vibe) */
.btn-bubble{
  display:inline-block;
  padding:10px 18px;
  background:rgba(255,255,255,0.10);
  border:1px solid rgba(255,255,255,0.15);
  border-radius:14px;
  backdrop-filter:blur(3px);
  color:var(--text);
  font-weight:500;
  text-decoration:none;
  transition:background .2s ease,border-color .2s ease,transform .06s ease;
}
.btn-bubble:hover{ background:rgba(255,255,255,0.18); border-color:rgba(255,255,255,0.22); }

/* Services media guard */
.section.content.split img.side-image{
  width:100%;
  max-width:100%;
  height:auto;
  border-radius:12px;
  box-shadow:0 10px 24px rgba(0,0,0,.18);
}
.section.content.split img.phone-small{
  max-width:500px;
}

/* Hero layout fix */
.hero-grid{
  display:grid;
  grid-template-columns:1fr 350px;
  gap:24px;
  align-items:start;
}
.hero-media img{
  width:100%;
  height:auto;
  border-radius:12px;
  object-fit:cover;
}

/* === Absolute top-right hero image pin === */
.hero{ position:relative; border-radius:16px; overflow:hidden; padding:48px 20px; background:#0b1117; }
.hero-pin{
  position:absolute;
  top:24px;
  right:24px;
  width:420px;
  max-width:40vw;
  height:auto;
  border-radius:14px;
  box-shadow:0 10px 28px rgba(0,0,0,.32);
}
.hero-inner{position:relative;z-index:1;max-width:1200px;padding-right:420px}
@media (max-width: 900px){
  .hero-pin{ position:static; width:100%; margin-top:12px; }
  .hero-inner{position:relative;z-index:1;max-width:1200px;padding-right:420px}
}

/* Services heading sizing (slightly bigger) */
.section.content.split h2{
  font-size: clamp(24px, 3.2vw, 34px);
  line-height: 1.15;
  margin-top: 0;
}

/* Laptop image sizing to match phone image scale */
.section.content.split img.laptop-small{
  width:28%;
  max-width:260px;
  min-width:200px;
}
@media (max-width: 980px){
  .section.content.split img.laptop-small{
  width:28%;
  max-width:260px;
  min-width:200px;
}
}

/* Services media guard v2 */
.section.content.split .side-image{
  height: auto !important;
}


/* tighten second box */
.hero + .section{
  padding-top: 20px;
}

/* Tighten space under 3-card feature group on Services */
.feature-cards-tight{ padding-bottom: 8px; margin-bottom: 8px; }

.split .right-col{display:flex;justify-content:flex-end}


/* Hero ocean image pinned to top-right */
.hero img.hero-ocean{
  grid-column:2 / 3;
  justify-self:center;
  align-self:center;
  width:92%;
  max-width:92%;
  height:480px;
  object-fit:cover;
  border-radius:16px;
  box-shadow:0 18px 38px rgba(0,0,0,0.42);
}
@media (max-width:1024px){
  .hero img.hero-ocean{
    grid-column:1 / -1;
    justify-self:center;
    align-self:start;
    width:100%;
    max-width:100%;
    height:auto;
    object-fit:cover;
    border-radius:16px;
    box-shadow:0 18px 38px rgba(0,0,0,0.42);
  }
}


/* Hero text widths: full on desktop, wrap on mobile */
.hero .sub{max-width:none}
@media(max-width:820px){
  .hero h1{max-width:22ch}
}


/* === FINAL HERO LAYOUT OVERRIDE === */
.hero{
  display:grid;
  grid-template-columns:minmax(520px, 1.6fr) minmax(0, 1fr);
  align-items:center;
  column-gap:40px;
  padding:48px 32px;
}

.hero-inner{
  max-width:none;
  padding-right:0;
}

.hero h1{
  max-width:none;
}

.hero .sub{
  max-width:none;
}

.hero img.hero-ocean{
  grid-column:2 / 3;
  justify-self:center;
  align-self:center;
  width:100%;
  max-width:100%;
  height:520px;
  object-fit:cover;
  border-radius:20px;
  box-shadow:0 18px 38px rgba(0,0,0,0.42);
}

@media (max-width:1200px){
  .hero{
    grid-template-columns:1fr;
    row-gap:24px;
    padding:32px 20px;
  }
  .hero img.hero-ocean{
    grid-column:1 / -1;
    height:auto;
    max-height:none;
  }
}





/* === HERO TITLE SIZE BOOST (56px) === */
.hero h1{
  font-size:3.5rem;  /* ~56px */
  line-height:1.1;
}