/* =========================================================
   PODEM INNER INDUSTRIAL V8
   About / Services / Catalog / Contact

   Design language:
   - True viewport-width sections
   - PODEM yellow / black / industrial grey
   - Square engineering geometry
   - No SaaS card-box aesthetic
   - Clean product imagery
   - Responsive RTL
   ========================================================= */

:root{
  --pi8-yellow:#ffdd00;
  --pi8-black:#090b0d;
  --pi8-charcoal:#15191d;
  --pi8-steel:#23282d;
  --pi8-line:#d8dcdf;
  --pi8-soft:#f1f2f2;
  --pi8-white:#ffffff;
  --pi8-muted:#70777c;
  --pi8-blue:#004e9a;
}

/* =========================================================
   GLOBAL INNER PAGE SAFETY
   ========================================================= */

.podem-about,
.podem-services,
.podem-catalog,
.podem-contact,
.about-page,
.ps-page,
.cat-page{
  width:100% !important;
  max-width:none !important;
  overflow-x:clip !important;
  background:#fff;
}

.podem-about *,
.podem-services *,
.podem-catalog *,
.podem-contact *,
.about-page *,
.ps-page *,
.cat-page *{
  box-sizing:border-box;
}

/* =========================================================
   TRUE VIEWPORT WIDTH
   ========================================================= */

.about-shell,
.ps-container,
.cat-shell,
.pc-container{
  width:100vw !important;
  max-width:none !important;

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

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

  padding-left:
    clamp(24px,5vw,92px) !important;

  padding-right:
    clamp(24px,5vw,92px) !important;

  box-sizing:border-box !important;
}

/* =========================================================
   FULL BLEED SECTION FOUNDATION
   ========================================================= */

.about-hero,
.about-section,
.about-story,
.about-values,
.about-capabilities,
.about-final,

.ps-hero,
.ps-section,
.ps-services,
.ps-process,
.ps-parts,
.ps-faq,
.ps-final,

.cat-hero,
.cat-section,
.cat-products,
.cat-info,
.cat-final,

.pc-hero,
.pc-section,
.pc-final-cta{
  position:relative;

  width:100vw !important;
  max-width:none !important;

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

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

  border-radius:0 !important;
}

/* =========================================================
   INDUSTRIAL HERO LANGUAGE
   ========================================================= */

.about-hero,
.ps-hero,
.cat-hero,
.pc-hero{
  min-height:
    clamp(520px,66vh,760px);

  display:flex;
  align-items:center;

  overflow:hidden;

  color:#fff !important;

  background-color:
    var(--pi8-black) !important;

  background-image:
    linear-gradient(
      rgba(255,255,255,.035) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255,255,255,.035) 1px,
      transparent 1px
    ) !important;

  background-size:
    48px 48px !important;

  border-top:
    1px solid #252a2e;

  border-bottom:
    1px solid #252a2e;

  box-shadow:none !important;
}

.about-hero::before,
.ps-hero::before,
.cat-hero::before,
.pc-hero::before{
  content:"";

  position:absolute;

  top:0;
  right:0;

  width:5px;
  height:100%;

  background:
    var(--pi8-yellow);

  z-index:2;
}

.about-hero::after,
.ps-hero::after,
.cat-hero::after,
.pc-hero::after{
  content:"PODEM / INDUSTRIAL SYSTEMS";

  position:absolute;

  left:
    clamp(20px,4vw,72px);

  bottom:20px;

  direction:ltr;

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

  font-size:
    clamp(10px,.9vw,13px);

  font-weight:900;

  letter-spacing:.22em;

  pointer-events:none;
}

.about-hero > *,
.ps-hero > *,
.cat-hero > *,
.pc-hero > *{
  position:relative;
  z-index:1;
}

/* =========================================================
   HERO TYPOGRAPHY
   ========================================================= */

.about-hero h1,
.ps-hero h1,
.cat-hero h1,
.pc-hero h1{
  max-width:960px !important;

  margin:
    0 0 22px !important;

  color:#fff !important;

  font-size:
    clamp(36px,5.2vw,72px) !important;

  line-height:
    1.28 !important;

  font-weight:
    950 !important;

  letter-spacing:
    -.035em;
}

.about-hero p,
.ps-hero p,
.cat-hero p,
.pc-hero p{
  max-width:
    820px !important;

  color:
    #c6cbcf !important;

  font-size:
    clamp(14px,1.25vw,17px) !important;

  line-height:
    2.05 !important;
}

/* =========================================================
   SECTION RHYTHM
   ========================================================= */

.about-section,
.about-story,
.about-values,
.about-capabilities,

.ps-section,
.ps-services,
.ps-process,
.ps-parts,
.ps-faq,

.cat-section,
.cat-products,
.cat-info,

.pc-section{
  padding-top:
    clamp(72px,7vw,116px) !important;

  padding-bottom:
    clamp(72px,7vw,116px) !important;
}

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

.about-shell h2,
.ps-container h2,
.cat-shell h2,
.pc-container h2{
  color:
    #111416;

  font-size:
    clamp(30px,3.6vw,52px) !important;

  line-height:
    1.35 !important;

  font-weight:
    950 !important;

  letter-spacing:
    -.025em;
}

.about-shell h3,
.ps-container h3,
.cat-shell h3,
.pc-container h3{
  color:#15191d;

  font-size:
    clamp(18px,1.7vw,24px) !important;

  line-height:
    1.55 !important;

  font-weight:
    900 !important;
}

