.elementor-kit-6{--e-global-color-primary:#F54340;--e-global-color-secondary:#484DD2;--e-global-color-text:#545357;--e-global-color-accent:#FFF1F2;--e-global-color-5d8f7e3:#000000;--e-global-color-1053e55:#FFFFFF;--e-global-color-d97b7ba:#00000000;--e-global-color-51d6148:#5FB643;--e-global-color-cade729:#EA000A;--e-global-color-43487fa:#261F88;--e-global-color-c0cf261:#F8F8F8;--e-global-color-93b4f7e:#DDDDDD;--e-global-color-apa-navy:#1A2744;--e-global-color-apa-section-bg:#FFF5F0;--e-global-color-apa-challenge:#FEE7E6;--e-global-color-apa-solution:#E5F4DE;--e-global-color-apa-pill-blue:#DCE8FD;--e-global-color-apa-text-mute:#6B7280;--e-global-color-8c3454d:#E4E3E3;--e-global-color-ac49564:#044991;--e-global-color-apa-white-85:rgba(255,255,255,0.85);--e-global-color-apa-white-05:rgba(255,255,255,0.05);--e-global-color-apa-image-bg:#E9EAEC;--e-global-color-apa-border-light:#EEEEEE;--e-global-color-color-e91e8c:#E91E8C;--e-global-color-color-1a1a2e:#1A1A2E;--e-global-color-color-f8f9fa:#F8F9FA;--e-global-color-color-dddddd5e:#DDDDDD5E;--e-global-color-color-111434:#111434;--e-global-color-color-111533:#111533;--e-global-color-color-f3f4f6:#F3F4F6;--e-global-color-color-fee2e2:#FEE2E2;--e-global-color-color-dce3ec:#DCE3EC;--e-global-color-color-e5e7eb:#E5E7EB;--e-global-color-color-f0f0f0:#F0F0F0;--e-global-color-apa-navy-overlay:rgba(15,25,55,0.60);--e-global-color-apa-white-overlay:rgba(255,255,255,0.4);--e-global-color-apa-text-gray:#9CA3AF;--e-global-color-brand-fee:#E30613;--e-global-color-brand-imi:#5E2F8E;--e-global-color-brand-imi-light:#9160CC;--e-global-color-brand-matrix:#1A3A5C;--e-global-color-brand-weh:#F7941E;--e-global-color-brand-rittal:#1F6FB3;--e-global-color-brand-rittal-light:#C1D9FF;--e-global-color-brand-zimmer:#0099CC;--e-global-color-a0d132d:#0F80CC;--e-global-color-dd07395:#838383;--e-global-color-ef83a6c:#2B77FD;--e-global-color-9659042:#FF7B01;--e-global-color-1d09070:#E9000B;--e-global-color-7640480:#1B6AD5;--e-global-color-apa-grey-dark:#374151;--e-global-color-apa-pill-hover:#C2185B;--e-global-color-9d1ed93:#0FAB67;--e-global-color-apa-distributor:#F7941E;--e-global-color-1437315:#6B9ACD;--e-global-color-apa-tab-active:#1559FC;--e-global-typography-primary-font-family:"Poppins";--e-global-typography-primary-font-weight:600;--e-global-typography-primary-line-height:1.3em;--e-global-typography-secondary-font-family:"Poppins";--e-global-typography-secondary-font-weight:600;--e-global-typography-secondary-line-height:1.3em;--e-global-typography-text-font-family:"Poppins";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Poppins";--e-global-typography-accent-font-weight:600;--e-global-typography-accent-line-height:1.3em;color:var( --e-global-color-text );font-size:16px;font-weight:400;line-height:1.6em;}.elementor-kit-6 button:hover,.elementor-kit-6 button:focus,.elementor-kit-6 input[type="button"]:hover,.elementor-kit-6 input[type="button"]:focus,.elementor-kit-6 input[type="submit"]:hover,.elementor-kit-6 input[type="submit"]:focus,.elementor-kit-6 .elementor-button:hover,.elementor-kit-6 .elementor-button:focus{background-color:#6B7280;color:#FFFFFF;}.elementor-kit-6 e-page-transition{background-color:#FFBC7D;}.elementor-kit-6 a{color:var( --e-global-color-5d8f7e3 );}.elementor-kit-6 h1{color:var( --e-global-color-5d8f7e3 );font-weight:600;}.elementor-kit-6 h2{color:var( --e-global-color-5d8f7e3 );font-weight:600;}.elementor-kit-6 h3{color:var( --e-global-color-5d8f7e3 );font-size:24px;font-weight:600;}.elementor-kit-6 h4{color:var( --e-global-color-5d8f7e3 );font-weight:600;}.elementor-kit-6 h5{color:var( --e-global-color-5d8f7e3 );font-weight:600;}.elementor-kit-6 h6{color:var( --e-global-color-5d8f7e3 );font-weight:600;}.elementor-kit-6 button,.elementor-kit-6 input[type="button"],.elementor-kit-6 input[type="submit"],.elementor-kit-6 .elementor-button{font-weight:600;padding:10px 20px 10px 20px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1180px;}.e-con{--container-max-width:1180px;--container-default-padding-top:0px;--container-default-padding-right:0px;--container-default-padding-bottom:0px;--container-default-padding-left:0px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-kit-6 h1{font-size:40px;line-height:1.2em;}.elementor-kit-6 h2{font-size:30px;line-height:1.25em;}.elementor-kit-6 h3{font-size:22px;}.elementor-kit-6 h4{font-size:18px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-kit-6{font-size:15px;line-height:1.7em;}.elementor-kit-6 h1{font-size:30px;line-height:1.2em;}.elementor-kit-6 h2{font-size:24px;line-height:1.25em;}.elementor-kit-6 h3{font-size:19px;line-height:1.3em;}.elementor-kit-6 h4{font-size:16px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}:root { --Primary:#F54340; --Secondary:#484DD2; --Text:#545357; --Black:#000000; --White:#FFFFFF; --Transparent:#00000000; --Accent:#FFF1F2; --rittal:#1B6AD5; --rittal-2:#DAE7F8; }
/* Start custom CSS *//* ═══════════════════════════════════════════════════════════
   GLOBAL RESPONSIVE  –  phoenixwebx
   Tablet  : 768–1024 px   |   Mobile  : ≤ 767 px
═══════════════════════════════════════════════════════════ */

/* ── Mobile ── */
@media (max-width:767px) {

  /* Buttons: full-width on mobile */
  .elementor-button-wrapper { width: 100%; }
  .elementor-button { width: 100%; text-align: center; justify-content: center; }

  /* Dividers */
  .elementor-divider { margin-top: 16px !important; margin-bottom: 16px !important; }
}

/* APA partner-card — equalize bottom row position */
.partner-card {
  display: flex !important;
  flex-direction: column !important;
}
.partner-card > .e-con {
  display: flex !important;
  flex-direction: column !important;
  flex-grow: 1 !important;
  height: 100% !important;
}
/* The copy sizes to its own text; the spare height goes to the
   margin-top:auto below, which pins the footer to the card
   bottom. With flex-grow:1 here the copy swallowed the slack and
   left an empty band above the divider. */
.partner-card > .e-con > .elementor-widget-text-editor {
  flex-grow: 0 !important;
}
.partner-card > .e-con > .e-con:last-child {
  margin-top: auto !important;
}
/* END partner-card */

/* APA heading defaults — override Elementor's primary-red defaults */
.elementor-widget-icon-box .elementor-icon-box-title,
.elementor-widget-icon-box .elementor-icon-box-title a {
  color: #1A2744;
}
.elementor-widget-icon-box .elementor-icon-box-description {
  color: #545357;
}
.elementor-widget-icon-box:has(:hover) .elementor-icon-box-title,
.elementor-widget-icon-box:has(:focus) .elementor-icon-box-title {
  color: #1A2744;
}
.elementor-widget-heading .elementor-heading-title {
  color: #1A2744;
}
/* END APA heading */

/* ═══════════════════════════════════════════════════════════
   APA HOVER SYSTEM — Website Improvement Brief (round 2)
   Items 29, 32, 33, 34, 36, 37, 38, 39, 40, 41, 42

   Classes are set via each WIDGET's "CSS Classes" field
   (Advanced tab). Containers cannot carry them: in Elementor
   4.2 `_css_classes` is registered only in
   includes/widgets/common-base.php, i.e. for widgets.

   SPECIFICITY: Elementor generates
     .elementor-NNN .elementor-element.elementor-element-XXX .elementor-icon-box-title
   = (0,4,0), and the "APA heading defaults" block above uses
     .elementor-widget-icon-box:has(:hover) .elementor-icon-box-title
   = (0,3,0). The rules below carry 5 classes so they win on
   their own merit — no !important anywhere.
═══════════════════════════════════════════════════════════ */

:root{
  --apa-ease: .3s ease;
  --apa-white: #FFFFFF;
  --apa-grey: #6B7280;
  --apa-grey-dark: #374151;
}

/* ── Icon pop (29) ── */
.elementor-widget.elementor-element.apa-icon-pop .elementor-icon{
  display: inline-block;
  transition: transform var(--apa-ease), filter var(--apa-ease);
}
.elementor-widget.elementor-element.apa-icon-pop:hover .elementor-icon{
  transform: scale(1.05);
  filter: drop-shadow(0 4px 10px rgba(0,0,0,.14));
}

/* ── Card lift + soft shadow (32,35) ── */
.elementor-widget.elementor-element.apa-hover-lift{
  transition: transform var(--apa-ease), box-shadow var(--apa-ease);
}
.elementor-widget.elementor-element.apa-hover-lift:hover{
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0,0,0,.06);
}

