:root {
  --bg: #ffffff;
  --bg-soft: #f4f6fb;
  --navy: #0d2146;
  --navy-mid: #1a3a6b;
  --blue: #1e5cbe;
  --accent: #c8541a;
  --gold: #d4900a;
  --text: #1a1f2e;
  --text-mid: #4a5568;
  --text-light: #7a8599;
  --border: #dde2ec;
  --wa: #25d366;
}
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior: smooth; }
body { font-family:'Barlow',sans-serif; background:var(--bg); color:var(--text); overflow-x:hidden; }

/* ── SCROLL REVEAL ── */
.reveal { opacity:0; transform:translateY(30px); transition:opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1), transform 0.75s cubic-bezier(0.16, 1, 0.3, 1); }
.reveal-left { opacity:0; transform:translateX(-30px); transition:opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1), transform 0.75s cubic-bezier(0.16, 1, 0.3, 1); }
.reveal-right { opacity:0; transform:translateX(30px); transition:opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1), transform 0.75s cubic-bezier(0.16, 1, 0.3, 1); }
.reveal.vis,.reveal-left.vis,.reveal-right.vis { opacity:1; transform:translate(0); }
.d1{transition-delay:.08s} .d2{transition-delay:.16s} .d3{transition-delay:.24s}
.d4{transition-delay:.32s} .d5{transition-delay:.4s}

/* ── MOBILE MENU ── */
.mobile-overlay {
  display:none; position:fixed; inset:0;
  background:rgba(0,0,0,.45); z-index:998;
  opacity:0; transition:opacity .3s; pointer-events:none;
}
.mobile-overlay.open { display:block; opacity:1; pointer-events:all; }

.mobile-menu {
  position:fixed; top:0; right:0; width:290px; height:100dvh;
  background:var(--navy); z-index:999;
  display:flex; flex-direction:column;
  padding:1.2rem 0 2rem;
  overflow-y:auto;
  transform: translateX(100%);
  transition:transform .5s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events:none;
  box-shadow:-8px 0 40px rgba(0,0,0,.35);
  will-change: transform;
}
.mobile-menu.open { transform: translateX(0); pointer-events:all; }

.mobile-menu-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:.4rem 1.4rem 1.2rem; border-bottom:1px solid rgba(255,255,255,.07); margin-bottom:.5rem;
}
.mobile-menu-logo {
  font-family:'Bebas Neue',sans-serif; font-size:1.3rem; letter-spacing:3px; color:white;
}
.mobile-menu-logo span { color:var(--accent); }
.mobile-menu-close {
  background:none; border:none; color:rgba(255,255,255,.5); font-size:1.4rem;
  cursor:pointer; line-height:1; padding:4px 8px; transition:color .2s;
}
.mobile-menu-close:hover { color:white; }

.mobile-menu a {
  font-family:'Barlow Condensed',sans-serif; font-size:1rem;
  letter-spacing:3px; text-transform:uppercase;
  color:rgba(255,255,255,.75); text-decoration:none;
  padding:.95rem 1.6rem; border-bottom:1px solid rgba(255,255,255,.04);
  display:flex; align-items:center; gap:.8rem;
  transition:color .2s, background .2s, padding-left .2s;
}
.mobile-menu a:hover { color:white; background:rgba(255,255,255,.06); padding-left:2rem; }
.mobile-menu a .m-ico { color:var(--accent); font-size:.9rem; width:18px; }

.mobile-menu-sub {
  font-family:'Barlow Condensed',sans-serif; font-size:.7rem;
  letter-spacing:2px; text-transform:uppercase;
  color:#555; padding:1.5rem 1.6rem .5rem; margin-top:auto;
  line-height:1.8;
}

/* ── NAV ── */
nav {
  position:fixed; top:0; left:0; right:0; z-index:1000;
  display:flex; justify-content:space-between; align-items:center;
  padding:1rem 4rem;
  background:rgba(255,255,255,.97); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border);
  box-shadow:0 2px 20px rgba(13,33,70,.07);
  transition:padding .3s,box-shadow .3s;
}
nav.scrolled { padding:.65rem 4rem; box-shadow:0 4px 30px rgba(13,33,70,.13); }
.nav-logo { display:flex; align-items:center; gap:.7rem; text-decoration:none; cursor:pointer; }
.nav-logo-icon {
  width:42px; height:42px; background:var(--navy); border-radius:4px;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.nav-logo-icon svg { width:26px; height:26px; }
.nav-logo-text {
  font-family:'Bebas Neue',sans-serif; font-size:1.6rem;
  letter-spacing:3px; color:var(--navy); line-height:1;
}
.nav-logo-text span { color:var(--accent); }
nav ul { display:flex; list-style:none; gap:2.5rem; }
nav ul a {
  text-decoration:none; color:var(--text-mid);
  font-family:'Barlow Condensed',sans-serif; font-size:.83rem;
  letter-spacing:2px; text-transform:uppercase; transition:color .3s;
  position:relative;
}
nav ul a::after {
  content:''; position:absolute; bottom:-4px; left:0;
  width:0; height:2px; background:var(--accent); transition:width .3s;
}
nav ul a:hover { color:var(--navy); }
nav ul a:hover::after { width:100%; }
.hamburger { display:none; flex-direction:column; gap:5px; cursor:pointer; padding:4px; z-index:1001; }
.hamburger span { width:26px; height:2px; background:var(--navy); transition:transform .3s,opacity .3s; display:block; }
.hamburger.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity:0; }
.hamburger.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

