:root {
  --navy: #005AAA;
  --navy-mid: #0070cc;
  --navy-pale: #e6f2fb;
  --lavender: #b3e4f7;
  --sky: #00AEEF;
  --lavender-mid: #00AEEF;
  --orange: #ff6600;
  --orange-soft: #fff0e6;
  --white: #ffffff;
  --off-white: #f4faff;
  --surface: #e8f5fc;
  --border: #c8e4f5;
  --slate: #2d5a7a;
  --slate-light: #7aaec8;
  --text: #0d2d44;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: 'DM Sans', sans-serif; background: var(--white); color: var(--text); overflow-x: hidden; }
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: var(--off-white); }
::-webkit-scrollbar-thumb { background: var(--navy); border-radius: 4px; }

/* CURSOR */
.c-dot { width: 7px; height: 7px; background: var(--orange); border-radius: 50%; position: fixed; pointer-events: none; z-index: 9999; transform: translate(-50%,-50%); mix-blend-mode: multiply; transition: opacity .2s; }
.c-ring { width: 34px; height: 34px; border: 1.5px solid rgba(0,90,170,.2); border-radius: 50%; position: fixed; pointer-events: none; z-index: 9998; transform: translate(-50%,-50%); }

/* NAV */
nav { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; }
.nav-glass {
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid transparent;
  transition: all .4s ease;
}
nav.scrolled .nav-glass { background: rgba(255,255,255,.97); border-bottom-color: var(--border); box-shadow: 0 2px 30px rgba(0,90,170,.06); }
.nav-row { display: flex; align-items: center; justify-content: space-between; padding: 13px 36px; max-width: 1300px; margin: 0 auto; }
.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; }
.brand img { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; border: 2px solid var(--border); }
.brand-n { font-family: 'Syne', sans-serif; font-weight: 700; font-size: .93rem; color: var(--navy); }
.brand-s { font-size: .67rem; color: var(--slate-light); letter-spacing: .09em; text-transform: uppercase; }
.nav-ul { display: flex; align-items: center; gap: 4px; list-style: none; }
.nav-ul a { font-size: .84rem; font-weight: 500; color: var(--slate); text-decoration: none; padding: 7px 13px; border-radius: 8px; transition: all .25s; }
.nav-ul a:hover { color: var(--navy); background: var(--navy-pale); }
.nav-ul .cta { background: var(--navy); color: white !important; border-radius: 10px; padding: 9px 22px !important; font-weight: 600 !important; }
.nav-ul .cta:hover { background: var(--orange) !important; box-shadow: 0 8px 20px rgba(255,102,0,.25); }
.ham { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 5px; }
.ham span { display: block; width: 24px; height: 2px; background: var(--navy); border-radius: 2px; transition: all .3s; }
.mob-nav { display: none; background: white; border-top: 1px solid var(--border); padding: 10px 20px 18px; flex-direction: column; gap: 2px; }
.mob-nav a { display: block; padding: 10px 12px; color: var(--navy); font-weight: 500; text-decoration: none; border-radius: 8px; }
.mob-nav a:hover { background: var(--surface); }
.mob-nav.open { display: flex; }

/* HERO */
#hero { min-height: 100vh; background: var(--off-white); display: flex; align-items: center; padding-top: 78px; position: relative; overflow: hidden; }

.hero-bg { position: absolute; inset: 0; pointer-events: none; }
.orb { position: absolute; border-radius: 50%; filter: blur(70px); }
.orb-1 { width: 680px; height: 680px; background: radial-gradient(circle, rgba(0,174,239,.15) 0%, transparent 70%); top: -200px; right: -160px; animation: gf 12s ease-in-out infinite; }
.orb-2 { width: 420px; height: 420px; background: radial-gradient(circle, rgba(255,102,0,.07) 0%, transparent 70%); bottom: -100px; left: -60px; animation: gf 9s ease-in-out infinite 3s; }
.orb-3 { width: 280px; height: 280px; background: radial-gradient(circle, rgba(0,90,170,.06) 0%, transparent 70%); top: 40%; right: 28%; animation: gf 14s ease-in-out infinite 6s; }
@keyframes gf { 0%,100%{transform:scale(1) translate(0,0)} 33%{transform:scale(1.07) translate(14px,-18px)} 66%{transform:scale(.96) translate(-10px,14px)} }

.hero-grid {
  position: absolute; inset: 0;
  background-image: linear-gradient(rgba(0,90,170,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(0,90,170,.04) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 20%, transparent 80%);
}

.hero-pill { display: inline-flex; align-items: center; gap: 8px; background: var(--orange-soft); border: 1px solid rgba(255,102,0,.15); border-radius: 100px; padding: 6px 16px; font-size: .74rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--orange); margin-bottom: 1.5rem; opacity:0; animation: su .7s cubic-bezier(.22,1,.36,1) forwards .2s; }
.hero-pill::before { content:''; width:6px; height:6px; background:var(--orange); border-radius:50%; animation: bk 1.8s ease infinite; }
@keyframes bk { 0%,100%{opacity:1} 50%{opacity:.2} }

h1.hero-h { font-family: 'DM Serif Display', serif; font-size: clamp(2.8rem, 6vw, 5rem); line-height: 1.06; letter-spacing: -.02em; color: var(--navy); opacity:0; animation: su .85s cubic-bezier(.22,1,.36,1) forwards .4s; }
h1.hero-h em { font-style:italic; color:var(--orange); }
h1.hero-h .muted { color: var(--lavender-mid); }

.hero-p { font-size: 1rem; color: var(--slate); font-weight: 300; max-width: 470px; line-height: 1.82; margin-top: 1.3rem; opacity:0; animation: su .85s cubic-bezier(.22,1,.36,1) forwards .6s; }

.hero-btns { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 2rem; opacity:0; animation: su .85s cubic-bezier(.22,1,.36,1) forwards .8s; }
.btn-n { background:var(--navy); color:white; font-weight:600; font-size:.88rem; padding:13px 28px; border-radius:12px; border:none; text-decoration:none; display:inline-flex; align-items:center; gap:8px; transition:all .3s cubic-bezier(.22,1,.36,1); }
.btn-n:hover { background:var(--orange); color:white; transform:translateY(-2px); box-shadow:0 12px 28px rgba(255,102,0,.22); }
.btn-g { background:transparent; color:var(--navy); font-weight:600; font-size:.88rem; padding:12px 26px; border-radius:12px; border:1.5px solid var(--border); text-decoration:none; display:inline-flex; align-items:center; gap:8px; transition:all .3s cubic-bezier(.22,1,.36,1); }
.btn-g:hover { border-color:var(--navy); background:var(--navy-pale); color:var(--navy); transform:translateY(-2px); }

