/* =========================================================
   ENE Fluidtek — recreation of the supplied reference design
   Reference render: 1920px viewport, 1536px container.
   Root font-size scales with the viewport so every rem value
   below equals the measured pixel value at 1920px.
   ========================================================= */

:root{
  --navy:#12315F;
  --navy-deep:#0B2545;
  --teal:#00B2C9;
  --teal-ink:#0095A8;
  --blue-eyebrow:#1B509E;
  --body:#7C8999;
  --line:#E7EAEF;
  --line-2:#E3E6ED;
  --bg-1:#FAFBFD;
  --bg-2:#F6F7FB;
  --white:#fff;
  --on-navy:rgba(255,255,255,.88);
  --on-navy-soft:rgba(255,255,255,.72);
  --rule-navy:rgba(255,255,255,.16);
  --grid-navy:rgba(255,255,255,.04);

  --fs-h1:3.625rem;      /* 58px */
  --fs-h2:2.75rem;       /* 44px */
  --fs-lead:1.375rem;    /* 22px */
  --fs-body:1.1875rem;   /* 19px */
  --fs-sm:1.125rem;      /* 18px */
  --fs-micro:.875rem;    /* 14px */
}

html{
  font-size:clamp(12.5px, .8333vw, 16px);
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
}

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

body{
  margin:0;
  font-family:"Roboto",Arial,Helvetica,sans-serif;
  font-weight:400;
  color:var(--body);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0;}
ul{padding:0;list-style:none;}
img{max-width:100%;display:block;}
a{text-decoration:none;color:inherit;}
button{font-family:inherit;}

.container{
  width:min(96rem, 100% - 3rem);
  margin-inline:auto;
}

/* grid overlay used on the navy blocks */
.grid-bg{
  background-color:var(--navy);
  background-image:
    linear-gradient(var(--grid-navy) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-navy) 1px, transparent 1px);
  background-size:2.5rem 2.5rem;
}

/* ---------- shared type ---------- */
h2{
  font-size:var(--fs-h2);
  line-height:1.2;
  font-weight:700;
  letter-spacing:-.01em;
  color:var(--navy);
  margin-bottom:1.5rem;
}
.section-intro{
  font-size:var(--fs-lead);
  line-height:2.1875rem;
  color:var(--body);
  max-width:58.125rem;
  margin-bottom:5rem;
}
.micro{
  font-family:"Roboto Mono","Roboto Mono Fallback",monospace;
  font-size:var(--fs-micro);
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--body);
  font-weight:400;
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:1.0625rem;
  font-weight:700;
  line-height:1;
  border:0;
  border-radius:0;
  cursor:pointer;
  transition:background-color .18s ease, color .18s ease, opacity .18s ease;
}
.btn-primary{
  background:var(--teal);
  color:var(--navy-deep);
  padding:0 1.5rem;
}
.btn-primary:hover,.btn-primary:focus-visible{background:#00A0B6;}
.btn-block{width:100%;height:3.6875rem;}
.btn-link{
  color:var(--white);
  font-weight:700;
  font-size:1.0625rem;
  text-decoration:underline;
  text-underline-offset:.4375rem;
  text-decoration-thickness:1px;
}
.btn-link:hover{color:var(--teal);}

/* =========================================================
   HEADER
   ========================================================= */
.site-header{
  background:var(--white);
  border-bottom:1px solid var(--line);
}
.header-inner{
  height:5.625rem;
  display:flex;
  align-items:center;
}
.logo img{
  height:3.25rem;
  width:auto;
  margin-left:.9375rem;
}
.main-nav{margin:0 auto;}
.main-nav ul{
  display:flex;
  align-items:center;
  gap:2.3125rem;
}
.main-nav a{
  font-size:1.125rem;
  color:var(--navy);
  line-height:1;
}
.main-nav a:hover{color:var(--teal-ink);}
.header-cta{
  width:13.4375rem;
  height:3.125rem;
  flex:0 0 auto;
}
.nav-toggle{
  display:none;
  width:2.75rem;
  height:2.75rem;
  margin-left:auto;
  padding:0;
  background:none;
  border:0;
  cursor:pointer;
}
.nav-toggle span{
  display:block;
  width:24px;
  height:2px;
  margin:5px auto;
  background:var(--navy);
  transition:transform .25s ease, opacity .2s ease;
}

/* =========================================================
   HERO
   ========================================================= */
.hero{padding:6.875rem 0 4.75rem;}
.hero-inner{
  display:grid;
  grid-template-columns:1fr 43.5rem;
  gap:4rem;
  align-items:center;
}
.hero-eyebrow{
  font-size:var(--fs-lead);
  line-height:2.1875rem;
  color:var(--blue-eyebrow);
  margin-bottom:1.75rem;
}
.hero h1{
  font-size:var(--fs-h1);
  line-height:1.07;
  font-weight:700;
  letter-spacing:-.015em;
  color:var(--white);
  margin-bottom:1.5rem;
}
.hero-lead{
  font-size:var(--fs-lead);
  line-height:2.1875rem;
  color:var(--on-navy);
  margin-bottom:2.75rem;
}
.hero-actions{
  display:flex;
  align-items:center;
  gap:1.75rem;
}
.hero-actions .btn-primary{
  width:17.625rem;
  height:3.75rem;
}
.hero-trust{
  display:flex;
  align-items:center;
  gap:.625rem;
  margin-top:2.1875rem;
  font-size:1.0625rem;
  color:#9DB4D3;
}
.hero-trust svg{
  width:1.125rem;
  height:1.125rem;
  flex:0 0 auto;
  color:var(--teal);
}
.hero-media img{width:100%;height:auto;}

/* =========================================================
   STATS
   ========================================================= */
.stats{
  background:var(--bg-1);
  border-bottom:1px solid var(--line-2);
  padding:7.4375rem 0;
}
.stats-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
}
.stat{padding:0 2.5rem 0 2.5625rem;}
.stat + .stat{border-left:1px solid var(--line-2);}
.stat-num{
  font-size:4.75rem;
  line-height:1;
  font-weight:700;
  letter-spacing:-.02em;
  color:var(--navy);
}
.stat-num span{font-size:2.25rem;font-weight:700;}
.stat-num .unit{
  font-size:3.25rem;
  color:#8A96A6;
  letter-spacing:0;
}
.stat-label{
  margin-top:1.5rem;
  font-size:var(--fs-body);
  line-height:1.75rem;
  color:var(--body);
  max-width:15rem;
}
.stat .micro{display:block;margin-top:1.375rem;}
.stat .micro-tight{margin-top:.5rem;}