/* ── HERO ── */
.hero {
  min-height:100vh; position:relative; display:flex; align-items:center; overflow:hidden;
  background:linear-gradient(160deg, #0d2146 0%, #0a1a38 50%, #071230 100%);
}

.hero-bg-dots {
  position:absolute; inset:0; z-index:0;
  background-image:radial-gradient(rgba(255,255,255,.045) 1px, transparent 1px);
  background-size:28px 28px;
  animation:dotDrift 12s linear infinite;
}
@keyframes dotDrift {
  0%   { background-position: 0 0; }
  100% { background-position: 28px 28px; }
}

.hero-bg-strata {
  position:absolute; inset:0; z-index:0;
  background:
    repeating-linear-gradient(-8deg,
      transparent 0px, transparent 60px,
      rgba(255,255,255,.018) 60px, rgba(255,255,255,.018) 62px),
    repeating-linear-gradient(-8deg,
      transparent 0px, transparent 130px,
      rgba(200,84,26,.05) 130px, rgba(200,84,26,.05) 133px);
  animation:strataShift 20s linear infinite;
}
@keyframes strataShift {
  0%   { background-position: 0 0, 0 0; }
  100% { background-position: 0 200px, 0 200px; }
}

#hero-canvas { position:absolute; inset:0; width:100%; height:100%; }

.hero-overlay {
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(90deg, rgba(13,33,70,.92) 0%, rgba(13,33,70,.65) 55%, rgba(13,33,70,.2) 100%);
}

/* ── CRANE SVG CONTAINER ── */
.hero-cranes {
  position:absolute; right:0; bottom:0; top:0;
  width:55%; z-index:2; pointer-events:none;
  display:flex; align-items:flex-end; justify-content:flex-end;
}
.crane-wrap { position:absolute; bottom:-140px; }
.crane-wrap.tower { right:25%; bottom:140px; }
.crane-wrap.drill  { right: 20%; bottom:120px; }

@keyframes armSwing {
  0%,100% { transform-origin: 8px 0; transform: rotate(-6deg); }
  50%      { transform-origin: 8px 0; transform: rotate(6deg); }
}
.crane-arm-group { animation: armSwing 4s ease-in-out infinite; will-change: transform; }

@keyframes cableSway {
  0%,100% { transform: rotate(-2deg); }
  50%      { transform: rotate(2deg); }
}
.crane-cable { animation: cableSway 4s ease-in-out infinite; transform-origin: top center; will-change: transform; }

@keyframes hookBob {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}
.crane-hook { animation: hookBob 2s ease-in-out infinite; will-change: transform; }

@keyframes drillBit {
  0%,100% { transform: translateY(0); }
  40%     { transform: translateY(-14px); }
  60%     { transform: translateY(-10px); }
}
.drill-bit { animation: drillBit 1.8s ease-in-out infinite; will-change: transform; }

@keyframes drillGlow {
  0%,100% { opacity:.5; }
  50%      { opacity:1; }
}
.drill-light { animation: drillGlow 1.8s ease-in-out infinite; }

.crane-wrap { opacity:0; animation-fill-mode:forwards; }
.crane-wrap.tower { animation: craneIn 1s 1s ease forwards, armSwing 4s 2s ease-in-out infinite; }
.crane-wrap.drill  { animation: craneIn 1s 1.4s ease forwards; }
@keyframes craneIn {
  from { opacity:0; transform:translateY(30px); }
  to   { opacity:1; transform:translateY(0); }
}

.crane-ground {
  position:absolute; bottom:58px; right:0; left:0; height:2px;
  background:linear-gradient(90deg, transparent, rgba(200,84,26,.3) 30%, rgba(255,255,255,.1) 70%, transparent);
  z-index:2;
}

.hero-content { position:relative; z-index:3; padding:0 4rem; max-width:680px; }
.hero-tag {
  font-family:'Barlow Condensed',sans-serif; font-size:.75rem;
  letter-spacing:5px; text-transform:uppercase; color:var(--accent);
  margin-bottom:1.5rem; display:flex; align-items:center; gap:1rem;
  opacity:0; animation:fadeUp .8s .2s ease forwards;
}
.hero-tag::before { content:''; width:36px; height:2px; background:var(--accent); }
.hero h1 {
  font-family:'Bebas Neue',sans-serif;
  font-size:clamp(3rem,6.5vw,6rem); line-height:.93;
  letter-spacing:2px; color:white; margin-bottom:.8rem;
  opacity:0; animation:fadeUp .8s .35s ease forwards;
}
.hero h1 em { font-style:normal; color:var(--accent); display:block; }
.hero-sub {
  font-size:1rem; font-weight:300; color:rgba(255,255,255,.75);
  line-height:1.85; margin-bottom:2.5rem; max-width:480px;
  opacity:0; animation:fadeUp .8s .5s ease forwards;
}
.hero-actions {
  display:flex; gap:1.2rem; align-items:center;
  opacity:0; animation:fadeUp .8s .65s ease forwards;
}
.btn-primary {
  background:var(--accent); color:white;
  padding:.95rem 2.2rem;
  font-family:'Barlow Condensed',sans-serif; font-size:.83rem;
  letter-spacing:2.5px; text-transform:uppercase;
  text-decoration:none; border:none; cursor:pointer;
  clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px));
  transition:background .3s,transform .2s; display:inline-block;
}
.btn-primary:hover { background:white; color:var(--navy); transform:translateY(-2px); }
.btn-ghost {
  color:white; font-family:'Barlow Condensed',sans-serif; font-size:.83rem;
  letter-spacing:2.5px; text-transform:uppercase; text-decoration:none;
  border:1px solid rgba(255,255,255,.3); padding:.9rem 1.8rem;
  transition: background-color .3s ease, border-color .3s ease, color .3s ease;
}
.btn-ghost:hover { background:rgba(255,255,255,.1); border-color:white; }

/* Stats bar */
html, body {
  overflow-x: hidden;
  width: 100%;
  position: relative;
}

.hero-stats {
  position: relative;
  display: flex;
  z-index: 2;
  background: white;
  border-top: 1px solid var(--border);
  opacity: 1;
  animation: fadeUp .8s .85s ease forwards;
  box-shadow: 0 2px 20px rgba(13,33,70,.07);
  width: 100%;          
  margin-top: 1rem;     
  margin-left: 0;       
  margin-right: 0;      
  border-radius: 0;     
  justify-content: space-evenly; 
}
.stat {
  flex:1 1 0; padding:1.2rem 1.5rem; border-right:1px solid var(--border);
  display:flex; align-items:center; gap:.7rem; transition:background .3s; cursor:default;
  background:white;
}
.stat:last-child { border-right:none; }
.stat:hover { background:var(--bg-soft); }
.stat-icon { font-size:1.2rem; opacity:.55; flex-shrink:0; }
.stat-num { font-family:'Bebas Neue',sans-serif; font-size:2rem; color:var(--navy); line-height:1; }
.stat-label { font-size:.6rem; letter-spacing:1.5px; text-transform:uppercase; color:var(--text-mid); margin-top:2px; }

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

/* ── SECTION COMMONS ── */
.section-tag {
  font-family:'Barlow Condensed',sans-serif; font-size:.72rem;
  letter-spacing:5px; text-transform:uppercase; color:var(--accent);
  margin-bottom:.8rem; display:flex; align-items:center; gap:.8rem;
}
.section-tag::before { content:''; width:28px; height:2px; background:var(--accent); }
.section-title {
  font-family:'Bebas Neue',sans-serif; font-size:clamp(2rem,3.5vw,3rem);
  letter-spacing:2px; line-height:1.05; color:var(--navy);
}

/* ── ABOUT ── */
#about {
  background:var(--bg-soft); padding:5rem 4rem;
  display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:center;
}
.about-text .section-title { margin-bottom:1.5rem; }
.about-text p {
  font-size:.97rem; font-weight:300; color:var(--text-mid);
  line-height:1.9; margin-bottom:1.1rem;
}
.about-cards { display:flex; flex-direction:column; gap:1.2rem; }

/* 3D TILT CARD */
.tilt-card {
  background:white; border:1px solid var(--border); padding:1.8rem;
  border-left:4px solid var(--blue);
  box-shadow:0 2px 12px rgba(13,33,70,.05);
  transform-style:preserve-3d;
  transition:box-shadow .3s;
  will-change:transform;
}
.tilt-card:hover { box-shadow:0 20px 60px rgba(13,33,70,.15); }
.tilt-card h3 {
  font-family:'Barlow Condensed',sans-serif; font-size:.83rem;
  letter-spacing:2.5px; text-transform:uppercase; color:var(--navy); margin-bottom:.5rem;
}
.tilt-card p { font-size:.87rem; color:var(--text-mid); line-height:1.75; font-weight:300; }

/* ── ISO BANNER ── */
#iso-banner {
  background:var(--navy); padding:3rem 4rem;
  display:flex; align-items:center; justify-content:space-between; gap:2rem;
  flex-wrap:wrap;
}
.iso-left { display:flex; align-items:center; gap:2rem; flex:1; min-width:260px; }
.iso-badge {
  width:130px; height:130px; border-radius:50%;
  background:linear-gradient(135deg,var(--accent),var(--gold));
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0; font-family:'Bebas Neue',sans-serif;
  font-size:1.05rem; letter-spacing:2px; color:white; text-align:center;
  line-height:1.4; padding:14px;
  box-shadow:0 0 0 6px rgba(200,84,26,.3), 0 0 30px rgba(200,84,26,.2);
  animation:pulse 2.5s ease infinite;
}
@keyframes pulse {
  0%,100% { box-shadow:0 0 0 4px rgba(200,84,26,.3); }
  50% { box-shadow:0 0 0 10px rgba(200,84,26,.1); }
}
.iso-text h3 {
  font-family:'Bebas Neue',sans-serif; font-size:1.6rem;
  letter-spacing:2px; color:white; margin-bottom:.3rem;
}
.iso-text p { font-size:.85rem; color:rgba(255,255,255,.5); font-weight:300; }
.iso-right { display:flex; gap:2rem; flex-wrap:wrap; }
.iso-stat { text-align:center; min-width:70px; }
.iso-stat-num {
  font-family:'Bebas Neue',sans-serif; font-size:2.4rem;
  color:var(--accent); line-height:1;
}
.iso-stat-label { font-size:.65rem; letter-spacing:2px; text-transform:uppercase; color:rgba(255,255,255,.4); }

/* ── SERVICES ── */
#services { background:var(--bg); padding:5rem 4rem; }
.services-header {
  display:flex; justify-content:space-between; align-items:flex-end;
  margin-bottom:3.5rem; border-bottom:1px solid var(--border); padding-bottom:2rem;
}
.services-intro { font-size:.95rem; color:var(--text-light); max-width:380px; font-weight:300; line-height:1.7; }
.services-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1.5rem; }

