@font-face {
  font-family: 'ttw';
  src:
    url('../font/TTWellingtons-Bd.woff2') format('woff2'),
    url('../font/TTWellingtons-Bd.woff') format('woff');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'ttw';
  src:
    url('../font/TTWellingtons-Md.woff2') format('woff2'),
    url('../font/TTWellingtons-Md.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}


/* ==========================================================
   Root
   ========================================================== */

:root {
  --bg: #0b1220;
  --panel: #0f1a2f;

  --text: #111827;
  --muted: #6b7280;

  --accent: #ee1111;
  --accent2: #de5659;

  --border: rgba(17,24,39,.10);
  --lightbg: #E7E7E9;

  --radius: 4px;
}


/* ==========================================================
   Reset
   ========================================================== */

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  background: #fff;

  color: var(--text);

  font-family:
    'ttw',
    Arial,
    sans-serif;

  font-weight: 500;

  line-height: 1.55;
}

body.nav-open {
  overflow: hidden;
}

img {
  display: block;

  max-width: 100%;
}

a {
  color: inherit;

  text-decoration: none;
}

a:hover {
  color: var(--accent);
}

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

.container {
  width: min(1140px, 92%);

  margin-inline: auto;
}


/* ==========================================================
   Topbar
   ========================================================== */

.topbar {
  background: var(--bg);

  color: #e5e7eb;

  font-size: 13px;
}

.topbar__inner {
  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 16px;

  padding: 9px 0;
}

.topbar__left,
.topbar__right {
  display: flex;

  align-items: center;

  gap: 8px;
}

.topbar__item a {
  color: #fff;
}

.topbar__item a:hover {
  color: #fff;

  opacity: .8;
}

.topbar__sep {
  opacity: .4;
}


/* ==========================================================
   Header
   ========================================================== */

.header {
  position: sticky;

  top: 0;

  z-index: 50;

  background: #fff;

  border-bottom:
    1px solid var(--border);
}

.header__inner {
  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 24px;

  min-height: 72px;

  padding: 13px 0;
}

.brand {
  display: flex;

  align-items: center;

  flex: 0 0 auto;
}

.brand img {
  width: auto;

  max-height: 44px;
}


/* ==========================================================
   Desktop Navigation
   ========================================================== */

.nav {
  display: flex;

  align-items: center;

  gap: 20px;
}

.nav__link {
  position: relative;

  display: inline-flex;

  align-items: center;

  gap: 4px;

  padding: 9px 2px;

  color: var(--text);

  font-size: 14px;

  font-weight: 600;
}

.nav__link:hover,
.nav__link.is-active {
  color: var(--accent);
}

.nav__chevron {
  font-size: 14px;

  transition:
    transform .2s ease;
}

.nav__dropdown:hover
.nav__chevron {
  transform: rotate(180deg);
}


/* Contact nav */

.nav__cta {
  padding: 10px 14px;

  background: var(--accent);

  border-radius: var(--radius);

  color: #fff !important;
}

.nav__cta:hover {
  color: #fff !important;

  filter: brightness(.95);
}


/* Dropdown */

.nav__dropdown {
  position: relative;
}

.nav__menu {
  position: absolute;

  top: calc(100% + 2px);

  left: 0;

  min-width: 255px;

  padding: 8px;

  background: #fff;

  border:
    1px solid var(--border);

  border-radius: var(--radius);

  box-shadow:
    0 14px 34px rgba(0,0,0,.10);

  opacity: 0;

  visibility: hidden;

  transform:
    translateY(8px);

  transition:
    opacity .18s ease,
    visibility .18s ease,
    transform .18s ease;
}

.nav__menu a {
  display: block;

  padding: 9px 10px;

  border-radius: var(--radius);

  color: var(--text);

  font-size: 13px;

  font-weight: 600;
}

.nav__menu a:hover {
  background:
    rgba(238,17,17,.06);

  color: var(--accent);
}

.nav__dropdown:hover
.nav__menu {
  opacity: 1;

  visibility: visible;

  transform: translateY(0);
}


/* Mobile controls hidden desktop */

.nav-toggle,
.nav-close,
.nav-backdrop {
  display: none;
}


/* Hamburger */

.nav-toggle {
  width: 40px;

  height: 40px;

  padding: 7px;

  background: transparent;

  border: 0;

  border-radius: var(--radius);

  cursor: pointer;
}

.nav-toggle span {
  display: block;

  width: 23px;

  height: 2px;

  margin: 5px auto;

  background: var(--text);

  border-radius: 2px;
}


/* ==========================================================
   Buttons
   ========================================================== */

.btn {
  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap:0;

  padding: 11px 15px;

  background: transparent;

  border:
    1px solid rgba(17,24,39,.18);

  border-radius: var(--radius);

  color: var(--text);

  font-size: 14px;

  font-weight: 600;

  cursor: pointer;

  transition:
    color .2s ease,
    border-color .2s ease,
    background .2s ease;
}

.btn:hover {
  border-color: var(--accent);

  color: var(--accent);
}

.btn--solid {
  background: var(--accent);

  border-color: var(--accent);

  color: #fff;
}

.btn--solid:hover {
  color: #fff;

  filter: brightness(.95);
}

.btn--ghost {
  border-color:
    rgba(255,255,255,.38);

  color: #fff;
}

.btn--ghost:hover {
  border-color: #fff;

  color: #fff;
}


/* ==========================================================
   Common Sections
   ========================================================== */

.section {
  padding: 64px 0;

  scroll-margin-top: 90px;
}

.section--soft {
  background: #f7f8fa;
}

.section__head {
  display: flex;

  align-items: flex-end;

  justify-content: space-between;

  gap: 24px;

  margin-bottom: 28px;
}

.section__title {
  margin: 0;

  color: var(--text);

  font-size: 30px;

  font-weight: 600;

  line-height: 1.2;
}

.section__sub {
  max-width: 720px;

  margin: 8px 0 0;

  color: var(--muted);

  font-size: 15px;

  line-height: 1.65;
}

.section-kicker {
  margin-bottom: 9px;

  color: var(--accent);

  font-size: 12px;

  font-weight: 600;

  letter-spacing: .12em;

  text-transform: uppercase;
}


/* ==========================================================
   Grids
   ========================================================== */

.grid-2 {
  display: grid;

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

  gap: 42px;

  align-items: stretch;
}

.grid-3 {
  display: grid;

  grid-template-columns:
    repeat(3, minmax(0,1fr));

  gap: 34px;
}


/* ==========================================================
   Flat Content
   ========================================================== */

.card {
  padding: 0;

  background: transparent;

  border: 0;

  box-shadow: none;
}

.card h3 {
  margin: 0 0 8px;

  font-size: 17px;

  font-weight: 600;
}

.card p {
  margin: 0;

  color: var(--muted);

  font-size: 14px;

  line-height: 1.65;
}

.card a {
  display: inline-flex;

  margin-top: 14px;

  color: var(--accent);

  font-weight: 600;
}


/* ==========================================================
   Homepage Hero
   ========================================================== */

.hero {
  overflow: hidden;

  background:
    linear-gradient(
      180deg,
      var(--bg),
      var(--bg)
    );

  color: #fff;
}


.hero__inner {
  display: grid;

  grid-template-columns:
    1.15fr .85fr;

  /*
   * No empty visual gap.
   * The merge happens inside the image.
   */
  gap: 0;

  align-items: stretch;
}


.hero__content {
  position: relative;

  z-index: 5;

  padding:
    66px 28px 54px 0;
}


.hero__kicker {
  margin-bottom: 9px;

  color:
    rgba(255,255,255,.72);

  font-size: 12px;

  font-weight: 600;

  letter-spacing: .12em;

  text-transform: uppercase;
}


.hero__title {
  max-width: 760px;

  margin: 0 0 14px;

  font-size:
    clamp(36px,4vw,48px);

  font-weight: 600;

  line-height: 1.08;
}


.hero__sub {
  max-width: 58ch;

  margin: 0;

  color:
    rgba(255,255,255,.76);

  font-size: 16px;
}


.hero__actions {
  display: flex;

  flex-wrap: wrap;

  gap: 12px;

  margin-top: 20px;
}


/* ==========================================================
   Hero Image - Desktop
   ========================================================== */

/*
 * IMAGE REMAINS ONLY IN THE RIGHT COLUMN.
 *
 * We are NOT moving it 50px / 300px underneath
 * the content.
 *
 * Only the LEFT PART of the image fades away
 * into the hero background.
 */

.hero__media {
  position: relative;
  min-width: 0;
  min-height: 100%;
  overflow: hidden;
  
}


/*
 * Main sharp image.
 *
 * Left edge starts completely transparent.
 * It slowly becomes visible toward the middle.
 *
 * This removes the hard vertical division.
 */

.hero__media::before {
  content: "";

  position: absolute;

  inset: -2px;

  background:
    url("../img/hero-welding-1600.jpg")
    center center / cover no-repeat;

  transform: scale(1.01);


  /*
   * IMAGE ALPHA FADE
   *
   * 0% - 12%  almost invisible
   * 12% - 35% gradual transition
   * 35% - 55% image becomes strong
   * 55%+      normal image
   */

  -webkit-mask-image:
    linear-gradient(
      85deg,

      transparent 0%,

      rgba(0,0,0,.02) 6%,

      rgba(0,0,0,.06) 12%,

      rgba(0,0,0,.14) 18%,

      rgba(0,0,0,.26) 24%,

      rgba(0,0,0,.42) 30%,

      rgba(0,0,0,.60) 36%,

      rgba(0,0,0,.76) 42%,

      rgba(0,0,0,.90) 48%,

      #000 56%,

      #000 100%
    );


  mask-image:
    linear-gradient(
      90deg,

      transparent 13%,

      rgba(0,0,0,.02) 13%,

      rgba(0,0,0,.06) 18%,

      rgba(0,0,0,.14) 22%,

      rgba(0,0,0,.26) 28%,

      rgba(0,0,0,.42) 34%,

      rgba(0,0,0,.60) 36%,

      rgba(0,0,0,.76) 48%,

      rgba(0,0,0,.90) 54%,

      #000 56%,

      #000 100%
    );


  -webkit-mask-repeat:
    no-repeat;

  mask-repeat:
    no-repeat;


  -webkit-mask-size:
    100% 100%;

  mask-size:
    100% 100%;
}


/*
 * Soft blurred transition ONLY on the left/middle.
 *
 * This does not blur the complete image.
 * Right side remains sharp.
 */

.hero__media::after {
  content: "";

  position: absolute;

  top: -18px;

  bottom: -18px;

  left: -18px;

  width: 58%;

  background:
    url("../img/hero-welding-1600.jpg")
    left center / auto calc(100% - 36px)
    no-repeat;

  filter: blur(12px);

  transform: scale(1.05);

  opacity: .38;

  pointer-events: none;


  -webkit-mask-image:
    linear-gradient(
      90deg,

      transparent 0%,

      rgba(0,0,0,.10) 15%,

      rgba(0,0,0,.60) 32%,

      #000 46%,

      rgba(0,0,0,.60) 65%,

      rgba(0,0,0,.18) 82%,

      transparent 100%
    );


  mask-image:
    linear-gradient(
      90deg,

      transparent 0%,

      rgba(0,0,0,.10) 15%,

      rgba(0,0,0,.60) 32%,

      #000 46%,

      rgba(0,0,0,.60) 65%,

      rgba(0,0,0,.18) 82%,

      transparent 100%
    );
}


/* ==========================================================
   Hero Stats
   ========================================================== */

.hero__strip {
  display: grid;

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

  gap: 24px;

  margin-top: 30px;
}


.strip {
  display: flex;

  align-items: center;

  gap: 11px;
}


.strip__icon {
  flex: 0 0 38px;

  display: grid;

  width: 38px;

  height: 38px;

  place-items: center;

  color: var(--accent);
}


.strip__icon i {
  font-size: 28px;
}


.strip__n {
  color: #fff;

  font-size: 17px;

  font-weight: 600;
}


.strip__t {
  margin-top: 3px;

  color:
    rgba(255,255,255,.60);

  font-size: 12px;
}


/* ==========================================================
   Homepage About
   ========================================================== */

.media {
  position: relative;

  min-height: 470px;

  overflow: hidden;

  background: var(--bg);

  border-radius: var(--radius);
}

.media img {
  position: absolute;

  inset: 0;

  width: 100%;

  height: 100%;

  object-fit: cover;
}

.list {
  display: grid;

  gap: 22px;
}

.li {
  display: flex;

  align-items: flex-start;

  gap: 14px;
}

.li__icon {
  flex: 0 0 38px;

  display: grid;

  width: 38px;

  height: 38px;

  place-items: center;

  background:
    rgba(238,17,17,.08);

  border-radius: var(--radius);

  color: var(--accent);

  font-size: 14px;

  font-weight: 600;
}

.li__title {
  font-size: 16px;

  font-weight: 600;
}

.li__desc {
  margin-top: 4px;

  color: var(--muted);

  font-size: 13px;

  line-height: 1.55;
}


/* ==========================================================
   Industries / Projects
   ========================================================== */

.industries-section__head {
  margin-bottom: 28px;
}

.industry-card {
  display: flex;

  flex-direction: column;

  min-width: 0;
}

.industry-card__image {
  position: relative;

  display: block;

  width: 100%;

  aspect-ratio: 16 / 9;

  overflow: hidden;

  background: var(--bg);

  border-radius: var(--radius);

  transform: translateZ(0);
}

.industry-card__image img {
  display: block;

  width: 100%;

  height: 100%;

  object-fit: cover;

  object-position: center;

  transform:
    translateZ(0) scale(1);

  backface-visibility: hidden;

  -webkit-backface-visibility: hidden;

  transition:
    transform .55s
    cubic-bezier(.22,.61,.36,1);
}

.industry-card:hover
.industry-card__image img {
  transform:
    translateZ(0) scale(1.05);
}

.industry-card__body {
  display: flex;

  flex: 1;

  flex-direction: column;

  padding-top: 17px;
}

.industry-card__body
.section-kicker {
  margin-bottom: 6px;

  font-size: 10px;
}

.industry-card__title {
  margin: 0 0 7px;

  font-size: 17px;

  font-weight: 600;

  line-height: 1.35;
}

.industry-card__text {
  margin: 0;

  color: var(--muted);

  font-size: 14px;

  line-height: 1.6;
}

.industry-card__link {
  display: inline-flex;

  align-items: center;

  gap: 6px;

  width: max-content;

  margin-top: 15px;

  color: var(--accent);

  font-size: 14px;

  font-weight: 600;
}

.industry-card__link i {
  font-size: 17px;

  transition:
    transform .2s ease;
}

.industry-card__link:hover i {
  transform:
    translateX(4px);
}


/* ==========================================================
   About Page
   ========================================================== */

.about-intro {
  padding: 72px 0 48px;
}

.about-intro__content {
  max-width: 900px;
}

.about-intro__title {
  max-width: 850px;

  margin: 0;

  font-size:
    clamp(38px,5vw,54px);

  font-weight: 600;

  line-height: 1.08;
}

.about-intro__lead {
  max-width: 780px;

  margin: 20px 0 0;

  color: var(--muted);

  font-size: 18px;

  line-height: 1.7;
}

.about-story {
  padding-top: 20px;
}

.about-story__grid {
  display: grid;

  grid-template-columns:
    1.05fr .95fr;

  gap: 64px;

  align-items: center;
}

.about-story__image {
  overflow: hidden;

  aspect-ratio: 4 / 3;

  background: var(--bg);

  border-radius: var(--radius);
}

.about-story__image img {
  width: 100%;

  height: 100%;

  object-fit: cover;
}

.about-story__title {
  margin: 0 0 18px;

  font-size: 32px;

  font-weight: 600;

  line-height: 1.2;
}

.about-story__content p {
  margin: 0 0 14px;

  color: var(--muted);

  font-size: 15px;

  line-height: 1.7;
}

.about-story__points {
  display: grid;

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

  gap: 12px 22px;

  margin-top: 25px;
}

.about-story__point {
  display: flex;

  align-items: flex-start;

  gap: 8px;

  font-size: 13px;

  line-height: 1.5;
}

.about-story__point i {
  margin-top: 2px;

  color: var(--accent);

  font-size: 18px;
}

.about-section-head {
  margin-bottom: 38px;
}

.about-pillars {
  display: grid;

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

  gap: 48px;
}

.about-pillar {
  display: flex;

  align-items: flex-start;

  gap: 14px;
}

.about-pillar__icon {
  flex: 0 0 38px;

  display: grid;

  width: 38px;

  height: 38px;

  place-items: center;

  color: var(--accent);
}

.about-pillar__icon i {
  font-size: 29px;
}

.about-pillar h3 {
  margin: 0 0 7px;

  font-size: 17px;

  font-weight: 600;
}

.about-pillar p {
  margin: 0;

  color: var(--muted);

  font-size: 14px;

  line-height: 1.65;
}

.about-capabilities__layout {
  display: grid;

  grid-template-columns:
    .8fr 1.2fr;

  gap: 80px;

  align-items: start;
}

.about-capabilities__list {
  display: flex;

  flex-direction: column;
}

.about-capabilities__list a {
  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 18px;

  padding: 15px 0;

  border-bottom:
    1px solid var(--border);

  font-size: 16px;

  font-weight: 600;

  transition:
    color .2s ease,
    padding-left .2s ease;
}

.about-capabilities__list
a:first-child {
  border-top:
    1px solid var(--border);
}

.about-capabilities__list
a:hover {
  padding-left: 5px;

  color: var(--accent);
}

.about-capabilities__list i {
  color: var(--accent);

  font-size: 18px;
}


/* ==========================================================
   Capabilities Page
   ========================================================== */

.capabilities-intro {
  padding:
    74px 0 52px;
}

.capabilities-intro__content {
  max-width: 900px;
}

.capabilities-intro__title {
  max-width: 900px;

  margin: 0;

  font-size:
    clamp(40px,5vw,56px);

  font-weight: 600;

  line-height: 1.06;
}

.capabilities-intro__lead {
  max-width: 790px;

  margin: 20px 0 0;

  color: var(--muted);

  font-size: 18px;

  line-height: 1.7;
}


/* ==========================================================
   Capabilities Quick Navigation Bar
   ========================================================== */

/*
 * This is the FULL-WIDTH wrapper.
 *
 * It becomes sticky underneath the main header.
 *
 * The header height is automatically measured by
 * capabilities.js and stored in:
 *
 * --header-sticky-height
 */

.capabilities-nav-bar {
  position: sticky;

  top:
    var(
      --header-sticky-height,
      73px
    );

  z-index: 45;

  width: 100%;

  background: #fff;

  transition:
    background-color .15s ease,
    box-shadow .15s ease;
}


/*
 * Actual navigation remains inside the normal
 * website container.
 */

.capabilities-nav {
  display: grid;

  grid-template-columns:
    repeat(5,minmax(0,1fr));

  width: 100%;

  margin: 0;

  border-top:
    1px solid var(--border);

  border-bottom:
    1px solid var(--border);
}


/* Navigation items */

.capabilities-nav a {
  display: flex;

  align-items: center;

  gap: 9px;

  min-width: 0;

  padding: 18px 14px;

  border-right:
    1px solid var(--border);

  color: var(--text);

  font-size: 13px;

  font-weight: 600;

  line-height: 1.3;

  transition:
    color .18s ease,
    background-color .18s ease;
}

.capabilities-nav a:last-child {
  border-right: 0;
}

.capabilities-nav a:hover {
  color: var(--accent);
}

.capabilities-nav a span {
  flex: 0 0 auto;

  color: var(--accent);

  font-size: 11px;
}


/* ==========================================================
   Sticky Quick Navigation State
   ========================================================== */

/*
 * IMPORTANT:
 *
 * .capabilities-nav-bar itself is full browser width.
 *
 * Therefore this background automatically expands
 * all the way to BOTH left and right edges.
 *
 * The .container inside it still keeps the links
 * aligned with the main website content.
 */

.capabilities-nav-bar.is-sticky {
  background:
    var(--lightbg);

  border-bottom:
    1px solid var(--border);

  box-shadow:
    0 5px 14px
    rgba(11,18,32,.035);
}


/*
 * Remove the inner top/bottom borders while sticky,
 * because the full-width bar now defines the edge.
 */

.capabilities-nav-bar.is-sticky
.capabilities-nav {
  border-top: 0;
  border-bottom: 0;
}


/*
 * CENTER NAVIGATION CONTENT ONLY WHEN STICKY.
 */

.capabilities-nav-bar.is-sticky
.capabilities-nav a {
  justify-content: flex-start;
}


/* ==========================================================
   Capability Sections
   ========================================================== */

/*
 * Gives normal browser/hash scrolling enough room
 * for BOTH:
 *
 * main header
 * +
 * sticky capability navigation.
 */

.capability-section {
  scroll-margin-top:
    calc(
      var(
        --header-sticky-height,
        73px
      )
      +
      var(
        --capabilities-nav-height,
        56px
      )
      +
      2px
    );
}


.capability-row {
  display: grid;

  grid-template-columns:
    1.05fr .95fr;

  gap: 72px;

  align-items: center;
}

.capability-row--reverse
.capability-media {
  order: 2;
}

.capability-row--reverse
.capability-content {
  order: 1;
}


/* Capability image */

.capability-media {
  overflow: hidden;

  aspect-ratio: 3 / 2;

  background: var(--bg);

  border-radius: var(--radius);
}

.capability-media img {
  width: 100%;

  height: 100%;

  object-fit: cover;
}


/* Capability content */

.capability-content {
  max-width: 510px;
}

.capability-index {
  display: flex;

  align-items: center;

  gap: 9px;

  margin-bottom: 12px;

  color: var(--muted);

  font-size: 12px;

  font-weight: 600;

  letter-spacing: .08em;

  text-transform: uppercase;
}

.capability-index span {
  color: var(--accent);
}

.capability-title {
  margin: 0;

  font-size: 34px;

  font-weight: 600;

  line-height: 1.15;
}

.capability-lead {
  margin: 15px 0 0;

  color: var(--muted);

  font-size: 15px;

  line-height: 1.7;
}

.capability-scope-title {
  margin-top: 26px;

  color: var(--text);

  font-size: 13px;

  font-weight: 600;

  letter-spacing: .06em;

  text-transform: uppercase;
}

.capability-list {
  display: grid;

  gap: 11px;

  margin: 14px 0 0;

  padding: 0;

  list-style: none;
}

.capability-list li {
  display: flex;

  align-items: flex-start;

  gap: 10px;

  color: var(--muted);

  font-size: 14px;

  line-height: 1.5;
}

.capability-list i {
  flex: 0 0 auto;

  margin-top: 2px;

  color: var(--accent);

  font-size: 17px;
}

.capability-link {
  display: inline-flex;

  align-items: center;

  gap: 7px;

  margin-top: 24px;

  color: var(--accent);

  font-size: 14px;

  font-weight: 600;
}

.capability-link i {
  font-size: 17px;

  transition:
    transform .2s ease;
}

.capability-link:hover i {
  transform:
    translateX(4px);
}


/* ==========================================================
   Capabilities CTA
   ========================================================== */

.capabilities-contact {
  padding: 14px 0 70px;
}

.capabilities-contact__inner {
  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 50px;

  padding: 34px 0;

  border-top:
    1px solid var(--border);

  border-bottom:
    1px solid var(--border);
}

.capabilities-contact__inner h2 {
  max-width: 660px;

  margin: 0;

  font-size: 28px;

  font-weight: 600;

  line-height: 1.2;
}

.capabilities-contact__inner p {
  max-width: 690px;

  margin: 8px 0 0;

  color: var(--muted);

  font-size: 14px;

  line-height: 1.6;
}


/* ==========================================================
   Contact Page
   ========================================================== */

.contact-intro {
  padding-bottom: 42px;
}

.contact-section {
  padding-top: 30px;
}

.contact-layout {
  display: grid;

  grid-template-columns:
    .82fr 1.18fr;

  gap: 90px;

  align-items: start;
}

.contact-info {
  max-width: 430px;
}

.contact-info__title,
.contact-form__title {
  margin: 0;

  font-size: 30px;

  font-weight: 600;

  line-height: 1.2;
}

.contact-info__lead,
.contact-form__lead {
  margin: 12px 0 0;

  color: var(--muted);

  font-size: 14px;

  line-height: 1.7;
}

.contact-details {
  display: grid;

  gap: 25px;

  margin-top: 34px;
}

.contact-detail {
  display: flex;

  align-items: flex-start;

  gap: 14px;
}

.contact-detail__icon {
  flex: 0 0 34px;

  width: 34px;

  height: 34px;

  color: var(--accent);
}

.contact-detail__icon i {
  font-size: 24px;
}

.contact-detail__label {
  margin-bottom: 3px;

  font-size: 13px;

  font-weight: 600;
}

.contact-detail__value {
  max-width: 330px;

  color: var(--muted);

  font-size: 14px;

  line-height: 1.55;
}

.contact-detail__value a {
  color: var(--muted);
}

.contact-detail__value a:hover {
  color: var(--accent);
}

.contact-note {
  display: flex;

  align-items: flex-start;

  gap: 10px;

  margin-top: 36px;

  padding-top: 22px;

  border-top:
    1px solid var(--border);
}

.contact-note i {
  color: var(--accent);

  font-size: 19px;
}

.contact-note p {
  margin: 0;

  color: var(--muted);

  font-size: 12px;

  line-height: 1.6;
}


/* Contact form */

.contact-form-wrap {
  min-width: 0;
}

.form {
  display: grid;

  gap: 18px;
}

.contact-form {
  margin-top: 28px;
}

.contact-form__row {
  display: grid;

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

  gap: 18px;
}

.contact-field {
  display: grid;

  gap: 7px;
}

.contact-field label {
  font-size: 13px;

  font-weight: 600;
}

input,
select,
textarea {
  display: block;

  width: 100%;

  min-width: 0;

  padding: 12px 13px;

  background: #fff;

  border:
    1px solid rgba(17,24,39,.15);

  border-radius: var(--radius);

  color: var(--text);

  font-size: 14px;

  font-weight: 500;

  outline: none;

  transition:
    border-color .2s ease,
    box-shadow .2s ease;
}

textarea {
  min-height: 145px;

  resize: none;

  line-height: 1.6;
}

input::placeholder,
textarea::placeholder {
  color: #9ca3af;
}

input:hover,
select:hover,
textarea:hover {
  border-color:
    rgba(17,24,39,.28);
}

input:focus,
select:focus,
textarea:focus {
  border-color:
    rgba(238,17,17,.65);

  box-shadow:
    0 0 0 3px
    rgba(238,17,17,.07);
}

.contact-hp {
  position: absolute !important;

  left: -9999px !important;

  width: 1px !important;

  height: 1px !important;

  overflow: hidden !important;
}

.contact-form__footer {
  display: flex;

  align-items: flex-start;

  gap: 20px;

  margin-top: 3px;
}

.contact-consent {
  max-width: 420px;

  margin: 2px 0 0;

  color: var(--muted);

  font-size: 11px;

  line-height: 1.55;
}

.contact-consent a {
  text-decoration: underline;

  text-underline-offset: 2px;
}


/* AJAX response */

.contact-response {
  display: none;
}

.contact-response--success,
.contact-response--error {
  display: flex;

  align-items: flex-start;

  gap: 9px;

  padding: 12px 0;

  border-top:
    1px solid var(--border);

  border-bottom:
    1px solid var(--border);

  font-size: 13px;

  line-height: 1.5;
}

.contact-response i {
  font-size: 19px;
}

.contact-response--success {
  color: #157347;
}

.contact-response--error {
  color: #b42318;
}

#contactSubmit:disabled {
  cursor: not-allowed;

  opacity: .7;
}