/* =========================================================
   CERTIFICATIONS / CLIENT LOGO BAND
   ========================================================= */
.badges{
  background:var(--bg-2);
  border-bottom:1px solid var(--line-2);
  padding:3.4375rem 0;
}
.badges-inner{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:2.5rem;
}
.badge-row{
  display:flex;
  align-items:center;
  gap:1.375rem;
}
.badge-row + .badge-row{margin-top:.75rem;}
.chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.625rem;
  height:3.1875rem;
  padding:0 1.5rem;
  background:var(--white);
  border:1px solid var(--line);
  font-size:1rem;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--navy);
  white-space:nowrap;
}
.chip-dashed{
  background:transparent;
  border:1px dashed #C3CBD8;
  font-weight:400;
  font-size:1rem;
  letter-spacing:0;
  text-transform:none;
  color:#9AA5B4;
  padding:0 1.25rem;
}
.chip-dot{
  width:1.375rem;
  height:1.375rem;
  border:1px dashed #C3CBD8;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.chip-dot::after{
  content:"";
  width:.375rem;
  height:.375rem;
  border-radius:50%;
  background:#C3CBD8;
}
.badges-right{
  width:44.6875rem;
  max-width:100%;
}
.badges-right .micro{
  display:block;
  text-align:right;
  margin-bottom:1.5rem;
}
.logo-grid{
  display:flex;
  flex-wrap:wrap;
  gap:2.125rem;
  max-width:36.875rem;
}
.chip-ghost{
  width:5.625rem;
  height:2.5rem;
  padding:0;
  font-size:.75rem;
  font-weight:400;
  letter-spacing:.1em;
  color:#A7B0BD;
  border:1px solid var(--line);
  background:var(--white);
}

/* =========================================================
   THE FOUR CALLS
   ========================================================= */
.calls{background:var(--bg-1);padding:10rem 0;}
.calls-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
}
.call{padding:2.5rem 2.5rem 2.75rem 0;}
.call:nth-child(even){
  border-left:1px solid var(--line-2);
  padding:2.5rem 0 2.75rem 2.5rem;
}
.call:nth-child(n+3){border-top:1px solid var(--line-2);}
.call h3{
  font-size:1.75rem;
  line-height:1.35;
  font-weight:700;
  color:var(--navy);
  letter-spacing:-.01em;
  margin-bottom:1rem;
}
.call p{
  font-size:var(--fs-body);
  line-height:2.125rem;
  color:var(--body);
  max-width:32rem;
}

/* =========================================================
   SYSTEMS
   ========================================================= */
.systems{background:var(--bg-2);padding:10rem 0;}
.systems-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:2rem;
}
.sys-card{
  background:var(--white);
  border:1px solid var(--line);
  display:flex;
  flex-direction:column;
}
.sys-card img{
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
}
.sys-body{padding:2rem;display:flex;flex-direction:column;flex:1;}
.sys-head{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:1rem;
}
.sys-head h3{
  font-size:1.375rem;
  line-height:1.4;
  font-weight:700;
  color:var(--navy);
}
.sys-body > p{
  margin-top:1.25rem;
  font-size:var(--fs-sm);
  line-height:1.75rem;
  color:var(--body);
}
.specs{margin-top:1.5rem;}
.specs > div{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  min-height:3.1875rem;
  border-top:1px solid var(--line);
}
.specs dd{
  font-size:var(--fs-sm);
  font-weight:700;
  color:var(--navy);
  text-align:right;
}

/* =========================================================
   INDUSTRIES
   ========================================================= */
.industries{padding:11.25rem 0 10rem;}
.industries h2{color:var(--white);}
.industries .section-intro{color:var(--on-navy);max-width:47rem;}
.ind-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--rule-navy);
}
.ind{
  padding:3rem 2.5625rem 5rem;
}
.ind:first-child{padding-left:0;}
.ind + .ind{border-left:1px solid var(--rule-navy);}
.ind img{width:100%;height:auto;}
.ind h3{
  margin-top:2rem;
  font-size:1.375rem;
  line-height:1.4;
  font-weight:700;
  color:var(--white);
}
.ind p{
  margin-top:1.25rem;
  font-size:var(--fs-sm);
  line-height:1.9375rem;
  color:var(--on-navy-soft);
}

/* =========================================================
   PROCESS
   ========================================================= */
.process{background:var(--bg-1);padding:10rem 0;}
.process-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--line-2);
}
.step{padding:2.5rem 4rem 3rem 0;}
.step:nth-child(n+4){border-top:1px solid var(--line-2);}
.step-head{
  display:flex;
  align-items:baseline;
  gap:1rem;
}
.step-num{
  font-size:3.25rem;
  line-height:1;
  font-weight:700;
  letter-spacing:-.02em;
  color:var(--teal-ink);
}
.step h3{
  font-size:var(--fs-body);
  font-weight:700;
  color:var(--navy);
}
.step p{
  margin-top:1.5rem;
  font-size:var(--fs-body);
  line-height:2.0625rem;
  color:var(--body);
}

/* =========================================================
   PROJECTS
   ========================================================= */