/* =========================================================
   EYEBROWS / LABELS
   ========================================================= */

.about-shell [class*="eyebrow"],
.about-shell [class*="kicker"],
.about-shell [class*="label"],

.ps-container [class*="eyebrow"],
.ps-container [class*="kicker"],
.ps-container [class*="label"],

.cat-shell [class*="eyebrow"],
.cat-shell [class*="kicker"],
.cat-shell [class*="label"],

.pc-container [class*="eyebrow"],
.pc-container [class*="kicker"],
.pc-container [class*="label"]{
  color:
    var(--pi8-blue);

  font-size:
    11px !important;

  font-weight:
    950 !important;

  letter-spacing:
    .11em;
}

/* =========================================================
   INDUSTRIAL CARDS
   ========================================================= */

.about-shell [class*="card"],
.ps-container [class*="card"],
.cat-shell [class*="card"],
.pc-container [class*="card"]{
  border:
    1px solid var(--pi8-line) !important;

  border-radius:
    4px !important;

  box-shadow:
    none !important;

  transition:
    border-color .18s ease,
    transform .18s ease;
}

.about-shell [class*="card"]:hover,
.ps-container [class*="card"]:hover,
.cat-shell [class*="card"]:hover,
.pc-container [class*="card"]:hover{
  border-color:
    #aeb4b8 !important;

  transform:
    translateY(-2px);
}

/* =========================================================
   PRODUCT / INDUSTRIAL IMAGES
   ========================================================= */

.about-shell img,
.ps-container img,
.cat-shell img,
.pc-container img{
  max-width:
    100% !important;

  height:
    auto !important;

  object-fit:
    contain !important;

  object-position:
    center !important;

  box-shadow:
    none !important;
}

/* do not create circular product framing */

.about-shell figure,
.ps-container figure,
.cat-shell figure,
.pc-container figure{
  border-radius:
    0 !important;

  box-shadow:
    none !important;
}

/* =========================================================
   BUTTONS
   ========================================================= */

.about-shell a[class*="btn"],
.ps-container a[class*="btn"],
.cat-shell a[class*="btn"],
.pc-container a[class*="btn"],
.pc-btn{
  min-height:
    48px;

  border-radius:
    3px !important;

  box-shadow:
    none !important;

  font-weight:
    900 !important;

  transition:
    transform .16s ease,
    background .16s ease,
    color .16s ease;
}

.about-shell a[class*="btn"]:hover,
.ps-container a[class*="btn"]:hover,
.cat-shell a[class*="btn"]:hover,
.pc-container a[class*="btn"]:hover,
.pc-btn:hover{
  transform:
    translateY(-2px);
}

/* =========================================================
   CONTACT
   ========================================================= */

.pc-contact-cards{
  width:100% !important;

  display:grid !important;

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

  gap:
    1px !important;

  background:
    #d9dddf;
}

.pc-info-card{
  min-height:
    220px;

  padding:
    clamp(24px,3vw,42px) !important;

  background:
    #fff !important;

  border:
    0 !important;

  border-radius:
    0 !important;
}

.pc-rfq-grid{
  width:100% !important;

  grid-template-columns:
    minmax(320px,.8fr)
    minmax(520px,1.2fr) !important;

  gap:
    clamp(34px,6vw,96px) !important;
}

.pc-form{
  border-radius:
    4px !important;

  box-shadow:
    none !important;

  border:
    1px solid #d8dcdf !important;
}

/* =========================================================
   SERVICES
   ========================================================= */

.ps-container img{
  background:
    transparent !important;
}

.ps-services-grid,
.ps-service-grid,
.ps-process-grid{
  width:100% !important;
}

/* =========================================================
   CATALOG
   ========================================================= */

.cat-shell img{
  object-fit:
    contain !important;
}

.cat-final,
.pc-final-cta,
.ps-final,
.about-final{
  padding-top:
    clamp(70px,7vw,110px) !important;

  padding-bottom:
    clamp(70px,7vw,110px) !important;

  background:
    var(--pi8-yellow) !important;

  color:
    #0b0d0f !important;

  border-radius:
    0 !important;
}

.cat-final h2,
.pc-final-cta h2,
.ps-final h2,
.about-final h2{
  color:
    #090b0d !important;
}

/* =========================================================
   FAQ
   ========================================================= */

.about-shell details,
.ps-container details,
.cat-shell details,
.pc-container details{
  border:
    0 !important;

  border-bottom:
    1px solid #d8dcdf !important;

  border-radius:
    0 !important;

  box-shadow:
    none !important;

  background:
    transparent !important;
}

.about-shell summary,
.ps-container summary,
.cat-shell summary,
.pc-container summary{
  min-height:
    64px;

  font-weight:
    900 !important;
}

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

@media(max-width:900px){

  .about-shell,
  .ps-container,
  .cat-shell,
  .pc-container{
    padding-left:
      22px !important;

    padding-right:
      22px !important;
  }

  .about-hero,
  .ps-hero,
  .cat-hero,
  .pc-hero{
    min-height:
      520px;
  }

  .pc-contact-cards{
    grid-template-columns:
      1fr !important;
  }

  .pc-rfq-grid{
    grid-template-columns:
      1fr !important;
  }

}

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

