/* ==========================================================================
   Aeonic Engineering & Company Pvt. Ltd — Core Stylesheet
   Breakpoint-specific rules live in responsive.css
   ========================================================================== */

/* ---------- Design Tokens ---------- */
:root{
  --navy-950:#0b539b;
  --navy-900:#0a1220;
  --navy-800:#101c30;
  --navy-700:#16273f;
  --navy-600:#1f3552;
  --steel-500:#3e7cb1;
  --steel-300:#7fb0dd;
  --gold-500:#b32e14;
  --gold-400:#e14627;
  --gold-300:#f26b4f;
  --gold-100:#ffb499;
  --ink-900:#0c1420;
  --paper-0:#ffffff;
  --paper-50:#f7f8fa;
  --paper-100:#eef1f4;
  --grey-500:#647084;
  --grey-400:#8b96a7;
  --grey-300:#c3cad4;
  --line-100:#e4e8ee;

  --font-head:'Space Grotesk', 'Inter', sans-serif;
  --font-body:'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  --container:1280px;
  --radius-sm:8px;
  --radius-md:16px;
  --radius-lg:24px;
  --shadow-sm:0 2px 10px rgba(10,18,32,.06);
  --shadow-md:0 12px 32px rgba(10,18,32,.10);
  --shadow-lg:0 24px 60px rgba(10,18,32,.16);
  --ease:cubic-bezier(.4,0,.2,1);
  --topbar-h:40px;
  --nav-h:136px;
  --nav-h-scrolled:121px;
  --header-h:176px; /* --topbar-h + --nav-h, kept as one var since every page's fixed-header offset (padding-top, sticky top, scroll-margin) reads this */
  --header-h-scrolled:calc(var(--topbar-h) + var(--nav-h-scrolled)); /* what a page's own sticky sub-nav (services, about tabs, …) should sit at */
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 12px);overflow-x:hidden;}
body{
  font-family:var(--font-body);
  color:var(--ink-900);
  background:var(--paper-0);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  /* No overflow-x here: html{overflow-x:hidden} above already clips
     horizontal overflow at the true viewport level. Repeating it on body
     would make body its own scroll container, which silently breaks
     position:sticky (services-subnav, about-tabs, project/article
     sidebars, map-panel, …) since body itself never actually scrolls —
     the documentElement (html) does. */
  width:100%;
  /* overflow-x:clip (unlike hidden) does NOT create a scroll container, so
     sticky still works. Needed because mobile browsers ignore html's
     overflow-x for layout-viewport sizing: off-screen reveal-right /
     reveal-left elements otherwise widen the page (e.g. 413px on a 390px
     phone), pushing the fixed bottom nav and FABs past the screen edge. */
  overflow-x:clip;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;}
button{
  font:inherit;cursor:pointer;border:none;background:none;color:inherit;
  -webkit-appearance:none;appearance:none;line-height:normal;text-align:inherit;
}
input,textarea,select{font:inherit;color:inherit;}
h1,h2,h3,h4{font-family:var(--font-head);font-weight:600;line-height:1.15;letter-spacing:-0.01em;}
.container{max-width:var(--container);margin:0 auto;padding:0 32px;}

.skip-link{
  position:absolute;left:-9999px;top:0;background:var(--gold-500);color:var(--paper-0);
  padding:12px 20px;z-index:9999;border-radius:0 0 8px 0;font-weight:600;
}
.skip-link:focus{left:0;}

/* ---------- Section Scaffolding ---------- */
section{position:relative;}
.section-eyebrow{
  display:flex;align-items:center;gap:10px;
  font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-500);margin-bottom:14px;
}
.section-eyebrow.light{color:var(--paper-0);}
.section-eyebrow.center{justify-content:center;}
.eyebrow-line{width:28px;height:2px;background:var(--gold-500);display:inline-block;}
.section-eyebrow.light .eyebrow-line{background:var(--navy-950);}

.section-title{font-size:clamp(28px,3.6vw,44px);color:var(--navy-900);margin-bottom:16px;}
.section-title.light{color:var(--paper-0);}
.section-sub{font-size:17px;color:var(--grey-500);max-width:560px;line-height:1.7;}
.section-sub.light{color:rgba(255,255,255,.85);}

.section-heading{
  display:flex;justify-content:space-between;align-items:flex-end;gap:24px;
  margin-bottom:56px;flex-wrap:wrap;
}
.section-heading.center{flex-direction:column;text-align:center;align-items:center;}
.section-heading.center .section-sub{max-width:620px;}
.section-heading.light .section-title,.section-heading.light .section-sub{color:var(--paper-0);}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:16px 30px;border-radius:100px;font-weight:600;font-size:15px;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),background .3s var(--ease),color .3s var(--ease);
  white-space:nowrap;
}
.btn i{font-size:13px;transition:transform .3s var(--ease);}
.btn:hover i{transform:translateX(3px);}
.btn-primary{background:linear-gradient(135deg,var(--gold-400),var(--gold-500));color:var(--paper-0);box-shadow:0 10px 30px rgba(179,46,20,.28);}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 16px 36px rgba(179,46,20,.38);}
.btn-outline{border:1.5px solid var(--navy-900);color:var(--navy-900);}
.btn-outline:hover{background:var(--gold-500);border-color:var(--gold-500);color:var(--paper-0);}
.btn-ghost{border:1.5px solid rgba(255,255,255,.35);color:var(--paper-0);backdrop-filter:blur(6px);}
.btn-ghost:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.6);}
.btn-lg{padding:18px 34px;font-size:16px;}
.btn-sm{padding:12px 22px;font-size:14px;}
.btn-block{width:100%;}

/* ==========================================================================
   TOP CONTACT BAR
   ========================================================================== */