/* ==========================================================
   Homepage CTA
   ========================================================== */

.home-cta {
  margin: 0;

  padding: 0;

  background: #fff;

  color: var(--text);

  border-top:
    1px solid var(--border);
}

.home-cta__inner {
  display: grid;

  grid-template-columns:
    minmax(0,1fr) auto;

  align-items: center;

  gap: 70px;

  padding: 44px 0;
}

.home-cta__content {
  max-width: 720px;
}

.home-cta__title {
  margin: 0;

  font-size: 30px;

  font-weight: 600;

  line-height: 1.2;
}

.home-cta__text {
  max-width: 660px;

  margin: 10px 0 0;

  color: var(--muted);

  font-size: 14px;

  line-height: 1.65;
}

.home-cta__action {
  display: flex;

  align-items: center;

  padding-left: 46px;

  border-left:
    1px solid var(--border);
}

.home-cta__button {
  display: inline-flex;

  align-items: center;

  gap: 18px;

  font-size: 14px;

  font-weight: 600;

  white-space: nowrap;
}

.home-cta__button i {
  display: grid;

  width: 40px;

  height: 40px;

  place-items: center;

  background: var(--accent);

  border-radius: var(--radius);

  color: #fff;

  font-size: 18px;

  transition:
    transform .22s ease;
}