/* 3D FLIP SERVICE CARD */
.service-card-wrap {
  height:380px; perspective:1200px;
}
.service-card-inner {
  position:relative; width:100%; height:100%;
  transform-style:preserve-3d; transition:transform .6s cubic-bezier(.4,0,.2,1);
}
.service-card-wrap:hover .service-card-inner { transform:rotateY(180deg); }
.service-front, .service-back {
  position:absolute; inset:0;
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
  overflow:hidden;
}
.service-front {
  background:var(--bg-soft); border:1px solid var(--border);
  padding:2.2rem; display:flex; flex-direction:column;
}
.service-front::before {
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg,var(--accent),var(--blue));
}
.service-icon { font-size:2.2rem; margin-bottom:1.2rem; display:block; }
.service-front h3 {
  font-family:'Barlow Condensed',sans-serif; font-size:1rem;
  letter-spacing:1.5px; text-transform:uppercase; color:var(--navy);
  margin-bottom:1rem; padding-bottom:.8rem; border-bottom:1px solid var(--border);
}
.service-front ul { list-style:none; display:flex; flex-direction:column; gap:.45rem; }
.service-front ul li {
  font-size:.84rem; color:var(--text-mid); font-weight:300;
  padding-left:1.1rem; position:relative; line-height:1.5;
}
.service-front ul li::before {
  content:'▸'; position:absolute; left:0; color:var(--accent); font-size:.6rem; top:3px;
}
.service-front .flip-hint {
  margin-top:auto; padding-top:1rem;
  font-family:'Barlow Condensed',sans-serif; font-size:.65rem;
  letter-spacing:2px; text-transform:uppercase; color:var(--text-light);
  display:flex; align-items:center; gap:.5rem;
}
.service-front .flip-hint::after { content:'↻'; font-size:.9rem; }

.service-back {
  background:linear-gradient(135deg,var(--navy) 0%,var(--navy-mid) 100%);
  transform:rotateY(180deg);
  padding:2.2rem; display:flex; flex-direction:column; justify-content:center; align-items:flex-start;
}
.service-back h3 {
  font-family:'Bebas Neue',sans-serif; font-size:1.6rem;
  letter-spacing:2px; color:white; margin-bottom:1rem;
}
.service-back p { font-size:.87rem; color:rgba(255,255,255,.7); font-weight:300; line-height:1.8; margin-bottom:1.5rem; }
.service-back a {
  display:inline-block; background:var(--accent); color:white;
  padding:.7rem 1.5rem; font-family:'Barlow Condensed',sans-serif;
  font-size:.75rem; letter-spacing:2px; text-transform:uppercase;
  text-decoration:none; transition:background .3s;
  clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,8px 100%,0 calc(100% - 8px));
}
.service-back a:hover { background:white; color:var(--navy); }

/* ── WHY CHOOSE US ── */
#why {
  background: white; padding:7rem 2rem;
  position:relative; overflow:hidden;
}
#why::before {
  content:''; position:absolute; inset:0;
  background-image:radial-gradient(rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:30px 30px;
}
#why .section-tag { color:var(--accent); }
#why .section-tag::before { background:var(--accent); }
#why .section-title { color:var(--navy); margin-bottom:1rem; }
.why-grid {
  display:grid; grid-template-columns:1fr 1fr; gap:5rem;
  align-items:center; position:relative; z-index:1;
}
.why-intro { font-size:.95rem; color:var(--text-mid); font-weight:300; line-height:1.8; margin-bottom:3rem; }
.why-features { display:flex; flex-direction:column; gap:1.2rem; }
.why-item {
  display:flex; gap:1.2rem; align-items:flex-start;
  padding:1.4rem; border:1px solid rgba(0,0,0,.07);
  background:rgba(0,0,0,.03);
  transition:background .3s,border-color .3s,transform .3s;
}
.why-item:hover {
  background:rgba(30,92,190,.1); border-color:rgba(30,92,190,.3);
  transform:translateX(6px);
}
.why-item-icon {
  width:46px; height:46px; background:var(--accent);
  display:flex; align-items:center; justify-content:center;
  font-size:1.3rem; flex-shrink:0;
}
.why-item-text h4 {
  font-family:'Barlow Condensed',sans-serif; font-size:.85rem;
  letter-spacing:2px; text-transform:uppercase; color:var(--navy); margin-bottom:.3rem;
}
.why-item-text p { font-size:.83rem; color:var(--text-mid); font-weight:300; line-height:1.6; }

/* 3D rotating cube */
.why-visual {
  display:flex; align-items:center; justify-content:center;
  height:420px; perspective:900px; cursor:grab;
}
.why-visual:active { cursor:grabbing; }
.cube-scene {
  width:220px; height:220px; transform-style:preserve-3d;
  transition: transform 0.1s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}
.cube-scene.auto-spin { animation:rotateCube 14s linear infinite; }
@keyframes rotateCube {
  0% { transform:rotateX(18deg) rotateY(0deg) rotateZ(2deg); }
  100% { transform:rotateX(18deg) rotateY(360deg) rotateZ(2deg); }
}
.cube-face {
  position:absolute; width:220px; height:220px;
  border:1.5px solid rgba(200,84,26,.5);
  background:rgba(7,18,48,.72);
  backdrop-filter:blur(8px);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.6rem;
  transition: background 0.3s, border-color 0.3s;
}
.cube-face:hover { background:rgba(30,92,190,.4); border-color:rgba(200,84,26,.9); }
.cube-face .cf-num {
  font-family:'Bebas Neue',sans-serif; font-size:3.4rem; color:var(--accent); line-height:1;
  text-shadow:0 0 20px rgba(200,84,26,.6);
}
.cube-face .cf-label {
  font-family:'Barlow Condensed',sans-serif; font-size:.7rem;
  letter-spacing:3px; text-transform:uppercase; color:rgba(255,255,255,.6); text-align:center;
}
.face-front  { transform:translateZ(110px); }
.face-back   { transform:rotateY(180deg) translateZ(110px); }
.face-left   { transform:rotateY(-90deg) translateZ(110px); }
.face-right  { transform:rotateY(90deg) translateZ(110px); }
.face-top    { transform:rotateX(90deg) translateZ(110px); }
.face-bottom { transform:rotateX(-90deg) translateZ(110px); }

/* Cube glow ring */
.cube-ring {
  position:absolute; width:280px; height:280px;
  border-radius:50%; border:1px solid rgba(200,84,26,.15);
  pointer-events:none; animation:ringPulse 3s ease-in-out infinite;
}
@keyframes ringPulse {
  0%,100% { transform:scale(1); opacity:.3; }
  50% { transform:scale(1.08); opacity:.7; }
}

/* ── TESTIMONIALS ── */
#testimonials { background:var(--bg-soft); padding:5rem 4rem; }
.testimonials-header { text-align:center; margin-bottom:4rem; }
.testimonials-header .section-title { color:var(--navy); }
.testi-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:1.8rem;
  max-width:1200px; margin:0 auto;
}
.testi-card {
  background:white; border:1px solid var(--border);
  padding:2rem; position:relative; overflow:hidden;
  border-top:3px solid var(--accent);
  transition:transform .35s ease, box-shadow .35s ease;
}
.testi-card::before {
  content:'"'; position:absolute; top:-10px; left:16px;
  font-family:'Bebas Neue',sans-serif; font-size:7rem;
  color:rgba(200,84,26,.08); line-height:1; pointer-events:none;
}
.testi-card:hover { transform:translateY(-6px); box-shadow:0 20px 50px rgba(13,33,70,.12); }
.testi-text {
  font-size:.9rem; color:var(--text-mid); font-weight:300;
  line-height:1.85; margin-bottom:1.5rem; font-style:italic;
}
.testi-author { display:flex; align-items:center; gap:.9rem; }
.testi-avatar {
  width:44px; height:44px; border-radius:50%;
  background:linear-gradient(135deg,var(--navy),var(--blue));
  display:flex; align-items:center; justify-content:center;
  font-family:'Bebas Neue',sans-serif; font-size:1.2rem; color:white; flex-shrink:0;
}
.testi-info h5 {
  font-family:'Barlow Condensed',sans-serif; font-size:.82rem;
  letter-spacing:1.5px; text-transform:uppercase; color:var(--navy); font-weight:600;
}
.testi-info span { font-size:.75rem; color:var(--text-light); font-weight:300; }
.testi-stars { color:var(--gold); font-size:.85rem; margin-bottom:.5rem; }