@media(max-width:640px){

  .about-shell,
  .ps-container,
  .cat-shell,
  .pc-container{
    width:
      100vw !important;

    max-width:
      none !important;

    padding-left:
      14px !important;

    padding-right:
      14px !important;
  }

  .about-hero,
  .ps-hero,
  .cat-hero,
  .pc-hero{
    min-height:
      470px;

    background-size:
      34px 34px !important;
  }

  .about-hero h1,
  .ps-hero h1,
  .cat-hero h1,
  .pc-hero h1{
    font-size:
      clamp(31px,9vw,43px) !important;

    line-height:
      1.42 !important;
  }

  .about-section,
  .about-story,
  .about-values,
  .about-capabilities,

  .ps-section,
  .ps-services,
  .ps-process,
  .ps-parts,
  .ps-faq,

  .cat-section,
  .cat-products,
  .cat-info,

  .pc-section{
    padding-top:
      64px !important;

    padding-bottom:
      64px !important;
  }

  .pc-actions,
  .ps-actions,
  .cat-actions,
  .about-actions{
    display:grid !important;

    grid-template-columns:
      1fr !important;
  }

  .pc-btn,
  .ps-container a[class*="btn"],
  .cat-shell a[class*="btn"],
  .about-shell a[class*="btn"]{
    width:
      100% !important;

    justify-content:
      center !important;
  }

}

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

@media(max-width:420px){

  .about-shell,
  .ps-container,
  .cat-shell,
  .pc-container{
    padding-left:
      11px !important;

    padding-right:
      11px !important;
  }

  .about-hero,
  .ps-hero,
  .cat-hero,
  .pc-hero{
    min-height:
      440px;
  }

}


/* =========================================================
   PODEM INNER V8 — ABOUT ACTIVE CLASS BRIDGE V8.1
   pages/about-us.php uses pa-* classes.
   ========================================================= */

/* ---------------------------------------------------------
   ROOT
   --------------------------------------------------------- */

.podem-about-page{
  width:100% !important;
  max-width:none !important;

  overflow-x:clip !important;

  background:#fff;
}

.podem-about-page *{
  box-sizing:border-box;
}

/* ---------------------------------------------------------
   TRUE 100VW SHELL
   --------------------------------------------------------- */

.pa-container{
  width:100vw !important;
  max-width:none !important;

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

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

  padding-left:
    clamp(24px,5vw,92px) !important;

  padding-right:
    clamp(24px,5vw,92px) !important;

  box-sizing:border-box !important;
}

/* ---------------------------------------------------------
   FULL-BLEED SECTIONS
   --------------------------------------------------------- */

.pa-hero,
.pa-section,
.pa-final-cta{
  position:relative;

  width:100vw !important;
  max-width:none !important;

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

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

  border-radius:0 !important;
}

/* ---------------------------------------------------------
   ABOUT HERO — SAME INDUSTRIAL LANGUAGE AS HOME
   --------------------------------------------------------- */

.pa-hero{
  min-height:
    clamp(540px,68vh,780px) !important;

  display:flex !important;
  align-items:center !important;

  overflow:hidden !important;

  color:#fff !important;

  background-color:
    #090b0d !important;

  background-image:
    linear-gradient(
      rgba(255,255,255,.035) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255,255,255,.035) 1px,
      transparent 1px
    ) !important;

  background-size:
    48px 48px !important;

  border-top:
    1px solid #252a2e !important;

  border-bottom:
    1px solid #252a2e !important;

  border-radius:
    0 !important;

  box-shadow:
    none !important;
}

.pa-hero::before{
  content:"";

  position:absolute;

  top:0;
  right:0;

  width:5px;
  height:100%;

  background:#ffdd00;

  z-index:2;
}

.pa-hero::after{
  content:"PODEM / INDUSTRIAL LIFTING / ABOUT";

  position:absolute;

  left:
    clamp(20px,4vw,72px);

  bottom:22px;

  direction:ltr;

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

  font-size:
    clamp(10px,.9vw,13px);

  font-weight:900;

  letter-spacing:.2em;

  pointer-events:none;
}

.pa-hero > *{
  position:relative;
  z-index:1;
}

.pa-hero-grid{
  width:100% !important;

  display:grid !important;

  grid-template-columns:
    minmax(0,1.05fr)
    minmax(380px,.75fr) !important;

  gap:
    clamp(40px,7vw,120px) !important;

  align-items:center !important;
}

.pa-hero h1{
  max-width:
    980px !important;

  margin:
    0 0 22px !important;

  color:#fff !important;

  font-size:
    clamp(38px,5vw,72px) !important;

  line-height:
    1.3 !important;

  font-weight:
    950 !important;

  letter-spacing:
    -.035em;
}

.pa-hero p{
  max-width:
    820px !important;

  color:
    #c8cdd1 !important;

  line-height:
    2.05 !important;

  font-size:
    clamp(14px,1.2vw,17px) !important;
}

.pa-kicker{
  color:
    #ffdd00 !important;

  font-size:
    11px !important;

  font-weight:
    950 !important;

  letter-spacing:
    .13em !important;
}

/* ---------------------------------------------------------
   HERO INFO PANEL
   No circular motif / no glassmorphism.
   --------------------------------------------------------- */

.pa-hero-card{
  position:relative;

  padding:
    clamp(26px,3.6vw,48px) !important;

  background:
    #15191d !important;

  border:
    1px solid #353b40 !important;

  border-radius:
    0 !important;

  box-shadow:
    none !important;
}

.pa-hero-card::before,
.pa-hero-card::after{
  content:"";

  position:absolute;

  width:22px;
  height:22px;

  pointer-events:none;
}

