.elementor-232 .elementor-element.elementor-element-f569cec{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}/* Start custom CSS for html, class: .elementor-element-5eaeec9 *//* =========================================================
   3PUMP HOME DESIGN SYSTEM
========================================================= */

:root {

  --tp-red: #D71920;
  --tp-red-dark: #B7141A;

  --tp-petrol: #183A46;
  --tp-petrol-dark: #102C36;

  --tp-white: #FFFFFF;
  --tp-black: #171B1D;
  --tp-text: #5C6468;

  --tp-light: #F6F8F9;
  --tp-border: #E2E8F0;

}


/* =========================================================
   BASE
========================================================= */

.tp-home-hero,
.tp-manufacture,
.tp-markets,
.tp-showcase,
.tp-why,
.tp-insights {

  font-family:
    Inter,
    Arial,
    Helvetica,
    sans-serif;

}


.tp-shell {

  width:
    min(
      calc(100% - 64px),
      1500px
    );

  margin-inline:
    auto;

}


/* =========================================================
   COMMON KICKER
========================================================= */

.tp-kicker {

  display: flex;

  align-items: center;

  gap: 10px;

  margin-bottom: 14px;

  color:
    var(--tp-black);

  font-size: 8px;

  font-weight: 800;

  letter-spacing: .20em;

}


.tp-kicker > span {

  width: 27px;

  height: 2px;

  flex: 0 0 auto;

  background:
    var(--tp-red);

}


.tp-kicker-light {

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

}


/* =========================================================
   HEADINGS
========================================================= */

.tp-section-title {

  margin: 0;

  color:
    var(--tp-black);

  font-size:
    clamp(
      40px,
      3.9vw,
      62px
    );

  font-weight: 820;

  line-height: .97;

  letter-spacing: -.045em;

}


.tp-section-copy {

  max-width: 570px;

  margin: 0;

  color:
    var(--tp-text);

  font-size: 12.5px;

  line-height: 1.7;

}


.tp-section-head {

  display: grid;

  grid-template-columns:
    minmax(0,1.25fr)
    minmax(340px,.75fr);

  align-items: end;

  gap: 70px;

  margin-bottom: 32px;

}


/* =========================================================
   BUTTON SYSTEM
========================================================= */

.tp-actions {

  display: flex;

  flex-wrap: wrap;

  gap: 10px;

  margin-top: 28px;

}


.tp-btn {

  min-height: 50px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  padding:
    0
    22px;

  text-decoration: none;

  font-size: 10.5px;

  font-weight: 720;

  transition:
    background .25s ease,
    color .25s ease,
    border-color .25s ease,
    transform .25s ease;

}


.tp-btn-red {

  color:
    #FFFFFF;

  background:
    var(--tp-red);

  border:
    1.5px solid
    var(--tp-red);

}


.tp-btn-red:hover {

  color:
    #FFFFFF;

  background:
    var(--tp-red-dark);

  border-color:
    var(--tp-red-dark);

  transform:
    translateY(-2px);

}


.tp-btn-ghost-white {

  color:
    #FFFFFF;

  background:
    transparent;

  border:
    1.5px solid
    #FFFFFF;

}


.tp-btn-ghost-white:hover {

  color:
    #FFFFFF;

  background:
    var(--tp-petrol);

  border-color:
    var(--tp-petrol);

  transform:
    translateY(-2px);

}


.tp-btn-outline-dark {

  color:
    var(--tp-petrol);

  background:
    transparent;

  border:
    1.5px solid
    var(--tp-petrol);

}


.tp-btn-outline-dark:hover {

  color:
    #FFFFFF;

  background:
    var(--tp-petrol);

  border-color:
    var(--tp-petrol);

  transform:
    translateY(-2px);

}


/* =========================================================
   TEXT LINKS
========================================================= */

.tp-text-link {

  width:
    fit-content;

  display:
    inline-block;

  margin-top:
    17px;

  padding-bottom:
    5px;

  color:
    var(--tp-petrol);

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

  text-decoration:
    none;

  font-size:
    10px;

  font-weight:
    750;

}


.tp-text-link:hover {

  color:
    var(--tp-red);

  border-color:
    var(--tp-red);

}


