/*
===============================================================================
ALSTHOM GROUP - MAIN STYLESHEET
File: css/style.css
All custom styles from home(7).html are organized section-wise below.
===============================================================================
*/

/* ==========================================================================
   01. GLOBAL / THEME
   ========================================================================== */
:root{
      --primary:#ef4b23;
      --dark:#161616;
      --muted:#777;
      --cream:#f7f3ee;
      --light:#fbfaf8;
    }
    html{scroll-behavior:smooth}
    body{font-family:"DM Sans",sans-serif;color:var(--dark);background:#fff}
    h1,h2,h3,h4{font-weight:700}
    .serif{font-family:"Playfair Display",serif}
/* ==========================================================================
   02. TOP BAR + NAVIGATION
   ========================================================================== */
    .topbar{background:#151515;color:#fff;font-size:.85rem}
    .navbar{background:#fff;transition:.3s}
    .navbar-brand img{height:52px;width:auto}
    .navbar-brand .brand-text{font-weight:800;letter-spacing:.08em;line-height:1}
    .navbar-brand small{display:block;font-size:.56rem;letter-spacing:.22em;color:#888}
    .nav-link{font-weight:600;margin:0 .35rem}
    .nav-link:hover,.nav-link.active{color:var(--primary)!important}

/* ==========================================================================
   03. HERO / BANNER
   ========================================================================== */
    .hero{
      min-height:88vh;
      position:relative;
      display:flex;
      align-items:center;
      overflow:hidden;
      isolation:isolate;
      background:#111;
    }
    .hero-slide{
      position:absolute;
      inset:0;
      z-index:0;
      background-position:center;
      background-size:cover;
      background-repeat:no-repeat;
      opacity:0;
      transform:scale(1.03);
      transition:opacity 1.4s ease-in-out, transform 6s ease;
    }
    .hero-slide.active{
      opacity:1;
      transform:scale(1);
    }

    .hero-dots{
      position:absolute;
      left:50%;
      bottom:42px;
      transform:translateX(-50%);
      z-index:4;
      display:flex;
      align-items:center;
      justify-content:center;
      gap:10px;
    }
    .hero-dot{
      width:10px;
      height:10px;
      padding:0;
      border:1px solid rgba(255,255,255,.9);
      border-radius:50%;
      background:rgba(255,255,255,.45);
      cursor:pointer;
      transition:all .25s ease;
    }
    .hero-dot:hover,
    .hero-dot.active{
      background:#fff;
      transform:scale(1.25);
    }
    .back-to-top{
      position:fixed;
      right:24px;
      bottom:24px;
      z-index:1050;
      width:46px;
      height:46px;
      border:0;
      border-radius:50%;
      background:var(--primary);
      color:#fff;
      display:flex;
      align-items:center;
      justify-content:center;
      opacity:0;
      visibility:hidden;
      transform:translateY(12px);
      transition:opacity .3s ease, visibility .3s ease, transform .3s ease, background .2s ease;
      box-shadow:0 5px 18px rgba(0,0,0,.18);
      cursor:pointer;
    }
    .back-to-top:hover{background:#cf3916}
    .back-to-top.show{
      opacity:1;
      visibility:visible;
      transform:translateY(0);
    }

    .hero-overlay{
      position:absolute;
      inset:0;
      z-index:1;
      background:linear-gradient(90deg,rgba(0,0,0,.72),rgba(0,0,0,.28));
    }
    .hero:after{
      content:"";position:absolute;inset:auto 0 0;height:120px;
      background:linear-gradient(transparent,#fff);z-index:1
    }
    .hero-content{position:relative;z-index:2;color:#fff;max-width:780px}
    .eyebrow{letter-spacing:.22em;text-transform:uppercase;font-size:.78rem;font-weight:700;color:var(--primary)}
	.eyebrow2{letter-spacing:.22em;text-transform:uppercase;font-size:.60rem;font-weight:700;color:var(--primary)}
    .hero h1{font-size:clamp(3rem,7vw,6.8rem);line-height:.98}
    .hero p{font-size:1.12rem;max-width:650px;color:#eee}
    .btn-brand{background:var(--primary);border:1px solid var(--primary);color:#fff;border-radius:0;padding:.85rem 1.5rem;font-weight:700}
    .btn-brand:hover{background:#cf3916;border-color:#cf3916;color:#fff}
    .btn-outline-light{border-radius:0;padding:.85rem 1.5rem;font-weight:700}

/* ==========================================================================
   04. COMMON SECTION STYLES
   ========================================================================== */
    .section{padding:100px 0}
    .section-title{font-size:clamp(2.2rem,4vw,2rem);line-height:1.05}
    .intro-img{height:540px;object-fit:cover;width:100%}
    .orange-line{width:70px;height:4px;background:var(--primary);display:inline-block;margin-bottom:20px}

/* ==========================================================================
   05. BUSINESS CARDS
   ========================================================================== */
    .sector-card{position:relative;height:390px;overflow:hidden;color:#fff}
    .sector-card img{width:100%;height:100%;object-fit:cover;transition:.5s}
    .sector-card:after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 35%,rgba(0,0,0,.82))}
    .sector-card:hover img{transform:scale(1.06)}
    .sector-content{position:absolute;z-index:2;left:28px;right:28px;bottom:26px}
    .sector-content i{font-size:2rem;color:var(--primary)}
    .sector-content p{color:#ddd;margin:0}

/* ==========================================================================
   06. JOURNEY / TIMELINE
   ========================================================================== */
    .journey{background:var(--cream)}
    .timeline{border-left:2px solid #ddd;margin-left:20px;padding-left:35px}
    .timeline-item{position:relative;margin-bottom:35px}
    .timeline-item:before{content:"";position:absolute;left:-45px;top:7px;width:18px;height:18px;background:var(--primary);border:4px solid var(--cream);border-radius:50%}
    .year{font-size:1.5rem;font-weight:800;color:var(--primary)}

/* ==========================================================================
   07. PRODUCTS / AWARDS CAROUSEL
   ========================================================================== */
    .stat{padding:30px;border-top:1px solid #ddd}
    .stat strong{font-size:3rem;display:block}
    .award{height:260px;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:18px;overflow:hidden}
    .award img{width:100%;height:190px;max-width:100%;object-fit:contain;display:block;opacity:.9}
    .award .eyebrow2{width:100%;min-height:32px;margin-top:8px;display:flex;align-items:center;justify-content:center;line-height:1.2;text-align:center}

   .awards-slider{position:relative}
    .awards-viewport{overflow:hidden}
    .awards-track{display:flex;flex-wrap:nowrap;transition:transform .4s ease}
    .award-slide{flex:0 0 25%;max-width:25%;padding:0 .375rem;box-sizing:border-box}
    .awards-track > .col-6,.awards-track > .col-md-3{flex:0 0 25%;max-width:25%;padding:0 .375rem;box-sizing:border-box}
    .award-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:44px;height:44px;border:0;background:#161616;color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:.2s}
    .award-nav:hover{background:var(--primary)}
    .award-nav:disabled{opacity:.3;cursor:not-allowed}
    .award-nav-left{left:-22px}
    .award-nav-right{right:-22px}
    @media(max-width:991px){
      .award-slide{flex:0 0 33.333333%;max-width:33.333333%}
      .awards-track > .col-6,.awards-track > .col-md-3{flex:0 0 33.333333%;max-width:33.333333%}
      .award-nav-left{left:0}
      .award-nav-right{right:0}
    }
    @media(max-width:575px){
      .award-slide{flex:0 0 100%;max-width:100%}
      .awards-track > .col-6,.awards-track > .col-md-3{flex:0 0 100%;max-width:100%}
      .award{height:260px}
    }


/* ==========================================================================
   08. LEADERSHIP
   ========================================================================== */
    .person-card img{width:100%;height:360px;object-fit:cover;filter:grayscale(15%)}
    .person-card h4{margin-top:18px;margin-bottom:4px}
    .person-card span{color:var(--primary);font-weight:600}

/* ==========================================================================
   09. PROJECTS / LATEST UPDATES
   ========================================================================== */
    /* Latest Updates / Projects & Products:
       keep a fixed card image area while showing the complete source image
       without cropping or stretching. */
    .news-card-image{
      width:100%;
      height:230px;
      object-fit:contain;
      object-position:center;
      display:block;
      background:#f5f5f5;
    }
    @media (max-width:575.98px){
      .news-card-image{height:220px;}
    }

    /* Latest Updates / Projects carousel
       Desktop: 4 cards visible at a time.
       Tablet: 2 cards.
       Mobile: 1 card.
       Autoplay, arrows and dot navigation are controlled by main.js. */

    .projects-slider{
      position:relative;
      width:100%;
    }

    .projects-viewport{
      overflow:hidden;
      width:100%;
    }

    .projects-track{
      display:flex;
      flex-wrap:nowrap;
      transition:transform .75s cubic-bezier(.22,1,.36,1);
      will-change:transform;
    }

    .projects-track > .project-card{
      flex:0 0 25%;
      max-width:25%;
      min-width:0;
      padding-left:.75rem;
      padding-right:.75rem;
      opacity:1;
      transform:none;
      box-sizing:border-box;
    }

    .projects-track > .project-card > article{
      overflow:hidden;
      background:#fff;
      transition:transform .35s ease, box-shadow .35s ease;
    }

    .projects-track > .project-card > article:hover{
      transform:translateY(-5px);
      box-shadow:0 12px 30px rgba(0,0,0,.10);
    }

    .news-card-image{
      width:100%;
      height:230px;
      object-fit:contain;
      object-position:center;
      display:block;
      background:#f5f5f5;
    }

    .project-nav{
      position:absolute;
      top:50%;
      transform:translateY(-50%);
      z-index:4;
      width:44px;
      height:44px;
      border:0;
      background:#161616;
      color:#fff;
      display:flex;
      align-items:center;
      justify-content:center;
      cursor:pointer;
      transition:background .2s ease, opacity .2s ease;
      box-shadow:0 4px 14px rgba(0,0,0,.15);
    }

    .project-nav:hover{
      background:var(--primary);
    }

    .project-nav:focus-visible{
      outline:3px solid rgba(239,75,35,.35);
      outline-offset:3px;
    }

    .project-nav-left{left:-22px}
    .project-nav-right{right:-22px}

    .projects-dots{
      display:flex;
      align-items:center;
      justify-content:center;
      gap:10px;
      margin-top:28px;
    }

    .project-dot{
      width:10px;
      height:10px;
      padding:0;
      border:1px solid #999;
      border-radius:50%;
      background:#d5d5d5;
      cursor:pointer;
      transition:all .25s ease;
    }

    .project-dot:hover,
    .project-dot.active{
      background:var(--primary);
      border-color:var(--primary);
      transform:scale(1.25);
    }

    @media(max-width:991.98px){
      .projects-track > .project-card{
        flex:0 0 50%;
        max-width:50%;
      }

      .project-nav-left{left:4px}
      .project-nav-right{right:4px}
    }

    @media(max-width:575.98px){
      .projects-track > .project-card{
        flex:0 0 100%;
        max-width:100%;
        padding-left:.25rem;
        padding-right:.25rem;
      }

      .project-nav{
        width:38px;
        height:38px;
      }

      .project-nav-left{left:6px}
      .project-nav-right{right:6px}

      .projects-dots{
        margin-top:22px;
      }

      .news-card-image{
        height:220px;
      }
    }

    @media(prefers-reduced-motion:reduce){
      .projects-track{
        transition:none !important;
      }
    }

/* ==========================================================================
   10. PHILOSOPHY / QUOTE
   ========================================================================== */
    .quote-section{background:var(--dark);color:#fff}
    .quote{font-family:"Playfair Display",serif;font-size:clamp(1.7rem,3vw,3rem);line-height:1.25}
    .quote-author{color:#bbb}

/* ==========================================================================
   11. CONTACT
   ========================================================================== */
    .contact-box{background:var(--cream);padding:50px}
    .form-control,.form-select{border-radius:0;padding:13px 15px;border:1px solid #ddd}
    .form-control:focus{border-color:var(--primary);box-shadow:0 0 0 .15rem rgba(239,75,35,.12)}

.bg-secondary {
    background-color: #E3E3E3 !important; /* Replace with your HEX, RGB, or color name */
}



/* ==========================================================================
   12. FOOTER
   ========================================================================== */
    footer{background:#111;color:#aaa}
    footer a{color:#aaa;text-decoration:none}
    footer a:hover{color:#fff}
    .social a{display:inline-flex;width:40px;height:40px;border:1px solid #444;align-items:center;justify-content:center;margin-right:6px}
    .social a:hover{border-color:var(--primary);color:var(--primary)}

    @media(max-width:991px){
      .navbar-collapse{padding:15px 0}
      .hero{min-height:78vh}

      .hero-dots{bottom:30px}
      .back-to-top{right:16px;bottom:16px}
      .section{padding:75px 0}
      .intro-img{height:420px;margin-top:35px}
    }
  

/* ==========================================================================
   13. RESPONSIVE TOP BAR
   ========================================================================== */
    /* Responsive Top Bar */
    .topbar .container{
      gap: 18px;
    }
    .topbar .topbar-location,
    .topbar .topbar-contact{
      min-width: 0;
    }
    .topbar .topbar-location a,
    .topbar .topbar-contact a{
      overflow-wrap: anywhere;
    }

    @media (max-width: 767.98px){
      .topbar{
        font-size: .72rem;
      }
      .topbar .container{
        display: flex !important;
        flex-direction: column;
        align-items: stretch !important;
        gap: 4px;
        padding-left: 16px;
        padding-right: 16px;
      }
      .topbar .topbar-location,
      .topbar .topbar-contact{
        display: block;
        width: 100%;
        line-height: 1.45;
      }
      .topbar .topbar-contact{
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        column-gap: 8px;
        row-gap: 2px;
      }
      .topbar .topbar-contact .topbar-email{
        width: 100%;
      }
      .topbar .topbar-contact .topbar-divider{
        display: none;
      }
    }

    @media (max-width: 380px){
      .topbar{
        font-size: .68rem;
      }
      .topbar .container{
        padding-left: 12px;
        padding-right: 12px;
      }
    }


/* ==========================================================================
   14. SCROLL REVEAL ANIMATIONS
   ========================================================================== */
    /* Smooth scroll-reveal animations */
    .scroll-reveal{
      opacity: 1;
      transform: none;
    }

    body.js-enabled .scroll-reveal{
      opacity: 0;
      transform: translateY(45px);
      transition:
        opacity 1.2s ease,
        transform 1.2s cubic-bezier(.22,1,.36,1);
      will-change: opacity, transform;
    }

    body.js-enabled .scroll-reveal.reveal-visible{
      opacity: 1;
      transform: translateY(0);
    }

    .scroll-reveal-left{
      opacity: 0;
      transform: translateX(-45px);
      transition:
        opacity 1.25s ease,
        transform 1.25s cubic-bezier(.22,1,.36,1);
      will-change: opacity, transform;
    }

    .scroll-reveal-right{
      opacity: 0;
      transform: translateX(45px);
      transition:
        opacity 1.25s ease,
        transform 1.25s cubic-bezier(.22,1,.36,1);
      will-change: opacity, transform;
    }

    .scroll-reveal-left.reveal-visible,
    .scroll-reveal-right.reveal-visible{
      opacity: 1;
      transform: translateX(0);
    }

    .reveal-delay-1{ transition-delay:.12s; }
    .reveal-delay-2{ transition-delay:.24s; }
    .reveal-delay-3{ transition-delay:.36s; }
    .reveal-delay-4{ transition-delay:.48s; }

    @media (prefers-reduced-motion: reduce){
      .scroll-reveal,
      .scroll-reveal-left,
      .scroll-reveal-right{
        opacity: 1;
        transform: none;
        transition: none;
      }
    }

/* ==========================================================================
   15. RESPONSIVE LAYOUT
   ========================================================================== */
    /* Responsive improvements */
    *, *::before, *::after { box-sizing: border-box; }
    img, svg, video, canvas { max-width: 100%; }
    iframe { max-width: 100%; }

    .container { width: 100%; }
    .navbar-brand { min-width: 0; }
    .navbar-brand img { max-width: 220px; height: auto; max-height: 52px; }
    .hero-content { width: 100%; }
    .hero h2 { font-size: clamp(2.2rem, 8vw, 5rem); }
    .hero p br { display: none; }

    .map-wrapper {
      position: relative;
      width: 100%;
      height: 0;
      padding-bottom: 68.5%;
      min-height: 240px;
      overflow: hidden;
      background: #ddd;
    }
    .map-wrapper iframe {
      position: absolute;
      inset: 0;
      width: 100% !important;
      height: 100% !important;
      border: 0;
    }

    .contact-box { overflow: hidden; }
    .contact-box .section-title { margin: 0 0 1.5rem; }
    .timeline { margin-right: 0; }
    .sector-content { overflow-wrap: anywhere; }
    .award-slide, .awards-track > .col-6, .awards-track > .col-md-3 {
      min-width: 0;
    }

    @media (max-width: 991.98px) {
      .navbar-brand img { max-width: 190px; }
      .hero { min-height: 78vh; }
      .hero-content { padding-top: 20px; padding-bottom: 60px; }
      .section { padding: 70px 0; }
      .intro-img { height: 420px; margin-top: 10px; }
      .sector-card { height: 360px; }
      .contact-box { padding: 35px; }
      .map-wrapper { padding-bottom: 62%; }
    }

    @media (max-width: 767.98px) {
      .container { padding-left: 20px; padding-right: 20px; }
      .navbar { padding-top: .4rem !important; padding-bottom: .4rem !important; }
      .navbar-brand img { max-width: 165px; max-height: 46px; }
      .hero { min-height: 76vh; }
      .hero h2 { font-size: clamp(2.2rem, 12vw, 4rem); }
      .hero p { font-size: 1rem; line-height: 1.55; }
      .hero .d-flex { align-items: stretch; }
      .hero .btn { width: 100%; }
      .hero-dots { bottom: 20px; }
      .section { padding: 60px 0; }
      .intro-img { height: auto; aspect-ratio: 4 / 3; }
      .timeline { margin-left: 12px; padding-left: 25px; }
      .timeline-item:before { left: -35px; }
      .sector-card { height: 330px; }
      .award-nav { width: 38px; height: 38px; }
      .award-nav-left { left: 2px; }
      .award-nav-right { right: 2px; }
      .contact-box { padding: 28px 22px; }
      .map-wrapper { padding-bottom: 70%; min-height: 250px; }
      .contact-box p { overflow-wrap: anywhere; }
      footer .row { text-align: left; }
    }

    @media (max-width: 575.98px) {
      .container { padding-left: 16px; padding-right: 16px; }
      .navbar-brand img { max-width: 145px; }
      .hero { min-height: 72vh; }
      .hero-overlay { background: linear-gradient(90deg, rgba(0,0,0,.78), rgba(0,0,0,.42)); }
      .hero-content { padding-bottom: 70px; }
      .eyebrow { font-size: .68rem; letter-spacing: .16em; }
      .hero .btn { padding: .75rem 1rem; }
      .section { padding: 52px 0; }
      .section-title { font-size: clamp(2rem, 9vw, 2.7rem); }
      .intro-img { aspect-ratio: 1 / 1; }
      .sector-card { height: 300px; }
      .sector-content { left: 20px; right: 20px; bottom: 20px; }
      .sector-content h3 { font-size: 1.35rem; }
      .map-wrapper { padding-bottom: 85%; min-height: 260px; }
      .back-to-top { width: 42px; height: 42px; right: 12px; bottom: 12px; }
      .social a { width: 38px; height: 38px; }
    }

    @media (max-width: 380px) {
      .navbar-brand img { max-width: 125px; }
      .hero h2 { font-size: 2.15rem; }
      .hero p { font-size: .92rem; }
      .sector-card { height: 280px; }
      .map-wrapper { padding-bottom: 92%; }
    }


/* ==========================================================================
   16. CERTIFICATE LIGHTBOX
   ========================================================================== */
    /* Recognition certificate popup */
    .award img {
      cursor: zoom-in;
      transition: transform .2s ease, opacity .2s ease;
    }
    .award:hover img {
      opacity: 1;
      transform: scale(1.02);
    }

    .certificate-lightbox {
      position: fixed;
      inset: 0;
      z-index: 99999;
      display: none;
      align-items: center;
      justify-content: center;
      background: rgba(0,0,0,.72);
      padding: 30px;
      margin: 0;
    }
    .certificate-lightbox.show {
      display: flex;
    }
    .certificate-lightbox img {
      display: block;
      width: auto;
      height: auto;
      max-width: min(90vw, 1000px);
      max-height: 88vh;
      object-fit: contain;
      margin: 0;
      padding: 0;
      background: #fff;
      box-shadow: 0 12px 40px rgba(0,0,0,.35);
    }
    .certificate-lightbox-close {
      position: fixed;
      top: 12px;
      right: 16px;
      z-index: 100000;
      width: 44px;
      height: 44px;
      padding: 0;
      border: 0;
      background: rgba(0,0,0,.55);
      color: #fff;
      font-size: 34px;
      line-height: 40px;
      cursor: pointer;
      border-radius: 50%;
    }
    .certificate-lightbox-close:hover {
      background: var(--primary);
    }
    body.certificate-open {
      overflow: hidden;
    }

/* ==========================================================================
   17. HTML INLINE-STYLE REPLACEMENTS
   ========================================================================== */
.text-justify {
  text-align: justify;
  text-justify: inter-word;
}

.business-section-bg {
  background-color: #EBE6E6;
}

.business-intro-text {
  max-width: 700px;
}

.contact-phone-spacer {
  padding-left: 0.5rem;
}

.quote-max-width {
  max-width: 950px;
}


/* Projects carousel: dots-only navigation (no arrows) */
.projects-track{touch-action:pan-y;cursor:grab;user-select:none;}
.projects-track.is-dragging{cursor:grabbing;}
.projects-track .project-card{user-select:none;}
.projects-dots{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:28px;}
.project-dot{width:10px;height:10px;padding:0;border:1px solid #999;border-radius:50%;background:#bdbdbd;cursor:pointer;transition:all .25s ease;}
.project-dot:hover,.project-dot.active{background:#777;border-color:#777;transform:scale(1.25);}
.project-nav{display:none !important;}


/* ==========================================================================
   PRODUCTS & SERVICES - LIVE SITE STYLE
   ========================================================================== */
.awards-slider{
  position:relative;
  width:100%;
  overflow:visible;
}
.awards-viewport{
  width:100%;
  overflow:hidden;
}
.awards-track{
  display:flex;
  flex-wrap:nowrap;
  transition:transform .55s cubic-bezier(.22,1,.36,1);
  will-change:transform;
}
.awards-track > .col-6,
.awards-track > .col-md-3{
  flex:0 0 25%;
  max-width:25%;
  padding-left:.375rem;
  padding-right:.375rem;
  box-sizing:border-box;
}
.awards-track .award{
  width:100%;
  height:260px;
  background:#fff;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:18px;
  overflow:hidden;
  border:1px solid #eee;
}
.awards-track .award img{
  width:100%;
  height:190px;
  object-fit:contain;
  object-position:center;
  display:block;
}
.awards-track .award .eyebrow2{
  width:100%;
  min-height:32px;
  margin-top:8px;
  display:flex;
  align-items:center;
  justify-content:center;
  line-height:1.2;
  text-align:center;
}
.award-nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:10;
  width:44px;
  height:44px;
  padding:0;
  border:0;
  background:#161616;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:background .2s ease, opacity .2s ease;
  box-shadow:0 4px 14px rgba(0,0,0,.15);
}
.award-nav:hover{background:var(--primary);}
.award-nav:disabled{opacity:.35;cursor:not-allowed;}
.award-nav-left{left:-22px;}
.award-nav-right{right:-22px;}

.awards-dots{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  margin-top:28px;
}

@media (max-width:991.98px){
  .awards-track > .col-6,
  .awards-track > .col-md-3{
    flex:0 0 33.333333%;
    max-width:33.333333%;
  }
  .award-nav-left{left:4px;}
  .award-nav-right{right:4px;}
}
@media (max-width:575.98px){
  .awards-track > .col-6,
  .awards-track > .col-md-3{
    flex:0 0 100%;
    max-width:100%;
  }
  .awards-track .award{
    height:260px;
  }
  .award-nav{
    width:38px;
    height:38px;
  }
  .award-nav-left{left:6px;}
  .award-nav-right{right:6px;}
  .awards-dots{margin-top:22px;}
}

/* Products & Services - manual infinite carousel + image zoom */
#awardsTrack .award img {
  cursor: zoom-in;
}
#awardsTrack .award img:focus {
  outline: 3px solid var(--primary);
  outline-offset: 3px;
}
.certificate-lightbox img {
  cursor: zoom-out;
}


/* =========================================================
   CROSS-BROWSER HARDENING
   Target: current Chrome, Edge, Firefox, Safari, iOS Safari,
   and Android Chrome.
   ========================================================= */
html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

img, svg, video, canvas {
    max-width: 100%;
}

button, input, textarea, select {
    font: inherit;
}

button, a {
    -webkit-tap-highlight-color: transparent;
}

/* Avoid horizontal overflow caused by mobile viewport rounding. */
html, body {
    max-width: 100%;
    overflow-x: clip;
}

@supports not (overflow-x: clip) {
    html, body {
        overflow-x: hidden;
    }
}

/* Safari/WebKit sticky positioning is more reliable when the sticky
   element's ancestor does not create an overflow clipping context. */
@supports (position: sticky) {
    .gallery-panel {
        position: -webkit-sticky;
        position: sticky;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *, *::before, *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}


/* ================================================================
   CROSS-BROWSER + ACCESSIBILITY HARDENING
   ================================================================ */
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }
body{ min-width:320px; overflow-x:hidden; }
img,svg,video,canvas{ max-width:100%; }
img{ height:auto; }
button,input,textarea,select{ font:inherit; }
button,a{ -webkit-tap-highlight-color:transparent; }
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{ outline:3px solid #ef4b23; outline-offset:3px; }
.skip-link{ position:fixed; left:12px; top:8px; z-index:9999; padding:10px 14px; background:#161616; color:#fff; transform:translateY(-160%); transition:transform .2s ease; text-decoration:none; }
.skip-link:focus{ transform:translateY(0); }
.social-placeholder{ display:inline-flex; align-items:center; justify-content:center; opacity:.8; }
@supports (overflow:clip){ body{ overflow-x:clip; } }
.gallery-panel{ position:-webkit-sticky; position:sticky; }
@media (max-width:991.98px){ .gallery-panel{ position:relative; top:auto; } }
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto!important;} *,*::before,*::after{ animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; scroll-behavior:auto!important; } }
@supports not (scroll-behavior:smooth){ html{scroll-behavior:auto;} }


/* ==========================================================================\n   17. FLUID RESPONSIVE SYSTEM — 320px TO 3840px+\n   ========================================================================== */
:root{
  --content-max: 1320px;
  --content-pad: clamp(12px, 2vw, 32px);
  --section-pad: clamp(48px, 6vw, 112px);
  --card-gap: clamp(12px, 1.4vw, 28px);
}

html,body{width:100%;min-width:320px;max-width:100%;overflow-x:hidden;}
body{font-size:clamp(15px, .22vw + 13.5px, 18px);line-height:1.6;}
.container{
  width:100%;
  max-width:var(--content-max);
  padding-left:var(--content-pad);
  padding-right:var(--content-pad);
  margin-left:auto;
  margin-right:auto;
}
.row{--bs-gutter-x:clamp(1rem, 1.8vw, 2rem);--bs-gutter-y:clamp(1rem, 1.8vw, 2rem);}
.section{padding-top:var(--section-pad);padding-bottom:var(--section-pad);}

h1,h2,h3,h4,h5,h6{overflow-wrap:break-word;}
p,a,li,td,th,span{overflow-wrap:anywhere;}
.btn{max-width:100%;white-space:normal;}
input,textarea,select{max-width:100%;}
iframe{border:0;max-width:100%;}

/* Ultra-wide screens: increase usable canvas gradually without making text/cards huge. */
@media (min-width:1400px){
  :root{--content-max:1440px;}
}
@media (min-width:1920px){
  :root{--content-max:1680px;--content-pad:clamp(24px,1.7vw,44px);}
  .section-title{font-size:clamp(2.25rem,2.5vw,3.4rem);}
  .hero-content{max-width:min(900px,60vw);}
}
@media (min-width:2560px){
  :root{--content-max:1900px;}
  .hero-content{max-width:1050px;}
  .hero p{font-size:clamp(1.1rem,.45vw + .7rem,1.45rem);max-width:820px;}
  .sector-card{height:clamp(390px,20vw,520px);}
  .person-card img{height:clamp(360px,18vw,500px);}
}
@media (min-width:3840px){
  :root{--content-max:2200px;}
  .section{padding-top:clamp(90px,4vw,150px);padding-bottom:clamp(90px,4vw,150px);}
  .hero-content{max-width:1100px;}
}

/* Navigation stays usable at every width. */
.navbar .container{min-width:0;}
.navbar-brand{flex:0 1 auto;max-width:55%;}
.navbar-brand img{width:auto;height:auto;max-width:clamp(125px,14vw,220px);max-height:52px;}
.navbar-nav{min-width:0;}
.nav-link{white-space:nowrap;}
@media (max-width:1199.98px){
  .navbar-brand{max-width:70%;}
  .nav-link{margin-left:.15rem;margin-right:.15rem;}
}
@media (max-width:767.98px){
  .navbar-brand{max-width:calc(100% - 58px);}
  .navbar-brand img{max-width:clamp(120px,42vw,165px);}
  .navbar-toggler{flex:0 0 auto;}
  .navbar-collapse{max-width:100%;overflow:hidden;}
  .nav-link{white-space:normal;}
}

/* Hero remains readable on short phones and tall/wide displays. */
.hero{min-height:clamp(560px,88vh,920px);}
.hero h1,.hero h2{font-size:clamp(2.15rem,6.5vw,6.8rem);}
.hero p{font-size:clamp(.92rem,1.1vw,1.25rem);}
@media (max-width:575.98px){
  .hero{min-height:clamp(560px,78svh,720px);}
  .hero-content{padding-left:2px;padding-right:2px;}
  .hero h1,.hero h2{font-size:clamp(2rem,10.5vw,3.5rem);}
}
@media (max-width:359.98px){
  .container{padding-left:12px;padding-right:12px;}
  .hero{min-height:560px;}
  .hero h1,.hero h2{font-size:2rem;}
  .hero p{font-size:.9rem;}
  .btn-brand,.btn-outline-light{padding:.7rem .85rem;font-size:.9rem;}
}

/* Cards and media scale smoothly instead of creating cramped fixed widths. */
.sector-card{height:clamp(280px,25vw,520px);}
.sector-content{left:clamp(16px,2vw,32px);right:clamp(16px,2vw,32px);bottom:clamp(18px,2vw,30px);}
.intro-img{height:auto;min-height:0;aspect-ratio:4/3;}
.news-card-image{height:clamp(200px,16vw,330px);}
.award{height:clamp(240px,16vw,340px);}
.award img{height:clamp(170px,12vw,250px);}

/* Leadership: JS controls card count; CSS guarantees no clipping/overflow. */
#leadership .leadership-viewport{width:100%;max-width:100%;overflow:hidden;padding-left:0;padding-right:0;}
#leadership .leadership-track{display:flex;flex-wrap:nowrap;align-items:stretch;}
#leadership .leadership-slide{min-width:0;box-sizing:border-box;}
#leadership .person-card{width:100%;max-width:none;height:100%;margin:0;}
#leadership .person-card img{width:100%;height:clamp(300px,20vw,520px);object-fit:cover;}

/* Projects / awards / carousel controls never sit outside the viewport on phones. */
.projects-slider,.awards-slider{max-width:100%;}
.project-nav,.award-nav{max-width:44px;}
@media (max-width:575.98px){
  .project-nav,.award-nav{width:36px;height:36px;}
  .project-nav-left,.award-nav-left{left:4px;}
  .project-nav-right,.award-nav-right{right:4px;}
}

/* Forms, contact area and maps. */
.contact-box{padding:clamp(22px,3.5vw,55px);}
.map-wrapper{width:100%;max-width:100%;}
.form-control,.form-select{min-height:48px;}
textarea.form-control{min-height:140px;}

/* Tables can scroll horizontally rather than break the page on narrow screens. */
.table-responsive{width:100%;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;}
.spec-table{min-width:680px;}

/* Footer columns remain readable on small phones. */
footer .container{min-width:0;}
footer p,footer a{overflow-wrap:anywhere;}
@media (max-width:575.98px){
  footer .col-6{width:100%;}
}

/* Tiny devices: eliminate common Bootstrap/inline spacing pressure. */
@media (max-width:359.98px){
  .row{--bs-gutter-x:1rem;--bs-gutter-y:1rem;}
  .section{padding-top:44px;padding-bottom:44px;}
  .section-title{font-size:clamp(1.8rem,9vw,2.3rem);}
  .contact-box{padding:20px 16px;}
  .social a{width:36px;height:36px;margin-right:3px;}
}

/* Large accessibility hit areas without forcing desktop layouts wider. */
@media (pointer:coarse){
  .nav-link,.btn,button,.catalog-link,.gallery-thumb{min-height:44px;}
}

/* Respect devices with a display cutout/notch. */
@supports (padding:max(0px)){
  body{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right);}
}

/* Keep Leadership aligned with the same container spacing as the other sections. */
    #leadership .leadership-viewport {
      width: 100%;
      max-width: 100%;
      margin-left: 0;
      margin-right: 0;
      padding-left: 12px;
      padding-right: 12px;
      box-sizing: border-box;
      overflow: hidden;
    }

    #leadership .leadership-track {
      display: flex;
      flex-wrap: nowrap;
      align-items: stretch;
      margin: 0;
      padding: 0;
    }

    #leadership .leadership-slide {
      box-sizing: border-box;
      min-width: 0;
    }

    #leadership .person-card {
      width: 100%;
      max-width: none;
      height: 100%;
      margin: 0;
      box-sizing: border-box;
    }

    /* Any normal mobile screen: exactly 1 Leadership card. */
    @media (max-width: 599px) {
      #leadership .leadership-viewport {
        padding-left: 12px;
        padding-right: 12px;
      }
    }

    /* 600px-wide screens, including 600 x 1024: exactly 3 cards. */
    @media (min-width: 600px) and (max-width: 767px) {
      #leadership .leadership-viewport {
        padding-left: 12px;
        padding-right: 12px;
      }
    }
 

/* ==========================================================================
   RESPONSIVE NAVIGATION DOTS - FORCE PERFECT CIRCLES
   Keeps carousel indicators circular at every viewport size, including
   320px mobile through 3840px+ ultra-wide displays.
   ========================================================================== */
.hero-dots,
.projects-dots,
.awards-dots {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: nowrap !important;
  width: 100%;
  box-sizing: border-box;
}

.hero-dot,
.project-dot,
.award-dot {
  flex: 0 0 10px !important;
  width: 10px !important;
  height: 10px !important;
  min-width: 10px !important;
  min-height: 10px !important;
  max-width: 10px !important;
  max-height: 10px !important;
  aspect-ratio: 1 / 1 !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 50% !important;
  box-sizing: border-box !important;
  display: block !important;
  overflow: hidden;
  line-height: 0 !important;
}

.hero-dot:hover,
.hero-dot.active,
.project-dot:hover,
.project-dot.active,
.award-dot:hover,
.award-dot.active {
  border-radius: 50% !important;
}

@media (max-width: 359.98px) {
  .hero-dots,
  .projects-dots,
  .awards-dots {
    gap: 8px !important;
  }
}

@media (min-width: 360px) {
  .hero-dots,
  .projects-dots,
  .awards-dots {
    gap: 10px !important;
  }
}