.topbar{
  position:fixed;top:0;left:0;right:0;z-index:1001;
  height:var(--topbar-h);display:flex;align-items:center;
  background:var(--navy-950);color:rgba(255,255,255,.82);font-size:13px;
}
.topbar-inner{display:flex;align-items:center;justify-content:space-between;width:100%;gap:20px;}
.topbar-left{min-width:0;overflow:hidden;}
.topbar-left,.topbar-right{display:flex;align-items:center;gap:22px;}
.topbar-left span{display:flex;align-items:center;gap:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.topbar-right{flex-shrink:0;margin-left:auto;}
.topbar-group{display:flex;align-items:center;gap:8px;white-space:nowrap;}
.topbar-group a{transition:color .2s var(--ease);}
.topbar-group a:hover{color:var(--gold-400);}
.topbar-sep{color:rgba(255,255,255,.4);}
/* Full address must always fit (needs ~600px; phones+emails need ~615px).
   The strip may use more width than the page container on big screens,
   and on narrower laptops the SECOND email, then the SECOND phone, step
   aside (both stay in the footer and on the Contact page). */
.topbar .container{max-width:1440px;}
.topbar-alt{display:inline-flex;align-items:center;gap:8px;}
@media (max-width:1500px){ .topbar-alt-email{display:none;} }
@media (max-width:1200px){ .topbar-alt-phone{display:none;} }
.topbar i{color:var(--gold-500);font-size:12px;flex-shrink:0;}

/* ==========================================================================
   HEADER / NAVIGATION
   ========================================================================== */
.site-header{
  position:fixed;top:var(--topbar-h);left:0;right:0;z-index:1000;
  height:var(--nav-h);display:flex;flex-direction:column;justify-content:center;
  background:var(--paper-0);box-shadow:0 1px 0 rgba(10,18,32,.08);
  transition:box-shadow .35s var(--ease),height .35s var(--ease);
}
.site-header.scrolled{
  box-shadow:0 8px 30px rgba(10,18,32,.14);height:var(--nav-h-scrolled);
}
/* gap is a guaranteed minimum between brand/nav/actions — without it,
   justify-content:space-between can let them touch (or even overlap, once
   flex-shrink runs out of room to give) when the nav's own content width
   grows enough to nearly fill the container, as happened once a 9th link
   (Events) was added. justify-content still distributes any space left
   over beyond this minimum. */
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;width:100%;flex:1;}

/* Full legal name — centered strip under the logo/nav/actions row, on every page (shared header).
   Animated warm shimmer sweeps across the gradient-filled text; disabled for reduced-motion users. */
.header-companyline{
  text-align:center;font-family:'Oswald',var(--font-head),sans-serif;font-size:25px;font-weight:700;
  line-height:1.25;letter-spacing:.05em;text-transform:uppercase;padding:6px 12px 10px;
  white-space:normal;
  background:linear-gradient(90deg,var(--gold-500) 0%,var(--gold-300) 22%,var(--gold-500) 44%,var(--gold-500) 56%,var(--gold-300) 78%,var(--gold-500) 100%);
  background-size:250% auto;-webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
  animation:companyline-shimmer 7s linear infinite;
}
.site-header.scrolled .header-companyline{font-size:20px;padding:4px 12px 7px;}
/* Company name stays centered; social icons sit on the right. The right
   column never shrinks below the icons' width, so on narrower screens the
   name gives way slightly instead of the icons overflowing. */
.header-companyrow{
  display:grid;grid-template-columns:minmax(0,1fr) auto minmax(max-content,1fr);align-items:center;
  border-top:1px solid var(--line-100);padding:0 32px;
}
.header-companyrow .header-companyline{grid-column:2;}
.header-social{display:flex;align-items:center;gap:8px;}
.header-companyrow .header-social{grid-column:3;justify-self:end;}
.header-social a{
  width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:13px;color:var(--navy-950);background:var(--paper-50);border:1px solid var(--line-100);
  transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease),transform .25s var(--ease);
}
.header-social a:hover{background:var(--gold-500);border-color:var(--gold-500);color:var(--paper-0);transform:translateY(-2px);}
/* Official brand colours — each icon reads as the real platform logo.
   Shared by the header icons and the footer icons. */