.tp-text-link-light {

  width:
    fit-content;

  display:
    inline-block;

  margin-top:
    11px;

  padding-bottom:
    4px;

  color:
    #FFFFFF;

  border-bottom:
    1px solid
    rgba(255,255,255,.45);

  text-decoration:
    none;

  font-size:
    9px;

  font-weight:
    700;

}


.tp-text-link-light:hover {

  border-color:
    #FFFFFF;

}


/* =========================================================
   REVEAL
========================================================= */

.tp-reveal {

  opacity: 0;

  transform:
    translateY(18px);

  transition:
    opacity .7s ease,
    transform .7s cubic-bezier(.2,.7,.2,1);

}


.tp-reveal.tp-visible {

  opacity: 1;

  transform:
    translateY(0);

}


/* =========================================================
   01 — HERO
========================================================= */

.tp-home-hero {

  position: relative;

  min-height: 800px;

  display: flex;

  align-items: center;

  overflow: hidden;

  background-image:
    url('https://3pump.co/wp-content/uploads/2026/08/3pump-fire-pump-systems-hero.jpg');

  background-size:
    cover;

  background-position:
    center;

  background-repeat:
    no-repeat;

}


.tp-home-hero-overlay {

  position: absolute;

  inset: 0;

  background:

    linear-gradient(
      90deg,
      rgba(9,32,40,.92) 0%,
      rgba(12,39,48,.78) 28%,
      rgba(15,45,54,.45) 53%,
      rgba(12,35,42,.10) 77%,
      rgba(12,35,42,.02) 100%
    );

}


.tp-home-hero-inner {

  position: relative;

  z-index: 2;

}


.tp-home-hero-content {

  width:
    min(
      670px,
      50vw
    );

}


.tp-home-hero h1 {

  margin: 0;

  color:
    #FFFFFF;

  font-size:
    clamp(
      52px,
      5vw,
      80px
    );

  font-weight: 820;

  line-height: .97;

  letter-spacing: -.046em;

}


.tp-home-hero h1 strong {

  display: block;

  margin-top: 7px;

  color:
    #FFFFFF;

  font-weight: inherit;

}


.tp-home-hero p {

  max-width:
    570px;

  margin:
    23px
    0
    0;

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

  font-size:
    15px;

  line-height:
    1.7;

}


/* HERO META */

.tp-hero-meta {

  width:
    fit-content;

  display:
    grid;

  grid-template-columns:
    repeat(3,minmax(145px,auto));

  margin-top:
    38px;

  background:
    rgba(15,44,53,.68);

  border:
    1px solid
    rgba(255,255,255,.14);

  backdrop-filter:
    blur(7px);

}


.tp-hero-meta > div {

  min-height:
    64px;

  display:
    flex;

  flex-direction:
    column;

  justify-content:
    center;

  gap:
    5px;

  padding:
    12px
    16px;

  border-right:
    1px solid
    rgba(255,255,255,.12);

}


.tp-hero-meta > div:last-child {

  border-right:
    0;

}


.tp-hero-meta span {

  color:
    var(--tp-red);

  font-size:
    7px;

  font-weight:
    850;

}


.tp-hero-meta strong {

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

  font-size:
    9px;

  font-weight:
    600;

}


/* =========================================================
   02 — TICKER
========================================================= */

.tp-ticker {

  height:
    39px;

  display:
    flex;

  align-items:
    center;

  overflow:
    hidden;

  background:
    var(--tp-petrol);

  border-top:
    1px solid
    rgba(255,255,255,.16);

  border-bottom:
    1px solid
    rgba(255,255,255,.16);

}


.tp-ticker-track {

  display:
    flex;

  width:
    max-content;

  will-change:
    transform;

}


.tp-ticker-group {

  flex-shrink:
    0;

  display:
    flex;

  align-items:
    center;

  gap:
    23px;

  padding-right:
    23px;

  white-space:
    nowrap;

}


.tp-ticker-group span {

  color:
    #CBD5E1;

  font-size:
    8px;

  font-weight:
    600;

  letter-spacing:
    .17em;

}


.tp-ticker-group i {

  width:
    2px;

  height:
    2px;

  display:
    block;

  border-radius:
    50%;

  background:
    rgba(255,255,255,.36);

}


