/* ==========================================================================
   SixM Global — Design System (Blue: #87CEEB -> #114D64)
   ========================================================================== */

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:16px;line-height:1.7;color:var(--text);
  background:linear-gradient(180deg,#EAF6FC 0%,#EAF6FC 8%,#F1F8FB 40%,#dceefb 68%,var(--deep) 100%);
  overflow-x:hidden;
}
h1,h2,h3,h4,h5,h6{font-family:'Hanken Grotesk',sans-serif;color:var(--navy);font-weight:700;line-height:1.15}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
ul{list-style:none}
button{font-family:inherit;cursor:pointer}
.container{max-width:1280px;margin:0 auto;padding:0 24px}
.section-padding{padding:110px 0}
@media(max-width:1199px){.section-padding{padding:90px 0}}
@media(max-width:767px){.section-padding{padding:64px 0}}

/* -------------------------------------------------- Cursor -------------- */
.cursor-outer,.cursor-inner{
  position:fixed;top:0;left:0;border-radius:50%;pointer-events:none;
  z-index:99999;will-change:transform;
  transform:translate3d(-100px,-100px,0) translate(-50%,-50%);
}
/* Two compact SIXM cursor rings: bold outer + thin inner. */
.cursor-outer{
  width:30px;height:30px;border:2.5px solid var(--sky);opacity:.98;
  transition:width .22s ease,height .22s ease,opacity .18s ease,border-color .2s ease;
}
.cursor-inner{
  width:8px;height:8px;border:1.5px solid #5E9FBE;background:rgba(62,126,155,.24);opacity:1;
  transition:width .16s ease,height .16s ease,opacity .16s ease,border-color .2s ease;
}
/* On bright backgrounds: dark SIXM outer + light-blue inner.
   On dark backgrounds: keep the light SIXM blue cursor. */