.projects{background:var(--bg-2);padding:10rem 0;}
.projects-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:2rem;
}
.proj-card{
  background:var(--white);
  border:1px solid var(--line);
  display:flex;
  flex-direction:column;
}
.proj-card img{
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
}
.proj-body{padding:2rem;display:flex;flex-direction:column;flex:1;}
.proj-body h3{
  font-size:1.375rem;
  line-height:1.4;
  font-weight:700;
  color:var(--navy);
}
.proj-place{
  margin-top:.75rem;
  font-size:var(--fs-sm);
  line-height:1.75rem;
  color:var(--body);
}
.proj-spec{
  margin-top:1.25rem;
  padding-top:1.125rem;
  border-top:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
}
.proj-value{
  font-size:var(--fs-sm);
  font-weight:700;
  color:var(--navy);
  text-align:right;
}

/* =========================================================
   SERVICE
   ========================================================= */
.service{background:var(--bg-1);padding:10rem 0;}
.service-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:2rem;
  align-items:stretch;
}
.svc-card{
  background:var(--white);
  border:1px solid var(--line);
  display:flex;
  flex-direction:column;
}
.svc-card img{
  width:100%;
  aspect-ratio:491/371;
  object-fit:cover;
}
.svc-body{padding:2rem;flex:1;}
.svc-body .micro{display:block;}
.svc-body h3{
  margin-top:1.5rem;
  font-size:1.5rem;
  line-height:1.4;
  font-weight:700;
  color:var(--navy);
}
.svc-body ul{margin-top:1.75rem;}
.svc-body li{
  position:relative;
  padding:0 0 1.0625rem 1.25rem;
  margin-bottom:1.0625rem;
  border-bottom:1px solid var(--line);
  font-size:var(--fs-body);
  line-height:1.5625rem;
  color:var(--body);
}
.svc-body li::before{
  content:"";
  position:absolute;
  left:0;
  top:.5625rem;
  width:.3125rem;
  height:.3125rem;
  border-radius:50%;
  background:var(--teal);
}
.svc-note{
  margin-top:1.375rem;
  font-size:var(--fs-body);
  font-weight:700;
  color:var(--navy);
}

/* =========================================================
   ENQUIRY
   ========================================================= */
.enquiry{background:var(--bg-1);padding:12.5rem 0;}
.enquiry-inner{
  display:grid;
  grid-template-columns:.85fr 1fr;
  gap:2.5rem;
  align-items:start;
}
.enquiry .section-intro{max-width:none;margin-bottom:2.5rem;}
.ticks li{
  position:relative;
  padding-left:1.25rem;
  margin-bottom:1.375rem;
  font-size:var(--fs-sm);
  line-height:1.5rem;
  color:var(--navy);
}
.ticks li::before{
  content:"";
  position:absolute;
  left:0;
  top:.5rem;
  width:.3125rem;
  height:.3125rem;
  border-radius:50%;
  background:var(--teal);
}