.pa-hero-card::before{
  top:-1px;
  right:-1px;

  border-top:
    2px solid #ffdd00;

  border-right:
    2px solid #ffdd00;
}

.pa-hero-card::after{
  bottom:-1px;
  left:-1px;

  border-bottom:
    2px solid #ffdd00;

  border-left:
    2px solid #ffdd00;
}

.pa-mini-list{
  display:grid !important;

  gap:
    1px !important;

  background:
    #353b40 !important;
}

.pa-mini-list > *{
  margin:0 !important;

  padding:
    15px 16px !important;

  background:
    #15191d !important;

  border-radius:
    0 !important;
}

/* ---------------------------------------------------------
   SECTION SYSTEM
   --------------------------------------------------------- */

.pa-section{
  padding-top:
    clamp(76px,7vw,118px) !important;

  padding-bottom:
    clamp(76px,7vw,118px) !important;
}

.pa-light{
  background:
    #f1f2f2 !important;
}

.pa-dark{
  background:
    #090b0d !important;

  color:
    #fff !important;
}

.pa-dark h2,
.pa-dark h3{
  color:
    #fff !important;
}

.pa-dark p{
  color:
    #c7ccd0 !important;
}

/* ---------------------------------------------------------
   HEADINGS
   --------------------------------------------------------- */

.pa-section-head{
  width:100% !important;
  max-width:none !important;

  margin:
    0 0 clamp(34px,4vw,62px) !important;

  text-align:right !important;
}

.pa-section-head h2,
.pa-two-col h2,
.pa-final-cta h2{
  max-width:
    1000px;

  margin:
    0 0 16px;

  color:
    #111416;

  font-size:
    clamp(30px,3.5vw,52px) !important;

  line-height:
    1.38 !important;

  font-weight:
    950 !important;

  letter-spacing:
    -.025em;
}

.pa-section-head p,
.pa-two-col p{
  max-width:
    860px;

  line-height:
    2.05 !important;

  color:
    #62696e;
}

/* ---------------------------------------------------------
   TWO COLUMN ENGINEERING LAYOUT
   --------------------------------------------------------- */

.pa-two-col{
  display:grid !important;

  grid-template-columns:
    minmax(0,1fr)
    minmax(360px,.8fr) !important;

  gap:
    clamp(40px,7vw,110px) !important;

  align-items:center !important;
}

/* ---------------------------------------------------------
   CARDS — SQUARE INDUSTRIAL
   --------------------------------------------------------- */

.pa-history-grid,
.pa-feature-grid,
.pa-industry-grid,
.pa-stats{
  width:100% !important;

  gap:
    1px !important;

  background:
    #d7dbde;
}

.pa-history-card,
.pa-feature,
.pa-industry-grid > *,
.pa-stats > *{
  background:
    #fff !important;

  border:
    0 !important;

  border-radius:
    0 !important;

  box-shadow:
    none !important;
}

.pa-history-card,
.pa-feature{
  padding:
    clamp(24px,3vw,40px) !important;
}

.pa-feature{
  position:relative;
}

.pa-feature::before{
  content:"";

  position:absolute;

  top:0;
  right:0;

  width:32px;
  height:3px;

  background:
    #ffdd00;
}

.pa-feature:hover,
.pa-history-card:hover{
  transform:none !important;

  box-shadow:
    none !important;
}

/* ---------------------------------------------------------
   STATS
   --------------------------------------------------------- */

.pa-stats{
  grid-template-columns:
    repeat(4,minmax(0,1fr)) !important;
}

.pa-stats > *{
  min-height:
    150px;

  display:flex;
  flex-direction:column;
  justify-content:center;

  padding:
    28px !important;
}

/* ---------------------------------------------------------
   INDUSTRIES
   --------------------------------------------------------- */

.pa-industry-grid{
  grid-template-columns:
    repeat(4,minmax(0,1fr)) !important;
}

.pa-industry-grid > *{
  min-height:
    150px;

  display:flex;
  align-items:center;

  padding:
    26px !important;
}

/* ---------------------------------------------------------
   SERVICE STRIP
   --------------------------------------------------------- */

.pa-service-strip{
  width:100% !important;

  border:
    1px solid #d5d9dc !important;

  border-radius:
    0 !important;

  box-shadow:
    none !important;
}

/* ---------------------------------------------------------
   FAQ
   --------------------------------------------------------- */

.pa-faq{
  width:100% !important;
  max-width:none !important;

  margin:0 !important;
}

.pa-faq details{
  border:
    0 !important;

  border-bottom:
    1px solid #d5d9dc !important;

  border-radius:
    0 !important;

  background:
    transparent !important;

  box-shadow:
    none !important;
}

/* ---------------------------------------------------------
   BUTTONS
   --------------------------------------------------------- */

.pa-actions{
  display:flex;

  flex-wrap:wrap;

  gap:
    10px !important;
}

.pa-btn{
  min-height:
    48px !important;

  display:inline-flex !important;

  align-items:center !important;
  justify-content:center !important;

  padding:
    11px 21px !important;

  border-radius:
    2px !important;

  box-shadow:
    none !important;

  font-weight:
    900 !important;
}

.pa-btn-primary{
  background:
    #ffdd00 !important;

  border-color:
    #ffdd00 !important;

  color:
    #090b0d !important;
}

.pa-btn-outline{
  background:
    transparent !important;

  color:
    inherit !important;

  border:
    1px solid currentColor !important;
}

/* ---------------------------------------------------------
   FINAL CTA
   --------------------------------------------------------- */