body.cursor-on-light .cursor-outer{border-color:var(--deep)}
body.cursor-on-light .cursor-inner{border-color:#4D8EAF;background:rgba(77,142,175,.24)}
.cursor-hover .cursor-outer{width:32px;height:32px;opacity:.98}
.cursor-hover .cursor-inner{width:9px;height:9px;opacity:1}
@media(hover:none),(pointer:coarse){.cursor-outer,.cursor-inner{display:none}}
body.has-custom-cursor,body.has-custom-cursor *{cursor:none}

/* -------------------------------------------------- Preloader ----------- */
.preloader{position:fixed;inset:0;background:var(--deep);z-index:999999;display:grid;place-items:center;transition:opacity .6s ease,visibility .6s ease}
.preloader.hide{opacity:0;visibility:hidden}
.loader{width:78px;height:78px;border-radius:50%;border:2px solid rgba(255,255,255,.18);position:relative;display:grid;place-items:center}
.loader:after{content:"";position:absolute;inset:-2px;border-radius:50%;border:2px solid transparent;border-top-color:var(--sky);animation:spin 1s linear infinite}
.loader span{color:#fff;font-size:.62rem;letter-spacing:.18em;font-weight:700}
@keyframes spin{to{transform:rotate(360deg)}}

/* -------------------------------------------------- Navbar --------------- */
.site-header{position:fixed;top:22px;left:0;right:0;z-index:5000;transition:all .4s ease}
.nav-wrap{
  background:rgba(255,255,255,.85);backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.6);
  border-radius:100px;padding:8px 12px 8px 26px;
  display:flex;align-items:center;justify-content:space-between;
  box-shadow:0 10px 40px rgba(17,77,100,.10);
  transition:all .35s ease;
}
.site-header.sticky{top:0}
.site-header.sticky .nav-wrap{border-radius:0;background:rgba(255,255,255,.96);box-shadow:0 8px 30px rgba(17,77,100,.14);padding:8px 12px 8px 26px}
.logo{
  display:flex;align-items:center;gap:8px;padding:5px 12px 5px 6px;
  border-radius:18px;font-family:'Hanken Grotesk',sans-serif;font-weight:800;font-size:1.4rem;color:var(--deep);
  transition:background .25s ease,transform .35s ease,padding .25s ease;
}
.logo img{
  width:62px;height:62px;object-fit:contain;border-radius:50%;
  background:#fff;box-shadow:0 5px 18px rgba(17,77,100,.18);
  transition:transform .35s cubic-bezier(.22,1,.36,1),box-shadow .35s ease;
}
.logo:hover{background:rgba(135,206,235,.12)}
.logo:hover img{transform:scale(1.05) rotate(-2deg);box-shadow:0 8px 24px rgba(17,77,100,.24)}
.logo.logo-clicking img{animation:logoClickPulse .48s cubic-bezier(.22,1,.36,1)}
@keyframes logoClickPulse{0%{transform:scale(1) rotate(0)}35%{transform:scale(.9) rotate(-5deg)}70%{transform:scale(1.08) rotate(2deg)}100%{transform:scale(1) rotate(0)}}
.logo em{font-style:normal;color:var(--mid)}
.main-menu{display:flex;align-items:center;gap:8px}
.main-menu a{
  padding:12px 18px;font-weight:600;font-size:.92rem;color:var(--navy);
  text-transform:uppercase;letter-spacing:.02em;border-radius:100px;
  position:relative;transition:all .3s ease;
}
.main-menu a:hover,.main-menu a.active{color:var(--white);background:var(--deep)}
.header-right{display:flex;align-items:center;gap:14px}
.menu-toggle{display:none;flex-direction:column;gap:5px;background:none;border:none;padding:8px}
.menu-toggle span{width:24px;height:2px;background:var(--deep);border-radius:2px;transition:.3s}

@media(max-width:1199px){
  .main-menu{display:none}
  .menu-toggle{display:flex}
  .header-right .theme-btn{display:none}
}
@media(max-width:767px){
  .site-header{top:14px}
  .nav-wrap{padding:8px 10px 8px 18px}
  .logo img{height:38px}
}

/* Mobile menu overlay */
.mobile-menu-overlay{
  position:fixed;inset:0;background:rgba(11,34,57,.55);backdrop-filter:blur(4px);
  z-index:6000;opacity:0;visibility:hidden;transition:opacity .35s ease,visibility .35s ease;
}
.mobile-menu-overlay.active{opacity:1;visibility:visible}
.mobile-menu-panel{
  position:absolute;top:0;right:0;height:100%;width:min(380px,88%);
  background:var(--white);padding:28px 26px;
  transform:translateX(100%);transition:transform .4s ease;
  display:flex;flex-direction:column;gap:28px;
}
.mobile-menu-overlay.active .mobile-menu-panel{transform:translateX(0)}
.mobile-menu-top{display:flex;justify-content:space-between;align-items:center}
.mobile-menu-close{background:var(--bg-light);border:none;width:38px;height:38px;border-radius:50%;font-size:1rem;color:var(--deep)}
.mobile-menu-links{display:flex;flex-direction:column;gap:4px}
.mobile-menu-links a{padding:14px 6px;font-weight:600;font-size:1.05rem;color:var(--navy);border-bottom:1px solid var(--border)}
.mobile-menu-links a.active,.mobile-menu-links a:hover{color:var(--deep);padding-left:14px}
.mobile-menu-social{display:flex;gap:10px;margin-top:auto}
.mobile-menu-social a{width:38px;height:38px;border-radius:50%;background:var(--bg-light);display:grid;place-items:center;color:var(--deep)}

/* -------------------------------------------------- Buttons -------------- */
.theme-btn{
  display:inline-flex;align-items:center;gap:10px;
  height:54px;padding:0 30px;border-radius:100px;
  background:var(--deep);color:#fff;font-weight:700;font-size:.86rem;
  text-transform:uppercase;letter-spacing:.03em;position:relative;overflow:hidden;
  border:none;isolation:isolate;
}
.theme-btn span,.theme-btn i{position:relative;z-index:2;transition:transform .3s ease}
.theme-btn:before{
  content:"";position:absolute;left:50%;top:50%;width:0;height:0;
  background:var(--sky);border-radius:50%;transform:translate(-50%,-50%);
  transition:width .6s ease,height .6s ease;z-index:1;pointer-events:none;
}
.theme-btn:hover:before{width:340px;height:340px}
.theme-btn:hover{color:var(--navy)}
.theme-btn:hover i{transform:translateX(4px)}
.theme-btn.light{background:var(--sky);color:var(--navy)}
.theme-btn.light:before{background:var(--deep)}
.theme-btn.light:hover{color:#fff}
.theme-btn.outline{background:transparent;color:var(--deep);border:1.5px solid var(--deep)}
.theme-btn.outline:before{background:var(--deep)}
.theme-btn.outline:hover{color:#fff;border-color:transparent}
.theme-btn.full{width:100%;justify-content:center}

/* -------------------------------------------------- Section title -------- */
.sub-title{
  display:inline-flex;align-items:center;gap:10px;
  padding:0 20px;height:36px;border:1px solid var(--border);
  border-radius:100px;font-size:.78rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.12em;color:var(--deep);background:rgba(135,206,235,.14);
}
.sub-title:before{content:"";width:7px;height:7px;border-radius:50%;background:var(--sky)}
.section-title{max-width:680px;margin-bottom:48px}
.section-title h2{font-size:clamp(2.1rem,4.2vw,3.4rem);margin-top:16px;letter-spacing:-.02em}
.section-title p{color:var(--text);margin-top:16px;font-size:1.03rem}
.section-title.center{margin-left:auto;margin-right:auto;text-align:center}
.char-animation .char{display:inline-block;will-change:transform,opacity}

/* -------------------------------------------------- Marquee -------------- */
.marquee-strip{background:var(--deep);overflow:hidden;padding:16px 0;position:relative}
.marquee-track{display:flex;width:max-content;animation:marquee 26s linear infinite}
.marquee-track span{
  font-family:'Hanken Grotesk',sans-serif;font-weight:800;font-size:1.22rem;
  text-transform:uppercase;color:rgba(255,255,255,.85);padding:0 20px;
  display:flex;align-items:center;gap:20px;white-space:nowrap;
}
.marquee-track span i{color:var(--sky);font-size:.8rem}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* -------------------------------------------------- Hero ----------------- */
.hero-swiper{position:relative;min-height:100vh;overflow:hidden}
.hero-slide{position:relative;min-height:100vh;display:flex;align-items:center;color:#fff}
.hero-slide .hero-bg{
  position:absolute;inset:0;background-size:cover;background-position:center;
  transform:scale(1);transition:transform 6s ease;
}
.swiper-slide-active .hero-bg{transform:scale(1.15)}
.hero-slide .hero-bg:before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(11,34,57,.55),rgba(17,77,100,.82));
}
.hero-inner{position:relative;z-index:2;padding-top:140px;max-width:820px}
.hero-inner .sub-title{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.35);color:#fff}
.hero-inner .sub-title:before{background:var(--sky)}
.hero-inner h1{color:#fff;font-size:clamp(2.6rem,6vw,5.2rem);letter-spacing:-.03em;margin:22px 0 22px;line-height:1.05}
.hero-inner p{color:rgba(255,255,255,.82);font-size:1.1rem;max-width:600px;margin-bottom:34px}
.hero-actions{display:flex;gap:16px;flex-wrap:wrap}
.hero-swiper .swiper-pagination{bottom:40px!important;left:24px!important;width:auto!important;text-align:left}
.hero-swiper .swiper-pagination-bullet{background:#fff;opacity:.4;width:10px;height:10px}
.hero-swiper .swiper-pagination-bullet-active{opacity:1;background:var(--sky)}
.hero-arrows{position:absolute;right:40px;bottom:40px;z-index:3;display:flex;gap:10px}
.hero-arrows button{
  width:52px;height:52px;border-radius:50%;border:1px solid rgba(255,255,255,.35);
  background:rgba(255,255,255,.08);color:#fff;display:grid;place-items:center;
  backdrop-filter:blur(8px);transition:.3s;font-size:1rem;
}
.hero-arrows button:hover{background:var(--sky);color:var(--navy);border-color:var(--sky)}
.hero-social{position:absolute;right:40px;top:50%;transform:translateY(-50%);z-index:3;display:flex;flex-direction:column;align-items:center;gap:14px}
.hero-social span{writing-mode:vertical-rl;color:rgba(255,255,255,.6);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase}
.hero-social a{width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;display:grid;place-items:center;font-size:.8rem;transition:.3s}
.hero-social a:hover{background:var(--sky);color:var(--navy)}
@media(max-width:991px){.hero-social{display:none}}
@media(max-width:767px){.hero-arrows{right:20px;bottom:20px}.hero-arrows button{width:42px;height:42px}}

/* Page hero (inner pages) */
.page-hero{
  position:relative;min-height:52vh;display:flex;align-items:center;color:#fff;
  background:linear-gradient(180deg,rgba(11,34,57,.55),rgba(17,77,100,.9)),var(--navy);
  background-size:cover;background-position:center;overflow:hidden;
}
.page-hero .container{position:relative;z-index:2;padding-top:150px;padding-bottom:60px}
.page-hero h1{color:#fff;font-size:clamp(2.4rem,5vw,4rem);margin:18px 0 12px}
.page-hero .breadcrumb{color:rgba(255,255,255,.7);font-size:.9rem}
.page-hero .breadcrumb a{color:var(--sky);font-weight:600}
.page-hero:before{content:"";position:absolute;right:-100px;top:-100px;width:400px;height:400px;border-radius:50%;background:radial-gradient(circle,rgba(135,206,235,.25),transparent 70%)}

/* Unified inner-page hero treatment: soft blurred image, consistent typography and controls */
.page-hero::after{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(11,34,57,.18);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(6px);
  z-index:0;
  pointer-events:none;
}
.page-hero > .container{z-index:2}
.page-hero .sub-title{
  display:inline-flex;
  align-items:center;
  background:rgba(255,255,255,.12) !important;
  border-color:rgba(255,255,255,.35) !important;
  color:#fff !important;
}
.page-hero .hero-actions{margin-top:24px}
.page-hero .theme-btn.outline{
  color:#fff !important;
  border-color:rgba(255,255,255,.5) !important;
}
.page-hero .theme-btn.outline:hover{
  color:var(--navy) !important;
  border-color:var(--sky) !important;
}
.page-hero p{max-width:780px;color:rgba(255,255,255,.84)}

/* -------------------------------------------------- Stats/Counters ------- */
.stats-strip{background:var(--deep);color:#fff}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr)}
.stat-box{padding:44px 20px;text-align:center;border-right:1px solid rgba(255,255,255,.12)}
.stat-box:last-child{border-right:none}
.stat-box strong{display:block;font-family:'Hanken Grotesk',sans-serif;font-size:2.8rem;color:var(--sky)}
.stat-box span{font-size:.78rem;text-transform:uppercase;letter-spacing:.1em;color:rgba(255,255,255,.65)}
@media(max-width:767px){.stats-grid{grid-template-columns:1fr 1fr}.stat-box{border-bottom:1px solid rgba(255,255,255,.12)}}

/* -------------------------------------------------- About ---------------- */
.about-section{position:relative}
.about-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:70px;align-items:center}
.about-media{position:relative}
.about-media img{border-radius:28px;height:520px;width:100%;object-fit:cover;box-shadow:0 30px 70px rgba(17,77,100,.18)}
.about-media .float-badge{
  position:absolute;left:-30px;bottom:-30px;background:#fff;border-radius:20px;
  padding:24px;box-shadow:0 25px 60px rgba(17,77,100,.2);display:flex;gap:16px;align-items:center;
  max-width:280px;
}
.about-media .float-badge .ring{width:58px;height:58px;flex:0 0 58px}
.about-checks{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:26px 0 30px}
.about-checks li{display:flex;gap:10px;font-weight:600;font-size:.92rem;align-items:flex-start}
.about-checks i{color:var(--mid);margin-top:3px}
@media(max-width:991px){.about-grid{grid-template-columns:1fr;gap:40px}.about-media img{height:380px}}
@media(max-width:560px){.about-checks{grid-template-columns:1fr}}


/* -------------------------------------------------- Cards (tilt) --------- */
.tilt-card{--tilt-x:0deg;--tilt-y:0deg;--tilt-lift:0px;transform-style:preserve-3d;transform:perspective(900px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) translateY(var(--tilt-lift));transition:transform .15s ease,box-shadow .3s ease}
.services-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.service-card{
  position:relative;background:#fff;border-radius:22px;padding:36px 28px;
  min-height:260px;overflow:hidden;border:1px solid var(--border);
  box-shadow:0 10px 30px rgba(17,77,100,.06);
}
.service-card .bg-fill{position:absolute;inset:0;background:linear-gradient(160deg,var(--deep),var(--mid));transform:scale(0);transform-origin:left top;transition:transform .5s ease;border-radius:inherit;z-index:0}
.service-card:hover .bg-fill{transform:scale(1)}
.service-card .icon-box{
  width:60px;height:60px;border-radius:16px;background:var(--bg-light);color:var(--deep);
  display:grid;place-items:center;font-size:1.3rem;margin-bottom:60px;position:relative;z-index:1;transition:.4s;
}
.service-card:hover .icon-box{background:rgba(255,255,255,.18);color:#fff}
.service-card h3{position:relative;z-index:1;font-size:1.15rem;margin-bottom:8px;transition:.4s}
.service-card p{position:relative;z-index:1;font-size:.88rem;color:var(--text);transition:.4s}
.service-card:hover h3,.service-card:hover p{color:#fff}
.service-card .card-arrow{position:absolute;right:24px;top:28px;z-index:1;width:38px;height:38px;border-radius:50%;background:var(--bg-light);display:grid;place-items:center;color:var(--deep);transition:.4s}
.service-card:hover .card-arrow{background:var(--sky);color:var(--navy);transform:rotate(45deg)}
@media(max-width:1199px){.services-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.services-grid{grid-template-columns:1fr}}

/* -------------------------------------------------- Process -------------- */
.process-wrapper{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--border);border-radius:24px;overflow:hidden}
.process-step{background:#fff;padding:36px 24px;min-height:230px;position:relative}
.process-step .num{font-family:'Hanken Grotesk',sans-serif;font-size:2.2rem;color:var(--sky);-webkit-text-stroke:1px var(--deep);color:transparent}
.process-step .circle-num{width:56px;height:56px;border-radius:50%;background:var(--deep);color:#fff;display:grid;place-items:center;font-weight:700;margin-bottom:18px;transition:.35s}
.process-step:hover .circle-num{background:var(--sky);color:var(--navy)}
.process-step h3{font-size:1.02rem;margin-bottom:6px}
.process-step p{font-size:.82rem;color:var(--text)}
@media(max-width:991px){.process-wrapper{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.process-wrapper{grid-template-columns:1fr}}

/* -------------------------------------------------- Products/Gallery ----- */
.products-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.product-card{position:relative;border-radius:24px;overflow:hidden;min-height:360px;color:#fff;background:var(--navy);box-shadow:0 16px 40px rgba(17,77,100,.14)}
.product-card .bg{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform .7s ease}
.product-card:hover .bg{transform:scale(1.08)}
.product-card:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(11,34,57,.92),rgba(11,34,57,.1) 65%)}
.product-card .content{position:absolute;z-index:2;left:24px;right:24px;bottom:22px}
.product-card .content small{color:var(--sky);letter-spacing:.15em;text-transform:uppercase;font-size:.7rem}
.product-card h3{color:#fff;font-size:1.4rem;margin:6px 0}
@media(max-width:991px){.products-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.products-grid{grid-template-columns:1fr}}

.gallery-grid{display:grid;grid-template-columns:1.2fr .8fr .8fr;grid-auto-rows:230px;gap:14px}
.gallery-item{position:relative;overflow:hidden;border-radius:18px}
.gallery-item:first-child{grid-row:span 2}
.gallery-item img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.gallery-item:hover img{transform:scale(1.08)}
@media(max-width:767px){.gallery-grid{grid-template-columns:1fr 1fr;grid-auto-rows:180px}.gallery-item:first-child{grid-row:span 1}}

/* -------------------------------------------------- Team ------------------ */
.team-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px;align-items:start}
.team-card{
  background:#fff;border-radius:24px;padding:0;overflow:hidden;align-self:start;
  box-shadow:0 12px 36px rgba(13, 62, 82, 0.08);border:1px solid var(--border);
  display:flex;flex-direction:column;
}
.team-card .team-body{padding:22px 24px}
.team-card h3{font-size:1.25rem}
.team-card .title{color:var(--mid);font-weight:700;font-size:.8rem;text-transform:uppercase;letter-spacing:.08em;margin:6px 0 12px}
.team-card p{font-size:.88rem;color:var(--text)}
.team-card .team-social{display:flex;gap:8px;margin-top:16px}
.team-card .team-social a{width:34px;height:34px;border-radius:50%;background:var(--bg-light);color:var(--deep);display:grid;place-items:center;font-size:.8rem;transition:.3s}
.team-card .team-social a:hover{background:var(--deep);color:#fff}
@media(max-width:767px){.team-grid{grid-template-columns:1fr}}

/* -------------------------------------------------- Testimonials --------- */
.testimonial-section{background:var(--deep);color:#fff;position:relative;overflow:hidden}
.testimonial-section .section-title h2,.testimonial-section .section-title p{color:#fff}
.testimonial-section .section-title p{color:rgba(255,255,255,.65)}
.testimonial-card{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:24px;padding:40px;backdrop-filter:blur(6px)}
.testimonial-card .stars{color:var(--sky);letter-spacing:3px;margin-bottom:16px}
.testimonial-card .quote{font-family:'Hanken Grotesk',sans-serif;font-size:1.35rem;line-height:1.5;margin-bottom:26px}
.testimonial-client{display:flex;align-items:center;gap:14px}
.testimonial-client .avatar{width:52px;height:52px;border-radius:50%;background:var(--sky);display:grid;place-items:center;color:var(--navy);font-weight:700;overflow:hidden}
.testimonial-client .avatar img{width:100%;height:100%;object-fit:cover}
.testimonial-client strong{display:block;font-size:.95rem}
.testimonial-client span{font-size:.78rem;color:rgba(255,255,255,.55)}

/* -------------------------------------------------- FAQ Accordion -------- */
.faq-list{max-width:900px;margin:0 auto}
.faq-item{border:1px solid var(--border);border-radius:18px;margin-bottom:14px;background:#fff;overflow:hidden;transition:.3s}
.faq-item.active{border-color:var(--sky);box-shadow:0 12px 30px rgba(17,77,100,.08)}
.faq-question{
  display:flex;justify-content:space-between;align-items:center;gap:20px;
  padding:22px 26px;cursor:pointer;font-weight:700;font-size:1.02rem;color:var(--navy);
}
.faq-question .q-icon{
  width:36px;height:36px;flex:0 0 36px;border-radius:50%;background:var(--bg-light);
  color:var(--deep);display:grid;place-items:center;transition:transform .35s ease,background .3s ease,color .3s ease;
}
.faq-item.active .q-icon{background:var(--deep);color:#fff;transform:rotate(45deg)}
.faq-answer{max-height:0;overflow:hidden;transition:max-height .4s ease}
.faq-answer-inner{padding:0 26px 24px;color:var(--text);font-size:.94rem;line-height:1.7}

/* -------------------------------------------------- Contact --------------- */
.contact-section{position:relative}
.contact-grid{display:grid;grid-template-columns:1fr .95fr;gap:60px;align-items:start}
.contact-info-list{display:grid;gap:14px;margin-top:24px}
.contact-info-item{display:flex;gap:16px;align-items:center;padding:18px;background:#fff;border:1px solid var(--border);border-radius:16px}
.contact-info-item .ic{width:44px;height:44px;border-radius:50%;background:var(--bg-light);color:var(--deep);display:grid;place-items:center;flex:0 0 44px}
.contact-info-item small{display:block;color:var(--text);font-size:.72rem;text-transform:uppercase;letter-spacing:.08em}
.contact-info-item strong{font-size:.94rem}
.contact-form-card{background:#fff;border:1px solid var(--border);border-radius:24px;padding:34px;box-shadow:0 20px 60px rgba(17,77,100,.08)}
.contact-form-card .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.contact-form-card input,.contact-form-card select,.contact-form-card textarea{
  width:100%;padding:14px 16px;border:1px solid var(--border);border-radius:12px;
  font:inherit;outline:none;transition:.25s;background:var(--bg-light);
}
.contact-form-card textarea{min-height:130px;resize:vertical;grid-column:1/-1}
.contact-form-card input:focus,.contact-form-card select:focus,.contact-form-card textarea:focus{border-color:var(--sky);box-shadow:0 0 0 3px rgba(135,206,235,.25);background:#fff}
@media(max-width:991px){.contact-grid{grid-template-columns:1fr}}
@media(max-width:560px){.contact-form-card .form-grid{grid-template-columns:1fr}}

/* -------------------------------------------------- Footer ---------------- */
.site-footer{background:var(--navy);color:rgba(255,255,255,.75);margin-top:0}
.footer-contact-strip{background:var(--deep);border-bottom:1px solid rgba(255,255,255,.1)}
.fcs-inner{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:20px;padding:26px 24px}
.fcs-left{display:flex;align-items:center;gap:14px;color:#fff}
.fcs-icon{width:48px;height:48px;border-radius:50%;background:var(--sky);color:var(--navy);display:grid;place-items:center;animation:ring 2s ease-in-out infinite}
@keyframes ring{0%,100%{transform:rotate(0)}10%{transform:rotate(18deg)}20%{transform:rotate(-14deg)}30%{transform:rotate(10deg)}40%{transform:rotate(0)}}
.fcs-left small{display:block;color:rgba(255,255,255,.6);font-size:.72rem;text-transform:uppercase}
.fcs-left strong{font-size:1.1rem}
.fcs-right{display:flex;align-items:center;gap:14px;color:#fff;font-weight:600}
.newsletter-form{display:flex;align-items:center;background:rgba(255,255,255,.1);border-radius:100px;padding:4px;min-width:320px}
.newsletter-form input{flex:1;background:none;border:none;padding:0 18px;color:#fff;outline:none;font:inherit}
.newsletter-form input::placeholder{color:rgba(255,255,255,.55)}
.newsletter-form button{width:44px;height:44px;border-radius:50%;background:var(--sky);border:none;color:var(--navy);display:grid;place-items:center}
@media(max-width:767px){.newsletter-form{min-width:0;width:100%}.fcs-inner{flex-direction:column;align-items:flex-start}}

.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.1fr;gap:44px;padding:60px 0 40px}
.footer-logo{height:52px;margin-bottom:14px;filter:drop-shadow(0 4px 10px rgba(0,0,0,.35))}
.footer-col h3{color:#fff;font-size:1.5rem;margin-bottom:12px}
.footer-col h3 span{color:var(--sky)}
.footer-since{margin-top:10px;font-weight:800;font-size:1.2rem;color:transparent;-webkit-text-stroke:1px var(--sky)}
.footer-since span{color:transparent;-webkit-text-stroke:1px var(--sky)}
.footer-col h4{color:var(--sky);font-size:.82rem;text-transform:uppercase;letter-spacing:.12em;margin-bottom:16px}
.footer-col ul{display:grid;gap:10px}
.footer-col a{color:rgba(255,255,255,.65);font-size:.88rem;transition:.25s}
.footer-col a:hover{color:var(--sky);margin-left:4px}
.footer-contact-list li{display:flex;gap:10px;align-items:flex-start;color:rgba(255,255,255,.7);font-size:.86rem}
.footer-contact-list i{color:var(--sky);margin-top:3px}
.footer-social{display:flex;gap:10px;margin-top:16px}
.footer-social a{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.08);display:grid;place-items:center;transition:.3s}
.footer-social a:hover{background:var(--sky);color:var(--navy);transform:translateY(-3px)}
.footer-bottom{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:22px 0;border-top:1px solid rgba(255,255,255,.1);font-size:.8rem;color:rgba(255,255,255,.5)}
.footer-legal{display:flex;gap:20px}
.footer-legal a{color:rgba(255,255,255,.5)}
.footer-legal a:hover{color:var(--sky)}
@media(max-width:991px){.footer-grid{grid-template-columns:1fr 1fr;gap:30px}}
@media(max-width:560px){.footer-grid{grid-template-columns:1fr}}

.admin-login-btn{
  position:fixed;right:22px;bottom:90px;width:46px;height:46px;border-radius:50%;
  display:grid;place-items:center;background:var(--navy);color:var(--sky);z-index:4500;
  border:1px solid rgba(135,206,235,.5);box-shadow:0 10px 30px rgba(0,0,0,.25);transition:.3s;
}
.admin-login-btn:hover{transform:scale(1.1) rotate(8deg)}
.back-to-top{
  position:fixed;right:22px;bottom:22px;width:46px;height:46px;border-radius:50%;
  background:var(--deep);color:#fff;border:none;display:grid;place-items:center;
  z-index:4500;box-shadow:0 10px 30px rgba(0,0,0,.2);opacity:0;visibility:hidden;
  transform:translateY(16px);transition:.3s;
}
.back-to-top.show{opacity:1;visibility:visible;transform:translateY(0)}
.back-to-top:hover{background:var(--sky);color:var(--navy)}

/* -------------------------------------------------- Reveal / WOW-like ---- */
.reveal{opacity:0;transform:translateY(32px);transition:opacity .7s ease,transform .7s ease}
.reveal.show{opacity:1;transform:none}
.delay-1{transition-delay:.1s}.delay-2{transition-delay:.2s}.delay-3{transition-delay:.3s}.delay-4{transition-delay:.4s}

/* CTA banner */
.cta-banner{
  position:relative;border-radius:32px;overflow:hidden;padding:70px 50px;
  background:linear-gradient(120deg,var(--deep),var(--mid) 60%,var(--sky));
  color:#fff;display:flex;justify-content:space-between;align-items:center;gap:30px;flex-wrap:wrap;
}
.cta-banner h2{color:#fff;font-size:clamp(1.8rem,3.5vw,2.6rem);max-width:600px}
@media(max-width:767px){.cta-banner{padding:44px 28px;text-align:center;justify-content:center}}

/* -------------------------------------------------- Icon hover polish ----- */
.icon-box,.showcase-item-icon,.process-step .circle-num{transition:transform .4s cubic-bezier(.34,1.56,.64,1),background .35s ease,color .35s ease}
.service-card:hover .icon-box{transform:rotate(-6deg) scale(1.08)}
.process-step:hover .circle-num{transform:scale(1.08) rotate(-4deg)}
.theme-btn:hover i{transform:translateX(4px) scale(1.1)}
.card-arrow{transition:transform .4s cubic-bezier(.34,1.56,.64,1),background .35s ease,color .35s ease}

/* -------------------------------------------------- Service showcase ----- */
.service-showcase{display:grid;grid-template-columns:.85fr 1.15fr;gap:28px;align-items:stretch;margin-bottom:56px}
.showcase-list{display:flex;flex-direction:column;gap:10px}
.showcase-item{
  display:flex;align-items:center;gap:16px;text-align:left;width:100%;
  padding:18px 18px;border-radius:18px;border:1px solid var(--border);
  background:#fff;transition:transform .35s ease,background .35s ease,border-color .35s ease,box-shadow .35s ease;
}
.showcase-item-icon{width:46px;height:46px;flex:0 0 46px;border-radius:12px;background:var(--bg-light);color:var(--deep);display:grid;place-items:center;font-size:1.05rem}
.showcase-item-text{flex:1;min-width:0}
.showcase-item-text strong{display:block;font-size:.96rem;color:var(--navy);transition:color .3s ease}
.showcase-item-text small{display:block;font-size:.78rem;color:var(--text);margin-top:2px;transition:color .3s ease;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.showcase-item-arrow{
  width:32px;height:32px;flex:0 0 32px;border-radius:50%;background:var(--bg-light);color:var(--deep);
  display:grid;place-items:center;opacity:0;transform:translateX(-6px);transition:.35s;font-size:.78rem;
}
.showcase-item:hover{border-color:var(--sky);transform:translateX(4px)}
.showcase-item.active{background:var(--deep);border-color:var(--deep);box-shadow:0 16px 40px rgba(17,77,100,.22)}
.showcase-item.active .showcase-item-icon{background:var(--sky);color:var(--navy)}
.showcase-item.active .showcase-item-text strong{color:#fff}
.showcase-item.active .showcase-item-text small{color:rgba(255,255,255,.72)}
.showcase-item.active .showcase-item-arrow,.showcase-item:hover .showcase-item-arrow{opacity:1;transform:translateX(0)}

.showcase-panel{position:relative;border-radius:28px;overflow:hidden;min-height:460px;box-shadow:0 30px 70px rgba(17,77,100,.18);transform-style:preserve-3d;transition:transform .15s ease}
.showcase-layer{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity .7s ease,transform 1.4s ease;transform:scale(1.05)}
.showcase-layer.active{opacity:1;transform:scale(1)}
.showcase-panel:before{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(11,34,57,.9),rgba(11,34,57,.05) 55%);z-index:1;pointer-events:none}
.showcase-panel-overlay{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;justify-content:flex-end;padding:40px}
.showcase-tag{display:inline-flex;align-self:flex-start;padding:0 16px;height:30px;align-items:center;border-radius:100px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3);color:#fff;font-size:.68rem;text-transform:uppercase;letter-spacing:.14em;margin-bottom:14px}
.showcase-title{color:#fff;font-size:clamp(1.4rem,2.6vw,2rem);margin-bottom:10px;transition:opacity .25s ease}
.showcase-desc{color:rgba(255,255,255,.82);max-width:460px;margin-bottom:22px;transition:opacity .25s ease;font-size:.94rem}
@media(max-width:991px){.service-showcase{grid-template-columns:1fr}.showcase-panel{min-height:340px;order:-1}}
@media(max-width:560px){.showcase-panel-overlay{padding:24px}.showcase-item-text small{white-space:normal}}

/* -------------------------------------------------- Process progress line - */
.process-progress{position:relative;height:3px;background:var(--border);border-radius:3px;margin-bottom:26px;overflow:hidden}
.process-progress span{position:absolute;inset:0 auto 0 0;width:0%;background:linear-gradient(90deg,var(--sky),var(--deep));border-radius:3px}
.process-step{transition:transform .35s ease,box-shadow .35s ease}
.process-step:hover{transform:translateY(-6px);box-shadow:0 20px 40px rgba(17,77,100,.12);z-index:2}

/* -------------------------------------------------- Moving image strip --- */
.image-marquee{
  overflow:hidden;position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.image-marquee-track{display:flex;gap:20px;width:max-content;animation:imgMarquee 34s linear infinite}
.image-marquee:hover .image-marquee-track{animation-play-state:paused}
.image-marquee-item{flex:0 0 260px;height:180px;border-radius:18px;overflow:hidden;box-shadow:0 14px 30px rgba(17,77,100,.12)}
.image-marquee-item img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s ease,filter .4s ease}
.image-marquee-item:hover img{transform:scale(1.12);filter:brightness(1.05)}
@keyframes imgMarquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(max-width:767px){.image-marquee-item{flex:0 0 190px;height:135px}.image-marquee-track{gap:14px}}

/* -------------------------------------------------- Thread decoration ---- */
.thread-deco{
  position:absolute;left:18px;bottom:18px;width:130px;height:130px;color:rgba(17,77,100,.35);
  pointer-events:none;z-index:1;animation:threadFloat 7s ease-in-out infinite;
}
.thread-deco svg{width:100%;height:100%;overflow:visible}
.thread-deco .thread-line{stroke-dasharray:7 6;animation:threadDash 4s linear infinite}
@keyframes threadDash{to{stroke-dashoffset:-130}}
@keyframes threadFloat{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-10px) rotate(3deg)}}
@media(max-width:767px){.thread-deco{width:82px;height:82px;left:12px;bottom:12px}}

/* About page: larger, richer hero than the standard inner-page banner */
/* About page hero — keep heading fully inside gradient banner */
.about-hero{
    min-height:82vh;
    height:auto;
    padding-top:150px;
    padding-bottom:90px;
    display:flex;
    align-items:center;
}

.about-hero .container{
    width:100%;
    max-width:900px;
    position:relative;
    z-index:5;
}

.about-hero h1{
    max-width:850px;
    margin:14px auto 18px;
    line-height:1.08;
}

.about-hero p{
    color:rgba(255,255,255,.82);
    font-size:1.05rem;
    line-height:1.65;
    max-width:560px;
    margin:18px auto 30px;
}

.about-hero .hero-actions{
    margin-bottom:0;
    position:relative;
    z-index:6;
}
@media(max-width:991px){

    .about-hero{
        min-height:70vh;
        padding-top:130px;
        padding-bottom:70px;
    }

    .about-hero h1{
        max-width:760px;
        line-height:1.1;
    }

}

@media(max-width:767px){

    .about-hero{
        min-height:auto;
        padding-top:120px;
        padding-bottom:65px;
    }

    .about-hero .container{
        padding-left:20px;
        padding-right:20px;
    }

    .about-hero h1{
        font-size:clamp(2rem,8vw,3rem);
        line-height:1.12;
        margin-top:14px;
        margin-bottom:16px;
    }

    .about-hero p{
        font-size:.9rem;
        line-height:1.6;
        margin:15px auto 25px;
    }

    .about-hero .hero-actions{
        display:flex;
        flex-wrap:wrap;
        justify-content:center;
        gap:12px;
    }

}


/* @media (max-width: 767px) {
    .about-section.section-padding {
        padding-top: 25px !important;
        padding-bottom: 30px !important;
    }
} */
@media(max-width:480px){

    .about-hero{
        padding-top:105px;
        padding-bottom:55px;
    }

    .about-hero h1{
        font-size:2rem;
        line-height:1.12;
    }

    .about-hero p{
        font-size:.84rem;
    }

    .about-hero .hero-actions{
        flex-direction:column;
        align-items:stretch;
    }

    .about-hero .hero-actions .theme-btn{
        width:100%;
        justify-content:center;
    }

}
.about-hero-chip .ring{width:48px;height:48px;flex:0 0 48px;border-radius:50%;background:var(--sky);display:grid;place-items:center;color:var(--navy);font-size:1.1rem}
.about-hero-chip strong{display:block;font-size:1.3rem;font-family:'Hanken Grotesk',sans-serif}
.about-hero-chip span{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:rgba(255,255,255,.7)}
@media(max-width:991px){.about-hero-chip{display:none}}
/* @media(max-width:767px){.about-hero{min-height:64vh}} */

/* Layered image composition (About page) */
.layered-media{position:relative}
.layered-media .accent-frame{
  position:absolute;right:-24px;top:-30px;width:52%;height:46%;border-radius:22px;
  border:6px solid var(--white);box-shadow:0 20px 50px rgba(17,77,100,.22);overflow:hidden;z-index:2;
}
.layered-media .accent-frame img{width:100%;height:100%;object-fit:cover}
@media(max-width:767px){.layered-media .accent-frame{width:46%;height:38%;right:-12px;top:-18px;border-width:4px}}

@media(prefers-reduced-motion:reduce){*,:after,:before{animation-duration:.01ms!important;transition-duration:.01ms!important}}


/* ============================================================
   SIXM Global — frontend fixes / visual polish
   ============================================================ */


/* Testimonial eyebrow must stay readable on the dark section. */
.testimonial-section .sub-title{
  color:#fff;border-color:rgba(255,255,255,.28);background:rgba(255,255,255,.08);
}
.testimonial-section .sub-title:before{background:var(--sky)}

/* Services hero uses a bright image, so its heading/breadcrumb must be dark. */
.services-page .page-hero h1{color:var(--navy)}
.services-page .page-hero .breadcrumb{color:rgba(11,34,57,.72)}
.services-page .page-hero .breadcrumb a{color:var(--deep)}
.services-page .page-hero .sub-title{color:var(--deep)!important;border-color:rgba(17,77,100,.22)!important;background:rgba(255,255,255,.82)!important}

/* Inner-page heroes with bright photographic backgrounds use the same readable
   SIXM treatment as Services: dark typography over a soft light veil. */
.about-page .page-hero::after,
.team-page .page-hero::after,
.faq-page .page-hero::after,
.contact-page .page-hero::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:rgba(0,0,0,.78);pointer-events:none;
}
.about-page .page-hero h1,
.team-page .page-hero h1,
.faq-page .page-hero h1,
.contact-page .page-hero h1{color:#fff}
.about-page .page-hero .breadcrumb,
.team-page .page-hero .breadcrumb,
.faq-page .page-hero .breadcrumb,
.contact-page .page-hero .breadcrumb{color:rgba(255,255,255,.82)}
.about-page .page-hero .breadcrumb a,
.team-page .page-hero .breadcrumb a,
.faq-page .page-hero .breadcrumb a,
.contact-page .page-hero .breadcrumb a{color:var(--sky)}
.about-page .page-hero .sub-title,
.team-page .page-hero .sub-title,
.faq-page .page-hero .sub-title,
.contact-page .page-hero .sub-title{
  color:#fff!important;border-color:rgba(255,255,255,.35)!important;
  background:rgba(255,255,255,.10)!important;
}
.about-page .page-hero p{color:var(--text)}

/* Footer uses the transparent, theme-colored logo variant on the dark footer. */
.footer-logo{height:58px;margin-bottom:14px;filter:drop-shadow(0 4px 10px rgba(0,0,0,.25))}

/* Logo spacing on small screens. */
@media(max-width:767px){
  .logo{padding:4px 8px 4px 4px}
  .logo img{width:48px;height:48px}
}

/* Cinematic homepage hero */
.sixm-hero .hero-bg{
  transform:scale(1.02);
  transition:none;
  animation:sixmHeroZoom 6.2s ease-in-out both;
}
.sixm-hero .swiper-slide:not(.swiper-slide-active) .hero-bg{
  animation:none;
  transform:scale(1.02);
}
.sixm-hero .swiper-slide-active .hero-bg{
  animation:sixmHeroZoom 5.8s ease-in-out both;
}
@keyframes sixmHeroZoom{
  0%{transform:scale(1.02)}
  100%{transform:scale(1.12)}
}
.sixm-hero .hero-inner > *{
  opacity:0;
  transform:translateY(28px);
}
.sixm-hero .swiper-slide-active .hero-inner > *{
  animation:sixmHeroText .75s cubic-bezier(.22,1,.36,1) forwards;
}
.sixm-hero .swiper-slide-active .hero-inner .sub-title{animation-delay:.08s}
.sixm-hero .swiper-slide-active .hero-inner h1{animation-delay:.18s}
.sixm-hero .swiper-slide-active .hero-inner p{animation-delay:.28s}
.sixm-hero .swiper-slide-active .hero-inner .hero-actions{animation-delay:.38s}
@keyframes sixmHeroText{
  from{opacity:0;transform:translateY(28px) scale(.98)}
  to{opacity:1;transform:translateY(0) scale(1)}
}

/* Explicit readable colors on inner pages. */
.inner-page .section-title h2,
.inner-page .about-copy h2,
.inner-page .contact-section h2,
.inner-page .team-card h3,
.inner-page .team-card p,
.inner-page .faq-question,
.inner-page .faq-answer-inner,
.inner-page .contact-info-item strong{
  color:var(--navy);
}
.inner-page .section-title p,
.inner-page .contact-section p,
.inner-page .contact-info-item small{
  color:var(--text);
}
.inner-page .service-card p,
.inner-page .process-step p{
  color:var(--text);
}
.inner-page .service-card:hover h3,
.inner-page .service-card:hover p{
  color:#fff;
}

/* Prevent image containers from collapsing or showing broken-image artifacts. */
.about-media img,
.layered-media img,
/* Product cards always fill their image area. */
.product-card .bg{
  width:100%;
  height:100%;
  background-repeat:no-repeat;
}

/* Cursor must never be blocked by card layers. */
.tilt-card,
.product-card,
.service-card,
.team-card,
.showcase-item{
  position:relative;
}

/* ============================================================
   SIXM Global — single-screen cinematic hero
   ============================================================ */
.hero-single-screen{
  position:relative;
  min-height:100vh;
  height:100vh;
  overflow:hidden;
  color:#fff;
  isolation:isolate;
}
.hero-visuals,
.hero-image-layer,
.hero-overlay{
  position:absolute;
  inset:0;
}
.hero-image-layer{
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  opacity:0;
  transform:scale(1.04);
  transition:opacity 1.5s cubic-bezier(.4,0,.2,1), transform 5s ease-out;
  z-index:0;
}
.hero-image-layer.is-active{
  opacity:1;
  transform:scale(1.12);
}
.hero-overlay{
  z-index:1;
  background:
    linear-gradient(90deg,rgba(6,27,39,.82) 0%,rgba(6,27,39,.58) 42%,rgba(6,27,39,.24) 78%,rgba(6,27,39,.46) 100%),
    linear-gradient(180deg,rgba(5,25,36,.32),rgba(5,25,36,.28));
  pointer-events:none;
}
.hero-content-wrap{
  position:relative;
  z-index:3;
  height:100%;
  display:flex;
  align-items:center;
}
.hero-single-screen .hero-inner{
  max-width:820px;
  padding-top:90px;
}
.hero-single-screen .hero-inner .sub-title{
  color:#fff;
  border-color:rgba(255,255,255,.42);
  background:rgba(255,255,255,.09);
}
.hero-single-screen .hero-inner h1{
  color:#fff;
  font-size:clamp(2.8rem,6vw,5.5rem);
  line-height:1.02;
  letter-spacing:-.035em;
  margin:20px 0 22px;
  text-shadow:0 8px 35px rgba(0,0,0,.22);
}
.hero-single-screen .hero-inner h1 span{display:inline-block}
.hero-single-screen .hero-inner p{
  color:rgba(255,255,255,.88);
  max-width:650px;
  font-size:1.02rem;
  line-height:1.7;
  margin-bottom:30px;
}
.hero-single-screen .hero-actions{display:flex;gap:14px;flex-wrap:wrap}
.hero-single-screen .theme-btn.outline{
  color:#fff!important;
  border-color:rgba(255,255,255,.6);
}
.hero-single-screen .theme-btn.outline:hover{color:#fff!important}

/* Text re-enters subtly whenever the next image takes over. */
.hero-content-cycle.cycle-animate .sub-title{animation:heroTextIn .8s .05s both}
.hero-content-cycle.cycle-animate h1{animation:heroTextIn .9s .12s both}
.hero-content-cycle.cycle-animate p{animation:heroTextIn .9s .22s both}
.hero-content-cycle.cycle-animate .hero-actions{animation:heroTextIn .9s .32s both}
@keyframes heroTextIn{
  from{opacity:0;transform:translateY(24px);filter:blur(4px)}
  to{opacity:1;transform:translateY(0);filter:blur(0)}
}

.hero-social{
  position:absolute;
  right:34px;
  top:50%;
  transform:translateY(-50%);
  z-index:5;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
}
.hero-social span{
  writing-mode:vertical-rl;
  color:rgba(255,255,255,.8);
  font-size:.68rem;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  margin-bottom:4px;
}
.hero-social a{
  width:36px;
  height:36px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:rgba(255,255,255,.9);
  color:var(--deep);
  box-shadow:0 5px 18px rgba(0,0,0,.12);
  transition:transform .3s ease,background .3s ease,color .3s ease;
}
.hero-social a:hover{transform:translateY(-3px);background:var(--sky);color:var(--navy)}
.hero-sequence-dots{
  position:absolute;
  right:38px;
  bottom:42px;
  z-index:5;
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 11px;
  border:1px solid rgba(255,255,255,.3);
  border-radius:999px;
  background:rgba(10,30,42,.28);
  backdrop-filter:blur(8px);
}
.hero-sequence-dots button{
  width:7px;
  height:7px;
  padding:0;
  border:0;
  border-radius:50%;
  background:#fff;
  opacity:.65;
  cursor:pointer;
  transition:all .3s ease;
}
.hero-sequence-dots button.is-active{width:22px;border-radius:10px;background:var(--sky);opacity:1}
@media(max-width:991px){
  .hero-single-screen .hero-inner{padding-top:70px;max-width:720px}
  .hero-social{right:18px}
}
@media(max-width:767px){
  .hero-single-screen{min-height:92vh;height:92vh}
  .hero-single-screen .hero-inner{padding-top:65px;padding-right:34px}
  .hero-single-screen .hero-inner h1{font-size:clamp(2.4rem,11vw,4rem)}
  .hero-single-screen .hero-inner p{font-size:.92rem;line-height:1.55}
  .hero-social{right:10px;gap:8px}
  .hero-social a{width:31px;height:31px;font-size:.72rem}
  .hero-social span{display:none}
  .hero-sequence-dots{right:16px;bottom:22px}
}

/* CMS-managed media */
.service-card.has-image{background:var(--navy);color:#fff}
.service-card .service-card-image{position:absolute;inset:0;background-size:cover;background-position:center;z-index:0;opacity:1;transition:transform .7s ease,filter .5s ease}
.service-card .service-card-image:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,34,57,.08),rgba(11,34,57,.78))}
.service-card.has-image .bg-fill{transform:scale(1);opacity:.12;background:linear-gradient(160deg,var(--deep),var(--mid));transition:opacity .5s ease,transform .5s ease}
.service-card.has-image:hover .service-card-image{transform:scale(1.06);filter:saturate(1.05)}
.service-card.has-image:hover .bg-fill{opacity:.3}
.service-card.has-image .icon-box{background:rgba(255,255,255,.14);color:#fff}
.service-card.has-image h3,.service-card.has-image p{color:#fff}
.service-card.has-image .card-arrow{background:rgba(255,255,255,.9)}
.product-icon{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;background:rgba(135,206,235,.18);color:var(--sky);margin-left:8px;font-size:.9rem}
.team-photo{width:100%;height:210px;overflow:hidden;background:var(--bg-light)}.team-photo img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s ease}.team-card:hover .team-photo img{transform:scale(1.05)}
@media(max-width:767px){.team-photo{height:200px}}

/* CMS-managed media */
.service-card.has-image{background:var(--navy);color:#fff}
.service-card .service-card-image{position:absolute;inset:0;background-size:cover;background-position:center;z-index:0;opacity:1;transition:transform .7s ease,filter .5s ease}.service-card .service-card-image:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,34,57,.08),rgba(11,34,57,.78))}.service-card.has-image .bg-fill{transform:scale(1);opacity:.12;background:linear-gradient(160deg,var(--deep),var(--mid));transition:opacity .5s ease,transform .5s ease}.service-card.has-image:hover .service-card-image{transform:scale(1.06);filter:saturate(1.05)}.service-card.has-image:hover .bg-fill{opacity:.3}.service-card.has-image .icon-box{background:rgba(255,255,255,.14);color:#fff}.service-card.has-image h3,.service-card.has-image p{color:#fff}.service-card.has-image .card-arrow{background:rgba(255,255,255,.9)}
.product-icon{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;background:rgba(135,206,235,.18);color:var(--sky);margin-left:8px;font-size:.9rem}.team-photo{width:100%;height:210px;overflow:hidden;background:var(--bg-light)}.team-photo img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s ease}.team-card:hover .team-photo img{transform:scale(1.05)}
@media(max-width:767px){.team-photo{height:200px}}

/* Blog & quote additions */
.blog-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.blog-card{background:#fff;border:1px solid var(--border);border-radius:18px;overflow:hidden;box-shadow:0 12px 30px rgba(17,77,100,.08)}
.blog-card img{width:100%;height:230px;object-fit:cover;display:block}
.blog-card-body{padding:24px}
.blog-card-body small{color:var(--mid);font-weight:700;letter-spacing:.04em}
.blog-card-body h3{font-size:1.35rem;line-height:1.25;margin:10px 0}
.blog-card-body h3 a{color:var(--navy)}
.blog-card-body p{color:var(--text);line-height:1.7}
.text-link{font-weight:700;color:var(--deep);display:inline-flex;gap:8px;align-items:center}
.blog-content{white-space:pre-wrap;font-size:1.08rem;line-height:1.9;color:var(--text)}
.login-brand{display:flex;flex-direction:column;align-items:center;gap:10px;margin-bottom:24px}
.login-brand img{max-width:180px;max-height:70px;object-fit:contain}
.login-brand span{font-size:.78rem;text-transform:uppercase;letter-spacing:.16em;color:var(--mid);font-weight:700}
@media(max-width:900px){.blog-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.blog-grid{grid-template-columns:1fr}.blog-card img{height:210px}}
/* Quote and Blog visual corrections */
.quote-page .page-hero{background-color:#eef3f6!important;}
.blog-page .page-hero{background-position:center;background-size:cover;}
.quote-page .page-hero h1,
.blog-page .page-hero h1{color:#0b2239!important;text-shadow:none}
.quote-page .page-hero .breadcrumb{color:rgba(255,255,255,.78)!important}
.blog-page .page-hero .breadcrumb{color:#334b60!important}
.quote-page .page-hero .breadcrumb a{color:var(--sky)!important}
.blog-page .page-hero .breadcrumb a{color:#2e7a9e!important}
.quote-page .page-hero .sub-title,
.blog-page .page-hero .sub-title{background:rgba(135,206,235,.18)!important;border-color:rgba(46,122,158,.25)!important;color:#114d64!important}
.blog-intro{margin-top:68px;margin-bottom:52px;padding-top:6px}
.blog-page .blog-grid{margin-top:10px}

/* blog hero */

.page-hero {
    background-image: var(--hero-image);
}
/* -------------------- */

/* Final team card sizing correction */
.team-grid{align-items:start}
.team-card{align-self:start;min-height:0}
.team-card .team-body{padding:20px 24px}
.team-photo{height:180px}
@media(max-width:767px){.team-photo{height:190px}}

/* Final blog spacing */
.blog-intro{margin-top:78px;margin-bottom:54px;padding-top:8px}

/* Final cursor center: slightly darker filled center */
.cursor-inner{background:rgba(61,126,156,.28);border-color:#4D8EAF}
body.cursor-on-light .cursor-inner{background:rgba(61,126,156,.24);border-color:#3F7F9E}

/* Updated page hero and blog intro fixes */
.blog-page .blog-hero,
.quote-page .quote-hero{
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}
.blog-page .blog-hero{
  background-position:center 45%;
}
.quote-page .quote-hero{
  background-position:center;
}
.blog-intro h2{
  margin-top:22px;
}


/* SIXM final visual fixes */
.site-header .header-container{max-width:1640px}.nav-wrap{min-height:76px}.logo{flex:0 0 70px;padding:4px 8px 4px 2px}.logo img{width:56px;height:56px}.main-menu{flex:1;justify-content:center;gap:2px;min-width:0}.main-menu a{padding:10px 10px;font-size:.76rem;white-space:nowrap;letter-spacing:.015em}.header-right{flex:0 0 auto}.header-rfq-btn{width:168px;min-width:168px;justify-content:center;padding:0 16px;white-space:nowrap;font-size:.74rem}.header-rfq-btn span{white-space:nowrap}.mobile-rfq-btn{justify-content:center;width:100%;margin-top:auto}.loader{width:104px;height:104px}.loader span{display:block;max-width:76px;text-align:center;line-height:1.25;letter-spacing:.16em;font-size:.68rem;white-space:normal}.page-hero{min-height:430px;background-size:cover;background-position:center;position:relative;isolation:isolate;display:flex;align-items:flex-end;overflow:hidden}.page-hero:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(6,27,39,.74),rgba(6,27,39,.42) 55%,rgba(6,27,39,.25));z-index:-1}.page-hero .container{width:100%}.page-hero h1,.page-hero p,.page-hero .breadcrumb{color:#fff}.page-hero .breadcrumb a{color:var(--sky)}
.home-page .section-title h2{font-size:clamp(1.9rem,3.3vw,2.8rem)}.about-page .about-hero h1{font-size:clamp(2rem,4.1vw,3.1rem);line-height:1.06}.hero-single-screen .hero-inner{max-width:760px;padding-top:78px}.hero-single-screen .hero-inner h1{font-size:clamp(2.5rem,4.8vw,4.65rem);line-height:1.04;max-width:760px;margin:16px 0 20px}.hero-single-screen .hero-inner p{font-size:.98rem;max-width:610px;line-height:1.65;margin-bottom:25px}.hero-single-screen .hero-actions{gap:11px}.hero-single-screen .hero-actions .theme-btn{height:50px;padding:0 24px;font-size:.78rem}
.process-section .process-wrapper{grid-template-columns:repeat(6,minmax(0,1fr));border-radius:22px}.process-section .process-step{min-height:255px;padding:28px 20px}.process-section .process-step h3{font-size:.98rem}.process-section .process-step p{font-size:.78rem;line-height:1.55}
.products-page .products-grid,.products-section .products-grid{align-items:stretch}.product-card{min-height:330px}.products-page .product-card{min-height:390px}.products-grid .product-card:last-child:nth-child(10){grid-column:2}.product-card .bg{background-position:center center;filter:saturate(.96) contrast(1.02)}.product-card .content p{color:rgba(255,255,255,.84);font-size:.78rem;line-height:1.5;margin-top:5px}
.qa-content .services-grid{grid-template-columns:repeat(4,minmax(0,1fr));align-items:stretch}.qa-content .service-card{height:100%;min-height:235px}.qa-highlight{border:1px solid rgba(17,77,100,.22);box-shadow:0 10px 28px rgba(17,77,100,.08)}
.portfolio-grid{grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:300px}.portfolio-grid .gallery-item:first-child{grid-row:span 1}.portfolio-grid .gallery-item img{object-position:center}
.service-process-marquee{background:var(--bg-light);overflow:hidden}.service-process-track-wrap{overflow:hidden;width:100%}.service-process-track{display:flex;width:max-content;animation:sixmServiceMarquee 58s linear infinite}.service-process-track:hover{animation-play-state:paused}.service-process-row{display:flex;gap:16px;padding:8px 8px 20px}.service-process-card{width:245px;min-height:220px;flex:0 0 245px;background:#fff;border:1px solid var(--border);border-radius:20px;padding:22px;box-shadow:0 12px 28px rgba(17,77,100,.07);transition:transform .3s ease,box-shadow .3s ease}.service-process-card:hover{transform:translateY(-6px);box-shadow:0 18px 38px rgba(17,77,100,.12)}.service-process-card .circle-num{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:var(--deep);color:#fff;font-weight:700;margin-bottom:13px}.service-process-card>i{color:var(--mid);font-size:1.05rem;margin-bottom:10px;display:block}.service-process-card h3{font-size:1rem;line-height:1.35;margin-bottom:8px}.service-process-card p{font-size:.78rem;line-height:1.55;color:var(--text)}@keyframes sixmServiceMarquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(max-width:1399px){.main-menu a{padding:9px 7px;font-size:.69rem}.header-rfq-btn{width:150px;min-width:150px;padding:0 12px;font-size:.69rem}.logo{flex-basis:62px}.logo img{width:50px;height:50px}}
@media(max-width:1199px){.site-header .header-container{max-width:100%}.main-menu{display:none}.header-right .header-rfq-btn{display:none}.nav-wrap{min-height:66px}.process-section .process-wrapper{grid-template-columns:repeat(3,minmax(0,1fr))}.qa-content .services-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.portfolio-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:260px}}
@media(max-width:767px){.site-header{top:12px}.nav-wrap{min-height:58px;padding:6px 10px 6px 14px}.logo img{width:44px;height:44px}.hero-single-screen .hero-inner{padding-top:55px;padding-right:30px;max-width:650px}.hero-single-screen .hero-inner h1{font-size:clamp(2.15rem,9.8vw,3.4rem);line-height:1.05}.hero-single-screen .hero-inner p{font-size:.88rem;max-width:540px}.hero-single-screen .hero-actions .theme-btn{height:46px;padding:0 18px;font-size:.72rem}.page-hero{min-height:390px}.page-hero .container{padding-top:125px;padding-bottom:45px}.process-section .process-wrapper{grid-template-columns:1fr}.process-section .process-step{min-height:auto}.products-grid .product-card:last-child:nth-child(10){grid-column:auto}.qa-content .services-grid{grid-template-columns:1fr}.portfolio-grid{grid-template-columns:1fr;grid-auto-rows:230px}.service-process-card{width:220px;flex-basis:220px;min-height:200px}}
@media(prefers-reduced-motion:reduce){.service-process-track,.process-marquee-track{animation:none!important}}

.home-page .gallery-grid{grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:220px}.home-page .gallery-grid .gallery-item:first-child{grid-row:span 1}@media(max-width:767px){.home-page .gallery-grid{grid-template-columns:1fr 1fr;grid-auto-rows:180px}}@media(max-width:560px){.home-page .gallery-grid{grid-template-columns:1fr}}


/* ============================================================
   FINAL SERVICES PAGE FIX — typography, hero and process animation
   ============================================================ */
.services-page .services-hero{
  background-image:url('/static/images/hero-textile-factory.jpg') !important;
  background-size:cover;
  background-position:center;
  min-height:78vh;
  padding-bottom:10px;
}
.services-page .services-hero::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:rgba(234,246,252,.76);
  pointer-events:none;
}
.services-page .services-hero .container{z-index:2;max-width:900px}
.services-page .services-hero h1{
  color:var(--navy) !important;
  font-size:clamp(2.8rem,5vw,4.6rem) !important;
  line-height:1.05;
  font-weight:800;
  letter-spacing:-.035em;
  margin:18px 0 14px;
}
.services-page .services-hero .sub-title{
  color:var(--deep) !important;
  background:rgba(255,255,255,.78) !important;
  border-color:rgba(17,77,100,.20) !important;
}
.services-page .services-hero .breadcrumb{color:rgba(11,34,57,.72) !important}
.services-page .services-hero .breadcrumb a{color:var(--deep) !important}
.services-page .section-title h2{
  font-family:'Hanken Grotesk',sans-serif;
  font-weight:800;
  letter-spacing:-.025em;
}
.services-page .section-title p,
.services-page .service-card p,
.services-page .process-step p{
  font-family:'Hanken Grotesk',sans-serif;
}

/* How We Deliver: cards reveal sequentially when the section enters view. */
.services-page .services-process-wrapper .service-process-animate-card{
  opacity:0;
  transform:translateY(48px) scale(.96);
  filter:blur(3px);
  transition:
    opacity .75s cubic-bezier(.22,1,.36,1) var(--process-delay,0ms),
    transform .75s cubic-bezier(.22,1,.36,1) var(--process-delay,0ms),
    filter .75s ease var(--process-delay,0ms),
    box-shadow .3s ease;
}
.services-page .services-process-wrapper.process-visible .service-process-animate-card{
  opacity:1;
  transform:translateY(0) scale(1);
  filter:blur(0);
}
.services-page .services-process-wrapper .service-process-animate-card:hover{
  transform:translateY(-8px) scale(1.015);
  box-shadow:0 20px 40px rgba(17,77,100,.14);
}
.services-page .services-process-wrapper .service-process-animate-card:nth-child(1){--process-delay:0ms}
.services-page .services-process-wrapper .service-process-animate-card:nth-child(2){--process-delay:80ms}
.services-page .services-process-wrapper .service-process-animate-card:nth-child(3){--process-delay:160ms}
.services-page .services-process-wrapper .service-process-animate-card:nth-child(4){--process-delay:240ms}
.services-page .services-process-wrapper .service-process-animate-card:nth-child(5){--process-delay:320ms}
.services-page .services-process-wrapper .service-process-animate-card:nth-child(6){--process-delay:400ms}
.services-page .services-process-wrapper .service-process-animate-card:nth-child(7){--process-delay:480ms}
.services-page .services-process-wrapper .service-process-animate-card:nth-child(8){--process-delay:560ms}
.services-page .services-process-wrapper .service-process-animate-card:nth-child(9){--process-delay:640ms}
.services-page .services-process-wrapper .service-process-animate-card:nth-child(10){--process-delay:720ms}
.services-page .services-process-wrapper .service-process-animate-card:nth-child(11){--process-delay:800ms}
.services-page .services-process-wrapper .service-process-animate-card:nth-child(12){--process-delay:880ms}
.services-page .services-process-wrapper .service-process-animate-card:nth-child(13){--process-delay:960ms}
.services-page .services-process-wrapper .service-process-animate-card:nth-child(14){--process-delay:1040ms}
.services-page .services-process-wrapper .service-process-animate-card:nth-child(15){--process-delay:1120ms}
.services-page .services-process-wrapper .service-process-animate-card:nth-child(16){--process-delay:1200ms}
.services-page .services-process-wrapper .service-process-animate-card:nth-child(17){--process-delay:1280ms}
.services-page .services-process-wrapper .service-process-animate-card:nth-child(18){--process-delay:1360ms}
@media(max-width:767px){
  .services-page .services-hero{min-height:64vh}
  .services-page .services-hero h1{font-size:clamp(2.3rem,10vw,3.5rem) !important}
}
@media(prefers-reduced-motion:reduce){
  .services-page .services-process-wrapper .service-process-animate-card{
    opacity:1;transform:none;filter:none;transition:none;
  }
}

/* ================================================================
   SIXM GLOBAL — FINAL RESPONSIVE OVERRIDES
   Added after the existing design rules so these rules win over
   older mobile/tablet declarations in this project.
   ================================================================ */

/* ---------- Global sizing / overflow ---------- */
html,
body {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: hidden;
}

body {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

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

img,
video {
  height: auto;
}

button,
input,
textarea,
select {
  max-width: 100%;
}

.container,
.header-container {
  width: 100%;
  min-width: 0;
}

.container {
  max-width: 1280px;
}

section,
header,
footer,
main,
nav,
article,
aside,
div {
  min-width: 0;
}

/* Never let long CMS/user text create horizontal overflow. */
h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
li,
small,
strong,
span,
label {
  overflow-wrap: anywhere;
}

/* ---------- Header ---------- */
.site-header {
  width: 100%;
  left: 0;
  right: 0;
}

.site-header .header-container {
  width: 100%;
  max-width: 1640px;
  padding-left: 16px;
  padding-right: 16px;
}

.nav-wrap {
  width: 100%;
  min-width: 0;
}

.logo {
  min-width: 0;
  flex-shrink: 1;
}

.logo img {
  flex: 0 0 auto;
}

.menu-toggle {
  flex: 0 0 auto;
}

@media (max-width: 1199px) {
  .site-header .header-container {
    padding-left: 14px;
    padding-right: 14px;
  }
}

@media (max-width: 767px) {
  .site-header {
    top: 10px;
  }

  .site-header .header-container {
    padding-left: 10px;
    padding-right: 10px;
  }

  .nav-wrap {
    min-height: 56px;
    padding: 5px 8px 5px 12px;
    border-radius: 999px;
  }

  .logo {
    padding: 3px 5px 3px 2px;
  }

  .logo img {
    width: 44px;
    height: 44px;
  }

  .menu-toggle {
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    padding: 7px;
  }

  .menu-toggle span {
    width: 22px;
  }
}

@media (max-width: 380px) {
  .site-header .header-container {
    padding-left: 7px;
    padding-right: 7px;
  }

  .nav-wrap {
    min-height: 52px;
    padding-left: 9px;
    padding-right: 6px;
  }

  .logo img {
    width: 40px;
    height: 40px;
  }

  .menu-toggle,
  .mobile-menu-close {
    width: 40px;
    height: 40px;
  }
}

/* ---------- Mobile navigation ---------- */
.mobile-menu-overlay {
  width: 100%;
  max-width: 100%;
}

.mobile-menu-panel {
  width: min(380px, 92vw);
  max-width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding-top: max(24px, env(safe-area-inset-top));
  padding-bottom: max(24px, env(safe-area-inset-bottom));
}

.mobile-menu-links a {
  overflow-wrap: normal;
  word-break: normal;
}

/* ---------- Buttons ---------- */
.theme-btn {
  max-width: 100%;
  white-space: normal;
  text-align: center;
  justify-content: center;
}

@media (max-width: 767px) {
  .hero-actions {
    width: 100%;
    gap: 10px;
  }

  .hero-actions .theme-btn,
  .hero-single-screen .hero-actions .theme-btn,
  .page-hero .hero-actions .theme-btn {
    min-height: 46px;
    height: auto;
    min-width: 0;
    padding: 12px 17px;
    font-size: .70rem;
    line-height: 1.25;
  }
}

/* ---------- Homepage hero ---------- */
.hero-single-screen {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.hero-visuals,
.hero-image-layer,
.hero-overlay {
  width: 100%;
  max-width: 100%;
}

.hero-content-wrap {
  width: 100%;
  max-width: 100%;
}

.hero-single-screen .hero-inner {
  width: 100%;
  min-width: 0;
  max-width: 820px;
}

.hero-single-screen .hero-inner h1 {
  max-width: 100%;
}

@media (max-width: 991px) {
  .hero-single-screen .hero-inner {
    max-width: min(760px, 100%);
  }
}

@media (max-width: 767px) {
  .hero-single-screen {
    min-height: 0;
    height: auto;
    min-height: 720px;
  }

  .hero-content-wrap {
    min-height: 720px;
    align-items: center;
  }

  .hero-single-screen .hero-inner {
    max-width: 100%;
    padding-top: 68px;
    padding-right: 62px;
    padding-bottom: 76px;
  }

  .hero-single-screen .hero-inner .sub-title {
    max-width: 100%;
    height: auto;
    min-height: 30px;
    padding: 7px 12px;
    font-size: .57rem;
    line-height: 1.35;
    letter-spacing: .08em;
  }

  .hero-single-screen .hero-inner h1 {
    font-size: clamp(2rem, 9vw, 3rem);
    line-height: 1.04;
    letter-spacing: -.025em;
    margin: 15px 0 17px;
  }

  .hero-single-screen .hero-inner h1 span {
    display: inline;
  }

  .hero-single-screen .hero-inner p {
    max-width: 100%;
    font-size: .86rem;
    line-height: 1.55;
    margin-bottom: 20px;
  }

  .hero-single-screen .hero-actions {
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
  }

  .hero-single-screen .hero-actions .theme-btn {
    width: auto;
    max-width: 100%;
  }

  .hero-social {
    right: 9px;
    top: 53%;
    gap: 7px;
  }

  .hero-social a {
    width: 32px;
    height: 32px;
    font-size: .68rem;
  }

  .hero-sequence-dots {
    right: 12px;
    bottom: 18px;
    padding: 6px 9px;
    gap: 6px;
  }

  .hero-sequence-dots button {
    width: 6px;
    height: 6px;
  }

  .hero-sequence-dots button.is-active {
    width: 18px;
  }
}

@media (max-width: 480px) {
  .hero-single-screen {
    min-height: 670px;
  }

  .hero-content-wrap {
    min-height: 670px;
  }

  .hero-single-screen .hero-inner {
    padding-top: 62px;
    padding-right: 48px;
    padding-bottom: 70px;
  }

  .hero-single-screen .hero-inner h1 {
    font-size: clamp(1.9rem, 9vw, 2.55rem);
  }

  .hero-single-screen .hero-inner p {
    font-size: .82rem;
  }

  .hero-single-screen .hero-actions .theme-btn {
    min-height: 43px;
    padding: 10px 15px;
    font-size: .65rem;
  }

  .hero-social {
    right: 7px;
  }

  .hero-social a {
    width: 29px;
    height: 29px;
  }
}

@media (max-width: 360px) {
  .hero-single-screen {
    min-height: 640px;
  }

  .hero-content-wrap {
    min-height: 640px;
  }

  .hero-single-screen .hero-inner {
    padding-right: 42px;
  }

  .hero-single-screen .hero-inner h1 {
    font-size: 1.85rem;
  }

  .hero-single-screen .hero-inner p {
    font-size: .79rem;
  }
}

/* ---------- Marquee ---------- */
.marquee-strip {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

.marquee-track {
  width: max-content;
  max-width: none;
}

@media (max-width: 767px) {
  .marquee-strip {
    padding: 10px 0;
  }

  .marquee-track span {
    font-size: .72rem;
    padding: 0 12px;
    gap: 11px;
  }
}

/* ---------- Standard inner-page heroes ---------- */
.page-hero {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.page-hero .container {
  width: 100%;
  max-width: 1280px;
}

@media (max-width: 767px) {
  .page-hero {
    min-height: 360px;
  }

  .page-hero .container {
    padding-top: 110px;
    padding-bottom: 38px;
  }

  .page-hero h1 {
    font-size: clamp(2rem, 8.5vw, 2.9rem);
    line-height: 1.06;
    margin: 14px 0 10px;
  }

  .page-hero p {
    font-size: .88rem;
    line-height: 1.55;
    max-width: 100%;
  }

  .page-hero .breadcrumb {
    font-size: .72rem;
  }

  .page-hero .sub-title {
    height: auto;
    min-height: 29px;
    padding: 6px 12px;
    font-size: .58rem;
    line-height: 1.3;
  }
}

/* ---------- Sections / typography ---------- */
@media (max-width: 767px) {
  .container {
    width: calc(100% - 28px);
    max-width: none;
    padding-left: 0;
    padding-right: 0;
  }

  .section-padding {
    padding-top: 52px;
    padding-bottom: 52px;
  }

  .section-title {
    width: 100%;
    max-width: 100%;
    margin-bottom: 30px;
  }

  .section-title h2,
  .home-page .section-title h2 {
    font-size: clamp(1.65rem, 7.5vw, 2.35rem) !important;
    line-height: 1.1;
    margin-top: 12px;
  }

  .section-title p {
    font-size: .9rem;
    line-height: 1.65;
  }

  .sub-title {
    min-height: 30px;
    height: auto;
    padding: 6px 13px;
    font-size: .60rem;
    letter-spacing: .08em;
    line-height: 1.25;
  }
}

@media (max-width: 380px) {
  .container {
    width: calc(100% - 22px);
  }

  .section-padding {
    padding-top: 45px;
    padding-bottom: 45px;
  }
}

/* ---------- Grids ---------- */
@media (max-width: 1199px) {
  .services-grid,
  .products-grid,
  .team-grid,
  .blog-grid,
  .gallery-grid,
  .portfolio-grid,
  .qa-content .services-grid {
    min-width: 0;
  }
}

@media (max-width: 767px) {
  .about-grid,
  .service-showcase,
  .contact-grid,
  .footer-grid,
  .process-details-grid {
    grid-template-columns: 1fr !important;
  }

  .services-grid,
  .products-grid,
  .team-grid,
  .blog-grid,
  .portfolio-grid {
    grid-template-columns: 1fr !important;
    gap: 16px;
  }

  /* This also overrides inline grid-template-columns used on the home page. */
  .home-page .services-grid,
  .qa-content .services-grid {
    grid-template-columns: 1fr !important;
  }

  .gallery-grid,
  .home-page .gallery-grid {
    grid-template-columns: 1fr !important;
    grid-auto-rows: 220px;
  }

  .about-grid {
    gap: 34px;
  }

  .about-media img {
    height: 300px;
    border-radius: 20px;
  }

  .about-media .float-badge {
    left: 12px;
    bottom: 12px;
    max-width: calc(100% - 24px);
    padding: 14px 16px;
    border-radius: 16px;
  }

  .about-media .float-badge .ring {
    width: 44px;
    height: 44px;
    flex-basis: 44px;
  }

  .about-checks {
    grid-template-columns: 1fr !important;
    gap: 10px;
    margin: 20px 0 24px;
  }

  .about-checks li {
    font-size: .84rem;
  }

  .service-card {
    min-height: 0;
    padding: 24px 20px;
    border-radius: 18px;
  }

  .service-card .icon-box {
    width: 48px;
    height: 48px;
    margin-bottom: 34px;
  }

  .service-card h3 {
    font-size: 1rem;
  }

  .service-card p {
    font-size: .82rem;
  }

  .product-card {
    min-height: 300px;
    border-radius: 18px;
  }

  .product-card .content {
    left: 18px;
    right: 18px;
    bottom: 18px;
  }

  .product-card h3 {
    font-size: 1.15rem;
  }

  .team-photo {
    height: 220px;
  }

  .team-card .team-body {
    padding: 18px;
  }

  .blog-card img {
    height: 205px;
  }

  .blog-card-body {
    padding: 18px;
  }

  .gallery-item:first-child {
    grid-row: span 1;
  }

  .portfolio-grid {
    grid-auto-rows: 230px !important;
  }
}

@media (max-width: 380px) {
  .about-media img {
    height: 260px;
  }

  .product-card {
    min-height: 270px;
  }

  .team-photo {
    height: 190px;
  }

  .blog-card img {
    height: 180px;
  }
}

/* ---------- Stats ---------- */
@media (max-width: 767px) {
  .stats-grid {
    grid-template-columns: 1fr 1fr;
  }

  .stat-box {
    padding: 26px 12px;
  }

  .stat-box strong {
    font-size: 2rem;
  }

  .stat-box span {
    font-size: .62rem;
    line-height: 1.4;
  }
}

@media (max-width: 380px) {
  .stats-grid {
    grid-template-columns: 1fr;
  }
}

/* ---------- Showcase ---------- */
@media (max-width: 767px) {
  .showcase-panel {
    min-height: 300px;
    border-radius: 20px;
  }

  .showcase-panel-overlay {
    padding: 22px;
  }

  .showcase-item {
    padding: 14px;
    gap: 11px;
  }

  .showcase-item-icon {
    width: 40px;
    height: 40px;
    flex-basis: 40px;
  }

  .showcase-item-text strong {
    font-size: .86rem;
  }

  .showcase-item-text small {
    font-size: .70rem;
    white-space: normal;
  }

  .showcase-item-arrow {
    opacity: 1;
    transform: none;
  }
}

/* ---------- Process pages ---------- */
@media (max-width: 767px) {
  .process-section .process-wrapper,
  .process-wrapper {
    grid-template-columns: 1fr !important;
    border-radius: 18px;
  }

  .process-step {
    min-height: 0;
    padding: 24px 20px;
  }

  .process-step h3 {
    font-size: .96rem;
  }

  .process-step p {
    font-size: .78rem;
  }

  .process-hero {
    min-height: 470px;
    padding: 105px 0 48px;
  }

  .process-scroll-viewport {
    display: none !important;
  }

  .process-mobile-list {
    display: block !important;
  }

  .process-details-grid {
    grid-template-columns: 1fr !important;
  }

  .process-details {
    padding: 20px;
  }

  .mobile-process-item {
    margin-left: 9px;
    padding-left: 20px;
  }

  .mobile-process-button {
    padding: 15px;
  }
}

/* ---------- Services hero ---------- */
@media (max-width: 767px) {
  .services-page .services-hero {
    min-height: 520px !important;
  }

  .services-page .services-hero .container {
    width: calc(100% - 28px);
  }

  .services-page .services-hero h1 {
    font-size: clamp(2rem, 8.5vw, 2.8rem) !important;
    line-height: 1.06;
  }
}

/* ---------- About / team ---------- */
@media (max-width: 767px) {
  .about-hero {
    min-height: 500px !important;
  }

  .about-hero .container {
    max-width: none;
  }

  .about-hero p {
    font-size: .88rem;
  }

  .about-story-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 28px;
  }

  .experience-highlights {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px;
  }

  .experience-highlight {
    padding: 20px 13px;
  }

  .experience-highlight strong {
    font-size: 1.7rem;
  }

  .experience-highlight span {
    font-size: .62rem;
  }
}

@media (max-width: 380px) {
  .experience-highlights {
    grid-template-columns: 1fr !important;
  }
}

/* ---------- Contact / forms ---------- */
@media (max-width: 767px) {
  .contact-form-card {
    width: 100%;
  }

  .contact-form-card .form-grid,
  .form-grid {
    grid-template-columns: 1fr !important;
    gap: 12px;
  }

  .contact-form-card textarea {
    grid-column: auto;
  }

  input,
  textarea,
  select {
    min-height: 46px;
    font-size: 16px !important;
  }

  textarea {
    min-height: 125px;
  }

  .theme-btn.full {
    width: 100%;
  }
}

/* ---------- CTA / footer ---------- */
@media (max-width: 767px) {
  .cta-banner {
    padding: 34px 20px;
    border-radius: 22px;
    gap: 18px;
  }

  .cta-banner h2 {
    font-size: clamp(1.55rem, 7vw, 2rem);
  }

  .footer-grid {
    grid-template-columns: 1fr !important;
    padding: 44px 0 28px;
    gap: 26px;
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }

  .footer-legal {
    flex-wrap: wrap;
    gap: 10px 14px;
  }

  .newsletter-form {
    min-width: 0;
    width: 100%;
  }
}

/* ---------- Floating controls ---------- */
@media (max-width: 767px) {
  .admin-login-btn,
  .back-to-top {
    width: 42px;
    height: 42px;
    right: 12px;
  }

  .admin-login-btn {
    bottom: 70px;
  }

  .back-to-top {
    bottom: 16px;
  }
}

/* ---------- Moving image strips ---------- */
@media (max-width: 767px) {
  .image-marquee-item {
    flex-basis: 170px;
    height: 120px;
  }

  .image-marquee-track {
    gap: 12px;
  }

  .service-process-track-wrap {
    width: 100%;
    max-width: 100%;
  }

  .service-process-card {
    width: 210px;
    flex-basis: 210px;
    min-height: 190px;
    padding: 18px;
  }
}

/* ---------- Legal / long text pages ---------- */
@media (max-width: 767px) {
  .legal-content,
  .blog-content {
    font-size: .92rem;
    line-height: 1.75;
  }

  .blog-content img,
  .legal-content img {
    width: 100%;
    height: auto;
  }
}

/* ---------- Touch devices ---------- */
@media (hover: none), (pointer: coarse) {
  .tilt-card,
  .service-card,
  .product-card,
  .team-card,
  .showcase-item {
    transform: none !important;
  }

  .service-card:hover .bg-fill,
  .product-card:hover .bg,
  .team-card:hover .team-photo img {
    transform: none;
  }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .hero-image-layer,
  .marquee-track,
  .image-marquee-track,
  .service-process-track {
    animation: none !important;
    transition: none !important;
  }
}

/* ---------- Very wide desktop ---------- */
@media (min-width: 1600px) {
  .container {
    max-width: 1440px;
  }

  .hero-single-screen .hero-inner {
    max-width: 900px;
  }
}



/* =========================================================
   SIXM GLOBAL - FINAL MOBILE CARD GRID + COMPACT HERO
   ========================================================= */

/* Prevent desktop sizing from leaking into mobile layouts */
html, body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

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

/* Inner-page hero: compact on phones.
   The image stays cover-sized to the shorter hero rather than
   consuming most of the mobile screen. */
@media (max-width: 767px) {
  .page-hero {
    min-height: 360px !important;
    height: 360px;
    background-size: cover !important;
    background-position: center center !important;
  }

  .page-hero .container {
    width: 100%;
    max-width: 100%;
    padding: 118px 16px 28px !important;
  }

  .page-hero h1 {
    font-size: clamp(2rem, 9vw, 2.65rem) !important;
    line-height: 1.04 !important;
    letter-spacing: -.035em;
    margin: 12px 0 10px !important;
    max-width: 100%;
  }

  .page-hero p {
    font-size: .9rem !important;
    line-height: 1.55 !important;
    max-width: 100%;
  }

  .page-hero .breadcrumb {
    font-size: .72rem !important;
  }

  .page-hero .sub-title {
    height: 32px;
    padding: 0 13px !important;
    font-size: .62rem !important;
    letter-spacing: .08em !important;
    max-width: 100%;
  }

  /* Keep the image crisp on phones */
  .page-hero::after {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    background: rgba(11,34,57,.22) !important;
  }

  /* ---------- All major card collections: 2-column mobile grid ---------- */

  .products-grid,
  .products-page .products-grid,
  .products-section .products-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    width: 100%;
  }

  .product-card,
  .products-page .product-card {
    min-width: 0 !important;
    min-height: 190px !important;
    height: 190px !important;
    border-radius: 15px !important;
  }

  .product-card .content {
    left: 12px !important;
    right: 10px !important;
    bottom: 12px !important;
  }

  .product-card .content small {
    font-size: .55rem !important;
    letter-spacing: .08em !important;
  }

  .product-card h3 {
    font-size: .98rem !important;
    line-height: 1.12 !important;
    margin: 4px 0 !important;
  }

  .product-card .content p {
    font-size: .66rem !important;
    line-height: 1.35 !important;
    margin-top: 3px !important;
  }

  /* Services cards -> compact 2-column grid */
  .services-grid,
  .qa-content .services-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    width: 100%;
  }

  .service-card,
  .qa-content .service-card {
    min-width: 0 !important;
    min-height: 190px !important;
    height: auto !important;
    padding: 18px 14px !important;
    border-radius: 15px !important;
  }

  .service-card .icon-box {
    width: 40px !important;
    height: 40px !important;
    margin-bottom: 28px !important;
    border-radius: 11px !important;
    font-size: 1rem !important;
  }

  .service-card .card-arrow {
    width: 28px !important;
    height: 28px !important;
    right: 12px !important;
    top: 12px !important;
    font-size: .7rem !important;
  }

  .service-card h3 {
    font-size: .88rem !important;
    line-height: 1.18 !important;
    margin-bottom: 5px !important;
  }

  .service-card p {
    font-size: .68rem !important;
    line-height: 1.4 !important;
  }

  /* QA cards should behave exactly like the service grid */
  .qa-content .service-card {
    min-height: 180px !important;
  }

  /* Team cards -> 2 columns */
  .team-grid,
  .leadership-grid,
  .team-page .team-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

  .team-card {
    min-width: 0 !important;
    border-radius: 15px !important;
  }

  .team-photo {
    height: 150px !important;
  }

  .team-card .team-body {
    padding: 13px !important;
  }

  .team-card h3 {
    font-size: .92rem !important;
    line-height: 1.2 !important;
  }

  .team-card p,
  .team-card .position {
    font-size: .68rem !important;
    line-height: 1.35 !important;
  }

  /* Blog cards -> 2 columns */
  .blog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

  .blog-card {
    min-width: 0 !important;
    border-radius: 14px !important;
  }

  .blog-card img {
    height: 130px !important;
  }

  .blog-card-body {
    padding: 13px !important;
  }

  .blog-card-body h3 {
    font-size: .9rem !important;
    line-height: 1.2 !important;
    margin: 6px 0 !important;
  }

  .blog-card-body p {
    font-size: .68rem !important;
    line-height: 1.4 !important;
  }

  /* Gallery / portfolio */
  .gallery-grid,
  .portfolio-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-rows: 150px !important;
    gap: 10px !important;
  }

  .gallery-item:first-child,
  .portfolio-grid .gallery-item:first-child {
    grid-row: span 1 !important;
    grid-column: span 1 !important;
  }

  /* Generic 2-column collections used by sections */
  .cards-grid,
  .features-grid,
  .capabilities-grid,
  .categories-grid,
  .showcase-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

  /* Keep section containers from becoming oversized */
  .section,
  .section-padding {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }

  .section-title {
    max-width: 100% !important;
    margin-bottom: 28px !important;
  }

  .section-title h2 {
    font-size: clamp(1.75rem, 7vw, 2.3rem) !important;
    line-height: 1.08 !important;
  }

  .section-title p {
    font-size: .82rem !important;
    line-height: 1.55 !important;
  }

  /* Process cards remain readable without becoming full-width giants */
  .process-wrapper {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

  .process-step {
    min-width: 0 !important;
    padding: 16px 12px !important;
  }

  .process-step h3 {
    font-size: .82rem !important;
    line-height: 1.2 !important;
  }

  .process-step p {
    font-size: .66rem !important;
    line-height: 1.4 !important;
  }

  /* Experience/stat cards */
  .experience-highlights,
  .stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  /* Make buttons fit naturally on small screens */
  .hero-actions {
    gap: 9px !important;
    flex-wrap: wrap !important;
  }

  .hero-actions .btn {
    min-height: 46px !important;
    padding: 0 18px !important;
    font-size: .72rem !important;
  }

  /* Don't let floating controls cover cards/text */
  .hero-social,
  .hero-arrows {
    display: none !important;
  }
}

/* Small phones: preserve the 2-column card design but tighten it */
@media (max-width: 380px) {
  .page-hero {
    min-height: 335px !important;
    height: 335px;
  }

  .page-hero .container {
    padding: 108px 13px 22px !important;
  }

  .page-hero h1 {
    font-size: clamp(1.8rem, 8.8vw, 2.25rem) !important;
  }

  .products-grid,
  .services-grid,
  .qa-content .services-grid,
  .team-grid,
  .leadership-grid,
  .blog-grid,
  .gallery-grid,
  .portfolio-grid {
    gap: 9px !important;
  }

  .product-card,
  .products-page .product-card {
    min-height: 170px !important;
    height: 170px !important;
  }

  .product-card h3 {
    font-size: .86rem !important;
  }

  .service-card,
  .qa-content .service-card {
    min-height: 170px !important;
    padding: 14px 11px !important;
  }

  .service-card .icon-box {
    width: 35px !important;
    height: 35px !important;
    margin-bottom: 24px !important;
  }

  .service-card h3 {
    font-size: .78rem !important;
  }

  .service-card p {
    font-size: .61rem !important;
  }

  .team-photo {
    height: 125px !important;
  }

  .blog-card img {
    height: 110px !important;
  }

  .gallery-grid,
  .portfolio-grid {
    grid-auto-rows: 125px !important;
  }
}

/* Landscape phones */
@media (max-width: 900px) and (orientation: landscape) {
  .page-hero {
    min-height: 320px !important;
    height: 320px;
  }

  .page-hero .container {
    padding-top: 105px !important;
    padding-bottom: 20px !important;
  }
}

/* Tablet: keep the card grid compact but give cards more breathing room */
@media (min-width: 768px) and (max-width: 991px) {
  .products-grid,
  .services-grid,
  .qa-content .services-grid,
  .team-grid,
  .leadership-grid,
  .blog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .product-card {
    min-height: 300px !important;
  }

  .page-hero {
    min-height: 430px !important;
  }
}
/* =========================================================
   SIXM GLOBAL — FINAL SERVICES MOBILE OVERRIDE
   Keep this block at the VERY END of style.css
   ========================================================= */

/* Prevent horizontal overflow */
html,
body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

/* =========================================================
   SERVICES PAGE — MOBILE
   ========================================================= */

@media (max-width: 767px) {

    /* ---------- Services hero ---------- */

    .services-page .services-hero {
        min-height: 360px !important;
        height: 360px !important;
        padding: 0 !important;
        background-size: cover !important;
        background-position: center center !important;
    }

    .services-page .services-hero .container {
        width: 100% !important;
        max-width: 100% !important;
        padding: 120px 18px 25px !important;
        margin: 0 !important;
    }

    .services-page .services-hero h1 {
        font-size: clamp(2rem, 8.5vw, 2.6rem) !important;
        line-height: 1.05 !important;
        margin: 12px 0 !important;
        color: #ffffff !important;
        max-width: 100% !important;
    }

    .services-page .services-hero p {
        font-size: 0.92rem !important;
        line-height: 1.5 !important;
        color: #ffffff !important;
    }

    .services-page .services-hero .sub-title {
        display: inline-flex !important;
        align-items: center !important;
        max-width: 100% !important;
        height: 32px !important;
        padding: 0 12px !important;
        font-size: 0.62rem !important;
        letter-spacing: .06em !important;
        color: #ffffff !important;
        background: rgba(17, 77, 100, .78) !important;
        border-color: rgba(255,255,255,.4) !important;
    }

    .services-page .services-hero .breadcrumb {
        font-size: .72rem !important;
        color: rgba(255,255,255,.9) !important;
    }

    .services-page .services-hero .breadcrumb a {
        color: #ffffff !important;
    }


    /* =====================================================
       SERVICES CATALOG
       2 columns on phones
       ===================================================== */

    .services-page .services-grid,
    .services-page .services-section .services-grid,
    .services-page .qa-content .services-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
    }


    /* Compact service cards */

    .services-page .service-card {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 145px !important;
        height: 145px !important;
        padding: 14px !important;
        border-radius: 14px !important;
        overflow: hidden !important;
    }


    /* Service card heading */

    .services-page .service-card h3 {
        font-size: .82rem !important;
        line-height: 1.15 !important;
        margin: 7px 0 5px !important;
        color: var(--navy) !important;
    }


    /* Service card description */

    .services-page .service-card p {
        font-size: .67rem !important;
        line-height: 1.35 !important;
        margin: 0 !important;
        color: var(--text) !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 3 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }


    /* Service icon */

    .services-page .service-card .icon,
    .services-page .service-card .service-icon {
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        min-height: 34px !important;
        font-size: .8rem !important;
    }


    /* Don't make cards huge when hovered/touched */

    .services-page .service-card:hover {
        transform: none !important;
    }


    /* =====================================================
       FEATURED SERVICE SHOWCASE
       ===================================================== */

    .services-page .service-showcase {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        width: 100% !important;
    }

    .services-page .showcase-panel {
        width: 100% !important;
        min-height: 230px !important;
        height: 230px !important;
        border-radius: 15px !important;
        overflow: hidden !important;
    }

    .services-page .showcase-panel h2,
    .services-page .showcase-panel h3 {
        font-size: 1.2rem !important;
        line-height: 1.15 !important;
    }

    .services-page .showcase-panel p {
        font-size: .72rem !important;
        line-height: 1.4 !important;
    }


    /* Service list below featured image */

    .services-page .showcase-list {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
        width: 100% !important;
    }

    .services-page .showcase-item {
        min-width: 0 !important;
        min-height: 72px !important;
        padding: 10px !important;
        border-radius: 12px !important;
    }

    .services-page .showcase-item h3 {
        font-size: .72rem !important;
        line-height: 1.2 !important;
    }

    .services-page .showcase-item p {
        font-size: .61rem !important;
        line-height: 1.3 !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }


    /* =====================================================
       SERVICES SECTION TYPOGRAPHY
       ===================================================== */

    .services-page .section-title h2 {
        font-size: clamp(1.7rem, 7vw, 2.2rem) !important;
        line-height: 1.1 !important;
    }

    .services-page .section-title p {
        font-size: .82rem !important;
        line-height: 1.55 !important;
    }


    /* =====================================================
       PROCESS CARDS
       ===================================================== */

    .services-page .service-process-track {
        gap: 10px !important;
    }

    .services-page .service-process-card {
        width: 190px !important;
        min-width: 190px !important;
        flex-basis: 190px !important;
        min-height: 160px !important;
        padding: 14px !important;
    }

    .services-page .service-process-card h3 {
        font-size: .78rem !important;
        line-height: 1.2 !important;
    }

    .services-page .service-process-card p {
        font-size: .64rem !important;
        line-height: 1.35 !important;
    }


    /* =====================================================
       SERVICES PAGE — GENERAL SPACING
       ===================================================== */

    .services-page section {
        overflow: hidden !important;
    }

    .services-page .container {
        width: calc(100% - 28px) !important;
        max-width: 100% !important;
    }

}


/* =========================================================
   VERY SMALL PHONES
   320px–390px
   ========================================================= */

@media (max-width: 390px) {

    .services-page .services-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    .services-page .service-card {
        min-height: 135px !important;
        height: 135px !important;
        padding: 11px !important;
    }

    .services-page .service-card h3 {
        font-size: .73rem !important;
    }

    .services-page .service-card p {
        font-size: .59rem !important;
    }

    .services-page .service-card .icon,
    .services-page .service-card .service-icon {
        width: 30px !important;
        height: 30px !important;
        min-width: 30px !important;
        min-height: 30px !important;
    }

    .services-page .services-hero {
        height: 330px !important;
        min-height: 330px !important;
    }

    .services-page .services-hero .container {
        padding-top: 110px !important;
    }

    .services-page .services-hero h1 {
        font-size: 1.9rem !important;
    }
}


/* =========================================================
   TABLET
   ========================================================= */

@media (min-width: 768px) and (max-width: 1199px) {

    .services-page .services-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 16px !important;
    }

    .services-page .service-card {
        min-height: 210px !important;
    }

    .services-page .service-showcase {
        grid-template-columns: 1fr !important;
    }
}


/* =========================================================
   DESKTOP
   ========================================================= */

@media (min-width: 1200px) {

    .services-page .services-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }

    .services-page .service-showcase {
        grid-template-columns: .85fr 1.15fr !important;
    }

    .services-page .showcase-list {
        display: flex !important;
        flex-direction: column !important;
    }
}
/* =========================================================
   SIXM FINAL MOBILE POLISH — SERVICES + BLOG
   These rules intentionally come last so they override older
   mobile rules without changing desktop layouts.
   ========================================================= */

@media (max-width: 767px) {
  /* Featured services: compact horizontal rows, never narrow columns */
  .services-page .service-showcase {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .services-page .showcase-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 7px !important;
    width: 100% !important;
  }

  .services-page .showcase-item {
    display: grid !important;
    grid-template-columns: 34px minmax(0, 1fr) 24px !important;
    align-items: center !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 58px !important;
    height: 58px !important;
    padding: 8px 10px !important;
    border-radius: 11px !important;
    overflow: hidden !important;
    text-align: left !important;
  }

  .services-page .showcase-item-icon {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 9px !important;
    font-size: .72rem !important;
  }

  .services-page .showcase-item-text {
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    overflow: hidden !important;
  }

  .services-page .showcase-item-text strong {
    display: block !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: .72rem !important;
    line-height: 1.2 !important;
  }

  .services-page .showcase-item-text small {
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 1 !important;
    overflow: hidden !important;
    font-size: .59rem !important;
    line-height: 1.25 !important;
    margin-top: 2px !important;
  }

  .services-page .showcase-item-arrow {
    width: 24px !important;
    height: 24px !important;
    display: grid !important;
    place-items: center !important;
    font-size: .65rem !important;
  }

  /* Featured service image/card: smaller on phones */
  .services-page .showcase-panel {
    order: -1 !important;
    width: 100% !important;
    min-height: 175px !important;
    height: 175px !important;
    border-radius: 13px !important;
  }

  .services-page .showcase-panel-overlay {
    padding: 18px !important;
  }

  .services-page .showcase-panel h2,
  .services-page .showcase-panel h3,
  .services-page .showcase-title {
    font-size: 1rem !important;
    line-height: 1.15 !important;
    margin: 7px 0 !important;
  }

  .services-page .showcase-panel p,
  .services-page .showcase-desc {
    font-size: .65rem !important;
    line-height: 1.35 !important;
    max-width: 95% !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    overflow: hidden !important;
  }

  .services-page .showcase-panel .theme-btn {
    height: 38px !important;
    min-height: 38px !important;
    padding: 0 16px !important;
    font-size: .62rem !important;
    margin-top: 8px !important;
  }

  .services-page .showcase-tag {
    font-size: .52rem !important;
    padding: 4px 8px !important;
  }

  /* CTA at bottom of Services/Home: compact card */
  .services-page .cta-banner {
    min-height: 180px !important;
    padding: 24px 18px !important;
    border-radius: 18px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    gap: 12px !important;
  }

  .services-page .cta-banner h2 {
    font-size: 1.35rem !important;
    line-height: 1.18 !important;
    margin: 0 !important;
    max-width: 330px !important;
  }

  .services-page .cta-banner .theme-btn {
    width: auto !important;
    min-width: 190px !important;
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 18px !important;
    font-size: .66rem !important;
  }

  /* Blog hero: keep content safely below fixed mobile navigation */
  .blog-page .blog-hero .container {
    padding-top: 145px !important;
    padding-bottom: 24px !important;
  }

  .blog-page .blog-hero h1 {
    font-size: clamp(1.75rem, 8vw, 2.3rem) !important;
    line-height: 1.05 !important;
    margin-top: 14px !important;
  }

  .blog-page .blog-hero p {
    font-size: .78rem !important;
    line-height: 1.45 !important;
    margin: 10px 0 !important;
  }

  .blog-page .blog-hero .hero-actions {
    gap: 8px !important;
    flex-wrap: wrap !important;
  }

  .blog-page .blog-hero .hero-actions .theme-btn {
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 15px !important;
    font-size: .62rem !important;
  }

  .blog-page .blog-hero .breadcrumb {
    margin-top: 10px !important;
    font-size: .68rem !important;
  }

  /* Blog intro also needs breathing room from the fixed header */
  .blog-page .blog-intro {
    margin-top: 28px !important;
    margin-bottom: 28px !important;
    padding-top: 0 !important;
  }

  .blog-page .blog-intro h2 {
    font-size: 1.45rem !important;
    line-height: 1.2 !important;
    margin-top: 12px !important;
  }

  .blog-page .blog-intro p {
    font-size: .76rem !important;
    line-height: 1.5 !important;
  }

  /* Blog article hero: same safe top spacing */
  .blog-detail-page .page-hero .container {
    padding-top: 145px !important;
    padding-bottom: 24px !important;
  }

  .blog-detail-page .page-hero h1 {
    font-size: clamp(1.7rem, 7.8vw, 2.25rem) !important;
    line-height: 1.08 !important;
  }
}

@media (max-width: 390px) {
  .services-page .showcase-item {
    grid-template-columns: 30px minmax(0, 1fr) 20px !important;
    min-height: 53px !important;
    height: 53px !important;
    padding: 7px 8px !important;
  }

  .services-page .showcase-item-icon {
    width: 27px !important;
    height: 27px !important;
    min-width: 27px !important;
    font-size: .62rem !important;
  }

  .services-page .showcase-item-text strong {
    font-size: .65rem !important;
  }

  .services-page .showcase-item-text small {
    font-size: .54rem !important;
  }

  .services-page .showcase-panel {
    min-height: 160px !important;
    height: 160px !important;
  }

  .services-page .showcase-panel-overlay {
    padding: 14px !important;
  }

  .services-page .showcase-panel h3,
  .services-page .showcase-title {
    font-size: .9rem !important;
  }

  .services-page .showcase-panel p,
  .services-page .showcase-desc {
    font-size: .58rem !important;
  }

  .services-page .cta-banner {
    min-height: 160px !important;
    padding: 20px 14px !important;
    border-radius: 16px !important;
  }

  .services-page .cta-banner h2 {
    font-size: 1.15rem !important;
    max-width: 290px !important;
  }

  .services-page .cta-banner .theme-btn {
    min-width: 170px !important;
    height: 38px !important;
    min-height: 38px !important;
    font-size: .6rem !important;
  }

  .blog-page .blog-hero .container,
  .blog-detail-page .page-hero .container {
    padding-top: 132px !important;
  }

  .blog-page .blog-hero h1,
  .blog-detail-page .page-hero h1 {
    font-size: 1.65rem !important;
  }
}

/* =========================================================
   SIXM FINAL POLISH — HOME / ABOUT / TEAM / CONTACT /
   PORTFOLIO / PRODUCTS / SERVICES / FOOTER
   Added after all previous rules so these are the final
   mobile overrides without changing the desktop design.
   ========================================================= */

/* ---------- Shared hero typography on image backgrounds ---------- */
.about-page .page-hero h1,
.team-page .page-hero h1,
.contact-page .page-hero h1 {
  color: #fff !important;
}

.about-page .page-hero p,
.team-page .page-hero p,
.contact-page .page-hero p {
  color: rgba(255,255,255,.90) !important;
}

.about-page .page-hero .breadcrumb,
.team-page .page-hero .breadcrumb,
.contact-page .page-hero .breadcrumb {
  color: rgba(255,255,255,.78) !important;
}

.about-page .page-hero .breadcrumb a,
.team-page .page-hero .breadcrumb a,
.contact-page .page-hero .breadcrumb a {
  color: var(--sky) !important;
}

/* Keep About visually consistent between desktop and phone. */
.about-page .about-hero {
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

/* ---------- Home: compact 30+ years badge ---------- */
@media (max-width: 767px) {
  .home-page .about-media .float-badge {
    max-width: 205px !important;
    padding: 9px 11px !important;
    gap: 8px !important;
    border-radius: 13px !important;
  }

  .home-page .about-media .float-badge .ring {
    width: 34px !important;
    height: 34px !important;
    flex-basis: 34px !important;
  }

  .home-page .about-media .float-badge strong {
    font-size: .78rem !important;
    line-height: 1.15 !important;
  }

  .home-page .about-media .float-badge span {
    font-size: .57rem !important;
    line-height: 1.2 !important;
  }

  /* Home CTA: compact but still prominent. */
  .home-page .cta-banner,
  .about-page .cta-banner,
  .team-page .cta-banner,
  .products-page .cta-banner,
  .services-page .cta-banner,
  .contact-page .cta-banner {
    min-height: 150px !important;
    padding: 22px 16px !important;
    border-radius: 17px !important;
    gap: 12px !important;
  }

  .home-page .cta-banner h2,
  .about-page .cta-banner h2,
  .team-page .cta-banner h2,
  .products-page .cta-banner h2,
  .services-page .cta-banner h2,
  .contact-page .cta-banner h2 {
    font-size: 1.15rem !important;
    line-height: 1.22 !important;
    max-width: 330px !important;
    margin: 0 auto !important;
  }

  .home-page .cta-banner .theme-btn,
  .about-page .cta-banner .theme-btn,
  .team-page .cta-banner .theme-btn,
  .products-page .cta-banner .theme-btn,
  .services-page .cta-banner .theme-btn,
  .contact-page .cta-banner .theme-btn {
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 17px !important;
    font-size: .64rem !important;
  }
}

/* ---------- Footer contact strip / newsletter ---------- */
@media (max-width: 767px) {
  .footer-contact-strip .fcs-inner {
    width: calc(100% - 24px) !important;
    padding: 17px 0 !important;
    gap: 13px !important;
  }

  .footer-contact-strip .fcs-left {
    width: 100% !important;
    gap: 10px !important;
  }

  .footer-contact-strip .fcs-icon {
    width: 38px !important;
    height: 38px !important;
    flex: 0 0 38px !important;
    font-size: .8rem !important;
  }

  .footer-contact-strip .fcs-left small {
    font-size: .60rem !important;
  }

  .footer-contact-strip .fcs-left strong {
    font-size: .92rem !important;
    line-height: 1.15 !important;
  }

  .footer-contact-strip .fcs-right {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 7px !important;
    align-items: stretch !important;
  }

  .footer-contact-strip .fcs-right > span {
    font-size: .78rem !important;
    line-height: 1.2 !important;
  }

  .footer-contact-strip .newsletter-form {
    width: 100% !important;
    min-width: 0 !important;
    height: 42px !important;
    padding: 3px !important;
  }

  .footer-contact-strip .newsletter-form input {
    min-width: 0 !important;
    height: 36px !important;
    padding: 0 12px !important;
    font-size: .72rem !important;
  }

  .footer-contact-strip .newsletter-form button {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    flex: 0 0 36px !important;
    font-size: .72rem !important;
  }
}

/* ---------- Portfolio / Our Work filters ---------- */
@media (max-width: 767px) {
  .portfolio-page .portfolio-filters,
  .portfolio-filters {
    gap: 7px !important;
    margin-bottom: 20px !important;
    justify-content: flex-start !important;
  }

  .portfolio-page .portfolio-filter,
  .portfolio-filter {
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 11px !important;
    border-radius: 999px !important;
    font-size: .58rem !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

}

/* ---------- Products page buttons / product cards ---------- */
@media (max-width: 767px) {
  .products-page .product-card {
    min-height: 235px !important;
    border-radius: 14px !important;
  }

  .products-page .product-card .content {
    left: 13px !important;
    right: 13px !important;
    bottom: 13px !important;
  }

  .products-page .product-card h3 {
    font-size: .94rem !important;
    line-height: 1.15 !important;
    margin: 4px 0 !important;
  }

  .products-page .product-card .content p {
    font-size: .60rem !important;
    line-height: 1.3 !important;
    margin: 3px 0 !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    overflow: hidden !important;
  }

  .products-page .product-card .theme-btn {
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 12px !important;
    margin-top: 6px !important;
    font-size: .58rem !important;
  }
}

/* ---------- Product detail ---------- */
@media (max-width: 767px) {
  .product-detail-page .about-grid {
    gap: 22px !important;
  }

  .product-detail-page .about-copy h2 {
    font-size: 1.45rem !important;
    line-height: 1.15 !important;
    margin: 10px 0 11px !important;
  }

  .product-detail-page .about-copy p {
    font-size: .72rem !important;
    line-height: 1.5 !important;
  }

  .product-detail-page .about-copy > .theme-btn {
    height: 38px !important;
    min-height: 38px !important;
    padding: 0 15px !important;
    font-size: .62rem !important;
  }

  .product-detail-page .contact-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .product-detail-page .contact-form-card {
    padding: 10px !important;
    border-radius: 12px !important;
  }

  .product-detail-page .contact-info-list {
    display: contents !important;
  }

  .product-detail-page .contact-info-item {
    min-width: 0 !important;
    min-height: 68px !important;
    padding: 9px !important;
    gap: 7px !important;
    border-radius: 10px !important;
    align-items: flex-start !important;
  }

  .product-detail-page .contact-info-item .ic {
    width: 27px !important;
    height: 27px !important;
    min-width: 27px !important;
    flex-basis: 27px !important;
    font-size: .58rem !important;
  }

  .product-detail-page .contact-info-item small {
    font-size: .48rem !important;
    line-height: 1.1 !important;
  }

  .product-detail-page .contact-info-item strong {
    display: block !important;
    font-size: .60rem !important;
    line-height: 1.25 !important;
    overflow-wrap: anywhere !important;
  }

  .product-detail-page .contact-form-card h3 {
    font-size: .85rem !important;
    line-height: 1.2 !important;
  }

  .product-detail-page .about-checks {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
    margin: 10px 0 0 !important;
  }

  .product-detail-page .about-checks li {
    min-width: 0 !important;
    padding: 7px !important;
    font-size: .55rem !important;
    line-height: 1.3 !important;
    border: 1px solid var(--border) !important;
    border-radius: 8px !important;
  }

  .product-detail-page .cta-banner {
    min-height: 135px !important;
  }
}

/* ---------- Services cards: compact and separated from image ---------- */
@media (max-width: 767px) {
  .services-page .services-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 9px !important;
  }

  .services-page .service-card {
    min-height: 150px !important;
    height: 150px !important;
    padding: 11px !important;
    border-radius: 12px !important;
  }

  .services-page .service-card.has-image {
    overflow: hidden !important;
  }

  .services-page .service-card .service-card-image {
    inset: 0 !important;
  }

  .services-page .service-card .icon-box {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    margin-bottom: 8px !important;
    border-radius: 8px !important;
    font-size: .62rem !important;
  }

  .services-page .service-card h3 {
    font-size: .68rem !important;
    line-height: 1.15 !important;
    margin: 0 0 4px !important;
  }

  .services-page .service-card p {
    font-size: .54rem !important;
    line-height: 1.3 !important;
    margin: 0 !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 3 !important;
    overflow: hidden !important;
  }

  .services-page .service-card .card-arrow {
    width: 23px !important;
    height: 23px !important;
    right: 8px !important;
    top: 8px !important;
    font-size: .55rem !important;
  }

  /* Add clear visual separation below the featured service image. */
  .services-page .showcase-panel {
    margin-bottom: 7px !important;
  }

  /* How We Deliver: compact 2-column grid on phones. */
  .services-page .services-process-wrapper,
  .services-page .process-wrapper {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    background: transparent !important;
    border: 0 !important;
    overflow: visible !important;
    border-radius: 0 !important;
  }

  .services-page .services-process-wrapper .process-step {
    min-width: 0 !important;
    min-height: 120px !important;
    height: 120px !important;
    padding: 11px !important;
    border: 1px solid var(--border) !important;
    border-radius: 11px !important;
    background: #fff !important;
    overflow: hidden !important;
  }

  .services-page .services-process-wrapper .process-step .circle-num {
    width: 26px !important;
    height: 26px !important;
    margin-bottom: 7px !important;
    font-size: .58rem !important;
  }

  .services-page .services-process-wrapper .process-step > i {
    font-size: .72rem !important;
    margin-bottom: 5px !important;
  }

  .services-page .services-process-wrapper .process-step h3 {
    font-size: .64rem !important;
    line-height: 1.18 !important;
    margin-bottom: 3px !important;
  }

  .services-page .services-process-wrapper .process-step p {
    font-size: .52rem !important;
    line-height: 1.3 !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 3 !important;
    overflow: hidden !important;
  }
}

/* ---------- Team: hero + animated experience/team cards ---------- */
@keyframes sixmTeamCardIn {
  from { opacity: 0; transform: translateY(16px) scale(.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes sixmTeamPulse {
  0%, 100% { box-shadow: 0 10px 28px rgba(17,77,100,.08); }
  50% { box-shadow: 0 16px 34px rgba(46,122,158,.18); }
}

.team-page .experience-highlight,
.team-page .team-card {
  animation: sixmTeamCardIn .65s cubic-bezier(.22,1,.36,1) both;
}

.team-page .experience-highlight:nth-child(1) { animation-delay: .05s; }
.team-page .experience-highlight:nth-child(2) { animation-delay: .12s; }
.team-page .experience-highlight:nth-child(3) { animation-delay: .19s; }
.team-page .experience-highlight:nth-child(4) { animation-delay: .26s; }
.team-page .team-card:nth-child(1) { animation-delay: .10s; }
.team-page .team-card:nth-child(2) { animation-delay: .18s; }
.team-page .team-card:nth-child(3) { animation-delay: .26s; }
.team-page .team-card:nth-child(4) { animation-delay: .34s; }

@media (max-width: 767px) {
  .team-page .page-hero {
    min-height: 350px !important;
    height: 350px !important;
    background-size: cover !important;
    background-position: center center !important;
  }

  .team-page .page-hero .container {
    padding-top: 118px !important;
  }

  .team-page .experience-highlights {
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    gap: 8px !important;
  }

  .team-page .experience-highlight {
    min-height: 105px !important;
    padding: 13px 9px !important;
    border-radius: 11px !important;
    animation-name: sixmTeamCardIn, sixmTeamPulse !important;
    animation-duration: .65s, 3.4s !important;
    animation-iteration-count: 1, infinite !important;
    animation-timing-function: cubic-bezier(.22,1,.36,1), ease-in-out !important;
    animation-fill-mode: both, both !important;
  }

  .team-page .experience-highlight strong {
    font-size: 1.35rem !important;
  }

  .team-page .experience-highlight span {
    font-size: .52rem !important;
    line-height: 1.25 !important;
  }

  .team-page .team-grid {
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    gap: 9px !important;
  }

  .team-page .team-card {
    border-radius: 11px !important;
    animation-name: sixmTeamCardIn, sixmTeamPulse !important;
    animation-duration: .65s, 3.8s !important;
    animation-iteration-count: 1, infinite !important;
    animation-timing-function: cubic-bezier(.22,1,.36,1), ease-in-out !important;
    animation-fill-mode: both, both !important;
  }

  .team-page .team-photo {
    height: 120px !important;
  }

  .team-page .team-card .team-body {
    padding: 10px !important;
  }

  .team-page .team-card h3 {
    font-size: .78rem !important;
    line-height: 1.18 !important;
  }

  .team-page .team-card .title {
    font-size: .50rem !important;
    margin: 4px 0 6px !important;
  }

  .team-page .team-card p {
    font-size: .55rem !important;
    line-height: 1.35 !important;
  }

  .team-page .team-social {
    margin-top: 8px !important;
    gap: 5px !important;
  }

  .team-page .team-social a {
    width: 26px !important;
    height: 26px !important;
    font-size: .62rem !important;
  }
}

/* ---------- Contact hero ---------- */
@media (max-width: 767px) {
  .contact-page .page-hero {
    min-height: 350px !important;
    height: 350px !important;
    background-size: cover !important;
    background-position: center center !important;
  }

  .contact-page .page-hero .container {
    padding-top: 118px !important;
  }

  .contact-page .page-hero h1 {
    font-size: 1.9rem !important;
  }
}

/* ---------- About hero: same visual treatment on desktop/mobile ---------- */
@media (max-width: 767px) {
  .about-page .about-hero {
    min-height: 430px !important;
    height: 430px !important;
    background-size: cover !important;
    background-position: center center !important;
  }

  .about-page .about-hero .container {
    padding-top: 118px !important;
  }

  .about-page .about-hero h1 {
    font-size: clamp(1.85rem, 8.5vw, 2.45rem) !important;
  }

  .about-page .about-hero p {
    font-size: .76rem !important;
    line-height: 1.5 !important;
  }
}

/* ---------- Very small phones ---------- */
@media (max-width: 390px) {
  .services-page .services-grid,
  .services-page .services-process-wrapper,
  .services-page .process-wrapper,
  .product-detail-page .contact-grid,
  .product-detail-page .about-checks {
    gap: 6px !important;
  }

  .services-page .service-card {
    min-height: 140px !important;
    height: 140px !important;
    padding: 9px !important;
  }

  .services-page .service-card h3 {
    font-size: .62rem !important;
  }

  .services-page .service-card p {
    font-size: .50rem !important;
  }

  .services-page .services-process-wrapper .process-step {
    min-height: 108px !important;
    height: 108px !important;
    padding: 9px !important;
  }

  .services-page .services-process-wrapper .process-step h3 {
    font-size: .58rem !important;
  }

  .services-page .services-process-wrapper .process-step p {
    font-size: .48rem !important;
  }

  .products-page .product-card {
    min-height: 215px !important;
  }

  .product-detail-page .contact-info-item {
    min-height: 62px !important;
    padding: 7px !important;
  }

  .product-detail-page .contact-info-item strong {
    font-size: .55rem !important;
  }

  .team-page .team-photo {
    height: 105px !important;
  }

  .team-page .team-card h3 {
    font-size: .72rem !important;
  }
}
/* ============================================================
   SIXM GLOBAL — FINAL 4-ISSUE PATCH
   Add this block at the VERY END of static/css/style.css
   Do NOT delete the existing CSS.
   ============================================================ */

/* 1) ABOUT: keep "OUR STORY" clear of the floating navbar */
@media (max-width: 767px) {
  .about-page .page-hero {
    min-height: 390px !important;
    height: 390px !important;
  }

  .about-page .page-hero .container {
    padding-top: 148px !important;
    padding-bottom: 28px !important;
  }

  .about-page .page-hero .sub-title {
    margin-top: 4px !important;
  }

  .about-page .page-hero h1 {
    margin-top: 14px !important;
  }
}

@media (max-width: 380px) {
  .about-page .page-hero {
    min-height: 370px !important;
    height: 370px !important;
  }

  .about-page .page-hero .container {
    padding-top: 136px !important;
    padding-left: 13px !important;
    padding-right: 13px !important;
  }

  .about-page .page-hero h1 {
    font-size: 1.82rem !important;
  }
}

/* 2) PRODUCT DETAIL: restore the compact previous specification layout.
   These selectors are intentionally broad so they work with the existing
   product-detail markup without changing the desktop design. */
.product-detail .spec-grid,
.product-detail .product-specs,
.product-detail .specifications-grid,
.product-detail .product-info-grid,
.product-detail .details-grid,
.product-page .spec-grid,
.product-page .product-specs,
.product-page .specifications-grid,
.product-page .product-info-grid,
.product-page .details-grid {
  min-width: 0;
}

@media (max-width: 767px) {
  .product-detail .spec-grid,
  .product-detail .product-specs,
  .product-detail .specifications-grid,
  .product-detail .product-info-grid,
  .product-detail .details-grid,
  .product-page .spec-grid,
  .product-page .product-specs,
  .product-page .specifications-grid,
  .product-page .product-info-grid,
  .product-page .details-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 9px !important;
  }

  .product-detail .spec-item,
  .product-detail .spec-card,
  .product-detail .product-info-item,
  .product-detail .detail-item,
  .product-page .spec-item,
  .product-page .spec-card,
  .product-page .product-info-item,
  .product-page .detail-item {
    min-width: 0 !important;
    padding: 11px 12px !important;
    border-radius: 12px !important;
  }

  .product-detail .spec-item strong,
  .product-detail .spec-card strong,
  .product-detail .product-info-item strong,
  .product-detail .detail-item strong,
  .product-page .spec-item strong,
  .product-page .spec-card strong,
  .product-page .product-info-item strong,
  .product-page .detail-item strong {
    display: block;
    font-size: .68rem !important;
    line-height: 1.25 !important;
    margin-bottom: 3px !important;
  }

  .product-detail .spec-item span,
  .product-detail .spec-card span,
  .product-detail .product-info-item span,
  .product-detail .detail-item span,
  .product-page .spec-item span,
  .product-page .spec-card span,
  .product-page .product-info-item span,
  .product-page .detail-item span {
    display: block;
    font-size: .72rem !important;
    line-height: 1.35 !important;
    overflow-wrap: anywhere;
  }

  .product-detail .theme-btn,
  .product-page .theme-btn {
    min-height: 43px !important;
    padding: 10px 15px !important;
    font-size: .68rem !important;
  }
}

/* 3) OUR WORK: active filter/category button stays readable on light backgrounds. */
.portfolio-filter button.active,
.portfolio-filter a.active,
.portfolio-filters button.active,
.portfolio-filters a.active,
.gallery-filter button.active,
.gallery-filter a.active,
.work-filter button.active,
.work-filter a.active,
.filter-btn.active,
.filter-button.active,
.portfolio-page .active {
  color: var(--navy) !important;
  background: var(--sky) !important;
  border-color: var(--sky) !important;
}

.portfolio-filter button.active *,
.portfolio-filter a.active *,
.portfolio-filters button.active *,
.portfolio-filters a.active *,
.gallery-filter button.active *,
.gallery-filter a.active *,
.work-filter button.active *,
.work-filter a.active *,
.filter-btn.active *,
.filter-button.active * {
  color: var(--navy) !important;
}

/* Keep the active button readable on hover as well. */
.portfolio-filter button.active:hover,
.portfolio-filter a.active:hover,
.portfolio-filters button.active:hover,
.portfolio-filters a.active:hover,
.gallery-filter button.active:hover,
.gallery-filter a.active:hover,
.work-filter button.active:hover,
.work-filter a.active:hover,
.filter-btn.active:hover,
.filter-button.active:hover {
  color: var(--navy) !important;
  background: var(--sky) !important;
  border-color: var(--sky) !important;
}

/* 4) MOBILE RFQ: make "Submit Your RFQ" available even at 320px width.
   This affects the mobile menu only; desktop navbar is unchanged. */
@media (max-width: 1199px) {
  .mobile-menu-panel .mobile-rfq-btn,
  .mobile-menu-overlay .mobile-rfq-btn,
  .mobile-rfq-btn {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: 0 0 auto !important;
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    overflow: hidden;
    margin-top: auto;
  }

  .mobile-rfq-btn span {
    display: inline-block;
    min-width: 0;
    white-space: nowrap !important;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

@media (max-width: 380px) {
  .mobile-menu-panel .mobile-rfq-btn,
  .mobile-menu-overlay .mobile-rfq-btn,
  .mobile-rfq-btn {
    min-height: 42px !important;
    height: 42px !important;
    padding: 9px 12px !important;
    font-size: .68rem !important;
    border-radius: 12px !important;
  }

  .mobile-menu-panel {
    width: min(340px, 94vw) !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
}

/* 320px safety: prevent the RFQ control from being pushed outside
   the mobile menu by large gaps/padding. */
@media (max-width: 340px) {
  .mobile-menu-panel {
    gap: 8px !important;
  }

  .mobile-menu-links {
    gap: 4px !important;
  }

  .mobile-menu-panel .mobile-rfq-btn {
    margin-top: 8px !important;
  }
}
/* ============================================================
   SIXM GLOBAL — PRODUCT DETAIL MOBILE FINAL FIX
   ============================================================
   IMPORTANT:
   This OVERRIDES the previous mobile 2-column product-detail
   rules that were making text squeeze and break.
   Desktop layout remains unchanged.
   ============================================================ */

/* ---------- Product detail base safety ---------- */

.product-detail-page .contact-grid,
.product-detail-page .contact-form-card,
.product-detail-page .contact-info-list,
.product-detail-page .contact-info-item,
.product-detail-page .about-checks {
    min-width: 0;
    box-sizing: border-box;
}

.product-detail-page .contact-info-item strong,
.product-detail-page .about-checks li {
    overflow-wrap: normal !important;
    word-break: normal !important;
}


/* ============================================================
   MOBILE — 767px and below
   ============================================================ */

@media (max-width: 767px) {

    /* --------------------------------------------------------
       1. Main specification area
       Desktop = 2 large columns
       Mobile = 1 clean column
       -------------------------------------------------------- */

    .product-detail-page .contact-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        width: 100% !important;
    }


    /* --------------------------------------------------------
       2. Specification card
       -------------------------------------------------------- */

    .product-detail-page .contact-form-card {
        width: 100% !important;
        min-width: 0 !important;
        padding: 12px !important;
        border-radius: 14px !important;
        overflow: hidden !important;
    }


    /* --------------------------------------------------------
       3. Technical specifications
       Materials
       Fabric Composition
       GSM
       Size Range
       Color Options
       MOQ

       Keep them vertically stacked.
       -------------------------------------------------------- */

    .product-detail-page .contact-info-list {
        display: flex !important;
        flex-direction: column !important;
        gap: 7px !important;
        width: 100% !important;
    }


    .product-detail-page .contact-info-item {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;

        display: flex !important;
        align-items: center !important;

        gap: 10px !important;

        padding: 9px 10px !important;

        border-radius: 10px !important;
        box-sizing: border-box !important;
    }


    /* Icon */

    .product-detail-page .contact-info-item .ic {
        width: 30px !important;
        height: 30px !important;
        min-width: 30px !important;
        flex: 0 0 30px !important;

        display: grid !important;
        place-items: center !important;

        font-size: .65rem !important;
        border-radius: 8px !important;
    }


    /* Text wrapper */

    .product-detail-page .contact-info-item > div:last-child {
        min-width: 0 !important;
        flex: 1 1 auto !important;
    }


    /* Small label */

    .product-detail-page .contact-info-item small {
        display: block !important;

        font-size: .56rem !important;
        line-height: 1.2 !important;

        margin-bottom: 2px !important;

        white-space: normal !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
    }


    /* Actual value */

    .product-detail-page .contact-info-item strong {
        display: block !important;

        font-size: .70rem !important;
        line-height: 1.3 !important;

        white-space: normal !important;
        word-break: normal !important;
        overflow-wrap: break-word !important;

        max-width: 100% !important;
    }


    /* --------------------------------------------------------
       4. Branding & Finishing
       -------------------------------------------------------- */

    .product-detail-page .contact-form-card h3 {
        font-size: .92rem !important;
        line-height: 1.2 !important;

        margin: 0 0 8px !important;
    }


    /*
       IMPORTANT:
       Do NOT make Branding & Finishing a 2-column grid.
       Keep each item full width.
    */

    .product-detail-page .about-checks {
        display: flex !important;
        flex-direction: column !important;

        grid-template-columns: none !important;

        gap: 7px !important;

        width: 100% !important;

        margin: 8px 0 0 !important;
        padding: 0 !important;
    }


    .product-detail-page .about-checks li {
        width: 100% !important;
        min-width: 0 !important;

        display: flex !important;
        align-items: flex-start !important;

        gap: 7px !important;

        padding: 8px 9px !important;

        margin: 0 !important;

        border: 1px solid var(--border) !important;
        border-radius: 9px !important;

        box-sizing: border-box !important;

        font-size: .64rem !important;
        line-height: 1.35 !important;

        white-space: normal !important;
        word-break: normal !important;
        overflow-wrap: break-word !important;
    }


    .product-detail-page .about-checks li i {
        flex: 0 0 auto !important;
        margin-top: 2px !important;
        font-size: .58rem !important;
    }


    /* --------------------------------------------------------
       5. Product detail heading
       -------------------------------------------------------- */

    .product-detail-page .about-copy h2 {
        font-size: 1.55rem !important;
        line-height: 1.15 !important;

        margin: 10px 0 10px !important;
    }


    .product-detail-page .about-copy p {
        font-size: .75rem !important;
        line-height: 1.5 !important;
    }


    /* --------------------------------------------------------
       6. Request Quote button
       -------------------------------------------------------- */

    .product-detail-page .about-copy > .theme-btn {
        min-height: 40px !important;
        height: 40px !important;

        padding: 0 15px !important;

        font-size: .65rem !important;

        width: auto !important;
        max-width: 100% !important;
    }


    /* --------------------------------------------------------
       7. Product image
       -------------------------------------------------------- */

    .product-detail-page .about-media img {
        width: 100% !important;
        height: 270px !important;

        object-fit: cover !important;

        border-radius: 16px !important;
    }
}


/* ============================================================
   VERY SMALL PHONES — 320px to 380px
   ============================================================ */

@media (max-width: 380px) {

    .product-detail-page .contact-grid {
        gap: 9px !important;
    }


    .product-detail-page .contact-form-card {
        padding: 9px !important;
        border-radius: 12px !important;
    }


    .product-detail-page .contact-info-list {
        gap: 6px !important;
    }


    .product-detail-page .contact-info-item {
        padding: 8px 9px !important;
        gap: 8px !important;
    }


    .product-detail-page .contact-info-item .ic {
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
        flex-basis: 28px !important;

        font-size: .58rem !important;
    }


    .product-detail-page .contact-info-item small {
        font-size: .52rem !important;
    }


    .product-detail-page .contact-info-item strong {
        font-size: .65rem !important;
        line-height: 1.28 !important;
    }


    .product-detail-page .contact-form-card h3 {
        font-size: .86rem !important;
    }


    .product-detail-page .about-checks {
        gap: 6px !important;
    }


    .product-detail-page .about-checks li {
        padding: 7px 8px !important;
        font-size: .59rem !important;
        line-height: 1.32 !important;
    }


    .product-detail-page .about-copy h2 {
        font-size: 1.40rem !important;
    }


    .product-detail-page .about-copy p {
        font-size: .70rem !important;
    }


    .product-detail-page .about-media img {
        height: 235px !important;
    }
}


/* ============================================================
   320px SAFETY
   ============================================================ */

@media (max-width: 340px) {

    .product-detail-page .container {
        width: calc(100% - 20px) !important;
    }


    .product-detail-page .contact-info-item strong {
        font-size: .62rem !important;
    }


    .product-detail-page .about-checks li {
        font-size: .57rem !important;
    }
}

/* ============================================================
   HOMEPAGE REQUIREMENTS — targeted additions
   These rules only style the newly requested homepage/navigation
   features and responsive states.
   ============================================================ */

/* Desktop dropdown navigation */
.nav-dropdown{position:relative;display:flex;align-items:center}
.nav-dropdown-toggle{
  border:0;background:transparent;padding:12px 14px;font:600 .76rem 'Plus Jakarta Sans',sans-serif;
  color:var(--navy);text-transform:uppercase;letter-spacing:.02em;border-radius:100px;
  display:inline-flex;align-items:center;gap:7px;transition:all .3s ease;white-space:nowrap;
}
.nav-dropdown-toggle i{font-size:.62rem;transition:transform .25s ease}
.nav-dropdown:hover .nav-dropdown-toggle,
.nav-dropdown:focus-within .nav-dropdown-toggle,
.nav-dropdown-toggle.active{color:var(--white);background:var(--deep)}
.nav-dropdown:hover .nav-dropdown-toggle i,
.nav-dropdown:focus-within .nav-dropdown-toggle i{transform:rotate(180deg)}
.nav-dropdown-menu{
  position:absolute;top:calc(100% + 12px);left:50%;transform:translate(-50%,8px);
  width:235px;padding:10px;background:rgba(255,255,255,.98);backdrop-filter:blur(16px);
  border:1px solid var(--border);border-radius:18px;box-shadow:0 22px 55px rgba(11,34,57,.16);
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity .22s ease,transform .22s ease,visibility .22s ease;
}
.nav-dropdown-wide{width:285px}
.nav-dropdown-menu:before{content:"";position:absolute;top:-8px;left:50%;width:15px;height:15px;background:#fff;border-left:1px solid var(--border);border-top:1px solid var(--border);transform:translateX(-50%) rotate(45deg)}
.nav-dropdown-menu a{
  display:flex!important;align-items:center;justify-content:space-between;width:100%;
  padding:10px 12px!important;border-radius:10px!important;font-size:.73rem!important;
  text-transform:none!important;letter-spacing:0!important;color:var(--navy)!important;background:transparent!important;
}
.nav-dropdown-menu a:hover,.nav-dropdown-menu a:focus{color:var(--deep)!important;background:var(--bg-light)!important;padding-left:16px!important}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu,
.nav-dropdown.is-open .nav-dropdown-menu,
.nav-dropdown-menu:hover{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0)}

@media(max-width:1399px){
  .nav-dropdown-toggle{padding:10px 8px;font-size:.68rem}
}
@media(max-width:1199px){
  .nav-dropdown{display:none}
}

/* Mobile navigation dropdowns */
.mobile-nav-group{border-bottom:1px solid var(--border)}
.mobile-nav-group summary{
  list-style:none;padding:14px 6px;font-weight:600;font-size:1.05rem;color:var(--navy);
  display:flex;align-items:center;justify-content:space-between;cursor:pointer;
}
.mobile-nav-group summary::-webkit-details-marker{display:none}
.mobile-nav-group summary i{font-size:.75rem;transition:transform .25s ease}
.mobile-nav-group[open] summary{color:var(--deep)}
.mobile-nav-group[open] summary i{transform:rotate(180deg)}
.mobile-submenu{padding:2px 0 10px 18px}
.mobile-submenu a{position:relative;font-size:.9rem!important;padding:8px 6px 8px 18px!important;border:0!important;color:var(--text)!important}
.mobile-submenu a::before{content:"•";position:absolute;left:2px;top:7px;color:var(--mid);font-size:1.05rem;line-height:1}
.mobile-submenu a:hover{color:var(--deep)!important;padding-left:18px!important}
.mobile-submenu a.active{color:var(--deep)!important}
.mobile-menu-links>.mobile-nav-group,
.mobile-menu-links>a{flex-shrink:0}

/* Homepage stats heading */
.home-stats{padding:92px 0 0}
.home-stats-heading{max-width:850px;margin:0 auto}
.home-stats-heading h2,.home-stats-heading p{color:#fff}
.home-stats-heading p{color:rgba(255,255,255,.7)}
.home-stats .stats-grid{margin-top:22px}

/* Shared homepage CTA row */
.section-cta-row{display:flex;justify-content:center;align-items:center;margin-top:34px;gap:14px;flex-wrap:wrap}

/* Source cards */
.home-source-section{background:var(--bg-light)}
.home-split-heading{display:grid;grid-template-columns:1fr .7fr;gap:55px;align-items:end;margin-bottom:38px}
.home-split-heading h2{font-size:clamp(2rem,4vw,3.2rem);margin-top:16px;max-width:700px}
.home-split-heading p{font-size:.95rem;color:var(--text);max-width:540px}
.source-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.source-card{
  background:#fff;border:1px solid var(--border);border-radius:20px;padding:28px;
  min-height:205px;box-shadow:0 12px 30px rgba(17,77,100,.06);transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease;
}
.source-card:hover{transform:translateY(-7px);box-shadow:0 20px 45px rgba(17,77,100,.12);border-color:rgba(46,122,158,.35)}
.source-icon{width:50px;height:50px;border-radius:14px;background:rgba(135,206,235,.18);color:var(--deep);display:grid;place-items:center;font-size:1.1rem;margin-bottom:24px}
.source-card h3{font-size:1.05rem;margin-bottom:8px}
.source-card p{font-size:.82rem;color:var(--text);line-height:1.6}

/* Why choose us */
.home-why{background:#fff}
.why-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.why-card{
  position:relative;padding:30px;background:var(--bg-light);border:1px solid var(--border);border-radius:20px;
  overflow:hidden;transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease;
}
.why-card:hover{transform:translateY(-6px);box-shadow:0 20px 45px rgba(17,77,100,.1);border-color:rgba(46,122,158,.35)}
.why-card>span{position:absolute;top:18px;right:20px;font:700 .72rem 'Plus Jakarta Sans',sans-serif;color:rgba(17,77,100,.35);letter-spacing:.12em}
.why-card>i{font-size:1.35rem;color:var(--deep);margin-bottom:42px}
.why-card h3{font-size:1.1rem;margin-bottom:8px}
.why-card p{font-size:.82rem;line-height:1.6;color:var(--text)}

/* Certifications */
.home-certifications{background:linear-gradient(180deg,var(--bg-light),#fff)}
.certification-panel{
  display:grid;grid-template-columns:1.25fr .75fr;gap:40px;align-items:center;
  padding:55px;border-radius:30px;background:var(--navy);color:#fff;box-shadow:0 25px 70px rgba(11,34,57,.16);
}
.certification-copy h2{color:#fff;font-size:clamp(2rem,3.7vw,3rem);margin:16px 0}
.certification-copy>p{color:rgba(255,255,255,.72);max-width:760px;font-size:.9rem}
.certification-points{display:flex;gap:10px;flex-wrap:wrap;margin:24px 0 28px}
.certification-points span{display:inline-flex;align-items:center;gap:8px;padding:9px 12px;border:1px solid rgba(255,255,255,.15);border-radius:999px;color:rgba(255,255,255,.82);font-size:.72rem}
.certification-points i{color:var(--sky)}
.certification-trust{min-height:250px;border:1px solid rgba(135,206,235,.25);border-radius:24px;background:rgba(255,255,255,.05);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:28px}
.trust-seal{width:88px;height:88px;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(135,206,235,.5);color:var(--sky);font-size:2rem;margin-bottom:18px}
.certification-trust strong{font-size:1rem}
.certification-trust span{display:block;max-width:230px;margin-top:7px;color:rgba(255,255,255,.58);font-size:.72rem;line-height:1.5}

/* Projects on homepage */
.home-projects{background:#fff}
.home-portfolio-grid{grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:240px;gap:18px}
.home-project-card{position:relative;overflow:hidden;border-radius:20px;background:var(--navy);box-shadow:0 15px 35px rgba(17,77,100,.1)}
.home-project-card img{width:100%;height:100%;object-fit:cover;transition:transform .65s ease;display:block}
.home-project-card:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(11,34,57,.9),rgba(11,34,57,.05) 70%)}
.home-project-card:hover img{transform:scale(1.07)}
.home-project-overlay{position:absolute;left:20px;right:20px;bottom:18px;z-index:2;color:#fff}
.home-project-overlay strong{display:block;font-size:.92rem;line-height:1.3}
.home-project-overlay span{display:block;margin-top:4px;color:var(--sky);font-size:.7rem;text-transform:uppercase;letter-spacing:.08em}

/* Product/sample area */
.home-products{background:var(--bg-light)}
.home-products-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.home-products-grid .product-card{min-height:340px}

/* Testimonials empty state */
.empty-proof-card{max-width:760px;margin:10px auto 0;padding:48px 28px;text-align:center;border:1px dashed rgba(135,206,235,.45);border-radius:24px;background:rgba(255,255,255,.04)}
.empty-proof-card>i{font-size:2rem;color:var(--sky);margin-bottom:16px}
.empty-proof-card h3{color:#fff;font-size:1.2rem;margin-bottom:8px}
.empty-proof-card p{color:rgba(255,255,255,.68);font-size:.82rem;max-width:600px;margin:0 auto}

/* Pricing section */
.home-pricing{background:#fff}
.pricing-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:stretch}
.pricing-card{
  position:relative;background:var(--bg-light);border:1px solid var(--border);border-radius:24px;padding:34px 30px;
  display:flex;flex-direction:column;box-shadow:0 12px 32px rgba(17,77,100,.06);overflow:hidden;
}
.pricing-card.featured{background:var(--navy);border-color:var(--navy);transform:translateY(-8px);box-shadow:0 22px 55px rgba(11,34,57,.2)}
.pricing-label{font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:.14em;color:var(--mid)}
.pricing-card.featured .pricing-label{color:var(--sky)}
.pricing-card h3{font-size:1.35rem;margin:12px 0 9px}
.pricing-card.featured h3{color:#fff}
.pricing-card p{font-size:.82rem;line-height:1.6;color:var(--text);min-height:78px}
.pricing-card.featured p{color:rgba(255,255,255,.68)}
.pricing-card>strong{display:block;margin:22px 0 24px;color:var(--deep);font-size:.88rem}
.pricing-card.featured>strong{color:var(--sky)}
.pricing-card .theme-btn{margin-top:auto;justify-content:center}

/* Facilities */
.home-facilities{background:var(--bg-light)}
.home-facilities .about-media img{height:470px}

/* Homepage mobile/tablet */
@media(max-width:991px){
  .home-split-heading{grid-template-columns:1fr;gap:15px}
  .source-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .why-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .certification-panel{grid-template-columns:1fr;padding:40px}
  .home-portfolio-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pricing-grid{grid-template-columns:1fr 1fr}
  .pricing-card.featured{transform:none}
}
@media(max-width:767px){
  .home-stats{padding-top:64px}
  .home-stats-heading{padding:0 8px}
  .source-grid,.why-grid,.home-portfolio-grid,.home-products-grid,.pricing-grid{grid-template-columns:1fr}
  .source-card{min-height:0}
  .certification-panel{padding:30px 22px;border-radius:22px}
  .certification-trust{min-height:190px}
  .pricing-card p{min-height:0}
  .home-facilities .about-media img{height:340px}
}
@media(max-width:560px){
  .home-stats .stats-grid{grid-template-columns:1fr 1fr}
  .home-stats .stat-box{padding:30px 12px}
  .home-stats .stat-box strong{font-size:2rem}
  .certification-points{flex-direction:column;align-items:stretch}
  .certification-points span{border-radius:14px}
}
@media(prefers-reduced-motion:reduce){
  .nav-dropdown-menu,.nav-dropdown-toggle i,.source-card,.why-card,.home-project-card img{transition:none!important}
}

/* Landing-page language translator */
.hero-language{
  position:absolute;right:34px;top:34px;z-index:5;display:flex;align-items:center;gap:10px;
  padding:8px 10px 8px 13px;border:1px solid rgba(255,255,255,.24);border-radius:999px;
  background:rgba(11,34,57,.32);backdrop-filter:blur(10px);color:#fff;font-size:.7rem;
}
.hero-language>span{display:inline-flex;align-items:center;gap:7px;font-weight:700;letter-spacing:.04em}
.hero-language .goog-te-gadget{font:500 .7rem 'Plus Jakarta Sans',sans-serif!important;color:transparent!important}
.hero-language .goog-te-gadget .goog-te-combo{
  margin:0!important;min-width:112px;height:30px;padding:0 24px 0 9px;border:1px solid rgba(255,255,255,.3);
  border-radius:8px;background:rgba(255,255,255,.96);color:var(--navy);font:500 .7rem 'Plus Jakarta Sans',sans-serif;outline:none;
}
.hero-language .goog-logo-link,.hero-language .goog-te-gadget span{display:none!important}
@media(max-width:767px){
  .hero-language{top:82px;right:18px;font-size:.62rem;padding:6px 7px 6px 9px;gap:6px}
  .hero-language .goog-te-gadget .goog-te-combo{min-width:92px;height:28px;font-size:.64rem}
}

.portfolio-filter-divider{width:1px;height:34px;background:var(--border);align-self:center;margin:0 4px}@media(max-width:560px){.portfolio-filter-divider{display:none}}

/* Phase 9 — dedicated service/project pages, estimator, testimonials and global contact locations */
.service-page-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:30px}
.service-page-card{display:block;padding:28px;border:1px solid var(--border);border-radius:22px;background:#fff;box-shadow:0 12px 34px rgba(17,77,100,.06);transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.service-page-card:hover{transform:translateY(-5px);box-shadow:0 22px 48px rgba(17,77,100,.12);border-color:rgba(17,77,100,.25)}
.service-page-card .icon-box{width:48px;height:48px;border-radius:14px;background:var(--bg-light);display:grid;place-items:center;color:var(--deep);font-size:1.15rem;margin-bottom:18px}
.service-page-card h3{font-size:1.15rem;margin-bottom:9px}.service-page-card p{color:var(--text);font-size:.82rem;line-height:1.65;min-height:80px}.service-page-card>span{display:inline-flex;gap:9px;align-items:center;color:var(--deep);font-weight:800;font-size:.75rem}
.service-detail-hero,.project-category-hero{background-position:center;background-size:cover;position:relative}.service-detail-hero:before,.project-category-hero:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(11,34,57,.88),rgba(11,34,57,.35))}.service-detail-hero .container,.project-category-hero .container{position:relative;z-index:1}.service-detail-hero h1,.service-detail-hero .breadcrumb,.service-detail-hero .breadcrumb a,.project-category-hero h1,.project-category-hero p,.project-category-hero .breadcrumb,.project-category-hero .breadcrumb a{color:#fff}
.service-detail-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:55px;align-items:center}.service-detail-copy h2{font-size:clamp(2rem,4vw,3rem);margin:16px 0}.service-detail-copy>p{color:var(--text);line-height:1.75}.service-points{display:grid;grid-template-columns:1fr 1fr;gap:12px 18px;margin:28px 0}.service-point{display:flex;align-items:flex-start;gap:10px;font-size:.82rem}.service-point i{color:var(--mid);margin-top:3px}.service-detail-actions{display:flex;flex-wrap:wrap;gap:12px}.service-detail-media img{width:100%;height:520px;object-fit:cover;border-radius:26px;box-shadow:0 24px 58px rgba(11,34,57,.16)}.service-next{background:var(--bg-light)}.service-link-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.service-link-card{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:13px;padding:18px 20px;border:1px solid var(--border);border-radius:16px;background:#fff;font-size:.78rem;font-weight:800;color:var(--deep)}.service-link-card:hover{border-color:var(--mid);transform:translateY(-2px)}
.project-category-nav{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:36px}.project-category-nav a{padding:10px 16px;border:1px solid var(--border);border-radius:999px;font-size:.72rem;font-weight:800;color:var(--deep);background:#fff}.project-category-nav a:hover{background:var(--deep);color:#fff}.project-card-copy{padding:18px}.project-card-copy small{color:var(--mid);font-weight:800;text-transform:uppercase;letter-spacing:.08em}.project-card-copy h3{margin:6px 0 7px;font-size:1.05rem}.project-card-copy p{font-size:.78rem;color:var(--text);line-height:1.6}
.sample-testimonial-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.sample-testimonial-card{position:relative;padding:30px;border-radius:22px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);color:#fff}.testimonial-stars{display:flex;gap:4px;margin-bottom:18px;color:#f6c85f}.testimonial-stars .muted{opacity:.22}.sample-testimonial-card>p{color:rgba(255,255,255,.78);line-height:1.8;font-size:.84rem;min-height:125px}.testimonial-person{display:flex;align-items:center;gap:12px;margin-top:22px}.testimonial-avatar{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:var(--sky);color:var(--navy);font-weight:900}.testimonial-person strong,.testimonial-person small{display:block}.testimonial-person small{color:rgba(255,255,255,.6);font-size:.7rem;margin-top:3px}.sample-badge{position:absolute;right:20px;bottom:20px;font-size:.58rem;text-transform:uppercase;letter-spacing:.08em;color:rgba(255,255,255,.45)}
.estimate-section{background:#eef4ff}.estimate-wrap{max-width:1080px}.estimate-heading{margin-bottom:32px}.estimate-kicker{display:inline-flex;align-items:center;gap:9px;color:#2b8ae2;font-size:.74rem;font-weight:800}.estimate-kicker i{font-size:.38rem}.estimate-heading h2{font-family:var(--heading-font,serif);font-size:clamp(2.2rem,5vw,3.45rem);line-height:1.08;margin:15px 0 12px;color:var(--navy)}.estimate-heading p{color:var(--text);font-size:.92rem}.estimate-card{background:#fff;border:1px solid rgba(17,77,100,.1);border-radius:22px;padding:32px;box-shadow:0 18px 50px rgba(24,67,110,.07)}.estimate-form-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}.estimate-card label{display:flex;flex-direction:column;gap:8px;color:#7a8596;font-size:.7rem;font-weight:700;margin-bottom:18px}.estimate-card select,.estimate-card input{height:48px;border:1px solid #d8dfeb;border-radius:8px;background:#f9fbff;padding:0 15px;font:inherit;font-size:.82rem;color:#172235;outline:none}.estimate-card select:focus,.estimate-card input:focus{border-color:#2b8ae2;box-shadow:0 0 0 3px rgba(43,138,226,.12)}.estimate-divider{height:1px;background:#e7ebf1;margin:4px 0 22px}.estimate-result-row{display:flex;align-items:center;justify-content:space-between;gap:30px}.estimate-result-row small{display:block;color:#8b95a6;font-size:.68rem;margin-bottom:8px}.estimate-result-row strong{display:block;color:#2381d6;font-family:Georgia,serif;font-size:clamp(1.7rem,4vw,2.35rem)}.estimate-result-row p{font-size:.68rem;color:#8b95a6;margin-top:8px}.estimate-quote-btn{white-space:nowrap;background:#2b8ae2}
.global-locations-section{background:var(--bg-light)}.location-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;max-width:1050px;margin:0 auto}.location-card{background:#fff;border:1px solid var(--border);border-radius:24px;overflow:hidden;box-shadow:0 16px 42px rgba(11,34,57,.08)}.location-image{position:relative;height:260px;overflow:hidden}.location-image img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}.location-card:hover .location-image img{transform:scale(1.04)}.location-image:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(11,34,57,.75))}.location-image span{position:absolute;left:22px;bottom:18px;z-index:1;color:#fff;font-weight:900;font-size:1.05rem}.location-card-body{padding:26px}.location-card-body h3{font-size:1.3rem;margin-bottom:14px}.location-card-body p{display:flex;gap:10px;align-items:flex-start;color:var(--text);font-size:.8rem;margin:9px 0}.location-card-body p i{color:var(--mid);margin-top:3px}.location-card-body .text-link{display:inline-flex;gap:8px;align-items:center;color:var(--deep);font-weight:800;font-size:.75rem;margin-top:12px}
@media(max-width:991px){.service-page-grid,.service-link-grid,.sample-testimonial-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.service-detail-grid{grid-template-columns:1fr;gap:32px}.service-detail-media img{height:420px}.location-cards{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:767px){.service-page-grid,.service-link-grid,.sample-testimonial-grid,.location-cards{grid-template-columns:repeat(3,minmax(0,1fr))}.service-page-card p,.sample-testimonial-card>p{min-height:0}.service-points{grid-template-columns:1fr}.service-detail-media img{height:330px}.estimate-card{padding:22px}.estimate-form-row{grid-template-columns:1fr;gap:0}.estimate-result-row{align-items:flex-start;flex-direction:column}.estimate-quote-btn{width:100%;justify-content:center}.location-image{height:220px}}
@media(max-width:480px){.service-detail-actions .theme-btn{width:100%;justify-content:center}.project-category-nav{justify-content:flex-start;overflow-x:auto;flex-wrap:nowrap;padding-bottom:6px}.project-category-nav a{white-space:nowrap}.estimate-heading h2{font-size:2rem}}
@media(max-width:991px){
    .service-page-grid,
    .service-link-grid,
    .sample-testimonial-grid{
        grid-template-columns:repeat(2,minmax(0,1fr))
    }

    .service-detail-grid{
        grid-template-columns:1fr;
        gap:32px
    }

    .service-detail-media img{
        height:420px
    }

    .location-cards{
        grid-template-columns:1fr 1fr
    }
}

@media(max-width:767px){
    .service-page-grid,
    .service-link-grid,
    .sample-testimonial-grid,
    .location-cards{
        grid-template-columns:1fr
    }

    .service-page-card p,
    .sample-testimonial-card>p{
        min-height:0
    }

    .service-points{
        grid-template-columns:1fr
    }

    .service-detail-media img{
        height:330px
    }

    .estimate-card{
        padding:22px
    }

    .estimate-form-row{
        grid-template-columns:1fr;
        gap:0
    }

    .estimate-result-row{
        align-items:flex-start;
        flex-direction:column
    }

    .estimate-quote-btn{
        width:100%;
        justify-content:center
    }

    .location-image{
        height:220px
    }
}

@media(max-width:480px){
    .service-detail-actions .theme-btn{
        width:100%;
        justify-content:center
    }

    .project-category-nav{
        justify-content:flex-start;
        overflow-x:auto;
        flex-wrap:nowrap;
        padding-bottom:6px
    }

    .project-category-nav a{
        white-space:nowrap
    }

    .estimate-heading h2{
        font-size:2rem
    }
}
/* ============================================================
   Homepage cinematic video hero
   ============================================================ */
.hero-video-visuals{position:absolute;inset:0;overflow:hidden;z-index:0;background:#071c2b}
.hero-video-layer{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover;object-position:center;opacity:0;transform:scale(1.035);filter:saturate(.94) contrast(1.03);transition:opacity 1.25s cubic-bezier(.4,0,.2,1),transform 7s cubic-bezier(.2,.7,.2,1);pointer-events:none;background:#071c2b}
.hero-video-layer.is-active{opacity:1;transform:scale(1.08)}
.hero-video-section .hero-overlay{z-index:1}
.hero-video-section .hero-content-wrap,.hero-video-section .hero-social,.hero-video-section .hero-sequence-dots,.hero-video-section .hero-language{z-index:3}
@media(max-width:767px){.hero-video-layer{object-position:center}.hero-video-section .hero-single-screen .hero-inner{padding-top:125px}.hero-video-section .hero-actions{gap:9px}.hero-video-section .hero-actions .theme-btn{width:100%;justify-content:center}}

/* ============================================================
   Visible certificate-style trust cards
   ============================================================ */
.certificate-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-top:36px}
.certificate-card{display:flex;flex-direction:column;gap:20px;padding:18px;border:1px solid var(--border);border-radius:24px;background:#fff;box-shadow:0 16px 42px rgba(11,34,57,.08);transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease}
.certificate-card:hover{transform:translateY(-5px);box-shadow:0 24px 52px rgba(11,34,57,.13);border-color:rgba(17,77,100,.28)}
.certificate-card img{width:100%;height:auto;border-radius:16px;background:#fff}
.certificate-card>div{padding:0 6px 8px}
.certificate-card h3{font-size:1.2rem;margin:5px 0 7px;color:var(--navy)}
.certificate-card p{font-size:.78rem;line-height:1.65;color:var(--text)}
.certificate-label{font-size:.62rem;text-transform:uppercase;letter-spacing:.1em;font-weight:800;color:var(--mid)}
.home-certifications .section-title.center>p{max-width:800px;margin-left:auto;margin-right:auto}
@media(max-width:991px){.certificate-grid{grid-template-columns:1fr 1fr}}
@media(max-width:767px){.certificate-grid{grid-template-columns:1fr}.certificate-card{padding:14px}}

/* ============================================================
   Estimated price — SIXM theme alignment
   ============================================================ */
.estimate-section{background:var(--bg-light)}
.estimate-heading h2{font-family:'Hanken Grotesk',sans-serif;color:var(--navy)}
.estimate-kicker{color:var(--deep)}
.estimate-card{border-color:var(--border);box-shadow:0 18px 50px rgba(11,34,57,.08)}
.estimate-card select,.estimate-card input{border-color:var(--border);background:#fff;color:var(--navy)}
.estimate-card select:focus,.estimate-card input:focus{border-color:var(--mid);box-shadow:0 0 0 3px rgba(46,122,158,.12)}
.estimate-result-row strong{color:var(--deep);font-family:'Hanken Grotesk',sans-serif}
.estimate-quote-btn{background:var(--deep);border-color:var(--deep)}
.estimate-quote-btn:hover{background:var(--navy);border-color:var(--navy)}
.service-detail-body{margin-top:12px!important}

/* Compact cookie notice — does not dominate the page. */
.cookie-alert-card{width:min(330px,calc(100vw - 28px));left:14px;bottom:14px;padding:14px 16px 13px;border-radius:14px}
.cookie-alert-content p{font-size:.7rem;line-height:1.4;max-width:300px}
.cookie-alert-actions{gap:5px;margin-top:9px}
.cookie-alert-actions .theme-btn{min-height:32px;padding:6px 9px;font-size:.67rem}
@media(max-width:520px){.cookie-alert-card{left:10px;right:10px;bottom:10px;width:auto;padding:13px 14px 12px}.cookie-alert-actions .theme-btn{min-height:31px;font-size:.65rem}}
.about-certification-block{margin-top:38px;padding:30px 0 0}

/* Hero video is a visual background only; homepage copy and CTAs remain the primary layer. */
.hero-video-visuals{pointer-events:none;z-index:0}
.hero-video-layer{pointer-events:none}
.hero-video-section .hero-content-wrap{z-index:4}
.hero-video-section .hero-social{z-index:5}
.hero-video-section .hero-language{z-index:20}
.hero-video-section .hero-inner > *{opacity:1;transform:none;animation:sixmVideoHeroText .8s cubic-bezier(.22,1,.36,1) both}
.hero-video-section .hero-inner .sub-title{animation-delay:.08s}
.hero-video-section .hero-inner h1{animation-delay:.18s}
.hero-video-section .hero-inner p{animation-delay:.28s}
.hero-video-section .hero-inner .hero-actions{animation-delay:.38s}
@keyframes sixmVideoHeroText{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}

/* Facilities / infrastructure — consistent animated card system */
.facilities-intro-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:22px;align-items:stretch;margin-top:34px}
.facility-feature{position:relative;min-height:310px;padding:34px;border-radius:26px;overflow:hidden;background:linear-gradient(145deg,#0b2239,#114d64);color:#fff;box-shadow:0 24px 60px rgba(11,34,57,.14)}
.facility-feature:before{content:"";position:absolute;width:220px;height:220px;border:1px solid rgba(135,206,235,.2);border-radius:50%;right:-80px;top:-80px;animation:facilityOrbit 12s linear infinite}
.facility-feature:after{content:"";position:absolute;width:140px;height:140px;border:1px dashed rgba(255,255,255,.14);border-radius:50%;left:-55px;bottom:-55px;animation:facilityOrbit 9s linear infinite reverse}
.facility-feature>*{position:relative;z-index:1}
.facility-feature .facility-icon{width:58px;height:58px;display:grid;place-items:center;border-radius:17px;background:rgba(135,206,235,.14);border:1px solid rgba(135,206,235,.24);color:#87ceeb;font-size:1.3rem;margin-bottom:22px}
.facility-feature h3{font-size:1.65rem;margin-bottom:12px;color:#fff}.facility-feature p{color:rgba(255,255,255,.78);line-height:1.75;font-size:.82rem;max-width:620px}
.facility-feature .facility-pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}.facility-feature .facility-pills span{padding:7px 10px;border:1px solid rgba(255,255,255,.16);border-radius:999px;font-size:.62rem;color:rgba(255,255,255,.78)}
.facility-capability-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.facility-capability{position:relative;padding:25px;border:1px solid var(--border);border-radius:22px;background:#fff;box-shadow:0 14px 38px rgba(11,34,57,.06);transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease;overflow:hidden}
.facility-capability:after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:linear-gradient(90deg,var(--sky),var(--deep));transform:scaleX(0);transform-origin:left;transition:transform .35s ease}
.facility-capability:hover{transform:translateY(-6px);box-shadow:0 22px 48px rgba(11,34,57,.1);border-color:rgba(17,77,100,.22)}.facility-capability:hover:after{transform:scaleX(1)}
.facility-capability .icon-box{width:46px;height:46px;border-radius:14px;background:var(--bg-light);display:grid;place-items:center;color:var(--deep);margin-bottom:15px}.facility-capability h4{font-size:1rem;margin-bottom:7px}.facility-capability p{font-size:.74rem;line-height:1.65;color:var(--text);margin:0}
@keyframes facilityOrbit{to{transform:rotate(360deg)}}
@media(max-width:900px){.facilities-intro-grid{grid-template-columns:1fr}.facility-capability-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.facility-capability-grid{grid-template-columns:1fr}.facility-feature{min-height:auto;padding:27px}}

.compliance-info-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:42px}.compliance-info-card{padding:28px;border:1px solid var(--border);border-radius:22px;background:#fff;box-shadow:0 14px 38px rgba(11,34,57,.06);transition:transform .3s ease,box-shadow .3s ease}.compliance-info-card:hover{transform:translateY(-5px);box-shadow:0 22px 48px rgba(11,34,57,.1)}.compliance-info-card .icon-box{width:48px;height:48px;border-radius:14px;background:var(--bg-light);display:grid;place-items:center;color:var(--deep);margin-bottom:17px}.compliance-info-card h3{font-size:1.08rem;margin-bottom:8px}.compliance-info-card p{font-size:.77rem;line-height:1.7;color:var(--text);margin:0}.compliance-note{display:flex;gap:14px;align-items:flex-start;margin-top:22px;padding:20px 22px;border:1px solid rgba(17,77,100,.14);border-radius:18px;background:var(--bg-light)}.compliance-note>div:first-child{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:#fff;color:var(--deep);flex:0 0 auto}.compliance-note strong{font-size:.82rem;color:var(--navy)}.compliance-note p{margin:4px 0 0;font-size:.74rem;line-height:1.65;color:var(--text)}@media(max-width:991px){.compliance-info-grid{grid-template-columns:1fr 1fr}}@media(max-width:767px){.compliance-info-grid{grid-template-columns:1fr}}


/* Final polish: facilities / infrastructure page */
.facilities-preview-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:34px}
.facility-preview-card{position:relative;overflow:hidden;min-height:270px;padding:30px;border:1px solid var(--border);border-radius:24px;background:#fff;box-shadow:0 16px 40px rgba(11,34,57,.07);transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease}
.facility-preview-card:before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:linear-gradient(90deg,var(--deep),var(--sky));transform:scaleX(.2);transform-origin:left;transition:transform .45s ease}
.facility-preview-card:hover{transform:translateY(-8px);box-shadow:0 26px 58px rgba(11,34,57,.13);border-color:rgba(17,77,100,.25)}
.facility-preview-card:hover:before{transform:scaleX(1)}
.facility-preview-card>span{position:absolute;right:24px;top:22px;font-size:.68rem;font-weight:900;letter-spacing:.1em;color:rgba(17,77,100,.32)}
.facility-preview-icon{width:54px;height:54px;border-radius:16px;display:grid;place-items:center;background:var(--bg-light);color:var(--deep);font-size:1.25rem;margin-bottom:32px;transition:transform .35s ease,background .35s ease}
.facility-preview-card:hover .facility-preview-icon{transform:rotate(-6deg) scale(1.08);background:var(--deep);color:#fff}
.facility-preview-card h3{font-size:1.15rem;margin-bottom:10px}.facility-preview-card p{font-size:.8rem;line-height:1.7;color:var(--text)}
.facilities-preview-cta{margin-top:44px}
.facilities-hero{background-image:linear-gradient(90deg,rgba(11,34,57,.88),rgba(11,34,57,.38)),url('/static/images/hero-textile-factory.jpg');background-position:center;background-size:cover}
.facilities-lead-grid{align-items:center}.facilities-lead-visual{position:relative;min-height:530px;border-radius:28px;overflow:hidden;box-shadow:0 24px 58px rgba(11,34,57,.14)}.facilities-lead-visual:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,34,57,.02) 35%,rgba(11,34,57,.72));pointer-events:none}.facilities-lead-visual img{width:100%;height:100%;min-height:530px;object-fit:cover;transition:transform 1.1s ease}.facilities-lead-visual:hover img{transform:scale(1.045)}.facilities-visual-badge{position:absolute;left:26px;right:26px;bottom:24px;z-index:1;color:#fff;padding:18px 20px;border:1px solid rgba(255,255,255,.22);border-radius:16px;background:rgba(11,34,57,.55);backdrop-filter:blur(10px)}.facilities-visual-badge strong,.facilities-visual-badge span{display:block}.facilities-visual-badge strong{font-size:1rem;margin-bottom:4px}.facilities-visual-badge span{font-size:.68rem;color:rgba(255,255,255,.75)}
.facilities-capabilities-section{overflow:hidden}.facilities-capability-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:36px}.facility-feature-card{position:relative;min-height:300px;padding:30px;border:1px solid var(--border);border-radius:24px;background:#fff;box-shadow:0 14px 36px rgba(11,34,57,.06);overflow:hidden;transition:transform .35s ease,box-shadow .35s ease}.facility-feature-card:after{content:"";position:absolute;width:170px;height:170px;border-radius:50%;right:-95px;bottom:-95px;background:rgba(135,206,235,.14);transition:transform .5s ease}.facility-feature-card:hover{transform:translateY(-7px);box-shadow:0 25px 55px rgba(11,34,57,.12)}.facility-feature-card:hover:after{transform:scale(1.7)}.facility-feature-number{position:absolute;right:24px;top:22px;font-size:.65rem;font-weight:900;color:rgba(17,77,100,.32)}.facility-feature-icon{width:50px;height:50px;border-radius:14px;display:grid;place-items:center;background:var(--deep);color:#fff;margin-bottom:26px}.facility-feature-card h3{font-size:1.15rem;margin-bottom:10px}.facility-feature-card p{font-size:.79rem;line-height:1.7;color:var(--text)}.facility-feature-line{width:48px;height:2px;background:var(--sky);margin:22px 0 11px}.facility-feature-card small{font-size:.62rem;font-weight:800;letter-spacing:.04em;color:var(--mid)}
.facility-flow{position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:18px;margin-top:45px}.facility-flow-line{position:absolute;left:9%;right:9%;top:31px;height:1px;background:linear-gradient(90deg,transparent,var(--border),var(--mid),var(--border),transparent)}.facility-flow-item{position:relative;text-align:center}.facility-flow-item>span{position:relative;z-index:1;width:62px;height:62px;margin:0 auto 18px;display:grid;place-items:center;border-radius:50%;background:#fff;border:1px solid var(--border);box-shadow:0 10px 24px rgba(11,34,57,.08);color:var(--deep);font-size:.72rem;font-weight:900;transition:transform .35s ease,background .35s ease,color .35s ease}.facility-flow-item:hover>span{transform:scale(1.1);background:var(--deep);color:#fff}.facility-flow-item i{display:block;color:var(--mid);margin-bottom:9px}.facility-flow-item h3{font-size:.98rem;margin-bottom:6px}.facility-flow-item p{font-size:.72rem;line-height:1.55;color:var(--text)}

/* Homepage CTA breathing room */
.home-services .section-cta-row,.home-garment-solutions .section-cta-row{margin-top:58px;padding-top:2px;position:relative;z-index:2}

/* Compact floating WhatsApp contact button */
.sixm-whatsapp-float{position:fixed;right:22px;bottom:22px;z-index:99990;width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:#25D366;color:#fff;box-shadow:0 12px 32px rgba(0,0,0,.22);text-decoration:none;transition:transform .3s ease,box-shadow .3s ease}.sixm-whatsapp-float i{position:relative;z-index:2;font-size:1.65rem}.sixm-whatsapp-float:hover{transform:translateY(-4px) scale(1.05);box-shadow:0 18px 38px rgba(0,0,0,.28)}.sixm-whatsapp-label{position:absolute;right:68px;top:50%;transform:translateY(-50%) translateX(6px);opacity:0;pointer-events:none;white-space:nowrap;padding:8px 12px;border-radius:9px;background:var(--navy);color:#fff;font-size:.68rem;font-weight:800;transition:.25s ease}.sixm-whatsapp-float:hover .sixm-whatsapp-label{opacity:1;transform:translateY(-50%) translateX(0)}.sixm-whatsapp-pulse{position:absolute;inset:-5px;border:1px solid rgba(37,211,102,.48);border-radius:50%;animation:sixmWhatsPulse 2.2s ease-out infinite}@keyframes sixmWhatsPulse{0%{transform:scale(.9);opacity:.8}75%,100%{transform:scale(1.34);opacity:0}}

/* Cinematic background videos: cross-fade + continuous zoom, content stays above */
.hero-video-section{position:relative;isolation:isolate;overflow:hidden;background:#071c2b}.hero-video-visuals{position:absolute;inset:-2px;z-index:0;overflow:hidden}.hero-video-layer{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;display:block;opacity:0;visibility:hidden;transform:scale(1.02);filter:saturate(.92) contrast(1.04);transition:opacity 1.35s ease,visibility 0s linear 1.35s;will-change:opacity,transform;pointer-events:none}.hero-video-layer.is-active{opacity:1;visibility:visible;transition:opacity 1.35s ease;animation:sixmHeroZoom 8s ease-in-out forwards}.hero-video-layer.is-fading{opacity:0;visibility:visible}.hero-video-section .hero-overlay{position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(5,25,40,.82) 0%,rgba(5,25,40,.5) 45%,rgba(5,25,40,.28) 100%)}.hero-video-section .hero-content-wrap,.hero-video-section .hero-social,.hero-video-section .hero-language{position:relative;z-index:4}@keyframes sixmHeroZoom{0%{transform:scale(1.035)}48%{transform:scale(1.11)}100%{transform:scale(1.045)}}

@media(max-width:991px){.facilities-preview-grid,.facilities-capability-cards{grid-template-columns:1fr 1fr}.facility-flow{grid-template-columns:repeat(3,1fr)}.facility-flow-line{display:none}.sixm-whatsapp-float{right:16px;bottom:16px}}
@media(max-width:767px){.facilities-preview-grid,.facilities-capability-cards{grid-template-columns:1fr}.facilities-lead-visual,.facilities-lead-visual img{min-height:350px;height:350px}.facility-flow{grid-template-columns:1fr 1fr;gap:28px}.sixm-whatsapp-float{width:52px;height:52px;right:13px;bottom:13px}.sixm-whatsapp-float i{font-size:1.5rem}.sixm-whatsapp-label{display:none}.facilities-preview-cta{margin-top:34px}.facility-flow-item p{font-size:.68rem}}
@media(prefers-reduced-motion:reduce){.sixm-whatsapp-pulse,.hero-video-layer{animation:none!important}.facility-preview-card,.facility-feature-card,.facility-flow-item>span{transition:none!important}}


/* v5 refinements: translator in the open right-side space, compact cookie notice, cinematic hero copy swaps */
.hero-language{top:96px;right:30px;z-index:20}
.hero-language .goog-te-gadget .goog-te-combo{min-width:118px;height:32px}
.hero-text-swap{animation:sixmHeroTextSwap .72s cubic-bezier(.22,1,.36,1) both}
@keyframes sixmHeroTextSwap{0%{opacity:0;transform:translateY(18px) scale(.985);filter:blur(3px)}55%{opacity:1;transform:translateY(-2px) scale(1.005);filter:blur(0)}100%{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}}
.cookie-alert-card{width:min(320px,calc(100vw - 32px));padding:13px 15px 12px;border-radius:12px}
.cookie-alert-label{font-size:.58rem;margin-bottom:3px}
.cookie-alert-content p{font-size:.64rem;line-height:1.32;max-width:285px;margin-bottom:3px}
.cookie-alert-link{font-size:.62rem}
.cookie-alert-actions{gap:5px;margin-top:8px}
.cookie-alert-actions .theme-btn{min-height:30px;padding:5px 9px;font-size:.63rem}
.cookie-alert-close{width:23px;height:23px;font-size:17px;line-height:18px;top:7px;right:7px}
@media(max-width:767px){.hero-language{top:88px;right:12px}.cookie-alert-card{width:min(285px,calc(100vw - 24px));padding:11px 12px 10px}.cookie-alert-content p{font-size:.61rem}.cookie-alert-actions .theme-btn{min-height:28px;padding:4px 8px;font-size:.6rem}}


/* ============================================================
   v6 UI corrections — compact language toggle, social rail,
   WhatsApp/contact stack and genuinely compact cookie notice
   ============================================================ */
.header-right{gap:9px}
.header-language-switcher{position:relative;display:flex;align-items:center;z-index:7000}
.header-language-toggle{height:40px;min-width:48px;padding:0 11px;border:1px solid rgba(17,77,100,.18);border-radius:999px;background:rgba(255,255,255,.82);color:var(--deep);display:inline-flex;align-items:center;justify-content:center;gap:6px;font:700 .68rem 'Plus Jakarta Sans',sans-serif;letter-spacing:.04em;box-shadow:0 5px 16px rgba(17,77,100,.08);transition:all .25s ease}
.header-language-toggle:hover,.header-language-switcher.is-open .header-language-toggle{background:var(--deep);color:#fff;border-color:var(--deep);transform:translateY(-1px)}
.header-language-toggle>i:first-child{font-size:.9rem}
.header-language-toggle .language-chevron{font-size:.55rem;transition:transform .25s ease}
.header-language-switcher.is-open .language-chevron{transform:rotate(180deg)}
.header-language-panel{position:absolute;top:calc(100% + 9px);right:0;width:205px;padding:9px;border:1px solid var(--border);border-radius:14px;background:#fff;box-shadow:0 18px 40px rgba(11,34,57,.16);opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-6px);transition:opacity .22s ease,transform .22s ease,visibility .22s ease}
.header-language-switcher.is-open .header-language-panel{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0)}
.header-language-panel:before{content:"";position:absolute;right:18px;top:-6px;width:11px;height:11px;background:#fff;border-left:1px solid var(--border);border-top:1px solid var(--border);transform:rotate(45deg)}
.header-language-panel #google_translate_element{position:relative;z-index:2}
.header-language-panel .goog-te-gadget{font:500 .68rem 'Plus Jakarta Sans',sans-serif!important;color:var(--text)!important;white-space:normal!important}
.header-language-panel .goog-te-gadget .goog-te-combo{width:100%;height:34px;margin:0!important;padding:0 27px 0 10px;border:1px solid var(--border);border-radius:8px;background:#fff;color:var(--navy);font:500 .68rem 'Plus Jakarta Sans',sans-serif;outline:none}
.header-language-panel .goog-logo-link,.header-language-panel .goog-te-gadget span{display:none!important}
.header-language-panel .goog-te-gadget img{display:none!important}

/* Restore the reference-style social rail on the right side of the hero. */
.hero-video-section .hero-social{right:28px;top:50%;gap:11px;display:flex;position:absolute;align-items:center;z-index:20}
.hero-video-section .hero-social a{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.94);color:var(--deep);display:grid;place-items:center;font-size:.82rem;box-shadow:0 7px 20px rgba(0,0,0,.14);transition:transform .28s ease,background .28s ease,color .28s ease}
.hero-video-section .hero-social a:hover{transform:translateY(-4px) scale(1.05);background:var(--sky);color:var(--navy)}
.hero-video-section .hero-social span{color:#fff;text-shadow:0 3px 15px rgba(0,0,0,.28);font-weight:800}

/* Contact/person button sits above WhatsApp, matching the reference control stack. */
.sixm-contact-float{position:fixed;right:22px;bottom:92px;z-index:99990;width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:rgba(11,34,57,.96);color:var(--sky);border:1px solid rgba(135,206,235,.7);box-shadow:0 12px 32px rgba(0,0,0,.22);text-decoration:none;transition:transform .3s ease,background .3s ease,color .3s ease}
.sixm-contact-float i{font-size:1.2rem}
.sixm-contact-float:hover{transform:translateY(-4px) scale(1.05);background:var(--deep);color:#fff}
.sixm-whatsapp-float{right:22px;bottom:22px}

/* Smaller cookie banner and smaller supporting text. */
.cookie-alert-card{width:min(286px,calc(100vw - 28px))!important;left:14px!important;bottom:14px!important;padding:11px 13px 10px!important;border-radius:12px!important}
.cookie-alert-close{width:21px!important;height:21px!important;top:6px!important;right:6px!important;font-size:15px!important;line-height:17px!important}
.cookie-alert-content{padding-right:3px!important}
.cookie-alert-label{font-size:.52rem!important;letter-spacing:.13em!important;margin-bottom:2px!important}
.cookie-alert-content h3{font-size:.92rem!important;line-height:1.1!important;margin:0 25px 4px 0!important}
.cookie-alert-content p{font-size:.58rem!important;line-height:1.28!important;max-width:255px!important;margin:0 0 3px!important}
.cookie-alert-link{font-size:.56rem!important}
.cookie-alert-actions{gap:4px!important;margin-top:6px!important}
.cookie-alert-actions .theme-btn{min-height:27px!important;padding:4px 7px!important;font-size:.56rem!important}
@media(max-width:1199px){.header-language-switcher{display:flex}.header-language-toggle{height:38px}.sixm-contact-float{right:16px;bottom:86px}.sixm-whatsapp-float{right:16px;bottom:16px}}
@media(max-width:767px){.header-language-panel{right:-44px;width:190px}.hero-video-section .hero-social{right:8px;top:52%;gap:7px}.hero-video-section .hero-social a{width:32px;height:32px;font-size:.7rem}.sixm-contact-float{width:50px;height:50px;right:13px;bottom:76px}.sixm-whatsapp-float{width:52px;height:52px;right:13px;bottom:13px}.cookie-alert-card{width:min(258px,calc(100vw - 22px))!important;left:11px!important;bottom:11px!important;padding:10px 11px 9px!important}.cookie-alert-content p{font-size:.56rem!important;max-width:232px!important}.cookie-alert-actions .theme-btn{font-size:.54rem!important;min-height:26px!important;padding:4px 6px!important}}
@media(hover:none),(pointer:coarse){.hero-video-section .hero-social{display:flex}}

/* v7: reliable visible language menu; Google Translate select stays hidden underneath. */
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.header-language-panel .sixm-language-select{display:block!important;width:100%;height:36px;margin:0!important;padding:0 30px 0 10px;border:1px solid var(--border);border-radius:8px;background:#fff;color:var(--navy);font:500 .68rem 'Plus Jakarta Sans',sans-serif;outline:none;cursor:pointer}
.header-language-panel .sixm-language-select:focus{border-color:var(--mid);box-shadow:0 0 0 3px rgba(46,122,158,.12)}
.header-language-panel #google_translate_element{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;opacity:0!important;pointer-events:none!important}

/* ============================================================
   SIXM GLOBAL — REQUESTED RESPONSIVE + COMPACT UI FIXES
   Final override block: keeps existing visual direction intact.
   ============================================================ */

/* Global media safety */
html, body { max-width: 100%; overflow-x: hidden; }
img, video, iframe, svg, canvas { max-width: 100%; }

/* More compact section rhythm without changing the design language. */
.section-padding { padding: 82px 0; }
.section-title { margin-bottom: 34px; }
.section-title h2 { line-height: 1.1; }
.section-title p { line-height: 1.55; }

/* Homepage Garment Solutions: 3 x 2 desktop/tablet-friendly grid. */
.home-service-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 18px !important;
  align-items: stretch;
}
.home-service-grid .home-service-card {
  width: 100%;
  min-width: 0;
  min-height: 285px;
  height: 100%;
}
/* The requested circular top-right decorative element is removed only from
   homepage Garment Solutions cards; other site cards retain their design. */
.home-service-grid .home-service-card .card-arrow { display: none !important; }

/* Button breathing room below homepage service cards. */
.home-solutions .section-cta-row {
  margin-top: 28px !important;
  padding-top: 0 !important;
}

/* Centered QA-only replacement for International Markets. */
.home-quality-only { background: var(--bg-light); }
.home-quality-only-inner {
  max-width: 850px;
  margin: 0 auto;
  text-align: center;
}
.home-quality-only-inner h2 {
  margin: 16px 0 14px;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.1;
}
.home-quality-only-inner > p {
  max-width: 760px;
  margin: 0 auto;
  line-height: 1.65;
}
.home-quality-checks {
  max-width: 760px;
  margin: 24px auto 28px !important;
  text-align: left;
}
.home-quality-only-inner > .theme-btn { margin-top: 2px; }

/* Certification page alignment/spacing. */
.certifications-page .section-title.center { max-width: 760px; }
.certifications-page .section-title.center p { max-width: 720px; margin-left: auto; margin-right: auto; }
.certifications-page .certificate-grid { margin-top: 30px; }
.certifications-page .compliance-info-grid { margin-top: 30px; }

/* General card collections: consistent desktop/tablet grids. */
.services-grid, .products-grid, .team-grid, .blog-grid, .gallery-grid, .portfolio-grid {
  align-items: stretch;
}

@media (min-width: 768px) and (max-width: 1199px) {
  .section-padding { padding: 66px 0; }
  .home-service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .home-service-grid .home-service-card { min-height: 255px; }
  .certificate-grid, .compliance-info-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  /* Compact mobile section rhythm. */
  .section-padding { padding: 44px 0 !important; }
  .section-title { margin-bottom: 24px !important; }
  .section-title h2 { font-size: clamp(1.65rem, 7.2vw, 2.2rem) !important; line-height: 1.08 !important; margin-top: 11px !important; }
  .section-title p { font-size: .82rem !important; line-height: 1.55 !important; margin-top: 11px !important; }

  /* 2-column mobile layout for practical card collections. */
  .home-service-grid,
  .services-grid,
  .products-grid,
  .team-grid,
  .blog-grid,
  .gallery-grid,
  .portfolio-grid,
  .certificate-grid,
  .compliance-info-grid,
  .cards-grid,
  .features-grid,
  .capabilities-grid,
  .categories-grid,
  .showcase-grid,
  .process-wrapper,
  .experience-highlights,
  .stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    width: 100%;
  }

  /* Keep inherently form/contact layouts readable rather than forcing 2 columns. */
  .contact-grid,
  .contact-form-card .form-grid,
  .form-grid,
  .about-grid,
  .service-showcase,
  .process-details-grid,
  .service-detail-grid,
  .location-cards,
  .estimate-form-row {
    grid-template-columns: 1fr !important;
  }

  .home-service-grid .home-service-card,
  .services-grid .service-card,
  .qa-content .service-card {
    min-width: 0 !important;
    min-height: 185px !important;
    height: 185px !important;
    padding: 16px 13px !important;
    border-radius: 15px !important;
    overflow: hidden !important;
  }

  .home-service-grid .home-service-card .icon-box,
  .services-grid .service-card .icon-box,
  .qa-content .service-card .icon-box {
    width: 40px !important;
    height: 40px !important;
    margin-bottom: 22px !important;
    border-radius: 11px !important;
    font-size: .95rem !important;
  }

  .home-service-grid .home-service-card h3,
  .services-grid .service-card h3,
  .qa-content .service-card h3 {
    font-size: .82rem !important;
    line-height: 1.18 !important;
    margin-bottom: 5px !important;
  }

  .home-service-grid .home-service-card p,
  .services-grid .service-card p,
  .qa-content .service-card p {
    font-size: .66rem !important;
    line-height: 1.38 !important;
    margin: 0 !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 4 !important;
    overflow: hidden !important;
  }

  .home-solutions .section-cta-row { margin-top: 22px !important; }
  .home-solutions .section-cta-row .theme-btn { width: auto; max-width: 100%; min-height: 44px; height: auto; padding: 10px 16px; font-size: .68rem; }

  .home-quality-only-inner { max-width: 100%; }
  .home-quality-only-inner h2 { font-size: clamp(1.7rem, 7.4vw, 2.25rem); }
  .home-quality-only-inner > p { font-size: .82rem; line-height: 1.55; }
  .home-quality-checks { margin: 20px auto 24px !important; width: 100%; }
  .home-quality-checks li { font-size: .76rem; line-height: 1.4; }
  .home-quality-only-inner > .theme-btn { width: auto; max-width: 100%; min-height: 44px; height: auto; padding: 10px 16px; font-size: .68rem; }

  /* Compact product/blog/team/portfolio cards without changing their visual style. */
  .product-card { min-height: 185px !important; height: 185px !important; }
  .product-card h3 { font-size: .9rem !important; line-height: 1.15 !important; }
  .team-photo { height: 145px !important; }
  .blog-card img { height: 125px !important; }
  .gallery-grid, .portfolio-grid { grid-auto-rows: 155px !important; }

  /* Typography and spacing inside common content blocks. */
  .about-copy h2 { margin-top: 12px !important; margin-bottom: 13px !important; }
  .about-copy p { font-size: .84rem; line-height: 1.6; }
  .about-checks { margin: 18px 0 22px !important; gap: 9px !important; }
  .about-checks li { font-size: .76rem; line-height: 1.4; }
  .theme-btn { min-height: 44px; height: auto; padding: 10px 16px; font-size: .68rem; line-height: 1.25; }

  /* Avoid giant inner-page cards/hero text. */
  .page-hero h1 { font-size: clamp(1.85rem, 8.2vw, 2.55rem) !important; }
  .page-hero p { font-size: .82rem !important; line-height: 1.5 !important; }

  .certificate-card { padding: 13px !important; border-radius: 16px !important; gap: 12px !important; }
  .certificate-card h3 { font-size: .92rem !important; }
  .certificate-card p { font-size: .66rem !important; line-height: 1.45 !important; }
  .certificate-label { font-size: .54rem !important; }
  .compliance-info-card { padding: 17px !important; border-radius: 16px !important; }
  .compliance-info-card h3 { font-size: .9rem !important; }
  .compliance-info-card p { font-size: .66rem !important; line-height: 1.5 !important; }
}

@media (max-width: 420px) {
  .section-padding { padding: 40px 0 !important; }
  .home-service-grid,
  .services-grid,
  .products-grid,
  .team-grid,
  .blog-grid,
  .gallery-grid,
  .portfolio-grid,
  .certificate-grid,
  .compliance-info-grid,
  .cards-grid,
  .features-grid,
  .capabilities-grid,
  .categories-grid,
  .showcase-grid,
  .process-wrapper,
  .experience-highlights,
  .stats-grid { gap: 8px !important; }

  .home-service-grid .home-service-card,
  .services-grid .service-card,
  .qa-content .service-card { min-height: 175px !important; height: 175px !important; padding: 13px 10px !important; }
  .home-service-grid .home-service-card .icon-box,
  .services-grid .service-card .icon-box,
  .qa-content .service-card .icon-box { width: 34px !important; height: 34px !important; margin-bottom: 18px !important; font-size: .82rem !important; }
  .home-service-grid .home-service-card h3,
  .services-grid .service-card h3,
  .qa-content .service-card h3 { font-size: .74rem !important; }
  .home-service-grid .home-service-card p,
  .services-grid .service-card p,
  .qa-content .service-card p { font-size: .59rem !important; line-height: 1.35 !important; -webkit-line-clamp: 4 !important; }
  .product-card { min-height: 175px !important; height: 175px !important; }
  .product-card h3 { font-size: .82rem !important; }
  .blog-card img { height: 108px !important; }
  .team-photo { height: 120px !important; }
  .gallery-grid, .portfolio-grid { grid-auto-rows: 135px !important; }
}

@media (max-width: 340px) {
  .home-service-grid .home-service-card,
  .services-grid .service-card,
  .qa-content .service-card { min-height: 165px !important; height: 165px !important; }
  .home-service-grid .home-service-card h3,
  .services-grid .service-card h3,
  .qa-content .service-card h3 { font-size: .70rem !important; }
  .home-service-grid .home-service-card p,
  .services-grid .service-card p,
  .qa-content .service-card p { font-size: .56rem !important; }
}

/* Final mobile tuning for the dedicated Services catalog (same design, no rebuild). */
@media (max-width: 767px) {
  .services-page .services-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 9px !important;
  }
  .services-page .service-card {
    min-height: 168px !important;
    height: 168px !important;
    padding: 13px !important;
  }
  .services-page .service-card h3 {
    font-size: .70rem !important;
    line-height: 1.18 !important;
  }
  .services-page .service-card p {
    font-size: .56rem !important;
    line-height: 1.35 !important;
    -webkit-line-clamp: 4 !important;
  }
  .services-page .service-card .icon-box {
    width: 32px !important;
    height: 32px !important;
    margin-bottom: 13px !important;
  }
}
@media (max-width: 380px) {
  .services-page .service-card {
    min-height: 158px !important;
    height: 158px !important;
    padding: 11px !important;
  }
  .services-page .service-card h3 { font-size: .66rem !important; }
  .services-page .service-card p { font-size: .53rem !important; }
}
/* =================================
   Quality Assurance Main Card
================================= */

.home-quality-only {
    padding-top: 80px;
    padding-bottom: 80px;
}


.quality-main-card {

    max-width: 1000px;

    margin: 0 auto;

    padding: 55px 60px;

    background: #ffffff;

    border-radius: 24px;

    text-align: center;

    border: 1px solid rgba(0,0,0,0.08);

    box-shadow:
        0 20px 50px rgba(0,0,0,0.08);

    position: relative;

    overflow: hidden;

}



.quality-main-card::before {

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:5px;

    background:#666;

}


.quality-main-card .sub-title {

    display:inline-block;

    margin-bottom:15px;

}


.quality-main-card h2 {

    margin-bottom:20px;

}

.quality-main-card p {

    max-width:800px;

    margin:0 auto 30px;

    color:#666;

    line-height:1.8;

}

.home-quality-checks {

    display:grid;

    grid-template-columns:
        repeat(2,1fr);

    gap:15px;

    max-width:700px;

    margin:30px auto;

    text-align:left;

}

.home-quality-checks li {

    background:#f8f9fb;

    padding:15px 20px;

    border-radius:12px;

    display:flex;

    align-items:center;

    gap:12px;

}

.home-quality-checks i {

    color:#666;

    font-size:18px;

}

@media(max-width:768px){

    .quality-main-card {

        padding:35px 25px;

    }
    .home-quality-checks {

        grid-template-columns:1fr;

    }

}
/* =========================================================
   SERVICES HERO — KEEP ALL HERO CONTENT INSIDE THE BANNER
   ========================================================= */


.services-hero h1 {
    font-size: clamp(2.2rem, 4.5vw, 3.4rem) !important;
    line-height: 1.08 !important;
    max-width: 900px !important;
}

.services-hero .sub-title {
    font-size: 0.85rem !important;
}

.services-hero .breadcrumb {
    font-size: 0.85rem !important;
}

/* Mobile */
@media (max-width: 767px) {
    .services-hero h1 {
        font-size: clamp(1.75rem, 7.5vw, 2.4rem) !important;
        line-height: 1.08 !important;
    }

    .services-hero .sub-title {
        font-size: 0.78rem !important;
    }

    .services-hero .breadcrumb {
        font-size: 0.78rem !important;
    }
}
/* =========================================================
   Readable text on light cards; preserve white text only on
   intentionally image-backed/dark cards.
   ========================================================= */
.service-page-card p,
.services-intro-section p,
.services-categories-section p,
.service-detail-main p,
.service-detail-main li,
.project-page-card p,
.projects-page p {
    color: var(--text) !important;
}

.service-page-card h3,
.service-detail-main h1,
.service-detail-main h2,
.service-detail-main h3,
.project-page-card h3 {
    color: var(--navy) !important;
}

.service-card:not(.has-image) h3 { color: var(--navy) !important; }
.service-card:not(.has-image) p { color: var(--text) !important; }
.service-card.has-image h3,
.service-card.has-image p { color: #fff !important; }

/* =========================================================
   SERVICES HERO — BIGGER HEADER
   ========================================================= */

.services-hero {
    min-height: 520px !important;
    height: auto !important;
    display: flex !important;
    align-items: center !important;
    overflow: hidden !important;
}

.services-hero .container {
    width: 100% !important;
    max-width: 1280px !important;
    margin: 0 auto !important;
    padding-top: 150px !important;
    padding-bottom: 90px !important;
}

.services-hero h1 {
    max-width: 1050px !important;
    font-size: clamp(2.5rem, 5vw, 4.8rem) !important;
    line-height: 1.08 !important;
    margin: 18px 0 16px !important;
    overflow-wrap: break-word !important;
}


/* TABLET */
@media (max-width: 991px) {
    .services-hero {
        min-height: 480px !important;
    }

    .services-hero .container {
        padding-top: 135px !important;
        padding-bottom: 75px !important;
    }

    .services-hero h1 {
        font-size: clamp(2.3rem, 6vw, 4rem) !important;
        line-height: 1.1 !important;
    }
}


/* MOBILE */
@media (max-width: 767px) {
    .services-hero {
        min-height: 430px !important;
        height: auto !important;
    }

    .services-hero .container {
        padding: 115px 16px 60px !important;
    }

    .services-hero h1 {
        max-width: 100% !important;
        font-size: clamp(2rem, 9vw, 3rem) !important;
        line-height: 1.08 !important;
        margin: 14px 0 !important;
    }
}


/* SMALL MOBILE */
@media (max-width: 480px) {
    .services-hero {
        min-height: 400px !important;
    }

    .services-hero .container {
        padding: 105px 14px 50px !important;
    }

    .services-hero h1 {
        font-size: clamp(1.85rem, 9.5vw, 2.5rem) !important;
    }
}
/* SERVICE DETAIL — HEADINGS BLACK */
.service-detail-main h1,
.service-detail-main h2,
.service-detail-main h3,
.service-detail-main .detail_title {
    color: #000000 !important;
}

/* SERVICE DETAIL — description text stays readable on the light content area. */
.service-detail-main p,
.service-detail-main .detail_body,
.service-detail-main li {
    color: var(--text) !important;
}
/* =========================================
   SERVICE DETAIL HERO — LARGE
   ========================================= */

.service-detail-hero {
    min-height: 520px !important;
    height: auto !important;
    display: flex !important;
    align-items: center !important;
    overflow: hidden !important;
}

.service-detail-hero .container {
    width: 100% !important;
    max-width: 1280px !important;
    margin: 0 auto !important;
    padding-top: 150px !important;
    padding-bottom: 90px !important;
}

.service-detail-hero h1 {
    max-width: 1000px !important;
    font-size: clamp(2.8rem, 5vw, 4.8rem) !important;
    line-height: 1.08 !important;
    margin: 18px 0 16px !important;
}


/* TABLET */
@media (max-width: 991px) {
    .service-detail-hero {
        min-height: 480px !important;
    }

    .service-detail-hero .container {
        padding-top: 135px !important;
        padding-bottom: 75px !important;
    }

    .service-detail-hero h1 {
        font-size: clamp(2.4rem, 6vw, 4rem) !important;
    }
}


/* MOBILE */
@media (max-width: 767px) {
    .service-detail-hero {
        min-height: 430px !important;
    }

    .service-detail-hero .container {
        padding: 115px 16px 60px !important;
    }

    .service-detail-hero h1 {
        max-width: 100% !important;
        font-size: clamp(2rem, 9vw, 3rem) !important;
        line-height: 1.08 !important;
    }
}


/* SMALL MOBILE */
@media (max-width: 480px) {
    .service-detail-hero {
        min-height: 400px !important;
    }

    .service-detail-hero .container {
        padding: 105px 14px 50px !important;
    }

    .service-detail-hero h1 {
        font-size: clamp(1.85rem, 9.5vw, 2.5rem) !important;
    }
}
/* service button: use normal flow so spacing remains stable across breakpoints */
.home-solutions .section-cta-row {
    position: relative;
    top: auto !important;
    margin-top: 28px !important;
    padding-top: 0 !important;
}


/* =========================================================
   QA REVIEW FIXES — preserve existing design, fix root causes
   ========================================================= */

/* Consistent inner-page hero height across all routes. */
.page-hero {
  min-height: 430px !important;
  height: 430px !important;
  display: flex;
  align-items: flex-end;
}
.page-hero .container {
  width: 100%;
  min-width: 0;
  padding-top: 150px;
  padding-bottom: 52px;
}
.page-hero .breadcrumb {
  position: absolute;
  top: 104px;
  left: 24px;
  margin: 0;
  z-index: 3;
}
.page-hero .container > p {
  max-width: 780px;
  overflow-wrap: anywhere;
}
.services-hero,
.service-detail-hero {
  min-height: 430px !important;
  height: 430px !important;
}
.services-hero .container,
.service-detail-hero .container {
  padding-top: 150px !important;
  padding-bottom: 52px !important;
}

/* Active portfolio filter must remain readable on the light portfolio background. */
.portfolio-page .portfolio-filter.active,
.portfolio-filter.active {
  color: var(--navy) !important;
  background: var(--sky) !important;
  border-color: var(--sky) !important;
}
.portfolio-page .portfolio-filter.active span,
.portfolio-filter.active span {
  color: var(--navy) !important;
}

/* Our Work filters keep the same light appearance on hover; only the active
   filter is highlighted. */
.portfolio-filters .portfolio-filter:not(.active):hover,
.portfolio-page .portfolio-filters .portfolio-filter:not(.active):hover {
  color:var(--deep)!important;
  background:transparent!important;
  border-color:var(--deep)!important;
}
.portfolio-filters .portfolio-filter:not(.active):hover::before,
.portfolio-page .portfolio-filters .portfolio-filter:not(.active):hover::before {
  width:0!important;
  height:0!important;
}

/* Buttons keep their label/icon above the animated fill on every hover state. */
.theme-btn { isolation: isolate; }
.theme-btn > span,
.theme-btn > i {
  position: relative;
  z-index: 3;
  color: inherit;
}
.theme-btn:hover > span,
.theme-btn:hover > i { visibility: visible; opacity: 1; }

/* Facilities: give the pill clear separation from its heading/content. */
.facilities-capabilities-section .section-title .sub-title,
.facilities-process-section .section-title .sub-title {
  margin-bottom: 18px;
}
.facilities-capabilities-section .section-title h2,
.facilities-process-section .section-title h2 {
  margin-top: 0 !important;
}

/* Showcase/card hover must not alter layout width or leave a translated card behind. */
.showcase-item:hover { transform: none; }
.showcase-item:focus-visible {
  outline: 3px solid rgba(135,206,235,.65);
  outline-offset: 2px;
}

/* Cookie preference close control stays above modal content. */
.cookie-preferences-close,
.cookie-alert-close {
  z-index: 4;
}

/* Prevent fixed-width content from creating horizontal overflow. */
.container,
.nav-wrap,
.section-title,
.about-copy,
.service-detail-copy,
.blog-card-body,
.product-card .content,
.cta-banner {
  min-width: 0;
}
.blog-card-body h3,
.blog-card-body p,
.service-detail-main p,
.about-copy p {
  overflow-wrap: anywhere;
}

@media (max-width: 767px) {
  .page-hero,
  .services-hero,
  .service-detail-hero {
    min-height: 390px !important;
    height: 390px !important;
  }
  .page-hero .container,
  .services-hero .container,
  .service-detail-hero .container {
    padding: 112px 16px 30px !important;
  }
  .page-hero .breadcrumb {
    top: 82px;
    left: 16px;
    right: 16px;
    font-size: .7rem !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .page-hero h1 {
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  /* One-column content where two narrow columns would harm readability. */
  .blog-grid,
  .products-grid,
  .portfolio-grid,
  .gallery-grid {
    min-width: 0;
  }
  .blog-card-body { padding: 15px !important; }
  .blog-card-body h3 { font-size: .96rem !important; }
  .blog-card-body p { font-size: .72rem !important; line-height: 1.5 !important; }

  /* Products remain readable and stable while still using the existing card design. */
  .products-page .product-card,
  .home-products-grid .product-card {
    min-height: 235px !important;
    height: 235px !important;
  }

  /* Keep CTA rows in normal flow on small screens. */
  .home-solutions .section-cta-row {
    top: auto !important;
    margin-top: 24px !important;
  }

  /* Do not let compact cards clip essential text. */
  .services-page .service-page-grid {
    grid-template-columns: 1fr !important;
  }

  .cookie-preferences-card {
    width: min(650px, calc(100vw - 24px)) !important;
    max-height: calc(100vh - 24px) !important;
    padding: 26px 20px !important;
  }
}

@media (max-width: 420px) {
  .page-hero,
  .services-hero,
  .service-detail-hero {
    min-height: 370px !important;
    height: 370px !important;
  }
  .page-hero .container {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
  .page-hero .breadcrumb {
    left: 14px;
    right: 14px;
  }
  .theme-btn {
    max-width: 100%;
  }
}

/* ============================================================
   MOBILE GRID FIX — LANDING PAGE
   Keep the existing desktop layout and switch horizontal card
   collections to a compact 2-column grid on phones.
   ============================================================ */
@media (max-width: 767px) {
  .home-page .home-service-grid,
  .home-page .home-portfolio-grid,
  .home-page .home-products-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .home-page .home-service-grid > *,
  .home-page .home-portfolio-grid > *,
  .home-page .home-products-grid > * {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Service cards: keep the complete card inside each grid cell. */
  .home-page .home-service-grid .home-service-card {
    height: auto !important;
    min-height: 210px !important;
    padding: 16px !important;
  }

  .home-page .home-service-grid .home-service-card .icon-box {
    margin-bottom: 18px !important;
  }

  /* Our Work image cards: preserve the existing image treatment. */
  .home-page .home-portfolio-grid {
    grid-auto-rows: 170px !important;
  }

  .home-page .home-portfolio-grid .home-project-card {
    height: 170px !important;
  }

  .home-page .home-portfolio-grid .home-project-card img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  /* Knitwear & Apparel Categories: two readable columns on phones. */
  .home-page .home-products-grid .product-card {
    height: 230px !important;
    min-height: 230px !important;
    width: 100% !important;
  }
}

@media (max-width: 380px) {
  .home-page .home-service-grid,
  .home-page .home-portfolio-grid,
  .home-page .home-products-grid {
    gap: 9px !important;
  }

  .home-page .home-service-grid .home-service-card {
    min-height: 190px !important;
    padding: 13px !important;
  }

  .home-page .home-portfolio-grid {
    grid-auto-rows: 145px !important;
  }

  .home-page .home-portfolio-grid .home-project-card {
    height: 145px !important;
  }

  .home-page .home-products-grid .product-card {
    height: 205px !important;
    min-height: 205px !important;
  }
}


/* Touch safety: JS never applies tilt transforms on touch devices. */
@media (hover: none), (pointer: coarse) {
  .sixm-touch-device .tilt-card,
  .sixm-touch-device .showcase-panel {
    transform: none !important;
  }
}


/* ============================================================
   FINAL LANDING-PAGE MOBILE GRID + ABOUT CONTENT BOUNDARY FIX
   These rules intentionally sit at the end of the stylesheet so
   older responsive overrides cannot collapse the homepage grids.
   ============================================================ */
.home-page .about-section {
  background: linear-gradient(180deg, #eaf6fc 0%, #f4f9fc 48%, #ffffff 100%);
  overflow: hidden;
}
.home-page .about-section .about-copy {
  min-width: 0;
  overflow: visible;
}
.home-page .about-section .about-copy h2,
.home-page .about-section .about-copy p,
.home-page .about-section .about-copy li {
  color: var(--navy) !important;
}
.home-page .about-section .about-copy p { color: var(--text) !important; }

@media (max-width: 767px) {
  /* Every homepage card collection requested by QA uses a real two-column
     grid on phones; no flex-row overflow and no late one-column override. */
  .home-page .home-service-grid,
  .home-page .home-business-grid,
  .home-page .source-grid,
  .home-page .why-grid,
  .home-page .home-portfolio-grid,
  .home-page .home-products-grid,
  .home-page .certificate-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .home-page .home-service-grid > *,
  .home-page .home-business-grid > *,
  .home-page .source-grid > *,
  .home-page .why-grid > *,
  .home-page .home-portfolio-grid > *,
  .home-page .home-products-grid > *,
  .home-page .certificate-grid > * {
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  /* Let card height follow its content instead of clipping it at the
     previous compact fixed heights. */
  .home-page .home-service-grid .home-service-card,
  .home-page .home-business-grid .service-card,
  .home-page .source-grid .source-card,
  .home-page .why-grid .why-card {
    height: auto !important;
    min-height: 190px !important;
  }

  .home-page .source-grid .source-card,
  .home-page .why-grid .why-card {
    padding: 18px 14px !important;
  }

  .home-page .source-grid .source-icon {
    margin-bottom: 15px !important;
  }

  .home-page .why-grid .why-card > i {
    margin-bottom: 28px !important;
  }

  /* Our Work image cards remain two-up and fill their grid cells. */
  .home-page .home-portfolio-grid {
    grid-auto-rows: 165px !important;
  }
  .home-page .home-portfolio-grid .home-project-card {
    height: 165px !important;
    min-height: 0 !important;
  }
  .home-page .home-portfolio-grid .home-project-card img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  /* Knitwear & Apparel Categories remain two-up on phones. */
  .home-page .home-products-grid .product-card {
    height: 220px !important;
    min-height: 220px !important;
    width: 100% !important;
  }

  /* The About copy stays entirely inside its section on narrow screens. */
  .home-page .about-section .about-grid {
    width: 100%;
    min-width: 0;
    gap: 28px !important;
  }
  .home-page .about-section .about-copy {
    width: 100%;
    max-width: 100%;
    padding: 0 !important;
  }
  .home-page .about-section .about-copy h2 {
    font-size: clamp(1.72rem, 8.4vw, 2.35rem) !important;
    line-height: 1.08 !important;
    margin: 12px 0 14px !important;
    overflow-wrap: break-word;
  }
  .home-page .about-section .about-copy p {
    font-size: .82rem !important;
    line-height: 1.58 !important;
    margin: 0 !important;
    overflow-wrap: break-word;
  }
  .home-page .about-section .about-checks {
    grid-template-columns: 1fr !important;
    gap: 9px !important;
    margin: 18px 0 22px !important;
  }
  .home-page .about-section .about-checks li {
    font-size: .75rem !important;
    line-height: 1.4 !important;
  }
  .home-page .about-section .theme-btn {
    max-width: 100% !important;
  }
}

@media (max-width: 360px) {
  .home-page .home-service-grid,
  .home-page .home-business-grid,
  .home-page .source-grid,
  .home-page .why-grid,
  .home-page .home-portfolio-grid,
  .home-page .home-products-grid,
  .home-page .certificate-grid {
    gap: 9px !important;
  }
  .home-page .home-service-grid .home-service-card,
  .home-page .home-business-grid .service-card,
  .home-page .source-grid .source-card,
  .home-page .why-grid .why-card {
    min-height: 180px !important;
  }
  .home-page .home-portfolio-grid { grid-auto-rows: 145px !important; }
  .home-page .home-portfolio-grid .home-project-card { height: 145px !important; }
  .home-page .home-products-grid .product-card {
    height: 200px !important;
    min-height: 200px !important;
  }
}


/* Touch/mobile hover safety: keep existing hover styling on real pointers,
   but prevent sticky hover states from changing card appearance after a tap. */
@media (hover: none), (pointer: coarse) {
  .sixm-touch-device .home-page .home-business-grid .service-card:hover .bg-fill,
  .sixm-touch-device .home-page .home-service-grid .service-card:not(.has-image):hover .bg-fill {
    transform: scale(0) !important;
  }
  .sixm-touch-device .home-page .home-business-grid .service-card:hover h3,
  .sixm-touch-device .home-page .home-business-grid .service-card:hover p,
  .sixm-touch-device .home-page .home-service-grid .service-card:not(.has-image):hover h3,
  .sixm-touch-device .home-page .home-service-grid .service-card:not(.has-image):hover p {
    color: inherit !important;
  }
}

/* ============================================================
   FINAL TARGETED MOBILE FIXES — ABOUT + TEAM ONLY
   Keep all existing desktop styling and other-page behavior intact.
   ============================================================ */
@media (max-width: 767px) {
  /* About hero: the previous fixed height could clip a tall content
     block upward underneath the fixed header. Let the existing hero
     grow naturally with its real content. */
  .about-page .about-hero {
    height: auto !important;
    min-height: 0 !important;
    padding-top: 92px !important;
    padding-bottom: 42px !important;
    align-items: flex-start !important;
  }

  .about-page .about-hero .container {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
  }

  .about-page .about-hero h1 {
    margin-top: 14px !important;
  }

  .about-page .about-hero p {
    max-width: 100% !important;
    overflow-wrap: anywhere;
  }

  /* Team hero: preserve the existing photographic hero but make the
     requested hero copy explicitly white on phones. */
  .team-page .page-hero {
    height: auto !important;
    min-height: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    align-items: flex-start !important;
  }

  .team-page .page-hero .container {
    padding-top: 92px !important;
    padding-bottom: 38px !important;
  }

  .team-page .page-hero h1,
  .team-page .page-hero p {
    color: #fff !important;
  }

  /* Keep the complete Our Story copy in one self-contained visual
     section. The story column owns its gradient so its paragraphs can
     never visually spill into the following white section. */
  .team-page .about-story-grid {
    background: linear-gradient(145deg, var(--deep), var(--mid) 68%, #4d9bb9);
    border-radius: 24px;
    padding: 24px 18px !important;
    margin-top: 30px !important;
    gap: 18px !important;
    overflow: hidden;
  }

  .team-page .about-story-grid > .reveal:first-child {
    min-width: 0;
    color: #fff;
  }

  .team-page .about-story-grid > .reveal:first-child .section-title h2,
  .team-page .about-story-grid > .reveal:first-child p {
    color: #fff !important;
  }

  .team-page .about-story-grid > .reveal:first-child .sub-title {
    color: var(--deep) !important;
    background: rgba(255,255,255,.9) !important;
    border-color: rgba(255,255,255,.55) !important;
  }

  .team-page .about-story-grid > .reveal:first-child p {
    overflow-wrap: anywhere;
  }
}

@media (max-width: 480px) {
  .about-page .about-hero {
    padding-top: 88px !important;
    padding-bottom: 38px !important;
  }

  .team-page .page-hero .container {
    padding-top: 88px !important;
    padding-bottom: 34px !important;
  }

  .team-page .about-story-grid {
    padding: 21px 15px !important;
    border-radius: 20px;
  }
}

/* ============================================================
   FINAL TARGETED FIXES — ABOUT / BLOG / COOKIE ONLY
   No other page/component styling is changed.
   ============================================================ */

/* 1) About hero: keep the complete hero content below the fixed
   navigation on phones. The hero remains content-driven so the
   heading, paragraph and CTAs cannot be covered by the header. */
@media (max-width: 767px) {
  .about-page .about-hero {
    height: auto !important;
    min-height: 0 !important;
    align-items: flex-start !important;
    padding-top: 0 !important;
    padding-bottom: 42px !important;
    background-size: cover !important;
    background-position: center center !important;
  }

  .about-page .about-hero .container {
    width: 100% !important;
    max-width: 1280px !important;
    margin: 0 auto !important;
    padding: 116px 18px 0 !important;
  }

  .about-page .about-hero h1 {
    margin-top: 14px !important;
    margin-bottom: 12px !important;
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
  }

  .about-page .about-hero p {
    max-width: 100% !important;
    margin-bottom: 0 !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
  }

  .about-page .about-hero .hero-actions {
    position: static !important;
    margin-top: 22px !important;
    width: 100% !important;
    max-width: 100% !important;
    flex-wrap: wrap !important;
  }
}

@media (max-width: 480px) {
  .about-page .about-hero .container {
    padding-top: 108px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .about-page .about-hero {
    padding-bottom: 36px !important;
  }
}

/* 2) Blog article: the article/content area should not inherit the
   site's large page-level gradient. Keep the article content on a
   clean white surface while leaving the article hero untouched. */
.blog-detail-page {
  background: #fff !important;
}

.blog-detail-page main,
.blog-detail-page main > section.section-padding {
  background: #fff !important;
}

.blog-detail-page .blog-content {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* 3) Blog listing intro: keep the intro heading and description together
   inside one contained light gradient panel instead of allowing the text
   to visually sit outside the intended background. */
.blog-page .blog-intro {
  background: linear-gradient(180deg, #eaf6fc 0%, #f4f9fc 58%, #ffffff 100%) !important;
  border: 1px solid rgba(46,122,158,.12) !important;
  border-radius: 24px !important;
  padding: 28px 30px 30px !important;
  margin-top: 28px !important;
  margin-bottom: 42px !important;
}

.blog-page .blog-intro h2,
.blog-page .blog-intro p,
.blog-page .blog-intro .sub-title {
  max-width: 100% !important;
  overflow-wrap: anywhere !important;
}

.blog-page .blog-intro h2 {
  margin-top: 16px !important;
  margin-bottom: 12px !important;
}

.blog-page .blog-intro p {
  margin-bottom: 0 !important;
}

@media (max-width: 767px) {
  .blog-page .blog-intro {
    margin-top: 24px !important;
    margin-bottom: 30px !important;
    padding: 22px 18px 24px !important;
    border-radius: 20px !important;
  }

  .blog-page .blog-intro h2 {
    margin-top: 13px !important;
  }
}

/* 4) Cookie close controls: the site-wide custom cursor intentionally
   hides native cursors. Restore the normal pointer specifically on the
   two cookie close buttons so the close icon visibly behaves like a
   clickable control. */
body.has-custom-cursor .cookie-alert-close,
body.has-custom-cursor .cookie-preferences-close {
  cursor: pointer !important;
}

.cookie-alert-close,
.cookie-preferences-close {
  cursor: pointer !important;
}

/* ============================================================
   ABOUT HERO — RESTORE STANDARD INNER-PAGE BANNER
   Keep the existing About hero image/content. Remove only the
   About-specific light veil that was causing the heading to
   appear against a separate gradient area.
   ============================================================ */
.about-page .about-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(90deg, rgba(6,27,39,.74), rgba(6,27,39,.42) 55%, rgba(6,27,39,.25));
  pointer-events: none;
}

.about-page .about-hero {
  min-height: 430px !important;
  height: auto !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  overflow: hidden !important;
}

.about-page .about-hero > .container {
  position: relative;
  z-index: 2 !important;
}

.about-page .about-hero .sub-title,
.about-page .about-hero h1,
.about-page .about-hero p,
.about-page .about-hero .breadcrumb,
.about-page .about-hero .breadcrumb a {
  color: #fff !important;
}

.about-page .about-hero .sub-title {
  background: rgba(255,255,255,.12) !important;
  border-color: rgba(255,255,255,.35) !important;
}

.about-page .about-hero .theme-btn.outline {
  color: #fff !important;
  border-color: rgba(255,255,255,.5) !important;
}

@media (max-width: 767px) {
  .about-page .about-hero {
    min-height: 0 !important;
    height: auto !important;
    align-items: flex-start !important;
    padding-top: 0 !important;
    padding-bottom: 34px !important;
  }

  .about-page .about-hero > .container {
    width: 100% !important;
    max-width: 100% !important;
    padding: 132px 18px 0 !important;
    margin: 0 auto !important;
  }

  .about-page .about-hero h1 {
    max-width: 100% !important;
    margin: 14px 0 12px !important;
    line-height: 1.08 !important;
    overflow-wrap: anywhere !important;
  }

  .about-page .about-hero p {
    max-width: 100% !important;
    margin: 10px 0 22px !important;
    line-height: 1.5 !important;
    overflow-wrap: anywhere !important;
  }

  .about-page .about-hero .hero-actions {
    position: static !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    margin: 0 !important;
  }

  .about-page .about-hero .breadcrumb {
    margin-top: 14px !important;
  }
}

@media (max-width: 480px) {
  .about-page .about-hero > .container {
    padding: 120px 16px 0 !important;
  }

  .about-page .about-hero {
    padding-bottom: 30px !important;
  }

  .about-page .about-hero h1 {
    font-size: clamp(1.9rem, 8vw, 2.45rem) !important;
  }
}
/* ============================================================
   SIXM GLOBAL — ABOUT HERO FINAL SIZE FIX
   Match About hero with standard inner-page hero
   ============================================================ */

.about-page .about-hero {
    min-height: 52vh !important;
    height: auto !important;
    padding-top: 150px !important;
    padding-bottom: 60px !important;
    display: flex !important;
    align-items: center !important;
    box-sizing: border-box !important;
}

/* Keep the existing About hero image */
.about-page .about-hero {
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
}

/* Keep content above the overlay */
.about-page .about-hero > .container {
    position: relative !important;
    z-index: 2 !important;
}

/* Desktop hero typography */
.about-page .about-hero h1 {
    margin-top: 18px !important;
    margin-bottom: 12px !important;
}

/* ============================================================
   TABLET
   ============================================================ */

@media (max-width: 991px) {
    .about-page .about-hero {
        min-height: 52vh !important;
        height: auto !important;
        padding-top: 130px !important;
        padding-bottom: 60px !important;
    }
}

/* ============================================================
   MOBILE
   Keep mobile hero content-driven
   ============================================================ */

@media (max-width: 767px) {
    .about-page .about-hero {
        min-height: 0 !important;
        height: auto !important;
        padding-top: 0 !important;
        padding-bottom: 34px !important;
        align-items: flex-start !important;
    }

    .about-page .about-hero > .container {
        width: 100% !important;
        max-width: 100% !important;
        padding: 116px 18px 0 !important;
        margin: 0 auto !important;
    }

    .about-page .about-hero h1 {
        margin-top: 14px !important;
        margin-bottom: 12px !important;
    }

    .about-page .about-hero p {
        max-width: 100% !important;
        margin-bottom: 0 !important;
    }

    .about-page .about-hero .hero-actions {
        position: static !important;
        margin-top: 22px !important;
        width: 100% !important;
        flex-wrap: wrap !important;
    }
}

/* ============================================================
   SMALL MOBILE
   ============================================================ */

@media (max-width: 480px) {
    .about-page .about-hero {
        min-height: 0 !important;
        height: auto !important;
        padding-bottom: 30px !important;
    }

    .about-page .about-hero > .container {
        padding: 108px 16px 0 !important;
    }
}
/* ============================================================
   ABOUT HERO — MATCH COMPACT SIZE (same as Blog/page-hero)
   Must stay at the VERY END of style.css
   ============================================================ */
.about-page .about-hero {
    min-height: 400px !important;
    height: 400px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    display: flex !important;
    align-items: center !important;
}

.about-page .about-hero > .container {
    padding-top: 128px !important;
    padding-bottom: 42px !important;
}

@media (min-width: 768px) {
    .about-page .about-hero h1 {
        font-size: clamp(2.25rem, 4vw, 3.25rem) !important;
        line-height: 1.06 !important;
        margin-top: 12px !important;
        margin-bottom: 10px !important;
    }
}

@media (max-width: 991px) {
    .about-page .about-hero {
        min-height: 430px !important;
        height: 430px !important;
    }
    .about-page .about-hero > .container {
        padding-top: 135px !important;
        padding-bottom: 45px !important;
    }
}

@media (max-width: 767px) {
    .about-page .about-hero {
        min-height: 390px !important;
        height: 390px !important;
        align-items: flex-end !important;
        padding-bottom: 0 !important;
    }
    .about-page .about-hero > .container {
        width: 100% !important;
        max-width: 100% !important;
        padding: 112px 16px 30px !important;
        margin: 0 !important;
    }
    .about-page .about-hero h1 {
        margin-top: 12px !important;
        margin-bottom: 10px !important;
    }
    .about-page .about-hero p {
        max-width: 100% !important;
    }
    .about-page .about-hero .hero-actions {
        position: static !important;
        margin-top: 18px !important;
        width: 100% !important;
        flex-wrap: wrap !important;
    }
}

@media (max-width: 420px) {
    .about-page .about-hero {
        min-height: 370px !important;
        height: 370px !important;
    }
    .about-page .about-hero > .container {
        padding: 105px 14px 26px !important;
    }
}
/* ============================================================
   ABOUT PAGE — MOBILE OVERLAP FIX (CSS-only, no HTML change)
   Tiered by real device widths so headings stay inside gradient
   across all common phone sizes.
   ============================================================ */

/* Base (covers all phones ≤767px) — cancel hero button offset */
@media (max-width: 767px) {
  .about-hero .hero-actions {
    margin-left: 0 !important;
  }
}

/* ---------- Small mobile: 320×568 ---------- */
@media (max-width: 340px) {
  .about-section .about-grid .about-copy { transform: translateY(-10px) !important; }
  .about-experience-section .section-title .sub-title { transform: translateY(-8px) !important; }
  .about-experience-section .section-title h2 { transform: translateY(-10px) !important; }
  .about-experience-section .section-title p { transform: translateY(-4px) !important; }
  .about-experience-section .about-grid .about-copy > div[style*="translateY"] { transform: translateY(-4px) !important; }
  .about-experience-section .about-grid .about-copy .sub-title[style*="margin-top"] { margin-top: 0 !important; }
  .about-experience-section .about-grid .about-copy p[style*="translateY"] { transform: translateY(-3px) !important; }
}

/* ---------- 360–380: Android small/standard, Galaxy S20-23, iPhone SE ---------- */
@media (min-width: 341px) and (max-width: 380px) {
  .about-section .about-grid .about-copy { transform: translateY(-14px) !important; }
  .about-experience-section .section-title .sub-title { transform: translateY(-11px) !important; }
  .about-experience-section .section-title h2 { transform: translateY(-13px) !important; }
  .about-experience-section .section-title p { transform: translateY(-5px) !important; }
  .about-experience-section .about-grid .about-copy > div[style*="translateY"] { transform: translateY(-5px) !important; }
  .about-experience-section .about-grid .about-copy .sub-title[style*="margin-top"] { margin-top: 0 !important; }
  .about-experience-section .about-grid .about-copy p[style*="translateY"] { transform: translateY(-3px) !important; }
}

/* ---------- 381–400: iPhone 12/13/14 (390) ---------- */
@media (min-width: 381px) and (max-width: 400px) {
  .about-section .about-grid .about-copy { transform: translateY(-18px) !important; }
  .about-experience-section .section-title .sub-title { transform: translateY(-14px) !important; }
  .about-experience-section .section-title h2 { transform: translateY(-16px) !important; }
  .about-experience-section .section-title p { transform: translateY(-6px) !important; }
  .about-experience-section .about-grid .about-copy > div[style*="translateY"] { transform: translateY(-6px) !important; }
  .about-experience-section .about-grid .about-copy .sub-title[style*="margin-top"] { margin-top: 0 !important; }
  .about-experience-section .about-grid .about-copy p[style*="translateY"] { transform: translateY(-4px) !important; }
}

/* ---------- 401–420: Android large, Pixel 7/8 (412) ---------- */
@media (min-width: 401px) and (max-width: 420px) {
  .about-section .about-grid .about-copy { transform: translateY(-22px) !important; }
  .about-experience-section .section-title .sub-title { transform: translateY(-16px) !important; }
  .about-experience-section .section-title h2 { transform: translateY(-18px) !important; }
  .about-experience-section .section-title p { transform: translateY(-7px) !important; }
  .about-experience-section .about-grid .about-copy > div[style*="translateY"] { transform: translateY(-7px) !important; }
  .about-experience-section .about-grid .about-copy .sub-title[style*="margin-top"] { margin-top: 0 !important; }
  .about-experience-section .about-grid .about-copy p[style*="translateY"] { transform: translateY(-4px) !important; }
}

/* ---------- 421–440: iPhone 14 Pro Max (430) ---------- */
@media (min-width: 421px) and (max-width: 440px) {
  .about-section .about-grid .about-copy { transform: translateY(-26px) !important; }
  .about-experience-section .section-title .sub-title { transform: translateY(-18px) !important; }
  .about-experience-section .section-title h2 { transform: translateY(-20px) !important; }
  .about-experience-section .section-title p { transform: translateY(-8px) !important; }
  .about-experience-section .about-grid .about-copy > div[style*="translateY"] { transform: translateY(-8px) !important; }
  .about-experience-section .about-grid .about-copy .sub-title[style*="margin-top"] { margin-top: 0 !important; }
  .about-experience-section .about-grid .about-copy p[style*="translateY"] { transform: translateY(-4px) !important; }
}

/* ---------- 441–767: any remaining larger phones/small tablets in portrait ---------- */
@media (min-width: 441px) and (max-width: 767px) {
  .about-section .about-grid .about-copy { transform: translateY(-30px) !important; }
  .about-experience-section .section-title .sub-title { transform: translateY(-20px) !important; }
  .about-experience-section .section-title h2 { transform: translateY(-22px) !important; }
  .about-experience-section .section-title p { transform: translateY(-9px) !important; }
  .about-experience-section .about-grid .about-copy > div[style*="translateY"] { transform: translateY(-9px) !important; }
  .about-experience-section .about-grid .about-copy .sub-title[style*="margin-top"] { margin-top: 0 !important; }
  .about-experience-section .about-grid .about-copy p[style*="translateY"] { transform: translateY(-4px) !important; }
}

/* ---------- Mobile landscape: 568×320 and 844×390 ---------- */
@media (max-height: 480px) and (orientation: landscape) {
  .about-section .about-grid .about-copy { transform: none !important; }
  .about-experience-section .section-title .sub-title { transform: none !important; }
  .about-experience-section .section-title h2 { transform: none !important; }
  .about-experience-section .section-title p { transform: none !important; }
  .about-experience-section .about-grid .about-copy > div[style*="translateY"] { transform: none !important; }
  .about-experience-section .about-grid .about-copy .sub-title[style*="margin-top"] { margin-top: 0 !important; }
  .about-experience-section .about-grid .about-copy p[style*="translateY"] { transform: none !important; }
}
/* Keep 3-card sections in one row on mobile */
 /* ===== ABOUT TEXT — RAISED CARD DESIGN ===== */

.about-copy {
    background: #ffffff !important;
    padding: 38px 40px !important;
    border-radius: 24px !important;
    box-shadow: 0 20px 55px rgba(17, 77, 100, 0.16) !important;
    border: 1px solid rgba(17, 77, 100, 0.08) !important;
    position: relative !important;
    z-index: 3 !important;
    transform: none !important;
}

.about-copy p,
.about-copy li {
    color: #111010 !important;
}

.about-copy .sub-title {
    color: var(--mid) !important;
}

.about-copy h2 {
    color: var(--navy) !important;
}

.about-copy .about-checks {
    margin-top: 24px !important;
}

.about-copy .theme-btn {
    margin-top: 20px !important;
}

/* Mobile */
@media (max-width: 767px) {
    .about-copy {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        padding: 28px 22px !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        transform: none !important;
        overflow: visible !important;
    }

    .about-copy h2 {
        font-size: 1.7rem !important;
        line-height: 1.2 !important;
        margin: 14px 0 18px !important;
    }

    .about-copy p {
        font-size: .92rem !important;
        line-height: 1.7 !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }

    .about-copy .about-checks {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        margin: 22px 0 25px !important;
    }

    .about-copy .theme-btn {
        width: 100% !important;
        justify-content: center !important;
    }
}

/* Small mobile */
@media (max-width: 480px) {
    .about-copy {
        padding: 24px 18px !important;
        border-radius: 18px !important;
    }

    .about-copy h2 {
        font-size: 1.55rem !important;
    }

    .about-copy p {
        font-size: .88rem !important;
        line-height: 1.65 !important;
    }
}
/* ===== CERTIFICATION INFO — PREMIUM CARD ===== */

.about-certification-block .section-title {
    background: #ffffff !important;
    padding: 35px 40px !important;
    border-radius: 22px !important;
    box-shadow: 0 18px 50px rgba(17, 77, 100, 0.14) !important;
    border: 1px solid rgba(17, 77, 100, 0.08) !important;
    max-width: 900px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.about-certification-block .section-title .sub-title {
    color: var(--mid) !important;
    display: inline-block !important;
    margin-bottom: 10px !important;
}

.about-certification-block .section-title h2 {
    color: var(--navy) !important;
    font-size: clamp(1.6rem, 3vw, 2.3rem) !important;
    line-height: 1.2 !important;
    margin: 8px 0 16px !important;
}

.about-certification-block .section-title p {
    color: #444 !important;
    font-size: .95rem !important;
    line-height: 1.75 !important;
    max-width: 760px !important;
    margin: 0 auto !important;
}

/* Mobile */
@media (max-width: 767px) {
    .about-certification-block .section-title {
        width: 100% !important;
        max-width: 100% !important;
        padding: 26px 22px !important;
        box-sizing: border-box !important;
        border-radius: 18px !important;
        margin-top: 0 !important;
    }

    .about-certification-block .section-title h2 {
        font-size: 1.55rem !important;
        line-height: 1.25 !important;
        margin: 8px 0 14px !important;
    }

    .about-certification-block .section-title p {
        font-size: .88rem !important;
        line-height: 1.7 !important;
        max-width: 100% !important;
    }
}

/* Small mobile */
@media (max-width: 480px) {
    .about-certification-block .section-title {
        padding: 23px 18px !important;
    }

    .about-certification-block .section-title h2 {
        font-size: 1.4rem !important;
    }

    .about-certification-block .section-title p {
        font-size: .84rem !important;
    }
}
/* ===== FINAL ABOUT PAGE MOBILE SPACING FIX ===== */

@media (max-width: 767px) {

    .about-hero {
        min-height: auto !important;
        height: auto !important;
        padding-top: 120px !important;
        padding-bottom: 65px !important;
        display: flex !important;
        align-items: center !important;
    }

    .about-hero .container {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    .about-hero .hero-actions {
        margin-bottom: 0 !important;
    }

    .about-section.section-padding {
        padding-top: 45px !important;
        padding-bottom: 40px !important;
    }
}


/* ===== SMALL MOBILE ===== */

@media (max-width: 480px) {

    .about-hero {
        min-height: auto !important;
        height: auto !important;
        padding-top: 105px !important;
        padding-bottom: 55px !important;
    }

    .about-section.section-padding {
        padding-top: 40px !important;
        padding-bottom: 35px !important;
    }
}

/* ======================================================================
   SIXM GLOBAL — FINAL TARGETED QA FIXES
   Keep the original navigation, routes, images and component structure.
   This section only fixes contrast, hit areas, spacing and responsive grids.
   ====================================================================== */

html, body { max-width:100%; overflow-x:hidden; }
body { background:#fff; }

/* ------------------------------ Header / navigation ------------------ */
.site-header {
  position:fixed;
  inset:22px 0 auto;
  width:100%;
  z-index:9000;
  pointer-events:none;
}
.site-header .header-container { pointer-events:none; }
.site-header .nav-wrap {
  pointer-events:auto;
  width:100%;
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.site-header .logo { flex:0 0 auto; min-width:0; }
.site-header .main-menu {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:2px;
  flex:1 1 auto;
  min-width:0;
}
.site-header .main-menu > a,
.site-header .nav-dropdown-toggle {
  white-space:nowrap;
  flex:0 0 auto;
}
.site-header .header-right { flex:0 0 auto; min-width:0; }

.nav-dropdown { position:relative; }
.nav-dropdown-menu {
  z-index:9100;
  pointer-events:none;
}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu,
.nav-dropdown.is-open .nav-dropdown-menu { pointer-events:auto; }

@media (max-width:1399px) and (min-width:1200px) {
  .site-header .main-menu > a,
  .site-header .nav-dropdown-toggle { padding-left:8px; padding-right:8px; font-size:.70rem; }
  .site-header .header-rfq-btn { min-width:150px; width:150px; padding:0 12px; font-size:.70rem; }
}

@media (max-width:1199px) {
  .site-header { inset:12px 0 auto; }
  .site-header .main-menu { display:none; }
  .site-header .menu-toggle { display:flex; }
  .site-header .header-rfq-btn { display:none; }
  .site-header .nav-wrap { min-height:66px; }
}

@media (max-width:767px) {
  .site-header { inset:10px 0 auto; }
  .site-header .header-container { width:calc(100% - 20px); padding:0; }
  .site-header .nav-wrap { min-height:56px; padding:5px 8px 5px 12px; }
  .site-header .logo img { width:44px; height:44px; object-fit:contain; }
  .site-header .header-right { gap:5px; }
  .site-header .header-language-toggle { height:38px; min-width:44px; padding:0 8px; }
  .site-header .menu-toggle { width:42px; height:42px; align-items:center; justify-content:center; }
}

@media (max-width:380px) {
  .site-header .header-container { width:calc(100% - 14px); }
  .site-header .nav-wrap { min-height:52px; padding-left:8px; padding-right:5px; }
  .site-header .logo img { width:40px; height:40px; }
  .site-header .menu-toggle { width:40px; height:40px; }
}

/* Mobile menu is a true overlay and never occupies document space. */
.mobile-menu-overlay {
  position:fixed !important;
  inset:0 !important;
  width:100% !important;
  height:100dvh !important;
  z-index:10000 !important;
  pointer-events:none !important;
  opacity:0 !important;
  visibility:hidden !important;
}
.mobile-menu-overlay.active {
  pointer-events:auto !important;
  opacity:1 !important;
  visibility:visible !important;
}
.mobile-menu-panel {
  position:absolute !important;
  top:0 !important;
  right:0 !important;
  width:min(380px,88vw) !important;
  height:100dvh !important;
  max-height:100dvh !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  transform:translateX(100%) !important;
}
.mobile-menu-overlay.active .mobile-menu-panel { transform:translateX(0) !important; }
.mobile-menu-links a,
.mobile-submenu a { overflow-wrap:normal; word-break:normal; }

/* ------------------------------ WhatsApp hit area -------------------- */
.sixm-whatsapp-float-wrap {
  position:fixed;
  right:22px;
  bottom:22px;
  width:56px;
  height:56px;
  z-index:8500;
  pointer-events:none;
}
.sixm-whatsapp-float-wrap .sixm-whatsapp-float {
  position:absolute !important;
  inset:0 !important;
  width:56px !important;
  height:56px !important;
  max-width:56px !important;
  max-height:56px !important;
  display:grid !important;
  place-items:center !important;
  border-radius:50% !important;
  pointer-events:auto !important;
  overflow:visible !important;
}
.sixm-whatsapp-float-wrap .sixm-whatsapp-label { pointer-events:none; }
.sixm-whatsapp-float-wrap .sixm-whatsapp-pulse { pointer-events:none; }
@media (max-width:767px) {
  .sixm-whatsapp-float-wrap { right:13px; bottom:13px; width:52px; height:52px; }
  .sixm-whatsapp-float-wrap .sixm-whatsapp-float { width:52px !important; height:52px !important; max-width:52px !important; max-height:52px !important; }
  .sixm-whatsapp-float-wrap .sixm-whatsapp-label { display:none; }
}

/* ------------------------------ Page heroes -------------------------- */
.page-hero,
.service-detail-hero,
.project-category-hero,
.services-hero,
.facilities-hero,
.products-hero,
.qa-hero {
  isolation:isolate;
}
.page-hero h1,
.page-hero p,
.page-hero .breadcrumb,
.page-hero .breadcrumb a,
.service-detail-hero h1,
.service-detail-hero p,
.service-detail-hero .breadcrumb,
.service-detail-hero .breadcrumb a,
.project-category-hero h1,
.project-category-hero p,
.project-category-hero .breadcrumb,
.project-category-hero .breadcrumb a { color:#fff; text-shadow:0 2px 14px rgba(0,0,0,.30); }

/* ------------------------------ Image service cards ------------------ */
.service-card.has-image { isolation:isolate; }
.service-card.has-image .service-card-image { z-index:-2; }
.service-card.has-image .service-card-image:after {
  background:linear-gradient(180deg,rgba(5,25,40,.28),rgba(5,25,40,.88));
}
.service-card.has-image .bg-fill { z-index:-1; opacity:.14; transform:scale(1); }
.service-card.has-image .icon-box,
.service-card.has-image h3,
.service-card.has-image p,
.service-card.has-image .card-arrow { position:relative; z-index:2; }
.service-card.has-image .icon-box { background:rgba(255,255,255,.16); color:#fff; }
.service-card.has-image h3 { color:#fff; }
.service-card.has-image p { color:rgba(255,255,255,.88); }
.service-card.has-image .card-arrow { background:rgba(255,255,255,.94); color:var(--navy); }
@media (hover:hover) and (pointer:fine) {
  .service-card.has-image:hover h3,
  .service-card.has-image:hover p { color:var(--sky); text-shadow:0 2px 10px rgba(0,0,0,.5); }
  .service-card.has-image:hover .card-arrow { background:var(--sky); color:var(--navy); }
}

/* ------------------------------ Services spacing -------------------- */
.services-page .services-intro-section {
  padding-top:72px !important;
  padding-bottom:72px !important;
}
.services-page .services-intro-section > .container > .section-title.center + .service-showcase {
  margin-top:28px;
  margin-bottom:42px;
}
.services-page .services-page-heading { margin-top:0 !important; margin-bottom:24px !important; }
.services-page .services-catalog-heading { margin-top:54px !important; margin-bottom:24px !important; }
.services-page .service-page-grid { margin-top:0 !important; }
.services-page .service-page-card { min-height:0; height:auto; padding:24px; }
.services-page .service-page-grid .service-page-card { background:#fff !important; color:var(--navy) !important; }
.services-page .service-page-grid .service-page-card h3 { color:var(--navy) !important; }
.services-page .service-page-grid .service-page-card p { color:var(--text) !important; }
.services-page .service-page-card p { min-height:0; }
.services-page .services-grid { margin-top:0 !important; }
.services-page .process-section { padding-top:72px; }

@media (max-width:767px) {
  .services-page .services-intro-section { padding-top:42px !important; padding-bottom:48px !important; }
  .services-page .services-intro-section > .container > .section-title.center + .service-showcase { margin-top:20px; margin-bottom:34px; }
  .services-page .services-page-heading { margin-top:0 !important; margin-bottom:18px !important; }
  .services-page .services-catalog-heading { margin-top:38px !important; margin-bottom:18px !important; }
  .services-page .service-page-grid { grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:12px !important; }
  .services-page .service-page-card { padding:18px !important; min-height:220px !important; }

  .services-page .service-page-card p { font-size:.80rem !important; line-height:1.55 !important; }
  .services-page .service-showcase { grid-template-columns:1fr !important; gap:10px !important; }
  .services-page .showcase-panel { min-height:300px !important; }
  .services-page .showcase-panel-overlay { padding:22px !important; }
}

/* ------------------------------ Mobile service/catalog cards -------- */
@media (max-width:767px) {
  .services-page .services-grid,
  .qa-content .services-grid { display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:12px !important; }
  .services-page .service-card,
  .qa-content .service-card {
    min-width:0 !important;
    min-height:190px !important;
    height:auto !important;
    padding:16px !important;
    border-radius:15px !important;
  }
  .services-page .service-card .icon-box,
  .qa-content .service-card .icon-box { width:40px !important; height:40px !important; margin-bottom:22px !important; }
  .services-page .service-card h3,
  .qa-content .service-card h3 { font-size:.88rem !important; line-height:1.25 !important; margin-bottom:6px !important; }
  .services-page .service-card p,
  .qa-content .service-card p { font-size:.76rem !important; line-height:1.5 !important; }
  .services-page .service-card.has-image h3 { color:#fff !important; }
  .services-page .service-card.has-image p { color:rgba(255,255,255,.90) !important; }
}
@media (max-width:420px) {
  .services-page .services-grid,
  .qa-content .services-grid { grid-template-columns:1fr 1fr !important; gap:10px !important; }
  .services-page .service-card,
  .qa-content .service-card { min-height:175px !important; padding:14px !important; }
  .services-page .service-card h3,
  .qa-content .service-card h3 { font-size:.84rem !important; }
  .services-page .service-card p,
  .qa-content .service-card p { font-size:.72rem !important; }
}
@media (max-width:360px) {
  .services-page .services-grid,
  .qa-content .services-grid { grid-template-columns:1fr !important; }
  .services-page .service-card,
  .qa-content .service-card { min-height:170px !important; }
}

/* ------------------------------ Products / QA / Facilities ----------- */
@media (max-width:767px) {
  .products-grid { grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:12px !important; }
  .products-page .product-card { min-width:0 !important; min-height:230px !important; height:230px !important; }
  .qa-confidence-grid,
  .about-mission-grid { display:grid !important; grid-template-columns:1fr !important; gap:14px !important; }
  .facilities-capability-cards { display:grid !important; grid-template-columns:1fr !important; gap:14px !important; }
  .facilities-lead-visual,
  .facilities-lead-visual img { min-height:300px !important; height:300px !important; }
}
@media (min-width:768px) and (max-width:1199px) {
  .products-grid { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
  .qa-content .services-grid { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
  .facilities-capability-cards { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
  .qa-confidence-grid,
  .about-mission-grid { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
}
@media (max-width:420px) {
  .products-grid { grid-template-columns:1fr !important; }
  .products-page .product-card { height:220px !important; min-height:220px !important; }
}

/* ------------------------------ About normal flow ------------------- */
.about-page .about-copy,
.about-page .about-hero .hero-actions,
.about-page .about-certification-block,
.about-page .about-experience-section .about-copy,
.about-page .about-experience-section .section-title .sub-title,
.about-page .about-experience-section .section-title h2,
.about-page .about-experience-section .section-title p { transform:none !important; }
.about-page .about-hero .hero-actions { margin-left:0 !important; }
.about-page .about-certification-block { margin-top:36px !important; }
@media (max-width:767px) {
  .about-page .about-hero { min-height:360px !important; height:auto !important; }
  .about-page .about-hero > .container { padding:112px 16px 34px !important; }
}

/* ------------------------------ Readability -------------------------- */
.service-detail-copy h2 { color:var(--navy); }
.service-detail-copy > p,
.service-detail-copy .service-point span { color:var(--text); }
.service-next { padding-top:58px; }
.about-page .about-checks i { color:var(--mid) !important; }

/* Buttons never stretch into page-sized hit areas. */
a.theme-btn,
button.theme-btn,
.service-page-card,
.card-arrow { max-width:100%; box-sizing:border-box; }

@media (prefers-reduced-motion:reduce) {
  .sixm-whatsapp-pulse { animation:none !important; }
}


/* About Mission & Vision cards: clicking/focusing a card keeps its text readable
   and changes it to the SIXM accent without changing the card background. */
.about-page .services-grid > .service-card:focus,
.about-page .services-grid > .service-card:active {
  outline:2px solid rgba(135,206,235,.55);
  outline-offset:2px;
}
.about-page .services-grid > .service-card:focus h3,
.about-page .services-grid > .service-card:focus p,
.about-page .services-grid > .service-card:active h3,
.about-page .services-grid > .service-card:active p {
  color:var(--deep)!important;
}
@media(max-width:767px){
  .about-page .services-grid { grid-template-columns:1fr!important; }
}

/* ============================================================
   CURRENT ROUND — CARD HOVER / SERVICES COPY / EMAIL LINKS
   Keep light cards light on Home + About. The existing tilt motion
   may remain, but the dark animated fill must not cover the card.
   ============================================================ */
.about-page .service-card:hover .bg-fill,
.home-page .service-card:hover .bg-fill {
  transform: scale(0) !important;
  opacity: 0 !important;
}

.about-page .service-card:hover h3,
.about-page .service-card:hover p,
.home-page .service-card:hover h3,
.home-page .service-card:hover p {
  color: inherit !important;
}

.about-page .service-card:hover .icon-box,
.home-page .service-card:hover .icon-box {
  background: var(--bg-light) !important;
  color: var(--deep) !important;
}

/* Do not let touch/click hover states bring the dark fill back. */
@media (hover: none), (pointer: coarse) {
  .about-page .service-card:hover .bg-fill,
  .home-page .service-card:hover .bg-fill {
    transform: scale(0) !important;
    opacity: 0 !important;
  }

  .about-page .service-card:hover h3,
  .about-page .service-card:hover p,
  .home-page .service-card:hover h3,
  .home-page .service-card:hover p {
    color: inherit !important;
  }
}

/* Services showcase copy sits over a photographic panel. */
.services-page .showcase-panel .showcase-title,
.services-page .showcase-panel .showcase-desc {
  color: #fff !important;
}

/* Keep the inactive Our Work filters light/outlined on hover. */
.portfolio-page .portfolio-filters .portfolio-filter:not(.active):hover,
.portfolio-filters .portfolio-filter:not(.active):hover {
  background: transparent !important;
  color: var(--deep) !important;
  border-color: var(--deep) !important;
}
.portfolio-page .portfolio-filters .portfolio-filter:not(.active):hover::before,
.portfolio-filters .portfolio-filter:not(.active):hover::before {
  width: 0 !important;
  height: 0 !important;
}

/* Email links should look like the surrounding contact text while remaining clickable. */
.contact-info-item strong a,
.location-card-body p a {
  color: inherit !important;
  text-decoration: none;
}
.contact-info-item strong a:hover,
.location-card-body p a:hover {
  color: var(--deep) !important;
  text-decoration: underline;
}
.footer-contact-list a {
  color: inherit !important;
  text-decoration: none;
}
.footer-contact-list a:hover {
  color: var(--sky) !important;
  text-decoration: underline;
}

/* ============================================================
   FINAL TARGETED FIXES — 2026-09-10
   Keep desktop hover effects, but prevent sticky touch states.
   ============================================================ */

/* Our Work filters: inactive filters never fill dark on hover. */
@media (hover: hover) and (pointer: fine) {
  .portfolio-filters .portfolio-filter:not(.active):hover,
  .portfolio-page .portfolio-filters .portfolio-filter:not(.active):hover {
    background: transparent !important;
    color: var(--deep) !important;
    border-color: var(--deep) !important;
  }
  .portfolio-filters .portfolio-filter:not(.active):hover::before,
  .portfolio-page .portfolio-filters .portfolio-filter:not(.active):hover::before {
    width: 0 !important;
    height: 0 !important;
  }
}

/* Touch devices must not keep a button/card hover state after tapping. */
@media (hover: none), (pointer: coarse) {
  .theme-btn:hover,
  .theme-btn.light:hover,
  .theme-btn.outline:hover,
  .page-hero .theme-btn.outline:hover {
    color: inherit !important;
    border-color: initial;
  }
  .theme-btn:hover::before,
  .theme-btn.light:hover::before,
  .theme-btn.outline:hover::before,
  .page-hero .theme-btn.outline:hover::before {
    width: 0 !important;
    height: 0 !important;
  }
  .theme-btn:hover > i,
  .theme-btn:hover i {
    transform: none !important;
  }
  .theme-btn.outline:hover,
  .page-hero .theme-btn.outline:hover {
    background: transparent !important;
    color: var(--deep) !important;
    border-color: var(--deep) !important;
  }
  .theme-btn.light:hover {
    background: var(--sky) !important;
    color: var(--navy) !important;
    border-color: transparent !important;
  }

  /* White cards stay white on touch; only real pointer hover may reveal the fill. */
  .service-card:not(.has-image):hover .bg-fill {
    transform: scale(0) !important;
  }
  .service-card:not(.has-image):hover h3,
  .service-card:not(.has-image):hover p {
    color: inherit !important;
  }
  .service-card:not(.has-image):hover .icon-box {
    background: rgba(135,206,235,.14) !important;
    color: var(--deep) !important;
    transform: none !important;
  }
  .service-card:not(.has-image):hover .card-arrow {
    background: var(--bg-light) !important;
    color: var(--deep) !important;
    transform: none !important;
  }
}

/* Mobile dropdown children are explicitly a vertical column. */
.mobile-submenu {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  width: 100% !important;
}

/* The RFQ hero copy is always readable over its image. */
.quote-page .quote-hero .sub-title,
.quote-page .quote-hero h1 {
  color: #fff !important;
}

/* Certifications hero: centered copy; other inner heroes retain left alignment. */
.certifications-page .page-hero > .container {
  text-align: center !important;
}
.certifications-page .page-hero p {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Reduce doubled vertical padding between consecutive content sections. */
section.section-padding + section.section-padding {
  padding-top: 72px;
}
@media (max-width: 767px) {
  section.section-padding + section.section-padding {
    padding-top: 44px;
  }
}

/* Keep email addresses visibly actionable wherever a mailto link exists. */
a[href^="mailto:"] {
  cursor: pointer;
}

/* Correct touch-state colors: tapping must never leave a button in a stale hover color. */
@media (hover: none), (pointer: coarse) {
  .theme-btn:hover { background: var(--deep) !important; color: #fff !important; border-color: transparent !important; }
  .theme-btn.light:hover { background: var(--sky) !important; color: var(--navy) !important; border-color: transparent !important; }
  .theme-btn.outline:hover { background: transparent !important; color: var(--deep) !important; border-color: var(--deep) !important; }
  .page-hero .theme-btn.outline:hover { background: transparent !important; color: #fff !important; border-color: rgba(255,255,255,.5) !important; }
}

/* Our Work: purpose heading sits above each image, matching the supplied visual references. */
.portfolio-item-heading {
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
  padding:13px 16px 9px;
  background:#fff;
}
.portfolio-item-heading strong { color:var(--navy); font-size:.98rem; }
.portfolio-item-heading small { color:var(--mid); font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; }


/* ============================================================
   CURRENT ROUND — SERVICES CATALOG HOVER
   On the All Our Services cards, a real pointer hover fills the
   card dark and switches all card copy to white for contrast.
   ============================================================ */
@media (hover: hover) and (pointer: fine) {
  .services-page .services-grid > .service-card:hover .bg-fill {
    transform: scale(1) !important;
    opacity: 1 !important;
  }
  .services-page .services-grid > .service-card:hover h3,
  .services-page .services-grid > .service-card:hover p {
    color: #fff !important;
  }
  .services-page .services-grid > .service-card:hover .icon-box {
    background: rgba(255,255,255,.18) !important;
    color: #fff !important;
  }
  .services-page .services-grid > .service-card:hover .card-arrow {
    background: var(--sky) !important;
    color: var(--navy) !important;
  }
}

/* Portfolio filters: active mobile selection stays readable on the dark state. */
@media (hover: none), (pointer: coarse) {
  .portfolio-page .portfolio-filters .portfolio-filter.active,
  .portfolio-filters .portfolio-filter.active {
    background: var(--deep) !important;
    color: #fff !important;
    border-color: var(--deep) !important;
  }
  .portfolio-page .portfolio-filters .portfolio-filter.active::before,
  .portfolio-filters .portfolio-filter.active::before {
    width: 0 !important;
    height: 0 !important;
  }
  .portfolio-page .portfolio-filters .portfolio-filter.active:focus,
  .portfolio-page .portfolio-filters .portfolio-filter.active:active,
  .portfolio-filters .portfolio-filter.active:focus,
  .portfolio-filters .portfolio-filter.active:active {
    background: var(--deep) !important;
    color: #fff !important;
    border-color: var(--deep) !important;
  }
}

/* Certifications & Compliance hero copy follows the standard left alignment. */
.certifications-page .page-hero > .container {
  text-align: left !important;
}
.certifications-page .page-hero .certifications-hero-copy {
  margin-left: 0 !important;
  margin-right: 0 !important;
  text-align: left !important;
  max-width: 760px;
}

/* ============================================================
   CURRENT ROUND — IMAGE STRIP + HERO SPACING + MOBILE PORTFOLIO
   Keep the existing structure and only correct the requested areas.
   ============================================================ */

/* About horizontal image strip: use the product-specific imagery supplied
   for the moving strip instead of repeating the same factory photographs. */
.about-page .image-marquee-item img {
  object-fit: cover;
}

/* Home: give View All Services a little more breathing room below the cards. */
.home-page .home-solutions .section-cta-row {
  margin-top: 40px !important;
}

/* About hero follows the standard inner-page left-aligned composition. */
.about-page .about-hero .container {
  text-align: left !important;
  max-width: 1280px !important;
}
.about-page .about-hero h1,
.about-page .about-hero p {
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.about-page .about-hero p { max-width: 760px !important; }
.about-page .about-hero .hero-actions {
  justify-content: flex-start !important;
}

/* Certifications, Portfolio, Facilities and Blog heroes use the same
   safe top rhythm so the floating navigation never touches the copy. */
.certifications-page .page-hero > .container,
.portfolio-page .page-hero > .container,
.facilities-page .page-hero > .container,
.blog-page .blog-hero > .container,
.blog-detail-page .page-hero > .container {
  text-align: left !important;
}

@media (max-width: 767px) {
  .about-page .about-hero,
  .portfolio-page .page-hero,
  .certifications-page .page-hero,
  .facilities-page .page-hero,
  .blog-page .blog-hero,
  .blog-detail-page .page-hero {
    min-height: 410px !important;
    height: auto !important;
    align-items: flex-start !important;
  }

  .about-page .about-hero .container,
  .portfolio-page .page-hero .container,
  .certifications-page .page-hero .container,
  .facilities-page .page-hero .container,
  .blog-page .blog-hero .container,
  .blog-detail-page .page-hero .container {
    padding-top: 150px !important;
    padding-bottom: 42px !important;
  }

  .about-page .about-hero .hero-actions {
    justify-content: flex-start !important;
  }

  /* Portfolio cards: one readable column on phones, with a substantially
     larger image and smaller purpose/category text. */
  .portfolio-page .portfolio-grid {
    grid-template-columns: 1fr !important;
    grid-auto-rows: auto !important;
    gap: 16px !important;
  }
  .portfolio-page .portfolio-item {
    height: auto !important;
    min-height: 0 !important;
    display: block !important;
    overflow: hidden !important;
    border-radius: 16px !important;
  }
  .portfolio-page .portfolio-item-heading {
    padding: 10px 13px 8px !important;
    gap: 7px !important;
  }
  .portfolio-page .portfolio-item-heading strong {
    font-size: .76rem !important;
    line-height: 1.25 !important;
  }
  .portfolio-page .portfolio-item-heading small {
    font-size: .56rem !important;
    line-height: 1.2 !important;
  }
  .portfolio-page .portfolio-item > img {
    display: block !important;
    width: 100% !important;
    height: 235px !important;
    object-fit: cover !important;
  }
}

@media (max-width: 420px) {
  .about-page .about-hero .container,
  .portfolio-page .page-hero .container,
  .certifications-page .page-hero .container,
  .facilities-page .page-hero .container,
  .blog-page .blog-hero .container,
  .blog-detail-page .page-hero .container {
    padding-top: 142px !important;
    padding-bottom: 36px !important;
  }

  .portfolio-page .portfolio-item > img {
    height: 215px !important;
  }
}

/* Facilities: keep the sub-heading separated from the paragraph that
   follows it so the explanatory copy reads as one clean block. */
.facilities-page .facilities-overview .about-copy .sub-title {
  margin-bottom: 16px !important;
}
.facilities-page .facilities-overview .about-copy h2 {
  margin-top: 0 !important;
  margin-bottom: 16px !important;
}

/* Avoid excessive empty vertical space when two padded sections touch. */
section.section-padding + section.section-padding {
  padding-top: 56px !important;
}
@media (max-width: 767px) {
  section.section-padding + section.section-padding {
    padding-top: 36px !important;
  }
}

/* ============================================================
   CURRENT ROUND #06 — MOBILE PORTFOLIO GRID + HERO SPACING
   ============================================================ */

/* Keep the requested process/product imagery and make the Our Work cards
   behave like a compact product grid on phones. */
@media (max-width: 767px) {
  .portfolio-page .portfolio-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-rows: auto !important;
    gap: 10px !important;
  }
  .portfolio-page .portfolio-item {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
  }
  .portfolio-page .portfolio-item-heading {
    min-height: 48px !important;
    padding: 8px 9px 6px !important;
    gap: 3px !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    flex-direction: column !important;
  }
  .portfolio-page .portfolio-item-heading strong {
    display: block !important;
    font-size: .64rem !important;
    line-height: 1.2 !important;
    white-space: normal !important;
  }
  .portfolio-page .portfolio-item-heading small {
    display: block !important;
    font-size: .50rem !important;
    line-height: 1.15 !important;
    letter-spacing: .05em !important;
  }
  .portfolio-page .portfolio-item > img {
    width: 100% !important;
    height: 170px !important;
    min-height: 170px !important;
    object-fit: cover !important;
  }
}

@media (max-width: 420px) {
  .portfolio-page .portfolio-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
  .portfolio-page .portfolio-item-heading {
    min-height: 44px !important;
    padding: 7px 8px 5px !important;
  }
  .portfolio-page .portfolio-item-heading strong { font-size: .60rem !important; }
  .portfolio-page .portfolio-item-heading small { font-size: .47rem !important; }
  .portfolio-page .portfolio-item > img {
    height: 145px !important;
    min-height: 145px !important;
  }
}

/* The Major Service Categories heading needs breathing room after the
   large showcase image/content block above it. */
.services-page .services-page-heading {
  margin-top: 44px !important;
  margin-bottom: 24px !important;
}
@media (max-width: 767px) {
  .services-page .services-page-heading {
    margin-top: 38px !important;
    margin-bottom: 20px !important;
  }
}

/* Standardize the requested inner-page hero rhythm so the fixed navbar
   never crowds the eyebrow, title, paragraph or breadcrumb. */
.about-page .about-hero > .container,
.portfolio-page .page-hero > .container,
.certifications-page .page-hero > .container,
.facilities-page .page-hero > .container,
.blog-page .blog-hero > .container,
.blog-detail-page .page-hero > .container {
  padding-top: 168px !important;
  padding-bottom: 58px !important;
}

.about-page .about-hero .hero-actions {
  margin-top: 26px !important;
  margin-bottom: 8px !important;
}
.about-page .about-hero .breadcrumb {
  margin-top: 18px !important;
  position: relative !important;
  z-index: 3 !important;
}

@media (max-width: 767px) {
  .about-page .about-hero,
  .portfolio-page .page-hero,
  .certifications-page .page-hero,
  .facilities-page .page-hero,
  .blog-page .blog-hero,
  .blog-detail-page .page-hero {
    min-height: 430px !important;
    height: auto !important;
    align-items: flex-start !important;
  }
  .about-page .about-hero > .container,
  .portfolio-page .page-hero > .container,
  .certifications-page .page-hero > .container,
  .facilities-page .page-hero > .container,
  .blog-page .blog-hero > .container,
  .blog-detail-page .page-hero > .container {
    padding-top: 176px !important;
    padding-bottom: 44px !important;
  }
  .about-page .about-hero .hero-actions {
    margin-top: 22px !important;
    margin-bottom: 6px !important;
    gap: 10px !important;
  }
  .about-page .about-hero .breadcrumb { margin-top: 16px !important; }
}

@media (max-width: 420px) {
  .about-page .about-hero > .container,
  .portfolio-page .page-hero > .container,
  .certifications-page .page-hero > .container,
  .facilities-page .page-hero > .container,
  .blog-page .blog-hero > .container,
  .blog-detail-page .page-hero > .container {
    padding-top: 168px !important;
    padding-bottom: 38px !important;
  }
}

/* Long service breadcrumbs remain visible instead of being clipped by the
   hero on mobile. */
.service-detail-page .page-hero .breadcrumb,
.service-detail-page .page-hero .breadcrumb a {
  font-size: .76rem !important;
  line-height: 1.4 !important;
}
.service-detail-page .page-hero .breadcrumb {
  max-width: 100% !important;
  overflow-wrap: anywhere !important;
}
@media (max-width: 767px) {
  .service-detail-page .page-hero .breadcrumb,
  .service-detail-page .page-hero .breadcrumb a {
    font-size: .68rem !important;
    line-height: 1.45 !important;
  }
}

/* Keep the Certifications hero explicitly left-aligned. */
.certifications-page .page-hero > .container,
.certifications-page .page-hero .certifications-hero-copy {
  text-align: left !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}


/* ============================================================
   CURRENT ROUND #08 — PAGE-SCOPED HERO/BREADCRUMB FIXES
   Keep the existing mobile typography and visual treatment. The issue was
   the shared absolute breadcrumb positioning: it could sit behind the
   header or leave a large empty gap. These rules keep affected breadcrumbs
   in normal flow without changing unrelated pages.
   ============================================================ */

/* Desktop: keep long/affected breadcrumbs in the hero content flow so they
   remain visible instead of being clipped or hidden behind the header. */
@media (min-width: 768px) {
  .portfolio-page .page-hero .breadcrumb,
  .certifications-page .page-hero .breadcrumb,
  .facilities-page .page-hero .breadcrumb,
  .blog-page .blog-hero .breadcrumb,
  .blog-detail-page .page-hero .breadcrumb,
  .service-detail-page .page-hero .breadcrumb {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    margin-top: 14px !important;
    width: 100% !important;
    max-width: 100% !important;
    white-space: normal !important;
    overflow: visible !important;
    overflow-wrap: anywhere !important;
    line-height: 1.4 !important;
  }

  /* Long service names stay compact enough for the existing 430px hero. */
  .service-detail-page .page-hero .breadcrumb,
  .service-detail-page .page-hero .breadcrumb a {
    font-size: .72rem !important;
    line-height: 1.35 !important;
  }
}

/* Mobile: the breadcrumb follows the hero copy instead of occupying a
   separate absolute slot. This removes the excessive gap on Facilities,
   Certification and Journal pages while preserving readable wrapping. */
@media (max-width: 767px) {
  .team-page .page-hero .breadcrumb,
  .portfolio-page .page-hero .breadcrumb,
  .certifications-page .page-hero .breadcrumb,
  .facilities-page .page-hero .breadcrumb,
  .blog-page .blog-hero .breadcrumb,
  .blog-detail-page .page-hero .breadcrumb,
  .service-detail-page .page-hero .breadcrumb {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    margin-top: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
    white-space: normal !important;
    overflow: visible !important;
    overflow-wrap: anywhere !important;
    line-height: 1.4 !important;
  }

  .team-page .page-hero .breadcrumb {
    margin-top: 10px !important;
  }

  /* Preserve the earlier mobile long-breadcrumb reduction. */
  .service-detail-page .page-hero .breadcrumb,
  .service-detail-page .page-hero .breadcrumb a {
    font-size: .68rem !important;
    line-height: 1.4 !important;
  }

  /* The hero container now owns the vertical rhythm; don't reserve an
     absolute breadcrumb slot above it. */
  .certifications-page .page-hero > .container,
  .facilities-page .page-hero > .container,
  .blog-page .blog-hero > .container,
  .blog-detail-page .page-hero > .container,
  .portfolio-page .page-hero > .container {
    padding-top: 142px !important;
    padding-bottom: 34px !important;
  }

  .team-page .page-hero .container {
    padding-top: 118px !important;
    padding-bottom: 30px !important;
  }
}

@media (max-width: 420px) {
  .certifications-page .page-hero > .container,
  .facilities-page .page-hero > .container,
  .blog-page .blog-hero > .container,
  .blog-detail-page .page-hero > .container,
  .portfolio-page .page-hero > .container {
    padding-top: 136px !important;
    padding-bottom: 30px !important;
  }

  .team-page .page-hero .container {
    padding-top: 110px !important;
  }
}

/* Submit Your RFQ uses the same light-on-image breadcrumb treatment as the
   other dark inner-page heroes. */
.quote-page .quote-hero .breadcrumb,
.quote-page .quote-hero .breadcrumb a {
  color: #fff !important;
}
.quote-page .quote-hero .breadcrumb a {
  color: var(--sky) !important;
}



/* ============================================================
   CURRENT ROUND #09 — TARGETED HERO / DROPDOWN / CERTIFICATE FIXES
   ============================================================ */

/* Certification hero: same visual language as the Blog inner-page hero,
   with a tighter mobile top rhythm so the navbar does not create a large gap. */
.certifications-page .page-hero.blog-hero {
  align-items: flex-start !important;
  min-height: 470px !important;
  height: 470px !important;
}
.certifications-page .page-hero.blog-hero > .container {
  max-width: 1280px !important;
  text-align: left !important;
  padding-top: 202px !important;
  padding-bottom: 48px !important;
}
.certifications-page .page-hero.blog-hero h1 {
  margin: 14px 0 16px !important;
  font-size: clamp(1.7rem, 3.5vw, 2.55rem) !important;
  line-height: 1.08 !important;
  max-width: 820px !important;
}
.certifications-page .page-hero.blog-hero p {
  margin-left: 0 !important;
  margin-right: 0 !important;
  max-width: 760px !important;
  text-align: left !important;
}
.certifications-page .page-hero.blog-hero .breadcrumb {
  margin-top: 18px !important;
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
}

/* Facilities hero title: slightly smaller without changing the banner layout. */
.facilities-page .facilities-hero h1 {
  font-size: clamp(1.8rem, 3.7vw, 2.75rem) !important;
}

/* Blog hero titles: keep the existing typography family, but prevent oversized titles. */
.blog-page .blog-hero h1 {
  font-size: clamp(1.7rem, 3.5vw, 2.55rem) !important;
}
.blog-detail-page .page-hero h1 {
  font-size: clamp(1.8rem, 3.8vw, 2.8rem) !important;
}

/* Portfolio hero content sits a little lower so the eyebrow and title do not
   get hidden under the fixed navigation. */
.portfolio-page .portfolio-hero > .container {
  padding-top: 190px !important;
}
 .portfolio-page .portfolio-hero .breadcrumb {
  margin-top: 34px !important;
}

/* Blog hero copy sits a little lower while keeping its compact heading. */
@media (min-width: 768px) {
  .blog-page .blog-hero > .container {
    padding-top: 184px !important;
  }
}
@media (max-width: 767px) {
  .blog-page .blog-hero > .container {
    padding-top: 154px !important;
  }
}

/* The dropdown's visual panel has a small gap for the arrow, but an invisible
   bridge keeps the hover area continuous so the panel does not disappear while
   the pointer moves from the toggle to the white dropdown. */
@media (hover: hover) and (pointer: fine) {
  .site-header .nav-dropdown::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 14px;
    background: transparent;
    z-index: 9099;
  }
  .site-header .nav-dropdown-menu { z-index: 9100; }
}

/* Certificate admin metadata remains compact on the public cards. */
.certificate-organization,
.certificate-meta {
  display: block;
  margin-top: 5px;
  font-size: .66rem;
  line-height: 1.45;
  color: var(--mid);
}

@media (max-width: 767px) {
  .facilities-page .facilities-hero h1 { font-size: clamp(1.65rem, 6.8vw, 2.2rem) !important; }
  .blog-page .blog-hero h1 { font-size: clamp(1.5rem, 6.4vw, 2.0rem) !important; }
  .blog-detail-page .page-hero h1 { font-size: clamp(1.55rem, 6.6vw, 2.1rem) !important; }
  .certifications-page .page-hero.blog-hero {
    min-height: 390px !important;
    height: 390px !important;
    align-items: flex-start !important;
  }
  .certifications-page .page-hero.blog-hero h1 { font-size: clamp(1.5rem, 6.4vw, 2.0rem) !important; }
  .certifications-page .page-hero.blog-hero > .container {
    padding-top: 124px !important;
    padding-bottom: 28px !important;
  }
  .certifications-page .page-hero.blog-hero .breadcrumb {
    margin-top: 10px !important;
  }
  .portfolio-page .portfolio-hero > .container { padding-top: 182px !important; }
}
@media (max-width: 420px) {
  .portfolio-page .portfolio-hero > .container { padding-top: 176px !important; }
  .certifications-page .page-hero.blog-hero > .container {
    padding-top: 116px !important;
    padding-bottom: 24px !important;
  }
}
@media (max-width: 420px) {
  .services-page .service-page-grid { grid-template-columns:1fr !important; }
}


/* ============================================================
   CURRENT ROUND #12 — SERVICES IMAGES + HERO SPACING
   Page-scoped only; preserve existing responsive behavior.
   ============================================================ */

/* About: desktop-only breathing room below the fixed/floating navbar.
   Mobile values from the previous round remain unchanged. */
@media (min-width: 768px) {
  .about-page .about-hero > .container {
    padding-top: 198px !important;
  }
  .about-page .about-hero {
    min-height: 86vh !important;
  }

  .blog-page .blog-hero > .container {
    padding-top: 202px !important;
  }
  .blog-page .blog-hero {
    min-height: 470px !important;
  }
}

/* Services: keep the Major Service Categories block clearly separated
   from the photographic showcase above it. */
.services-page .services-page-heading {
  margin-top: 78px !important;
}

/* Major Service Categories are intentionally text/icon-only. */
.services-page .service-page-card {
  overflow: hidden;
  min-height: 250px;
}
.services-page .service-page-card .icon-box {
  margin-bottom: 24px;
}

/* Full catalog is intentionally text/icon only, as requested. */
.services-page .services-catalog-grid .service-card-image {
  display: none !important;
}

/* ============================================================
   CURRENT ROUND #15 — FINAL PAGE-SCOPED ALIGNMENT / SERVICE MEDIA
   ============================================================ */

/* Certification: match the standard inner-page container alignment. */
.certifications-page .page-hero > .container {
  width: 100% !important;
  max-width: 1280px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
  text-align: left !important;
  padding-top: 168px !important;
  padding-bottom: 52px !important;
}
.certifications-page .page-hero.blog-hero h1 {
  margin-top: 14px !important;
}
@media (max-width: 767px) {
  .certifications-page .page-hero.blog-hero > .container {
    padding-top: 136px !important;
    padding-bottom: 30px !important;
  }
}
@media (max-width: 420px) {
  .certifications-page .page-hero.blog-hero > .container {
    padding-top: 128px !important;
    padding-bottom: 26px !important;
  }
}

/* Portfolio: remove the excessive blank area above the hero copy while
   keeping enough clearance for the fixed/floating navigation. */
.portfolio-page .portfolio-hero > .container {
  padding-top: 168px !important;
  padding-bottom: 52px !important;
}
@media (min-width: 768px) {
  .portfolio-page .portfolio-hero > .container {
    padding-top: 246px !important;
  }
}
.portfolio-page .portfolio-hero .breadcrumb {
  margin-top: 12px !important;
}
@media (max-width: 767px) {
  .portfolio-page .portfolio-hero > .container {
    padding-top: 136px !important;
    padding-bottom: 32px !important;
  }
  .portfolio-page .portfolio-hero .breadcrumb {
    margin-top: 10px !important;
  }
}
@media (max-width: 420px) {
  .portfolio-page .portfolio-hero > .container {
    padding-top: 128px !important;
    padding-bottom: 28px !important;
  }
}

/* Home Garment Solutions cards are intentionally text/icon-only.  This
   also prevents a stale CMS home_image value from turning these cards into
   photographic cards. */
.home-page .home-service-grid .home-service-card {
  background: #fff !important;
  color: var(--navy) !important;
}
.home-page .home-service-grid .home-service-card .service-card-image {
  display: none !important;
}

/* All Our Services keeps its original white-card appearance and only uses
   the existing hover fill on a real pointer hover. */
.services-page .services-catalog-grid > .service-card {
  background: #fff !important;
  color: var(--navy) !important;
}
.services-page .services-catalog-grid > .service-card .bg-fill {
  transform: scale(0) !important;
  opacity: 1 !important;
}
.services-page .services-catalog-grid > .service-card h3 {
  color: var(--navy) !important;
}
.services-page .services-catalog-grid > .service-card p {
  color: var(--text) !important;
}
@media (hover: hover) and (pointer: fine) {
  .services-page .services-catalog-grid > .service-card:hover .bg-fill {
    transform: scale(1) !important;
    opacity: 1 !important;
  }
  .services-page .services-catalog-grid > .service-card:hover h3,
  .services-page .services-catalog-grid > .service-card:hover p {
    color: #fff !important;
  }
  .services-page .services-catalog-grid > .service-card:hover .icon-box {
    background: rgba(255,255,255,.18) !important;
    color: #fff !important;
  }
}

/* ============================================================
   CURRENT ROUND #19 — TARGETED HERO / IMAGE PATH FIXES
   ============================================================ */
.portfolio-page .portfolio-hero {
  align-items: flex-start !important;
  min-height: 520px !important;
}
.portfolio-page .portfolio-hero > .container {
  padding-top: 178px !important;
  padding-bottom: 54px !important;
}
.portfolio-page .portfolio-hero .sub-title {
  margin-bottom: 14px !important;
}
.portfolio-page .portfolio-hero h1 { margin-top: 0 !important; }
.portfolio-page .portfolio-hero .breadcrumb { margin-top: 16px !important; }
@media (max-width: 767px) {
  .portfolio-page .portfolio-hero { min-height: 390px !important; }
  .portfolio-page .portfolio-hero > .container {
    padding-top: 142px !important;
    padding-bottom: 30px !important;
  }
  .portfolio-page .portfolio-hero .breadcrumb { margin-top: 12px !important; }
}
@media (max-width: 420px) {
  .portfolio-page .portfolio-hero > .container { padding-top: 130px !important; }
}
.service-detail-page .service-detail-media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  height: auto !important;
  object-fit: cover;
  display: block;
}

/* ============================================================
   CURRENT ROUND #20 — FINAL HERO ALIGNMENT
   Only the requested Certification and Our Work hero positioning is changed.
   ============================================================ */

/* Certifications: align the hero copy with the same centered 1280px content
   rail used by the other inner pages, instead of hugging the viewport edge. */
.certifications-page .page-hero > .container {
  width: 100% !important;
  max-width: 1280px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
  text-align: left !important;
}

/* Our Work: move the hero copy upward while keeping safe clearance below
   the floating navigation. */
.portfolio-page .portfolio-hero > .container {
  padding-top: 140px !important;
}

@media (max-width: 767px) {
  .certifications-page .page-hero > .container {
    padding-left: 16px !important;
    padding-right: 16px !important;
    padding-top: 136px !important;
    padding-bottom: 30px !important;
  }

  .portfolio-page .portfolio-hero > .container {
    padding-top: 120px !important;
  }
}

@media (max-width: 420px) {
  .certifications-page .page-hero > .container {
    padding-top: 128px !important;
    padding-bottom: 26px !important;
  }

  .portfolio-page .portfolio-hero > .container {
    padding-top: 112px !important;
  }
}

/* ============================================================
   CURRENT ROUND — MOBILE SPACING + LOCATION GRID + PAGE BACK
   Targeted additions only. Keep existing desktop layout intact.
   ============================================================ */

/* Floating back arrow: visible on every public page and intentionally
   separated from the existing Back-to-top control on the opposite side. */
.page-back-button {
  position: fixed;
  left: 22px;
  bottom: 22px;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(11,34,57,.16);
  border-radius: 50%;
  background: var(--deep);
  color: #fff;
  display: grid;
  place-items: center;
  z-index: 4500;
  box-shadow: 0 10px 30px rgba(11,34,57,.18);
  cursor: pointer;
  transition: transform .25s ease, background .25s ease, color .25s ease, box-shadow .25s ease;
}

.page-back-button:hover {
  background: var(--deep);
  color: #fff;
  transform: translateX(-2px);
  box-shadow: 0 12px 32px rgba(11,34,57,.24);
}

/* Contact locations: keep two offices side-by-side on phones as requested. */
@media (max-width: 767px) {
  .location-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    width: 100%;
  }

  .location-image {
    height: 120px !important;
  }

  .location-image span {
    left: 10px !important;
    bottom: 9px !important;
    font-size: .66rem !important;
  }

  .location-card-body {
    padding: 12px !important;
  }

  .location-card-body h3 {
    font-size: .82rem !important;
    line-height: 1.2 !important;
    margin-bottom: 8px !important;
  }

  .location-card-body p {
    gap: 5px !important;
    font-size: .59rem !important;
    line-height: 1.35 !important;
    margin: 6px 0 !important;
  }

  .location-card-body p i {
    flex: 0 0 auto;
    font-size: .58rem;
  }

  .location-card-body .text-link {
    gap: 5px !important;
    font-size: .58rem !important;
    line-height: 1.35 !important;
    margin-top: 8px !important;
  }

  /* Featured service: give the image, copy and CTA enough vertical room
     so the CTA never touches the service list underneath it. */
  .services-page .service-showcase {
    gap: 16px !important;
  }

  .services-page .showcase-panel {
    min-height: 250px !important;
    height: 250px !important;
    margin-bottom: 0 !important;
  }

  .services-page .showcase-panel-overlay {
    padding: 18px !important;
  }

  .services-page .showcase-panel .theme-btn {
    margin-top: 12px !important;
  }
}

@media (max-width: 390px) {
  .page-back-button {
    left: 14px;
    bottom: 16px;
    width: 42px;
    height: 42px;
  }

  .location-cards {
    gap: 8px !important;
  }

  .location-image {
    height: 105px !important;
  }

  .location-card-body {
    padding: 10px !important;
  }

  .location-card-body h3 {
    font-size: .76rem !important;
  }

  .location-card-body p,
  .location-card-body .text-link {
    font-size: .54rem !important;
  }

  .services-page .showcase-panel {
    min-height: 235px !important;
    height: 235px !important;
  }
}