.form-card{
  background:var(--white);
  border:1px solid var(--line);
  padding:2.5rem;
}
.dropzone{
  border:1px dashed #6FC7D4;
  background:#E9F7FA;
  padding:1.75rem;
}
.dz-title{
  display:flex;
  align-items:center;
  gap:.625rem;
  font-size:1.0625rem;
  font-weight:700;
  color:var(--navy);
}
.dz-title svg{width:1.25rem;height:1.25rem;color:var(--teal-ink);}
.dz-help{
  margin-top:.625rem;
  font-size:1rem;
  line-height:1.5rem;
  color:var(--body);
}
.dz-link{
  display:inline-block;
  margin-top:.625rem;
  font-size:.9375rem;
  font-weight:700;
  color:var(--teal-ink);
  cursor:pointer;
}
.dz-link:hover{text-decoration:underline;}
.dropzone input[type=file]{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;border:0;
}
.dz-file{
  margin-top:.625rem;
  font-size:.9375rem;
  color:var(--navy);
  font-weight:700;
}
.dropzone.is-dragover{background:#D8F1F6;}

.field-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1.5rem;
}
.field{margin-top:1.75rem;}
.field label{display:block;margin-bottom:.5rem;}
.field input,
.field textarea{
  width:100%;
  border:1px solid var(--line);
  border-radius:0;
  background:var(--bg-1);
  color:var(--navy);
  font-family:inherit;
  font-size:var(--fs-sm);
}
.field input{height:3.1875rem;padding:0 1rem;}
.field textarea{padding:1rem;line-height:1.625rem;min-height:8rem;resize:vertical;}
.field input::placeholder,
.field textarea::placeholder{color:#9CA2AF;opacity:1;}
.field input:focus,
.field textarea:focus{
  outline:none;
  border-color:var(--teal);
  background:var(--white);
}
.field.has-error input,
.field.has-error textarea{border-color:#D45B5B;}
#enquiry-form .btn-block{margin-top:1.75rem;}
.form-status{
  margin-top:1rem;
  font-size:1rem;
  color:var(--teal-ink);
  min-height:1.25rem;
}
.form-status.is-error{color:#C94B4B;}

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{padding:6.25rem 0 0;}
.footer-top{
  display:grid;
  grid-template-columns:1.5fr 1.1fr 1fr;
  gap:2rem;
}
.footer-logo{
  display:inline-block;
  background:var(--white);
  padding:.5625rem 1.625rem;
}
.footer-logo img{height:2.25rem;width:auto;}
.footer-brand p{
  margin-top:1.625rem;
  max-width:25.5rem;
  font-size:var(--fs-sm);
  line-height:1.8125rem;
  color:var(--on-navy);
}
.footer-col .micro{
  display:block;
  color:rgba(255,255,255,.5);
  margin-bottom:1.75rem;
}
.footer-col li{margin-bottom:1.0625rem;}
.footer-col a{
  font-size:var(--fs-sm);
  color:var(--on-navy);
}
.footer-col a:hover{color:var(--teal);}
.footer-plain li{
  font-size:var(--fs-sm);
  line-height:1.8125rem;
  color:var(--on-navy);
  margin-bottom:1.25rem;
  max-width:24rem;
}
.footer-bottom{
  margin-top:5.5rem;
  border-top:1px solid rgba(255,255,255,.12);
  padding:2.75rem 0 5.75rem;
  display:flex;
  justify-content:space-between;
  gap:1.5rem;
}
.footer-bottom p{font-size:1.0625rem;color:rgba(255,255,255,.7);}
.footer-bottom p:last-child{color:#6E96CE;}

/* =========================================================
   TABLET — 1024px and below
   ========================================================= */
@media (max-width:1024px){
  html{font-size:15px;}
  .container{width:min(100%, 100% - 2.5rem);}

  .hero{padding:4.5rem 0 4rem;}
  .hero-inner{grid-template-columns:1fr;gap:3rem;}
  .hero h1{font-size:3rem;}
  .hero-media{max-width:43.5rem;}

  .stats{padding:4.5rem 0;}
  .stats-grid{grid-template-columns:1fr 1fr;row-gap:3rem;}
  .stat{padding:0 1.5rem;}
  .stat:nth-child(odd){padding-left:0;border-left:0;}
  .stat:nth-child(3){border-top:0;}

  .badges-inner{flex-direction:column;}
  .badges-right{width:100%;}
  .badges-right .micro{text-align:left;}

  .calls,.systems,.process,.projects,.service{padding:5.5rem 0;}
  .enquiry{padding:5.5rem 0;}
  .industries{padding:5.5rem 0;}
  .section-intro{margin-bottom:3.5rem;}

  .systems-grid,.projects-grid,.service-grid{grid-template-columns:1fr 1fr;}

  .ind-grid{grid-template-columns:1fr 1fr;}
  .ind{padding:2.5rem 2rem 3rem;}
  .ind:first-child{padding-left:2rem;}
  .ind + .ind{border-left:0;}
  .ind:nth-child(even){border-left:1px solid var(--rule-navy);}
  .ind:nth-child(n+3){border-top:1px solid var(--rule-navy);}
  .ind:nth-child(odd){padding-left:0;}

  .process-grid{grid-template-columns:1fr 1fr;}
  .step:nth-child(n+3){border-top:1px solid var(--line-2);}
  .step{padding:2rem 2.5rem 2.5rem 0;}

  .enquiry-inner{grid-template-columns:1fr;gap:3rem;}
  .form-card{padding:2rem;}

  .footer-top{grid-template-columns:1fr 1fr;row-gap:3rem;}
  .footer-bottom{margin-top:3.5rem;padding:2rem 0 3rem;}
}

/* =========================================================
   MOBILE — 768px and below
   ========================================================= */
@media (max-width:768px){
  html{font-size:16px;}
  .container{width:min(100%, 100% - 2.5rem);}

  /* header + off-canvas nav */
  .header-inner{height:4.375rem;}
  .logo img{height:1.75rem;margin-left:0;}
  .header-cta{display:none;}
  .nav-toggle{display:block;}
  .nav-toggle.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
  .nav-toggle.is-open span:nth-child(2){opacity:0;}
  .nav-toggle.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

  .main-nav{
    position:absolute;
    left:0;right:0;
    top:4.375rem;
    margin:0;
    background:var(--navy);
    max-height:0;
    overflow:hidden;
    transition:max-height .3s ease;
    z-index:40;
  }
  .main-nav.is-open{max-height:26rem;}
  .main-nav ul{
    flex-direction:column;
    align-items:stretch;
    gap:0;
    padding:.5rem 1.25rem 1.25rem;
  }
  .main-nav li{border-bottom:1px solid rgba(255,255,255,.1);}
  .main-nav li:last-child{border-bottom:0;}
  .main-nav a{
    display:block;
    padding:1rem 0;
    font-size:1.0625rem;
    color:var(--white);
  }
  .site-header{position:relative;}

  /* type scale */
  h2{font-size:1.75rem;margin-bottom:1rem;}
  .section-intro{font-size:1.0625rem;line-height:1.75rem;margin-bottom:2.5rem;}
  .micro{font-size:.75rem;}

  .hero{padding:3rem 0 3.25rem;}
  .hero-inner{gap:2.25rem;}
  .hero-eyebrow{font-size:1rem;line-height:1.5rem;margin-bottom:1rem;}
  .hero h1{font-size:2.125rem;line-height:1.18;margin-bottom:1rem;}
  .hero-lead{font-size:1.0625rem;line-height:1.75rem;margin-bottom:2rem;}
  .hero-actions{flex-direction:column;align-items:stretch;gap:1rem;}
  .hero-actions .btn-primary{width:100%;height:3.25rem;}
  .hero-actions .btn-link{text-align:center;}
  .hero-trust{font-size:.9375rem;align-items:flex-start;margin-top:1.75rem;}
  .hero-trust svg{margin-top:.15rem;}

  .stats{padding:3rem 0;}
  .stats-grid{row-gap:2.25rem;}
  .stat{padding:0 1rem 0 0;}
  .stat + .stat{border-left:0;}
  .stat-num{font-size:2.75rem;}
  .stat-num span{font-size:1.375rem;}
  .stat-num .unit{font-size:2rem;}
  .stat-label{font-size:1rem;line-height:1.5rem;margin-top:.75rem;}
  .stat .micro{margin-top:.75rem;}

  .badges{padding:2.25rem 0;}
  .badge-row{flex-wrap:wrap;gap:.75rem;}
  .chip{height:2.75rem;font-size:.875rem;padding:0 1rem;}
  .logo-grid{gap:.75rem;}
  .badges-right{margin-top:2rem;}

  .calls,.systems,.process,.projects,.service,.industries,.enquiry{padding:3.5rem 0;}

  .calls-grid{grid-template-columns:1fr;}
  .call,.call:nth-child(even){
    padding:1.75rem 0;
    border-left:0;
  }
  .call:nth-child(n+2){border-top:1px solid var(--line-2);}
  .call h3{font-size:1.25rem;margin-bottom:.75rem;}
  .call p{font-size:1rem;line-height:1.625rem;}

  .systems-grid,.projects-grid,.service-grid{grid-template-columns:1fr;gap:1.25rem;}
  .sys-body,.proj-body,.svc-body{padding:1.5rem;}
  .sys-head h3,.proj-body h3{font-size:1.25rem;}
  .sys-body > p,.proj-place{font-size:1rem;line-height:1.625rem;}
  .specs dd,.proj-value{font-size:1rem;}

  .ind-grid{grid-template-columns:1fr;}
  .ind,.ind:first-child,.ind:nth-child(odd){padding:2rem 0 2rem;border-left:0;}
  .ind:nth-child(even){border-left:0;}
  .ind:nth-child(n+2){border-top:1px solid var(--rule-navy);}
  .ind h3{margin-top:1.25rem;font-size:1.25rem;}
  .ind p{font-size:1rem;line-height:1.625rem;margin-top:.75rem;}
  .industries h2 br{display:none;}

  .process-grid{grid-template-columns:1fr;}
  .step{padding:1.75rem 0;}
  .step:nth-child(n+2){border-top:1px solid var(--line-2);}
  .step-num{font-size:2.25rem;}
  .step h3{font-size:1.0625rem;}
  .step p{font-size:1rem;line-height:1.625rem;margin-top:.875rem;}

  .svc-body h3{font-size:1.25rem;margin-top:1rem;}
  .svc-body li,.svc-note{font-size:1rem;}
  .ticks li{font-size:1rem;}

  .form-card{padding:1.25rem;}
  .dropzone{padding:1.25rem;}
  .field-row{grid-template-columns:1fr;gap:0;}
  .field{margin-top:1.25rem;}
  .field input{height:2.875rem;font-size:1rem;}
  .field textarea{font-size:1rem;}
  .btn-block{height:3.25rem;font-size:1rem;}

  .site-footer{padding:3rem 0 0;}
  .footer-top{grid-template-columns:1fr;row-gap:2.25rem;}
  .footer-brand p{font-size:1rem;line-height:1.625rem;}
  .footer-col a,.footer-plain li{font-size:1rem;}
  .footer-col li,.footer-plain li{margin-bottom:.75rem;}
  .footer-bottom{
    flex-direction:column;
    gap:.75rem;
    margin-top:2.5rem;
    padding:1.5rem 0 2.5rem;
  }
  .footer-bottom p{font-size:.9375rem;}
}

/* =========================================================
   SMALL MOBILE — 480px and below
   ========================================================= */
@media (max-width:480px){
  .container{width:min(100%, 100% - 2rem);}
  .hero h1{font-size:1.875rem;}
  h2{font-size:1.5rem;}
  .stats-grid{grid-template-columns:1fr;}
  .stat-label{max-width:none;}
  .chip-ghost{width:4.75rem;}
  .specs > div{
    flex-direction:column;
    align-items:flex-start;
    gap:.25rem;
    padding:.875rem 0;
    min-height:0;
  }
  .specs dd,.proj-value{text-align:left;}
  .proj-spec{flex-direction:column;align-items:flex-start;gap:.25rem;}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none !important;scroll-behavior:auto !important;}
}

/* =========================================================
   SCROLL LAYER — sticky header, sticky section nav,
   moving active underline, hero hotspot pulse.
   No layout, colour, type or spacing changes.
   ========================================================= */

:root{
  --header-h:5.625rem;   /* matches .header-inner height */
  --subnav-h:3.5rem;     /* matches .section-nav ul height */
}

/* ---------- 1. fixed main header ---------- */
.site-header{
  position:sticky;
  top:0;
  z-index:60;
}

/* ---------- 2-3. section nav, pinned under the header ---------- */
/* .sticky-scope holds the nav and the tracked sections, so the nav
   releases at the end of Service and never reaches the form or footer */
.sticky-scope{position:relative;}

.section-nav{
  position:sticky;
  top:var(--header-h);
  z-index:50;
  background:var(--white);
  border-bottom:1px solid var(--line);
}
.section-nav ul{
  position:relative;
  display:flex;
  align-items:center;
  gap:2.3125rem;
  height:var(--subnav-h);
  margin:0;
  overflow-x:auto;
  overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.section-nav ul::-webkit-scrollbar{display:none;}
.section-nav a{
  display:block;
  padding:.4375rem 0;
  font-size:1.0625rem;
  line-height:1;
  color:var(--body);
  white-space:nowrap;
  transition:color .3s ease;
}
.section-nav a:hover{color:var(--navy);}
.section-nav a.is-active{color:var(--teal);}

/* ---------- 5. one underline that travels between items ---------- */
.nav-underline{
  position:absolute;
  left:0;
  bottom:0;
  width:0;
  height:2px;
  background:var(--teal);
  opacity:0;
  transform:translateX(0);
  transition:transform .3s ease, width .3s ease, opacity .3s ease;
  pointer-events:none;
}
.nav-underline.is-on{opacity:1;}

/* anchor landing offset for native jumps / no-JS */
main section[id]{scroll-margin-top:calc(var(--header-h) + var(--subnav-h) + 1.5rem);}

/* ---------- 21. hero callout dots: subtle pulse only ---------- */
.hero-shot{position:relative;}
.hotspot{
  position:absolute;
  width:1.44%;
  aspect-ratio:1;
  transform:translate(-50%,-50%);
  border-radius:50%;
  pointer-events:none;
}
.hotspot::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  animation:hotspot-pulse 2.8s ease-out infinite;
}
.hotspot:nth-child(3)::after{animation-delay:.7s;}
.hotspot:nth-child(4)::after{animation-delay:1.4s;}
.hotspot:nth-child(5)::after{animation-delay:2.1s;}
@keyframes hotspot-pulse{
  0%   {box-shadow:0 0 0 0 rgba(34,211,238,.45);}
  70%  {box-shadow:0 0 0 .625rem rgba(34,211,238,0);}
  100% {box-shadow:0 0 0 0 rgba(34,211,238,0);}
}

@media (max-width:1024px){
  :root{--subnav-h:3.25rem;}
  .section-nav ul{gap:1.75rem;}
}

@media (max-width:768px){
  :root{--header-h:4.375rem;--subnav-h:3rem;}
  .section-nav ul{gap:1.5rem;}
  .section-nav a{font-size:1rem;}
}

/* ---------- accessibility ---------- */
@media (prefers-reduced-motion:reduce){
  .hotspot::after{animation:none !important;}
  .nav-underline{transition:none !important;}
}

/* =========================================================
   INTERACTION LAYER — scroll reveal + hover micro-states
   Static appearance is unchanged; everything here is a
   transition triggered by scroll, hover, focus or drag.
   ========================================================= */

/* ---------- 2. scroll reveal (fade + slide up) ---------- */
.js-anim .reveal{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .6s cubic-bezier(.16,1,.3,1),
             transform .6s cubic-bezier(.16,1,.3,1);
}
.js-anim .reveal.is-in{
  opacity:1;
  transform:translateY(0);
}

/* ---------- 1. header micro-states ---------- */
.main-nav a{transition:color .2s ease;}
.btn{transition:background-color .2s ease, color .2s ease,
                transform .2s ease, box-shadow .2s ease;}
.header-cta:hover{transform:scale(1.02);}
.btn:active{transform:scale(.99);}

/* ---------- 3A. hero ---------- */
.hero-actions .btn-primary:hover{transform:translateY(-2px);}
.hero-actions .btn-link{transition:color .25s ease;}

/* ---------- 3C. logo band (works once real logos are dropped in) ---------- */
.badges img{
  filter:grayscale(100%);
  opacity:.6;
  transition:filter .3s ease, opacity .3s ease;
}
.badges img:hover{filter:grayscale(0);opacity:1;}
.chip-ghost,.chip{transition:border-color .3s ease, color .3s ease;}
.chip-ghost:hover{border-color:#C6CFDB;color:var(--body);}

/* ---------- 3D. problem cards ---------- */
.call{
  transition:transform .3s ease, box-shadow .3s ease;
}
.call:hover{
  transform:translateY(-3px);
  box-shadow:0 10px 25px -5px rgba(0,0,0,.05);
}
.call h3{transition:color .25s ease;}
.call:hover h3{color:var(--teal-ink);}

/* ---------- 3E/3H. image cards ---------- */
.sys-card picture,
.proj-card picture,
.svc-card picture,
.ind picture{
  display:block;
  overflow:hidden;
}
.sys-card img,
.proj-card img,
.svc-card img{transition:transform .4s ease;}
.sys-card:hover img,
.proj-card:hover img,
.svc-card:hover img{transform:scale(1.04);}

.sys-card,.proj-card,.svc-card{
  transition:box-shadow .3s ease, transform .3s ease;
}
.sys-card:hover,
.proj-card:hover,
.svc-card:hover{
  box-shadow:0 10px 25px -5px rgba(11,37,69,.10);
}

/* ---------- 3F. industries ---------- */
.ind img{transition:filter .4s ease, box-shadow .3s ease;}
.ind:hover img{
  filter:brightness(1.05);
  box-shadow:0 0 0 1px rgba(0,196,204,.4);
}

/* ---------- 3I. form ---------- */
.dz-title{transition:transform .25s ease;}
.dropzone{transition:background-color .25s ease, border-color .25s ease;}
.dropzone.is-dragover{
  background:#D8F1F6;
  border-style:solid;
  border-color:var(--teal);
}
.dropzone.is-dragover .dz-title{transform:scale(1.02);}
.field input,
.field textarea{transition:border-color .2s ease, box-shadow .2s ease, background-color .2s ease;}
.field input:focus,
.field textarea:focus{box-shadow:0 0 0 2px rgba(0,178,201,.2);}

/* ---------- 3J. footer ---------- */
.footer-col a{transition:color .2s ease;}

/* ---------- accessibility ---------- */
@media (prefers-reduced-motion:reduce){
  .js-anim .reveal,
  .js-anim .reveal.is-in{
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
  }
  .header-cta:hover,
  .hero-actions .btn-primary:hover,
  .call:hover,
  .sys-card:hover img,
  .proj-card:hover img,
  .svc-card:hover img,
  .btn:active{transform:none !important;}
}

/* =========================================================
   INNER PAGES — systems / industries / projects / service / about
   Built on the same tokens as the home page.
   ========================================================= */

/* ---------- page hero ---------- */
.page-hero{padding:6.8125rem 0 7rem;}
.breadcrumb{
  display:flex;
  align-items:center;
  gap:.625rem;
  font-size:1rem;
  color:rgba(255,255,255,.6);
  margin-bottom:3.25rem;
}
.breadcrumb a{color:rgba(255,255,255,.85);transition:color .2s ease;}
.breadcrumb a:hover{color:var(--teal);}
.page-eyebrow{
  display:block;
  color:#2FB6C9;
  margin-bottom:1.5rem;
}
.page-hero h1{
  font-size:var(--fs-h1);
  line-height:1.07;
  font-weight:700;
  letter-spacing:-.015em;
  color:var(--white);
  max-width:58rem;
}
.page-lead{
  margin-top:1.75rem;
  max-width:55rem;
  font-size:var(--fs-lead);
  line-height:2.1875rem;
  color:var(--on-navy);
}

/* ---------- generic inner section ---------- */
.section-pad{padding:8.75rem 0;}
.bg-1{background:var(--bg-1);}
.bg-2{background:var(--bg-2);}

/* ---------- systems page ---------- */
.card-link{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  margin-top:1.5rem;
  font-size:var(--fs-sm);
  font-weight:700;
  color:var(--teal-ink);
  transition:gap .2s ease, color .2s ease;
}
.card-link svg{width:1rem;height:1rem;}
.card-link:hover{gap:.875rem;}

.seq-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:2rem;
  margin-top:5rem;
  padding-top:2.75rem;
  border-top:1px solid var(--line-2);
}
.seq-grid .micro{display:block;color:var(--teal-ink);margin-bottom:1.25rem;}
.seq-grid p{
  font-size:var(--fs-sm);
  line-height:1.875rem;
  color:var(--body);
  max-width:24rem;
}
.section-cta{margin-top:3.5rem;}
.section-cta .btn{height:3.5rem;}

/* ---------- industries page ---------- */
.ind-rows{border-top:1px solid var(--line-2);}
.ind-row{
  display:grid;
  grid-template-columns:1.15fr 1fr;
  gap:5rem;
  align-items:center;
  padding:4.5rem 0;
  border-bottom:1px solid var(--line-2);
}
.ind-row:nth-child(even) .ind-row-media{order:2;}
.ind-row img{width:100%;height:auto;}
.ind-row h3{
  font-size:2rem;
  line-height:1.25;
  font-weight:700;
  color:var(--navy);
  margin:1rem 0 1.25rem;
}
.ind-row p{font-size:var(--fs-body);line-height:2.0625rem;color:var(--body);}
.ind-row .micro{color:var(--teal-ink);}
.ind-points{margin-top:1.75rem;}
.ind-points li{
  position:relative;
  padding:0 0 1rem 1.25rem;
  margin-bottom:1rem;
  border-bottom:1px solid var(--line);
  font-size:var(--fs-sm);
  color:var(--body);
}
.ind-points li::before{
  content:"";
  position:absolute;left:0;top:.5625rem;
  width:.3125rem;height:.3125rem;border-radius:50%;
  background:var(--teal);
}

/* ---------- projects page ---------- */
.project-entry{
  display:grid;
  grid-template-columns:1.15fr 1fr;
  gap:5rem;
  align-items:start;
  border-top:1px solid var(--line-2);
  padding:3.75rem 0 5.5rem;
}
.project-entry:nth-child(even) .entry-media{order:2;}
.entry-media img{width:100%;height:auto;}
.entry-specs{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1rem;
  margin-top:1.75rem;
  padding:1.25rem 0;
  border-top:1px solid var(--line-2);
  border-bottom:1px solid var(--line-2);
}
.entry-specs .micro{display:block;margin-bottom:.5rem;}
.entry-specs b{font-size:var(--fs-sm);font-weight:700;color:var(--navy);}
.entry-body .micro{display:block;color:var(--teal-ink);margin-bottom:1rem;}
.entry-body h2{font-size:2.125rem;margin-bottom:.875rem;}
.entry-meta{
  font-size:var(--fs-sm);
  color:var(--body);
  padding-bottom:1.75rem;
}
.entry-block{
  border-top:1px solid var(--line-2);
  padding:1.5rem 0 1.75rem;
}
.entry-block .micro{color:var(--body);margin-bottom:.75rem;}
.entry-block p{font-size:var(--fs-sm);line-height:1.875rem;color:var(--body);}

.numbers .stats-grid{margin-top:3.5rem;}
.numbers .stat{padding:0 2.5rem 0 2.5625rem;}
.numbers .stat:first-child{padding-left:0;}

/* ---------- service page ---------- */
.svc-card .svc-sub{
  margin-top:1.25rem;
  font-size:var(--fs-sm);
  line-height:1.75rem;
  color:var(--body);
}
.plans-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:2rem;
  margin-top:5rem;
  align-items:stretch;
}
.plan-card{
  background:var(--white);
  border:1px solid var(--line);
  padding:2rem;
  display:flex;
  flex-direction:column;
}
.plan-card--featured{border:1px solid var(--teal);}
.plan-badge{
  display:inline-block;
  background:#E3F6F9;
  color:var(--teal-ink);
  padding:.4375rem .75rem;
  margin-bottom:1.25rem;
}
.plan-card h3{
  font-size:1.5rem;
  line-height:1.35;
  font-weight:700;
  color:var(--navy);
}
.plan-card > p{
  margin-top:1.125rem;
  font-size:var(--fs-sm);
  line-height:1.75rem;
  color:var(--body);
}
.checks{margin-top:auto;padding-top:2.5rem;}
.checks li{
  display:flex;
  align-items:flex-start;
  gap:.75rem;
  padding-bottom:1rem;
  margin-bottom:1rem;
  border-bottom:1px solid var(--line);
  font-size:var(--fs-sm);
  color:var(--navy);
}
.checks li:last-child{border-bottom:0;margin-bottom:0;}
.checks svg{width:1rem;height:1rem;color:var(--teal-ink);flex:0 0 auto;margin-top:.25rem;}

.call-steps{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--rule-navy);
  margin-top:4.5rem;
}
.call-step{padding:2.25rem 2.5rem 2.5rem;}
.call-step:first-child{padding-left:0;}
.call-step + .call-step{border-left:1px solid var(--rule-navy);}
.call-step .step-num{color:#2FB6C9;display:block;}
.call-step h3{
  margin-top:1.125rem;
  font-size:var(--fs-body);
  font-weight:700;
  color:var(--white);
}
.call-step p{
  margin-top:1.125rem;
  font-size:var(--fs-sm);
  line-height:1.875rem;
  color:var(--on-navy-soft);
}
.call-note{
  margin-top:3.5rem;
  max-width:46rem;
  font-size:1.5rem;
  line-height:2.25rem;
  font-weight:700;
  color:var(--white);
}

/* ---------- about page ---------- */
.about-grid{
  display:grid;
  grid-template-columns:1fr 1.1fr;
  gap:5rem;
  align-items:center;
}
.about-grid img{width:100%;height:auto;}
.about-body .micro{display:block;margin-bottom:1.25rem;}
.about-body h2{font-size:2.5rem;}
.about-body p{
  margin-top:1.5rem;
  font-size:var(--fs-body);
  line-height:2.0625rem;
  color:var(--body);
}
.fact-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0 2.75rem;
  margin-top:3rem;
}
.fact{
  padding:1.25rem 0;
  border-top:1px solid var(--line-2);
}
.fact:last-child,.fact:nth-last-child(2){border-bottom:1px solid var(--line-2);}
.fact .micro{display:block;margin-bottom:.5rem;}
.fact b{font-size:var(--fs-sm);font-weight:700;color:var(--navy);}

.partner-box{
  display:grid;
  grid-template-columns:1.6fr 1fr;
  gap:3rem;
  align-items:center;
  border:1px solid var(--rule-navy);
  padding:2.5rem 3rem;
}
.partner-head{display:flex;align-items:center;gap:1.75rem;}
.partner-icon{
  width:3rem;height:3rem;
  flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--rule-navy);
  color:var(--teal);
}
.partner-icon svg{width:1.375rem;height:1.375rem;}
.partner-head .micro{display:block;color:rgba(255,255,255,.55);margin-bottom:.5rem;}
.partner-head h2{
  font-size:1.375rem;
  line-height:1.5;
  color:var(--white);
  margin:0;
}
.partner-box p{font-size:var(--fs-sm);line-height:1.75rem;color:var(--on-navy-soft);}