.home-cta__button:hover i {
  transform:
    translate(3px,-3px);
}


/* ==========================================================
   Utilities
   ========================================================== */

.small {
  font-size: 12px;
}

.small,
.muted {
  color: var(--muted);
}

.u-mb-10 {
  margin-bottom: 10px;
}

.u-mt-14 {
  margin-top: 14px;
}

.u-mt-16 {
  margin-top: 16px;
}

.u-mt-22 {
  margin-top: 22px;
}


/* ==========================================================
   Footer
   ========================================================== */

.footer {
  margin-top: 0;

  padding: 46px 0 22px;

  overflow: hidden;

  background: var(--bg);

  color: #e5e7eb;
}


/* SVG watermark */

.footer__watermark {
  display: flex;

  align-items: center;

  justify-content: center;

  width: 100%;

  margin-bottom: 42px;

  overflow: hidden;

  color:
    rgba(255,255,255,.075);

  pointer-events: none;

  user-select: none;
}

.footer__watermark svg {
  display: block;

  width: min(820px,88vw);

  height: auto;
}


/* Footer layout */

.footer__layout {
  display: grid;

  grid-template-columns:
    1fr auto 1fr;

  grid-template-areas:
    "contact . copyright"
    ". legal .";

  gap: 28px 50px;
}