.hero-stats { display:flex; gap:0; flex-wrap:wrap; margin-top:2.8rem; opacity:0; animation: su .85s cubic-bezier(.22,1,.36,1) forwards 1.1s; }
.hstat { padding-right:28px; border-right:1px solid var(--border); margin-right:28px; }
.hstat:last-child { border:none; }
.hstat-n { font-family:'Syne',sans-serif; font-size:2.1rem; font-weight:800; color:var(--navy); line-height:1; }
.hstat-n .o { color:var(--orange); font-size:1.5rem; }
.hstat-l { font-size:.72rem; color:var(--slate-light); letter-spacing:.04em; margin-top:4px; }

.hero-panel { opacity:0; animation: pi 1s cubic-bezier(.22,1,.36,1) forwards .7s; position:relative; }
@keyframes pi { from{opacity:0;transform:translateY(28px)} to{opacity:1;transform:translateY(0)} }
.hero-img-frame { border-radius:24px; overflow:hidden; border:1px solid var(--border); box-shadow:0 28px 80px rgba(0,90,170,.1), 0 0 0 7px rgba(231,212,255,.25); }
.hero-img-frame img { width:100%; height:360px; object-fit:cover; display:block; }
.hero-img-overlay { position:absolute; inset:0; background:linear-gradient(180deg,transparent 55%,rgba(0,60,120,.3) 100%); }

.float-c { position:absolute; background:white; border-radius:14px; padding:11px 17px; box-shadow:0 8px 28px rgba(0,90,170,.11); border:1px solid var(--border); z-index: 10 }
.float-c-1 { top:-14px; right:18px; animation: cf 4s ease-in-out infinite; }
.float-c-2 { bottom:-14px; left:18px; animation: cf 5s ease-in-out infinite 1.5s; }
@keyframes cf { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-7px)} }
.float-c-icon { font-size:1rem; margin-bottom:3px; }
.float-c-val { font-family:'Syne',sans-serif; font-size:1rem; font-weight:700; color:var(--navy); }
.float-c-lbl { font-size:.68rem; color:var(--slate-light); }

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

/* SECTIONS */
section { padding: 96px 0; }

.lbl { display:inline-flex; align-items:center; gap:8px; font-size:.71rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--orange); margin-bottom:.65rem; }
.lbl::before { content:''; width:18px; height:1.5px; background:var(--orange); }
.sh { font-family:'DM Serif Display',serif; font-size:clamp(1.9rem,3.8vw,2.9rem); color:var(--navy); line-height:1.1; letter-spacing:-.02em; }
.sh em { font-style:italic; color:var(--orange); }
.sl { font-size:.97rem; color:var(--slate); font-weight:300; line-height:1.8; max-width:500px; }

/* ABOUT */
#about { background:var(--white); }
.img-stack { position:relative; padding:20px 20px 50px 0; }
.img-a { border-radius:20px; overflow:hidden; border:1px solid var(--border); box-shadow:0 20px 60px rgba(0,90,170,.08); }
.img-a img { width:100%; height:340px; object-fit:cover; display:block; }
.img-b { position:absolute; bottom:0; right:0; width:54%; border-radius:16px; overflow:hidden; border:4px solid white; box-shadow:0 12px 40px rgba(0,90,170,.11); }
.img-b img { width:100%; height:165px; object-fit:cover; display:block; }

.abox { background:var(--surface); border:1px solid var(--border); border-left:3px solid var(--orange); border-radius:12px; padding:16px 20px; margin-bottom:12px; }
.abox-t { font-weight:600; font-size:.82rem; text-transform:uppercase; letter-spacing:.06em; color:var(--navy); margin-bottom:5px; }
.abox-p { font-size:.85rem; color:var(--slate); line-height:1.65; }
.agrid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:24px; }
.amini { background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:18px; transition:all .3s cubic-bezier(.22,1,.36,1); }
.amini:hover { background:var(--navy-pale); border-color:rgba(0,90,170,.15); transform:translateY(-3px); box-shadow:0 10px 28px rgba(0,90,170,.07); }
.amini-ico { font-size:1.3rem; margin-bottom:8px; }
.amini-t { font-weight:600; font-size:.83rem; color:var(--navy); margin-bottom:5px; }
.amini-p { font-size:.78rem; color:var(--slate); line-height:1.55; }

/* SERVICES */
#services { background:var(--off-white); }
.scard { background:var(--white); border:1px solid var(--border); border-radius:20px; padding:30px 26px; height:100%; transition:all .35s cubic-bezier(.22,1,.36,1); position:relative; overflow:hidden; }
.scard::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,var(--navy),var(--lavender-mid)); transform:scaleX(0); transform-origin:left; transition:transform .4s cubic-bezier(.22,1,.36,1); }
.scard:hover { border-color:rgba(0,90,170,.14); transform:translateY(-6px); box-shadow:0 20px 50px rgba(0,90,170,.09); }
.scard:hover::before { transform:scaleX(1); }
.scard-ico { width:50px; height:50px; background:var(--navy-pale); border-radius:13px; display:flex; align-items:center; justify-content:center; font-size:1.3rem; margin-bottom:16px; transition:all .3s; }
.scard:hover .scard-ico { background:var(--navy); }
.scard-ico i { color:var(--navy); transition:color .3s; }
.scard:hover .scard-ico i { color:white; }
.scard-t { font-family:'Syne',sans-serif; font-weight:700; font-size:.95rem; color:var(--navy); margin-bottom:13px; }
.scard ul { list-style:none; padding:0; }
.scard ul li { font-size:.82rem; color:var(--slate); padding:5px 0; border-bottom:1px solid var(--border); display:flex; align-items:baseline; gap:7px; }
.scard ul li:last-child { border:none; }
.scard ul li::before { content:'–'; color:var(--orange); font-weight:700; flex-shrink:0; }

/* PROJECTS */
#projects { background:var(--white); }
.tabs { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:32px; }
.tb { font-size:.78rem; font-weight:600; padding:8px 17px; border-radius:100px; border:1.5px solid var(--border); background:transparent; color:var(--slate); cursor:pointer; transition:all .25s; }
.tb.active, .tb:hover { background:var(--navy); border-color:var(--navy); color:white; }
.tbl-box { border-radius:16px; border:1px solid var(--border); overflow:hidden; overflow-x:auto; box-shadow:0 4px 24px rgba(0,90,170,.05); }
.ptbl { width:100%; border-collapse:collapse; font-size:.84rem; }
.ptbl thead tr { background:var(--navy); }
.ptbl thead th { font-family:'Syne',sans-serif; font-size:.7rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:rgba(231,212,255,.82); padding:13px 18px; white-space:nowrap; text-align:left; }
.ptbl tbody tr { border-bottom:1px solid var(--border); transition:background .2s; }
.ptbl tbody tr:last-child { border:none; }
.ptbl tbody tr:hover { background:var(--off-white); }
.ptbl tbody td { padding:12px 18px; color:var(--slate); line-height:1.5; vertical-align:top; }
.ptbl td:first-child { font-weight:600; font-size:.76rem; color:var(--navy); white-space:nowrap; }
.cbadge { display:inline-block; background:var(--navy-pale); color:var(--navy); font-size:.7rem; font-weight:600; padding:3px 10px; border-radius:100px; white-space:nowrap; }

