/* ==========================================================================
   The Industrial Solution — design tokens
   Palette drawn from the TIS logo: navy wordmark, teal/cyan swirl, green name.
   ========================================================================== */
:root{
  --navy:        #0B2A3D;
  --navy-700:    #123B54;
  --teal:        #0E7C86;
  --teal-600:    #0A6670;
  --cyan:        #3FB6C4;
  --green:       #1F9D55;
  --green-600:   #178145;
  --amber:       #E8A33D;
  --amber-600:   #CE8A25;
  --sand:        #F6F5F0;
  --sand-100:    #FBFAF6;
  --ink:         #16232B;
  --ink-soft:    #4B5B63;
  --line:        #E4E1D6;
  --white:       #FFFFFF;

  --font-head: "Barlow Condensed", "Arial Narrow", sans-serif;
  --font-body: "Work Sans", "Segoe UI", sans-serif;

  --radius-s: 6px;
  --radius-m: 12px;
  --radius-l: 20px;
  --shadow-card: 0 12px 30px -14px rgba(11,42,61,0.28);
  --container: 1180px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--sand-100);
  -webkit-font-smoothing:antialiased;
  line-height:1.6;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
h1,h2,h3,h4{
  font-family:var(--font-head);
  font-weight:700;
  color:var(--navy);
  line-height:1.08;
  margin:0 0 .5em;
  letter-spacing:.2px;
}
p{ margin:0 0 1em; color:var(--ink-soft); }
.container{
  max-width:var(--container);
  margin:0 auto;
  padding:0 24px;
}
:focus-visible{
  outline:3px solid var(--amber);
  outline-offset:2px;
}
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5em;
  padding:14px 26px;
  border-radius:999px;
  font-family:var(--font-head);
  font-weight:600;
  font-size:1.05rem;
  letter-spacing:.3px;
  border:2px solid transparent;
  cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease, background-color .15s ease, color .15s ease;
}
.btn:hover{ transform:translateY(-2px); }
.btn--primary{ background:var(--navy); color:var(--white); }
.btn--primary:hover{ background:var(--navy-700); box-shadow:var(--shadow-card); }
.btn--accent{ background:var(--amber); color:var(--navy); }
.btn--accent:hover{ background:var(--amber-600); box-shadow:0 12px 26px -12px rgba(232,163,61,.55); }
.btn--ghost-light{ border-color:rgba(255,255,255,.6); color:var(--white); }
.btn--ghost-light:hover{ background:rgba(255,255,255,.12); }
.btn--ghost{
  display:flex; margin:36px auto 0; background:transparent;
  border-color:var(--teal); color:var(--teal-600);
}
.btn--ghost:hover{ background:var(--teal); color:var(--white); }
.btn--block{ width:100%; }