/* =========================================================
   02 — MANUFACTURE
========================================================= */

.tp-manufacture {

  background:
    #FFFFFF;

}


.tp-manufacture-grid {

  display:
    grid;

  grid-template-columns:
    minmax(0,.95fr)
    minmax(520px,1.05fr);

  grid-template-rows:
    minmax(560px,auto)
    112px;

}


/* IMAGE */

.tp-manufacture-visual {

  position:
    relative;

  min-width:
    0;

  overflow:
    hidden;

  background:
    #F4F6F7;

}


.tp-manufacture-image {

  position:
    absolute;

  inset:
    0;

  overflow:
    hidden;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  background:
    #F4F6F7;

}


.tp-manufacture-image-bg {

  position:
    absolute;

  inset:
    -18px;

  background-position:
    center;

  background-size:
    cover;

  filter:
    blur(18px)
    brightness(.82)
    saturate(.8);

  transform:
    scale(1.08);

  opacity:
    .58;

}


.tp-manufacture-image > img {

  position:
    relative;

  z-index:
    2;

  width:
    100%;

  height:
    100%;

  display:
    block;

  object-fit:
    contain;

  object-position:
    center;

  transition:
    transform .8s ease;

}


.tp-manufacture-image:hover > img {

  transform:
    scale(1.015);

}


.tp-manufacture-image-shade {

  position:
    absolute;

  inset:
    0;

  z-index:
    3;

  pointer-events:
    none;

  background:

    linear-gradient(
      180deg,
      rgba(10,25,30,.02) 50%,
      rgba(10,25,30,.13) 100%
    );

}


/* IMAGE TAG */

.tp-image-tag {

  position:
    absolute;

  z-index:
    5;

  top:
    20px;

  left:
    20px;

  display:
    flex;

  flex-direction:
    column;

  gap:
    3px;

  padding:
    9px
    11px;

  color:
    #FFFFFF;

  background:
    rgba(16,44,54,.88);

  border-left:
    2px solid
    var(--tp-red);

}


.tp-image-tag span {

  color:
    var(--tp-red);

  font-size:
    7px;

  font-weight:
    850;

}


.tp-image-tag strong {

  font-size:
    7px;

  letter-spacing:
    .13em;

}


/* CONTENT */

.tp-manufacture-content {

  min-width:
    0;

  padding:
    46px
    52px
    32px;

  background:
    #FFFFFF;

}


.tp-manufacture-intro {

  margin-top:
    17px;

}


.tp-manufacture-list {

  margin-top:
    27px;

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

}


.tp-manufacture-item {

  display:
    grid;

  grid-template-columns:
    34px
    1fr;

  gap:
    14px;

  padding:
    18px
    0;

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

}


.tp-item-number {

  color:
    var(--tp-red);

  font-size:
    8px;

  font-weight:
    850;

}


.tp-small-label {

  display:
    block;

  margin-bottom:
    6px;

  color:
    #727C81;

  font-size:
    7px;

  font-weight:
    600;

  letter-spacing:
    .17em;

}


.tp-small-label-light {

  color:
    #CBD5E1;

}


.tp-manufacture-item h3 {

  margin:
    0
    0
    6px;

  color:
    var(--tp-black);

  font-size:
    19px;

}


.tp-manufacture-item p {

  max-width:
    510px;

  margin:
    0;

  color:
    var(--tp-text);

  font-size:
    10px;

  line-height:
    1.6;

}


/* BOTTOM DATA */

.tp-manufacture-data {

  display:
    grid;

  grid-template-columns:
    .9fr
    1.1fr
    1.5fr;

  background:
    var(--tp-petrol);

}


.tp-manufacture-data > div {

  display:
    flex;

  flex-direction:
    column;

  justify-content:
    center;

  gap:
    6px;

  padding:
    0
    20px;

  border-right:
    1px solid
    rgba(255,255,255,.13);

}


.tp-manufacture-data > div:last-child {

  border-right:
    0;

}


.tp-manufacture-data span {

  color:
    #CBD5E1;

  font-size:
    7px;

  font-weight:
    600;

  letter-spacing:
    .15em;

}


.tp-manufacture-data strong {

  color:
    #FFFFFF;

  font-size:
    11px;

}