/* SAFETY BAND */
.s-band { background:linear-gradient(130deg,var(--navy) 0%,#003d80 100%); padding:60px 0; }
.si { text-align:center; padding:0 16px; }
.si-ico { width:58px; height:58px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12); border-radius:16px; display:flex; align-items:center; justify-content:center; font-size:1.3rem; color:var(--orange); margin:0 auto 12px; transition:all .3s; }
.si:hover .si-ico { background:var(--orange); color:white; border-color:transparent; transform:translateY(-3px); }
.si-t { font-family:'Syne',sans-serif; font-size:.88rem; font-weight:700; color:white; margin-bottom:5px; }
.si-p { font-size:.76rem; color:rgba(231,212,255,.5); line-height:1.55; }

/* CLIENTS */
#clients { background:var(--off-white); }
.mq-wrap { overflow:hidden; mask-image:linear-gradient(90deg,transparent,black 8%,black 92%,transparent); }
.mq-track { display:flex; gap:14px; animation:mq 36s linear infinite; width:max-content; }
.mq-track:hover { animation-play-state:paused; }
@keyframes mq { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
.chip { background:white; border:1px solid var(--border); border-radius:100px; padding:11px 24px; font-size:.83rem; font-weight:600; color:var(--slate); white-space:nowrap; transition:all .25s; flex-shrink:0; }
.chip:hover { border-color:var(--navy); color:var(--navy); background:var(--navy-pale); }

/* FOOTER */
footer { background:#021a2e; padding:68px 0 28px; }
.foot-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1.6fr; gap:44px; padding-bottom:52px; border-bottom:1px solid rgba(231,212,255,.07); }
.foot-logo { width:50px; height:50px; border-radius:50%; object-fit:cover; border:2px solid rgba(231,212,255,.14); margin-bottom:12px; display:block; }
.foot-bn { font-family:'Syne',sans-serif; font-weight:800; font-size:1.05rem; color:white; margin-bottom:3px; }
.foot-bs { font-size:.68rem; letter-spacing:.13em; text-transform:uppercase; color:var(--orange); margin-bottom:12px; }
.foot-d { font-size:.82rem; color:rgba(231,212,255,.36); line-height:1.75; }
.foot-h { font-family:'Syne',sans-serif; font-weight:700; font-size:.76rem; letter-spacing:.15em; text-transform:uppercase; color:rgba(231,212,255,.46); margin-bottom:16px; }
.foot-a { display:block; font-size:.83rem; color:rgba(231,212,255,.38); text-decoration:none; padding:4px 0; transition:color .2s; }
.foot-a:hover { color:white; }
.fci { display:flex; gap:11px; margin-bottom:11px; align-items:flex-start; }
.fci-i { color:var(--orange); font-size:.82rem; margin-top:3px; flex-shrink:0; }
.fci-t { font-size:.8rem; color:rgba(231,212,255,.38); line-height:1.6; }
.fci-t a { color:rgba(231,212,255,.38); text-decoration:none; }
.fci-t a:hover { color:var(--orange); }

.foot-bot { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px; padding-top:26px; }
.foot-copy { font-size:.76rem; color:rgba(255,255,255,.8); }
.foot-bl { display:flex; gap:18px; color:rgba(255,255,255,.8); }
.foot-copy a { font-size:.76rem; color:rgba(255,255,255,.8); text-decoration:none; }
.foot-copy a:hover { color:rgba(231,212,255,.55); }

/*.footer-credit {font-size: 0.85rem;color: #ccc;}
.footer-credit a {color: #ffffff;text-decoration: none;font-weight: 500;}
.footer-credit a:hover {color: #a98cff;}*/

/* REVEAL */
.reveal { opacity:0; transform:translateY(22px); transition:opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1); }
.reveal.visible { opacity:1; transform:translateY(0); }
.d1{transition-delay:.08s} .d2{transition-delay:.16s} .d3{transition-delay:.24s} .d4{transition-delay:.32s}
.topSpacer{display:block;height:72px;}


.ph {background: #f4faff;border-bottom: 1px solid #c8e4f5;position: relative;overflow: hidden;}
.ph-grid {position: absolute;inset: 0;pointer-events: none;background-image: linear-gradient(rgba(0,90,170,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(0,90,170,.04) 1px, transparent 1px);background-size: 54px 54px;mask-image: radial-gradient(ellipse 100% 100% at 30% 50%, black 5%, transparent 68%);}
.ph-orb {position: absolute;pointer-events: none;border-radius: 50%;width: 340px;height: 340px;background: radial-gradient(circle, rgba(0,174,239,.11) 0%, transparent 70%);top: -140px;right: -60px;animation: ph-float 11s ease-in-out infinite;}
@keyframes ph-float {
    0%,100% {
        transform: scale(1) translate(0,0);
    }

    50% {
        transform: scale(1.07) translate(8px,-10px);
    }
}

/* Bootstrap .container gets z-index + padding via this */
.ph > .container {position: relative;z-index: 2;padding-top: 44px;padding-bottom: 40px;}
/* Breadcrumb */
.ph-bc {display: flex;align-items: center;flex-wrap: wrap;margin-bottom: 18px;}
.ph-bc a, .ph-bc span {font-size: 13px;font-weight: 500; color: #7aaec8; text-decoration: none;transition: color .2s;white-space: nowrap;}
.ph-bc a:hover { color: #005AAA;}
.ph-bc .ph-bc-cur {color: #005AAA;}
.ph-bc-sep {color: #b5d9ed;margin: 0 8px;user-select: none;}
.ph-bc-home { display: inline-flex; align-items: center;gap: 5px;}
.ph-bc-home svg { width: 13px; height: 13px;stroke: currentColor;fill: none;stroke-width: 2;stroke-linecap: round;stroke-linejoin: round;}

/* Title */
.ph-title { font-family: 'DM Serif Display', serif;font-size: 46px;font-weight: 400;line-height: 1.06;letter-spacing: -.02em;color: #005AAA;margin: 0;}
.ph-title em {font-style: italic;color: #00AEEF;}

.ph-pill {display: inline-flex;align-items: center;gap: 7px;background: rgba(0,174,239,.18);border: 1px solid rgba(0,174,239,.35);border-radius: 100px;padding: 5px 14px;font-size: 11.5px;font-weight: 600;letter-spacing: .12em;text-transform: uppercase;color: var(--orange);margin-bottom: 18px;    animation: su .65s cubic-bezier(.22,1,.36,1) forwards .1s;opacity: 0;}
.ph-pill::before {content: '';width: 5px;height: 5px;background: #00AEEF;border-radius: 50%;animation: blink 2s ease infinite;}

@keyframes blink {
    0%,100% {
        opacity: 1
    }

    50% {
        opacity: .2
    }
}

/* Orange divider */
.ph-divider {width: 40px;height: 2.5px;border-radius: 2px;background: linear-gradient(90deg, #ff6600, rgba(255,102,0,0));margin-top: 16px;}
.ph-accent {position: absolute;bottom: 0;left: 0; right: 0;height: 3px;background: linear-gradient(90deg, #005AAA 0%, #00AEEF 50%, rgba(0,174,239,0) 100%);}


/*About Us Page*/
#about-intro {padding: 90px 0 80px;background: var(--white);}
.founded-badge {display: inline-flex;align-items: center;gap: 8px;background: var(--navy-pale);border: 1px solid var(--border);border-radius: 100px;padding: 6px 16px;font-size: .75rem;font-weight: 600;letter-spacing: .1em;text-transform: uppercase;color: var(--navy);margin-bottom: 1.4rem;}
.founded-badge span {color: var(--orange);}
.about-lead {font-size: 1.05rem;font-weight: 300;color: var(--slate);line-height: 1.85;margin-bottom: 0;}
.about-lead strong { font-weight: 600;color: var(--navy);}

/* Vision card */
.vision-card {background: var(--off-white);border: 1px solid var(--border);border-left: 3px solid var(--sky);border-radius: 14px;padding: 28px 32px;position: relative;overflow: hidden;height: 100%;}
.vision-card::before {content: '';position: absolute;top: -30px;right: -30px;width: 120px;height: 120px;background: radial-gradient(circle, rgba(0,174,239,.08) 0%, transparent 70%);border-radius: 50%;}
.vision-icon {width: 46px;height: 46px;background: var(--surface);border: 1px solid var(--border);border-radius: 12px;display: flex;align-items: center;justify-content: center;font-size: 1.2rem;color: var(--sky);margin-bottom: 16px;}
.vision-title {font-family: 'Syne', sans-serif;font-weight: 700;font-size: .82rem;letter-spacing: .12em;text-transform: uppercase;color: var(--navy);margin-bottom: 12px;}
.vision-text {font-size: .9rem;color: var(--slate);line-height: 1.8;font-weight: 300;}

/* Big quote stat */
.est-block {background: linear-gradient(135deg, var(--navy) 0%, #004080 100%);border-radius: 20px;padding: 36px 32px;color: white;position: relative;overflow: hidden;}
.est-block::after {content: '2016';position: absolute;bottom: -20px;right: -10px;font-family: 'Syne', sans-serif;font-weight: 800;font-size: 90px;color: rgba(255,255,255,.05);line-height: 1;user-select: none;    }
.est-label {font-size: .72rem;font-weight: 600;letter-spacing: .18em;text-transform: uppercase;color: rgba(255,255,255,.5);margin-bottom: 8px;}
.est-val {font-family: 'Syne', sans-serif;font-size: 3.5rem;font-weight: 800;color: white;line-height: 1;margin-bottom: 6px;}
.est-val sup {font-size: 1.4rem;color: var(--orange);}
.est-desc {font-size: .85rem;color: rgba(255,255,255,.55);line-height: 1.6;}
.est-divider {width: 30px;height: 2px;background: var(--orange);margin: 14px 0;}


/* ── TEAM SECTION ── */
#about-team {padding: 80px 0;background: var(--off-white);}
.team-intro {font-size: 1rem;font-weight: 300;color: var(--slate);line-height: 1.85;}
.team-intro strong {font-weight: 600;color: var(--navy);}
.role-card {background: var(--white);border: 1px solid var(--border);border-radius: 14px;padding: 22px 22px; display: flex;align-items: flex-start;gap: 14px;transition: all .3s cubic-bezier(.22,1,.36,1);}
.role-card:hover {border-color: var(--sky);transform: translateY(-3px);box-shadow: 0 10px 28px rgba(0,90,170,.08);}
.role-icon {width: 40px;height: 40px;flex-shrink: 0;background: var(--navy-pale);border-radius: 10px;display: flex;align-items: center;justify-content: center;font-size: 1rem;color: var(--navy);transition: all .3s;}
.role-card:hover .role-icon {background: var(--navy);color: white;}
.role-title {font-family: 'Syne', sans-serif;font-weight: 700;font-size: .85rem;color: var(--navy);margin-bottom: 4px;}
.role-desc {font-size: .8rem;color: var(--slate-light);line-height: 1.55;}

/* Team highlight strip */
.team-highlight {background: var(--surface);border: 1px solid var(--border);border-radius: 16px;padding: 28px 30px;border-left: 3px solid var(--orange);}
.team-highlight-text {font-size: .95rem;color: var(--slate);line-height: 1.8;font-weight: 300;}
.team-highlight-text strong {color: var(--navy);font-weight: 600;}


/* ── SAFETY SECTION ── */
#about-safety { padding: 80px 0; background: var(--white); }

.safety-hero {background: linear-gradient(135deg, var(--navy) 0%, #004a8f 100%);border-radius: 20px;padding: 40px 36px;color: white;position: relative;overflow: hidden;height: 100%;}
.safety-hero::before {content: '';position: absolute; top: -60px; right: -60px; width: 220px; height: 220px;border-radius: 50%;background: radial-gradient(circle, rgba(0,174,239,.18) 0%, transparent 70%);}
.safety-hero-icon { font-size: 2.5rem; margin-bottom: 16px; color: var(--orange); }
.safety-hero-title { font-family: 'Syne', sans-serif; font-weight: 800; font-size: 1.3rem; color: white; margin-bottom: 10px; }
.safety-hero-sub { font-size: .75rem; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; color: rgba(255,255,255,.45); margin-bottom: 14px; }
.safety-hero-text { font-size: .9rem; color: rgba(255,255,255,.65); line-height: 1.75; font-weight: 300; }
.safety-hero-divider { width: 28px; height: 2px; background: var(--orange); margin: 16px 0; }
.safety-goal {background: var(--off-white); border: 1px solid var(--border);border-radius: 14px;padding: 26px 28px;margin-bottom: 16px;}
.safety-goal-title { font-family: 'Syne', sans-serif; font-weight: 700; font-size: .85rem; letter-spacing: .1em; text-transform: uppercase; color: var(--navy); margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
.safety-goal-title i { color: var(--orange); }
.safety-goal-text { font-size: .875rem; color: var(--slate); line-height: 1.8; font-weight: 300; }

.training-list { list-style: none; padding: 0; margin: 0; }
.training-list li {display: flex; align-items: center; gap: 10px;font-size: .875rem; color: var(--slate);padding: 9px 0;border-bottom: 1px solid var(--border);}
.training-list li:last-child { border: none; }
.training-list li::before { content: ''; width: 6px; height: 6px; background: var(--sky); border-radius: 50%; flex-shrink: 0; }
.training-card {background: var(--off-white);border: 1px solid var(--border);border-radius: 14px;padding: 24px 28px;}
.training-card-title { font-family: 'Syne', sans-serif; font-weight: 700; font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; color: var(--navy); margin-bottom: 14px; display: flex; align-items: center; gap: 8px; }
.training-card-title i { color: var(--sky); }

/*Services Page*/

#svc-hero {padding: 80px 0 70px;background: var(--white);}

.hero-img-wrap {border-radius: 20px; overflow: hidden;border: 1px solid var(--border);box-shadow: 0 24px 64px rgba(0,90,170,.1);position: relative;}
.hero-img-wrap img { width: 100%; height: 420px; object-fit: cover; display: block; }
.hero-img-overlay {position: absolute; inset: 0;background: linear-gradient(180deg, transparent 50%, rgba(0,40,80,.45) 100%);}
.hero-img-badge {position: absolute; bottom: 20px; left: 20px;background: white; border-radius: 10px;padding: 10px 16px; display: flex; align-items: center; gap: 10px;box-shadow: 0 4px 20px rgba(0,0,0,.15);}
.hero-img-badge-icon { font-size: 1.2rem; color: var(--orange); }
.hero-img-badge-val { font-family: 'Syne', sans-serif; font-size: 1rem; font-weight: 800; color: var(--navy); line-height: 1; }
.hero-img-badge-lbl { font-size: .68rem; color: var(--slate-light); }
.svc-intro-text { font-size: 1rem; font-weight: 300; color: var(--slate); line-height: 1.85; }
.svc-intro-text strong { color: var(--navy); font-weight: 600; }
.svc-count-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 28px; }
.svc-count-card {background: var(--off-white); border: 1px solid var(--border); border-radius: 12px;padding: 18px 16px; text-align: center;transition: all .3s cubic-bezier(.22,1,.36,1);}
.svc-count-card:hover { border-color: var(--sky); transform: translateY(-3px); box-shadow: 0 10px 24px rgba(0,90,170,.08); }
.svc-count-val { font-family: 'Syne', sans-serif; font-size: 1.8rem; font-weight: 800; color: var(--navy); line-height: 1; }
.svc-count-val sup { font-size: 1rem; color: var(--orange); }
.svc-count-lbl { font-size: .7rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--slate-light); margin-top: 5px; }

/* ── FULL WIDTH IMAGE BAND ── */
.img-band {width: 100%; height: 340px; overflow: hidden; position: relative;background: linear-gradient(135deg, var(--navy-pale) 0%, var(--surface) 100%);display: flex; align-items: center; justify-content: center;}
.img-band img { width: 100%; height: 100%; object-fit: cover; display: block; }
.img-band-overlay {position: absolute; inset: 0;background: linear-gradient(90deg, rgba(0,40,80,.55) 0%, transparent 60%);}
.img-band-content {position: absolute; top: 0; bottom: 0;display: flex; flex-direction: column; justify-content: center;padding: 0 60px;max-width: 520px;}
.img-band-placeholder {display: flex; flex-direction: column; align-items: center; gap: 12px;}
.img-band-placeholder i { font-size: 3rem; color: var(--sky); opacity: .4; }
.img-band-placeholder span { font-size: .75rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--slate-light); }


/* ── SERVICE CARDS SECTION ── */
#svc-cards { padding: 80px 0; background: var(--off-white); }

.svc-card {background: var(--white); border: 1px solid var(--border); border-radius: 20px; height: 100%;overflow: hidden;transition: all .35s cubic-bezier(.22,1,.36,1);position: relative;}
.svc-card::before {content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;background: linear-gradient(90deg, var(--navy), var(--sky));transform: scaleX(0); transform-origin: left;transition: transform .4s cubic-bezier(.22,1,.36,1);}
.svc-card:hover { border-color: rgba(0,90,170,.15); transform: translateY(-6px); box-shadow: 0 20px 50px rgba(0,90,170,.09); }
.svc-card:hover::before { transform: scaleX(1); }

/* card image placeholder */
.svc-card-img {width: 100%; height: 180px; overflow: hidden;position: relative; background: var(--surface);display: flex; align-items: center; justify-content: center;}
.svc-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.svc-card:hover .svc-card-img img { transform: scale(1.05); }
.svc-card-img-placeholder {width: 100%; height: 100%;display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;background: linear-gradient(135deg, var(--surface) 0%, var(--navy-pale) 100%);}
.svc-card-img-placeholder i { font-size: 2.2rem; color: var(--sky); opacity: .6; }
.svc-card-img-placeholder span { font-size: .7rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--slate-light); }
.svc-card-img-tag {position: absolute; top: 12px; left: 12px;background: var(--navy); color: white;font-size: .65rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;padding: 4px 10px; border-radius: 100px;}
.svc-card-body { padding: 24px 24px 28px; }
.svc-icon-wrap {width: 46px; height: 46px; background: var(--navy-pale); border-radius: 12px;display: flex; align-items: center; justify-content: center;font-size: 1.25rem; margin-bottom: 14px;transition: all .3s;}
.svc-card:hover .svc-icon-wrap { background: var(--navy); }
.svc-icon-wrap i { color: var(--navy); transition: color .3s; }
.svc-card:hover .svc-icon-wrap i { color: white; }

.svc-card-title { font-family: 'Syne', sans-serif; font-weight: 700; font-size: .95rem; color: var(--navy); margin-bottom: 14px; text-transform: uppercase; letter-spacing: .04em; }
.svc-list { list-style: none; padding: 0; }
.svc-list li { font-size: .83rem; color: var(--slate); padding: 5px 0; border-bottom: 1px solid var(--border); display: flex; align-items: baseline; gap: 8px; }
.svc-list li:last-child { border: none; }
.svc-list li::before { content: '–'; color: var(--orange); font-weight: 700; flex-shrink: 0; }

/* ── SECTION DIVIDER ── */
.sec-rule { border: none; border-top: 1px solid var(--border); margin: 0; }


#svc-quality { padding: 80px 0; background: var(--white); }

.qe-card {border-radius: 20px; padding: 36px 32px; height: 100%;position: relative; overflow: hidden;}
.qe-card-light {background: var(--off-white); border: 1px solid var(--border);border-left: 3px solid var(--sky);}
.qe-card-dark {background: linear-gradient(135deg, var(--navy) 0%, #004080 100%);border: none;}
.qe-card-dark::before {content: ''; position: absolute; top: -50px; right: -50px;width: 220px; height: 220px; border-radius: 50%;background: radial-gradient(circle, rgba(0,174,239,.18) 0%, transparent 70%);}
.qe-img-wrap {border-radius: 16px; overflow: hidden;border: 1px solid var(--border); margin-bottom: 20px;height: 180px; position: relative;background: linear-gradient(135deg, var(--surface) 0%, var(--navy-pale) 100%);display: flex; align-items: center; justify-content: center;}
.qe-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }
.qe-img-placeholder { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.qe-img-placeholder i { font-size: 2rem; color: var(--sky); opacity: .5; }
.qe-img-placeholder span { font-size: .68rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--slate-light); }

.qe-icon { width: 50px; height: 50px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.15); border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; margin-bottom: 18px; }
.qe-icon-light { background: var(--navy-pale); border: 1px solid var(--border); }
.qe-icon i { color: var(--sky); }
.qe-card-dark .qe-icon i { color: var(--orange); }

.qe-title-light { font-family: 'Syne', sans-serif; font-weight: 700; font-size: 1.05rem; color: var(--navy); margin-bottom: 14px; }
.qe-title-dark { font-family: 'Syne', sans-serif; font-weight: 700; font-size: 1.1rem; color: white; margin-bottom: 10px; }
.qe-text-light { font-size: .88rem; color: var(--slate); line-height: 1.8; font-weight: 300; }
.qe-text-dark { font-size: .88rem; color: rgba(255,255,255,.65); line-height: 1.8; font-weight: 300; }
.qe-divider { width: 28px; height: 2px; background: var(--orange); margin: 14px 0; }


/* ── STATS BAND ── */
.stats-band { background: var(--off-white); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 48px 0; }
.stat-item { text-align: center; padding: 0 20px; }
.stat-val { font-family: 'Syne', sans-serif; font-size: 2.4rem; font-weight: 800; color: var(--navy); line-height: 1; }
.stat-val sup { font-size: 1.2rem; color: var(--orange); }
.stat-lbl { font-size: .72rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--slate-light); margin-top: 6px; }
.stat-divider { width: 1px; height: 40px; background: var(--border); margin: auto; }

/* ── FILTER BAR ── */
#projects-main { padding: 70px 0 90px; background: var(--white); }
.filter-bar {  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;margin-bottom: 40px;}
.filter-btn {font-size: .78rem; font-weight: 600; letter-spacing: .04em;padding: 8px 18px; border-radius: 100px;border: 1.5px solid var(--border);background: transparent; color: var(--slate);cursor: pointer; transition: all .25s; white-space: nowrap;}
.filter-btn:hover { border-color: var(--navy); color: var(--navy); background: var(--navy-pale); }
.filter-btn.active { background: var(--navy); border-color: var(--navy); color: white; }
.filter-count {display: inline-flex; align-items: center; justify-content: center;width: 18px; height: 18px; border-radius: 50%;background: rgba(255,255,255,.2); font-size: .65rem; font-weight: 700;margin-left: 4px;}
.filter-btn:not(.active) .filter-count { background: var(--surface); color: var(--slate); }


/* ── PROJECT CARD ── */
.proj-card {background: var(--white);border: 1px solid var(--border);border-radius: 18px;overflow: hidden;transition: all .35s cubic-bezier(.22,1,.36,1);cursor: pointer;height: 100%;display: flex; flex-direction: column;}
.proj-card:hover {border-color: rgba(0,90,170,.18);transform: translateY(-6px);box-shadow: 0 20px 50px rgba(0,90,170,.1);}
/* Thumbnail */
.proj-thumb {width: 100%; height: 210px; overflow: hidden;position: relative; flex-shrink: 0;}
.proj-thumb img {width: 100%; height: 100%; object-fit: cover; display: block;transition: transform .5s cubic-bezier(.22,1,.36,1);}
.proj-card:hover .proj-thumb img { transform: scale(1.06); }
/* Placeholder thumb */
.proj-thumb-placeholder {width: 100%; height: 100%;background: linear-gradient(135deg, var(--surface) 0%, var(--navy-pale) 100%);display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;}
.proj-thumb-placeholder i { font-size: 2.2rem; color: var(--sky); opacity: .5; }
.proj-thumb-placeholder span { font-size: .68rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--slate-light); }

/* Category pill overlay */
.proj-cat-pill {position: absolute; top: 12px; left: 12px;display: inline-flex; align-items: center; gap: 6px;padding: 4px 12px; border-radius: 100px;font-size: .65rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; backdrop-filter: blur(6px);}
.cat-geo     { background: rgba(0,90,170,.85);  color: white; }
.cat-slope   { background: rgba(255,102,0,.88); color: white; }
.cat-geo-map { background: rgba(0,174,239,.88); color: white; }
.cat-ndt     { background: rgba(45,90,122,.88); color: white; }
.cat-rain    { background: rgba(0,130,100,.88); color: white; }

/* Card body */
.proj-body { padding: 20px 22px 24px; display: flex; flex-direction: column; flex: 1; }
.proj-title { font-family: 'Syne', sans-serif; font-weight: 700; font-size: .95rem; color: var(--navy); line-height: 1.35; margin-bottom: 10px; }
.proj-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.proj-meta-item { display: inline-flex; align-items: center; gap: 5px; font-size: .75rem; color: var(--slate-light); }
.proj-meta-item i { font-size: .72rem; color: var(--sky); }
.proj-client {margin-top: auto;padding-top: 14px;border-top: 1px solid var(--border);display: flex; align-items: center; justify-content: space-between;}
.proj-client-label { font-size: .68rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--slate-light); }
.proj-client-name { font-size: .8rem; font-weight: 600; color: var(--navy); }
.proj-arrow {width: 30px; height: 30px; border-radius: 8px;background: var(--navy-pale); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center;font-size: .7rem; color: var(--navy);transition: all .25s; flex-shrink: 0;}
.proj-card:hover .proj-arrow { background: var(--navy); color: white; border-color: var(--navy); }

/* ── NO RESULTS ── */
.no-results {text-align: center; padding: 60px 20px; display: none;}
.no-results i { font-size: 2.5rem; color: var(--border); margin-bottom: 14px; display: block; }
.no-results p { color: var(--slate-light); font-size: .9rem; }


/* ── GALLERY ── */
#gallery { padding: 56px 0 0; background: var(--white); }
.gallery-grid {display: grid;grid-template-columns: 1.6fr 1fr;grid-template-rows: 1fr 1fr;gap: 12px;height: 460px;border-radius: 18px;overflow: hidden;}
.gallery-main {grid-row: 1 / 3;position: relative;overflow: hidden;border-radius: 18px;}
.gallery-main img, .gallery-sub img {width: 100%; height: 100%; object-fit: cover; display: block;transition: transform .5s cubic-bezier(.22,1,.36,1);}
.gallery-sub { position: relative; overflow: hidden; border-radius: 14px; cursor: pointer; }
.gallery-sub:hover img, .gallery-main:hover img { transform: scale(1.04); }
.gallery-main { cursor: pointer; }

.gallery-more-overlay {position: absolute; inset: 0;background: rgba(0,40,80,.55);display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;color: white; font-family: 'Syne', sans-serif;opacity: 0; transition: opacity .3s;}
.gallery-sub:hover .gallery-more-overlay { opacity: 1; }
.gallery-more-overlay span:first-child { font-size: 1.8rem; font-weight: 800; }
.gallery-more-overlay span:last-child { font-size: .7rem; letter-spacing: .15em; text-transform: uppercase; color: rgba(255,255,255,.7); }

.gallery-view-btn {position: absolute; bottom: 16px; right: 16px;background: white; color: var(--navy);font-size: .78rem; font-weight: 600;padding: 9px 18px; border-radius: 100px;display: inline-flex; align-items: center; gap: 7px;box-shadow: 0 6px 20px rgba(0,0,0,.15);}
/* placeholder tile for missing photos */
.gallery-placeholder {width: 100%; height: 100%;background: linear-gradient(135deg, var(--surface) 0%, var(--navy-pale) 100%);display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;}
.gallery-placeholder i { font-size: 1.8rem; color: var(--sky); opacity: .5; }
.gallery-placeholder span { font-size: .65rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--slate-light); }
.gallery-main .gallery-placeholder i { font-size: 2.6rem; }


#project-content { padding: 70px 0 90px; background: var(--white); }
.proj-desc { font-size: 1rem; font-weight: 300; color: var(--slate); line-height: 1.9; }
.proj-desc strong { color: var(--navy); font-weight: 600; }
.proj-desc p + p { margin-top: 16px; }

/* Meta chips below title */
.ph-meta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.ph-chip {display: inline-flex; align-items: center; gap: 7px; background: var(--white); border: 1px solid var(--border);border-radius: 100px; padding: 7px 16px;font-size: .8rem; font-weight: 600; color: var(--navy);}
.ph-chip i { color: var(--sky); font-size: .8rem; }
.ph-chip.cat-chip { background: var(--navy); color: white; border-color: var(--navy); }
.ph-chip.cat-chip i { color: var(--orange); }

#project-content { padding: 70px 0 90px; background: var(--white); }

.proj-desc { font-size: 1rem; font-weight: 300; color: var(--slate); line-height: 1.9; }
.proj-desc strong { color: var(--navy); font-weight: 600; }
.proj-desc p + p { margin-top: 16px; }

/* ── SIDEBAR ── */
.info-card {background: var(--off-white);border: 1px solid var(--border);border-radius: 16px;padding: 26px 24px;position: sticky;top: 24px;}
.info-row { display: flex; align-items: flex-start; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--border); }
.info-row:first-child { padding-top: 0; }
.info-row:last-child { border: none; padding-bottom: 0; }
.info-icon {width: 38px; height: 38px; flex-shrink: 0;background: var(--navy-pale); border-radius: 10px;display: flex; align-items: center; justify-content: center;font-size: .9rem; color: var(--navy);}
.info-label { font-size: .68rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--slate-light); margin-bottom: 3px; }
.info-value { font-size: .92rem; font-weight: 600; color: var(--navy); line-height: 1.4; }
.info-divider { width: 28px; height: 2px; background: var(--orange); margin: 20px 0; }
.info-cta {display: flex; align-items: center; justify-content: center; gap: 8px;background: var(--navy); color: white;font-size: .85rem; font-weight: 600;padding: 13px 20px; border-radius: 12px;text-decoration: none; width: 100%;transition: all .3s;}
.info-cta:hover { background: var(--orange); color: white; transform: translateY(-2px); }

/* Client highlight */
.client-block {background: linear-gradient(135deg, var(--navy) 0%, #004080 100%);border-radius: 14px; padding: 20px 22px; color: white;position: relative; overflow: hidden; margin-top: 20px;}
.client-block::before {content: ''; position: absolute; top: -30px; right: -30px;width: 110px; height: 110px; border-radius: 50%;background: radial-gradient(circle, rgba(0,174,239,.2) 0%, transparent 70%);}
.client-block-label { font-size: .65rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.45); margin-bottom: 6px; }
.client-block-name { font-family: 'Syne', sans-serif; font-size: 1.05rem; font-weight: 800; color: white; }


/*CONTACT US*/
#contact-main { padding: 80px 0; background: var(--white); }

.form-card { background: var(--off-white); border: 1px solid var(--border); border-radius: 20px; padding: 40px; }
.form-label-cgi { font-size: .8rem; font-weight: 600; color: var(--navy); margin-bottom: 6px; display: block; }
.form-control-cgi {
  width: 100%; background: var(--white); border: 1.5px solid var(--border);
  border-radius: 10px; padding: 11px 16px; font-size: .9rem; color: var(--text);
  font-family: 'DM Sans', sans-serif; transition: all .25s;
}
.form-control-cgi:focus { outline: none; border-color: var(--sky); box-shadow: 0 0 0 3px rgba(0,174,239,.12); }
.form-control-cgi::placeholder { color: var(--slate-light); }
textarea.form-control-cgi { resize: vertical; min-height: 120px; }

.btn-submit-cgi {
  background: var(--navy); color: white; font-weight: 600; font-size: .92rem;
  padding: 14px 32px; border-radius: 12px; border: none;
  display: inline-flex; align-items: center; gap: 10px; cursor: pointer;
  transition: all .3s cubic-bezier(.22,1,.36,1);
}
.btn-submit-cgi:hover { background: var(--orange); transform: translateY(-2px); box-shadow: 0 12px 28px rgba(255,102,0,.22); }
.btn-submit-cgi:disabled { opacity: .7; cursor: not-allowed; transform: none; }

.form-success {
  display: none; align-items: center; gap: 12px;
  background: #e8f9ee; border: 1px solid #b8e8c8; border-radius: 12px;
  padding: 16px 20px; margin-top: 18px;
}
.form-success.show { display: flex; }
.form-success i { color: #1a9e4f; font-size: 1.2rem; }
.form-success span { font-size: .88rem; color: #1a6b38; font-weight: 500; }




#map-section { position: relative; background: var(--off-white); border-top: 1px solid var(--border); padding:0 !important }
.map-wrap { width: 100%; height: 480px; position: relative; }
.map-wrap iframe { width: 100%; height: 100%; border: 0; display: block; filter: saturate(.9); }

.map-card-float {position: absolute; top: 32px; left: 32px;background: white; border-radius: 16px; padding: 22px 26px;box-shadow: 0 16px 50px rgba(0,40,80,.18);max-width: 320px; z-index: 5;}
.map-card-badge { display: inline-flex; align-items: center; gap: 6px; background: var(--orange-soft); border: 1px solid rgba(255,102,0,.2); border-radius: 100px; padding: 4px 12px; font-size: .65rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--orange); margin-bottom: 12px; }
.map-card-title { font-family: 'Syne', sans-serif; font-weight: 700; font-size: 1rem; color: var(--navy); margin-bottom: 8px; }
.map-card-addr { font-size: .82rem; color: var(--slate); line-height: 1.6; margin-bottom: 14px; font-weight: 300; }
.map-card-btn { display: inline-flex; align-items: center; gap: 7px; background: var(--navy); color: white; font-size: .8rem; font-weight: 600; padding: 9px 18px; border-radius: 10px; text-decoration: none; transition: all .3s; }
.map-card-btn:hover { background: var(--orange); color: white; }


/*LIGHTBOX*/
.lightbox {position: fixed; inset: 0; background: rgba(0,20,40,.92);display: none; align-items: center; justify-content: center;z-index: 2000; padding: 20px;}
.lightbox.open { display: flex; }
.lightbox img { max-width: 90vw; max-height: 85vh; object-fit: contain; border-radius: 8px; }
.lightbox-close {position: absolute; top: 24px; right: 28px;width: 42px; height: 42px; border-radius: 50%;background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2);color: white; font-size: 1.1rem; display: flex; align-items: center; justify-content: center;cursor: pointer; transition: all .2s;}
.lightbox-close:hover { background: var(--orange); border-color: var(--orange); }
.lightbox-nav {position: absolute; top: 50%; transform: translateY(-50%);width: 46px; height: 46px; border-radius: 50%;background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2);color: white; font-size: 1.1rem; display: flex; align-items: center; justify-content: center;cursor: pointer; transition: all .2s;}
.lightbox-nav:hover { background: var(--sky); border-color: var(--sky); }
.lightbox-prev { left: 24px; }
.lightbox-next { right: 24px; }
.lightbox-counter {position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%);color: rgba(255,255,255,.6); font-size: .8rem; font-weight: 600; letter-spacing: .1em;}


/* ── QUICK CONTACT STRIP ── */
.contact-strip { background: var(--white); padding: 56px 0 0; }
.qc-card {background: var(--off-white); border: 1px solid var(--border);border-radius: 16px; padding: 24px 22px; height: 100%;display: flex; align-items: flex-start; gap: 16px;transition: all .3s cubic-bezier(.22,1,.36,1);}
.qc-card:hover { border-color: var(--sky); transform: translateY(-4px); box-shadow: 0 14px 34px rgba(0,90,170,.08); }
.qc-icon { width: 48px; height: 48px; flex-shrink: 0; background: var(--navy-pale); border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.15rem; color: var(--navy); transition: all .3s; }
.qc-card:hover .qc-icon { background: var(--navy); color: white; }
.qc-label { font-size: .68rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--slate-light); margin-bottom: 5px; }
.qc-value { font-size: .92rem; font-weight: 600; color: var(--navy); line-height: 1.5; }
.qc-value a { color: var(--navy); text-decoration: none; }
.qc-value a:hover { color: var(--orange); }

/* Address card */
.addr-card {background: linear-gradient(135deg, var(--navy) 0%, #004080 100%);border-radius: 20px; padding: 36px 32px; color: white;position: relative; overflow: hidden; height: 100%;}
.addr-card::before { content: ''; position: absolute; top: -50px; right: -50px; width: 200px; height: 200px; border-radius: 50%; background: radial-gradient(circle, rgba(0,174,239,.18) 0%, transparent 70%); }
.addr-icon { width: 52px; height: 52px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.15); border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; color: var(--orange); margin-bottom: 18px; }
.addr-title { font-family: 'Syne', sans-serif; font-weight: 700; font-size: 1.1rem; color: white; margin-bottom: 6px; }
.addr-sub { font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.4); margin-bottom: 18px; }
.addr-divider { width: 28px; height: 2px; background: var(--orange); margin: 0 0 18px; }
.addr-line { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 16px; position: relative; z-index: 1; }
.addr-line i { color: var(--sky); font-size: .9rem; margin-top: 3px; flex-shrink: 0; }
.addr-line-text { font-size: .87rem; color: rgba(255,255,255,.7); line-height: 1.65; font-weight: 300; }
.addr-line-text a { color: rgba(255,255,255,.85); text-decoration: none; }
.addr-line-text a:hover { color: var(--orange); }

/* Social handles */
.social-row { display: flex; gap: 10px; margin-top: 22px; position: relative; z-index: 1; }
.social-btn {width: 42px; height: 42px; border-radius: 12px;background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14);display: flex; align-items: center; justify-content: center;color: white; font-size: 1rem; text-decoration: none;  transition: all .25s;}
.social-btn:hover { background: var(--orange); border-color: var(--orange); transform: translateY(-3px); color: white; }


.wa-btn {position: fixed;bottom: 28px;right: 28px;width: 54px;height: 54px;background: #25D366;border-radius: 50%;display: flex;align-items: center;justify-content: center;font-size: 1.6rem;color: white;text-decoration: none;box-shadow: 0 6px 24px rgba(37,211,102,.4);z-index: 999;transition: all .3s cubic-bezier(.22,1,.36,1);}
.wa-btn:hover {background: #1ebe5d;color: white;transform: translateY(-4px) scale(1.08);box-shadow: 0 12px 32px rgba(37,211,102,.5);}
.wa-btn::before {content: '';position: absolute;inset: 0;border-radius: 50%;background: rgba(37,211,102,.4);animation: wa-pulse 2.2s ease-out infinite;}
@keyframes wa-pulse {
    0%   { transform: scale(1);  opacity: .8; }
  100% { transform: scale(1.9); opacity: 0; }
}


/* RESPONSIVE */
@media(max-width:991px)
{
    .foot-grid{grid-template-columns:1fr 1fr}
    .nav-row{padding:12px 20px}
}
@media(max-width:768px)
{ 
    .ham{display:flex}
    .nav-ul{display:none}
    section{padding:68px 0}
    .agrid{grid-template-columns:1fr}
    .hero-stats{gap:16px}
    .hstat{border:none}
    .foot-grid{grid-template-columns:1fr;gap:28px}
    .ph > .container {padding-top: 32px;padding-bottom: 28px;}
    .ph-title {font-size: 32px;}
    #svc-hero, #svc-cards, #svc-quality { padding: 60px 0; }
    .svc-count-grid { grid-template-columns: 1fr 1fr; }
    .img-band { height: 200px; }
    .img-band-content { padding: 0 24px; }

    #projects-main { padding: 48px 0 64px; }
  .proj-thumb { height: 180px; }
  .stat-divider { display: none; }

}

/* ERROR PAGE */
#error { padding: 64px 0 90px; }
.error-wrap { text-align: center; max-width: 640px; margin: 0 auto; }
.error-code { font-family: 'DM Serif Display', serif; font-size: 130px; font-weight: 400; line-height: 1; color: var(--navy-pale); margin-bottom: 8px; }
.error-title { font-family: 'DM Serif Display', serif; font-size: 30px; font-weight: 400; color: var(--text); margin-bottom: 16px; }
.error-msg { font-size: 1rem; color: var(--slate); line-height: 1.8; margin-bottom: 28px; }
.error-btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.error-btns .btn-n, .error-btns .btn-g { display: inline-flex; }