/* Brief: movement is switched off on touch screens */
@media (max-width:767px){
  .elementor-widget.elementor-element.apa-hover-lift:hover{ transform: none; box-shadow: none; }
  .elementor-widget.elementor-element.apa-icon-pop:hover .elementor-icon{ transform: none; filter: none; }
}

/* Accessibility: honour the OS "reduce motion" setting */
@media (prefers-reduced-motion: reduce){
  .elementor-widget.elementor-element.apa-hover-lift,
  .elementor-widget.elementor-element.apa-icon-pop .elementor-icon{ transition: none; }
  .elementor-widget.elementor-element.apa-hover-lift:hover{ transform: none; }
  .elementor-widget.elementor-element.apa-icon-pop:hover .elementor-icon{ transform: none; }
}
/* END APA hover system */

/* ── Challenge / Solution card lift (item 32) ───────────────
   Targets the existing Global Class labels, so every page that
   uses these cards gets it — no per-page element edits.
─────────────────────────────────────────────────────────── */
.e-con.info-card-challenge,
.e-con.info-card-solution{
  transition: transform var(--apa-ease), box-shadow var(--apa-ease);
}
.e-con.info-card-challenge:hover,
.e-con.info-card-solution:hover{
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0,0,0,.06);
}

/* Brief: no movement on touch screens */
@media (max-width:767px){
  .e-con.info-card-challenge:hover,
  .e-con.info-card-solution:hover{ transform: none; box-shadow: none; }
}
@media (prefers-reduced-motion: reduce){
  .e-con.info-card-challenge,
  .e-con.info-card-solution{ transition: none; }
  .e-con.info-card-challenge:hover,
  .e-con.info-card-solution:hover{ transform: none; }
}
/* END challenge/solution lift */

/* ── Challenge chips (Home) ─────────────────────────────────
   The mobile block near the top forces
   .elementor-widget-text-editor p to 15px !important, which
   would blow the chip caption up on phones. Beating an
   !important needs !important back, so this rule carries one
   plus higher specificity (3 classes vs 2).
─────────────────────────────────────────────────────────── */
.elementor-widget.elementor-element.apa-chip-meta p{
  font-size: 12px !important;
  line-height: 1.45 !important;
  margin: 0;
}
.elementor-widget.elementor-element.apa-chip-meta strong{
  display: inline-block;
  letter-spacing: .04em;
}
/* Reserve two caption lines so a chip whose caption is one line ends
   up the same height as one with two, and the rows line up from
   project to project. 2.9em = two lines at the 1.45 set above, so
   it follows the type rather than a pixel guess. */
