/* ── SERVICES GROUP HEADER ── */
.services-group-header {
  border-left: 4px solid var(--red);
  padding-left: 20px;
  margin-bottom: 8px;
}
.services-group-header h2 {
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  color: var(--dark);
  margin-bottom: 6px;
}
.services-group-header p {
  font-size: 14px;
  color: var(--mid);
  margin: 0;
}

/* ── SINGLE SERVICE PAGE ── */
.service-single-header { margin-bottom: 32px; }
.service-single-header h1 { font-size: clamp(2rem, 4vw, 3rem); margin-bottom: 12px; }

.service-gallery { margin-bottom: 32px; }
.gallery-main { width: 100%; height: 400px; object-fit: cover; }
.gallery-thumbs { display: flex; gap: 8px; margin-top: 8px; }
.gallery-thumbs img { width: 80px; height: 60px; object-fit: cover; cursor: pointer; opacity: 0.6; transition: opacity 0.2s; border: 2px solid transparent; }
.gallery-thumbs img.active, .gallery-thumbs img:hover { opacity: 1; border-color: var(--red); }

.service-content h2 { font-size: 1.6rem; margin: 28px 0 12px; color: var(--dark); }
.service-content h3 { font-size: 1.2rem; margin: 20px 0 8px; }
.service-content p { font-size: 15px; line-height: 1.8; color: #444; }
.service-content ul { margin: 12px 0 20px 20px; }
.service-content ul li { font-size: 14px; line-height: 1.8; color: #444; margin-bottom: 4px; }

.service-scope {
  background: var(--light);
  border-left: 4px solid var(--red);
  padding: 20px 24px;
  margin: 24px 0;
}
.service-scope h3 { font-size: 13px; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--red); margin-bottom: 10px; }
.service-scope p { font-size: 14px; color: var(--mid); margin: 0; }

/* Related projects */
.related-section { margin-top: 48px; padding-top: 40px; border-top: 1px solid var(--border); }
.related-section h2 { font-size: 1.6rem; margin-bottom: 28px; }

/* ── ABOUT PAGE ── */
.about-hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; margin-bottom: 80px; }
.about-hero-content h2 { margin-bottom: 20px; }
.about-hero-content p { font-size: 15px; line-height: 1.8; color: var(--mid); }

.milestones { position: relative; padding-left: 40px; }
.milestones::before { content: ''; position: absolute; left: 12px; top: 0; bottom: 0; width: 2px; background: var(--border); }
.milestone { position: relative; margin-bottom: 40px; }
.milestone::before { content: ''; position: absolute; left: -35px; top: 6px; width: 16px; height: 16px; border-radius: 50%; background: var(--white); border: 3px solid var(--red); }
.milestone-year { font-family: var(--font-display); font-size: 13px; font-weight: 700; letter-spacing: 0.2em; color: var(--red); text-transform: uppercase; margin-bottom: 6px; }
.milestone-title { font-family: var(--font-display); font-size: 18px; font-weight: 700; margin-bottom: 8px; }
.milestone-desc { font-size: 14px; color: var(--mid); line-height: 1.7; }

.team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.team-card { text-align: center; }
.team-img { width: 100%; aspect-ratio: 1; object-fit: cover; margin-bottom: 16px; }
.team-name { font-family: var(--font-display); font-size: 18px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
.team-role { font-size: 12px; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--red); margin-top: 4px; }

/* ── PORTFOLIO PAGE ── */
.portfolio-filter-bar { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 36px; }
.filter-btn { font-family: var(--font-display); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 8px 16px; border: 1px solid var(--border); background: var(--white); color: var(--mid); cursor: pointer; transition: all var(--transition); }
.filter-btn:hover, .filter-btn.active { background: var(--red); border-color: var(--red); color: var(--white); }

/* ── SOLUTIONS PAGE ── */
.solution-industry-card { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin-bottom: 48px; border: 1px solid var(--border); overflow: hidden; }
.solution-industry-card:nth-child(even) { direction: rtl; }
.solution-industry-card:nth-child(even) > * { direction: ltr; }
.sol-img { height: 360px; background-size: cover; background-position: center; }
.sol-content { padding: 48px 40px; display: flex; flex-direction: column; justify-content: center; }
.sol-tag { font-family: var(--font-display); font-size: 10px; font-weight: 700; letter-spacing: 0.25em; text-transform: uppercase; color: var(--red); margin-bottom: 12px; }
.sol-content h2 { font-size: 2rem; margin-bottom: 16px; }
.sol-content p { font-size: 14px; color: var(--mid); line-height: 1.75; margin-bottom: 20px; }
.sol-items { list-style: none; display: flex; flex-direction: column; gap: 8px; margin-bottom: 24px; }
.sol-items li { font-size: 13px; color: var(--mid); padding-left: 18px; position: relative; }
.sol-items li::before { content: '→'; position: absolute; left: 0; color: var(--red); font-size: 11px; }