.footer__contact-block {
  grid-area: contact;

  min-height: 125px;

  display: flex;

  flex-direction: column;

  justify-content: flex-end;

  align-items: flex-start;
}

.footer__title {
  margin-bottom: 10px;

  color: #fff;

  font-size: 15px;

  font-weight: 600;
}

.footer__contact {
  display: grid;

  gap: 5px;

  font-size: 14px;
}

.footer__contact strong {
  color: #fff;
}

.footer__contact a {
  color: #e5e7eb;

  opacity: .85;
}

.footer__contact a:hover {
  color: #fff;

  opacity: 1;
}


/* Copyright */

.footer__copyright-block {
  grid-area: copyright;

  min-height: 125px;

  display: flex;

  flex-direction: column;

  justify-content: flex-end;

  align-items: flex-end;

  text-align: right;

  font-size: 14px;
}

.footer__tagline {
  margin-top: 2px;

  color:
    rgba(229,231,235,.72);

  font-size: 11px;
}

.footer__developed {
  margin-top: 5px;
  color:
    rgba(229,231,235,.25);
  font-size: 11px;
}

.footer__developed a {
  margin-left:0;
  color: rgba(229,231,235,.30);
  font-weight: 600;
}

.footer__developed a:hover {
  border-bottom: 1px solid;
}