.cta-box{
  background:var(--white);
  border:1px solid var(--line);
  padding:2.75rem 3rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:2.5rem;
}
.cta-box h2{font-size:1.75rem;margin-bottom:.75rem;}
.cta-box p{font-size:var(--fs-sm);line-height:1.75rem;color:var(--body);}
.cta-box .btn{height:3.25rem;flex:0 0 auto;}

/* ---------- inner-page footer (4 columns) ---------- */
.footer-top--4{grid-template-columns:1.42fr 1fr 1fr 1.03fr;}
.footer-col .footer-cta{margin-top:1.75rem;height:3.125rem;width:13.4375rem;}

/* ---------- responsive ---------- */
@media (max-width:1024px){
  .page-hero{padding:4rem 0 4.5rem;}
  .breadcrumb{margin-bottom:2rem;}
  .page-hero h1{font-size:3rem;}
  .section-pad{padding:5rem 0;}
  .seq-grid{grid-template-columns:1fr 1fr;row-gap:2.5rem;}
  .project-entry,.ind-row,.about-grid{grid-template-columns:1fr;gap:2.5rem;}
  .project-entry:nth-child(even) .entry-media,
  .ind-row:nth-child(even) .ind-row-media{order:0;}
  .plans-grid{grid-template-columns:1fr;}
  .call-steps{grid-template-columns:1fr 1fr;}
  .call-step{padding:2rem;}
  .call-step:first-child{padding-left:2rem;}
  .call-step:nth-child(odd){padding-left:0;border-left:0;}
  .call-step:nth-child(n+3){border-top:1px solid var(--rule-navy);}
  .partner-box{grid-template-columns:1fr;gap:1.75rem;padding:2rem;}
  .cta-box{flex-direction:column;align-items:flex-start;padding:2rem;}
  .footer-top--4{grid-template-columns:1fr 1fr;}
  .numbers .stat:nth-child(odd){padding-left:0;}
}