.pa-final-cta{
  padding-top:
    clamp(72px,7vw,112px) !important;

  padding-bottom:
    clamp(72px,7vw,112px) !important;

  background:
    #ffdd00 !important;

  color:
    #090b0d !important;

  text-align:center;
}

.pa-final-cta .pa-container{
  display:flex;
  flex-direction:column;
  align-items:center;
}

.pa-final-cta h2{
  color:
    #090b0d !important;

  text-align:center !important;
}

.pa-final-cta p{
  max-width:
    820px;

  color:
    #24282b !important;

  line-height:
    2 !important;
}

/* ---------------------------------------------------------
   ABOUT PAGE IMAGE SAFETY
   --------------------------------------------------------- */

.podem-about-page img{
  max-width:
    100% !important;

  height:
    auto !important;

  object-fit:
    contain !important;

  object-position:
    center !important;

  box-shadow:
    none !important;
}

/* ---------------------------------------------------------
   TABLET
   --------------------------------------------------------- */

@media(max-width:900px){

  .pa-container{
    padding-left:
      22px !important;

    padding-right:
      22px !important;
  }

  .pa-hero-grid,
  .pa-two-col{
    grid-template-columns:
      1fr !important;

    gap:
      36px !important;
  }

  .pa-hero{
    min-height:
      0 !important;

    padding-top:
      80px !important;

    padding-bottom:
      80px !important;
  }

  .pa-stats,
  .pa-industry-grid{
    grid-template-columns:
      repeat(2,minmax(0,1fr)) !important;
  }

}

/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media(max-width:640px){

  .pa-container{
    width:
      100vw !important;

    max-width:
      none !important;

    padding-left:
      14px !important;

    padding-right:
      14px !important;
  }

  .pa-hero{
    padding-top:
      68px !important;

    padding-bottom:
      68px !important;

    background-size:
      34px 34px !important;
  }

  .pa-hero h1{
    font-size:
      clamp(31px,9vw,43px) !important;
  }

  .pa-hero-card{
    padding:
      22px !important;
  }

  .pa-section{
    padding-top:
      64px !important;

    padding-bottom:
      64px !important;
  }

  .pa-history-grid,
  .pa-feature-grid,
  .pa-stats,
  .pa-industry-grid{
    grid-template-columns:
      1fr !important;
  }

  .pa-actions{
    display:grid !important;

    grid-template-columns:
      1fr !important;

    width:
      100% !important;
  }

  .pa-btn{
    width:
      100% !important;
  }

}

/* ---------------------------------------------------------
   SMALL MOBILE
   --------------------------------------------------------- */

@media(max-width:420px){

  .pa-container{
    padding-left:
      11px !important;

    padding-right:
      11px !important;
  }

}


/* =========================================================
   PODEM SERVICES ACTIVE CLASS BRIDGE V8.2

   Design:
   - true viewport width
   - black / yellow / industrial steel
   - simple product render
   - square geometry
   - no circles / no SaaS cards / no glass
   ========================================================= */

/* ---------------------------------------------------------
   ROOT
   --------------------------------------------------------- */

.podem-services{
  width:100% !important;
  max-width:none !important;

  overflow-x:clip !important;

  background:#fff;
}

.podem-services *{
  box-sizing:border-box;
}

/* ---------------------------------------------------------
   TRUE VIEWPORT WIDTH — ALL ACTIVE SECTIONS
   --------------------------------------------------------- */

.podem-services .ps-hero,
.podem-services .ps-intro,
.podem-services .ps-section,
.podem-services .ps-dark,
.podem-services .ps-cta{
  position:relative;

  width:100vw !important;
  max-width:none !important;

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

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

  border-radius:0 !important;
}

/* real page shell */

.podem-services .ps-container{
  width:100vw !important;
  max-width:none !important;

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

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

  padding-left:
    clamp(24px,5vw,92px) !important;

  padding-right:
    clamp(24px,5vw,92px) !important;

  box-sizing:border-box !important;
}

/* ---------------------------------------------------------
   HERO
   --------------------------------------------------------- */

.podem-services .ps-hero{
  min-height:
    clamp(560px,70vh,800px) !important;

  display:flex !important;
  align-items:center !important;

  overflow:hidden !important;

  background-color:
    #090b0d !important;

  background-image:
    linear-gradient(
      rgba(255,255,255,.035) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255,255,255,.035) 1px,
      transparent 1px
    ) !important;

  background-size:
    48px 48px !important;

  color:#fff !important;

  border-top:
    1px solid #282d31 !important;

  border-bottom:
    1px solid #282d31 !important;

  box-shadow:none !important;
}

/* remove old hero pseudo decoration */

.podem-services .ps-hero::after{
  content:"PODEM / SERVICE ENGINEERING / 02" !important;

  position:absolute !important;

  left:
    clamp(20px,4vw,72px) !important;

  right:auto !important;
  top:auto !important;
  bottom:22px !important;

  width:auto !important;
  height:auto !important;

  background:none !important;

  border:0 !important;
  border-radius:0 !important;

  color:
    rgba(255,255,255,.15) !important;

  font-size:
    clamp(10px,.9vw,13px) !important;

  font-weight:
    900 !important;

  letter-spacing:
    .2em !important;

  direction:ltr;

  box-shadow:none !important;

  pointer-events:none;
}

.podem-services .ps-hero::before{
  content:"";

  position:absolute;

  top:0;
  right:0;

  width:5px;
  height:100%;

  background:#ffdd00;

  z-index:2;
}

