/* ==========================================================================
   Tritium Engineering
   Reproduces the original site's tokens, type scale, grid and spacing.

   TYPE      Rubik (headings/nav) · Droid Sans (body) · Oxygen (buttons)
   BASE      h1 60 · h2/h3 40 · h4 30 · h5 23 · h6 16 · body 15
   SCALE     >=1921px  h1 x1.2  h2-h6 x1.1
             <=1366px  h1 x.9   h2-h4 x.95  h5 x.9
             <=1024px  h1 x.8   h2-h5 x.85  h6 x.9
             <=767px   h1 x.6   h2-h4 x.65  h5 x.75  h6 x.85
   ========================================================================== */

:root{
  --brand:      #17728D;
  --brand-dark: #135C71;
  --text:       #323B44;
  --text-alt:   #FFFFFF;
  --grey:       #EEEEEE;
  --white:      #FFFFFF;

  --hdr-bg:     #CCCCCC;
  --hero-home:  #191F24;
  --hero-page:  #323B44;
  --card-bg:    #191F26;
  --strip-bg:   #474755;
  --footer-bg:  #121212;

  --display: 'Rubik', sans-serif;
  --body:    'Droid Sans', 'Noto Sans', sans-serif;
  --btn:     'Oxygen', sans-serif;

  /* base scale — 1367px to 1920px */
  --h1: 60px; --h2: 40px; --h3: 40px;
  --h4: 30px; --h5: 23px; --h6: 16px;
  --tx: 15px;

  --maxw: 1440px;   /* original: .s-wrapper max-width 1440px           */
  --pad:  30px;     /* original: s-wrapper 15px + row__item 15px        */
  --gut:  24px;              /* grid gutter */
}

@media (min-width:1921px){
  :root{ --h1:72px; --h2:44px; --h3:44px; --h4:33px; --h5:25.3px; --h6:17.6px }
}
@media (max-width:1366px){
  :root{ --h1:54px; --h2:38px; --h3:38px; --h4:28.5px; --h5:20.7px; --h6:16px }
}
@media (max-width:1024px){
  :root{ --h1:48px; --h2:34px; --h3:34px; --h4:25.5px; --h5:19.6px; --h6:14.4px }
}
@media (max-width:767px){
  :root{ --h1:36px; --h2:26px; --h3:26px; --h4:19.5px; --h5:17.3px; --h6:13.6px;
         --tx:16px }
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--body);
  font-size:var(--tx);
  line-height:1.6;
  color:var(--text);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--brand);outline-offset:3px}
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad)}

/* --------------------------------------------------------------- headings */
h1,h2,h3,h4,h5,h6{font-family:var(--display)}
h1{font-size:var(--h1); font-weight:700; line-height:1}
h2{font-size:var(--h2); font-weight:700; line-height:1}
h3{font-size:var(--h3); font-weight:700; line-height:1.4}
h4{font-size:var(--h4); font-weight:500; line-height:1.2}
h5{font-size:var(--h5); font-weight:500; line-height:1.4}
h6{font-size:var(--h6); font-weight:500; line-height:1.4}

/* ---------------------------------------------------------------- buttons
   Original had a circular glyph before the label. Rebuilt as an inline SVG
   so it scales and animates.                                                */