/* ---------- Icons (mask-based, currentColor-driven) ---------- */
.icon{ display:inline-block; width:1em; height:1em; }
.icon::before{ content:""; display:block; width:100%; height:100%; background:currentColor; }
.icon-phone,.icon-phone-lg{ -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M6.6 10.8c1.4 2.8 3.8 5.2 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.1.4 2.3.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1C10.5 21 3 13.5 3 4c0-.6.4-1 1-1h3.2c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.4 0 .8-.2 1L6.6 10.8z"/></svg>') no-repeat center / contain; mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M6.6 10.8c1.4 2.8 3.8 5.2 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.1.4 2.3.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1C10.5 21 3 13.5 3 4c0-.6.4-1 1-1h3.2c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.4 0 .8-.2 1L6.6 10.8z"/></svg>') no-repeat center / contain; }
.icon-mail,.icon-mail-lg{ -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 5h18a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1zm1.5 2 7 5.5L18.5 7H4.5zM21 8.3l-8.4 6.6a1 1 0 0 1-1.2 0L3 8.3V17h18V8.3z"/></svg>') no-repeat center / contain; mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 5h18a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1zm1.5 2 7 5.5L18.5 7H4.5zM21 8.3l-8.4 6.6a1 1 0 0 1-1.2 0L3 8.3V17h18V8.3z"/></svg>') no-repeat center / contain; }
.icon-pin{ -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2c-4.4 0-8 3.6-8 8 0 5.4 7 11.5 7.3 11.8.2.2.5.3.7.3s.5-.1.7-.3C13 21.5 20 15.4 20 10c0-4.4-3.6-8-8-8zm0 11a3 3 0 1 1 0-6 3 3 0 0 1 0 6z"/></svg>') no-repeat center / contain; mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2c-4.4 0-8 3.6-8 8 0 5.4 7 11.5 7.3 11.8.2.2.5.3.7.3s.5-.1.7-.3C13 21.5 20 15.4 20 10c0-4.4-3.6-8-8-8zm0 11a3 3 0 1 1 0-6 3 3 0 0 1 0 6z"/></svg>') no-repeat center / contain; }
.icon-shield{ -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2l8 3v6c0 5-3.4 9.4-8 11-4.6-1.6-8-6-8-11V5l8-3zm-1.2 13.6 5.6-5.6-1.4-1.4-4.2 4.2-2-2-1.4 1.4 3.4 3.4z"/></svg>') no-repeat center / contain; mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2l8 3v6c0 5-3.4 9.4-8 11-4.6-1.6-8-6-8-11V5l8-3zm-1.2 13.6 5.6-5.6-1.4-1.4-4.2 4.2-2-2-1.4 1.4 3.4 3.4z"/></svg>') no-repeat center / contain; }
.icon-cert{ -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2a5 5 0 1 1 0 10 5 5 0 0 1 0-10zm-3 10.6L6 22l6-3 6 3-3-9.4a6.98 6.98 0 0 1-6 0z"/></svg>') no-repeat center / contain; mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2a5 5 0 1 1 0 10 5 5 0 0 1 0-10zm-3 10.6L6 22l6-3 6 3-3-9.4a6.98 6.98 0 0 1-6 0z"/></svg>') no-repeat center / contain; }
.icon-repeat{ -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M17 2l4 4-4 4V7h-6a5 5 0 0 0 0 10h1v2h-1a7 7 0 0 1 0-14h6V2zM7 22l-4-4 4-4v3h6a5 5 0 0 0 0-10h-1V5h1a7 7 0 0 1 0 14H7v3z"/></svg>') no-repeat center / contain; mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M17 2l4 4-4 4V7h-6a5 5 0 0 0 0 10h1v2h-1a7 7 0 0 1 0-14h6V2zM7 22l-4-4 4-4v3h6a5 5 0 0 0 0-10h-1V5h1a7 7 0 0 1 0 14H7v3z"/></svg>') no-repeat center / contain; }
.icon-building{ -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M4 22V4a1 1 0 0 1 1-1h9a1 1 0 0 1 1 1v6h5a1 1 0 0 1 1 1v11h-2v-9h-4v9h-2v-4H8v4H4zm2-2h2v-2H6v2zm0-4h2v-2H6v2zm0-4h2V8H6v4zm4 8h2v-2h-2v2zm0-4h2v-2h-2v2zm0-4h2V8h-2v4z"/></svg>') no-repeat center / contain; mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M4 22V4a1 1 0 0 1 1-1h9a1 1 0 0 1 1 1v6h5a1 1 0 0 1 1 1v11h-2v-9h-4v9h-2v-4H8v4H4zm2-2h2v-2H6v2zm0-4h2v-2H6v2zm0-4h2V8H6v4zm4 8h2v-2h-2v2zm0-4h2v-2h-2v2zm0-4h2V8h-2v4z"/></svg>') no-repeat center / contain; }

/* ---------- Utility bar ---------- */
.utility-bar{ background:var(--navy); color:#CFE3E8; font-size:.85rem; }
.utility-bar__inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:8px 24px; flex-wrap:wrap;
}
.utility-bar__contacts{ display:flex; gap:20px; flex-wrap:wrap; }
.utility-bar__contacts a{ display:inline-flex; align-items:center; gap:6px; }
.utility-bar__contacts a:hover{ color:var(--cyan); }
.utility-bar__tag{ font-style:italic; color:#9FC2C9; }
@media (max-width:720px){ .utility-bar__tag{ display:none; } }

/* ---------- Header ---------- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:var(--white);
  border-bottom:1px solid var(--line);
}
.site-header__inner{
  display:flex; align-items:center; gap:24px;
  padding:10px 24px;
}
.brand{ flex-shrink:0; }
.brand__logo{ height:56px; width:auto; }
.nav{ display:flex; gap:28px; margin-left:auto; }
.nav a{
  font-family:var(--font-head); font-weight:600; font-size:1.05rem;
  color:var(--navy); position:relative; padding:6px 0;
}
.nav a::after{
  content:""; position:absolute; left:0; bottom:0; height:2px; width:0;
  background:var(--amber); transition:width .2s ease;
}
.nav a:hover::after{ width:100%; }
.header__cta{ padding:11px 20px; font-size:.95rem; }
.nav-toggle{
  display:none; margin-left:12px; width:38px; height:38px;
  border:none; background:none; cursor:pointer;
  flex-direction:column; justify-content:center; gap:5px;
}
.nav-toggle span{ display:block; height:2px; background:var(--navy); border-radius:2px; }

@media (max-width: 900px){
  .nav{
    position:absolute; top:100%; left:0; right:0;
    background:var(--white); flex-direction:column; gap:0;
    border-bottom:1px solid var(--line);
    max-height:0; overflow:hidden; transition:max-height .25s ease;
  }
  .nav.is-open{ max-height:320px; }
  .nav a{ padding:14px 24px; border-top:1px solid var(--line); }
  .header__cta{ display:none; }
  .nav-toggle{ display:flex; }
}

/* ---------- Hero ---------- */
.hero{ position:relative; overflow:hidden; padding:64px 0 96px; }
.hero__backdrop{
  position:absolute; inset:0; z-index:-1;
  background-image:
    linear-gradient(160deg, rgba(11,42,61,.88) 0%, rgba(18,59,84,.82) 46%, rgba(10,102,112,.8) 100%),
    url('../images/hero-banner.svg');
  background-size:cover, cover;
  background-position:center, center;
  background-repeat:no-repeat, no-repeat;
}
.hero__grid{
  display:grid; grid-template-columns:1.15fr .85fr; gap:56px; align-items:start;
}
.eyebrow{
  font-family:var(--font-head); font-weight:600; font-size:.95rem;
  letter-spacing:.5px; color:var(--amber); margin-bottom:14px;
}
.eyebrow--light{ color:var(--teal-600); }
.hero__copy h1{
  color:var(--white); font-size:clamp(2.2rem, 4.2vw, 3.4rem);
  max-width:14ch;
}
.hero__lede{ color:#D9E7EA; max-width:52ch; font-size:1.08rem; }
.hero__actions{ display:flex; gap:16px; flex-wrap:wrap; margin:28px 0 30px; }
.hero__points{ display:flex; gap:24px; flex-wrap:wrap; }
.hero__points li{
  color:#CFE3E8; font-size:.92rem; padding-left:22px; position:relative;
}
.hero__points li::before{
  content:""; position:absolute; left:0; top:.45em; width:12px; height:12px;
  border-radius:50%; background:var(--cyan);
}

.enquire-card{
  background:var(--white); border-radius:var(--radius-l);
  padding:32px; box-shadow:0 30px 60px -20px rgba(0,0,0,.45);
}
.enquire-card h2{ font-size:1.6rem; margin-bottom:.3em; }
.enquire-card > p{ font-size:.95rem; margin-bottom:20px; }
.field{ margin-bottom:16px; }
.field label{
  display:block; font-size:.82rem; font-weight:600; color:var(--navy);
  margin-bottom:6px;
}
.field input, .field select, .field textarea{
  width:100%; padding:12px 14px; border-radius:var(--radius-s);
  border:1.5px solid var(--line); font-family:var(--font-body); font-size:.95rem;
  background:var(--sand-100); color:var(--ink);
}
.field input:focus, .field select:focus, .field textarea:focus{
  border-color:var(--teal); outline:none; background:var(--white);
}
.form-note{ margin:12px 0 0; font-size:.88rem; min-height:1.2em; }
.form-note.success{ color:var(--green-600); }

@media (max-width:960px){
  .hero__grid{ grid-template-columns:1fr; }
  .hero__panel{ order:-1; }
}

/* ---------- Section shell ---------- */
section{ padding:88px 0; }
.section-head{ max-width:640px; margin:0 auto 48px; text-align:center; }
.section-head h2{ font-size:clamp(1.8rem, 3vw, 2.5rem); }
.section-head p{ font-size:1.05rem; }

/* ---------- Services ---------- */
.services{ background:var(--sand-100); }
.service-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:24px;
}
.service-card{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius-m);
  padding:28px; transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.service-card:hover{
  transform:translateY(-4px); box-shadow:var(--shadow-card); border-color:transparent;
}
.service-card__icon{
  width:52px; height:52px; border-radius:14px;
  background:linear-gradient(135deg, var(--teal), var(--navy));
  display:flex; align-items:center; justify-content:center; margin-bottom:18px;
}
.service-card__icon svg{ width:28px; height:28px; stroke:#fff; }
.service-card h3{ font-size:1.25rem; margin-bottom:.35em; }
.service-card p{ font-size:.95rem; margin-bottom:0; }
.service-card.is-hidden{ display:none; }

@media (max-width:920px){ .service-grid{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width:600px){ .service-grid{ grid-template-columns:1fr; } }

/* ---------- Approach ---------- */
.approach{
  background:linear-gradient(160deg, var(--navy) 0%, var(--navy-700) 100%);
  color:#fff;
}
.approach__grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:56px; align-items:start; }
.approach__copy h2{ color:#fff; font-size:clamp(1.8rem, 3vw, 2.4rem); }
.approach__copy p{ color:#CFE3E8; font-size:1.05rem; max-width:48ch; }
.process{ display:grid; gap:22px; }
.process__step{
  display:flex; gap:18px; align-items:flex-start;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14);
  border-radius:var(--radius-m); padding:22px;
}
.process__num{
  flex-shrink:0; width:42px; height:42px; border-radius:50%;
  background:var(--amber); color:var(--navy); font-family:var(--font-head);
  font-weight:700; font-size:1.2rem; display:flex; align-items:center; justify-content:center;
}
.process__step h3{ color:#fff; font-size:1.15rem; margin-bottom:.25em; }
.process__step p{ color:#C7DBDE; margin-bottom:0; font-size:.94rem; }

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

/* ---------- Why us ---------- */
.why-grid{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:24px;
}
.why-card{
  text-align:left; padding:28px 24px; border-radius:var(--radius-m);
  background:var(--white); border:1px solid var(--line);
}
.why-card .icon{
  width:46px; height:46px; color:var(--teal); margin-bottom:16px;
}
.why-card h3{ font-size:1.1rem; margin-bottom:.35em; }
.why-card p{ font-size:.92rem; margin-bottom:0; }

@media (max-width:960px){ .why-grid{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width:560px){ .why-grid{ grid-template-columns:1fr; } }

/* ---------- Contact ---------- */
.contact{ background:var(--sand); }
.contact__grid{ display:grid; grid-template-columns:1fr 1fr; gap:56px; }
.contact__lede{ font-size:1.05rem; }
.contact__list{ display:grid; gap:22px; margin-top:28px; }
.contact__item{ display:flex; gap:16px; align-items:flex-start; }
.contact__item .icon{ width:26px; height:26px; color:var(--teal); flex-shrink:0; margin-top:4px; }
.contact__item h3{ font-size:1rem; margin-bottom:.25em; }
.contact__item p{ margin-bottom:0; font-size:.95rem; }
.contact__item a:hover{ color:var(--teal-600); }

.contact__form-wrap .enquire-form--dark{
  background:var(--navy); border-radius:var(--radius-l); padding:32px;
  box-shadow:var(--shadow-card);
}
.enquire-form--dark h3{ color:#fff; font-size:1.4rem; }
.enquire-form--dark label{ color:#CFE3E8; }
.enquire-form--dark input, .enquire-form--dark textarea{
  background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.2); color:#fff;
}
.enquire-form--dark input::placeholder, .enquire-form--dark textarea::placeholder{ color:#93A9AF; }
.enquire-form--dark .form-note.success{ color:var(--cyan); }

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

/* ---------- Footer ---------- */
.site-footer{ background:var(--navy); color:#B9CDD2; padding-top:64px; }
.footer__grid{
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:40px;
  padding-bottom:48px; border-bottom:1px solid rgba(255,255,255,.12);
}
.footer__logo{ height:48px; width:auto; background:#fff; border-radius:8px; padding:6px 10px; margin-bottom:16px; }
.footer__brand p{ color:#9FB6BC; font-size:.92rem; }
.footer__col h4{ color:#fff; font-size:1.05rem; margin-bottom:16px; }
.footer__col ul{ display:grid; gap:10px; }
.footer__col a{ font-size:.92rem; color:#B9CDD2; }
.footer__col a:hover{ color:var(--cyan); }
.footer__contact li{ font-size:.92rem; }
.footer__bottom{ padding:22px 24px; text-align:center; font-size:.85rem; color:#83999F; }

@media (max-width:900px){ .footer__grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .footer__grid{ grid-template-columns:1fr; } }

/* ---------- Floating action buttons (call + WhatsApp) ---------- */
.fab{
  position:fixed; bottom:22px; z-index:60;
  width:56px; height:56px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 12px 26px -8px rgba(0,0,0,.45);
  transition:transform .15s ease, box-shadow .15s ease;
}
.fab:hover{ transform:translateY(-3px) scale(1.04); box-shadow:0 16px 30px -8px rgba(0,0,0,.5); }
.fab svg{ width:26px; height:26px; }
.fab--call{ right:22px; background:var(--amber); color:var(--navy); }
.fab--whatsapp{ left:22px; background:#25D366; color:#fff; }
.fab__pulse{
  position:absolute; inset:0; border-radius:50%;
  background:inherit; opacity:.55;
  animation:fabPulse 2.2s ease-out infinite;
  z-index:-1;
}
@keyframes fabPulse{
  0%{ transform:scale(1); opacity:.5; }
  100%{ transform:scale(1.9); opacity:0; }
}
@media (max-width:600px){
  .fab{ width:52px; height:52px; bottom:16px; }
  .fab--call{ right:16px; } .fab--whatsapp{ left:16px; }
}