@media (max-width:768px){
  .page-hero{padding:2.5rem 0 3rem;}
  .page-hero h1{font-size:2.125rem;line-height:1.18;}
  .page-lead{font-size:1.0625rem;line-height:1.75rem;margin-top:1.25rem;}
  .breadcrumb{font-size:.9375rem;margin-bottom:1.5rem;}
  .section-pad{padding:3.5rem 0;}
  .seq-grid{grid-template-columns:1fr;margin-top:2.5rem;}
  .seq-grid p,.ind-row p,.entry-block p,.plan-card > p,.call-step p{font-size:1rem;line-height:1.625rem;}
  .project-entry{padding:2rem 0 2.5rem;gap:1.75rem;}
  .entry-body h2,.ind-row h3{font-size:1.5rem;}
  .entry-specs{grid-template-columns:1fr;gap:.75rem;}
  .call-steps{grid-template-columns:1fr;margin-top:2.5rem;}
  .call-step,.call-step:first-child{padding:1.75rem 0;border-left:0;}
  .call-step:nth-child(n+2){border-top:1px solid var(--rule-navy);}
  .call-note{font-size:1.25rem;line-height:1.875rem;margin-top:2.25rem;}
  .about-body h2{font-size:1.75rem;}
  .fact-grid{grid-template-columns:1fr;margin-top:2rem;}
  .fact:nth-last-child(2){border-bottom:0;}
  .cta-box h2{font-size:1.375rem;}
  .plans-grid{margin-top:2.5rem;}
  .footer-top--4{grid-template-columns:1fr;}
  .numbers .stat{padding:0;}
}