.btn{
  font-family:var(--btn);
  font-size:18px; font-weight:700;
  text-transform:uppercase; letter-spacing:.04em;
  display:inline-flex; align-items:center; gap:12px;
  padding:15px 40px;
  border:0; border-radius:64px;
  background:var(--brand); color:var(--white);
  cursor:pointer;
  box-shadow:0 4px 14px rgba(19,92,113,.28);
  transition:background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.btn:hover{
  background:var(--brand-dark);
  transform:translateY(-2px);
  box-shadow:0 8px 22px rgba(19,92,113,.38);
}
.btn:active{transform:translateY(0); box-shadow:0 3px 10px rgba(19,92,113,.30)}

.btn svg{
  width:22px; height:22px; flex:none;
  fill:none; stroke:currentColor; stroke-width:1.6;
  transition:transform .25s ease;
}
.btn:hover svg{transform:translateX(3px)}

.btn--square{border-radius:0}

/* ----------------------------------------------------------------- header */
.hdr{background:var(--hdr-bg); position:sticky; top:0; z-index:100}
.hdr__in{display:flex; align-items:center; justify-content:space-between;
         gap:2rem; height:90px}
.hdr__logo img{width:257px; height:auto}

.nav{display:flex; align-items:center}
.nav a{
  font-family:var(--display);
  font-size:15px; font-weight:500;
  text-transform:uppercase;
  line-height:38px; padding:0 15px;
  color:var(--text); white-space:nowrap;
}
.nav a:hover,.nav a.on{color:var(--brand)}
.burger{display:none; background:none; border:0; cursor:pointer;
        font-size:1.6rem; line-height:1; color:var(--text); padding:.3rem}

/* --------------------------------------------------------------- sections
   Padding values are the originals (data-style paddingTop/Bottom).          */
.s{padding-block:var(--sp, 20px)}
.s--grey {background:var(--grey)}
.s--white{background:var(--white)}

/* ------------------------------------------------------------------- hero
   Flat colour + photo at a fixed opacity. No gradient.                      */
.hero{position:relative; display:flex; align-items:center; overflow:hidden}
.hero__bg{position:absolute; inset:0; background-size:cover; background-position:center}
.hero__in{position:relative; z-index:2; width:100%}
.hero h1{color:var(--text-alt)}

.hero--home{background:var(--hero-home)}
.hero--home .hero__bg{opacity:.70}
.hero--home .hero__in{padding-block:33px}
.hero--home h1{max-width:50%}          /* original: 6 of 12 columns */
.hero--home .gap{display:block; height:var(--h1)}   /* the blank line */

.hero--page{background:var(--hero-page)}
.hero--page .hero__bg{opacity:.50}
.hero--page.op60 .hero__bg{opacity:.60}
.hero--page .hero__in{padding-block:96px}

/* ------------------------------------------------------------- quote band */
.quote{background:var(--white); padding-block:20px}
.quote h4{color:var(--brand-dark); font-weight:500}

/* ----------------------------------------------- section head (8 | 4 split)
   Original: h2 on the left, teal sub-lines on the right. Not centred.       */
.shead{
  display:grid; grid-template-columns:2fr 1fr;
  gap:var(--gut); align-items:end;
  padding-block:20px;
}
.shead h2{font-size:calc(var(--h2) * 1.15)}          /* nudged up */
.shead__sub h6{color:var(--brand); font-weight:500;
               font-size:calc(var(--h6) * 1.15)}     /* nudged up */

/* -------------------------------------------- home: featured cards (2 x 2) */
.cards{display:grid; grid-template-columns:1fr 1fr; gap:20px}
.card{
  position:relative; min-height:300px;
  display:flex; align-items:center;
  padding:30px;
  background:var(--card-bg); overflow:hidden;
}
.card__bg{position:absolute; inset:0; background-size:cover;
          background-position:center; transition:transform .45s ease}
.card:hover .card__bg{transform:scale(1.04)}
.card h4{position:relative; z-index:2; color:var(--text-alt);
         text-transform:uppercase; line-height:1.05}

/* ---------------------------------------------- home: service tiles (4 x 2) */
.tiles{display:grid; grid-template-columns:repeat(4,1fr); gap:44px var(--gut)}
.tile{text-align:center}
.tile__icon{width:76px; height:76px; margin:0 auto 16px; object-fit:contain}
.tile h5{margin-bottom:8px}

.cta-row{text-align:center; padding-block:28px}

/* -------------------------------------------------- memberships (4 across) */
.members{display:grid; grid-template-columns:repeat(4,1fr);
         gap:var(--gut); align-items:center; margin-top:30px;
         padding-bottom:30px}
.members img{max-height:78px; width:auto; margin:0 auto}

/* --------------------------------------- industries: photo + caption (3/row) */
.sectors{display:grid; grid-template-columns:repeat(3,1fr); gap:34px var(--gut)}
.sector figure{margin:0; overflow:hidden}
.sector img{width:100%; height:250px; object-fit:cover; transition:transform .35s ease}
.sector:hover img{transform:scale(1.03)}
.sector figcaption{text-align:center; padding-top:14px}

/* --------------------------------- services: text LEFT, photo RIGHT, always */
.svc{display:grid; grid-template-columns:5fr 6fr; gap:calc(var(--gut) * 2);
     align-items:center}
.svc__media img{width:100%; max-height:400px; object-fit:cover}
/* for small or near-square source images: show whole, don't crop */
.svc__media--natural img{
  width:auto; max-width:100%; height:auto;
  max-height:400px; object-fit:contain; margin:0 auto;
}
.svc h3{margin-bottom:14px; color:var(--brand)}
.svc p{margin-bottom:12px}

/* ---------------------------------------------------------- company blocks */
.narrow{max-width:66.66%; margin:0 auto}      /* original: 8 of 12 columns */
.prose h4{color:var(--brand); margin:28px 0 10px}
.prose h4:first-child{margin-top:0}
.prose p{margin-bottom:14px}

.split{display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:center}
.split--flip .split__media{order:2}
.split__media img{width:100%; max-height:360px; object-fit:cover}
.split h3{margin-bottom:14px; color:var(--brand)}

.bullets{list-style:none; margin-top:6px}
.bullets li{position:relative; padding-left:20px; margin-bottom:6px; line-height:1.6}
.bullets li::before{content:""; position:absolute; left:0; top:.6em;
                    width:8px; height:8px; background:var(--brand)}

/* ---------------------------------------------------------------- vendors
   The source logos have mismatched backgrounds (some transparent, one white,
   Schneider's has its brand green baked in). Uniform cards normalise them.  */
.vendors{display:grid; grid-template-columns:repeat(6,1fr);
         gap:20px; margin-top:26px}
.vendor{
  background:var(--white);
  border:1px solid #E1E5E7;
  min-height:100px;
  padding:18px 16px;
  display:flex; align-items:center; justify-content:center;
  transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.vendor:hover{
  border-color:var(--brand);
  box-shadow:0 6px 18px rgba(19,92,113,.12);
  transform:translateY(-2px);
}
.vendor img{max-height:52px; max-width:100%; width:auto; height:auto}

/* automation platforms — plain white section */
.plat-sec h4{color:var(--brand)}

/* Four blocks: PLCs | HMI & SCADA  /  Robotics | Safety Controllers */
.platforms{display:grid; grid-template-columns:1fr; gap:34px var(--gut)}
.platforms h4{margin-bottom:10px}
@media (min-width:701px){
  .platforms{grid-template-columns:repeat(2,1fr)}
}

/* ---------------------------------------------------------- contact strip */
.strip{position:relative; background:var(--strip-bg);
       padding-block:50px; text-align:center; overflow:hidden}
.strip--black{background:#000}
.strip__bg{position:absolute; inset:0; background-size:cover;
           background-position:center; opacity:.70}
.strip--black .strip__bg{opacity:.60}
.strip__in{position:relative; z-index:2}
.strip h4{color:var(--text-alt); font-weight:500; line-height:1.7}
.strip a{color:var(--text-alt)}
.strip a:hover{color:var(--brand)}

/* ------------------------------------------------------------------- form */
.form-grid{display:grid; grid-template-columns:1fr 2fr; gap:52px}
.field{margin-bottom:16px}
.field label{display:block; font-family:var(--display);
             font-size:13px; font-weight:500;
             text-transform:uppercase; letter-spacing:.05em; margin-bottom:5px}
.field input,.field textarea{
  width:100%; padding:12px 14px;
  border:1px solid #C6CACD; border-radius:0;
  font-family:var(--body); font-size:var(--tx); color:var(--text);
  background:var(--white);
}
.field input:focus,.field textarea:focus{border-color:var(--brand); outline:none}
.field textarea{min-height:150px; resize:vertical}
.note{font-size:14px; color:#6B767E; margin-top:12px}
.note--error{color:#B4232A; padding-left:10px; border-left:2px solid #B4232A}

.sent{border:1px solid #C6CACD; border-left:4px solid var(--brand);
      background:var(--grey); padding:26px 24px}
.sent h5{color:var(--brand); margin-bottom:8px}

.info-row{border-bottom:1px solid #DDE0E2; padding:15px 0;
          display:flex; justify-content:space-between; gap:1rem; align-items:baseline}
.info-row .k{font-family:var(--display); font-size:13px; font-weight:500;
             text-transform:uppercase; letter-spacing:.05em; color:#6B767E}
.info-row .v{font-family:var(--display); font-size:16px; font-weight:500}
.info-row a:hover{color:var(--brand)}

/* ----------------------------------------------------------------- footer */
.ftr{background:var(--footer-bg); color:var(--text-alt); padding-block:21px}
.ftr__in{display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap}
.ftr__in p{font-size:17px; margin:0}
.ftr__in .rt{text-align:right; font-size:15px; opacity:.85}
.ftr a{color:var(--text-alt); opacity:.85}
.ftr a:hover{opacity:1; color:var(--brand)}

/* ------------------------------------------------------------- responsive */
@media (max-width:1024px){
  .tiles{grid-template-columns:repeat(2,1fr)}
  .vendors{grid-template-columns:repeat(3,1fr)}
  .narrow{max-width:none}
  .hero--home h1{max-width:75%}
}
@media (max-width:860px){
  .hdr__logo img{width:200px}
  .nav{display:none; position:absolute; top:90px; left:0; right:0;
       flex-direction:column; align-items:stretch;
       background:var(--hdr-bg); padding:0 var(--pad) 12px;
       box-shadow:0 14px 26px rgba(0,0,0,.16)}
  .nav.open{display:flex}
  .nav a{padding:13px 0; border-bottom:1px solid rgba(0,0,0,.10)}
  .burger{display:block}
  .shead{grid-template-columns:1fr; gap:12px}
  .cards,.sectors{grid-template-columns:1fr 1fr}
  .svc,.split,.form-grid{grid-template-columns:1fr; gap:28px}
  .svc__media{order:-1}
  .split--flip .split__media{order:0}
  .hero--home h1{max-width:none}
  .hero--page .hero__in{padding-block:56px}
  .quote h4{max-width:none}
  .ftr__in .rt{text-align:left}
}
@media (max-width:560px){
  .cards,.tiles,.sectors{grid-template-columns:1fr}
  .members{grid-template-columns:repeat(2,1fr); gap:30px}
  .vendors{grid-template-columns:repeat(2,1fr)}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important}
  html{scroll-behavior:auto}
}

/* ==========================================================================
   ENHANCEMENTS
   ========================================================================== */

/* ------------------------------------------------- hero: very slow ken-burns */
.hero--home .hero__bg{
  animation:drift 34s ease-in-out infinite alternate;
  transform-origin:58% 45%;
}
@keyframes drift{
  from{transform:scale(1)}
  to  {transform:scale(1.075)}
}

/* --------------------------------------------------------- scroll reveals */
.rise{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .7s cubic-bezier(.2,.7,.3,1),
             transform .7s cubic-bezier(.2,.7,.3,1);
  will-change:opacity, transform;
}
.rise.is-in{opacity:1; transform:none}
/* stagger children of a grid */
.rise-group > *{
  opacity:0; transform:translateY(18px);
  transition:opacity .6s cubic-bezier(.2,.7,.3,1),
             transform .6s cubic-bezier(.2,.7,.3,1);
}
.rise-group.is-in > *{opacity:1; transform:none}
.rise-group.is-in > *:nth-child(1){transition-delay:.00s}
.rise-group.is-in > *:nth-child(2){transition-delay:.06s}
.rise-group.is-in > *:nth-child(3){transition-delay:.12s}
.rise-group.is-in > *:nth-child(4){transition-delay:.18s}
.rise-group.is-in > *:nth-child(5){transition-delay:.24s}
.rise-group.is-in > *:nth-child(6){transition-delay:.30s}
.rise-group.is-in > *:nth-child(7){transition-delay:.36s}
.rise-group.is-in > *:nth-child(8){transition-delay:.42s}

/* ------------------------------------------------------------------- stats */
.stats{
  background:var(--white);
  color:var(--text);
  padding-block:56px;
  border-top:1px solid #E4E7E9;
  border-bottom:1px solid #E4E7E9;
}
.stats__grid{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:var(--gut);
  text-align:center;
}
.stat__n{
  font-family:var(--display);
  font-size:clamp(2.6rem, 4vw, 3.6rem);
  font-weight:700; line-height:1;
  color:var(--brand);
  display:flex; justify-content:center; align-items:baseline; gap:2px;
}
.stat__n .suffix{color:var(--brand); font-size:.62em}
.stat__l{
  font-family:var(--display);
  font-size:14px; font-weight:500;
  text-transform:uppercase; letter-spacing:.10em;
  color:#6B767E;
  margin-top:12px;
}
.stat + .stat{border-left:1px solid #E4E7E9}

@media (max-width:900px){
  .stats__grid{grid-template-columns:repeat(2,1fr); gap:36px var(--gut)}
  .stat + .stat{border-left:0}
  .stat:nth-child(2n){border-left:1px solid #E4E7E9}
}
@media (max-width:520px){
  .stats__grid{grid-template-columns:1fr}
  .stat:nth-child(2n){border-left:0}
}

/* motion off for anyone who asked for it */
@media (prefers-reduced-motion:reduce){
  .hero--home .hero__bg{animation:none}
  .rise,.rise-group > *{opacity:1 !important; transform:none !important}
}