/* ── TEAM / EMPLOYEES ── */
#team { background:var(--bg); padding:5rem 4rem; }
.team-header { text-align:center; margin-bottom:1rem; }
.team-intro { text-align:center; font-size:.95rem; color:var(--text-light); font-weight:300; max-width:520px; margin:0 auto 3.5rem; }
.team-grid {
  display:grid; grid-template-columns:repeat(5,1fr); gap:1.2rem;
  max-width:1200px; margin:0 auto;
}
.team-card {
  background:var(--bg-soft); border:1px solid var(--border);
  padding:1.4rem 1rem; text-align:center; position:relative; overflow:hidden;
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s;
  cursor:default;
}
.team-card::before {
  content:''; position:absolute; inset:0; background:linear-gradient(180deg,transparent 60%,rgba(13,33,70,.06));
  opacity:0; transition:opacity .3s;
}
.team-card:hover { transform:translateY(-5px); box-shadow:0 14px 40px rgba(13,33,70,.1); border-color:var(--blue); }
.team-card:hover::before { opacity:1; }
.team-avatar {
  width:62px; height:62px; border-radius:50%; margin:0 auto .8rem;
  background:linear-gradient(135deg,var(--navy-mid),var(--blue));
  display:flex; align-items:center; justify-content:center;
  font-family:'Bebas Neue',sans-serif; font-size:1.5rem; color:white;
  border:2px solid transparent; transition:border-color .3s;
  flex-shrink:0;
}
.team-card:hover .team-avatar { border-color:var(--accent); }
.team-name {
  font-family:'Barlow Condensed',sans-serif; font-size:.78rem;
  letter-spacing:1px; text-transform:uppercase; color:var(--navy); font-weight:600; margin-bottom:.2rem;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.team-role { font-size:.72rem; color:var(--text-light); font-weight:300; }
.team-dept {
  display:inline-block; margin-top:.5rem; background:var(--navy); color:white;
  font-family:'Barlow Condensed',sans-serif; font-size:.58rem; letter-spacing:1.5px;
  text-transform:uppercase; padding:2px 7px;
}

/* Animation extras */
@keyframes slideInLeft {
  from { opacity:0; transform:translateX(-40px); }
  to   { opacity:1; transform:translateX(0); }
}
@keyframes slideInRight {
  from { opacity:0; transform:translateX(40px); }
  to   { opacity:1; transform:translateX(0); }
}
@keyframes zoomIn {
  from { opacity:0; transform:scale(.92); }
  to   { opacity:1; transform:scale(1); }
}
.reveal-zoom { opacity:0; transform:scale(.92); transition:opacity .7s ease,transform .7s ease; }
.reveal-zoom.vis { opacity:1; transform:scale(1); }
.d6{transition-delay:.6s} .d7{transition-delay:.7s} .d8{transition-delay:.8s}

.why-particle {
  position:absolute; border-radius:50%;
  background:rgba(200,84,26,.25);
  pointer-events:none; animation:floatParticle linear infinite;
}
@keyframes floatParticle {
  0%   { transform:translateY(0) rotate(0deg); opacity:.4; }
  50%  { opacity:.8; }
  100% { transform:translateY(-120px) rotate(360deg); opacity:0; }
}

.service-card-wrap { height:400px; perspective:1200px; }

@keyframes shimmer {
  0%   { background-position:-400px 0; }
  100% { background-position:400px 0; }
}
.testi-card.loading {
  background:linear-gradient(90deg,#f4f6fb 25%,#e8ecf4 50%,#f4f6fb 75%);
  background-size:800px 100%;
  animation:shimmer 1.5s infinite;
}

/* ── GALLERY ── */
#gallery { background:var(--bg); padding:5rem 4rem; }
.gallery-header {
  display:flex; justify-content:space-between; align-items:flex-end;
  margin-bottom:3rem; border-bottom:1px solid var(--border); padding-bottom:2rem;
}
.gallery-intro { font-size:.93rem; color:var(--text-light); max-width:360px; font-weight:300; line-height:1.7; }
.gallery-filters { display:flex; gap:.6rem; margin-bottom:2rem; flex-wrap:wrap; }
.filter-btn {
  background:transparent; border:1px solid var(--border); color:var(--text-mid);
  padding:.5rem 1.2rem; font-family:'Barlow Condensed',sans-serif;
  font-size:.75rem; letter-spacing:2px; text-transform:uppercase;
  cursor:pointer; transition: background-color .3s ease, color .3s ease, border-color .3s ease;
}
.filter-btn:hover,.filter-btn.active { background:var(--navy); color:white; border-color:var(--navy); }
.gallery-grid {
  display:grid; grid-template-columns:repeat(4,1fr);
  grid-auto-rows:220px; gap:8px;
}
.gallery-item { overflow:hidden; cursor:pointer; position:relative; background:var(--bg-soft); }
.gallery-item.wide { grid-column:span 2; }
.gallery-item.tall { grid-row:span 2; }
.gallery-item img { width:100%; height:100%; object-fit:cover; transition:transform .6s ease; display:block; }
.gallery-item:hover img { transform:scale(1.07); }
.gallery-tag-pill {
  position:absolute; top:12px; left:12px; background:var(--accent); color:white;
  font-family:'Barlow Condensed',sans-serif; font-size:.65rem; letter-spacing:2px;
  text-transform:uppercase; padding:3px 10px;
}
.gallery-overlay {
  position:absolute; bottom:0; left:0; right:0;
  background:linear-gradient(0deg,rgba(13,33,70,.9) 0%,transparent 100%);
  padding:2rem 1.2rem 1.2rem;
  transform:translateY(100%); transition:transform .4s ease;
}
.gallery-item:hover .gallery-overlay { transform:translateY(0); }
.gallery-overlay h4 {
  font-family:'Barlow Condensed',sans-serif; font-size:.9rem;
  letter-spacing:1px; text-transform:uppercase; color:white; margin-bottom:.2rem;
}
.gallery-overlay span { font-size:.75rem; color:rgba(255,255,255,.55); font-weight:300; }

/* Lightbox */
.lightbox {
  position:fixed; inset:0; background:rgba(5,10,20,.96); z-index:2000;
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transition:opacity .3s;
}
.lightbox.open { opacity:1; pointer-events:all; }
.lightbox-inner { position:relative; max-width:85vw; max-height:85vh; }
.lightbox-inner img { max-width:85vw; max-height:80vh; object-fit:contain; display:block; }
.lightbox-close {
  position:absolute; top:-40px; right:0;
  background:none; border:none; color:white;
  font-size:1.3rem; cursor:pointer; opacity:.6; transition:opacity .2s;
}
.lightbox-close:hover { opacity:1; }
.lightbox-caption { padding:1rem 0 0; text-align:center; }
.lightbox-caption h4 { font-family:'Barlow Condensed',sans-serif; font-size:.9rem; letter-spacing:2px; text-transform:uppercase; color:white; margin-bottom:.2rem; }
.lightbox-caption span { font-size:.8rem; color:rgba(255,255,255,.5); }

/* ── CLIENTS ── */
#clients { background:var(--navy); padding:5rem 4rem; }
#clients .section-tag { color:var(--gold); }
#clients .section-tag::before { background:var(--gold); }
#clients .section-title { color:white; }
.clients-header { text-align:center; margin-bottom:3.5rem; }
.clients-grid {
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:1px; background:rgba(255,255,255,.07);
  max-width:1100px; margin:0 auto;
  border:1px solid rgba(255,255,255,.07);
}
.client-item {
  background:rgba(13,33,70,.85); padding:1.8rem 1.5rem;
  text-align:center; transition:background .3s,transform .3s;
}
.client-item:hover { background:rgba(30,92,190,.3); transform:scale(1.02); }
.client-name {
  font-family:'Barlow Condensed',sans-serif; font-size:.88rem;
  letter-spacing:1.5px; text-transform:uppercase; color:white; font-weight:600; margin-bottom:.4rem;
}
.client-project { font-size:.71rem; color:rgba(255,255,255,.4); font-weight:300; line-height:1.55; }

/* ── CONTACT ── */
#contact {
  background:var(--bg-soft); padding:5rem 4rem;
  display:grid; grid-template-columns:1fr 1.2fr; gap:4rem; align-items:start;
}
.contact-info .section-title { margin-bottom:.6rem; }
.contact-desc { font-size:.95rem; color:var(--text-mid); font-weight:300; line-height:1.75; margin-bottom:2.2rem; }
.contact-detail { display:flex; flex-direction:column; gap:1.6rem; }
.contact-item { display:flex; gap:1rem; align-items:flex-start; }
.contact-icon {
  width:42px; height:42px; background:var(--navy); color:white;
  display:flex; align-items:center; justify-content:center;
  font-size:1rem; flex-shrink:0;
}
.contact-item h4 {
  font-family:'Barlow Condensed',sans-serif; font-size:.68rem;
  letter-spacing:2px; text-transform:uppercase; color:var(--accent); margin-bottom:.25rem;
}
.contact-item p,.contact-item a { font-size:.9rem; color:var(--text-mid); font-weight:300; line-height:1.65; text-decoration:none; }
.contact-item a:hover { color:var(--blue); }
.wa-cta {
  margin-top:2rem; display:inline-flex; align-items:center; gap:.7rem;
  background:var(--wa); color:white; padding:.85rem 1.5rem;
  text-decoration:none; font-family:'Barlow Condensed',sans-serif;
  font-size:.82rem; letter-spacing:2px; text-transform:uppercase; transition:background .3s,transform .2s;
}
.wa-cta:hover { background:#1ebe5d; transform:translateY(-2px); }
.wa-cta svg { width:17px; height:17px; fill:white; flex-shrink:0; }
.contact-form {
  background:white; border:1px solid var(--border); padding:2.5rem;
  box-shadow:0 4px 30px rgba(13,33,70,.07);
  display:flex; flex-direction:column; gap:1.1rem;
}
.form-title {
  font-family:'Barlow Condensed',sans-serif; font-size:1rem;
  letter-spacing:2.5px; text-transform:uppercase; color:var(--navy);
  margin-bottom:.5rem; padding-bottom:1rem; border-bottom:1px solid var(--border);
}
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.form-group { display:flex; flex-direction:column; gap:.35rem; }
.form-group label {
  font-family:'Barlow Condensed',sans-serif; font-size:.67rem;
  letter-spacing:2px; text-transform:uppercase; color:var(--text-light);
}
.form-group input,.form-group textarea,.form-group select {
  background:var(--bg-soft); border:1px solid var(--border);
  color:var(--text); padding:.8rem .95rem;
  font-family:'Barlow',sans-serif; font-size:.9rem;
  outline:none; transition:border-color .3s,box-shadow .3s; width:100%;
}
.form-group input:focus,.form-group textarea:focus,.form-group select:focus {
  border-color:var(--blue); box-shadow:0 0 0 3px rgba(30,92,190,.08);
}
.form-group textarea { resize:vertical; min-height:110px; }
.form-note { font-size:.75rem; color:var(--text-light); }

/* ── FOOTER ── */
footer { background:#ffffff; border-top:4px solid var(--accent); padding:4rem 4rem 2rem; color:#444; font-family:'Barlow',sans-serif; }
.footer-grid {
  display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr;
  gap:3rem; padding-bottom:3rem;
  border-bottom:1px solid #e5e5e5; margin-bottom:2rem;
}
.footer-logo {
  display:flex; align-items:center; margin-bottom:1rem;
}
.footer-logo img { height:60px; width:auto; display:block; }
.footer-tagline { font-size:.82rem; color:#666; font-weight:400; line-height:1.7; max-width:280px; font-family:'Barlow',sans-serif; }
.footer-col h4 {
  font-family:'Barlow Condensed',sans-serif; font-size:.7rem;
  letter-spacing:3px; text-transform:uppercase; color:var(--accent); margin-bottom:1.2rem;
  font-weight:400;
}
.footer-col ul { list-style:none; display:flex; flex-direction:column; gap:.6rem; }
.footer-col ul li,.footer-col ul li a {
  font-size:.82rem; color:#555; font-weight:400;
  text-decoration:none; transition:color .2s; line-height:1.5;
  display:flex; gap:.5rem; align-items:flex-start; font-family:'Barlow',sans-serif;
}
.footer-col ul li a:hover { color:var(--accent); }
.f-ico { color:#888; flex-shrink:0; font-size:.9rem; }
.footer-bottom { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem; }
.footer-bottom p { font-size:.72rem; color:#888; font-weight:400; font-family:'Barlow Condensed',sans-serif; letter-spacing:1.5px; text-transform:uppercase; }
.footer-bottom-links { display:flex; gap:1.5rem; }
.footer-bottom-links a { color:#777; text-decoration:none; font-size:.65rem; font-weight:400; font-family:'Barlow Condensed',sans-serif; letter-spacing:2px; text-transform:uppercase; transition:color .2s; }
.footer-bottom-links a:hover { color:var(--accent); }

/* ── CAREERS ── */
#careers { background:var(--bg-soft); padding:5rem 4rem; }
.careers-header {
  display:flex; justify-content:space-between; align-items:flex-end;
  margin-bottom:3.5rem; border-bottom:1px solid var(--border); padding-bottom:2rem;
}
.careers-intro { font-size:.95rem; color:var(--text-light); max-width:380px; font-weight:300; line-height:1.7; }
.careers-layout { display:grid; grid-template-columns:1fr 1.3fr; gap:4rem; align-items:start; }

.jobs-list { display:flex; flex-direction:column; gap:1.2rem; }
.job-card {
  background:white; border:1px solid var(--border);
  border-left:4px solid var(--blue);
  padding:1.6rem 1.8rem; cursor:pointer;
  transition:box-shadow .3s, border-color .3s, transform .2s;
  position:relative;
}
.job-card:hover { box-shadow:0 10px 40px rgba(13,33,70,.1); border-left-color:var(--accent); transform:translateX(4px); }
.job-card.active { border-left-color:var(--accent); box-shadow:0 8px 32px rgba(200,84,26,.12); background:#fff9f6; }
.job-card-top { display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; }
.job-title {
  font-family:'Barlow Condensed',sans-serif; font-size:1rem;
  letter-spacing:1.5px; text-transform:uppercase; color:var(--navy); margin-bottom:.35rem;
}
.job-badges { display:flex; gap:.5rem; flex-wrap:wrap; margin-bottom:.6rem; }
.job-badge {
  font-family:'Barlow Condensed',sans-serif; font-size:.6rem;
  letter-spacing:1.5px; text-transform:uppercase; padding:3px 9px;
  border:1px solid; border-radius:2px;
}
.badge-type  { color:var(--blue);  border-color:rgba(30,92,190,.3); background:rgba(30,92,190,.05); }
.badge-loc   { color:var(--accent); border-color:rgba(200,84,26,.3); background:rgba(200,84,26,.05); }
.badge-exp   { color:var(--text-light); border-color:var(--border); }
.job-desc { font-size:.83rem; color:var(--text-mid); font-weight:300; line-height:1.7; margin-bottom:.8rem; }
.job-skills { display:flex; flex-wrap:wrap; gap:.4rem; }
.skill-tag {
  background:var(--bg-soft); border:1px solid var(--border);
  font-size:.65rem; letter-spacing:1px; text-transform:uppercase;
  color:var(--text-light); padding:2px 8px;
}
.job-apply-btn {
  position:absolute; top:1.4rem; right:1.4rem;
  background:var(--navy); color:white;
  font-family:'Barlow Condensed',sans-serif; font-size:.65rem;
  letter-spacing:2px; text-transform:uppercase;
  border:none; padding:.45rem .9rem; cursor:pointer;
  transition:background .2s;
}
.job-apply-btn:hover { background:var(--accent); }
.job-apply-btn.selected { background:var(--accent); }

.no-openings {
  background:white; border:1px dashed var(--border);
  padding:2rem; text-align:center;
  font-size:.9rem; color:var(--text-light); font-weight:300; line-height:1.8;
}
.no-openings strong { display:block; font-family:'Barlow Condensed',sans-serif;
  font-size:1rem; letter-spacing:1.5px; text-transform:uppercase;
  color:var(--navy); margin-bottom:.5rem; }

.career-form-wrap {
  background:white; border:1px solid var(--border);
  padding:2.5rem; box-shadow:0 4px 30px rgba(13,33,70,.06);
  position:sticky; top:90px;
}
.career-form-title {
  font-family:'Barlow Condensed',sans-serif; font-size:1rem;
  letter-spacing:2.5px; text-transform:uppercase; color:var(--navy);
  margin-bottom:.3rem; padding-bottom:1rem; border-bottom:1px solid var(--border);
}
.selected-job-label {
  font-size:.78rem; color:var(--accent); font-weight:500;
  margin-bottom:1.2rem; display:flex; align-items:center; gap:.4rem;
  font-family:'Barlow Condensed',sans-serif; letter-spacing:1px; text-transform:uppercase;
}
.career-form-fields { display:flex; flex-direction:column; gap:1rem; }
.form-row-3 { display:grid; grid-template-columns:1fr 1fr; gap:.9rem; }
.cf-group { display:flex; flex-direction:column; gap:.3rem; }
.cf-group label {
  font-family:'Barlow Condensed',sans-serif; font-size:.65rem;
  letter-spacing:2px; text-transform:uppercase; color:var(--text-light);
}
.cf-group input, .cf-group select, .cf-group textarea {
  background:var(--bg-soft); border:1px solid var(--border);
  color:var(--text); padding:.75rem .9rem;
  font-family:'Barlow',sans-serif; font-size:.88rem;
  outline:none; transition:border-color .3s, box-shadow .3s; width:100%;
}
.cf-group input:focus, .cf-group select:focus, .cf-group textarea:focus {
  border-color:var(--blue); box-shadow:0 0 0 3px rgba(30,92,190,.08);
}
.cf-group textarea { resize:vertical; min-height:90px; }
.resume-upload-area {
  border:2px dashed var(--border); padding:1.5rem; text-align:center;
  cursor:pointer; transition:border-color .3s, background .3s;
  position:relative; background:var(--bg-soft);
}
.resume-upload-area:hover { border-color:var(--blue); background:rgba(30,92,190,.03); }
.resume-upload-area input[type=file] {
  position:absolute; inset:0; opacity:0; cursor:pointer; width:100%; height:100%;
}
.resume-upload-label {
  font-family:'Barlow Condensed',sans-serif; font-size:.75rem;
  letter-spacing:2px; text-transform:uppercase; color:var(--text-light);
  pointer-events:none;
}
.resume-upload-label span { color:var(--blue); }
.resume-file-name { font-size:.78rem; color:var(--accent); margin-top:.4rem; display:none; }
.form-submit-note { font-size:.73rem; color:var(--text-light); margin-top:.2rem; }
.career-submit-btn {
  background:var(--accent); color:white; border:none; width:100%;
  padding:1rem; font-family:'Barlow Condensed',sans-serif;
  font-size:.85rem; letter-spacing:2.5px; text-transform:uppercase;
  cursor:pointer; transition:background .3s, transform .2s; margin-top:.5rem;
  clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px));
}
.career-submit-btn:hover { background:var(--navy); transform:translateY(-2px); }
.career-submit-btn:disabled { background:var(--text-light); cursor:not-allowed; transform:none; }

.toast {
  position:fixed; bottom:2rem; right:2rem; z-index:3000;
  background:var(--navy); color:white; padding:1rem 1.5rem;
  font-family:'Barlow Condensed',sans-serif; font-size:.82rem; letter-spacing:1.5px;
  text-transform:uppercase; border-left:4px solid var(--accent);
  box-shadow:0 8px 30px rgba(0,0,0,.2);
  transform:translateY(100px); opacity:0; transition:all .4s ease;
  max-width:320px; line-height:1.5;
}
.toast.show { transform:translateY(0); opacity:1; }
.toast.success { border-left-color:#25d366; }
.toast.error   { border-left-color:#e53e3e; }

/* ── MULTI-PAGE SHARED ── */
nav ul a.active { color:var(--navy); }
nav ul a.active::after { width:100%; }

.page-hero {
  min-height:38vh; background:linear-gradient(160deg,#0d2146 0%,#0a1a38 55%,#071230 100%);
  display:flex; align-items:flex-end; padding:0 4rem 3.5rem; position:relative; overflow:hidden;
}
.page-hero-bg-dots {
  position:absolute; inset:0;
  background-image:radial-gradient(rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:28px 28px; animation:dotDrift 12s linear infinite;
}
.page-hero-strata {
  position:absolute; inset:0;
  background:repeating-linear-gradient(-8deg,transparent 0,transparent 60px,rgba(255,255,255,.016) 60px,rgba(255,255,255,.016) 62px),
             repeating-linear-gradient(-8deg,transparent 0,transparent 130px,rgba(200,84,26,.04) 130px,rgba(200,84,26,.04) 133px);
  animation:strataShift 20s linear infinite;
}
.page-hero-content { position:relative; z-index:2; }
.page-hero-tag {
  font-family:'Barlow Condensed',sans-serif; font-size:.72rem;
  letter-spacing:5px; text-transform:uppercase; color:var(--accent);
  margin-bottom:.8rem; display:flex; align-items:center; gap:.8rem;
}
.page-hero-tag::before { content:''; width:28px; height:2px; background:var(--accent); }
.page-hero h1 {
  font-family:'Bebas Neue',sans-serif; font-size:clamp(2.5rem,5vw,4.5rem);
  letter-spacing:2px; color:white; line-height:.95; margin:0;
}
.page-hero h1 em { font-style:normal; color:var(--accent); }
.page-hero-sub { font-size:.92rem; color:rgba(255,255,255,.6); font-weight:300; margin-top:.8rem; max-width:520px; }


/* ==============================================================
   RESPONSIVE DESIGN (TABLETS, LAPTOPS, MOBILE)
   ============================================================== */

/* LAPTOPS & LARGE TABLETS (Under 1024px) */
@media (max-width:1024px) {
  nav { padding:1rem 2rem; }
  nav.scrolled { padding:.7rem 2rem; }
  nav ul { display:none; }
  .hamburger { display:flex; }
  
  .hero-content { padding:0 2rem; }
  
  /* Shrink large section paddings to fit medium screens */
  #about, #contact { padding:4rem 2rem; gap:2.5rem; }
  #services, #gallery, #clients, #why, #team, #careers, #testimonials { padding:4rem 2rem; }
  #iso-banner { padding:2.5rem 2rem; }
  
  /* Adjust grids for medium screens */
  .services-grid { grid-template-columns:repeat(2,1fr); }
  .clients-grid { grid-template-columns:repeat(3,1fr); }
  .gallery-grid { grid-template-columns:repeat(2,1fr); }
  .footer-grid { grid-template-columns:1fr 1fr; gap:2rem; }
  .team-grid { grid-template-columns:repeat(3,1fr); gap:1.2rem; }
  .testi-grid { grid-template-columns:repeat(2,1fr); }
  
  .why-grid { grid-template-columns:1fr; gap:2rem; }
  .why-visual { height:320px; }
  
  .careers-layout { grid-template-columns:1fr; gap:2.5rem; }
  .career-form-wrap { position:static; }
  
  footer { padding:2.5rem 2rem 1.5rem; }
  .page-hero { padding:0 2rem 2.5rem; }
}

/* MOBILE & SMALL TABLETS (Under 768px) */
@media (max-width:768px) {
  /* ── Hero adjustments on mobile ── */
  .hero {
    min-height:100svh;
    flex-direction:column;
    padding-bottom:0;
  }
  .hero-content {
    padding:6.5rem 1.4rem 2rem;
    max-width:100%;
  }
  .hero h1 { font-size:clamp(2.2rem,9vw,3rem); }
  .hero-sub { font-size:.88rem; max-width:100%; }
  .hero-tag { font-size:.67rem; letter-spacing:3px; }

  /* Keep hero canvas hidden (perf), keep CSS cranes visible + animated */
  #hero-canvas { display:none; }
  .hero-overlay { background:rgba(13,33,70,.78); }

  /* Cranes: smaller & semi-transparent but FULLY ANIMATED */
  .hero-cranes {
    width:100%; opacity:.55;
    pointer-events:none;
  }
  .crane-wrap.tower {
    right:0%; bottom:130px;
    transform:scale(.58);
    transform-origin:bottom right;
  }
  .crane-wrap.drill {
    right:22%; bottom:110px;
    transform:scale(.5);
    transform-origin:bottom right;
  }
  /* Re-enable all crane animations on mobile */
  .crane-arm-group { animation:armSwing 4s ease-in-out infinite !important; animation-play-state:running !important; }
  .crane-cable    { animation:cableSway 4s ease-in-out infinite !important; animation-play-state:running !important; }
  .crane-hook     { animation:hookBob 2s ease-in-out infinite !important; animation-play-state:running !important; }
  .drill-bit      { animation:drillBit 1.8s ease-in-out infinite !important; animation-play-state:running !important; }
  .drill-light    { animation:drillGlow 1.8s ease-in-out infinite !important; animation-play-state:running !important; }

  .crane-ground { display:none; }

  /* Hero stats — 2×3 grid on mobile */
  .hero-stats {
    position:static !important;
    display:grid !important;
    grid-template-columns:1fr 1fr 1fr;
    gap:0;
    animation:none; opacity:1;
  }
  .hero-stats .stat {
    flex:none;
    padding:.75rem .6rem;
    border-right:1px solid var(--border);
    border-bottom:1px solid var(--border);
    gap:.5rem;
  }
  .hero-stats .stat:nth-child(3n) { border-right:none; }
  .hero-stats .stat:nth-last-child(-n+3) { border-bottom:none; }
  .stat-num  { font-size:1.55rem; }
  .stat-icon { font-size:1rem; }
  .stat-label{ font-size:.52rem; letter-spacing:1px; }

  /* Sections — compact padding */
  #about { grid-template-columns:1fr; padding:3rem 1.2rem; gap:2rem; }
  #contact { grid-template-columns:1fr; padding:3rem 1.2rem; gap:2rem; }
  #why { padding:3rem 1.2rem; }
  /* Cube animation on mobile — scale it down to fit */
  .why-visual {
    height:260px;
    perspective:700px;
  }
  .cube-scene {
    width:160px !important;
    height:160px !important;
  }
  .cube-face {
    width:160px !important;
    height:160px !important;
  }
  .face-front  { transform:translateZ(80px) !important; }
  .face-back   { transform:rotateY(180deg) translateZ(80px) !important; }
  .face-left   { transform:rotateY(-90deg) translateZ(80px) !important; }
  .face-right  { transform:rotateY(90deg) translateZ(80px) !important; }
  .face-top    { transform:rotateX(90deg) translateZ(80px) !important; }
  .face-bottom { transform:rotateX(-90deg) translateZ(80px) !important; }
  .cube-face .cf-num { font-size:2.4rem !important; }
  .cube-face .cf-label { font-size:.6rem !important; }
  .cube-ring { width:210px !important; height:210px !important; }
  .cube-scene.auto-spin { animation:rotateCube 14s linear infinite !important; animation-play-state:running !important; }
  #testimonials { padding:3rem 1.2rem; }
  #careers { padding:3rem 1.2rem; }
  #services, #gallery, #clients, #team { padding:3rem 1.2rem; }

  /* Grids */
  .services-grid { grid-template-columns:1fr; }
  .services-header { flex-direction:column; align-items:flex-start; gap:1rem; }
  .clients-grid { grid-template-columns:repeat(2,1fr); }
  .team-grid { grid-template-columns:repeat(2,1fr); gap:.8rem; }
  .testi-grid { grid-template-columns:1fr; }
  .form-row, .form-row-3 { grid-template-columns:1fr; }

  /* ISO Banner */
  #iso-banner { flex-direction:column; align-items:flex-start; padding:2rem 1.2rem; gap:1.2rem; }
  .iso-left { flex-direction:row; align-items:center; width:100%; }
  .iso-badge { width:90px; height:90px; font-size:.85rem; }
  .iso-right { width:100%; justify-content:space-between; gap:0; flex-wrap:nowrap; }
  .iso-stat { flex:1; }
  .iso-stat-num { font-size:1.6rem; }

  /* Gallery */
  .gallery-header { flex-direction:column; align-items:flex-start; gap:.8rem; }
  .gallery-grid { grid-template-columns:1fr 1fr; grid-auto-rows:150px; }
  .gallery-item.wide,.gallery-item.tall { grid-column:auto; grid-row:auto; }

  /* Footer */
  footer { padding:2.5rem 1.2rem 1.2rem; }
  .footer-grid { grid-template-columns:1fr; gap:1.8rem; }
  .footer-bottom { flex-direction:column; align-items:flex-start; gap:.6rem; }

  /* 3D service cards → flat on mobile */
  .service-card-wrap { height:auto; perspective:none; }
  .service-card-inner { transform:none !important; position:static; height:auto; display:block; }
  .service-front,.service-back { position:static; transform:none !important; backface-visibility:visible; height:auto; }
  .service-back { display:none; }
  .service-front .flip-hint { display:none; }

  /* Keep scroll-reveal lighter on mobile */
  .tilt-card { transform:none !important; }

  .careers-header { flex-direction:column; align-items:flex-start; gap:.8rem; }
  .page-hero { padding:0 1.2rem 2rem; min-height:28vh; }

  /* ── MOBILE ANIMATIONS ── */
  /* Floating badge pulse */
  .iso-badge { animation:pulse 2.5s ease infinite; }
  /* Section tags slide in */
  .section-tag { animation:fadeUp .6s ease both; }
}

/* SMALL MOBILE (Under 480px) */
@media (max-width:480px) {
  nav { padding:.7rem 1rem; }
  nav.scrolled { padding:.5rem 1rem; }
  .nav-logo-text { font-size:1.25rem; }
  .nav-logo img { height:38px !important; }

  .hero-content { padding:6rem 1rem 1.5rem; }
  .hero h1 { font-size:clamp(1.9rem,8.5vw,2.6rem); }
  .hero-sub { font-size:.82rem; line-height:1.7; }
  .hero-actions {
    flex-direction:column; align-items:stretch;
    width:100%; gap:.75rem;
  }
  .hero-actions .btn-primary,
  .hero-actions .btn-ghost {
    width:100%; text-align:center; justify-content:center;
    display:flex; align-items:center;
  }

  /* Stats: 2-column grid on small phones */
  .hero-stats {
    grid-template-columns:1fr 1fr !important;
  }
  .hero-stats .stat:nth-child(3n) { border-right:1px solid var(--border); }
  .hero-stats .stat:nth-child(2n) { border-right:none; }
  .hero-stats .stat:nth-last-child(-n+2) { border-bottom:none; }

  /* Cranes even smaller on very small phones */
  .crane-wrap.tower { transform:scale(.44); right:-2%; }
  .crane-wrap.drill  { transform:scale(.38); right:18%; }

  .clients-grid { grid-template-columns:1fr 1fr; }
  .team-grid { grid-template-columns:1fr 1fr; }
  .footer-grid { grid-template-columns:1fr; }

  .iso-right { flex-wrap:wrap; }
  .iso-stat { flex:1 1 45%; }
  .iso-stat-num { font-size:1.5rem; }

  .section-title { font-size:clamp(1.7rem,6.5vw,2.4rem); }
  .page-hero h1 { font-size:clamp(1.8rem,7.5vw,2.6rem); }
  .careers-header { flex-direction:column; gap:.7rem; }

  footer { padding:2rem .9rem 1rem; }
  .footer-tagline { max-width:100%; }
}
/* ══════════════════════════════════════════════════════════════
   PERFORMANCE & DEVICE COMPATIBILITY PATCH
   ══════════════════════════════════════════════════════════════ */

/* ── GPU COMPOSITING — prevents repaints on animated elements ── */
.reveal, .reveal-left, .reveal-right, .reveal-zoom {
  will-change: opacity, transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.reveal.vis, .reveal-left.vis, .reveal-right.vis, .reveal-zoom.vis {
  will-change: auto;   /* release after animation */
}
.mobile-menu { will-change: transform; }
nav { will-change: padding, box-shadow; }
.hero-cranes { will-change: auto; }

/* ── SMOOTH FONT RENDERING ── */
body, h1, h2, h3, h4, h5, h6, p, a, li, span, button, input, textarea, select {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ── FONT CONSISTENCY — every page uses these families ── */
h1, h2, h3 { font-family:'Bebas Neue', 'Barlow Condensed', sans-serif; }
body, p, li, td, th, input, textarea, select {
  font-family:'Barlow', sans-serif;
}
nav ul a, .section-tag, .page-hero-tag,
.mobile-menu a, .btn-primary, .btn-ghost, .btn-wa,
.section-sub, .footer-col h4, .service-tag,
.client-name, .stat-label, .iso-label,
.testi-author h5 { font-family:'Barlow Condensed', sans-serif; }

/* ── REDUCED MOTION — respect user preference ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal, .reveal-left, .reveal-right, .reveal-zoom {
    opacity: 1 !important;
    transform: none !important;
  }
  /* Do NOT disable crane animations in reduced-motion; they are decorative only.
     But remove the infinite CSS pulsing to help with battery. */
  .crane-arm-group, .crane-cable, .crane-hook,
  .drill-bit, .drill-light, .iso-badge { animation:none !important; }
}

/* ── PREVENT HORIZONTAL OVERFLOW ON EVERY BREAKPOINT ── */
html, body { max-width:100%; overflow-x:hidden; }
section, footer { overflow-x: hidden; }
img { max-width:100%; height:auto; }

/* ── TOUCH TARGET SIZES (accessibility & mobile usability) ── */
@media (max-width:768px) {
  nav ul a, .mobile-menu a { min-height:44px; }
  .btn-primary, .btn-ghost, .btn-wa { min-height:44px; }
  button, input[type="submit"] { min-height:44px; }
}

/* ══════════════════════════════════════════════════════════════
   FOOTER — CONSISTENT ACROSS ALL PAGES
   ══════════════════════════════════════════════════════════════ */
footer {
  background: #ffffff;
  padding: 4rem 4rem 2rem;
  color: #444;
  font-family: 'Barlow', sans-serif;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 3rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid #e5e5e5;
}
.footer-logo { margin-bottom: 1rem; }
.footer-tagline {
  font-size: .82rem;
  line-height: 1.7;
  color: #666;
  max-width: 280px;
  font-family: 'Barlow', sans-serif;
  font-weight: 400;
}
.footer-col h4 {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: .7rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1.2rem;
}
.footer-col ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: .6rem;
}
.footer-col ul li {
  font-size: .82rem;
  color: #555;
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  line-height: 1.5;
  font-weight: 400;
}
.footer-col ul a {
  color: #555;
  text-decoration: none;
  transition: color .2s;
  display: flex;
  align-items: center;
  gap: .5rem;
  font-weight: 400;
}
.footer-col ul a:hover { color: var(--accent); }
.f-ico { font-size: .9rem; flex-shrink:0; }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 1.8rem;
  flex-wrap: wrap;
  gap: 1rem;
}
.footer-bottom p {
  font-size: .72rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #888;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 400;
}
.footer-bottom-links {
  display: flex;
  gap: 1.5rem;
}
.footer-bottom-links a {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: .65rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #777;
  text-decoration: none;
  transition: color .2s;
  font-weight: 400;
}
.footer-bottom-links a:hover { color: var(--accent); }

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE — LARGE TABLETS (≤ 1200px)
   ══════════════════════════════════════════════════════════════ */
@media (max-width:1200px) {
  nav { padding:.9rem 2.5rem; }
  nav.scrolled { padding:.6rem 2.5rem; }
  footer { padding:3.5rem 2.5rem 2rem; }
  .footer-grid { grid-template-columns:1fr 1fr; gap:2.5rem; }
  #about { padding:6rem 2.5rem; }
  #services, #gallery, #clients, #why, #team, #testimonials, #careers {
    padding:6rem 2.5rem;
  }
  #contact { padding:6rem 2.5rem; gap:3rem; }
  #iso-banner { padding:3rem 2.5rem; }
}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE — TABLETS (≤ 1024px)  — refines existing rules
   ══════════════════════════════════════════════════════════════ */
@media (max-width:1024px) {
  .footer-grid { grid-template-columns:1fr 1fr; gap:2rem; }
  footer { padding:3rem 2rem 1.5rem; }
  .page-hero { min-height:34vh; }
}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE — MOBILE (≤ 768px) — secondary block kept minimal
   (main rules are in the block above ~line 1025)
   ══════════════════════════════════════════════════════════════ */
@media (max-width:768px) {
  /* Smooth tilt cards without 3D jank */
  .tilt-card { transform:none !important; transition:box-shadow .3s !important; }
  .testi-card { transition:box-shadow .3s !important; }
  .team-card  { transition:box-shadow .3s !important; }
}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE — SMALL MOBILE (≤ 480px)
   ══════════════════════════════════════════════════════════════ */
@media (max-width:480px) {
  nav { padding:.75rem 1rem; }
  nav.scrolled { padding:.5rem 1rem; }
  .nav-logo-text { font-size:1.2rem; }

  .hero h1 { font-size:clamp(2rem, 8vw, 2.8rem); }
  .hero-sub { font-size:.85rem; }
  .hero-actions { flex-direction:column; width:100%; gap:.8rem; }
  .hero-actions .btn-primary,
  .hero-actions .btn-ghost { width:100%; text-align:center; justify-content:center; }

  .hero-stats { grid-template-columns:1fr 1fr; }
  .hero-stats .stat { flex:none; }

  .iso-right { flex-direction:column; gap:1.2rem; }
  .iso-stat-num { font-size:1.8rem; }

  .gallery-grid { grid-template-columns:1fr; grid-auto-rows:200px; }
  .gallery-item.wide, .gallery-item.tall { grid-column:auto; grid-row:auto; }

  .clients-grid { grid-template-columns:1fr 1fr; }
  .team-grid { grid-template-columns:1fr; }
  .footer-grid { grid-template-columns:1fr; }

  .page-hero h1 { font-size:clamp(2rem,8vw,3rem); }
  .careers-header { flex-direction:column; gap:.8rem; }
}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE — TINY MOBILE (≤ 360px)
   ══════════════════════════════════════════════════════════════ */
@media (max-width:360px) {
  nav { padding:.6rem .8rem; }
  .nav-logo img { height:34px !important; }
  .hero-content { padding:5.5rem .85rem 1.5rem; }
  .hero h1 { font-size:1.75rem; line-height:1; }
  .hero-sub { font-size:.78rem; }
  .section-title { font-size:clamp(1.5rem,6.5vw,2rem); }
  footer { padding:1.8rem .75rem .9rem; }
  .crane-wrap.tower { transform:scale(.36); right:-4%; }
  .crane-wrap.drill  { transform:scale(.3);  right:14%; }
  .hero-stats { grid-template-columns:1fr 1fr !important; }
  .stat-num { font-size:1.3rem; }
  .stat-icon { font-size:.9rem; }
}

/* ── SERVICE CARD MOBILE FIX ── */
@media (max-width:768px) {
  .service-card-wrap { height:auto !important; perspective:none !important; }
  .service-card-inner { transform:none !important; position:static !important; height:auto !important; display:block !important; }
  .service-front, .service-back { position:static !important; transform:none !important; backface-visibility:visible !important; height:auto !important; }
  .service-back { display:none !important; }
  .service-front .flip-hint { display:none !important; }
  /* Add a tap indicator instead of flip hint */
  .service-front::after {
    content:'↓ Details';
    display:block;
    font-family:'Barlow Condensed',sans-serif;
    font-size:.62rem; letter-spacing:2px; text-transform:uppercase;
    color:var(--accent); margin-top:1rem; opacity:.7;
  }
}

/* ── SCROLL BAR STYLING (WebKit) ── */
::-webkit-scrollbar { width:6px; }
::-webkit-scrollbar-track { background:var(--bg-soft); }
::-webkit-scrollbar-thumb { background:var(--navy-mid); border-radius:3px; }
::-webkit-scrollbar-thumb:hover { background:var(--navy); }