/* COMPLETE SYSTEM */

.tp-complete-system {

  display:
    flex;

  flex-direction:
    column;

  justify-content:
    center;

  padding:
    18px
    26px;

  color:
    #FFFFFF;

  background:
    var(--tp-petrol-dark);

}


.tp-complete-system h3 {

  margin:
    0
    0
    6px;

  color:
    #FFFFFF;

  font-size:
    18px;

}


.tp-complete-system p {

  max-width:
    630px;

  margin: 0;

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

  font-size:
    8.5px;

  line-height:
    1.55;

}


/* =========================================================
   03 — MARKETS
========================================================= */

.tp-markets {

  padding:
    68px
    0
    72px;

  background:
    #FFFFFF;

}


.tp-market-grid {

  display:
    grid;

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

  grid-template-rows:
    270px
    270px
    205px;

  gap:
    10px;

}


.tp-market-card {

  position:
    relative;

  overflow:
    hidden;

  color:
    #FFFFFF;

  text-decoration:
    none;

  isolation:
    isolate;

}


.tp-market-main {

  grid-column:
    1 / span 7;

  grid-row:
    1 / span 2;

}


.tp-market-industrial {

  grid-column:
    8 / span 5;

  grid-row:
    1;

}


.tp-market-warehouse {

  grid-column:
    8 / span 5;

  grid-row:
    2;

}


.tp-market-infrastructure {

  grid-column:
    1 / span 8;

  grid-row:
    3;

}


.tp-market-card > img {

  position:
    absolute;

  inset:
    0;

  z-index:
    -3;

  width:
    100%;

  height:
    100%;

  object-fit:
    cover;

  transition:
    transform .8s ease;

}


.tp-market-card:hover > img {

  transform:
    scale(1.035);

}


.tp-card-overlay {

  position:
    absolute;

  inset:
    0;

  z-index:
    -2;

  background:

    linear-gradient(
      180deg,
      rgba(12,38,46,.03) 20%,
      rgba(12,38,46,.18) 52%,
      rgba(10,35,43,.91) 100%
    );

}


.tp-market-main
.tp-card-overlay {

  background:

    linear-gradient(
      0deg,
      rgba(10,34,42,.94) 0%,
      rgba(10,34,42,.36) 42%,
      rgba(10,34,42,.03) 70%
    );

}


.tp-card-number {

  position:
    absolute;

  top:
    18px;

  right:
    18px;

  color:
    var(--tp-red);

  font-size:
    8px;

  font-weight:
    850;

}


.tp-market-card-content {

  position:
    absolute;

  left:
    0;

  right:
    0;

  bottom:
    0;

  padding:
    25px;

}


.tp-market-main
.tp-market-card-content {

  max-width:
    620px;

  padding:
    35px;

}


.tp-photo-label {

  width:
    fit-content;

  display:
    inline-block;

  margin-bottom:
    9px;

  padding:
    6px
    8px;

  color:
    #FFFFFF;

  background:
    rgba(24,58,70,.90);

  border-left:
    2px solid
    var(--tp-red);

  font-size:
    6.5px;

  font-weight:
    650;

  letter-spacing:
    .15em;

}


.tp-market-card h3 {

  margin:
    0;

  color:
    #FFFFFF;

  font-size:
    clamp(
      23px,
      2vw,
      33px
    );

  line-height:
    1.05;

}


.tp-market-main h3 {

  font-size:
    clamp(
      37px,
      3.2vw,
      50px
    );

}


.tp-market-card p {

  max-width:
    510px;

  margin:
    9px
    0
    0;

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

  font-size:
    9.5px;

  line-height:
    1.6;

}


.tp-photo-link {

  display:
    inline-block;

  margin-top:
    13px;

  padding-bottom:
    4px;

  color:
    #FFFFFF;

  border-bottom:
    1px solid
    rgba(255,255,255,.50);

  font-size:
    8.5px;

  font-weight:
    700;

}


.tp-market-card:hover
.tp-photo-link {

  border-color:
    #FFFFFF;

}


.tp-engineering-note {

  grid-column:
    9 / span 4;

  grid-row:
    3;

  display:
    flex;

  flex-direction:
    column;

  justify-content:
    center;

  padding:
    25px;

  color:
    #FFFFFF;

  background:
    var(--tp-petrol);

}