/* ── CONTACT PAGE ── */
.contact-page-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; }
.contact-info-item { display: flex; gap: 20px; margin-bottom: 32px; }
.contact-info-icon { width: 48px; height: 48px; background: var(--red); color: var(--white); display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; }
.contact-info-text h4 { font-family: var(--font-display); font-size: 13px; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; margin-bottom: 6px; color: var(--dark); }
.contact-info-text p, .contact-info-text a { font-size: 14px; color: var(--mid); }
.contact-info-text a:hover { color: var(--red); }
.contact-map { height: 400px; border: 1px solid var(--border); overflow: hidden; margin-top: 32px; }
.contact-map iframe { width: 100%; height: 100%; border: none; }

/* ── PRODUCTS/SHOP PAGE ── */
.shop-filter-sidebar { position: sticky; top: 90px; }
.price-range { margin: 12px 0; }
.product-card-price { font-family: var(--font-display); font-size: 20px; font-weight: 700; color: var(--red); }
.product-card-price .original { font-size: 14px; color: #999; text-decoration: line-through; margin-left: 8px; font-family: var(--font-body); font-weight: 400; }
.add-to-cart { width: 100%; justify-content: center; }

/* ── RESPONSIVE ── */
@media (max-width: 900px) {
  .about-hero-grid { grid-template-columns: 1fr; }
  .solution-industry-card { grid-template-columns: 1fr; }
  .solution-industry-card:nth-child(even) { direction: ltr; }
  .sol-img { height: 240px; }
  .contact-page-grid { grid-template-columns: 1fr; }
  .team-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .gallery-main { height: 240px; }
  .team-grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════
   CLIENTS SLIDER (homepage + about)
   ═══════════════════════════════════════════════════ */
.clients-slider-wrap { position:relative; overflow:hidden; }
.clients-track { display:flex; gap:0; transition:transform .5s ease; }
.clients-track .client-logo { min-width:25%; flex-shrink:0; }
.clients-slider-prev, .clients-slider-next {
  position:absolute; top:50%; transform:translateY(-50%);
  background:var(--white); border:1px solid var(--border);
  color:var(--dark); width:36px; height:36px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  font-size:16px; z-index:5; transition:all .2s; box-shadow:var(--shadow);
}
.clients-slider-prev { left:8px; }
.clients-slider-next { right:8px; }
.clients-slider-prev:hover, .clients-slider-next:hover { background:var(--red); color:#fff; border-color:var(--red); }

/* ═══════════════════════════════════════════════════
   SERVICE PAGE — Multi-image gallery slider
   ═══════════════════════════════════════════════════ */
.svc-gallery { position:relative; margin-bottom:32px; }
.svc-slides { display:flex; transition:transform .4s ease; }
.svc-slide { min-width:100%; height:380px; background:linear-gradient(135deg,#0A2240,#0077B6); flex-shrink:0; position:relative; overflow:hidden; }
.svc-slide img { width:100%; height:100%; object-fit:cover; display:block; }
.svc-slide-ph { width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; }
.svc-slide-ph span { font-family:var(--font-display); font-size:2rem; font-weight:900; color:rgba(255,255,255,.15); text-transform:uppercase; letter-spacing:.1em; }
.svc-slide-ph small { font-size:11px; color:rgba(255,255,255,.25); letter-spacing:.2em; text-transform:uppercase; }
.svc-gallery-prev, .svc-gallery-next {
  position:absolute; top:50%; transform:translateY(-50%);
  background:rgba(0,0,0,.45); color:#fff; border:none;
  width:44px; height:44px; cursor:pointer; font-size:18px;
  display:flex; align-items:center; justify-content:center; z-index:5; transition:background .2s;
}
.svc-gallery-prev { left:12px; }
.svc-gallery-next { right:12px; }
.svc-gallery-prev:hover, .svc-gallery-next:hover { background:var(--red); }
.svc-gallery-dots { position:absolute; bottom:12px; left:50%; transform:translateX(-50%); display:flex; gap:6px; z-index:5; }
.svc-gallery-dot { width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.4); cursor:pointer; border:none; transition:background .2s; }
.svc-gallery-dot.on { background:#fff; }
.svc-gallery-counter { position:absolute; top:12px; right:12px; background:rgba(0,0,0,.5); color:#fff; font-family:var(--font-display); font-size:12px; font-weight:700; letter-spacing:.1em; padding:4px 10px; z-index:5; }
.svc-thumbs { display:flex; gap:6px; margin-top:6px; flex-wrap:wrap; }
.svc-thumb { width:72px; height:52px; background:var(--light); cursor:pointer; overflow:hidden; border:2px solid transparent; transition:border-color .2s; flex-shrink:0; }
.svc-thumb:hover, .svc-thumb.on { border-color:var(--red); }
.svc-thumb img { width:100%; height:100%; object-fit:cover; }
.svc-thumb-ph { width:100%; height:100%; background:linear-gradient(135deg,#0A2240,#0077B6); display:flex; align-items:center; justify-content:center; }
.svc-thumb-ph span { font-size:9px; color:rgba(255,255,255,.4); font-weight:700; letter-spacing:.1em; text-transform:uppercase; }

/* ═══════════════════════════════════════════════════
   SERVICE PAGE — "Browse More" section at bottom
   ═══════════════════════════════════════════════════ */
.browse-more { margin-top:56px; padding-top:48px; border-top:2px solid var(--border); }
.browse-more-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:28px; gap:16px; flex-wrap:wrap; }
.browse-more-header h2 { font-size:clamp(1.3rem,2vw,1.8rem); }
.browse-more-tabs { display:flex; gap:0; border-bottom:1px solid var(--border); margin-bottom:24px; }
.bm-tab { background:none; border:none; border-bottom:3px solid transparent; padding:8px 18px; font-family:var(--font-display); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--mid); cursor:pointer; transition:all .2s; margin-bottom:-1px; }
.bm-tab.on { color:var(--red); border-bottom-color:var(--red); }
.bm-panel { display:none; }
.bm-panel.on { display:block; }
.bm-slider-wrap { position:relative; overflow:hidden; }
.bm-track { display:flex; gap:20px; transition:transform .4s ease; }
.bm-card { min-width:calc(33.333% - 14px); flex-shrink:0; border:1px solid var(--border); overflow:hidden; background:#fff; transition:box-shadow .2s, border-color .2s; display:flex; flex-direction:column; }
.bm-card:hover { box-shadow:var(--shadow-hover); border-color:var(--red); }
.bm-card-img { height:160px; background:linear-gradient(135deg,#0A2240,#0077B6); position:relative; overflow:hidden; }
.bm-card-img img { width:100%; height:100%; object-fit:cover; }
.bm-card-cat { position:absolute; top:8px; left:8px; background:var(--red); color:#fff; font-family:var(--font-display); font-size:9px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; padding:3px 8px; }
.bm-card-body { padding:14px 16px; flex:1; }
.bm-card-label { font-size:9px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--red); margin-bottom:5px; }
.bm-card-title { font-family:var(--font-display); font-size:14px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--dark); margin-bottom:6px; line-height:1.25; }
.bm-card-desc { font-size:12px; color:var(--mid); line-height:1.6; }
.bm-card-footer { padding:10px 16px 12px; border-top:1px solid var(--border); display:flex; justify-content:space-between; align-items:center; }
.bm-card-link { font-family:var(--font-display); font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--red); }
.bm-nav { display:flex; align-items:center; gap:12px; margin-top:16px; justify-content:center; }
.bm-prev, .bm-next { background:none; border:1px solid var(--border); font-family:var(--font-display); font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; padding:7px 16px; cursor:pointer; color:var(--dark); transition:all .2s; }
.bm-prev:hover, .bm-next:hover { background:var(--red); color:#fff; border-color:var(--red); }
.bm-dots { display:flex; gap:5px; }
.bm-dot { width:7px; height:7px; border-radius:50%; background:var(--border); cursor:pointer; border:none; transition:background .2s; }
.bm-dot.on { background:var(--red); }

/* ═══════════════════════════════════════════════════
   PORTFOLIO PAGE — Full gallery slider
   ═══════════════════════════════════════════════════ */
.pf-full-gallery { margin-bottom:32px; }
.pf-main-slide-wrap { position:relative; overflow:hidden; border:1px solid var(--border); }
.pf-main-slides { display:flex; transition:transform .4s ease; }
.pf-main-slide { min-width:100%; height:420px; background:linear-gradient(135deg,#0A2240,#0077B6); flex-shrink:0; }
.pf-main-slide img { width:100%; height:100%; object-fit:cover; display:block; }
.pf-main-slide-ph { width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.pf-slide-prev, .pf-slide-next { position:absolute; top:50%; transform:translateY(-50%); background:rgba(0,0,0,.45); color:#fff; border:none; width:46px; height:46px; cursor:pointer; font-size:18px; display:flex; align-items:center; justify-content:center; z-index:5; transition:background .2s; }
.pf-slide-prev { left:12px; }
.pf-slide-next { right:12px; }
.pf-slide-prev:hover, .pf-slide-next:hover { background:var(--red); }
.pf-slide-counter { position:absolute; bottom:12px; right:12px; background:rgba(0,0,0,.6); color:#fff; font-family:var(--font-display); font-size:12px; font-weight:700; letter-spacing:.1em; padding:4px 12px; }
.pf-thumbs-row { display:flex; gap:6px; margin-top:6px; overflow-x:auto; padding-bottom:4px; }
.pf-thumbs-row::-webkit-scrollbar { height:3px; }
.pf-thumbs-row::-webkit-scrollbar-thumb { background:var(--red); }
.pf-thumb { width:80px; height:56px; flex-shrink:0; cursor:pointer; border:2px solid transparent; overflow:hidden; background:var(--light); transition:border-color .2s; }
.pf-thumb.on, .pf-thumb:hover { border-color:var(--red); }
.pf-thumb img { width:100%; height:100%; object-fit:cover; }
.pf-thumb-ph { width:100%; height:100%; background:linear-gradient(135deg,#0A2240,#0077B6); display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-size:9px; color:rgba(255,255,255,.35); letter-spacing:.1em; text-transform:uppercase; }

/* ═══════════════════════════════════════════════════
   PORTFOLIO — More Projects feed with tabs
   ═══════════════════════════════════════════════════ */
.more-projects { margin-top:56px; padding-top:40px; border-top:2px solid var(--border); }
.more-projects h2 { font-size:clamp(1.3rem,2vw,1.8rem); margin-bottom:8px; }
.more-projects-intro { font-size:14px; color:var(--mid); margin-bottom:20px; }
.mp-tabs { display:flex; gap:0; border-bottom:1px solid var(--border); margin-bottom:24px; }
.mp-tab { background:none; border:none; border-bottom:3px solid transparent; padding:8px 20px; font-family:var(--font-display); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--mid); cursor:pointer; transition:all .2s; margin-bottom:-1px; }
.mp-tab.on { color:var(--red); border-bottom-color:var(--red); }
.mp-panel { display:none; }
.mp-panel.on { display:block; }
.mp-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.mp-card { border:1px solid var(--border); overflow:hidden; background:#fff; transition:all .2s; display:flex; flex-direction:column; }
.mp-card:hover { box-shadow:var(--shadow-hover); transform:translateY(-2px); border-color:var(--red); }
.mp-card-img { height:160px; background:linear-gradient(135deg,#0A2240,#0077B6); position:relative; }
.mp-card-img img { width:100%; height:100%; object-fit:cover; }
.mp-card-badge { position:absolute; top:8px; left:8px; background:var(--red); color:#fff; font-family:var(--font-display); font-size:9px; font-weight:700; letter-spacing:.15em; text-transform:uppercase; padding:3px 8px; }
.mp-card-body { padding:14px 16px; flex:1; }
.mp-card-cat { font-size:9px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--red); margin-bottom:5px; }
.mp-card-title { font-family:var(--font-display); font-size:14px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--dark); margin-bottom:6px; line-height:1.25; }
.mp-card-desc { font-size:12px; color:var(--mid); line-height:1.6; }
.mp-card-footer { padding:10px 16px 12px; border-top:1px solid var(--border); }
.mp-card-link { font-family:var(--font-display); font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--red); }
.mp-cta { margin-top:24px; display:flex; align-items:center; justify-content:center; gap:16px; padding:20px; background:var(--light); flex-wrap:wrap; }
.mp-cta p { font-size:14px; color:var(--mid); margin:0; }
@media(max-width:700px){ .mp-grid{grid-template-columns:1fr 1fr;} .bm-card{min-width:calc(50% - 10px);} }
@media(max-width:500px){ .mp-grid{grid-template-columns:1fr;} .bm-card{min-width:100%;} }


/* ── PRODUCT DETAIL PAGES ── */
.prod-detail-header { margin-bottom: 8px; }
.prod-detail-tag { font-size: 9px; font-weight: 700; letter-spacing: .25em; text-transform: uppercase; color: var(--red); margin-bottom: 6px; }

/* ── SHOP ORDER SUMMARY BOX ── */
.order-summary-box {
  background: #f0f8e8;
  border: 1px solid #b0d890;
  border-left: 4px solid #4a9e10;
  padding: 18px 20px;
  margin-bottom: 24px;
}
.order-summary-box h4 {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #2a6600;
  margin-bottom: 8px;
}
.order-summary-box p { font-size: 14px; color: #333; margin: 0; }
.enquiry-summary-box {
  background: #e8f4fd;
  border: 1px solid #a0c8e8;
  border-left: 4px solid #0077B6;
  padding: 18px 20px;
  margin-bottom: 24px;
}
.enquiry-summary-box h4 {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #005a8c;
  margin-bottom: 8px;
}
.enquiry-summary-box p { font-size: 14px; color: #333; margin: 0; }

/* ── ABOUT P&C SECTION responsive ── */
@media(max-width:900px) {
  .about-pc-grid { grid-template-columns: 1fr !important; }
}