/* ---------------------------------------------------------
   HERO GRID
   --------------------------------------------------------- */

.podem-services .ps-hero-grid{
  display:grid !important;

  grid-template-columns:
    minmax(0,1fr)
    minmax(420px,.82fr) !important;

  gap:
    clamp(46px,7vw,120px) !important;

  align-items:center !important;
}

/* ---------------------------------------------------------
   HERO TYPOGRAPHY
   --------------------------------------------------------- */

.podem-services .ps-kicker{
  display:inline-flex !important;

  margin-bottom:
    18px !important;

  padding:
    0 !important;

  background:
    transparent !important;

  border:
    0 !important;

  border-radius:
    0 !important;

  color:
    #ffdd00 !important;

  font-size:
    11px !important;

  line-height:
    1.4 !important;

  font-weight:
    950 !important;

  letter-spacing:
    .12em !important;
}

.podem-services .ps-hero h1{
  max-width:
    980px !important;

  margin:
    0 0 22px !important;

  color:
    #fff !important;

  font-size:
    clamp(38px,5vw,70px) !important;

  line-height:
    1.3 !important;

  font-weight:
    950 !important;

  letter-spacing:
    -.035em;
}

.podem-services .ps-hero p{
  max-width:
    820px !important;

  margin:
    0 0 30px !important;

  color:
    #c6cbcf !important;

  font-size:
    clamp(14px,1.2vw,17px) !important;

  line-height:
    2.05 !important;
}

/* ---------------------------------------------------------
   HERO PRODUCT STAGE
   Simple image, no decorative circle.
   --------------------------------------------------------- */

.podem-services .ps-hero-media{
  position:relative !important;

  min-height:
    470px !important;

  display:grid !important;
  place-items:center !important;

  padding:
    clamp(22px,3vw,42px) !important;

  overflow:hidden !important;

  background:
    #111519 !important;

  background-image:
    linear-gradient(
      rgba(255,255,255,.025) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255,255,255,.025) 1px,
      transparent 1px
    ) !important;

  background-size:
    42px 42px !important;

  border:
    1px solid #353b40 !important;

  border-radius:
    0 !important;

  box-shadow:
    none !important;
}

.podem-services .ps-hero-media::before,
.podem-services .ps-hero-media::after{
  content:"";

  position:absolute;

  width:24px !important;
  height:24px !important;

  background:none !important;

  border-radius:
    0 !important;

  box-shadow:
    none !important;

  pointer-events:none;
}

.podem-services .ps-hero-media::before{
  top:-1px;
  right:-1px;

  border-top:
    2px solid #ffdd00 !important;

  border-right:
    2px solid #ffdd00 !important;
}

.podem-services .ps-hero-media::after{
  left:-1px;
  bottom:-1px;
  right:auto !important;
  top:auto !important;

  border-left:
    2px solid #ffdd00 !important;

  border-bottom:
    2px solid #ffdd00 !important;
}

.podem-services .ps-hero-media img{
  display:block !important;

  width:
    min(92%,720px) !important;

  height:
    auto !important;

  max-width:
    720px !important;

  max-height:
    470px !important;

  margin:auto !important;

  object-fit:
    contain !important;

  object-position:
    center !important;

  border-radius:
    0 !important;

  filter:
    none !important;

  box-shadow:
    none !important;

  transform:
    none !important;
}

/* ---------------------------------------------------------
   BUTTONS
   --------------------------------------------------------- */

.podem-services .ps-actions{
  display:flex !important;

  flex-wrap:wrap !important;

  gap:
    10px !important;
}

.podem-services .ps-btn{
  min-height:
    50px !important;

  display:inline-flex !important;

  align-items:center !important;
  justify-content:center !important;

  padding:
    12px 22px !important;

  border-radius:
    2px !important;

  box-shadow:
    none !important;

  font-weight:
    900 !important;

  text-decoration:none !important;
}

.podem-services .ps-btn-primary{
  background:
    #ffdd00 !important;

  border:
    1px solid #ffdd00 !important;

  color:
    #090b0d !important;
}

.podem-services .ps-btn-ghost{
  background:
    transparent !important;

  border:
    1px solid #646b70 !important;

  color:
    #fff !important;
}

.podem-services .ps-btn:hover{
  transform:
    translateY(-2px) !important;

  box-shadow:
    none !important;
}

/* ---------------------------------------------------------
   SECTION RHYTHM
   --------------------------------------------------------- */

.podem-services .ps-intro,
.podem-services .ps-section,
.podem-services .ps-dark{
  padding-top:
    clamp(76px,7vw,118px) !important;

  padding-bottom:
    clamp(76px,7vw,118px) !important;
}

.podem-services .ps-white{
  background:
    #fff !important;
}

.podem-services .ps-light{
  background:
    #f1f2f2 !important;
}

/* ---------------------------------------------------------
   INTRO / SPLIT
   --------------------------------------------------------- */

.podem-services .ps-split{
  display:grid !important;

  grid-template-columns:
    minmax(0,1fr)
    minmax(400px,.86fr) !important;

  gap:
    clamp(46px,7vw,110px) !important;

  align-items:center !important;
}

.podem-services .ps-intro h2,
.podem-services .ps-section h2,
.podem-services .ps-dark h2,
.podem-services .ps-cta h2{
  max-width:
    1020px !important;

  margin:
    0 0 18px !important;

  font-size:
    clamp(30px,3.5vw,52px) !important;

  line-height:
    1.38 !important;

  font-weight:
    950 !important;

  letter-spacing:
    -.025em;
}