/* Footer legal */

.footer__legal {
  grid-area: legal;

  justify-self: center;

  display: flex;

  align-items: center;

  gap: 8px;

  font-size: 14px;
}

.footer__legal a {
  color: #e5e7eb;

  opacity: .8;
}

.footer__legal a:hover {
  color: #fff;

  opacity: 1;
}

.footer__legal-divider {
  color:
    rgba(229,231,235,.32);
}


/* ==========================================================
   Tablet / Mobile Navigation
   ========================================================== */

@media (max-width:980px) {

  .nav-toggle {
    display: block;

    position: relative;

    z-index: 110;
  }


  /*
   * Side drawer
   */

  .nav {
    position: fixed;

    top: 0;

    right: 0;

    bottom: 0;

    left: auto;

    z-index: 120;

    width:
      min(360px,88vw);

    height: 100vh;

    height: 100dvh;

    display: flex;

    flex-direction: column;

    align-items: stretch;

    gap: 0;

    padding:
      78px 24px 30px;

    overflow-x: hidden;

    overflow-y: auto;

    background: #fff;

    border-left:
      1px solid var(--border);

    box-shadow:
      -16px 0 40px
      rgba(0,0,0,.12);

    transform:
      translateX(105%);

    visibility: hidden;

    transition:
      transform .28s
      cubic-bezier(.22,.61,.36,1),
      visibility .28s ease;
  }


  .nav.is-open {
    transform:
      translateX(0);

    visibility: visible;
  }


  /* Close button */

  .nav-close {
    position: absolute;

    top: 18px;

    right: 20px;

    display: grid;

    width: 40px;

    height: 40px;

    padding: 0;

    place-items: center;

    background: transparent;

    border:
      1px solid var(--border);

    border-radius: var(--radius);

    color: var(--text);

    cursor: pointer;
  }

  .nav-close i {
    font-size: 23px;

    line-height: 1;
  }

  .nav-close:hover {
    border-color:
      var(--accent);

    color: var(--accent);
  }


  /* Mobile main links */

  .nav__link {
    width: 100%;

    display: flex;

    justify-content: space-between;

    padding: 13px 0;

    border-bottom:
      1px solid var(--border);

    font-size: 15px;
  }


  /*
   * Remove desktop red box
   * and keep Contact consistent
   * inside drawer.
   */

  .nav__cta {
    padding: 13px 0;

    background: transparent;

    border-radius: 0;

    color:
      var(--text) !important;
  }

  .nav__cta:hover,
  .nav__cta.is-active {
    color:
      var(--accent) !important;
  }


  /* Capabilities */

  .nav__dropdown {
    width: 100%;
  }

  .nav__dropdown >
  .nav__link {
    display: flex;
  }

  .nav__dropdown
  .nav__menu {
    position: static;

    width: 100%;

    min-width: 0;

    padding: 4px 0 9px 15px;

    background: transparent;

    border: 0;

    border-bottom:
      1px solid var(--border);

    border-radius: 0;

    box-shadow: none;

    opacity: 1;

    visibility: visible;

    transform: none;
  }

  .nav__dropdown
  .nav__link {
    border-bottom: 0;
  }

  .nav__dropdown
  .nav__menu a {
    padding: 8px 0;

    color: var(--muted);

    font-size: 13px;
  }

  .nav__chevron {
    display: none;
  }


  /* Backdrop */

  .nav-backdrop {
    position: fixed;

    inset: 0;

    z-index: 100;

    display: block;

    background:
      rgba(11,18,32,.52);

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transition:
      opacity .25s ease,
      visibility .25s ease;
  }

  .nav-backdrop.is-open {
    opacity: 1;

    visibility: visible;

    pointer-events: auto;
  }


  /* ========================================================
     Tablet Hero
     ======================================================== */

  .hero__inner {
    display: flex;

    flex-direction: column;

    gap: 0;
  }


  .hero__media {
    order: 1;

    width: 100vw;

    min-height: 0;

    aspect-ratio:
      16 / 7;

    margin-left:
      calc(50% - 50vw);

    margin-right:
      calc(50% - 50vw);

    background: var(--bg);
  }


  /*
   * Image is on top on tablet.
   * Fade only at bottom.
   */

  .hero__media::before {
    inset: 0;

    background:
      url("../img/hero-welding-1600.jpg")
      center center / cover no-repeat;

    transform: none;


    -webkit-mask-image:
      linear-gradient(
        180deg,

        #000 0%,

        #000 68%,

        rgba(0,0,0,.94) 75%,

        rgba(0,0,0,.75) 82%,

        rgba(0,0,0,.44) 90%,

        transparent 100%
      );


    mask-image:
      linear-gradient(
        180deg,

        #000 0%,

        #000 68%,

        rgba(0,0,0,.94) 75%,

        rgba(0,0,0,.75) 82%,

        rgba(0,0,0,.44) 90%,

        transparent 100%
      );
  }


  /*
   * Tablet does not need the desktop
   * horizontal blur strip.
   */

  .hero__media::after {
    top: 0;

    right: 0;

    bottom: 0;

    left: 0;

    width: auto;

    background:
      linear-gradient(
        180deg,

        transparent 68%,

        rgba(11,18,32,.04) 75%,

        rgba(11,18,32,.15) 83%,

        rgba(11,18,32,.46) 92%,

        var(--bg) 100%
      );

    filter: none;

    transform: none;

    opacity: 1;

    -webkit-mask-image: none;

    mask-image: none;
  }


  .hero__content {
    order: 2;

    width: 100%;

    padding:
      42px 0 46px;
  }


  .hero__title {
    font-size: 38px;
  }


  /* Common tablet grids */

  .grid-2,
  .about-story__grid,
  .about-capabilities__layout,
  .capability-row {
    grid-template-columns: 1fr;
  }

  .grid-3,
  .industries-grid,
  .about-pillars {
    grid-template-columns:
      repeat(2,1fr);
  }


  .about-story__grid {
    gap: 36px;
  }

  .about-story__image {
    aspect-ratio: 16 / 9;
  }

  .about-capabilities__layout {
    gap: 32px;
  }


  /* Capabilities */

  .capability-row,
  .capability-row--reverse {
    gap: 36px;
  }

  .capability-row--reverse
  .capability-media,
  .capability-media {
    order: 1;
  }

  .capability-row--reverse
  .capability-content,
  .capability-content {
    order: 2;
  }

  .capability-content {
    max-width: 680px;
  }

  .capabilities-nav {
    grid-template-columns:
      repeat(5,minmax(150px,1fr));

    overflow-x: auto;
  }

  .capabilities-nav a {
    white-space: nowrap;
  }


  /* Contact */

  .contact-layout {
    grid-template-columns:
      1fr 1.2fr;

    gap: 50px;
  }


  /* Homepage CTA */

  .home-cta__inner {
    grid-template-columns: 1fr;

    gap: 26px;

    padding: 40px 0;
  }

  .home-cta__action {
    padding-left: 0;

    border-left: 0;
  }

}