.elementor-widget.elementor-element.apa-chip-meta p{
  min-height:2.9em;
}
/* END challenge chips */

/* ── Simulation steps (Home) ────────────────────────────────
   One unbroken blue ribbon down the left, divided by thin white
   chevrons and finished with an arrow head, per the Canva design.

   The list and the rows are v3 containers, which cannot carry a
   CSS class in Elementor 4.2, so they are reached through their
   rendered descendant .apa-step-num with :has(). The .elementor
   prefix out-specifies base-desktop.css, which otherwise ties on
   specificity and loads later.

   The seam chevron is drawn on the TOP of each segment rather
   than the bottom of the one above it, so the later sibling
   paints it over the blue instead of under it.

   Colours read Kit tokens, so retheming still drives this block.
   The two !important flags exist only to beat the mobile rule
   near the top of this file, which sets
   .elementor-widget-text-editor p to 15px !important.
─────────────────────────────────────────────────────────── */

/* heading above the list */
.elementor .e-flexbox-base:has(.apa-step-num){
  display:flex; flex-direction:column; gap:16px;
}

/* the list: segments meet, so the ribbon reads as one piece */
.elementor .e-con:has(> .e-con > .elementor-widget.apa-step-num){
  gap:0;
}

/* a row: ribbon segment + text, segment stretched to the row */
.elementor .e-con:has(> .elementor-widget.apa-step-num){
  flex-wrap:nowrap;
  align-items:stretch;
}
/* the text block defaults to width:100%, which wrapped the row */
.elementor .e-con:has(> .elementor-widget.apa-step-num) > .e-con{
  flex:1 1 0; width:auto; min-width:0;
  /* equal on every row, so all four segments come out the same
     height; the arrow head is drawn inside the last row's space */
  padding-bottom:26px;
}