:is(.header-social,.footer-social) a.social-facebook{background:#1877F2;border-color:#1877F2;color:#fff;}
:is(.header-social,.footer-social) a.social-instagram{background:radial-gradient(circle at 30% 107%,#fdf497 0%,#fdf497 5%,#fd5949 45%,#d6249f 60%,#285AEB 90%);border-color:transparent;color:#fff;}
:is(.header-social,.footer-social) a.social-linkedin{background:#0A66C2;border-color:#0A66C2;color:#fff;}
:is(.header-social,.footer-social) a.social-twitter{background:#000;border-color:#000;color:#fff;}
:is(.header-social,.footer-social) a.social-youtube{background:#FF0000;border-color:#FF0000;color:#fff;}
:is(.header-social,.footer-social) a[class^="social-"]:hover{filter:brightness(1.1);color:#fff;box-shadow:0 4px 10px rgba(0,0,0,.18);}
:is(.header-social,.footer-social) a.social-facebook i{font-size:1.15em;}
:is(.header-social,.footer-social) a.social-instagram i,:is(.header-social,.footer-social) a.social-youtube i{font-size:1.1em;}
/* X is black — a light ring keeps it visible on the dark footer. */
.footer-social a.social-twitter{border-color:rgba(255,255,255,.35);}
.site-header.scrolled .header-companyrow .header-social a{width:26px;height:26px;font-size:11.5px;}
.mobile-menu-social{gap:10px;margin-top:6px;}
.mobile-menu-social a{width:38px;height:38px;font-size:14px;background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.14);color:var(--paper-0);}
@keyframes companyline-shimmer{
  0%{background-position:0% 50%;}
  100%{background-position:250% 50%;}
}
@media (prefers-reduced-motion:reduce){
  .header-companyline{animation:none;background-position:0 0;}
}

.brand{display:flex;align-items:center;gap:12px;min-width:0;}
.brand-logo{
  height:78px;width:auto;display:block;background:#fff;padding:6px 12px;
  border-radius:10px;flex-shrink:0;
}
.brand-text{display:flex;flex-direction:column;justify-content:center;line-height:1.15;min-width:0;}
.brand-name{font-family:var(--font-head);font-weight:700;font-size:20px;color:var(--navy-900);letter-spacing:.01em;white-space:nowrap;}
.brand-sub{
  font-size:11px;color:var(--gold-500);letter-spacing:.03em;text-transform:uppercase;
  white-space:normal;line-height:1.35;word-break:break-word;
}
.brand-name.light,.brand-sub.light{color:var(--paper-0);}

.main-nav ul{display:flex;align-items:center;gap:2px;}
.main-nav > ul > li{position:relative;}
.main-nav > ul > li > a,
.dropdown-toggle{
  display:flex;align-items:center;gap:6px;
  padding:12px 13px;font-size:14.5px;font-weight:500;color:var(--navy-800);
  border-radius:100px;transition:background .25s var(--ease),color .25s var(--ease);
  white-space:nowrap;
}
.dropdown-toggle i{font-size:10px;transition:transform .25s var(--ease);}
.main-nav > ul > li > a:hover,.dropdown-toggle:hover{background:var(--paper-50);color:var(--gold-500);}
.main-nav > ul > li > a.active{color:var(--gold-500);}
.mobile-nav a.active{color:var(--gold-400);background:rgba(255,255,255,.06);}
.has-dropdown:hover .dropdown-toggle i{transform:rotate(180deg);}

.dropdown-panel{
  position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%) translateY(8px);
  min-width:280px;background:var(--paper-0);border-radius:var(--radius-md);
  box-shadow:var(--shadow-lg);padding:10px;opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .25s var(--ease),transform .25s var(--ease),visibility .25s;
  max-height:70vh;overflow-y:auto;
}
.has-dropdown:hover .dropdown-panel,.has-dropdown.open .dropdown-panel{
  opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0);
}
/* Backstop for the JS in navigation.js: while the pointer is over one menu,
   any other menu pinned open by a click stays hidden. */
.main-nav ul:has(> .has-dropdown:hover) > .has-dropdown.open:not(:hover) .dropdown-panel{
  opacity:0;visibility:hidden;pointer-events:none;transform:translateX(-50%) translateY(8px);
}
.main-nav ul:has(> .has-dropdown:hover) > .has-dropdown.open:not(:hover) .dropdown-toggle i{transform:none;}
.dropdown-panel-projects{min-width:380px;}
.dropdown-link{
  position:relative;display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:12px;
  color:var(--navy-800);font-size:14.5px;font-weight:500;line-height:1.35;
  transition:background .25s var(--ease),color .25s var(--ease),transform .25s var(--ease);
}
/* icon tile */
.dd-icon{
  width:36px;height:36px;flex-shrink:0;border-radius:10px;display:flex;align-items:center;justify-content:center;
  background:rgba(225,70,39,.09);color:var(--gold-500);font-size:15px;
  transition:background .3s var(--ease),color .3s var(--ease),transform .4s cubic-bezier(.34,1.56,.64,1),box-shadow .3s var(--ease);
}
.dd-icon i{transition:transform .4s cubic-bezier(.34,1.56,.64,1);}
.dd-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
.dd-text strong{font-weight:700;color:var(--navy-900);}
.dd-text small{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:500;color:var(--grey-500);}
.dd-go{font-size:12px;color:var(--gold-400);opacity:0;transform:translateX(-8px);transition:opacity .25s var(--ease),transform .25s var(--ease);}
/* hover / keyboard focus */
.dropdown-link:hover,.dropdown-link:focus-visible{background:linear-gradient(90deg,rgba(225,70,39,.07),rgba(225,70,39,.02));color:var(--gold-500);transform:translateX(4px);}
.dropdown-link:hover .dd-icon,.dropdown-link:focus-visible .dd-icon{
  background:linear-gradient(135deg,var(--gold-400),var(--gold-500));color:#fff;
  transform:rotate(-8deg) scale(1.08);box-shadow:0 8px 18px rgba(179,46,20,.32);
}
.dropdown-link:hover .dd-icon i{transform:rotate(8deg) scale(1.05);}
.dropdown-link:hover .dd-go,.dropdown-link:focus-visible .dd-go{opacity:1;transform:translateX(0);}
.dropdown-link:active .dd-icon{transform:scale(.92);}
.dropdown-link-all{padding:12px;margin-bottom:6px;border-bottom:1px solid var(--line-100);border-radius:12px;}
.dropdown-link-all .dd-icon{background:var(--navy-950);color:#fff;}
.dropdown-link-all:hover .dd-icon{background:linear-gradient(135deg,var(--gold-400),var(--gold-500));}
/* status dot under each project name */
.dd-status{width:7px;height:7px;border-radius:50%;flex-shrink:0;}
.dd-status.is-completed{background:#1f9d55;}
.dd-status.is-ongoing{background:#e8930c;box-shadow:0 0 0 0 rgba(232,147,12,.5);animation:ddPulse 1.8s ease-out infinite;}
@keyframes ddPulse{0%{box-shadow:0 0 0 0 rgba(232,147,12,.55);}80%,100%{box-shadow:0 0 0 6px rgba(232,147,12,0);}}
/* Ongoing / Completed quick filters */
.dropdown-quick{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:4px 2px 8px;}
.dd-chip{
  display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:12px;font-size:13.5px;font-weight:600;
  border:1px solid var(--line-100);color:var(--navy-800);transition:all .25s var(--ease);
}
.dd-chip i{font-size:14px;transition:transform .35s cubic-bezier(.34,1.56,.64,1);}
.dd-chip em{margin-left:auto;font-style:normal;font-size:12px;min-width:24px;height:22px;padding:0 7px;border-radius:11px;display:inline-flex;align-items:center;justify-content:center;background:var(--paper-50);}
.dd-chip-ongoing i{color:#e8930c;}
.dd-chip-completed i{color:#1f9d55;}
.dd-chip:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(10,18,32,.08);}
.dd-chip:hover i{transform:scale(1.2) rotate(-10deg);}
.dd-chip-ongoing:hover{border-color:#e8930c;background:#fff7ea;}
.dd-chip-completed:hover{border-color:#1f9d55;background:#ebf8f0;}
.dropdown-label{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--grey-400);padding:8px 12px 4px;}
/* staggered entrance when a dropdown opens — a transition (not a keyframe
   animation) on the separate `translate` property, so it never fights the
   hover `transform` nudge and items can't get stuck mid-animation. The
   delay is only set while open, so closing fades everything at once. */
.dropdown-panel > *{opacity:0;translate:0 6px;}
.dropdown-panel > .dropdown-link{transition:opacity .3s var(--ease) var(--dd-d,0s),translate .3s var(--ease) var(--dd-d,0s),background .25s var(--ease),color .25s var(--ease),transform .25s var(--ease);}
.dropdown-panel > :not(.dropdown-link){transition:opacity .3s var(--ease) var(--dd-d,0s),translate .3s var(--ease) var(--dd-d,0s);}
.has-dropdown:hover .dropdown-panel > *,.has-dropdown.open .dropdown-panel > *,.has-dropdown:focus-within .dropdown-panel > *{opacity:1;translate:0 0;}
.has-dropdown:hover .dropdown-panel > :nth-child(2),.has-dropdown.open .dropdown-panel > :nth-child(2){--dd-d:.03s;}
.has-dropdown:hover .dropdown-panel > :nth-child(3),.has-dropdown.open .dropdown-panel > :nth-child(3){--dd-d:.06s;}
.has-dropdown:hover .dropdown-panel > :nth-child(4),.has-dropdown.open .dropdown-panel > :nth-child(4){--dd-d:.09s;}
.has-dropdown:hover .dropdown-panel > :nth-child(5),.has-dropdown.open .dropdown-panel > :nth-child(5){--dd-d:.12s;}
.has-dropdown:hover .dropdown-panel > :nth-child(6),.has-dropdown.open .dropdown-panel > :nth-child(6){--dd-d:.15s;}
.has-dropdown:hover .dropdown-panel > :nth-child(7),.has-dropdown.open .dropdown-panel > :nth-child(7){--dd-d:.18s;}
.has-dropdown:hover .dropdown-panel > :nth-child(n+8),.has-dropdown.open .dropdown-panel > :nth-child(n+8){--dd-d:.21s;}
@media (prefers-reduced-motion:reduce){
  .dd-status.is-ongoing{animation:none !important;}
  .dropdown-panel > *{translate:none !important;transition:opacity .15s !important;}
  .dropdown-link,.dd-icon,.dd-icon i,.dd-chip,.dd-chip i{transition:none;}
  .dropdown-link:hover{transform:none;}
}

.header-actions{display:flex;align-items:center;gap:14px;}
.header-cta{white-space:nowrap;}
.menu-btn{
  display:none;width:44px;height:44px;border-radius:50%;align-items:center;justify-content:center;
  color:var(--navy-900);font-size:18px;background:var(--paper-100);
}

/* ---------- Mobile off-canvas menu ---------- */
.mobile-menu{
  position:fixed;top:0;right:0;bottom:0;width:min(400px,88vw);background:var(--navy-950);
  z-index:1200;transform:translateX(100%);visibility:hidden;
  transition:transform .4s var(--ease),visibility .4s;
  padding:26px 26px 34px;overflow-y:auto;display:flex;flex-direction:column;gap:22px;
}
/* visibility:hidden (in addition to the transform) keeps the closed panel
   from ever being able to expand the page's horizontal scroll bounds —
   some mobile browsers don't fully exclude an off-screen fixed element
   from document scrollWidth based on transform alone. */
.mobile-menu.open{transform:translateX(0);visibility:visible;}
.mobile-menu-backdrop{
  position:fixed;inset:0;background:rgba(5,10,19,.6);backdrop-filter:blur(4px);
  z-index:1150;opacity:0;visibility:hidden;transition:opacity .35s var(--ease),visibility .35s;
}
.mobile-menu-backdrop.open{opacity:1;visibility:visible;}
.mobile-menu-header{display:flex;align-items:center;justify-content:space-between;}
.menu-close-btn{width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.08);color:var(--paper-0);display:flex;align-items:center;justify-content:center;}

.mobile-nav{display:flex;flex-direction:column;gap:4px;}
.mobile-nav a,.mobile-accordion-toggle{
  display:flex;align-items:center;gap:14px;padding:15px 12px;color:rgba(255,255,255,.9);
  font-size:15.5px;font-weight:500;border-radius:12px;justify-content:flex-start;
}
.mobile-accordion-toggle{width:100%;justify-content:space-between;}
.mobile-accordion-toggle i:first-child{width:20px;}
.mobile-nav a i,.mobile-accordion-toggle > span > i{width:20px;color:var(--gold-400);}
.mobile-nav a:active,.mobile-accordion-toggle:active{background:rgba(255,255,255,.06);}
.mobile-accordion-toggle .fa-chevron-down{margin-left:auto;transition:transform .3s var(--ease);font-size:12px;}
.mobile-accordion-toggle.open .fa-chevron-down{transform:rotate(180deg);}
.mobile-accordion{max-height:0;overflow:hidden;transition:max-height .35s var(--ease);padding-left:20px;}
.mobile-accordion a{padding:12px;font-size:14.5px;color:rgba(255,255,255,.72);gap:12px;align-items:flex-start;line-height:1.4;}
.mobile-accordion a i{width:16px;margin-top:3px;font-size:13px;color:var(--gold-300);opacity:.85;flex-shrink:0;transition:transform .3s cubic-bezier(.34,1.56,.64,1);}
.mobile-accordion a:active{background:rgba(255,255,255,.06);color:#fff;}
.mobile-accordion a:active i{transform:scale(1.25) rotate(-10deg);}
.mobile-menu-contact{display:flex;flex-direction:column;gap:10px;padding-top:14px;border-top:1px solid rgba(255,255,255,.1);}
.mobile-menu-contact a{display:flex;align-items:center;gap:10px;color:rgba(255,255,255,.75);font-size:14px;}
.mobile-menu-contact i{color:var(--gold-400);}

/* ---------- Breadcrumb (every inner page's hero — was only in about.css,
   leaving it unstyled dark text on the other 9 pages) ---------- */
.breadcrumb{
  display:flex;align-items:center;gap:10px;font-size:13px;font-weight:600;
  color:rgba(255,255,255,.75);letter-spacing:.03em;text-shadow:0 1px 8px rgba(5,10,19,.5);
}
.breadcrumb a{color:rgba(255,255,255,.85);}
.breadcrumb a:hover{color:var(--gold-400);}
.breadcrumb i{font-size:10px;color:var(--gold-400);}
.breadcrumb .current{color:var(--gold-400);}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:center;
  overflow:hidden;background:var(--navy-950);
}
.hero-slider{position:absolute;inset:0;z-index:0;}
.hero-slide{
  position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity 1.1s var(--ease),visibility 1.1s;
}
.hero-slide.active{opacity:1;visibility:visible;z-index:1;}
/* YouTube background video: iframes don't support object-fit, so this is
   the standard "fill and crop" trick — oversize on whichever axis is
   needed (16:9 math) and center it, like background-size:cover. Wrapped in
   a pointer-events:none layer so the embed is never actually clickable —
   nothing can pause it, it just plays continuously behind the content. */
.hero-video-wrap{position:absolute;inset:0;overflow:hidden;pointer-events:none;}
.hero-video{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:100vw;height:56.25vw; /* 16:9 */
  min-height:100vh;min-width:177.78vh; /* 16:9, ensures full cover on tall viewports */
  border:0;
}
.hero-overlay{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(5,10,19,.08) 0%,rgba(5,10,19,.05) 55%,rgba(5,10,19,.5) 100%);
}
.hero-content{position:relative;z-index:2;padding-top:calc(var(--header-h) + 28px);padding-bottom:44px;}
.hero-text{transition:opacity .4s var(--ease),transform .4s var(--ease);}
.hero-text.fading{opacity:0;transform:translateY(14px);}
.hero-eyebrow{
  display:flex;align-items:center;gap:12px;color:var(--gold-300);font-weight:600;
  font-size:13.5px;letter-spacing:.16em;text-transform:uppercase;margin-bottom:18px;
}
.hero-eyebrow .eyebrow-line{width:36px;background:var(--gold-300);}
.hero-headline{
  font-size:clamp(34px,5.6vw,72px);color:var(--paper-0);max-width:920px;margin-bottom:18px;
  font-weight:600;
}
.hero-headline span{color:var(--gold-400);font-style:italic;font-weight:500;}
.hero-sub{font-size:clamp(15px,1.5vw,18px);color:rgba(255,255,255,.78);max-width:600px;margin-bottom:26px;line-height:1.7;}
.hero-ctas{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:34px;}

.hero-stats{display:flex;gap:0;flex-wrap:wrap;border-top:1px solid rgba(255,255,255,.16);padding-top:20px;max-width:760px;}
.hero-stat{flex:1;min-width:140px;padding-right:28px;}
.hero-stat .counter,.hero-stat .stat-suffix{font-family:var(--font-head);font-size:clamp(26px,3vw,36px);color:var(--paper-0);font-weight:700;}
.hero-stat .stat-suffix{color:var(--gold-400);}
.hero-stat p{font-size:13px;color:rgba(255,255,255,.62);margin-top:4px;letter-spacing:.02em;}

.scroll-indicator{
  position:absolute;bottom:28px;left:50%;transform:translateX(-50%);z-index:2;
  display:flex;flex-direction:column;align-items:center;gap:8px;color:rgba(255,255,255,.7);
  font-size:11px;letter-spacing:.12em;text-transform:uppercase;
}
.scroll-indicator i{animation:bounceDown 2s infinite;}
@keyframes bounceDown{0%,100%{transform:translateY(0);opacity:.6;}50%{transform:translateY(7px);opacity:1;}}

.hero-slider-controls{
  position:absolute;left:32px;bottom:34px;z-index:3;
  display:flex;align-items:center;gap:16px;
}
.hero-arrow{
  width:42px;height:42px;border-radius:50%;flex-shrink:0;
  border:1.5px solid rgba(255,255,255,.3);color:var(--paper-0);
  display:flex;align-items:center;justify-content:center;font-size:14px;
  background:rgba(255,255,255,.06);backdrop-filter:blur(6px);
  transition:background .25s var(--ease),border-color .25s var(--ease),transform .25s var(--ease);
}
.hero-arrow:hover{background:var(--gold-500);border-color:var(--gold-500);color:var(--paper-0);transform:translateY(-2px);}
.hero-dots{display:flex;align-items:center;gap:9px;}
.hero-dot{
  width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.35);
  transition:width .3s var(--ease),background .3s var(--ease);
}
.hero-dot:hover{background:rgba(255,255,255,.6);}
.hero-dot.active{width:26px;border-radius:5px;background:var(--gold-400);}

/* ==========================================================================
   TRUST / STATS BAR
   ========================================================================== */
.trust-bar{background:var(--gold-500);padding:26px 0;}
.trust-bar-inner{display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap;}
.trust-bar-label{color:rgba(255,255,255,.85);font-size:14px;max-width:420px;line-height:1.6;display:flex;gap:10px;}
.trust-bar-label i{color:var(--paper-0);margin-top:3px;flex-shrink:0;}
.trust-bar-stats{display:flex;gap:40px;flex-wrap:wrap;}
.trust-stat{display:flex;flex-direction:column;}
.trust-stat strong{font-family:var(--font-head);font-size:26px;color:var(--paper-0);}
.trust-stat span{font-size:12px;color:rgba(255,255,255,.8);}

/* ==========================================================================
   ABOUT
   ========================================================================== */
.about{padding:120px 0;background:var(--paper-0);}
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;}
.about-media{position:relative;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lg);}
.about-media img{width:100%;height:560px;object-fit:cover;}
.about-media-badge{
  position:absolute;left:28px;bottom:28px;background:rgba(10,18,32,.88);backdrop-filter:blur(10px);
  color:var(--paper-0);padding:22px 26px;border-radius:var(--radius-md);max-width:230px;
  border:1px solid rgba(255,255,255,.1);
}
.about-media-badge .counter,.about-media-badge .stat-suffix{font-family:var(--font-head);font-size:32px;font-weight:700;}
.about-media-badge .stat-suffix{color:var(--gold-400);}
.about-media-badge p{font-size:12.5px;color:var(--grey-300);margin-top:6px;line-height:1.5;}

.about-paragraph{color:var(--grey-500);font-size:16px;margin-bottom:18px;line-height:1.8;}
.about-badges{display:flex;flex-wrap:wrap;gap:12px;margin:26px 0 34px;}
.about-badge{
  display:flex;align-items:center;gap:8px;padding:9px 16px;border-radius:100px;
  background:var(--paper-50);border:1px solid var(--line-100);font-size:13px;font-weight:600;color:var(--navy-800);
}
.about-badge i{color:var(--gold-500);font-size:11px;}

/* ==========================================================================
   SERVICES
   ========================================================================== */
.services{padding:120px 0;background:var(--paper-50);}
.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;}
.service-card{
  background:var(--paper-0);border-radius:var(--radius-lg);overflow:hidden;
  box-shadow:var(--shadow-sm);transition:transform .4s var(--ease),box-shadow .4s var(--ease);
  scroll-margin-top:calc(var(--header-h) + 20px);
}
.service-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-lg);}
.service-card-media{position:relative;height:220px;overflow:hidden;}
.service-card-media img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease);}
.service-card:hover .service-card-media img{transform:scale(1.08);}
.service-card-media::after{
  content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,18,32,0) 40%,rgba(10,18,32,.5) 100%);
}
.service-card-icon{
  position:absolute;right:20px;bottom:-24px;width:56px;height:56px;border-radius:16px;
  background:linear-gradient(135deg,var(--gold-400),var(--gold-500));display:flex;align-items:center;justify-content:center;
  font-size:22px;color:var(--paper-0);box-shadow:0 10px 24px rgba(179,46,20,.4);z-index:1;
}
.service-card-body{padding:40px 26px 30px;}
.service-card-body h3{font-size:20px;color:var(--navy-900);margin-bottom:12px;}
.service-card-body p{font-size:14.5px;color:var(--grey-500);line-height:1.7;margin-bottom:20px;}
.service-card-link{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:700;color:var(--navy-900);}
.service-card-link i{font-size:12px;color:var(--gold-500);transition:transform .3s var(--ease);}
.service-card-link:hover i{transform:translateX(4px);}