.podem-services .ps-intro p,
.podem-services .ps-section p{
  max-width:
    860px;

  color:
    #62696e;

  line-height:
    2.05 !important;
}

/* ---------------------------------------------------------
   CONTENT IMAGE STAGES
   --------------------------------------------------------- */

.podem-services .ps-image-card{
  position:relative !important;

  min-height:
    420px !important;

  display:grid !important;

  place-items:center !important;

  padding:
    28px !important;

  overflow:hidden !important;

  background:
    #eceeef !important;

  border:
    1px solid #d6dadd !important;

  border-radius:
    0 !important;

  box-shadow:
    none !important;
}

.podem-services .ps-image-card::before,
.podem-services .ps-image-card::after{
  content:none !important;

  display:none !important;

  background:none !important;

  border:
    0 !important;

  border-radius:
    0 !important;

  box-shadow:
    none !important;
}

.podem-services .ps-image-card img{
  display:block !important;

  width:
    min(94%,760px) !important;

  height:
    auto !important;

  max-height:
    430px !important;

  margin:
    auto !important;

  object-fit:
    contain !important;

  object-position:
    center !important;

  border-radius:
    0 !important;

  filter:
    none !important;

  box-shadow:
    none !important;

  transform:
    none !important;
}

/* ---------------------------------------------------------
   SECTION HEAD
   --------------------------------------------------------- */

.podem-services .ps-head{
  width:
    100% !important;

  max-width:
    none !important;

  margin:
    0 0 clamp(36px,4vw,62px) !important;

  text-align:
    right !important;
}

.podem-services .ps-head.ps-center{
  text-align:
    center !important;
}

.podem-services .ps-head.ps-center h2,
.podem-services .ps-head.ps-center p{
  margin-left:
    auto !important;

  margin-right:
    auto !important;
}

/* ---------------------------------------------------------
   SERVICE CARDS
   --------------------------------------------------------- */

.podem-services .ps-cards{
  width:
    100% !important;

  display:grid !important;

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

  gap:
    1px !important;

  background:
    #d6dade !important;
}

.podem-services .ps-card{
  position:relative !important;

  min-height:
    280px !important;

  padding:
    clamp(24px,3vw,40px) !important;

  background:
    #fff !important;

  border:
    0 !important;

  border-radius:
    0 !important;

  box-shadow:
    none !important;

  transform:
    none !important;
}

.podem-services .ps-card::before{
  content:"";

  position:absolute;

  top:0;
  right:0;

  width:
    36px;

  height:
    3px;

  background:
    #ffdd00;
}

.podem-services .ps-card:hover{
  border:
    0 !important;

  box-shadow:
    none !important;

  transform:
    none !important;
}

.podem-services .ps-card span{
  display:inline-flex !important;

  align-items:center !important;
  justify-content:center !important;

  min-width:
    42px !important;

  height:
    34px !important;

  padding:
    0 10px !important;

  margin-bottom:
    25px !important;

  background:
    #090b0d !important;

  color:
    #ffdd00 !important;

  border:
    0 !important;

  border-radius:
    0 !important;

  font-weight:
    950 !important;
}

.podem-services .ps-card h3{
  font-size:
    clamp(19px,1.65vw,25px) !important;

  line-height:
    1.55 !important;

  font-weight:
    950 !important;
}

/* ---------------------------------------------------------
   PARTS
   --------------------------------------------------------- */

.podem-services .ps-parts{
  width:
    100% !important;

  display:grid !important;

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

  gap:
    1px !important;

  margin-top:
    30px !important;

  background:
    #d7dbde !important;
}

.podem-services .ps-parts div{
  position:relative !important;

  min-height:
    72px !important;

  display:flex !important;
  align-items:center !important;

  padding:
    16px 44px 16px 18px !important;

  background:
    #fff !important;

  border:
    0 !important;

  border-radius:
    0 !important;

  box-shadow:
    none !important;
}

.podem-services .ps-parts div::before{
  content:"";

  position:absolute !important;

  right:
    18px !important;

  top:
    50% !important;

  width:
    10px !important;

  height:
    10px !important;

  transform:
    translateY(-50%) !important;

  background:
    #ffdd00 !important;

  border:
    2px solid #090b0d !important;

  border-radius:
    0 !important;
}

/* ---------------------------------------------------------
   DARK PROCESS
   --------------------------------------------------------- */

.podem-services .ps-dark{
  background-color:
    #090b0d !important;

  background-image:
    linear-gradient(
      rgba(255,255,255,.028) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255,255,255,.028) 1px,
      transparent 1px
    ) !important;

  background-size:
    52px 52px !important;

  color:
    #fff !important;
}

.podem-services .ps-dark-grid{
  display:grid !important;

  grid-template-columns:
    minmax(320px,.72fr)
    minmax(0,1.28fr) !important;

  gap:
    clamp(42px,7vw,110px) !important;

  align-items:start !important;
}

.podem-services .ps-dark h2{
  color:
    #fff !important;
}

.podem-services .ps-dark p{
  color:
    #bec4c8 !important;
}

.podem-services .ps-process{
  width:
    100% !important;

  display:grid !important;

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

  gap:
    1px !important;

  background:
    #353a3f !important;
}

.podem-services .ps-process div{
  min-height:
    150px !important;

  padding:
    28px !important;

  background:
    #15191d !important;

  border:
    0 !important;

  border-radius:
    0 !important;

  box-shadow:
    none !important;
}