/* ==========================================================
   Mobile
   ========================================================== */

@media (max-width:650px) {

  .container {
    width: 90%;
  }


  /* Topbar */

  .topbar {
    font-size: 11px;
  }

  .topbar__inner {
    flex-direction: column;

    align-items: flex-start;

    gap: 3px;
  }

  .topbar__right {
    display: none;
  }


  /* Header */

  .header__inner {
    min-height: 66px;

    padding: 10px 0;
  }

  .brand {
    min-width: 0;
  }

  .brand img {
    max-height: 39px;
  }


  /* ========================================================
     Mobile Hero
     ======================================================== */

  .hero__media {
    aspect-ratio:
      16 / 8.5;
  }


  /*
   * Mobile:
   * no blur.
   *
   * Just a small fade at bottom.
   */

  .hero__media::before {
    background-position:
      center center;


    -webkit-mask-image:
      linear-gradient(
        180deg,

        #000 0%,

        #000 78%,

        rgba(0,0,0,.90) 85%,

        rgba(0,0,0,.55) 92%,

        transparent 100%
      );


    mask-image:
      linear-gradient(
        180deg,

        #000 0%,

        #000 78%,

        rgba(0,0,0,.90) 85%,

        rgba(0,0,0,.55) 92%,

        transparent 100%
      );
  }


  .hero__media::after {
    display: none;
  }


  .hero__content {
    padding:
      30px 0 38px;
  }

  .hero__kicker {
    margin-bottom: 8px;

    font-size: 10px;
  }

  .hero__title {
    margin: 0 0 12px;

    font-size: 32px;
  }

  .hero__sub {
    font-size: 13px;

    line-height: 1.55;
  }

  .hero__actions {
    gap: 9px;

    margin-top: 18px;
  }

  .hero__actions .btn {
    padding: 10px 12px;

    font-size: 12px;
  }


  /* Hero stats */

  .hero__strip {
    display: grid;

    grid-template-columns:
      repeat(3,minmax(0,1fr));

    gap: 12px;

    margin-top: 26px;
  }

  .strip {
    display: grid;

    grid-template-columns:
      auto 1fr;

    grid-template-areas:
      "icon title"
      "desc desc";

    column-gap: 6px;

    row-gap: 5px;

    align-items: center;

    min-width: 0;
  }

  .strip__icon {
    grid-area: icon;

    width: 22px;

    height: 22px;

    display: flex;

    align-items: center;

    justify-content:
      flex-start;
  }

  .strip__icon i {
    font-size: 19px;
  }

  .strip__content {
    display: contents;
  }

  .strip__n {
    grid-area: title;

    font-size: 12px;

    line-height: 1.2;

    white-space: nowrap;
  }

  .strip__t {
    grid-area: desc;

    margin: 0;

    font-size: 9px;

    line-height: 1.35;
  }


  /* Sections */

  .section {
    padding: 50px 0;
  }

  .section__head {
    flex-direction: column;

    align-items: flex-start;

    margin-bottom: 24px;
  }

  .section__title {
    font-size: 26px;
  }

  .grid-2,
  .grid-3,
  .industries-grid,
  .about-pillars,
  .about-story__points {
    grid-template-columns: 1fr;
  }

  .grid-2 {
    gap: 28px;
  }

  .media {
    min-height: 300px;
  }


  /* About */

  .about-intro {
    padding: 48px 0 30px;
  }

  .about-intro__title {
    font-size: 36px;
  }

  .about-intro__lead {
    font-size: 16px;
  }

  .about-story {
    padding-top: 10px;
  }

  .about-story__image {
    aspect-ratio: 4 / 3;
  }

  .about-story__title {
    font-size: 27px;
  }


  /* Capabilities */

  .capabilities-intro {
    padding-top: 48px;
  }

  .capabilities-intro__title {
    font-size: 36px;
  }

  .capabilities-intro__lead {
    margin-top: 16px;

    font-size: 16px;
  }

  .capabilities-nav {
    margin-top: 34px;
  }

  .capabilities-nav a {
    padding: 14px 16px;

    font-size: 12px;
  }

  .capability-row {
    gap: 28px;
  }

  .capability-media {
    aspect-ratio: 16 / 10;
  }

  .capability-title {
    font-size: 28px;
  }

  .capability-lead {
    font-size: 14px;
  }

  .capability-list {
    gap: 10px;
  }

  .capability-list li {
    font-size: 13px;
  }

  .capabilities-contact {
    padding-bottom: 52px;
  }

  .capabilities-contact__inner {
    flex-direction: column;

    align-items: flex-start;

    gap: 22px;

    padding: 28px 0;
  }

  .capabilities-contact__inner h2 {
    font-size: 24px;
  }


  /* Contact */

  .contact-intro {
    padding-bottom: 28px;
  }

  .contact-section {
    padding-top: 18px;
  }

  .contact-layout {
    grid-template-columns: 1fr;

    gap: 54px;
  }

  .contact-info {
    max-width: none;
  }

  .contact-info__title,
  .contact-form__title {
    font-size: 27px;
  }

  .contact-details {
    gap: 20px;

    margin-top: 28px;
  }

  .contact-form {
    margin-top: 24px;
  }

  .contact-form__row {
    grid-template-columns: 1fr;

    gap: 18px;
  }

  .contact-form__footer {
    flex-direction: column;

    gap: 13px;
  }

  .contact-form__footer .btn {
    width: 100%;
  }

  .contact-consent {
    max-width: none;
  }


  /* Homepage CTA */

  .home-cta__inner {
    gap: 22px;

    padding: 36px 0;
  }

  .home-cta__title {
    font-size: 25px;

    line-height: 1.25;
  }

  .home-cta__text {
    font-size: 13px;
  }

  .home-cta__button {
    gap: 14px;

    font-size: 13px;
  }

  .home-cta__button i {
    width: 36px;

    height: 36px;

    font-size: 17px;
  }


  /* Footer */

  .footer {
    padding:
      34px 0 24px;
  }

  .footer__watermark {
    margin-bottom: 30px;
  }

  .footer__watermark svg {
    width: 92vw;
  }

  .footer__layout {
    grid-template-columns: 1fr;

    grid-template-areas:
      "contact"
      "legal"
      "copyright";

    gap: 0;
  }

  .footer__contact-block {
    min-height: auto;

    align-items: center;

    margin-bottom: 26px;

    text-align: center;
  }

  .footer__contact {
    justify-items: center;
  }

  .footer__legal {
    justify-self: center;

    margin-bottom: 25px;

    font-size: 13px;
  }

  .footer__copyright-block {
    min-height: auto;

    align-items: center;

    text-align: center;

    font-size: 13px;
  }

  .footer__tagline {
    max-width: 300px;
  }

}


/* ==========================================================
   Small Mobile
   ========================================================== */

@media (max-width:420px) {

  .nav {
    width: 92vw;

    padding-left: 20px;

    padding-right: 20px;
  }

  .hero__title {
    font-size: 29px;
  }

  .strip__n {
    font-size: 11px;
  }

  .strip__t {
    font-size: 8px;
  }

}