/* ==========================================================================
   INFRASTRUCTURE SHOWCASE
   ========================================================================== */
.showcase{padding:120px 0 0;background:var(--paper-100);overflow:hidden;}
.showcase .container{padding-bottom:60px;}
.showcase-strip{display:flex;gap:20px;padding:0 32px 120px;overflow-x:auto;scroll-snap-type:x proximity;}
.showcase-strip::-webkit-scrollbar{display:none;}
.showcase-item{
  flex:0 0 340px;height:440px;border-radius:var(--radius-lg);overflow:hidden;scroll-snap-align:start;
  position:relative;
}
.showcase-item:nth-child(even){margin-top:60px;}
.showcase-item img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease);}
.showcase-item:hover img{transform:scale(1.06);}

/* ==========================================================================
   PROJECTS
   ========================================================================== */
.projects{padding:120px 0;background:var(--paper-0);}
.project-filters{display:flex;gap:10px;}
.filter-btn{
  padding:10px 20px;border-radius:100px;font-size:13.5px;font-weight:600;color:var(--grey-500);
  border:1px solid var(--line-100);transition:all .25s var(--ease);
}
.filter-btn:hover{border-color:var(--gold-500);color:var(--navy-900);}
.filter-btn.active{background:var(--gold-500);border-color:var(--gold-500);color:var(--paper-0);}

