/* ── HERO SLIDER ── */
.hero { position:relative; height:92vh; min-height:600px; overflow:hidden; background:var(--navy); }
.slide { position:absolute; inset:0; opacity:0; transition:opacity 1s ease; display:flex; align-items:center; }
.slide.active { opacity:1; }
.slide-bg { position:absolute; inset:0; }
.slide-bg svg { width:100%; height:100%; }
.slide-overlay { position:absolute; inset:0; }
.slide-content { position:relative; z-index:3; padding:0 6%; max-width:780px; }
.slide-eyebrow {
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(201,146,26,.15); border:1px solid rgba(201,146,26,.35);
  border-radius:30px; padding:7px 18px 7px 13px;
  font-size:13px; font-weight:700; letter-spacing:2px; text-transform:uppercase;
  color:var(--gold3); margin-bottom:28px;
}
.slide-eyebrow .blink { width:8px; height:8px; background:var(--gold3); border-radius:50%; animation:blink 2s ease-in-out infinite; }
@keyframes blink { 0%,100%{opacity:1}50%{opacity:.2} }
.slide h1 { font-family:'Bebas Neue',sans-serif; font-size:clamp(54px,7vw,96px); color:#fff; line-height:.93; letter-spacing:1px; margin-bottom:26px; }
.slide h1 em { font-style:normal; color:var(--gold3); }
.slide p { font-size:18px; font-weight:300; color:rgba(255,255,255,.68); line-height:1.78; max-width:540px; margin-bottom:40px; }
.slide-btns { display:flex; gap:14px; flex-wrap:wrap; }

/* right side panel */
.slide-panel {
  position:absolute; right:6%; top:50%; transform:translateY(-50%);
  z-index:3; display:flex; flex-direction:column; gap:16px;
  width:290px;
}
.slide-panel-card {
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1);
  backdrop-filter:blur(12px); border-radius:14px; padding:22px 24px;
  display:flex; gap:15px; align-items:center;
  animation:floatCard 6s ease-in-out infinite;
}
.slide-panel-card:nth-child(2){animation-delay:-2s}
.slide-panel-card:nth-child(3){animation-delay:-4s}
@keyframes floatCard { 0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)} }
.spc-icon { font-size:30px; flex-shrink:0; }
.spc-title { font-family:'Bebas Neue',sans-serif; font-size:18px; color:var(--gold3); letter-spacing:.5px; line-height:1; margin-bottom:4px; }
.spc-sub { font-size:13px; color:rgba(255,255,255,.48); line-height:1.45; }

/* slider controls */
.slider-dots { position:absolute; bottom:38px; left:50%; transform:translateX(-50%); display:flex; gap:8px; z-index:10; }
.sdot { width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,.25); cursor:pointer; transition:all .3s; }
.sdot.active { background:var(--gold3); width:30px; border-radius:5px; }
.slider-nav { position:absolute; right:6%; bottom:32px; display:flex; gap:10px; z-index:10; }
.s-btn { width:48px; height:48px; border-radius:50%; background:rgba(255,255,255,.07); border:1.5px solid rgba(255,255,255,.2); color:#fff; font-size:22px; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:all .25s; }
.s-btn:hover { background:var(--gold); border-color:var(--gold); color:var(--navy); }
/* progress bar */
.slide-progress { position:absolute; bottom:0; left:0; height:3px; background:var(--gold); transition:width .1s linear; z-index:10; }

/* ── WHY-US ICONS STRIP ── */
.icon-strip { display:grid; grid-template-columns:repeat(6,1fr); background:var(--white); border-bottom:1px solid var(--border); }
.is-item { display:flex; flex-direction:column; align-items:center; text-align:center; padding:30px 14px; border-right:1px solid var(--border); transition:background .2s; }
.is-item:last-child { border-right:none; }
.is-item:hover { background:var(--pale); }
.is-icon { font-size:30px; margin-bottom:11px; }
.is-title { font-size:13px; font-weight:700; color:var(--navy); letter-spacing:.5px; margin-bottom:4px; }
.is-sub { font-size:12px; color:var(--muted); line-height:1.45; }

/* ── SERVICES HOME ── */
.services-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--border); border:1px solid var(--border); border-radius:14px; overflow:hidden; }
.svc-tile { background:var(--white); padding:9px 9px; transition:all .3s; cursor:pointer; position:relative; overflow:hidden; }
.svc-tile::after { content:''; position:absolute; bottom:0; left:0; right:0; height:4px; background:var(--gold); transform:scaleX(0); transition:transform .3s; transform-origin:left; }
.svc-tile:hover { background:var(--pale); }
.svc-tile:hover::after { transform:scaleX(1); }
.svc-tile-num { font-family:'Bebas Neue',sans-serif; font-size:60px; color:rgba(11,24,41,.05); position:absolute; top:12px; right:18px; line-height:1; }