/* active item in the primary nav on inner pages */
.main-nav a.is-active{color:var(--teal-ink);}

/* =========================================================
   CLIENT LOGO MARQUEE — added feature (auto-scrolling logos
   inside the existing Certifications / Client Logo band).
   New rules only — nothing above this block was changed.
   Plain logos, full colour, no card/border — continuous loop.
   ========================================================= */
.logo-marquee{
  overflow:hidden;
  width:100%;
}
.logo-marquee-track{
  display:flex;
  flex-wrap:nowrap;
  align-items:center;
  gap:4rem;
  width:max-content;
  will-change:transform;
  animation:logo-marquee-scroll 28s linear infinite;
}
.logo-marquee-group{
  display:flex;
  flex-wrap:nowrap;
  align-items:center;
  gap:4rem;
  flex:0 0 auto;
}
.logo-item{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  height:56px;
}
.logo-item img{
  display:block;
  height:100%;
  width:auto;
  max-width:180px;
  object-fit:contain;
  /* full colour, always — overrides the site's default
     ".badges img" grayscale/dim treatment for this band only */
  filter:none !important;
  opacity:1 !important;
}
/* slmg-beverages.png is a white-on-transparent asset; render it dark
   so it reads on the light logo band, matching the other logos. */
.logo-item img.logo-invert{
  filter:brightness(0) !important;
  opacity:.88 !important;
}

@keyframes logo-marquee-scroll{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}

@media (max-width:768px){
  .logo-marquee-track{gap:2.25rem;}
  .logo-marquee-group{gap:2.25rem;}
  .logo-item{height:40px;}
  .logo-item img{max-width:130px;}
}

@media (prefers-reduced-motion:reduce){
  .logo-marquee-track{animation:none;}
  .logo-marquee{overflow-x:auto;}
}