.projects-track{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;}
.project-card{
  border-radius:var(--radius-lg);overflow:hidden;background:var(--paper-0);box-shadow:var(--shadow-sm);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease);
}
.project-card.hidden-card{display:none;}
.project-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);}
.project-card-media{display:block;position:relative;height:260px;overflow:hidden;}
.project-card-media img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease);}
.project-card:hover .project-card-media img{transform:scale(1.08);}
.project-status{
  position:absolute;top:16px;left:16px;padding:7px 14px;border-radius:100px;font-size:11.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.04em;backdrop-filter:blur(6px);
}
.status-ongoing{background:rgba(179,46,20,.9);color:var(--paper-0);}
.status-completed{background:rgba(255,255,255,.92);color:var(--navy-900);}
.project-card-body{padding:26px;}
.project-category{font-size:12px;font-weight:700;color:var(--gold-500);text-transform:uppercase;letter-spacing:.06em;}
.project-card-body h3{font-size:19px;color:var(--navy-900);margin:10px 0 8px;}
.project-location{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--grey-500);margin-bottom:18px;}
.project-location i{color:var(--gold-500);}
.project-card-link{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:700;color:var(--navy-900);}
.project-card-link i{font-size:12px;color:var(--gold-500);transition:transform .3s var(--ease);}
.project-card-link:hover i{transform:translateX(4px);}