/* ── SERVICE TILE IMAGE ── */
/* ── SERVICE TILE IMAGE — uniform size, no cropping ── */
/* ── PRODUCT THUMBNAIL — uniform size, no cropping ── */
.prod-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;          /* fixed ratio → all cards same height */
  background: #eef0f4;           /* neutral bg visible behind letterboxed images */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.prod-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;           /* ← full image shown, zero cropping */
  object-position: center;
  display: block;
  padding: 12px;                 /* breathing room so image never touches edges */
}
.svc-tile-icon { width:58px; height:58px; background:var(--navy); border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:28px; margin-bottom:22px; }
.svc-tile-title { font-family:'Bebas Neue',sans-serif; font-size:26px; color:var(--navy); letter-spacing:.5px; margin-bottom:12px; }
.svc-tile-desc { font-size:15px; color:var(--muted); line-height:1.75; margin-bottom:18px; }
.svc-tags { display:flex; flex-wrap:wrap; gap:6px; }
.stag { background:var(--light); border-radius:5px; padding:4px 10px; font-size:12px; font-weight:600; color:var(--muted); }
.svc-tile-link { display:inline-flex; align-items:center; gap:6px; font-size:14px; font-weight:700; color:var(--gold); margin-top:20px; transition:gap .2s; }
.svc-tile:hover .svc-tile-link { gap:10px; }

/* ── FEATURED PRODUCTS ── */
.filter-row { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:38px; }
.filt { padding:10px 22px; border-radius:30px; border:1.5px solid var(--border); background:var(--white); font-size:14px; font-weight:600; color:var(--muted); cursor:pointer; transition:all .2s; }
.filt.on,.filt:hover { background:var(--navy); color:var(--white); border-color:var(--navy); }
.products-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }

/* ── ABOUT SPLIT ── */
.about-split { display:grid; grid-template-columns:1fr 1fr; gap:88px; align-items:center; }
.about-vis { position:relative; }
.about-frame { width:100%; aspect-ratio:4/5; background:linear-gradient(145deg,var(--navy) 0%,var(--navy3) 100%); border-radius:16px; display:flex; align-items:center; justify-content:center; overflow:hidden; position:relative; }
.about-frame-bg { position:absolute; inset:0; opacity:.04; background-image:repeating-linear-gradient(45deg,#fff 0,#fff 1px,transparent 1px,transparent 40px); }
.about-big-g { font-family:'Bebas Neue',sans-serif; font-size:260px; color:rgba(255,255,255,.05); user-select:none; line-height:1; }
.about-float { position:absolute; bottom:-24px; right:-24px; background:var(--gold); border-radius:12px; padding:24px 28px; box-shadow:var(--shadow2); text-align:center; }
.af-num { font-family:'Bebas Neue',sans-serif; font-size:46px; color:var(--navy); line-height:1; }
.af-label { font-size:12px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:rgba(11,24,41,.6); }
.about-vals { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:34px; }
.aval { border-left:3px solid var(--gold); padding:15px 17px; background:var(--off); border-radius:0 8px 8px 0; }
.aval-t { font-size:14px; font-weight:700; color:var(--navy); margin-bottom:4px; letter-spacing:.3px; }
.aval-d { font-size:14px; color:var(--muted); line-height:1.6; }
.about-text-body { font-size:15px; color:var(--muted); line-height:1.82; margin-top:18px; }
.mission-block { background:var(--navy); border-radius:12px; padding:30px; margin-top:28px; position:relative; overflow:hidden; }
.mission-block::before { content:''; position:absolute; top:-40px; right:-40px; width:140px; height:140px; background:radial-gradient(circle,rgba(201,146,26,.18) 0%,transparent 70%); }
.mission-block blockquote { font-size:16px; font-weight:300; color:rgba(255,255,255,.72); line-height:1.82; font-style:italic; margin:0; }
.mission-block cite { display:block; font-size:13px; font-weight:700; color:var(--gold2); margin-top:14px; font-style:normal; letter-spacing:1px; }

/* ── TARGETS ── */
.targets-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.target-card { background:var(--white); border:1px solid var(--border); border-radius:12px; padding:28px 24px; text-align:center; transition:all .3s; }
.target-card:hover { border-color:var(--gold); box-shadow:0 8px 28px rgba(201,146,26,.12); transform:translateY(-4px); }
.tc-icon { font-size:36px; margin-bottom:13px; }
.tc-name { font-family:'Bebas Neue',sans-serif; font-size:20px; color:var(--navy); letter-spacing:.5px; margin-bottom:6px; }
.tc-desc { font-size:14px; color:var(--muted); line-height:1.6; }

/* ── WHY GRID ── */
.why-layout { display:grid; grid-template-columns:1.1fr 1fr; gap:72px; align-items:start; }
.why-list { margin-top:20px; display:flex; flex-direction:column; gap:0; }
.why-row { display:flex; gap:20px; align-items:flex-start; padding:24px 0; border-bottom:1px solid var(--border); }
.why-row:last-child { border-bottom:none; }
.why-icon { width:50px; height:50px; background:var(--pale); border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:23px; flex-shrink:0; }
.why-title { font-size:16px; font-weight:700; color:var(--navy); margin-bottom:5px; }
.why-text { font-size:15px; color:var(--muted); line-height:1.72; }
.why-box { background:var(--navy); border-radius:14px; padding:42px; color:#fff; }
.why-box h3 { font-family:'Bebas Neue',sans-serif; font-size:32px; color:#fff; margin-bottom:8px; }
.why-box p { font-size:15px; color:rgba(255,255,255,.52); margin-bottom:28px; line-height:1.72; }
.serve-list { list-style:none; }
.serve-list li { display:flex; align-items:center; gap:12px; font-size:15px; color:rgba(255,255,255,.68); padding:12px 0; border-bottom:1px solid rgba(255,255,255,.07); }
.serve-list li:last-child { border-bottom:none; }
.serve-list li::before { content:'✓'; color:var(--gold3); font-weight:800; flex-shrink:0; }
.why-contact { margin-top:24px; background:var(--gold); border-radius:12px; padding:26px 28px; display:flex; gap:16px; align-items:center; }
.wc-icon { font-size:34px; flex-shrink:0; }
.wc-title { font-family:'Bebas Neue',sans-serif; font-size:24px; color:var(--navy); line-height:1; margin-bottom:4px; }
.wc-sub { font-size:14px; color:rgba(11,24,41,.65); }

/* ── PROCESS ── */
.process-steps { display:flex; gap:0; margin-top:64px; position:relative; }
.process-steps::before { content:''; position:absolute; top:34px; left:4%; right:4%; height:2px; background:linear-gradient(to right,var(--gold),var(--gold2),var(--gold)); opacity:.3; z-index:0; }
.proc-step { flex:1; display:flex; flex-direction:column; align-items:center; text-align:center; padding:0 14px; position:relative; z-index:1; }
.proc-circle { width:70px; height:70px; border-radius:50%; background:var(--navy2); border:2px solid rgba(201,146,26,.35); display:flex; align-items:center; justify-content:center; font-family:'Bebas Neue',sans-serif; font-size:28px; color:var(--gold); margin-bottom:24px; box-shadow:0 0 0 8px var(--navy); transition:all .3s; cursor:pointer; }
.proc-step:hover .proc-circle { background:var(--gold); color:var(--navy); border-color:var(--gold); }
.proc-title { font-family:'Bebas Neue',sans-serif; font-size:19px; color:#fff; letter-spacing:.5px; margin-bottom:10px; }
.proc-text { font-size:14px; color:rgba(255,255,255,.48); line-height:1.68; }

/* ── TESTIMONIALS ── */
.testi-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.testi-card { background:var(--off); border:1px solid var(--border); border-radius:14px; padding:32px; transition:all .3s; }
.testi-card:hover { border-color:var(--gold); box-shadow:0 8px 28px rgba(201,146,26,.1); }
.testi-stars { color:var(--gold); font-size:18px; letter-spacing:2px; margin-bottom:18px; }
.testi-quote { font-size:16px; color:var(--text); line-height:1.82; font-style:italic; margin-bottom:24px; }
.testi-author { display:flex; align-items:center; gap:13px; }
.testi-av { width:46px; height:46px; border-radius:50%; background:var(--navy); display:flex; align-items:center; justify-content:center; font-family:'Bebas Neue',sans-serif; font-weight:800; font-size:17px; color:var(--gold3); flex-shrink:0; }
.testi-name { font-size:15px; font-weight:700; color:var(--navy); }
.testi-role { font-size:13px; color:var(--muted); }

/* ── RESPONSIVE ── */
@media(max-width:1100px){ .products-grid{grid-template-columns:repeat(3,1fr);} .slide-panel{display:none;} }
@media(max-width:900px){
  .services-grid{grid-template-columns:1fr 1fr;}
  .about-split{grid-template-columns:1fr;gap:40px;}
  .about-vis{display:none;}
  .targets-grid{grid-template-columns:1fr 1fr;}
  .why-layout{grid-template-columns:1fr;}
  .testi-grid{grid-template-columns:1fr 1fr;}
  .process-steps{flex-wrap:wrap;gap:32px;}
  .process-steps::before{display:none;}
  .proc-step{width:45%;min-width:160px;}
  .icon-strip{grid-template-columns:repeat(3,1fr);}
  .is-item{border-bottom:1px solid var(--border);}
}
@media(max-width:768px){
  .hero{height:auto;min-height:100vh;}
  .services-grid{grid-template-columns:1fr;}
  .products-grid{grid-template-columns:1fr 1fr;}
  .targets-grid{grid-template-columns:1fr 1fr;}
  .testi-grid{grid-template-columns:1fr;}
  .icon-strip{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:900px){
  .hero{min-height:100svh;}
  .about-split{grid-template-columns:1fr!important;gap:32px;}
  .about-vis{display:none;}
  .why-layout{grid-template-columns:1fr!important;}
  .services-grid{grid-template-columns:1fr 1fr!important;}
  .products-grid{grid-template-columns:repeat(2,1fr)!important;}
  .testi-grid{grid-template-columns:1fr 1fr!important;}
  .targets-grid{grid-template-columns:1fr 1fr!important;}
  .icon-strip{grid-template-columns:repeat(3,1fr)!important;}
  .process-steps::before{display:none;}
  .process-steps{flex-wrap:wrap;gap:24px;}
  .proc-step{width:calc(50% - 12px);}
  .hero-stats{flex-wrap:wrap;gap:20px;}
  .slide-panel{display:none;}
}
@media(max-width:640px){
  .hero{height:auto;padding-bottom:40px;}
  .slide-content{padding:0 4%;}
  .slide h1{font-size:clamp(40px,10vw,60px);}
  .slide p{font-size:15px;}
  .slide-btns{flex-direction:column;gap:10px;}
  .slide-btns a{width:100%;justify-content:center;}
  .icon-strip{grid-template-columns:repeat(2,1fr)!important;}
  .services-grid{grid-template-columns:1fr!important;}
  .products-grid{grid-template-columns:1fr 1fr!important;}
  .targets-grid{grid-template-columns:1fr 1fr!important;}
  .testi-grid{grid-template-columns:1fr!important;}
  .proc-step{width:100%;}
  .hero-stats .hero-stat-num{font-size:30px;}
  .sec{padding:56px 4%;}
  .about-vals{grid-template-columns:1fr!important;}
  .mission-block{padding:22px;}
  .why-list .why-row{flex-direction:row;}
}
@media(max-width:380px){
  .products-grid{grid-template-columns:1fr!important;}
  .targets-grid{grid-template-columns:1fr!important;}
}

/* ════════════════════════════
   MEDIA QUERIES — Service Lines
════════════════════════════ */

/* Laptop → 3 columns */
@media (max-width: 1199px) {
  .services-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; }
}

/* Tablet landscape → 2 columns */
@media (max-width: 900px) {
  .services-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .sec-head { flex-direction: column; align-items: flex-start; }
}

/* Tablet portrait → 2 columns tighter */
@media (max-width: 640px) {
  .services-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .svc-tile { padding: 16px; }
  .svc-tile-title { font-size: 22px; }
  .svc-tile-desc { font-size: 13px; }
  .btn-dark { width: 100%; text-align: center; }
}

/* Mobile → 1 column */
@media (max-width: 480px) {
  .services-grid { grid-template-columns: 1fr; gap: 14px; }
  .svc-tile-img-wrap { aspect-ratio: 16 / 9; } /* wider feels better on mobile */
}

/* Very small phones */
@media (max-width: 360px) {
  .svc-tile-title { font-size: 20px; }
  .svc-tile-desc { font-size: 12.5px; }
}