/* ribbon segment */
.elementor-widget.elementor-element.apa-step-num{ flex:0 0 48px; display:flex; }
.elementor-widget.elementor-element.apa-step-num .elementor-heading-title{
  position:relative;
  flex:1 1 auto; width:48px;
  display:flex; align-items:center; justify-content:center;
  background: var(--e-global-color-7640480, #1B6AD5);
  color:#FFFFFF; font-size:22px; font-weight:700; line-height:1;
}

/* seam between two segments: a thin white chevron drawn edge
   to edge across the ribbon, so the bar reads as stacked arrows.
   The outer V is (0 0)(50% 55%)(100% 0); the inner V repeats it
   22% lower, and the band between them is the stroke. */
.elementor .e-con:has(> .elementor-widget.apa-step-num):not(:first-child)
  .apa-step-num .elementor-heading-title::after{
  content:""; position:absolute; left:0; top:-6px;
  width:100%; height:15px;
  background:#FFFFFF;
  clip-path: polygon(0 0, 50% 55%, 100% 0, 100% 22%, 50% 100%, 0 22%);
}

/* arrow head closing the ribbon */
.elementor .e-con:has(> .elementor-widget.apa-step-num):last-child
  .apa-step-num .elementor-heading-title::before{
  content:""; position:absolute; left:0; top:100%;
  width:100%; height:26px;
  background: var(--e-global-color-7640480, #1B6AD5);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}

/* step title */
.elementor-widget.elementor-element.apa-step-title .elementor-heading-title{
  color: var(--e-global-color-color-1a1a2e, #1A1A2E);
  font-size:20px; font-weight:700; line-height:1.3; margin:0;
}

/* step description */
.elementor-widget.elementor-element.apa-step-desc p{
  color: var(--e-global-color-apa-text-mute, #6B7280);
  font-size:15px !important;
  line-height:1.5 !important;
  margin:2px 0 0;
}

@media (max-width:767px){
  /* scaled with the desktop sizes above. The title has to stay clear of the
     description, which the rule further up pins at 15px !important, so 17px
     here keeps the two ranks apart on a phone. */
  .elementor-widget.elementor-element.apa-step-num{ flex:0 0 38px; }
  .elementor-widget.elementor-element.apa-step-num .elementor-heading-title{
    width:38px; font-size:18px;
  }
  .elementor .e-con:has(> .elementor-widget.apa-step-num):last-child
    .apa-step-num .elementor-heading-title::before{ height:20px; }
  .elementor-widget.elementor-element.apa-step-title .elementor-heading-title{ font-size:17px; }
  .elementor .e-con:has(> .elementor-widget.apa-step-num) > .e-con{ padding-bottom:20px; }
}
/* END simulation steps */

/* ── Authorized Distributor cards (Home) ────────────────────
   Everything else about these cards is set on the elements
   themselves; only two things need CSS.

   No magnifier icon is added next to the tags on purpose — it
   is in the Canva mock-up but not wanted on the site.
─────────────────────────────────────────────────────────── */

/* Tag pills hug their own text. Widgets in a container default
   to --container-widget-width:100%, which stretched all three
   pills to the full row. */
.elementor .e-con > .elementor-widget.apa-ad-tag{
  width:auto;
  max-width:100%;
  flex:0 0 auto;
}

/* The description takes the card's spare height, so the divider
   and the whole footer land at the same offset in every card
   however many lines the copy runs to. The grid already makes
   the six cards equal height, so growing the one flexible block
   is all that is needed — no fixed heights, no line counting,
   and nothing to retune when the copy changes.
   Widgets in a container default to flex-grow:0, hence this. */
.elementor .e-con > .elementor-widget.apa-ad-desc{
  flex-grow:1;
}
/* Every card shows the same picture area, whatever shape or size
   the source file is: a fixed 3:2 box with the image scaled to
   fit inside it. "contain", not "cover", because these are
   product shots on a white background — cropping would cut the
   product, and the leftover space is white on a white card. */
.elementor .e-con > .elementor-widget.apa-ad-media img{
  display:block;
  width:100%;
  aspect-ratio:3 / 2;
  object-fit:contain;
  object-position:center;
}
/* END authorized distributor cards */

/* ── Hosted background video ────────────────────────────────
   Elementor's JS sizes a hosted background video to a 16:9 box
   and centres it with a transform, whatever shape the file is.
   For the 3:1 home intro that threw away the framing — only
   59% x 62% of each frame survived the double crop.

   Sizing the video to its container instead and letting
   object-fit:cover do the cropping keeps the whole width.
   For a 16:9 source this computes to exactly what Elementor
   already did, so it is safe for every background video.
   !important is required because the width/height Elementor
   sets are inline styles.
─────────────────────────────────────────────────────────── */
.elementor .elementor-background-video-hosted{
  width:100% !important;
  height:100% !important;
  left:0 !important;
  top:0 !important;
  transform:none !important;
  object-fit:cover;
  object-position:center;
}
/* END hosted background video */

/* ── Cycle-time figures (In-House case studies) ─────────────
   Brief items 9 and 10: the result figures draw the eye with a
   slow loop, and the whole set counts up when it scrolls into
   view (the counting itself is in the page's custom JS).

   Item 9  — 39 SEC and 20%: gentle 1.05x pulse.
   Item 10 — 29 SEC and 10%: 1.04x every 2.5s plus a soft
             breathe from full to 75% opacity.

   Both briefs ask for the loop to stop on phones; the
   reduced-motion query is the same courtesy for anyone who
   has asked their system to keep animation to a minimum.
─────────────────────────────────────────────────────────── */
.apa-count{ font-variant-numeric: tabular-nums; }

.apa-pulse,
.apa-breathe{
  display:inline-block;
  transform-origin:center;
  will-change:transform;
}
.apa-pulse{   animation: apa-pulse   2s   ease-in-out infinite; }
.apa-breathe{ animation: apa-breathe 2.5s ease-in-out infinite; }

@keyframes apa-pulse{
  0%,100%{ transform:scale(1);    }
  50%    { transform:scale(1.05); }
}
@keyframes apa-breathe{
  0%,100%{ transform:scale(1);    opacity:1;   }
  50%    { transform:scale(1.04); opacity:.75; }
}

@media (max-width:767px){
  .apa-pulse,.apa-breathe{ animation:none; transform:none; opacity:1; }
}
@media (prefers-reduced-motion: reduce){
  .apa-pulse,.apa-breathe{ animation:none; transform:none; opacity:1; }
}
/* END cycle-time figures */

/* Zimmer Proven Solutions — Challenge | chevron | Solution on one line (new design) */
.elementor .e-con:has(> .info-card-challenge):has(> .info-card-solution) > .info-card-challenge,
.elementor .e-con:has(> .info-card-challenge):has(> .info-card-solution) > .info-card-solution{
  flex: 1 1 0; min-width: 0;
}
.elementor .elementor-widget.apa-cs-arrow{ flex: 0 0 auto; width: auto; align-self: center; }
@media (max-width: 1024px){
  .elementor .elementor-widget.apa-cs-arrow .elementor-icon{ display:block; transform: rotate(90deg); }
}

/* Zimmer Proven Solutions - new design card colours.
   Scoped with :has() to containers holding BOTH cards, i.e. only these 4 rows.
   info-card-challenge / info-card-solution are reused on F.EE (Simple Assembly Process)
   and Rittal (REAL BENEFIT), which keep their own brand colours. */
.elementor .e-con:has(> .e-con.info-card-challenge):has(> .e-con.info-card-solution) > .e-con.info-card-challenge{
  background-color:#FFF8E7; border-style:solid; border-color:#FEBD58;
  border-width:0 0 0 4px; border-radius:8px;
}
.elementor .e-con:has(> .e-con.info-card-challenge):has(> .e-con.info-card-solution) > .e-con.info-card-solution{
  background-color:#EFF6FF; border-style:solid; border-color:#1B60FF;
  border-width:0 0 0 4px; border-radius:8px;
}

/* Zimmer product mini-cards - pin "more >" to the bottom so it lines up
   no matter how many lines the model name wraps to */
.elementor .elementor-widget.apa-mini-more{ margin-top:auto; }

/* Item 35 - tab-switch entrance for the Challenge / Solution cards.
   Elementor re-adds .elementor-active on every switch, so the animation replays.
   No forwards fill-mode: the cards must end in their natural state or the
   hover lift (translateY(-3px)) would be overridden by the animation end frame. */
@keyframes apa-fade-left{ from{ opacity:0; transform:translateX(-18px); } to{ opacity:1; transform:none; } }
@keyframes apa-fade-up  { from{ opacity:0; transform:translateY(18px);  } to{ opacity:1; transform:none; } }
.elementor-tab-content.elementor-active .info-card-challenge{
  animation: apa-fade-left .45s cubic-bezier(.2,.7,.3,1) backwards;
}
.elementor-tab-content.elementor-active .info-card-solution{
  animation: apa-fade-up .45s .12s cubic-bezier(.2,.7,.3,1) backwards;
}
@media (prefers-reduced-motion: reduce){
  .elementor-tab-content.elementor-active .info-card-challenge,
  .elementor-tab-content.elementor-active .info-card-solution{ animation: none; }
}

/* Mobile touch targets - Apple asks for 44px, Google for 48dp.
   The nav items inside the drawer are already 390x54; these two were not. */
@media (max-width: 1024px){
  /* hamburger hit area was 20x20 - the icon stays 20px, only the target grows */
  .elementor .e-n-menu-toggle{
    min-width: 44px; min-height: 44px;
    display: flex; align-items: center; justify-content: center;
  }
}
@media (max-width: 767px){
  /* footer link rows were 350x24 */
  .elementor-location-footer .elementor-widget-icon-list .elementor-icon-list-item > a{
    min-height: 44px;
    display: flex; align-items: center;
  }
}

/* Home "Authorized Distributor" cards - hover.
   The 6 cards are v3 containers, which cannot carry a CSS class, so they are
   addressed as the direct children of the grid. Same lift values as items 31/32. */
.elementor .elementor-element-3fc6805 > .e-con{
  transition: transform var(--apa-ease), box-shadow var(--apa-ease);
}
.elementor .elementor-element-3fc6805 > .e-con:hover{
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0,0,0,.06);
}
/* the "Learn More" link deepens and nudges right with the card */
.elementor .elementor-widget.apa-ad-link .elementor-button{
  transition: color var(--apa-ease), transform var(--apa-ease);
}
.elementor .elementor-element-3fc6805 > .e-con:hover .apa-ad-link .elementor-button{
  color: #0B4E9E;
}
@media (max-width: 767px){
  .elementor .elementor-element-3fc6805 > .e-con:hover{ transform: none; box-shadow: none; }
  .elementor .elementor-element-3fc6805 > .e-con:hover .apa-ad-link .elementor-button{ transform: none; }
}
@media (prefers-reduced-motion: reduce){
  .elementor .elementor-element-3fc6805 > .e-con,
  .elementor .elementor-widget.apa-ad-link .elementor-button{ transition: none; }
  .elementor .elementor-element-3fc6805 > .e-con:hover{ transform: none; }
}

/* Icon-box + button colour hovers are set natively on each widget now.
   Elementor does not emit a transition for them, so this single rule keeps
   the fade instead of an instant colour snap. */
.elementor-widget-icon-box .elementor-icon-box-title,
.elementor-widget-icon-box .elementor-icon-box-description,
.elementor-widget-icon-box .elementor-icon,
.elementor-widget-icon-box .elementor-icon svg{
  transition: color .3s ease, fill .3s ease;
}

/* Canva page 11 - EGT tabs on phones.
   "FIX ตำแหน่งหัวข้อไว้"  -> the accordion title sticks under the fixed header (65px)
   "เพิ่มปุ่ม กดเปิดปิด"   -> a chevron that flips when the panel is open
   Elementor has no control for either on the tabs widget. */
@media (max-width: 767px){
  .elementor .elementor-element-ni52cr8 .elementor-tab-mobile-title{
    position: sticky;
    top: 65px;
    z-index: 5;
    background-color: #FFFFFF;   /* sticky needs an opaque backdrop; the widget control only paints the desktop tab */
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .elementor .elementor-element-ni52cr8 .elementor-tab-mobile-title::after{
    content: "";
    flex: 0 0 auto;
    width: 9px; height: 9px;
    margin-left: 12px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-3px) rotate(45deg);
    transition: transform .25s ease;
  }
  .elementor .elementor-element-ni52cr8 .elementor-tab-mobile-title.elementor-active::after{
    transform: translateY(2px) rotate(-135deg);
  }
}
@media (prefers-reduced-motion: reduce){
  .elementor .elementor-element-ni52cr8 .elementor-tab-mobile-title::after{ transition: none; }
}

/* Banner metric labels — hover colour.
   Elementor's icon-box has title_color + hover_title_color and primary_color +
   hover_primary_color, but description_color has NO hover twin, so the label under
   each number/icon could never follow. These rules add it, matching each brand's
   existing native hover target. 0,5,0 beats Elementor's 0,4,0 regardless of order.
   The fade itself comes from the shared icon-box transition rule above. */
.elementor .elementor-widget-icon-box.apa-metric:hover .elementor-icon-box-description{
  color: #FFFFFF;
}
.elementor .elementor-widget-icon-box.apa-metric.apa-brand-imi:hover .elementor-icon-box-description{
  color: #9160CC;
}
@media (prefers-reduced-motion: reduce){
  .elementor .elementor-widget-icon-box.apa-metric .elementor-icon-box-description{ transition: none; }
}

/* Eyebrow label pills.
   These are section labels built with the button widget, so Elementor renders
   them as <a href="#"> — which gives a pointer cursor and, when clicked, jumps
   the page to the top. They are not controls, so switch the interaction off. */
.elementor .elementor-widget.apa-pill .elementor-button{
  cursor: default;
  pointer-events: none;
}

/* F.EE mobile accordion chevron - stroke weight and colour.
   The mobile title carries BOTH .elementor-tab-title and .elementor-tab-mobile-title,
   so Elementor's own "border-color: #DDDDDD" rule for .elementor-tab-title::after
   (0,4,0) was overriding the chevron above (0,3,0) - it rendered 0.8px in #DDDDDD,
   only 1.36:1 against white, under the 3:1 minimum for a UI state indicator.
   Five classes here beat it, and currentColor ties the arrow to its own title:
   red while open, black while closed. */
@media (max-width: 767px){
  .elementor .elementor-element.elementor-element-ni52cr8
  .elementor-tabs .elementor-tab-mobile-title::after{
    border-right-width: 2px;
    border-bottom-width: 2px;
    border-right-color: currentColor;
    border-bottom-color: currentColor;
  }
}

/* ── F.EE EGT Applications — pill tabs ──
   The classic Tabs widget has no border-radius, gap, per-state background or
   padding control, so the pill look has to live here. Elementor's own rules for
   this widget reach (0,5,0) — hence the extra .elementor-tabs in the chain.
   Scoped to >=768px: below that the widget is an accordion and the desktop
   titles are hidden, so the accordion keeps its own styling untouched. */
@media (min-width: 768px){
  .elementor .elementor-element.elementor-element-ni52cr8 .elementor-tabs .elementor-tabs-wrapper{
    display: flex; flex-wrap: wrap; gap: 10px; border: 0;
  }
  .elementor .elementor-element.elementor-element-ni52cr8 .elementor-tabs .elementor-tab-desktop-title{
    background-color: #FFFFFF;
    border: 1px solid #DDDDDD;
    border-radius: 8px;
    color: #1A2744;
    padding: 10px 20px;
    transition: background-color var(--apa-ease), border-color var(--apa-ease), color var(--apa-ease);
  }
  .elementor .elementor-element.elementor-element-ni52cr8 .elementor-tabs .elementor-tab-desktop-title:not(.elementor-active):hover{
    background-color: #EEF3FF;
    border-color: var( --e-global-color-apa-tab-active );
    color: var( --e-global-color-apa-tab-active );
  }
  .elementor .elementor-element.elementor-element-ni52cr8 .elementor-tabs .elementor-tab-desktop-title.elementor-active{
    background-color: var( --e-global-color-apa-tab-active );
    border: 1px solid var( --e-global-color-apa-tab-active );
    color: #FFFFFF;
  }
  /* pills are detached now, so the panel needs its own breathing room */
  .elementor .elementor-element.elementor-element-ni52cr8 .elementor-tabs .elementor-tabs-content-wrapper{
    margin-top: 16px;
  }
}
/* Accessibility: honour the OS "reduce motion" setting */
@media (prefers-reduced-motion: reduce){
  .elementor .elementor-element.elementor-element-ni52cr8 .elementor-tabs .elementor-tab-desktop-title{ transition: none; }
}

/* ── F.EE EGT Applications — tab panel border ──
   Elementor draws the panel as a 3-sided box (top removed so it could merge
   with the old attached tab). With detached pills that reads as a stray long
   line under the content, so drop it. Desktop only — the mobile accordion
   still needs its box. */
@media (min-width: 768px){
  .elementor .elementor-element.elementor-element-ni52cr8 .elementor-tabs .elementor-tab-content{
    border: 0;
  }
}

/* ── F.EE EGT Applications — active-tab underline extension ──
   The active desktop tab carries ::before/::after pseudo-elements ~13000px wide
   with a 1px bottom border, Elementor's way of running the underline out to both
   edges of an attached tab strip. With detached pills it is just a long stray
   rule under the row. Desktop only — ::after on the MOBILE title is the custom
   accordion chevron and must not be touched. */
@media (min-width: 768px){
  .elementor .elementor-element.elementor-element-ni52cr8 .elementor-tabs .elementor-tab-desktop-title::before,
  .elementor .elementor-element.elementor-element-ni52cr8 .elementor-tabs .elementor-tab-desktop-title::after{
    display: none;
  }
}

/* ── Rittal REAL BENEFIT frame ──
   The three boxes set border-color + background per element (#1b6ad5 / #1c69d636)
   and the global class supplies border-style:solid — but NOTHING declares a
   border-width, so the frame renders at the browser's `medium` default. Pin the full look here.
   WHY HERE: the per-element colours live in local-367-frontend-desktop.css, which
   is versioned by a STATIC hash (?ver=6abbda912c45b) and served with Expires +1
   year — so a visitor who cached it before the colours changed keeps the old look
   forever. post-6.css is versioned by timestamp and busts on every rebuild.
   Page-scoped: info-card-solution is shared with F.EE and Zimmer, which keep
   their own left-bar treatment. */
.elementor-367 .e-con.info-card-solution,
.elementor-403 .e-con.info-card-challenge,
.elementor-405 .e-con.info-card-challenge{
  border-style: solid;
  border-width: 0 0 0 8px;   /* design: left bar only, measured 8px at 1:1 */
  border-color: #1B6AD5;
  background-color: #1B6AD528;   /* 15.7% of the brand blue -> renders #D5E2F3 */
  border-radius: 0;
}

/* ── Blue Clamp versions table — mobile ──
   Desktop is a 4-column table: [product] | Typical use | Application | Key
   Advantages, with the column names living only in the header row. On phones
   every row flips to a column, so the header collapses into three stray blue
   bars and each value loses the label that gave it meaning.
   Mobile only: hide the header row, make each product row a card, and print the
   column name above its value. Desktop is untouched. */
@media (max-width: 767px){

  /* the header row means nothing once the columns stack */
  .elementor-385 .elementor-element.elementor-element-j4q0e1r{ display: none; }

  /* each product row becomes one card */
  .elementor-385 .elementor-element.elementor-element-4hszpkv > .e-con-inner,
  .elementor-385 .elementor-element.elementor-element-p11tucy > .e-con-inner,
  .elementor-385 .elementor-element.elementor-element-193j8za > .e-con-inner,
  .elementor-385 .elementor-element.elementor-element-tf062b7 > .e-con-inner,
  .elementor-385 .elementor-element.elementor-element-8p7tlxu > .e-con-inner{
    gap: 0;
    background-color: #FFFFFF;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 14px rgba(0,0,0,.06);
  }

  /* first cell is the product photo + name pill — inset so neither touches the card edge */
  .elementor-385 .elementor-element.elementor-element-4hszpkv > .e-con-inner > .e-con:nth-child(1),
  .elementor-385 .elementor-element.elementor-element-p11tucy > .e-con-inner > .e-con:nth-child(1),
  .elementor-385 .elementor-element.elementor-element-193j8za > .e-con-inner > .e-con:nth-child(1),
  .elementor-385 .elementor-element.elementor-element-tf062b7 > .e-con-inner > .e-con:nth-child(1),
  .elementor-385 .elementor-element.elementor-element-8p7tlxu > .e-con-inner > .e-con:nth-child(1){
    padding: 16px 16px 18px;
  }
  .elementor-385 .elementor-element.elementor-element-4hszpkv > .e-con-inner > .e-con:nth-child(1) img,
  .elementor-385 .elementor-element.elementor-element-p11tucy > .e-con-inner > .e-con:nth-child(1) img,
  .elementor-385 .elementor-element.elementor-element-193j8za > .e-con-inner > .e-con:nth-child(1) img,
  .elementor-385 .elementor-element.elementor-element-tf062b7 > .e-con-inner > .e-con:nth-child(1) img,
  .elementor-385 .elementor-element.elementor-element-8p7tlxu > .e-con-inner > .e-con:nth-child(1) img{
    border-radius: 8px;
  }

  /* the three value cells: hairline separator + room for the label */
  .elementor-385 .elementor-element.elementor-element-4hszpkv > .e-con-inner > .e-con:nth-child(n+2),
  .elementor-385 .elementor-element.elementor-element-p11tucy > .e-con-inner > .e-con:nth-child(n+2),
  .elementor-385 .elementor-element.elementor-element-193j8za > .e-con-inner > .e-con:nth-child(n+2),
  .elementor-385 .elementor-element.elementor-element-tf062b7 > .e-con-inner > .e-con:nth-child(n+2),
  .elementor-385 .elementor-element.elementor-element-8p7tlxu > .e-con-inner > .e-con:nth-child(n+2){
    padding: 18px 24px;
    border-top: 1px solid #E7ECF3;
    /* the 200px min-height equalises the columns on desktop; stacked on a phone it
       just leaves ~85px of dead air above and below each value */
    min-height: 0;
  }
  .elementor-385 .elementor-element.elementor-element-4hszpkv > .e-con-inner > .e-con:nth-child(n+2) > .e-con-inner,
  .elementor-385 .elementor-element.elementor-element-p11tucy > .e-con-inner > .e-con:nth-child(n+2) > .e-con-inner,
  .elementor-385 .elementor-element.elementor-element-193j8za > .e-con-inner > .e-con:nth-child(n+2) > .e-con-inner,
  .elementor-385 .elementor-element.elementor-element-tf062b7 > .e-con-inner > .e-con:nth-child(n+2) > .e-con-inner,
  .elementor-385 .elementor-element.elementor-element-8p7tlxu > .e-con-inner > .e-con:nth-child(n+2) > .e-con-inner{
    padding: 0;
    gap: 0;
    justify-content: flex-start;
  }
  .elementor-385 .elementor-element.elementor-element-4hszpkv > .e-con-inner > .e-con:nth-child(n+2)::before,
  .elementor-385 .elementor-element.elementor-element-p11tucy > .e-con-inner > .e-con:nth-child(n+2)::before,
  .elementor-385 .elementor-element.elementor-element-193j8za > .e-con-inner > .e-con:nth-child(n+2)::before,
  .elementor-385 .elementor-element.elementor-element-tf062b7 > .e-con-inner > .e-con:nth-child(n+2)::before,
  .elementor-385 .elementor-element.elementor-element-8p7tlxu > .e-con-inner > .e-con:nth-child(n+2)::before{
    /* Elementor styles .e-con::before as an absolutely positioned overlay
       (left:0; width:100%), which made this label ignore the cell padding and
       sit hard against the card edge. Put it back in normal flow. */
    position: static;
    width: auto;
    height: auto;
    display: block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #5672A0;
    margin-bottom: 4px;
  }
  .elementor-385 .elementor-element.elementor-element-4hszpkv > .e-con-inner > .e-con:nth-child(2)::before,
  .elementor-385 .elementor-element.elementor-element-p11tucy > .e-con-inner > .e-con:nth-child(2)::before,
  .elementor-385 .elementor-element.elementor-element-193j8za > .e-con-inner > .e-con:nth-child(2)::before,
  .elementor-385 .elementor-element.elementor-element-tf062b7 > .e-con-inner > .e-con:nth-child(2)::before,
  .elementor-385 .elementor-element.elementor-element-8p7tlxu > .e-con-inner > .e-con:nth-child(2)::before{ content: "Typical use"; }
  .elementor-385 .elementor-element.elementor-element-4hszpkv > .e-con-inner > .e-con:nth-child(3)::before,
  .elementor-385 .elementor-element.elementor-element-p11tucy > .e-con-inner > .e-con:nth-child(3)::before,
  .elementor-385 .elementor-element.elementor-element-193j8za > .e-con-inner > .e-con:nth-child(3)::before,
  .elementor-385 .elementor-element.elementor-element-tf062b7 > .e-con-inner > .e-con:nth-child(3)::before,
  .elementor-385 .elementor-element.elementor-element-8p7tlxu > .e-con-inner > .e-con:nth-child(3)::before{ content: "Application"; }
  .elementor-385 .elementor-element.elementor-element-4hszpkv > .e-con-inner > .e-con:nth-child(4)::before,
  .elementor-385 .elementor-element.elementor-element-p11tucy > .e-con-inner > .e-con:nth-child(4)::before,
  .elementor-385 .elementor-element.elementor-element-193j8za > .e-con-inner > .e-con:nth-child(4)::before,
  .elementor-385 .elementor-element.elementor-element-tf062b7 > .e-con-inner > .e-con:nth-child(4)::before,
  .elementor-385 .elementor-element.elementor-element-8p7tlxu > .e-con-inner > .e-con:nth-child(4)::before{ content: "Key Advantages"; }
}

/* ── F.EE EGT tabs — Challenge / Solution in red / green ──
   The shared :has() rule below gives every Challenge/Solution pair the amber/blue
   treatment, and Zimmer still wants that. These three tab templates are F.EE only,
   so scope by their wrapper class and switch them to the red/green in the design.
   The prefix also lifts specificity past the shared rule's (0,8,0). */
.elementor.elementor-862 .e-con:has(> .e-con.info-card-challenge):has(> .e-con.info-card-solution) > .e-con.info-card-challenge,
.elementor.elementor-864 .e-con:has(> .e-con.info-card-challenge):has(> .e-con.info-card-solution) > .e-con.info-card-challenge,
.elementor.elementor-866 .e-con:has(> .e-con.info-card-challenge):has(> .e-con.info-card-solution) > .e-con.info-card-challenge{
  background-color: #FEF2F2;
  border-color: var( --e-global-color-cade729 );
}
.elementor.elementor-862 .e-con:has(> .e-con.info-card-challenge):has(> .e-con.info-card-solution) > .e-con.info-card-solution,
.elementor.elementor-864 .e-con:has(> .e-con.info-card-challenge):has(> .e-con.info-card-solution) > .e-con.info-card-solution,
.elementor.elementor-866 .e-con:has(> .e-con.info-card-challenge):has(> .e-con.info-card-solution) > .e-con.info-card-solution{
  background-color: #F0FDF4;
  border-color: var( --e-global-color-51d6148 );
}

/* ── Blue Clamp — table on desktop, accordion on mobile ──
   The 4-column table cannot read well on a phone, so the page now carries a second
   copy of the same content as per-product accordions. Each version is shown at the
   width it was designed for. */
@media (max-width: 767.98px){
  .elementor-385 .elementor-element.elementor-element-4hszpkv,
  .elementor-385 .elementor-element.elementor-element-p11tucy,
  .elementor-385 .elementor-element.elementor-element-193j8za,
  .elementor-385 .elementor-element.elementor-element-tf062b7,
  .elementor-385 .elementor-element.elementor-element-8p7tlxu{
    display: none;
  }
}
@media (min-width: 767.99px){
  .elementor-385 .elementor-element.elementor-element-6e90cab,
  .elementor-385 .elementor-element.elementor-element-514dee5,
  .elementor-385 .elementor-element.elementor-element-3609fa2,
  .elementor-385 .elementor-element.elementor-element-d90c358,
  .elementor-385 .elementor-element.elementor-element-88f7ab3{
    display: none;
  }
}

/* ── Blue Clamp accordion — mobile card ──
   Each block carried border-width:25px in the same colour as its background, which
   acted as spacing without being called padding. Traded for real padding, and the
   card given the same white + soft shadow used elsewhere on the site: the old
   #F5F5F7 on the section's #F8F9FB was 3/255 apart, so it read as no card at all. */
@media (max-width: 767.98px){
  .elementor-385 .elementor-element.elementor-element-6e90cab,
  .elementor-385 .elementor-element.elementor-element-514dee5,
  .elementor-385 .elementor-element.elementor-element-3609fa2,
  .elementor-385 .elementor-element.elementor-element-d90c358,
  .elementor-385 .elementor-element.elementor-element-88f7ab3{
    border-width: 0;
    padding: 10px;
    background-color: #FFFFFF;
    border-radius: 16px;
    box-shadow: 0 2px 14px rgba(0,0,0,.06);
  }
  /* square photo corners inside a rounded card never resolve */
  .elementor-385 .elementor-element.elementor-element-6e90cab img,
  .elementor-385 .elementor-element.elementor-element-514dee5 img,
  .elementor-385 .elementor-element.elementor-element-3609fa2 img,
  .elementor-385 .elementor-element.elementor-element-d90c358 img,
  .elementor-385 .elementor-element.elementor-element-88f7ab3 img{
    border-radius: 12px;
  }
  /* the 1px grey outline fought the blue fill; separate the bars with space instead */
  .elementor-385 .elementor-element.elementor-element-6e90cab .e-n-accordion-item-title,
  .elementor-385 .elementor-element.elementor-element-514dee5 .e-n-accordion-item-title,
  .elementor-385 .elementor-element.elementor-element-3609fa2 .e-n-accordion-item-title,
  .elementor-385 .elementor-element.elementor-element-d90c358 .e-n-accordion-item-title,
  .elementor-385 .elementor-element.elementor-element-88f7ab3 .e-n-accordion-item-title{
    border-radius: 8px;
    border-width: 0;
  }
  .elementor-385 .elementor-element.elementor-element-6e90cab .e-n-accordion-item,
  .elementor-385 .elementor-element.elementor-element-514dee5 .e-n-accordion-item,
  .elementor-385 .elementor-element.elementor-element-3609fa2 .e-n-accordion-item,
  .elementor-385 .elementor-element.elementor-element-d90c358 .e-n-accordion-item,
  .elementor-385 .elementor-element.elementor-element-88f7ab3 .e-n-accordion-item{
    margin-bottom: 6px;
  }
  .elementor-385 .elementor-element.elementor-element-6e90cab .e-n-accordion-item:last-child,
  .elementor-385 .elementor-element.elementor-element-514dee5 .e-n-accordion-item:last-child,
  .elementor-385 .elementor-element.elementor-element-3609fa2 .e-n-accordion-item:last-child,
  .elementor-385 .elementor-element.elementor-element-d90c358 .e-n-accordion-item:last-child,
  .elementor-385 .elementor-element.elementor-element-88f7ab3 .e-n-accordion-item:last-child{
    margin-bottom: 0;
  }

  /* content panel: card and panel are both white now, so its 1px outline was the only
     thing left of the old boxed look and read as a stray rectangle. Elementor drives
     that border from a custom property, not from border-width. */
  .elementor-385 .elementor-element.elementor-element-6e90cab .elementor-widget-n-accordion,
  .elementor-385 .elementor-element.elementor-element-514dee5 .elementor-widget-n-accordion,
  .elementor-385 .elementor-element.elementor-element-3609fa2 .elementor-widget-n-accordion,
  .elementor-385 .elementor-element.elementor-element-d90c358 .elementor-widget-n-accordion,
  .elementor-385 .elementor-element.elementor-element-88f7ab3 .elementor-widget-n-accordion{
    --n-accordion-border-width: 0px;
  }
  .elementor-385 .elementor-element.elementor-element-6e90cab .e-n-accordion-item > .e-con,
  .elementor-385 .elementor-element.elementor-element-514dee5 .e-n-accordion-item > .e-con,
  .elementor-385 .elementor-element.elementor-element-3609fa2 .e-n-accordion-item > .e-con,
  .elementor-385 .elementor-element.elementor-element-d90c358 .e-n-accordion-item > .e-con,
  .elementor-385 .elementor-element.elementor-element-88f7ab3 .e-n-accordion-item > .e-con{
    padding: 10px 12px 2px;
  }
  /* the nested containers inside the panel pushed the text ~40px below its own
     header and left the panel 112px tall for one line */
  .elementor-385 .elementor-element.elementor-element-6e90cab .e-n-accordion-item > .e-con > .e-con,
  .elementor-385 .elementor-element.elementor-element-514dee5 .e-n-accordion-item > .e-con > .e-con,
  .elementor-385 .elementor-element.elementor-element-3609fa2 .e-n-accordion-item > .e-con > .e-con,
  .elementor-385 .elementor-element.elementor-element-d90c358 .e-n-accordion-item > .e-con > .e-con,
  .elementor-385 .elementor-element.elementor-element-88f7ab3 .e-n-accordion-item > .e-con > .e-con,
  .elementor-385 .elementor-element.elementor-element-6e90cab .e-n-accordion-item > .e-con > .e-con > .e-con-inner,
  .elementor-385 .elementor-element.elementor-element-514dee5 .e-n-accordion-item > .e-con > .e-con > .e-con-inner,
  .elementor-385 .elementor-element.elementor-element-3609fa2 .e-n-accordion-item > .e-con > .e-con > .e-con-inner,
  .elementor-385 .elementor-element.elementor-element-d90c358 .e-n-accordion-item > .e-con > .e-con > .e-con-inner,
  .elementor-385 .elementor-element.elementor-element-88f7ab3 .e-n-accordion-item > .e-con > .e-con > .e-con-inner{
    padding: 0;
    min-height: 0;
  }
}/* End custom CSS */