.tp-engineering-note h3 {

  max-width:
    390px;

  margin:
    7px
    0
    8px;

  color:
    #FFFFFF;

  font-size:
    22px;

  line-height:
    1.15;

}


.tp-engineering-note p {

  margin:
    0;

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

  font-size:
    9px;

  line-height:
    1.6;

}


/* =========================================================
   04 — INTERACTIVE PRODUCT SHOWCASE
========================================================= */

.tp-showcase {

  padding:
    72px
    0
    76px;

  background:
    var(--tp-light);

}


.tp-showcase-box {

  min-height:
    600px;

  display:
    grid;

  grid-template-columns:
    minmax(0,1.02fr)
    minmax(480px,.98fr);

  background:
    #FFFFFF;

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

}


/* PRODUCT VISUAL */

.tp-showcase-visual {

  position:
    relative;

  min-width:
    0;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  overflow:
    hidden;

  padding:
    40px;

  background:
    #F8FAFC;

}


.tp-showcase-image-bg {

  position:
    absolute;

  inset:
    0;

  background:

    radial-gradient(
      circle at center,
      rgba(24,58,70,.075) 0%,
      rgba(24,58,70,.025) 42%,
      transparent 68%
    );

}


.tp-showcase-visual > img {

  position:
    relative;

  z-index:
    2;

  width:
    min(
      100%,
      780px
    );

  max-height:
    500px;

  object-fit:
    contain;

  display:
    block;

  transition:
    transform .7s
    cubic-bezier(.2,.7,.2,1);

}


.tp-showcase-box:hover
.tp-showcase-visual > img {

  transform:
    scale(1.015);

}


.tp-showcase-visual-label {

  position:
    absolute;

  left:
    22px;

  bottom:
    20px;

  z-index:
    3;

  padding:
    7px
    9px;

  color:
    #FFFFFF;

  background:
    var(--tp-petrol);

  border-left:
    2px solid
    var(--tp-red);

  font-size:
    6.5px;

  font-weight:
    650;

  letter-spacing:
    .16em;

}


/* CONTENT */

.tp-showcase-content {

  min-width:
    0;

  padding:
    42px
    46px;

  display:
    flex;

  flex-direction:
    column;

  justify-content:
    center;

}


/* TABS */

.tp-showcase-tabs {

  display:
    grid;

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

  margin-bottom:
    38px;

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

}


.tp-showcase-tab {

  min-height:
    48px;

  padding:
    0
    15px;

  cursor:
    pointer;

  color:
    var(--tp-petrol);

  background:
    transparent;

  border:
    0;

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

  font-family:
    inherit;

  font-size:
    10px;

  font-weight:
    750;

  transition:
    background .25s ease,
    color .25s ease;

}


.tp-showcase-tab:last-child {

  border-right:
    0;

}


.tp-showcase-tab:hover,
.tp-showcase-tab.is-active {

  color:
    #FFFFFF;

  background:
    var(--tp-petrol);

}


/* DYNAMIC AREA */

.tp-showcase-dynamic {

  opacity:
    1;

  transform:
    translateY(0);

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

}


.tp-showcase-dynamic.is-changing {

  opacity:
    0;

  transform:
    translateY(7px);

}


.tp-showcase-dynamic h3 {

  margin:
    7px
    0
    0;

  color:
    var(--tp-black);

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

  font-weight:
    820;

  line-height:
    1;

  letter-spacing:
    -.04em;

}


.tp-showcase-dynamic > p {

  max-width:
    540px;

  margin:
    17px
    0
    0;

  color:
    var(--tp-text);

  font-size:
    11.5px;

  line-height:
    1.65;

}


/* SPECS */

.tp-showcase-specs {

  margin:
    28px
    0
    30px;

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

}


.tp-showcase-specs > div {

  min-height:
    52px;

  display:
    grid;

  grid-template-columns:
    150px
    1fr;

  align-items:
    center;

  gap:
    20px;

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

}


.tp-showcase-specs span {

  color:
    #7B858A;

  font-size:
    7px;

  font-weight:
    650;

  letter-spacing:
    .14em;

}