.podem-services .ps-process b{
  color:
    #ffdd00 !important;

  font-size:
    28px !important;

  font-weight:
    950 !important;
}

.podem-services .ps-process span{
  color:
    #fff !important;

  line-height:
    1.8 !important;
}

/* ---------------------------------------------------------
   INDUSTRY TAGS
   --------------------------------------------------------- */

.podem-services .ps-tags{
  width:
    100% !important;

  display:grid !important;

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

  gap:
    1px !important;

  background:
    #d6dade !important;
}

.podem-services .ps-tags span{
  min-height:
    90px !important;

  display:flex !important;

  align-items:center !important;
  justify-content:center !important;

  padding:
    18px !important;

  background:
    #fff !important;

  border:
    0 !important;

  border-radius:
    0 !important;

  box-shadow:
    none !important;

  text-align:center;

  font-weight:
    900 !important;
}

/* ---------------------------------------------------------
   FAQ
   --------------------------------------------------------- */

.podem-services .ps-faq{
  width:
    100% !important;

  max-width:
    none !important;

  margin:
    0 !important;
}

.podem-services .ps-faq details{
  border:
    0 !important;

  border-bottom:
    1px solid #d5d9dc !important;

  border-radius:
    0 !important;

  background:
    transparent !important;

  box-shadow:
    none !important;
}

.podem-services .ps-faq summary{
  min-height:
    68px !important;

  padding:
    20px 0 !important;

  font-weight:
    900 !important;
}

.podem-services .ps-faq summary::after{
  width:
    26px !important;

  height:
    26px !important;

  display:inline-flex !important;

  align-items:center !important;
  justify-content:center !important;

  background:
    #090b0d !important;

  color:
    #ffdd00 !important;

  border-radius:
    0 !important;
}

/* ---------------------------------------------------------
   FINAL CTA
   --------------------------------------------------------- */

.podem-services .ps-cta{
  padding-top:
    clamp(74px,7vw,112px) !important;

  padding-bottom:
    clamp(74px,7vw,112px) !important;

  background:
    #ffdd00 !important;

  color:
    #090b0d !important;

  text-align:
    center !important;
}

.podem-services .ps-cta .ps-container{
  display:flex !important;

  flex-direction:column !important;

  align-items:center !important;
}

.podem-services .ps-cta .ps-kicker{
  color:
    #090b0d !important;
}

.podem-services .ps-cta h2{
  max-width:
    1050px !important;

  color:
    #090b0d !important;

  text-align:
    center !important;
}

.podem-services .ps-cta p{
  max-width:
    800px !important;

  margin-left:
    auto !important;

  margin-right:
    auto !important;

  color:
    #24282b !important;

  line-height:
    2 !important;
}

/* ---------------------------------------------------------
   TABLET
   --------------------------------------------------------- */

@media(max-width:900px){

  .podem-services .ps-container{
    padding-left:
      22px !important;

    padding-right:
      22px !important;
  }

  .podem-services .ps-hero{
    min-height:
      0 !important;

    padding-top:
      80px !important;

    padding-bottom:
      80px !important;
  }

  .podem-services .ps-hero-grid,
  .podem-services .ps-split,
  .podem-services .ps-dark-grid{
    grid-template-columns:
      1fr !important;

    gap:
      38px !important;
  }

  .podem-services .ps-hero-media{
    min-height:
      420px !important;
  }

  .podem-services .ps-cards{
    grid-template-columns:
      repeat(2,minmax(0,1fr)) !important;
  }

  .podem-services .ps-tags{
    grid-template-columns:
      repeat(2,minmax(0,1fr)) !important;
  }

}

/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media(max-width:640px){

  .podem-services .ps-container{
    width:
      100vw !important;

    max-width:
      none !important;

    padding-left:
      14px !important;

    padding-right:
      14px !important;
  }

  .podem-services .ps-hero{
    padding-top:
      66px !important;

    padding-bottom:
      66px !important;

    background-size:
      34px 34px !important;
  }

  .podem-services .ps-hero h1{
    font-size:
      clamp(31px,9vw,43px) !important;
  }

  .podem-services .ps-hero-media{
    min-height:
      350px !important;

    padding:
      14px !important;
  }

  .podem-services .ps-hero-media img{
    width:
      94% !important;

    max-height:
      315px !important;
  }

  .podem-services .ps-intro,
  .podem-services .ps-section,
  .podem-services .ps-dark{
    padding-top:
      64px !important;

    padding-bottom:
      64px !important;
  }

  .podem-services .ps-image-card{
    min-height:
      330px !important;

    padding:
      14px !important;
  }

  .podem-services .ps-image-card img{
    max-height:
      310px !important;
  }

  .podem-services .ps-cards,
  .podem-services .ps-parts,
  .podem-services .ps-process,
  .podem-services .ps-tags{
    grid-template-columns:
      1fr !important;
  }

  .podem-services .ps-actions{
    display:grid !important;

    grid-template-columns:
      1fr !important;

    width:
      100% !important;
  }

  .podem-services .ps-btn{
    width:
      100% !important;
  }

}

/* ---------------------------------------------------------
   SMALL MOBILE
   --------------------------------------------------------- */

@media(max-width:420px){

  .podem-services .ps-container{
    padding-left:
      11px !important;

    padding-right:
      11px !important;
  }

  .podem-services .ps-hero-media{
    min-height:
      320px !important;
  }

}