/* ==========================================================================
   WHY CHOOSE
   ========================================================================== */
.why-choose{padding:120px 0;background:var(--paper-50);}
.why-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:70px;align-items:center;}
.why-content .section-sub{margin-bottom:32px;}
.why-list{display:flex;flex-direction:column;gap:6px;}
.why-item{
  display:flex;gap:20px;padding:24px;border-radius:var(--radius-md);
  transition:background .3s var(--ease);
}
.why-item:hover{background:var(--paper-0);box-shadow:var(--shadow-sm);}
.why-item-icon{
  flex-shrink:0;width:52px;height:52px;border-radius:14px;background:var(--navy-900);
  display:flex;align-items:center;justify-content:center;color:var(--gold-400);font-size:20px;
}
.why-item h3{font-size:17px;color:var(--navy-900);margin-bottom:6px;}
.why-item p{font-size:14px;color:var(--grey-500);line-height:1.65;}

/* ==========================================================================
   TEAM
   ========================================================================== */
.team{padding:120px 0;background:var(--paper-0);}
.team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;}
.team-card{border-radius:var(--radius-lg);overflow:hidden;background:var(--paper-50);transition:transform .4s var(--ease),box-shadow .4s var(--ease);}
.team-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);}
.team-card-media{position:relative;height:320px;overflow:hidden;}
.team-card-media img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease);}
.team-card:hover .team-card-media img{transform:scale(1.06);}
.team-card-social{
  position:absolute;bottom:-50px;left:0;right:0;display:flex;justify-content:center;gap:10px;
  padding:16px;transition:bottom .35s var(--ease);
}
.team-card:hover .team-card-social{bottom:0;}
.team-card-social::before{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(10,18,32,.85),transparent);z-index:0;}
.team-card-social a{
  position:relative;z-index:1;width:36px;height:36px;border-radius:50%;background:var(--paper-0);
  display:flex;align-items:center;justify-content:center;color:var(--navy-900);font-size:14px;
  transition:background .25s,color .25s;
}
.team-card-social a:hover{background:var(--gold-500);color:var(--paper-0);}
.team-card-body{padding:24px;}
.team-card-body h3{font-size:18px;color:var(--navy-900);margin-bottom:4px;}
.team-role{font-size:13.5px;color:var(--grey-500);margin-bottom:12px;}
.team-expertise{
  display:inline-block;font-size:11.5px;font-weight:700;color:var(--gold-500);text-transform:uppercase;
  letter-spacing:.05em;padding:6px 12px;border:1px solid var(--line-100);border-radius:100px;
}

/* ==========================================================================
   CLIENTS / MARQUEE
   ========================================================================== */
.clients{padding:100px 0;background:var(--paper-50);}
.clients-view-all{text-align:center;margin-top:44px;}
.marquee{width:100%;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);}
.marquee-track{display:flex;gap:16px;width:max-content;animation:marqueeScroll 34s linear infinite;}
.marquee:hover .marquee-track{animation-play-state:paused;}
.marquee-item{
  /* Sized so exactly 7 logos sit in the visible (full-bleed) width on desktop:
     7 items + 6 x 16px gaps = 100vw. Tablet/mobile show fewer — see responsive.css. */
  --mq-size:clamp(64px,calc((100vw - 96px) / 7),140px);
  width:var(--mq-size);height:var(--mq-size);flex-shrink:0;background:var(--navy-900);
  border-radius:var(--radius-md);
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  color:var(--gold-400);font-family:var(--font-head);font-size:calc(var(--mq-size) * .22);font-weight:700;letter-spacing:.02em;
}
.marquee-item img{width:100%;height:100%;object-fit:contain;padding:16%;}
.marquee-item.has-logo{background:var(--paper-0);border:1px solid var(--line-100);}
.marquee-item.has-logo img{padding:12%;}
@keyframes marqueeScroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}


/* ==========================================================================
   BLOGS
   ========================================================================== */
.blogs{padding:120px 0;background:var(--paper-0);}
.blogs-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;}
.blog-card{border-radius:var(--radius-lg);overflow:hidden;background:var(--paper-50);transition:transform .4s var(--ease),box-shadow .4s var(--ease);}
.blog-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);}
.blog-card-media{display:block;position:relative;height:220px;overflow:hidden;}
.blog-card-media img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease);}
.blog-card:hover .blog-card-media img{transform:scale(1.08);}
.blog-category{
  position:absolute;top:16px;left:16px;background:var(--gold-500);color:var(--paper-0);
  padding:6px 14px;border-radius:100px;font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;
}
.blog-card-body{padding:26px;}
.blog-date{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--grey-400);margin-bottom:12px;}
.blog-card-body h3{font-size:18px;color:var(--navy-900);margin-bottom:10px;line-height:1.4;}
.blog-card-body p{font-size:14px;color:var(--grey-500);line-height:1.7;margin-bottom:18px;}
.blog-card-link{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:700;color:var(--navy-900);}
.blog-card-link i{font-size:12px;color:var(--gold-500);transition:transform .3s var(--ease);}
.blog-card-link:hover i{transform:translateX(4px);}

