/* ============================================================
   ENERCOGEN - shared site stylesheet
   Paste once into: Site settings > Custom code > Head code
   (wrap the whole thing in <style> ... </style>)
   All styles are scoped under .ec and class-prefixed ec-
   so nothing collides with Webflow's own styling.
   On each page: add one Div with class "ec" and place all
   the section HTML embeds inside it.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;600;700&family=Barlow+Semi+Condensed:wght@500;600;700;800&display=swap');

:root{
  --ec-navy:#00194E; --ec-navy-2:#0C2A6B; --ec-ink:#071230;
  --ec-red:#C00000; --ec-red-bright:#FF2F19;
  --ec-body:#3D3D3D; --ec-muted:#5C6A86;
  --ec-line:#E4E8F0; --ec-bg:#FFFFFF; --ec-soft:#F4F6FB;
  --ec-maxw:1180px;
  --ec-display:"Barlow Semi Condensed",system-ui,sans-serif;
  --ec-text:"Barlow",system-ui,sans-serif;
}

/* base (scoped) */
.ec, .ec *{box-sizing:border-box}
.ec{font-family:var(--ec-text);color:var(--ec-body);line-height:1.55;-webkit-font-smoothing:antialiased}
.ec img{max-width:100%;display:block}
.ec a{color:inherit;text-decoration:none}
.ec p{margin:0}
.ec h1,.ec h2,.ec h3{font-family:var(--ec-display);color:var(--ec-navy);line-height:1.05;letter-spacing:-.01em;margin:0}

/* layout */
.ec-wrap{max-width:var(--ec-maxw);margin:0 auto;padding:0 24px}
.ec-section{padding:84px 0}
.ec-soft{background:var(--ec-soft)}
.ec-sec-head{max-width:62ch;margin-bottom:42px}
.ec-sec-head h2{font-size:clamp(30px,4vw,46px);font-weight:800;margin:14px 0 12px}
.ec-sec-head p{font-size:17.5px;color:var(--ec-muted);max-width:54ch}