.tp-showcase-specs strong {

  color:
    var(--tp-black);

  font-size:
    11px;

  font-weight:
    720;

}


/* =========================================================
   05 — WHY 3PUMP
========================================================= */

.tp-why {

  padding:
    72px
    0;

  color:
    #FFFFFF;

  background:
    var(--tp-petrol-dark);

}


.tp-why-grid {

  display:
    grid;

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

  gap:
    80px;

  align-items:
    start;

}


/* INTRO */

.tp-why-intro h2 {

  max-width:
    570px;

  margin:
    0;

  color:
    #FFFFFF;

  font-size:
    clamp(
      42px,
      4vw,
      64px
    );

  font-weight:
    820;

  line-height:
    .97;

  letter-spacing:
    -.04em;

}


.tp-why-intro h2 strong {

  display:
    block;

  color:
    #FFFFFF;

  font-weight:
    inherit;

}


.tp-why-intro p {

  max-width:
    500px;

  margin:
    20px
    0
    0;

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

  font-size:
    12px;

  line-height:
    1.7;

}


/* =========================================================
   WHY — VISUAL GRID
========================================================= */

.tp-why-points {

  display:
    grid;

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

  border-top:
    1px solid
    rgba(255,255,255,.12);

  border-right:
    1px solid
    rgba(255,255,255,.12);

}


/* CARD */

.tp-why-point {

  position:
    relative;

  min-width:
    0;

  min-height:
    290px;

  display:
    grid;

  grid-template-rows:
    115px
    minmax(0,1fr);

  overflow:
    hidden;

  padding:
    0;

  background:
    rgba(255,255,255,.012);

  border-left:
    1px solid
    rgba(255,255,255,.12);

  border-bottom:
    1px solid
    rgba(255,255,255,.12);

}


/* =========================================================
   WHY IMAGE
========================================================= */

.tp-why-point-image {

  position:
    relative;

  width:
    100%;

  height:
    100%;

  overflow:
    hidden;

  background:
    rgba(255,255,255,.04);

}


.tp-why-point-image::after {

  content: "";

  position:
    absolute;

  inset:
    0;

  pointer-events:
    none;

  background:

    linear-gradient(
      180deg,
      rgba(16,44,54,.02) 25%,
      rgba(16,44,54,.16) 100%
    );

}


.tp-why-point-image img {

  width:
    100%;

  height:
    100%;

  display:
    block;

  object-fit:
    cover;

  object-position:
    center;

  filter:
    saturate(.88)
    contrast(1.03);

  transform:
    scale(1.001);

  transition:
    transform .7s cubic-bezier(.2,.7,.2,1),
    filter .3s ease;

}


.tp-why-point:hover
.tp-why-point-image img {

  transform:
    scale(1.045);

  filter:
    saturate(1)
    contrast(1.04);

}


/* =========================================================
   WHY TEXT
========================================================= */

.tp-why-point-copy {

  min-width:
    0;

  padding:
    21px
    24px
    25px;

}


.tp-why-point-copy > span {

  display:
    block;

  margin-bottom:
    16px;

  color:
    var(--tp-red);

  font-size:
    8px;

  font-weight:
    850;

  letter-spacing:
    .10em;

}


.tp-why-point-copy h3 {

  margin:
    0
    0
    8px;

  color:
    #FFFFFF;

  font-size:
    clamp(
      18px,
      1.4vw,
      21px
    );

  font-weight:
    720;

  line-height:
    1.12;

  letter-spacing:
    -.02em;

}


.tp-why-point-copy p {

  max-width:
    350px;

  margin:
    0;

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

  font-size:
    9.5px;

  line-height:
    1.58;

}


/* tiny brand hover accent */

.tp-why-point::after {

  content: "";

  position:
    absolute;

  left:
    0;

  bottom:
    0;

  z-index:
    5;

  width:
    0;

  height:
    2px;

  background:
    var(--tp-red);

  transition:
    width .38s
    cubic-bezier(.2,.7,.2,1);

}


.tp-why-point:hover::after {

  width:
    100%;

}


/* =========================================================
   06 — INSIGHTS
========================================================= */

.tp-insights {

  padding:
    70px
    0
    76px;

  background:
    #FFFFFF;

}