/* ==========================================================================
   CONTACT
   ========================================================================== */
.contact{
  padding:120px 0;position:relative;
  background:linear-gradient(135deg,var(--gold-400) 0%,var(--gold-500) 100%);
}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:70px;position:relative;z-index:1;}
.contact-details{margin-top:40px;display:flex;flex-direction:column;gap:26px;}
.contact-details li{display:flex;gap:18px;align-items:flex-start;}
.contact-icon{
  width:52px;height:52px;flex-shrink:0;border-radius:14px;
  background:var(--navy-950);
  display:flex;align-items:center;justify-content:center;color:var(--paper-0);font-size:19px;
  box-shadow:0 10px 22px rgba(3,20,40,.35);
}
.contact-details span{display:block;font-size:12px;color:rgba(255,255,255,.85);text-transform:uppercase;letter-spacing:.06em;margin-bottom:4px;}
.contact-details a,.contact-details p{display:block;color:var(--paper-0);font-size:15px;font-weight:500;}
.contact-details a:hover{text-decoration:underline;text-decoration-color:var(--navy-950);text-underline-offset:3px;}

.contact-form-wrap{
  background:var(--paper-0);border-radius:var(--radius-lg);padding:44px;
  box-shadow:0 30px 70px rgba(3,20,40,.35);position:relative;overflow:hidden;z-index:1;
}
.contact-form-wrap::before{
  content:"";position:absolute;top:0;left:0;right:0;height:5px;
  background:linear-gradient(90deg,var(--navy-950),var(--gold-400));
}
.contact-form h3{font-size:22px;color:var(--navy-900);margin-bottom:26px;}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.form-field{margin-bottom:18px;}
.form-field label{display:block;font-size:13px;font-weight:600;color:var(--navy-800);margin-bottom:8px;}
.form-field input,.form-field select,.form-field textarea{
  width:100%;padding:13px 16px;border:1.5px solid var(--line-100);border-radius:10px;font-size:14.5px;
  background:var(--paper-50);transition:border-color .25s,background .25s;resize:vertical;
}
.form-field input:focus,.form-field select:focus,.form-field textarea:focus{
  outline:none;border-color:var(--gold-500);background:var(--paper-0);
}
.form-msg{margin-top:14px;font-size:13.5px;font-weight:600;min-height:18px;}
.form-msg.success{color:#1c7a4b;}
.form-msg.error{color:#c0392b;}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer{background:var(--navy-950);color:rgba(255,255,255,.7);}
.footer-top{padding:90px 0 60px;border-bottom:1px solid rgba(255,255,255,.08);}
.footer-grid{display:grid;grid-template-columns:1.4fr .8fr .9fr 1.1fr;gap:50px;}
.footer-companyline{
  font-family:'Oswald',var(--font-head),sans-serif;font-size:19px;font-weight:700;
  letter-spacing:.03em;text-transform:uppercase;color:var(--paper-0);
  margin-top:16px;line-height:1.3;max-width:340px;
}
.footer-desc{font-size:14px;line-height:1.75;margin:14px 0 26px;color:rgba(255,255,255,.55);max-width:340px;}
.footer-social{display:flex;flex-wrap:wrap;gap:12px;}
.footer-social a{
  width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.06);display:flex;align-items:center;
  justify-content:center;color:var(--paper-0);transition:background .25s,color .25s,transform .25s;
  border:1px solid rgba(255,255,255,.1);
}
.footer-social a:hover{transform:translateY(-3px);}
.footer-social a:not([class^="social-"]):hover{background:var(--gold-500);color:var(--paper-0);}
.footer-col h4{color:var(--paper-0);font-size:15px;margin-bottom:22px;letter-spacing:.02em;}
.footer-col ul{display:flex;flex-direction:column;gap:12px;}
.footer-col ul a{font-size:14px;color:rgba(255,255,255,.6);transition:color .2s,padding-left .2s;}
.footer-col ul a:hover{color:var(--gold-400);padding-left:4px;}
.footer-contact-list{margin-bottom:28px;}
.footer-contact-list li{display:flex;gap:12px;align-items:flex-start;font-size:13.5px;line-height:1.6;margin-bottom:14px;color:rgba(255,255,255,.6);}
.footer-contact-list i{color:var(--gold-400);margin-top:3px;width:16px;flex-shrink:0;}
.footer-contact-list a{color:rgba(255,255,255,.6);}
.footer-contact-list a:hover{color:var(--gold-400);}

.newsletter-form label{display:block;font-size:13px;font-weight:600;color:var(--paper-0);margin-bottom:10px;}
.newsletter-input{display:flex;border-radius:100px;overflow:hidden;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);}
.newsletter-input input{flex:1;background:transparent;border:none;padding:13px 18px;color:var(--paper-0);font-size:13.5px;}
.newsletter-input input::placeholder{color:rgba(255,255,255,.4);}
.newsletter-input input:focus{outline:none;}
.newsletter-input button{
  width:46px;background:var(--gold-500);color:var(--paper-0);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;transition:background .25s;
}
.newsletter-input button:hover{background:var(--gold-400);}
.newsletter-msg{margin-top:10px;font-size:12.5px;font-weight:600;color:var(--gold-400);min-height:16px;}

.visitor-counter{border-top:1px solid rgba(255,255,255,.08);padding:18px 0;}
.visitor-counter-inner{
  display:flex;align-items:center;justify-content:center;gap:10px;
  font-size:13px;color:rgba(255,255,255,.55);
}
.visitor-counter-inner i{color:var(--gold-400);font-size:13px;}
.visitor-counter-inner .counter{
  font-family:var(--font-head);font-weight:700;font-size:15px;color:var(--paper-0);
}
.visitor-counter-label{letter-spacing:.02em;}

.footer-bottom{padding:24px 0;}
.footer-bottom-inner{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:13px;color:rgba(255,255,255,.45);}

/* ==========================================================================
   FLOATING ACTIONS / SCROLL TOP / BOTTOM NAV (base — mobile specifics in responsive.css)
   ========================================================================== */