/* eyebrow + bolt */
.ec-eyebrow{font-family:var(--ec-display);font-weight:700;text-transform:uppercase;letter-spacing:.14em;font-size:13px;color:var(--ec-red);display:inline-flex;align-items:center;gap:8px}
.ec-eyebrow.ec-light{color:#FF6A57}
.ec-bolt{width:14px;height:18px;flex:0 0 auto}

/* buttons */
.ec-btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--ec-display);font-weight:700;font-size:16px;letter-spacing:.01em;padding:14px 22px;border-radius:4px;cursor:pointer;border:2px solid transparent;transition:transform .15s ease,background .15s ease,color .15s ease,border-color .15s ease}
.ec .ec-btn-primary{background:var(--ec-red);color:#fff}
.ec .ec-btn-primary:hover{background:var(--ec-red-bright);transform:translateY(-2px)}
.ec .ec-btn-ghost{background:transparent;color:var(--ec-navy);border-color:var(--ec-navy)}
.ec .ec-btn-ghost:hover{background:var(--ec-navy);color:#fff}
.ec .ec-btn-ghost-light{background:transparent;color:#fff;border-color:rgba(255,255,255,.6)}
.ec .ec-btn-ghost-light:hover{background:#fff;color:var(--ec-navy);border-color:#fff}
.ec-btn-lg{padding:17px 30px;font-size:18px}

/* top bar */
.ec-topbar{background:var(--ec-ink);color:#cfd8ee;font-size:13.5px}
.ec-topbar .ec-wrap{display:flex;justify-content:space-between;align-items:center;height:40px;font-family:var(--ec-display);font-weight:500;letter-spacing:.02em}
.ec-tb-right{display:flex;gap:22px;align-items:center}
.ec-topbar a:hover{color:#fff}
.ec .ec-hot{color:#fff;font-weight:700}

/* header / nav */
.ec-header{position:relative;z-index:50;background:#fff;border-bottom:1px solid var(--ec-line)}
.ec-nav{display:flex;align-items:center;justify-content:space-between;height:78px;gap:24px}
.ec-logo img{height:46px;width:auto}
.ec-menu{display:flex;gap:24px;align-items:center;font-family:var(--ec-display);font-weight:600;font-size:15.5px;color:var(--ec-navy);letter-spacing:.01em}
.ec-menu a{padding:6px 0;position:relative;white-space:nowrap}
.ec-menu a::after{content:"";position:absolute;left:0;bottom:-2px;height:2px;width:0;background:var(--ec-red);transition:width .2s ease}
.ec-menu a:hover::after{width:100%}
.ec-nav-cta{display:flex;align-items:center;gap:14px}
.ec-hamburger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px}
.ec-hamburger span{width:26px;height:3px;background:var(--ec-navy);border-radius:2px}

/* hero */
.ec-hero{position:relative;color:#fff;background:var(--ec-navy)}
.ec-hero-bg{position:absolute;inset:0;background-size:cover;background-position:center}
.ec-hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(4,16,46,.94) 0%,rgba(4,16,46,.82) 42%,rgba(4,16,46,.35) 100%)}
.ec-hero-inner{position:relative;padding:92px 0 84px}
.ec-hero h1{color:#fff;font-weight:800;font-size:clamp(40px,6vw,72px);max-width:14ch;margin:16px 0 18px}
.ec-hero h1 .ec-accent{border-bottom:5px solid var(--ec-red);padding-bottom:2px}
.ec-lede{font-size:clamp(17px,2vw,21px);max-width:52ch;color:#dde4f3;margin-bottom:30px}
.ec-hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:34px}
.ec-trust{display:flex;gap:10px;flex-wrap:wrap}
.ec-chip{font-family:var(--ec-display);font-weight:600;font-size:14px;letter-spacing:.02em;color:#eaf0ff;border:1px solid rgba(255,255,255,.28);border-radius:999px;padding:7px 15px;display:inline-flex;align-items:center;gap:8px}
.ec-status{margin-top:30px;display:inline-flex;align-items:center;gap:11px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);padding:11px 17px;border-radius:6px;font-family:var(--ec-display);font-weight:600;letter-spacing:.02em;color:#fff;font-size:14.5px}
.ec-dot{width:11px;height:11px;border-radius:50%;background:var(--ec-red-bright);box-shadow:0 0 0 0 rgba(255,47,25,.6);animation:ec-pulse 2.2s infinite}
@keyframes ec-pulse{0%{box-shadow:0 0 0 0 rgba(255,47,25,.55)}70%{box-shadow:0 0 0 10px rgba(255,47,25,0)}100%{box-shadow:0 0 0 0 rgba(255,47,25,0)}}

/* value strip */
.ec-values{border-bottom:1px solid var(--ec-line)}
.ec-values .ec-grid{display:grid;grid-template-columns:repeat(4,1fr)}
.ec-vcol{padding:30px 26px;border-right:1px solid var(--ec-line);display:flex;gap:14px;align-items:flex-start}
.ec-vcol:last-child{border-right:0}
.ec-vcol svg{flex:0 0 auto;color:var(--ec-red);margin-top:2px}
.ec-vcol h4{font-family:var(--ec-display);color:var(--ec-navy);font-size:18px;font-weight:700;margin-bottom:3px}
.ec-vcol p{font-size:14.5px;color:var(--ec-muted);line-height:1.45}

/* plans */
.ec-plans{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:start}
.ec-plan{background:#fff;border:1px solid var(--ec-line);border-radius:10px;padding:32px 28px;position:relative;display:flex;flex-direction:column;height:100%}
.ec-plan.ec-feat{border:2px solid var(--ec-red);box-shadow:0 18px 50px -20px rgba(192,0,0,.35);transform:translateY(-8px)}
.ec-ribbon{position:absolute;top:-14px;left:50%;transform:translateX(-50%);background:var(--ec-red);color:#fff;font-family:var(--ec-display);font-weight:700;font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;padding:6px 16px;border-radius:999px;white-space:nowrap}
.ec-ptag{font-family:var(--ec-display);font-weight:600;text-transform:uppercase;letter-spacing:.1em;font-size:12.5px;color:var(--ec-red)}
.ec-plan h3{font-size:27px;font-weight:800;margin:6px 0 4px}
.ec-who{color:var(--ec-muted);font-size:15px;min-height:62px;margin-bottom:18px}
.ec-plan ul{list-style:none;display:flex;flex-direction:column;gap:11px;margin:0 0 26px;padding:0;flex:1}
.ec-plan li{display:flex;gap:11px;font-size:15.5px;color:var(--ec-body);align-items:flex-start}
.ec-plan li svg{flex:0 0 auto;margin-top:3px;color:var(--ec-red)}
.ec-plan .ec-btn{width:100%;justify-content:center}

/* included (dark) */
.ec-included{background:var(--ec-navy);color:#fff}
.ec-included h2{color:#fff}
.ec-included .ec-sec-head p{color:#c3cfe8}
.ec-inc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px 32px}
.ec-inc{display:flex;gap:16px;align-items:flex-start;padding-top:22px;border-top:1px solid rgba(255,255,255,.16)}
.ec-inc svg{flex:0 0 auto;color:var(--ec-red-bright);margin-top:2px}
.ec-inc h4{font-family:var(--ec-display);font-size:19px;font-weight:700;color:#fff;margin-bottom:5px}
.ec-inc p{font-size:14.5px;color:#b9c6e2;line-height:1.5}

/* sectors */
.ec-sectors{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.ec-sector{border:1px solid var(--ec-line);border-radius:10px;overflow:hidden;background:#fff;transition:transform .18s ease,box-shadow .18s ease}
.ec-sector:hover{transform:translateY(-5px);box-shadow:0 16px 36px -22px rgba(0,25,78,.45)}
.ec-sector .ec-top{height:150px;background:var(--ec-navy);background-size:cover;background-position:center;position:relative}
.ec-sector .ec-top.ec-icon{display:flex;align-items:center;justify-content:center}
.ec-sector .ec-top.ec-icon svg{color:#9db0d8;width:54px;height:54px}
.ec-pill{position:absolute;top:12px;left:12px;background:var(--ec-red);color:#fff;font-family:var(--ec-display);font-weight:700;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;padding:4px 11px;border-radius:999px}
.ec-sector .ec-body{padding:20px 20px 24px}
.ec-sector h4{font-family:var(--ec-display);color:var(--ec-navy);font-size:20px;font-weight:700;margin-bottom:5px}
.ec-sector p{font-size:14.5px;color:var(--ec-muted)}

/* sales + hire (secondary) */
.ec-also .ec-eyebrow{color:var(--ec-muted)}
.ec-two{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.ec-offer{display:grid;grid-template-columns:150px 1fr;border:1px solid var(--ec-line);border-radius:10px;overflow:hidden;background:#fff}
.ec-offer .ec-pic{background:var(--ec-navy);background-size:cover;background-position:center;min-height:150px}
.ec-offer .ec-pic.ec-flat{display:flex;align-items:center;justify-content:center}
.ec-offer .ec-pic.ec-flat svg{color:#9db0d8;width:46px;height:46px}
.ec-offer .ec-txt{padding:22px 24px}
.ec-offer h3{font-size:22px;font-weight:700;margin-bottom:6px}
.ec-offer p{font-size:14.5px;color:var(--ec-muted);margin-bottom:14px}
.ec .ec-arrow{font-family:var(--ec-display);font-weight:700;color:var(--ec-red);letter-spacing:.02em;display:inline-flex;align-items:center;gap:7px}
.ec .ec-arrow:hover{gap:11px}

/* about */
.ec-about-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:54px;align-items:center}
.ec-about p{font-size:17px;margin-bottom:16px;color:var(--ec-body)}
.ec-pillars{display:flex;flex-direction:column;gap:14px}
.ec-pillar{display:flex;gap:14px;align-items:flex-start;background:var(--ec-soft);border-left:3px solid var(--ec-red);padding:16px 18px;border-radius:0 8px 8px 0}
.ec-pillar svg{flex:0 0 auto;color:var(--ec-red);margin-top:2px}
.ec-pillar h4{font-family:var(--ec-display);color:var(--ec-navy);font-size:17px;font-weight:700}
.ec-pillar p{font-size:14px;color:var(--ec-muted);margin:0}

/* final cta */
.ec-cta-band{background:var(--ec-navy);color:#fff;text-align:center;padding:78px 0}
.ec-cta-band h2{color:#fff;font-size:clamp(30px,4.2vw,48px);font-weight:800;max-width:18ch;margin:0 auto 14px}
.ec-cta-band p{color:#c8d3ec;font-size:18px;margin-bottom:28px}
.ec-cta-band .ec-row{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;align-items:center}
.ec .ec-callnum{font-family:var(--ec-display);font-weight:700;font-size:20px;color:#fff;display:inline-flex;align-items:center;gap:9px}

/* footer */
.ec-footer{background:var(--ec-ink);color:#9fb0d6;font-size:14.5px}
.ec-foot{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.4fr;gap:36px;padding:64px 0 40px}
.ec-foot .ec-word{font-family:var(--ec-display);font-weight:800;color:#fff;font-size:26px;letter-spacing:.02em;line-height:1}
.ec-foot .ec-sub{font-family:var(--ec-display);font-weight:600;letter-spacing:.34em;font-size:11px;color:#FF6A57;margin-top:5px}
.ec-foot .ec-brand p{margin-top:16px;max-width:32ch;line-height:1.55}
.ec-foot h5{font-family:var(--ec-display);color:#fff;font-size:14px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:16px}
.ec-foot ul{list-style:none;display:flex;flex-direction:column;gap:10px;margin:0;padding:0}
.ec-foot a:hover{color:#fff}
.ec-foot .ec-contact div{margin-bottom:11px;line-height:1.5}
.ec-foot .ec-contact strong{color:#fff;font-weight:600}
.ec-footbar{border-top:1px solid rgba(255,255,255,.12);padding:18px 0;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13px;color:#7e90b8}

/* scroll reveal */
.ec-reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.ec-reveal.ec-in{opacity:1;transform:none}

/* responsive */
@media(max-width:960px){
  .ec-menu{display:none}
  .ec-hamburger{display:flex}
  .ec-nav-cta .ec-btn{display:none}
  .ec-values .ec-grid{grid-template-columns:repeat(2,1fr)}
  .ec-vcol:nth-child(2){border-right:0}
  .ec-vcol{border-bottom:1px solid var(--ec-line)}
  .ec-plans{grid-template-columns:1fr;gap:34px}
  .ec-plan.ec-feat{transform:none}
  .ec-inc-grid{grid-template-columns:1fr 1fr}
  .ec-sectors{grid-template-columns:1fr 1fr}
  .ec-two{grid-template-columns:1fr}
  .ec-about-grid{grid-template-columns:1fr;gap:30px}
  .ec-foot{grid-template-columns:1fr 1fr}
}
@media(max-width:600px){
  .ec-section{padding:60px 0}
  .ec-tb-left{display:none}
  .ec-inc-grid{grid-template-columns:1fr}
  .ec-sectors{grid-template-columns:1fr}
  .ec-offer{grid-template-columns:1fr}
  .ec-offer .ec-pic{min-height:120px}
  .ec-foot{grid-template-columns:1fr}
  .ec-hero-inner{padding:64px 0 58px}
}
@media(prefers-reduced-motion:reduce){
  .ec *{animation:none!important}
  .ec-reveal{opacity:1;transform:none;transition:none}
}

/* ============ contact / enquiry form ============ */
.ec-contact-sec{background:var(--ec-navy);color:#fff}
.ec-contact-sec h2{color:#fff;font-size:clamp(30px,4vw,46px);font-weight:800;margin:14px 0 12px}
.ec-contact-sec .ec-sec-head p{color:#c3cfe8}
.ec-contact-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:48px;align-items:start}
.ec-contact-info .ec-cinfo{display:flex;gap:13px;align-items:flex-start;margin-bottom:18px}
.ec-contact-info .ec-cinfo svg{flex:0 0 auto;color:var(--ec-red-bright);margin-top:3px}
.ec-contact-info h4{font-family:var(--ec-display);color:#fff;font-size:16px;font-weight:700;letter-spacing:.02em;margin-bottom:2px}
.ec-contact-info p,.ec-contact-info a{color:#c3cfe8;font-size:15px}
.ec-contact-info a:hover{color:#fff}
.ec-form{background:#fff;border-radius:12px;padding:30px 28px}
.ec-form .ec-field{margin-bottom:16px}
.ec-form label{display:block;font-family:var(--ec-display);font-weight:600;font-size:13.5px;letter-spacing:.02em;color:var(--ec-navy);margin-bottom:6px}
.ec-form input,.ec-form select,.ec-form textarea{width:100%;font-family:var(--ec-text);font-size:15px;color:var(--ec-body);padding:12px 14px;border:1.5px solid var(--ec-line);border-radius:6px;background:#fff;transition:border-color .15s ease}
.ec-form input:focus,.ec-form select:focus,.ec-form textarea:focus{outline:none;border-color:var(--ec-navy)}
.ec-form textarea{resize:vertical;min-height:96px}
.ec-form .ec-row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.ec-form .ec-btn{width:100%;justify-content:center;margin-top:6px}
.ec-form .ec-formnote{font-size:12.5px;color:var(--ec-muted);margin-top:12px;text-align:center}
.ec-formmsg{display:none;border-radius:6px;padding:13px 15px;font-size:14.5px;font-family:var(--ec-text);margin-bottom:16px}
.ec-formmsg.ec-ok{display:block;background:#E7F6EC;color:#1B6B36;border:1px solid #B7E2C4}
.ec-formmsg.ec-err{display:block;background:#FBE7E7;color:#9B1C1C;border:1px solid #F0BcBc}
@media(max-width:760px){.ec-contact-grid{grid-template-columns:1fr;gap:30px}.ec-form .ec-row2{grid-template-columns:1fr}}

/* ============================================================
   macOS-style refresh: rounded corners, soft shadows, frosted header.
   This block overrides selected rules above. Delete it to revert.
   ============================================================ */
:root{
  --ec-r:16px;     /* cards and tiles */
  --ec-r-sm:11px;  /* buttons and inputs */
  --ec-r-lg:22px;  /* large panels */
  --ec-sh-sm:0 1px 2px rgba(7,18,48,.05), 0 3px 8px rgba(7,18,48,.06);
  --ec-sh:0 10px 30px -12px rgba(7,18,48,.20), 0 4px 12px -8px rgba(7,18,48,.12);
  --ec-sh-lg:0 28px 64px -24px rgba(7,18,48,.30), 0 8px 20px -12px rgba(7,18,48,.14);
}

/* Frosted, floating header */
.ec-header{
  background:rgba(255,255,255,.72);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid rgba(7,18,48,.07);
}

/* Buttons: rounder with soft depth */
.ec-btn{border-radius:var(--ec-r-sm)}
.ec .ec-btn-primary{box-shadow:0 8px 20px -8px rgba(192,0,0,.55)}
.ec .ec-btn-primary:hover{box-shadow:0 12px 26px -8px rgba(255,47,25,.6)}

/* Plan cards */
.ec-plan{border-radius:var(--ec-r);border-color:rgba(7,18,48,.08);box-shadow:var(--ec-sh-sm)}
.ec-plan.ec-feat{border-radius:var(--ec-r);box-shadow:0 24px 60px -22px rgba(192,0,0,.30),var(--ec-sh-sm)}

/* Sector tiles */
.ec-sector{border-radius:var(--ec-r);border-color:rgba(7,18,48,.08);box-shadow:var(--ec-sh-sm)}
.ec-sector:hover{box-shadow:var(--ec-sh)}

/* Sales and hire cards */
.ec-offer{border-radius:var(--ec-r);border-color:rgba(7,18,48,.08);box-shadow:var(--ec-sh-sm)}

/* Hero status pill */
.ec-status{border-radius:14px}

/* Value strip: soften the dividers */
.ec-vcol{border-right-color:rgba(7,18,48,.07)}

/* About pillars */
.ec-pillar{border-radius:0 14px 14px 0}

/* Contact form panel and fields */
.ec-form{border-radius:var(--ec-r-lg);box-shadow:var(--ec-sh-lg)}
.ec-form input,.ec-form select,.ec-form textarea{border-radius:var(--ec-r-sm)}
.ec-formmsg{border-radius:var(--ec-r-sm)}

/* ============================================================
   Mobile refinements
   ============================================================ */
@media (max-width:600px){
  /* Top bar: centred, tidy, no mid-number wrapping */
  .ec-topbar{font-size:12px}
  .ec-topbar .ec-wrap{height:auto;flex-wrap:wrap;justify-content:center;gap:5px 16px;padding-top:9px;padding-bottom:9px}
  .ec-tb-right{flex-wrap:wrap;justify-content:center;gap:5px 16px}
  .ec-tb-right > *{white-space:nowrap}

  /* Hero: slightly smaller heading, comfortable spacing */
  .ec-hero h1{font-size:36px}
  .ec-lede{font-size:16.5px}

  /* Hero buttons: full width, centred, stacked */
  .ec-hero-cta{flex-direction:column;align-items:stretch;gap:12px}
  .ec-hero-cta .ec-btn{width:100%;justify-content:center}
}

/* ============================================================
   Mobile polish: drop wrapping underline + stop sticky tap-hover
   ============================================================ */
@media (max-width:600px){
  /* The accent underline only reads well on one line; hide it on phones */
  .ec-hero h1 .ec-accent{border-bottom:0;padding-bottom:0}
}
@media (hover:none){
  /* On touch screens, keep buttons at their resting look (no sticky hover) */
  .ec .ec-btn-primary:hover{background:var(--ec-red);transform:none}
  .ec .ec-btn-ghost:hover{background:transparent;color:var(--ec-navy)}
  .ec .ec-btn-ghost-light:hover{background:transparent;color:#fff;border-color:rgba(255,255,255,.6)}
}

/* ============================================================
   Mobile padding: more breathing room on small screens
   ============================================================ */
@media (max-width:600px){
  .ec-wrap{padding-left:20px;padding-right:20px}
  .ec-hero-inner{padding-left:20px;padding-right:20px}
}

/* ============================================================
   v2 additions: dropdown nav, mobile menu, hire section,
   gallery, floating WhatsApp, social icons, branch layout
   ============================================================ */

/* --- Dropdown nav (desktop) --- */
.ec-dropdown{position:relative}
.ec-dropdown-toggle{cursor:default;display:inline-flex;align-items:center;gap:5px}
.ec-dropdown-toggle::after{content:"";width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid var(--ec-navy);transition:transform .2s ease;flex:0 0 auto}
.ec-dropdown:hover .ec-dropdown-toggle::after{transform:rotate(180deg)}
.ec-dropdown-panel{display:none;position:absolute;top:100%;left:50%;transform:translateX(-50%);min-width:230px;padding-top:10px;z-index:200}
.ec-dropdown-panel-inner{background:#fff;border:1px solid var(--ec-line);border-radius:14px;box-shadow:0 16px 40px -16px rgba(7,18,48,.22),0 4px 12px -8px rgba(7,18,48,.10);padding:8px;display:flex;flex-direction:column}
.ec-dropdown:hover .ec-dropdown-panel{display:flex;flex-direction:column}
.ec-dropdown-panel-inner a{padding:11px 14px;border-radius:8px;font-size:15px;font-family:var(--ec-display);font-weight:600;color:var(--ec-navy);white-space:nowrap;display:block}
.ec-dropdown-panel-inner a:hover{background:var(--ec-soft)}
.ec-dropdown-panel-inner a::after{display:none!important}

/* --- Mobile menu: vertical slide-down --- */
@media(max-width:960px){
  .ec-header{position:relative;z-index:50}
  .ec-menu{
    flex-direction:column;align-items:flex-start;gap:0;
    position:absolute;top:79px;left:0;right:0;
    background:#fff;padding:8px 20px 16px;
    border-bottom:1px solid var(--ec-line);
    box-shadow:0 8px 20px -8px rgba(7,18,48,.14);
    z-index:49;
  }
  .ec-menu > a, .ec-dropdown-toggle{
    padding:11px 0;width:100%;
    border-bottom:1px solid var(--ec-line);
    font-size:16px;
  }
  .ec-menu > *:last-child > a, .ec-menu > a:last-child{border-bottom:0}
  /* Always show dropdown panel on mobile */
  .ec-dropdown{width:100%}
  .ec-dropdown-toggle::after{display:none}
  .ec-dropdown-panel{
    display:block!important;
    position:static;transform:none;padding-top:0;min-width:0;
  }
  .ec-dropdown-panel-inner{
    border:none;box-shadow:none;border-radius:0;
    padding:0 0 4px 14px;background:transparent;
  }
  .ec-dropdown-panel a{
    padding:8px 0;font-size:15px;
    border-bottom:1px solid rgba(7,18,48,.05);
    border-radius:0;
  }
}

/* --- Hire featured section --- */
.ec-hire-feat{background:var(--ec-navy);color:#fff;position:relative;overflow:hidden}
.ec-hire-grid{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center}
.ec-hire-txt h2{color:#fff;font-size:clamp(28px,3.8vw,44px);font-weight:800;margin:14px 0 0}
.ec-hire-txt p{color:#c3cfe8;font-size:17px;margin:14px 0 22px;max-width:46ch}
.ec-hire-uses{display:flex;flex-direction:column;gap:12px;margin-bottom:28px}
.ec-hire-use{display:flex;gap:12px;align-items:flex-start;color:#c3cfe8;font-size:15.5px}
.ec-hire-use svg{flex:0 0 auto;color:var(--ec-red-bright);margin-top:2px}
.ec-hire-pic{height:420px;border-radius:var(--ec-r);background-size:cover;background-position:center;box-shadow:var(--ec-sh-lg)}
@media(max-width:760px){
  .ec-hire-grid{grid-template-columns:1fr;gap:28px}
  .ec-hire-pic{height:220px}
}

/* --- Gallery section --- */
.ec-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.ec-gal-item{height:220px;background:var(--ec-navy);background-size:cover;background-position:center;border-radius:var(--ec-r);overflow:hidden;transition:transform .18s ease,box-shadow .18s ease}
.ec-gal-item:hover{transform:translateY(-4px);box-shadow:var(--ec-sh)}
@media(max-width:760px){.ec-gallery{grid-template-columns:1fr 1fr;gap:10px}.ec-gal-item{height:150px}}
@media(max-width:480px){.ec-gallery{grid-template-columns:1fr}}

/* --- Floating WhatsApp button --- */
.ec-wa-float{
  position:fixed;bottom:26px;right:22px;z-index:80;
  background:#25D366;color:#fff;
  width:58px;height:58px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 22px -6px rgba(37,211,102,.75);
  transition:transform .18s ease,box-shadow .18s ease;
}
.ec-wa-float:hover{transform:scale(1.1);box-shadow:0 10px 30px -6px rgba(37,211,102,.85)}
.ec-wa-float svg{width:30px;height:30px}

/* --- Footer social icons --- */
.ec-socials{display:flex;gap:10px;margin-top:18px}
.ec-soc{width:38px;height:38px;border-radius:10px;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;transition:background .18s ease;flex:0 0 auto}
.ec-soc:hover{background:rgba(255,255,255,.20)}
.ec-soc svg{width:19px;height:19px;color:#fff}

/* --- Two-branch contact layout --- */
.ec-branches{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:6px}
.ec-branch{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:10px;padding:14px 16px}
.ec-branch h5{font-family:var(--ec-display);color:#fff;font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;margin-bottom:8px}
.ec-branch p{color:#c3cfe8;font-size:14px;line-height:1.6}
.ec-branch .ec-branch-tag{display:inline-block;background:var(--ec-red);color:#fff;font-family:var(--ec-display);font-weight:700;font-size:11px;letter-spacing:.08em;text-transform:uppercase;padding:3px 9px;border-radius:999px;margin-bottom:8px}
@media(max-width:600px){.ec-branches{grid-template-columns:1fr}}

/* --- Hero video option --- */
.ec-hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
.ec-hero-overlay{position:absolute;inset:0;z-index:2;background:linear-gradient(100deg,rgba(4,16,46,.94) 0%,rgba(4,16,46,.82) 42%,rgba(4,16,46,.35) 100%)}
.ec-hero-inner{position:relative;z-index:3}