.tp-insights-grid {

  display:
    grid;

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

  gap:
    12px;

}


.tp-insight-card {

  min-width:
    0;

}


.tp-insight-card a {

  display:
    block;

  color:
    inherit;

  text-decoration:
    none;

}


.tp-insight-image {

  aspect-ratio:
    4 / 3;

  overflow:
    hidden;

  background:
    var(--tp-light);

}


.tp-insight-image img {

  width:
    100%;

  height:
    100%;

  display:
    block;

  object-fit:
    cover;

  object-position:
    center;

  transition:
    transform .7s ease;

}


.tp-insight-card:hover
.tp-insight-image img {

  transform:
    scale(1.035);

}


.tp-insight-card > a > span {

  display:
    block;

  margin-top:
    15px;

  color:
    var(--tp-red);

  font-size:
    7px;

  font-weight:
    750;

  letter-spacing:
    .13em;

}


.tp-insight-card h3 {

  margin:
    8px
    0
    0;

  color:
    var(--tp-black);

  font-size:
    18px;

  line-height:
    1.25;

}


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

@media (max-width: 1050px) {

  .tp-shell {

    width:
      calc(100% - 42px);

  }


  .tp-section-head {

    grid-template-columns:
      1fr;

    gap:
      17px;

  }


  /* HERO */

  .tp-home-hero {

    min-height:
      740px;

    background-position:
      61% center;

  }


  .tp-home-hero-content {

    width:
      min(
        620px,
        62vw
      );

  }


  /* MANUFACTURING */

  .tp-manufacture-grid {

    display:
      flex;

    flex-direction:
      column;

  }


  .tp-manufacture-visual {

    width:
      100%;

    height:
      auto;

    aspect-ratio:
      16 / 9;

  }


  .tp-manufacture-image {

    position:
      relative;

    width:
      100%;

    height:
      100%;

  }


  .tp-manufacture-image > img {

    width:
      100%;

    height:
      100%;

    object-fit:
      contain;

  }


  .tp-manufacture-content {

    padding:
      40px
      32px;

  }


  .tp-manufacture-data {

    min-height:
      105px;

  }


  .tp-complete-system {

    min-height:
      130px;

  }


  /* MARKETS */

  .tp-market-grid {

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

    grid-template-rows:
      410px
      310px
      270px
      auto;

  }


  .tp-market-main {

    grid-column:
      1 / 3;

    grid-row:
      1;

  }


  .tp-market-industrial {

    grid-column:
      1;

    grid-row:
      2;

  }


  .tp-market-warehouse {

    grid-column:
      2;

    grid-row:
      2;

  }


  .tp-market-infrastructure {

    grid-column:
      1 / 3;

    grid-row:
      3;

  }


  .tp-engineering-note {

    grid-column:
      1 / 3;

    grid-row:
      4;

    min-height:
      170px;

  }


  /* SHOWCASE */

  .tp-showcase-box {

    min-height:
      0;

    grid-template-columns:
      1fr;

  }


  .tp-showcase-visual {

    min-height:
      480px;

    padding:
      35px;

  }


  .tp-showcase-visual > img {

    max-height:
      420px;

  }


  .tp-showcase-content {

    padding:
      38px
      34px;

  }


  /* WHY */

  .tp-why-grid {

    grid-template-columns:
      1fr;

    gap:
      44px;

  }


  .tp-why-intro {

    max-width:
      720px;

  }


  .tp-why-points {

    width:
      100%;

  }


  .tp-why-point {

    min-height:
      285px;

    grid-template-rows:
      125px
      minmax(0,1fr);

  }


  /* INSIGHTS */

  .tp-insights-grid {

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

    gap:
      28px
      12px;

  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 680px) {

  .tp-shell {

    width:
      calc(100% - 24px);

  }


  .tp-section-title {

    font-size:
      34px;

  }


  /* HERO */

  .tp-home-hero {

    min-height:
      700px;

    align-items:
      flex-end;

    background-position:
      68% center;

  }


  .tp-home-hero-overlay {

    background:

      linear-gradient(
        180deg,
        rgba(10,35,43,.08) 0%,
        rgba(10,35,43,.30) 34%,
        rgba(10,35,43,.86) 70%,
        rgba(10,35,43,.98) 100%
      );

  }


  .tp-home-hero-inner {

    padding-bottom:
      30px;

  }


  .tp-home-hero-content {

    width:
      100%;

  }


  .tp-home-hero h1 {

    font-size:
      39px;

  }


  .tp-hero-meta {

    width:
      100%;

    grid-template-columns:
      1fr;

  }


  .tp-hero-meta > div {

    min-height:
      42px;

    flex-direction:
      row;

    align-items:
      center;

    gap:
      10px;

    border-right:
      0;

    border-bottom:
      1px solid
      rgba(255,255,255,.11);

  }


  /* MANUFACTURING */

  .tp-manufacture-visual {

    aspect-ratio:
      4 / 3;

  }


  .tp-manufacture-image {

    height:
      100%;

  }


  .tp-manufacture-content {

    padding:
      31px
      18px;

  }


  .tp-manufacture-data {

    grid-template-columns:
      1fr;

  }


  .tp-manufacture-data > div {

    min-height:
      58px;

    border-right:
      0;

    border-bottom:
      1px solid
      rgba(255,255,255,.12);

  }


  /* MARKET */

  .tp-market-grid {

    display:
      flex;

    flex-direction:
      column;

  }


  .tp-market-card {

    min-height:
      320px;

  }


  .tp-market-main {

    min-height:
      430px;

  }


  .tp-market-infrastructure {

    min-height:
      340px;

  }


  /* SHOWCASE */

  .tp-showcase {

    padding:
      50px
      0
      54px;

  }


  .tp-showcase-visual {

    min-height:
      350px;

    padding:
      24px
      16px;

  }


  .tp-showcase-visual > img {

    width:
      100%;

    max-height:
      310px;

  }


  .tp-showcase-content {

    padding:
      29px
      18px
      32px;

  }


  .tp-showcase-tabs {

    margin-bottom:
      29px;

  }


  .tp-showcase-tab {

    min-height:
      45px;

    padding:
      0
      8px;

    font-size:
      9px;

  }


  .tp-showcase-dynamic h3 {

    font-size:
      38px;

  }


  .tp-showcase-specs {

    margin:
      23px
      0
      26px;

  }


  .tp-showcase-specs > div {

    min-height:
      56px;

    grid-template-columns:
      110px
      1fr;

    gap:
      13px;

  }


  /* WHY */

  .tp-why {

    padding:
      50px
      0;

  }


  .tp-why-intro h2 {

    font-size:
      38px;

  }


  .tp-why-points {

    grid-template-columns:
      1fr;

    border-right:
      0;

  }


  .tp-why-point {

    min-height:
      0;

    grid-template-rows:
      160px
      auto;

    border-left:
      0;

  }


  .tp-why-point-image img {

    object-position:
      center;

  }


  .tp-why-point-copy {

    padding:
      20px
      19px
      24px;

  }


  .tp-why-point-copy > span {

    margin-bottom:
      13px;

  }


  .tp-why-point-copy h3 {

    font-size:
      20px;

  }


  .tp-why-point-copy p {

    font-size:
      10px;

  }


  /* INSIGHTS */

  .tp-insights-grid {

    grid-template-columns:
      1fr;

    gap:
      30px;

  }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 430px) {

  .tp-home-hero h1 {

    font-size:
      36px;

  }


  .tp-showcase-tabs {

    grid-template-columns:
      1fr;

  }


  .tp-showcase-tab {

    border-right:
      0;

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

  }


  .tp-showcase-tab:last-child {

    border-bottom:
      0;

  }


  .tp-showcase-specs > div {

    grid-template-columns:
      1fr;

    gap:
      5px;

    padding:
      11px
      0;

  }


  .tp-showcase-dynamic h3 {

    font-size:
      34px;

  }


  .tp-why-point {

    grid-template-rows:
      145px
      auto;

  }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

  .tp-reveal {

    opacity:
      1;

    transform:
      none;

    transition:
      none;

  }


  .tp-market-card img,
  .tp-insight-image img,
  .tp-manufacture-image > img,
  .tp-showcase-visual > img,
  .tp-why-point-image img {

    transition:
      none;

  }

}/* End custom CSS */