.floating-actions{position:fixed;right:26px;bottom:32px;z-index:900;display:flex;flex-direction:column;gap:14px;}
.fab{
  width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:24px;color:var(--paper-0);box-shadow:var(--shadow-md);transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.fab:hover{transform:translateY(-4px) scale(1.05);}
.fab-whatsapp{background:#25D366;}
.fab-call{background:var(--navy-800);font-size:20px;}
.fab-call::after{content:"";position:absolute;}

.scroll-top-btn{
  position:fixed;left:26px;bottom:32px;width:48px;height:48px;border-radius:50%;background:var(--navy-900);
  color:var(--paper-0);display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-md);
  z-index:900;opacity:0;visibility:hidden;transform:translateY(12px);transition:all .35s var(--ease);
}
.scroll-top-btn.visible{opacity:1;visibility:visible;transform:translateY(0);}
.scroll-top-btn:hover{background:var(--gold-500);color:var(--paper-0);}

.bottom-nav{display:none;}

/* ==========================================================================
   PHOTO GALLERY (shared — uniform square tiles, zoom-on-hover, opens in
   .gallery-lightbox on click. Used by the About page's working-environment
   gallery and the Events page's per-event showcases.)
   ========================================================================== */
.photo-gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
.photo-gallery-item{
  position:relative;border-radius:16px;overflow:hidden;box-shadow:var(--shadow-sm);
  aspect-ratio:1/1;cursor:zoom-in;
}
.photo-gallery-item img{width:100%;height:100%;object-fit:cover;transition:transform .55s var(--ease);}
.photo-gallery-item::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(0deg,rgba(5,10,19,.65) 0%,rgba(5,10,19,0) 55%);
  opacity:0;transition:opacity .4s var(--ease);
}
.photo-gallery-zoom{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(.6);
  width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.95);color:var(--navy-900);
  display:flex;align-items:center;justify-content:center;font-size:15px;
  opacity:0;transition:opacity .35s var(--ease),transform .35s var(--ease);z-index:1;
}
.photo-gallery-item:hover img{transform:scale(1.15);}
.photo-gallery-item:hover::after{opacity:1;}
.photo-gallery-item:hover .photo-gallery-zoom{opacity:1;transform:translate(-50%,-50%) scale(1);}

/* ==========================================================================
   GALLERY LIGHTBOX (shared — used by any page whose JS builds a
   .gallery-lightbox, e.g. project galleries, the about-page photo gallery)
   ========================================================================== */
.gallery-lightbox{
  position:fixed;inset:0;background:rgba(5,10,19,.95);z-index:2000;display:flex;align-items:center;justify-content:center;
  opacity:0;visibility:hidden;transition:opacity .3s var(--ease),visibility .3s;padding:40px;
}
.gallery-lightbox.open{opacity:1;visibility:visible;}
.gallery-lightbox img{max-width:100%;max-height:85vh;border-radius:8px;box-shadow:0 20px 60px rgba(0,0,0,.5);}
.gallery-lightbox-close{
  position:absolute;top:24px;right:24px;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.1);
  color:#fff;display:flex;align-items:center;justify-content:center;font-size:18px;
}
.gallery-lightbox-nav{
  position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;border-radius:50%;
  background:rgba(255,255,255,.1);color:#fff;display:flex;align-items:center;justify-content:center;font-size:18px;
}
.gallery-lightbox-prev{left:24px;}
.gallery-lightbox-next{right:24px;}
.gallery-lightbox-nav:hover,.gallery-lightbox-close:hover{background:var(--gold-500);color:var(--paper-0);}

/* ==========================================================================
   SCROLL REVEAL (JS toggles .in-view)
   ========================================================================== */
[data-reveal]{opacity:0;transform:translateY(28px);transition:opacity .7s var(--ease),transform .7s var(--ease);}
[data-reveal].in-view{opacity:1;transform:translateY(0);}
.reveal-left[data-reveal]{transform:translateX(-40px);}
.reveal-left[data-reveal].in-view{transform:translateX(0);}
.reveal-right[data-reveal]{transform:translateX(40px);}
.reveal-right[data-reveal].in-view{transform:translateX(0);}

@media (prefers-reduced-motion: reduce){
  [data-reveal]{opacity:1 !important;transform:none !important;transition:none !important;}
  .marquee-track{animation:none;}
  .scroll-indicator i{animation:none;}
  html{scroll-behavior:auto;}
}

/* ==========================================================================
   PROMO POPUP (admin → Popups; markup in includes/footer.php, js/popup.js)
   Sits above the fixed header, bottom nav (1000) and floating buttons.
   ========================================================================== */
.site-popup{position:fixed;inset:0;z-index:2000;display:flex;align-items:center;justify-content:center;padding:24px;}
.site-popup[hidden]{display:none;}
.site-popup-backdrop{position:absolute;inset:0;background:rgba(5,10,19,.62);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);opacity:0;transition:opacity .3s var(--ease);}
.site-popup-box{
  position:relative;width:100%;max-width:720px;max-height:calc(100svh - 48px);overflow:auto;
  background:var(--paper-0);border-radius:var(--radius-lg);box-shadow:0 30px 80px rgba(5,10,19,.45);
  opacity:0;transform:translateY(18px) scale(.96);transition:opacity .3s var(--ease),transform .35s cubic-bezier(.34,1.4,.64,1);
}
.site-popup.is-open .site-popup-backdrop{opacity:1;}
.site-popup.is-open .site-popup-box{opacity:1;transform:none;}
.site-popup-textonly .site-popup-box{max-width:520px;}
.site-popup-media{display:block;line-height:0;}
.site-popup-media img{width:100%;height:auto;max-height:70svh;object-fit:contain;background:var(--paper-50);}
.site-popup-body{padding:26px 30px 30px;text-align:center;}
.site-popup-textonly .site-popup-body{padding:44px 34px 36px;}
.site-popup-title{font-size:clamp(20px,2.4vw,28px);color:var(--navy-900);line-height:1.25;margin-bottom:8px;}
.site-popup-text{color:var(--grey-500);font-size:15px;line-height:1.65;max-width:520px;margin:0 auto;}
.site-popup-btn{margin-top:18px;}
.site-popup-close{
  position:absolute;top:12px;right:12px;z-index:2;width:38px;height:38px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:17px;
  background:rgba(255,255,255,.92);color:var(--navy-900);box-shadow:0 4px 14px rgba(0,0,0,.2);
  transition:transform .25s var(--ease),background .25s var(--ease);
}
.site-popup-close:hover{transform:rotate(90deg);background:var(--paper-0);}
.site-popup-close:focus-visible{outline:3px solid var(--gold-400);outline-offset:2px;}
html.popup-open{overflow:hidden;}

@media (max-width:640px){
  .site-popup{padding:16px;}
  .site-popup-box{max-height:calc(100svh - 32px);border-radius:var(--radius-md);}
  .site-popup-media img{max-height:68svh;}
  .site-popup-body{padding:20px 20px 24px;}
  .site-popup-textonly .site-popup-body{padding:40px 22px 26px;}
  .site-popup-text{font-size:14px;}
  .site-popup-btn{width:100%;justify-content:center;}
  .site-popup-close{top:8px;right:8px;width:36px;height:36px;}
}
@media (prefers-reduced-motion:reduce){
  .site-popup-box,.site-popup-backdrop{transition:none;}
}