/* =========================================================
   Fides Electronics — homepage
   Layout note: the hero splits at 41% / 59%. Both the white
   panel and the USP strip use the same split and the same
   gutter maths, so no text can straddle the seam.
   ========================================================= */
:root{
  --blue:#0F56A8;
  --blue-dark:#0B3F7E;
  --navy:#0E2542;
  --orange:#F47B20;
  --grey:#5C6B7E;
  --line:#E6ECF3;
  --soft:#F5F8FC;
  --wrap:min(1440px,94vw);
  --panel-w:clamp(430px,32vw,580px);
  --split:calc(var(--hero-pad) + var(--panel-w));
  --gutter:max(24px,calc(50vw - var(--wrap) / 2 + 24px));
  --hero-pad:clamp(24px,2.6vw,52px);
  --ease:cubic-bezier(.22,.61,.36,1);
  --shadow:0 18px 40px -18px rgba(11,45,90,.28);
}
/* scoped reset — everything lives inside .fx-page so Bootstrap and the
   existing theme are untouched on other pages */
html{scroll-behavior:smooth}
/* html/body margin was never explicitly zeroed anywhere — the browser's
   own default (body{margin:8px}) was silently insetting every full-bleed
   section (the hero image/panel, the USP strip) from the true viewport
   edge on every page, not just the homepage. This is the actual cause of
   the hero/USP-strip edge gap — not a bug in the hero's own split-layout
   math, which was already correctly using left:0/right:0. */
html,body{margin:0;padding:0}
body{overflow-x:hidden}
.fx-page,.fx-page *,.fx-page *:before,.fx-page *:after{box-sizing:border-box}
.fx-page{font-family:'Poppins',Arial,sans-serif;color:var(--navy);background:#fff;
  font-size:15px;line-height:1.65;-webkit-font-smoothing:antialiased}
/* :where() keeps the reset at ZERO specificity, so any component rule
   (.fx-tag padding, .fx-btn background, .fx-view-all colour) still wins.
   Without this the reset silently beat every single-class rule. */
.fx-page :where(h1,h2,h3,h4,h5,p,ul,ol,li,figure,blockquote){margin:0;padding:0}
.fx-page :where(ul,ol){list-style:none}
.fx-page :where(a){text-decoration:none;color:inherit}
.fx-page :where(img){max-width:100%}
.fx-page :where(button){font-family:inherit;cursor:pointer;border:0;background:none;color:inherit}
.fx-page :focus-visible{outline:2px solid var(--orange);outline-offset:3px}
.fx-svg-defs{position:absolute;width:0;height:0;overflow:hidden}
.fx-container{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 24px}
.fx-art{display:block;width:100%;height:100%;object-fit:cover}
.fx-prod-img .fx-art{object-fit:contain;padding:10px}

/* CSS-only, always — never gated behind JS running, IntersectionObserver
   firing, or any class a script might fail to add. Every .fx-reveal element
   fades in on paint by itself. JS may still add .fx-in for a scroll-timed
   variant on long pages, but nothing depends on it for content to appear. */
.fx-reveal{animation:fxFadeIn .7s var(--ease) both;animation-delay:var(--d,0s)}

/* ---------- shared ---------- */
.fx-tag{position:relative;font-size:11px;letter-spacing:.15em;font-weight:600;color:var(--grey);
  padding-left:18px;margin-bottom:9px}
/* CMS values sometimes arrive wrapped in <p> — keep them inline so the
   label never breaks out of its own box */
.fx-tag p,.fx-tag span,.fx-tag div{display:inline;margin:0;padding:0;font:inherit;color:inherit}
.fx-tag:before{content:"";position:absolute;left:0;top:7px;width:5px;height:11px;background:var(--orange);border-radius:1px}
.fx-tag.fx-light{color:#B7D0EE}

.fx-page h2{font-weight:700;letter-spacing:-.015em;line-height:1.24}
.fx-sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:26px}
.fx-sec-head h2{font-size:27px}
.fx-sec-head h2.fx-blue{color:var(--blue)}
.fx-sec-head h2.fx-small{font-size:23px}
.fx-view-all{font-size:13px;font-weight:600;color:var(--blue);white-space:nowrap;padding-bottom:6px}
.fx-view-all i{font-size:11px;margin-left:6px;transition:transform .28s var(--ease)}
.fx-view-all:hover{color:var(--orange)}
.fx-view-all:hover i{transform:translateX(4px)}

.fx-btn{display:inline-flex;align-items:center;gap:10px;font-size:13px;font-weight:600;white-space:nowrap;
  padding:12px 22px;border-radius:4px;
  transition:background .22s,color .22s,box-shadow .28s var(--ease),transform .28s var(--ease)}
.fx-btn i{font-size:11px;transition:transform .28s var(--ease)}
.fx-btn:hover i{transform:translateX(4px)}
.fx-btn-blue{background:var(--blue);color:#fff}
.fx-btn-blue:hover{background:var(--blue-dark);box-shadow:0 12px 26px -8px rgba(15,86,168,.55);transform:translateY(-2px)}
.fx-btn-orange{background:var(--orange);color:#fff}
.fx-btn-orange:hover{background:#e26c11;box-shadow:0 12px 26px -8px rgba(244,123,32,.6);transform:translateY(-2px)}
.fx-btn-ghost{background:#fff;color:var(--navy);border:1px solid #CBD7E6}
.fx-btn-ghost:hover{border-color:var(--blue);color:var(--blue);transform:translateY(-2px)}
.fx-explore{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:600;color:var(--blue)}
.fx-explore i{font-size:10px;transition:transform .28s var(--ease)}
.fx-explore:hover i{transform:translateX(4px)}
.fx-thumb{position:relative;overflow:hidden;background:#0B2D57}
.fx-thumb .fx-art{transition:transform .7s var(--ease)}

/* =========================================================
   HEADER
   ========================================================= */
.fx-site-header{position:sticky;top:0;z-index:60;background:#fff;
  backdrop-filter:saturate(1.6) blur(8px);border-bottom:1px solid var(--line);transition:box-shadow .3s}
.fx-site-header.fx-stuck{box-shadow:0 8px 26px -12px rgba(11,45,90,.35)}
.fx-header-inner{display:flex;align-items:center;justify-content:space-between;height:82px;gap:clamp(18px,3vw,44px);
  max-width:none;padding:0 var(--hero-pad)}
.fx-logo{display:flex;align-items:center;gap:8px;flex-shrink:0}
.fx-logo-mark{width:52px;height:38px}
.fx-logo-mark svg{width:100%;height:100%;overflow:visible}
.fx-logo-text{display:flex;flex-direction:column;line-height:1}
.fx-logo-text b{font-size:20px;font-weight:700;color:var(--blue);letter-spacing:-.01em}
.fx-logo-text i{font-size:9.5px;font-style:normal;font-weight:600;letter-spacing:.16em;color:var(--blue);margin-top:2px}
.fx-logo-text em{font-size:5.4px;font-style:normal;letter-spacing:.2em;color:var(--orange);margin-top:3px}
.fx-main-nav{margin-left:auto;display:flex;justify-content:flex-end}
.fx-main-nav ul{display:flex;gap:clamp(16px,1.9vw,32px);align-items:center}
.fx-main-nav a{font-size:13.5px;font-weight:500;color:#3B4A5C;padding:8px 0;display:block;position:relative;white-space:nowrap}
.fx-main-nav a:after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;
  background:var(--blue);transition:right .3s var(--ease)}
.fx-main-nav a:hover{color:var(--blue)}
.fx-main-nav a:hover:after,.fx-main-nav .fx-active a:after{right:0}
.fx-main-nav .fx-active a{color:var(--blue);font-weight:600}
.fx-header-actions{display:flex;align-items:center;gap:16px;flex-shrink:0;margin-left:clamp(14px,2vw,36px)}
.fx-icon-search{font-size:14px}
.fx-header-actions .fx-btn{padding:9px 18px}
.fx-nav-toggle{display:none;flex-direction:column;gap:4px;padding:6px}
.fx-nav-toggle span{width:20px;height:2px;background:var(--navy);display:block}

/* =========================================================
   HERO
   ========================================================= */
.fx-hero{position:relative;background:#fff}
.fx-hero-stage{position:relative;height:min(720px,80vh);min-height:600px;overflow:hidden}
.fx-hero-backdrop{position:absolute;top:0;bottom:0;left:0;width:var(--split);background:#fff;z-index:0}
.fx-hero-slide{position:absolute;inset:0;z-index:1;pointer-events:none}
.fx-hero-slide.fx-is-outgoing{z-index:2}
.fx-hero-slide.fx-is-active{z-index:3;pointer-events:auto}

/* the artwork cross-dissolves slowly; the copy swaps fast so two headlines
   are never on screen at the same time */
.fx-hero-media{opacity:0;transition:opacity .9s var(--ease)}
.fx-hero-slide.fx-is-active .fx-hero-media{opacity:1}
.fx-hero-panel,.fx-hero-script{opacity:0;visibility:hidden;
  transition:opacity .2s linear,visibility 0s linear .2s}
.fx-hero-slide.fx-is-active .fx-hero-panel,
.fx-hero-slide.fx-is-active .fx-hero-script{opacity:1;visibility:visible;transition-delay:0s}

.fx-hero-media{position:absolute;top:0;right:0;bottom:0;left:var(--split);overflow:hidden;
  background:radial-gradient(120% 90% at 62% 45%,#1B6FD1 0%,#0B3C7C 45%,#061F45 100%)}
.fx-hero-media .fx-art{transform:scale(1.02);transform-origin:60% 50%}
.fx-hero-slide.fx-is-active .fx-hero-media .fx-art{animation:kenburns 11s linear both}
@keyframes kenburns{from{transform:scale(1.02)}to{transform:scale(1.1)}}

.fx-hero-pane{position:absolute;top:0;bottom:0;left:0;width:var(--split);
  display:flex;align-items:center;padding:24px 48px 64px var(--hero-pad)}
.fx-hero-panel{width:100%}
.fx-eyebrow{position:relative;font-size:12.5px;font-weight:600;letter-spacing:.16em;
  color:var(--navy);padding-top:14px;margin-bottom:14px}
.fx-eyebrow:before{content:"";position:absolute;top:0;left:0;width:46px;height:3px;background:var(--orange)}
.fx-hero h1{font-size:clamp(32px,3.1vw,50px);line-height:1.1;font-weight:700;letter-spacing:-.02em;margin-bottom:15px}
.fx-hero h1 span{color:var(--blue)}
/* was a fixed 430px — on a wide monitor the panel itself grows to 632px
   (see --split), leaving up to ~200px of dead colored space between the
   end of the text and the image seam. Tying this to the panel's own
   width means it always fills the available space, at any screen size,
   instead of stopping short on wide monitors specifically. */
.fx-hero-text{font-size:15px;color:var(--grey);max-width:calc(var(--panel-w) - 40px);margin-bottom:28px;line-height:1.7}
.fx-hero-btns{display:flex;gap:14px;flex-wrap:wrap}
.fx-hero-btns .fx-btn{font-size:14px;padding:15px 28px}

.fx-hero-slide.fx-is-active .fx-eyebrow{animation-delay:.18s}
.fx-hero-slide.fx-is-active .fx-eyebrow,
.fx-hero-slide.fx-is-active h1,
.fx-hero-slide.fx-is-active .fx-hero-text,
.fx-hero-slide.fx-is-active .fx-hero-btns,
.fx-hero-slide.fx-is-active .fx-hero-script{animation:riseIn .8s var(--ease) both}
.fx-hero-slide.fx-is-active h1{animation-delay:.26s}
.fx-hero-slide.fx-is-active .fx-hero-text{animation-delay:.35s}
.fx-hero-slide.fx-is-active .fx-hero-btns{animation-delay:.44s}
.fx-hero-slide.fx-is-active .fx-hero-script{animation-delay:.6s}
@keyframes riseIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

.fx-hero-script{position:absolute;right:var(--hero-pad);bottom:142px;z-index:4;font-family:'Caveat',cursive;
  font-size:36px;font-weight:600;color:#fff;line-height:1.14;text-align:right;
  text-shadow:0 2px 12px rgba(0,0,0,.35)}
.fx-hero-script:after{content:"";position:absolute;right:0;bottom:-11px;width:122px;height:3px;
  background:var(--orange);border-radius:2px}

.fx-hero-arrow{position:absolute;top:calc(50% - 30px);z-index:6;width:42px;height:42px;border-radius:50%;
  display:grid;place-items:center;font-size:13px;background:#fff;color:var(--navy);
  box-shadow:0 6px 18px -6px rgba(11,45,90,.5);transition:.25s var(--ease)}
.fx-hero-arrow.fx-prev{left:calc(var(--split) + 18px)}
.fx-hero-arrow.fx-next{right:16px}
.fx-hero-arrow:hover{background:var(--blue);color:#fff;transform:scale(1.1)}

.fx-hero-dots{position:absolute;right:var(--hero-pad);bottom:100px;z-index:6;
  display:flex;align-items:center;gap:10px}
.fx-hero-dots .fx-dot{font-size:12.5px;letter-spacing:.08em;color:rgba(255,255,255,.55);
  font-weight:600;transition:.25s;padding:2px}
.fx-hero-dots .fx-dot.fx-is-on{color:#fff}
.fx-hero-dots .fx-dot:hover{color:#fff}
.fx-hero-dots .fx-bar{width:16px;height:1px;background:rgba(255,255,255,.45)}

/* USP card — an elevated shelf straddling the hero edge */
.fx-usp-wrap{position:relative;z-index:6;margin-top:-56px;max-width:none;padding:0 var(--hero-pad)}
/* capped and centered — every other section on this page already uses
   --wrap as a max-width; this card was the one thing left full-bleed
   (deliberately, to match the hero image directly above it). That's fine
   on a laptop, but on a large monitor the columns stretch to match the
   screen while the icon+text inside each one stays a fixed size and
   left-aligned — most of each column ends up empty. 1700px allows some
   extra width versus the standard --wrap (this card is meant to feel a
   little more expansive, as a shelf overlapping the hero), without
   letting it stretch as wide as the screen itself. */
.fx-usp-card{display:grid;grid-template-columns:repeat(4,1fr);max-width:1700px;margin:0 auto;background:#fff;border-radius:10px;
  box-shadow:0 24px 54px -26px rgba(11,45,90,.42),0 2px 8px -4px rgba(11,45,90,.16);
  border:1px solid var(--line);overflow:hidden}
.fx-usp-card li{display:flex;align-items:center;gap:13px;padding:22px 24px;position:relative;min-width:0;
  transition:background .3s var(--ease)}
.fx-usp-card li + li:before{content:"";position:absolute;left:0;top:20px;bottom:20px;width:1px;background:var(--line)}
.fx-usp-card li:hover{background:#F8FAFD}
.fx-usp-ico{width:40px;height:40px;flex-shrink:0;border-radius:9px;display:grid;place-items:center;
  font-size:16px;color:var(--blue);background:linear-gradient(150deg,#EAF2FB,#DCE9F8);
  transition:.3s var(--ease)}
.fx-usp-card li:hover .fx-usp-ico{background:linear-gradient(150deg,var(--blue),#0B3F7E);color:#fff;
  box-shadow:0 8px 18px -8px rgba(15,86,168,.9)}
.fx-usp-card div{display:flex;flex-direction:column;line-height:1.35;min-width:0}
.fx-usp-card b{font-size:13px;font-weight:600}
.fx-usp-card span{font-size:11px;color:var(--grey)}

/* =========================================================
   APPROACH
   ========================================================= */
.fx-approach{padding:64px 0 52px}
.fx-approach-grid{display:grid;grid-template-columns:356px 1fr;gap:40px;align-items:start}
.fx-approach-copy h2{font-size:24px;margin-bottom:13px}
.fx-approach-copy .fx-rule{display:block;width:54px;height:3px;background:var(--orange);margin-bottom:17px}
.fx-approach-copy p{font-size:13px;color:var(--grey);margin-bottom:22px;max-width:332px}
.fx-approach-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:stretch}
.fx-app-card{position:relative;display:flex;flex-direction:column;background:#fff;
  border:1px solid var(--line);border-radius:10px;overflow:hidden;
  box-shadow:0 12px 30px -20px rgba(11,45,90,.45),0 1px 3px -1px rgba(11,45,90,.10);
  transition:transform .38s var(--ease),box-shadow .38s var(--ease),border-color .38s}
.fx-app-card .fx-app-body{flex:1}
.fx-app-card:hover{transform:translateY(-7px);border-color:#CFDFF2;
  box-shadow:0 30px 60px -26px rgba(11,45,90,.48),0 4px 12px -6px rgba(11,45,90,.18)}
.fx-app-card:hover .fx-art{transform:scale(1.07)}
.fx-app-card .fx-thumb{height:166px}
.fx-app-card .fx-badge{position:absolute;left:18px;top:147px;width:40px;height:40px;border-radius:50%;
  background:var(--blue);color:#fff;display:grid;place-items:center;font-size:13px;border:3px solid #fff;
  box-shadow:0 6px 14px -6px rgba(15,86,168,.8)}
.fx-app-body{padding:32px 20px 24px}
.fx-app-body h3{font-size:15px;font-weight:600;margin-bottom:9px}
.fx-app-body p{font-size:12.5px;color:var(--grey);line-height:1.65}

/* =========================================================
   CAROUSEL
   ========================================================= */
.fx-carousel{position:relative;padding:0 32px}
.fx-c-window{overflow:hidden;padding:4px 0 8px}
.fx-c-track{display:flex;transition:transform .55s var(--ease)}
.fx-c-item{flex:0 0 auto;padding:0 8px}
.fx-c-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:4;width:28px;height:28px;border-radius:50%;
  display:grid;place-items:center;font-size:11px;background:#fff;
  box-shadow:0 6px 16px -6px rgba(11,45,90,.45);transition:.22s}
.fx-c-arrow.fx-prev{left:0}
.fx-c-arrow.fx-next{right:0}
.fx-c-arrow:hover{background:var(--blue);color:#fff}
.fx-c-arrow[disabled]{opacity:.28;cursor:default}
.fx-c-arrow[disabled]:hover{background:#fff;color:inherit}

/* =========================================================
   APPLICATIONS
   ========================================================= */
.fx-applications{padding:46px 0 44px;
  background:radial-gradient(120% 90% at 50% 0%,#EEF4FB 0%,var(--soft) 60%)}
.fx-ind-card{background:#fff;border:1px solid var(--line);border-radius:6px;overflow:hidden;height:100%;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s}
.fx-ind-card:hover{transform:translateY(-5px);border-color:#CFDFF2;box-shadow:var(--shadow)}
.fx-ind-card:hover .fx-art{transform:scale(1.09)}
.fx-ind-card .fx-thumb{height:130px}
.fx-ind-body{padding:13px 14px 17px}
.fx-ind-body h3{font-size:11.5px;font-weight:700;letter-spacing:.04em;line-height:1.35;margin-bottom:6px}
.fx-ind-body p{font-size:10.5px;color:var(--grey);line-height:1.55}

/* =========================================================
   PRODUCTS
   ========================================================= */
.fx-products{padding:46px 0 44px}
.fx-prod-card{background:#fff;border:1px solid var(--line);border-radius:6px;padding:16px 14px;height:100%;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s}
.fx-prod-card:hover{transform:translateY(-5px);border-color:#CFDFF2;box-shadow:var(--shadow)}
.fx-prod-img{height:112px;background:linear-gradient(180deg,#FBFCFE,#F2F6FB);margin-bottom:12px;border-radius:4px;
  background:linear-gradient(180deg,#FBFCFE,#F2F6FB)}
.fx-prod-img .fx-art{transition:transform .4s var(--ease)}
.fx-prod-card:hover .fx-prod-img .fx-art{transform:scale(1.09)}
.fx-prod-card h3{font-size:12.5px;font-weight:600;margin-bottom:2px}
.fx-prod-card .fx-brand{font-size:10.5px;color:var(--grey);margin-bottom:11px}

/* =========================================================
   SERVICES
   ========================================================= */
.fx-services{padding:44px 0 50px}
.fx-svc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.fx-svc-card{position:relative;display:flex;align-items:center;gap:12px;background:#fff;
  border:1px solid var(--line);border-radius:6px;padding:16px 14px;overflow:hidden;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s}
.fx-svc-card:before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--orange);
  transform:scaleY(0);transform-origin:bottom;transition:transform .35s var(--ease)}
.fx-svc-card:hover:before{transform:scaleY(1)}
.fx-svc-card:hover{transform:translateY(-4px);border-color:#CFDFF2;box-shadow:var(--shadow)}
.fx-svc-icon{width:36px;height:36px;flex-shrink:0;border-radius:6px;display:grid;place-items:center;
  font-size:14px;color:var(--blue);background:#EAF2FB;transition:.3s var(--ease)}
.fx-svc-card:hover .fx-svc-icon{background:var(--blue);color:#fff}
.fx-svc-card h3{font-size:12px;font-weight:600;margin-bottom:3px}
.fx-svc-card p{font-size:10.5px;color:var(--grey);line-height:1.5}
.fx-svc-card .fx-go{margin-left:auto;font-size:11px;color:var(--blue);transition:transform .28s var(--ease)}
.fx-svc-card:hover .fx-go{transform:translateX(4px)}

/* =========================================================
   ACHIEVEMENTS
   ========================================================= */
.fx-achievements{position:relative;overflow:hidden;padding:96px 0 92px;color:#fff;
  background:linear-gradient(102deg,#0A3468 0%,#0F56A8 52%,#0A4384 100%)}
.fx-globe-art{position:absolute;right:2%;top:50%;width:min(460px,38vw);height:min(460px,38vw);
  transform:translateY(-50%);opacity:.55;pointer-events:none;z-index:1;
  transform-origin:50% 50%;animation:fxspin 80s linear infinite}
@keyframes fxspin{from{transform:translateY(-50%) rotate(0deg)}to{transform:translateY(-50%) rotate(360deg)}}
.fx-achievements:before{content:"";position:absolute;inset:0;
  background:radial-gradient(70% 120% at 88% 40%,rgba(120,190,255,.22),transparent 60%)}

@keyframes spin{to{transform:rotate(360deg)}}
.fx-achievements .fx-container{position:relative;z-index:2}
.fx-achievements h2{font-size:clamp(26px,2.4vw,36px);margin-bottom:44px}
.fx-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;max-width:min(760px,58%)}
.fx-stat i{font-size:22px;color:#9CC6F3;margin-bottom:14px;display:block}
.fx-stat b{font-size:clamp(30px,2.9vw,42px);font-weight:700;display:block;line-height:1.1;letter-spacing:-.025em}
.fx-stat > span{font-size:13px;color:#C6DCF5;display:block;margin-top:8px}
.fx-stat b .fx-count{font-size:inherit;color:inherit;display:inline;margin:0}
.fx-ach-script{position:absolute;right:var(--gutter);top:50%;transform:translateY(-50%);z-index:3;
  width:min(400px,34%);text-align:right;font-family:'Caveat',cursive;
  font-size:clamp(26px,2.4vw,38px);font-weight:600;line-height:1.25;
  text-shadow:0 2px 14px rgba(4,20,45,.45)}

/* =========================================================
   PARTNERS (single row)
   ========================================================= */
.fx-logos{padding:44px 0 46px}
.fx-marquee{position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.fx-m-window{overflow:hidden}
.fx-m-track{display:flex;align-items:center;gap:62px;padding:16px 0;will-change:transform}
.fx-brand-logo{flex:0 0 auto;font-size:15px;font-weight:800;white-space:nowrap;color:#8A97A6;
  filter:grayscale(1);opacity:.7;transition:.3s var(--ease)}
.fx-brand-logo:hover{filter:none;opacity:1;transform:scale(1.08)}
.fx-brand-logo.fx-nxp{color:#7DBA00;font-size:18px}
.fx-brand-logo.fx-st{color:#03234B;font-size:22px;font-style:italic}
.fx-brand-logo.fx-ti{color:#C00;font-size:10px}
.fx-brand-logo.fx-mchp{color:#E4002B}
.fx-brand-logo.fx-inf{color:#0A5A96;font-size:14px}
.fx-brand-logo.fx-ons{color:#333;font-size:16px}
.fx-brand-logo.fx-mur{color:#003DA5}
.fx-brand-logo.fx-vish{color:#0033A0}
.fx-brand-logo.fx-bosch{color:#9A9A9A;font-size:16px}
.fx-brand-logo.fx-samsung{color:#1428A0}
.fx-brand-logo.fx-honeywell{color:#E1000F}
.fx-brand-logo.fx-schneider{color:#3DCD58;font-size:14px}
.fx-brand-logo.fx-philips{color:#0B5ED7;font-size:17px}
.fx-brand-logo.fx-siemens{color:#099}
.fx-brand-logo.fx-abb{color:#FF000F;font-size:17px}
.fx-brand-logo.fx-delta{color:#003DA5}

/* =========================================================
   ABOUT + NEWS
   ========================================================= */
.fx-about-news{padding:14px 0 48px}
.fx-an-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:44px;align-items:start}
.fx-about-block{display:grid;grid-template-columns:1fr 274px;gap:26px;align-items:center}
.fx-about-copy h2{font-size:20px;margin-bottom:13px;line-height:1.35}
.fx-about-copy p{font-size:11.5px;color:var(--grey);margin-bottom:18px;max-width:294px}
.fx-about-video{position:relative;height:172px;background:linear-gradient(160deg,#BFD3E6,#5B7794);border-radius:6px;overflow:hidden;box-shadow:var(--shadow)}
.fx-about-video .fx-art{transition:transform .7s var(--ease)}
.fx-about-video:hover .fx-art{transform:scale(1.06)}
.fx-about-video .fx-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:36px;height:36px;
  border-radius:50%;background:#fff;color:var(--blue);display:grid;place-items:center;font-size:11px;
  box-shadow:0 6px 18px rgba(0,0,0,.3)}
.fx-about-video .fx-play:after{content:"";position:absolute;inset:-7px;border-radius:50%;
  border:2px solid rgba(255,255,255,.75);animation:pulse 2.6s ease-out infinite}
@keyframes pulse{0%{transform:scale(.85);opacity:.9}100%{transform:scale(1.55);opacity:0}}
.fx-about-video .fx-watch{position:absolute;right:11px;bottom:9px;font-size:11px;font-weight:600;color:#fff;
  text-shadow:0 1px 6px rgba(0,0,0,.65)}
.fx-news-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.fx-news-card{background:#fff;border:1px solid var(--line);border-radius:6px;overflow:hidden;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.fx-news-card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.fx-news-card:hover .fx-art{transform:scale(1.08)}
.fx-news-card .fx-thumb{height:170px}
.fx-news-body{padding:12px 13px 15px}
.fx-news-body .fx-date{font-size:9.5px;color:#93A2B2;display:block;margin-bottom:5px}
.fx-news-body h3{font-size:11.5px;font-weight:600;line-height:1.45;margin-bottom:10px}

/* =========================================================
   CTA
   ========================================================= */
.fx-cta{position:relative;overflow:hidden;color:#fff;
  background:linear-gradient(102deg,#102F63 0%,#1A4C9C 50%,#102F63 100%)}
.fx-cta:before,.fx-cta:after{content:"";position:absolute;top:-40%;width:360px;height:200%;
  background:repeating-linear-gradient(78deg,rgba(255,255,255,.085) 0 1px,transparent 1px 9px)}
.fx-cta:before{left:-40px}
.fx-cta:after{right:-40px}
.fx-cta-inner{position:relative;z-index:2;display:flex;align-items:center;gap:clamp(28px,3vw,64px);
  padding:80px var(--gutter);flex-wrap:nowrap;min-height:230px}
.fx-cta h2,.fx-cta p,.fx-cta .fx-btn{flex:0 0 auto}
.fx-cta p{max-width:48ch}
.fx-cta h2{font-size:clamp(26px,2.6vw,38px);line-height:1.25}
.fx-cta p{font-size:14px;color:#D3E3F7;line-height:1.7}
.fx-cta .fx-btn{margin-left:auto;padding:17px 34px;font-size:15px;white-space:nowrap}

/* =========================================================
   FOOTER
   ========================================================= */
.fx-site-footer{position:relative;padding-top:34px}
.fx-site-footer .fx-map{position:absolute;right:var(--gutter);top:36px;width:300px;height:150px;
  background-image:radial-gradient(circle,#D5DEE8 1.1px,transparent 1.2px);background-size:7px 7px;
  -webkit-mask-image:radial-gradient(ellipse 60% 55% at 50% 50%,#000 55%,transparent 78%);
          mask-image:radial-gradient(ellipse 60% 55% at 50% 50%,#000 55%,transparent 78%)}
.fx-footer-grid{position:relative;display:grid;grid-template-columns:1.1fr .8fr .95fr 1.15fr;gap:28px;padding-bottom:28px}
.fx-f-brand{display:flex;flex-direction:column;align-items:center;text-align:center}
.fx-f-brand .fx-logo{margin-bottom:20px;display:inline-flex}
.fx-f-col h4{font-size:12.5px;font-weight:600;margin-bottom:13px}
.fx-f-col ul li{margin-bottom:6px}
.fx-f-col a,.fx-f-col span{font-size:11.5px;color:var(--grey);line-height:1.55}
.fx-f-col a:hover{color:var(--blue)}
.fx-f-col.fx-contact li{display:flex;gap:9px;margin-bottom:11px}
.fx-f-col.fx-contact i{color:var(--blue);font-size:11px;margin-top:4px}
.fx-f-script{position:absolute;right:var(--gutter);bottom:6px;font-family:'Caveat',cursive;font-size:15px;
  font-weight:600;line-height:1.2;text-align:center}
.fx-footer-bottom{border-top:1px solid var(--line);padding:11px 0}
.fx-footer-bottom .fx-container{display:flex;justify-content:space-between;align-items:center}
.fx-footer-bottom p{font-size:10.5px;color:#8A97A6}
.fx-legal{display:flex;gap:10px}
.fx-legal a:hover{color:var(--blue)}

.fx-to-top{position:fixed;right:22px;bottom:22px;z-index:70;width:34px;height:34px;border-radius:50%;
  background:var(--blue);color:#fff;font-size:12px;display:grid;place-items:center;
  box-shadow:0 8px 20px -6px rgba(15,86,168,.7);opacity:0;visibility:hidden;transition:.3s var(--ease)}
.fx-to-top.fx-show{opacity:1;visibility:visible}
.fx-to-top:hover{background:var(--orange);transform:translateY(-3px)}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1180px){
  :root{--panel-w:400px}
  .fx-main-nav ul{gap:14px}
  .fx-main-nav a{font-size:11.5px}
}
@media (max-width:1024px){
  :root{--split:52%;--panel-w:auto}
  .fx-usp-card{grid-template-columns:1fr 1fr}
  .fx-nav-toggle{display:flex}
  .fx-main-nav{position:absolute;top:82px;left:0;right:0;background:#fff;border-bottom:1px solid var(--line);
    display:none;padding:10px 24px 16px}
  .fx-main-nav.fx-open{display:block}
  .fx-main-nav ul{flex-direction:column;gap:0}
  .fx-main-nav li{border-bottom:1px solid #F1F5F9}
  .fx-main-nav a{padding:11px 0;font-size:13px}
  .fx-hero-script{display:none}
  .fx-approach-grid,.fx-an-grid{grid-template-columns:1fr}
  .fx-svc-grid{grid-template-columns:1fr 1fr}
  .fx-footer-grid{grid-template-columns:1fr 1fr}
  .fx-site-footer .fx-map,.fx-f-script{display:none}
}
@media (max-width:760px){
  .fx-hero-stage{height:auto}
  .fx-hero-slide{position:relative;display:none}
  .fx-hero-slide.fx-is-active{display:block}
  .fx-hero-media{position:relative;left:0;height:210px}
  .fx-hero-pane{position:relative;width:100%;padding:28px 24px}
  /* Option C — fade + subtle scale, coordinated with the JS above. The
     transition only needs to live on .fx-is-active since that's the only
     state these classes ever get added to (the outgoing slide still has
     .fx-is-active — and therefore this transition — at the moment
     .fx-fade-out gets added to it, which is what makes the fade-out
     itself animate smoothly rather than snapping). */
  .fx-hero-slide.fx-is-active{transition:opacity .45s ease, transform .45s ease}
  .fx-hero-slide.fx-fade-out,.fx-hero-slide.fx-fade-in{opacity:0;transform:scale(.97)}
  /* CHANGED: bringing arrows back on mobile too, as a second, more
     obvious way to navigate alongside dots and swipe — resized and
     repositioned for the compact 210px image specifically, since the
     desktop values (top:50% of the WHOLE stage, left based on --split
     for the two-column layout) don't apply once the hero stacks. */
  .fx-hero-arrow{display:grid;width:34px;height:34px;font-size:11px;
    top:calc(210px / 2 - 17px)}
  .fx-hero-arrow.fx-prev{left:12px}
  .fx-hero-arrow.fx-next{right:12px}
  /* Dots un-hidden and repositioned: the desktop placement
     (bottom:100px relative to the WHOLE stage) assumed a tall hero — on
     mobile the stage's height is now media+pane stacked, so that same
     offset would land the dots somewhere in the middle of the text
     content below the image, not near the image itself. Positioned near
     the image's own bottom edge instead, and simplified from numbered
     text ("01"/"02") to plain dots — cleaner at this size.

     Real bug fixed here too: the dot itself is a 7px visual circle, but
     that was ALSO the entire clickable area — nowhere near the ~44px
     minimum real touch targets need (Apple/Google's own guidelines). A
     synthetic pixel-perfect tap succeeds in testing; a real thumb
     doesn't have that precision and would miss it consistently. The
     visual dot stays small; the actual <button> touch target is now
     much bigger via padding, using a background-clip trick so the
     bigger box doesn't look bigger. */
  .fx-hero-dots{position:absolute;left:0;right:0;bottom:auto;top:174px;
    justify-content:center;gap:8px;padding:0 20px}
  .fx-hero-dots .fx-bar{display:none}
  .fx-hero-dots .fx-dot{font-size:0;width:32px;height:32px;display:grid;place-items:center}
  .fx-hero-dots .fx-dot:before{content:"";width:7px;height:7px;border-radius:50%;
    background:rgba(255,255,255,.5);transition:.25s var(--ease)}
  .fx-hero-dots .fx-dot.fx-is-on:before{background:#fff;width:18px;border-radius:4px}
  /* CHANGED: hidden entirely on mobile now, per explicit decision — was
     2-column as a middle-ground first, but the call is now to remove it
     outright rather than shrink it. This is the "Quality Components /
     Technical Expertise / Reliable Supply Chain / Customer First" strip
     — decorative/trust-signal content, judged not worth the space on
     mobile. Untouched on desktop. */
  .fx-usp-wrap{display:none}
  .fx-approach-cards,.fx-svc-grid,.fx-about-block,.fx-news-grid{grid-template-columns:1fr}
  .fx-cta-inner{flex-direction:column;align-items:flex-start;gap:18px}
  .fx-cta .fx-btn{margin-left:0}
  .fx-stats{grid-template-columns:1fr 1fr;max-width:none}
  .fx-ach-script,.fx-globe-art{display:none}
  .fx-footer-grid{grid-template-columns:1fr}
  .fx-footer-bottom .fx-container{flex-direction:column;gap:6px}
  .fx-sec-head{flex-direction:column;align-items:flex-start;gap:10px}
}
@media (prefers-reduced-motion:reduce){
  *,*:before,*:after{animation:none!important;transition:none!important}
  .fx-reveal{opacity:1;transform:none}
}

/* equal card heights regardless of how many lines the title wraps to */
.fx-c-item{display:flex}
.fx-c-item > *{width:100%}
.fx-prod-card{display:flex;flex-direction:column}
.fx-prod-card .fx-explore{margin-top:auto;align-self:flex-start}
.fx-ind-card{display:flex;flex-direction:column}
.fx-ind-body{flex:1}
.fx-svc-card h3{line-height:1.3}

/* =========================================================
   APPROACH — technical treatment
   ========================================================= */
.fx-approach{position:relative;overflow:hidden}
/* faint dot field behind the copy, fading out diagonally */
.fx-approach:before{content:"";position:absolute;left:0;top:0;width:52%;height:100%;
  background-image:radial-gradient(circle,#D8E3F0 1px,transparent 1.2px);
  background-size:22px 22px;opacity:.7;pointer-events:none;
  -webkit-mask-image:linear-gradient(105deg,#000 0%,rgba(0,0,0,.35) 45%,transparent 78%);
          mask-image:linear-gradient(105deg,#000 0%,rgba(0,0,0,.35) 45%,transparent 78%)}
/* soft blue bloom so the column isn't flat white */
.fx-approach:after{content:"";position:absolute;left:-140px;top:-90px;width:420px;height:420px;
  border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(15,86,168,.09),transparent 68%)}
.fx-approach-grid{position:relative;z-index:2}

/* the copy column gets a vertical accent rail */
.fx-approach-copy{position:relative;padding-left:20px}
.fx-approach-copy:before{content:"";position:absolute;left:0;top:4px;bottom:64px;width:2px;
  background:linear-gradient(180deg,var(--orange) 0%,var(--blue) 35%,transparent 100%);
  border-radius:2px}
.fx-approach-copy .fx-tag{padding-left:0}
.fx-approach-copy .fx-tag:before{display:none}

/* cards */
.fx-app-card .fx-thumb:after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(4,18,38,.42) 0%,transparent 42%,rgba(4,18,38,.55) 100%)}
.fx-app-card .fx-badge{z-index:3}
.fx-app-card .fx-badge:after{content:"";position:absolute;inset:-5px;border-radius:50%;
  border:1.5px solid rgba(15,86,168,.55);opacity:0;transform:scale(.8);
  transition:opacity .4s var(--ease),transform .4s var(--ease)}
.fx-app-card:hover .fx-badge:after{opacity:1;transform:scale(1)}
.fx-app-body h3{position:relative;padding-bottom:11px}
.fx-app-body h3:after{content:"";position:absolute;left:0;bottom:0;width:22px;height:2px;
  background:var(--orange);border-radius:2px;transition:width .4s var(--ease)}
.fx-app-card:hover .fx-app-body h3:after{width:58px}
/* hairline that lights up along the top edge on hover */
.fx-app-card:before{content:"";position:absolute;left:0;right:0;top:0;height:2px;z-index:4;
  background:linear-gradient(90deg,var(--orange),var(--blue));
  transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.fx-app-card:hover:before{transform:scaleX(1)}

@media (max-width:1024px){
  .fx-approach:before{width:100%}
  .fx-approach-copy{padding-left:16px}
}

/* =========================================================
   VIDEO MODAL
   ========================================================= */
.fx-about-video .fx-watch{font:inherit;font-size:11px;font-weight:600;color:#fff;cursor:pointer;
  position:absolute;right:11px;bottom:9px;text-shadow:0 1px 6px rgba(0,0,0,.65);padding:4px 2px}
.fx-about-video .fx-watch:hover{color:#FFD9B8}

.fx-v-modal{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:24px}
.fx-v-modal[hidden]{display:none}
.fx-v-backdrop{position:absolute;inset:0;background:rgba(6,20,40,.82);backdrop-filter:blur(4px);
  opacity:0;transition:opacity .3s var(--ease)}
.fx-v-modal.fx-open .fx-v-backdrop{opacity:1}
.fx-v-box{position:relative;z-index:1;width:min(1000px,100%);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.8);
  transform:translateY(16px) scale(.97);opacity:0;
  transition:transform .35s var(--ease),opacity .35s var(--ease)}
.fx-v-modal.fx-open .fx-v-box{transform:none;opacity:1}
.fx-v-frame{position:relative;padding-top:56.25%;background:#000;border-radius:12px;overflow:hidden}
.fx-v-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.fx-v-close{position:absolute;right:-6px;top:-40px;width:34px;height:34px;border-radius:50%;
  background:#fff;color:var(--navy);display:grid;place-items:center;font-size:14px;z-index:2;
  transition:.25s var(--ease)}
.fx-v-close:hover{background:var(--orange);color:#fff;transform:rotate(90deg)}
@media (max-width:760px){.fx-v-close{right:0;top:-38px}}

/* =========================================================
   CMS BINDINGS
   markup that comes from the admin (logos, HTML columns,
   uploaded brand images) rather than from static markup
   ========================================================= */

/* header / footer logo is now an uploaded image */
.fx-logo-img{height:70px;width:auto;display:block}
.fx-site-footer .fx-logo-img{height:62px;margin-bottom:0}

/* language switcher */
.fx-lang{position:relative}
.fx-lang-btn{display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:500;color:#3B4A5C}
.fx-lang-btn img{border-radius:2px}
.fx-lang-list{position:absolute;right:0;top:130%;min-width:140px;background:#fff;
  border:1px solid var(--line);border-radius:6px;padding:6px;opacity:0;visibility:hidden;
  transform:translateY(-6px);transition:.25s var(--ease);
  box-shadow:0 18px 40px -18px rgba(11,45,90,.4);z-index:20}
.fx-lang:hover .fx-lang-list{opacity:1;visibility:visible;transform:none}
.fx-lang-list a{display:flex;align-items:center;gap:8px;padding:7px 9px;
  font-size:12.5px;border-radius:4px}
.fx-lang-list a:hover{background:var(--soft);color:var(--blue)}

/* dropdown submenu comes from the CMS as raw <ul> */
.fx-has-sub{position:relative}
.fx-has-sub ul{position:absolute;left:0;top:150%;min-width:210px;background:#fff;
  border:1px solid var(--line);border-radius:6px;padding:8px;opacity:0;visibility:hidden;
  transform:translateY(-6px);transition:.25s var(--ease);
  box-shadow:0 18px 40px -18px rgba(11,45,90,.4);z-index:20}
.fx-has-sub:hover ul{opacity:1;visibility:visible;transform:none}
.fx-has-sub ul a{display:block;padding:8px 10px;font-size:12.5px;border-radius:4px}
.fx-has-sub ul a:hover{background:var(--soft);color:var(--blue)}

/* partner logos are uploaded images, greyscale until hover */
.fx-brand-logo{flex:0 0 auto;display:grid;place-items:center;height:44px;
  filter:grayscale(1);opacity:.68;transition:.3s var(--ease)}
.fx-brand-logo img{max-height:44px;width:auto;object-fit:contain}
.fx-brand-logo:hover{filter:none;opacity:1;transform:scale(1.06)}

/* footer columns render CMS HTML (lists, paragraphs, icons) */
.fx-f-col ul{margin:0;padding:0}
.fx-f-col li{margin-bottom:7px}
.fx-f-col a,.fx-f-col p,.fx-f-col span{font-size:12.5px;color:var(--grey);line-height:1.6}
.fx-f-col a:hover{color:var(--blue)}
.fx-contact i{color:var(--blue);font-size:12px;margin-right:8px}
.fx-socials{display:flex;gap:8px;flex-wrap:wrap}
/* the CMS wraps the links in <ul><li>, so flex the list as well */
.fx-socials ul{display:flex;gap:8px;flex-wrap:wrap;margin:0;padding:0;list-style:none}
.fx-socials li{margin:0;padding:0;list-style:none}
.fx-socials a{width:28px;height:28px;border-radius:50%;background:var(--blue);color:#fff;
  display:grid;place-items:center;font-size:12px;transition:.28s var(--ease)}
.fx-socials a:hover{background:var(--orange);transform:translateY(-3px)}
.fx-copyright,.fx-copyright p{font-size:11px;color:#8A97A6;margin:0}
.fx-footer-bottom .fx-container{display:flex;justify-content:space-between;align-items:center;gap:14px}

/* rich-text blocks coming from TinyMCE */
.fx-hero-text p{font-size:15px;color:var(--grey);line-height:1.7;margin:0 0 6px}
.fx-approach-copy p{font-size:13.5px;color:var(--grey);margin-bottom:20px;max-width:340px}
.fx-about-copy p{font-size:12.5px;color:var(--grey);margin-bottom:18px;max-width:300px}
.fx-cta p{margin:0}

/* fun-fact icons are uploaded images, not font icons */
.fx-stat img{margin-bottom:12px;opacity:.85}

/* USP icon tile */
.fx-usp-ico{width:42px;height:42px;flex-shrink:0;border-radius:9px;display:grid;place-items:center;
  font-size:16px;color:var(--blue);background:linear-gradient(150deg,#EAF2FB,#DCE9F8);
  transition:.3s var(--ease)}
.fx-usp-card li:hover .fx-usp-ico{background:linear-gradient(150deg,var(--blue),var(--blue-dark));
  color:#fff;box-shadow:0 8px 18px -8px rgba(15,86,168,.9)}

/* "Watch Our Story" is a button now, so it can open the modal */
.fx-about-video .fx-watch{position:absolute;right:11px;bottom:9px;font:inherit;font-size:11px;
  font-weight:600;color:#fff;cursor:pointer;text-shadow:0 1px 6px rgba(0,0,0,.65);padding:4px 2px}
.fx-about-video .fx-watch:hover{color:#FFD9B8}

@media (max-width:1024px){
  .fx-lang{display:none}
  .fx-has-sub ul{position:static;opacity:1;visibility:visible;transform:none;
    box-shadow:none;border:0;padding:0 0 0 12px}
}

/* About block runs full width now that the News column is gone */
.fx-an-grid.fx-solo{grid-template-columns:1fr}
.fx-an-grid.fx-solo .fx-about-block{grid-template-columns:1fr 46%;gap:52px;align-items:start}

/* Sticky image: works correctly whether the paired text is short (the
   homepage's brief About blurb) or long (the About page's full mission
   statement). Short text -> behaves like a normal top-aligned image, no
   visible difference. Long text -> the image stays pinned in view as the
   page scrolls past the paragraph, so it's never sitting in a gap above
   or below empty space, at any scroll position. --top clears the sticky
   site header. */
/* Sticky wrapper — holds the image AND the stat row below it as one
   unit, so both travel together while the long text scrolls past. The
   image itself no longer needs position:sticky directly; the wrapper
   does. Applies on both pages that share .fx-about-block (homepage +
   About page) so neither regresses — on the homepage there's no stat
   row inside it, the wrapper just carries the image alone, same visual
   result as before. */
.fx-an-grid.fx-solo .fx-about-media{position:sticky;top:calc(var(--header-h,82px) + 24px)}

/* Stat row — sits BELOW the image as its own content, not overlapping
   it. Two (or more) plain cards, side by side. Reuses the fun-fact
   numbers already entered in Section - Achievements — see the view for
   the one open question on exactly which fields feed it. */
.fx-about-stats{display:flex;gap:14px;margin-top:16px}
.fx-about-stat-item{flex:1;display:flex;align-items:center;gap:13px;text-align:left;
  position:relative;overflow:hidden;
  background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px 16px;
  box-shadow:0 14px 32px -20px rgba(11,45,90,.35);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s}
.fx-about-stat-item:before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--orange)}
.fx-about-stat-item:hover{transform:translateY(-3px);border-color:#CFDFF2;
  box-shadow:0 20px 40px -18px rgba(11,45,90,.42)}
/* icon tile — same soft-blue-gradient language already used for the USP
   icons elsewhere. NOT colour-inverted on hover the way those are: this
   tile holds an admin-uploaded raster icon of unknown colour, so
   swapping the background to solid blue behind it could make the icon
   unreadable — kept static and let the card lift/shadow carry the hover
   feedback instead. */
.fx-about-stat-icon{width:46px;height:46px;flex-shrink:0;border-radius:10px;display:grid;
  place-items:center;background:linear-gradient(150deg,#EAF2FB,#DCE9F8);
  box-shadow:0 6px 14px -6px rgba(15,86,168,.35)}
.fx-about-stat-icon img{width:24px;height:24px;object-fit:contain;display:block}
.fx-about-stat-text b{display:block;font-size:21px;font-weight:700;color:var(--blue);line-height:1.15}
.fx-about-stat-text span{display:block;font-size:10.5px;color:var(--grey);font-weight:600;
  letter-spacing:.02em;margin-top:3px}

@media (max-width:1024px){
  .fx-an-grid.fx-solo .fx-about-media{position:static;top:auto}
}
@media (max-width:600px){
  .fx-about-stats{flex-direction:column}
}
.fx-an-grid.fx-solo .fx-about-copy h2{font-size:clamp(22px,2.2vw,32px)}
.fx-an-grid.fx-solo .fx-about-copy p{font-size:14px;max-width:52ch;line-height:1.75}
.fx-an-grid.fx-solo .fx-about-video{height:clamp(240px,26vw,380px)}
@media (max-width:1024px){.fx-an-grid.fx-solo .fx-about-block{grid-template-columns:1fr}}



/* =========================================================
   FOOTER SOCIAL ICONS
   The CMS stores plain text links ("Instagram", "LinkedIN").
   Hide the text and draw the brand glyph from the href, so the
   admin content does not have to change.
   ========================================================= */
.fx-socials a{font-size:0;line-height:0;overflow:hidden}
.fx-socials a i,.fx-socials a svg{font-size:12px;line-height:1}

/* generic fallback FIRST so the specific rules below win */
.fx-socials a:not(:has(i)):not(:has(svg))::before{
  content:"\f0c1";
  font-family:"Font Awesome 5 Free","Font Awesome 6 Free";
  font-weight:900;font-size:12px;line-height:1;display:block;
  /* Icon fonts commonly render slightly high within their own em-box —
     the parent .fx-socials a is already correctly centered via
     display:grid;place-items:center, so this nudges the GLYPH itself,
     not the box. */
  padding-top:5px}

/* brand glyphs, matched on the link target */
.fx-socials a[href*="instagram"]:not(:has(i))::before,
.fx-socials a[href*="linkedin"]:not(:has(i))::before,
.fx-socials a[href*="facebook"]:not(:has(i))::before,
.fx-socials a[href*="youtube"]:not(:has(i))::before,
.fx-socials a[href*="twitter"]:not(:has(i))::before,
.fx-socials a[href*="x.com"]:not(:has(i))::before,
.fx-socials a[href*="wa.me"]:not(:has(i))::before,
.fx-socials a[href*="whatsapp"]:not(:has(i))::before{
  font-family:"Font Awesome 5 Brands","Font Awesome 6 Brands";
  font-weight:400}

.fx-socials a[href*="instagram"]:not(:has(i))::before{content:"\f16d"}
.fx-socials a[href*="linkedin"]:not(:has(i))::before{content:"\f0e1"}
.fx-socials a[href*="facebook"]:not(:has(i))::before{content:"\f39e"}
.fx-socials a[href*="youtube"]:not(:has(i))::before{content:"\f167"}
.fx-socials a[href*="twitter"]:not(:has(i))::before,
.fx-socials a[href*="x.com"]:not(:has(i))::before{content:"\f099"}
.fx-socials a[href*="wa.me"]:not(:has(i))::before,
.fx-socials a[href*="whatsapp"]:not(:has(i))::before{content:"\f232"}

/* =========================================================
   INNER PAGES — banner, prose, team, contact
   ========================================================= */

/* ---------- page banner ---------- */
.fx-page-hero{position:relative;overflow:hidden;display:flex;align-items:flex-end;
  min-height:clamp(280px,34vw,420px);color:#fff;
  background:linear-gradient(105deg,#0A3468 0%,#0F56A8 55%,#0A4384 100%)}
.fx-page-hero-sm{min-height:clamp(220px,26vw,320px)}
.fx-page-hero > .fx-art{position:absolute;inset:0;object-fit:cover;opacity:.34}
.fx-page-hero:after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(6,26,54,.85) 0%,rgba(6,26,54,.45) 55%,rgba(6,26,54,.15) 100%)}
.fx-page-hero-inner{position:relative;z-index:2;padding-top:clamp(60px,7vw,96px);
  padding-bottom:clamp(38px,4.5vw,64px)}
.fx-page-hero h1{font-size:clamp(28px,3.4vw,50px);font-weight:700;letter-spacing:-.02em;
  line-height:1.1;margin:0 0 14px}
.fx-page-hero h1 span{color:#8CC4FF}
.fx-page-hero-text{font-size:15px;color:#CFE1F5;max-width:60ch;line-height:1.7}
.fx-page-hero-text p{margin:0}
.fx-page-hero .fx-btn{margin-top:22px}

.fx-crumbs{display:flex;align-items:center;gap:9px;font-size:12px;font-weight:500;
  color:#BBD3EF;margin-bottom:14px}
.fx-crumbs a:hover{color:#fff}
.fx-crumbs span{opacity:.5}
.fx-crumbs em{font-style:normal;color:#fff}

/* ---------- rich text from TinyMCE ---------- */
.fx-content{padding:clamp(48px,6vw,84px) 0}
.fx-prose{font-size:15px;line-height:1.85;color:var(--grey);max-width:var(--prose-w,min(900px,92%))}
/* opt in with class="fx-prose fx-prose-wide" or inline style="--prose-w:1000px"
   on pages where the narrow reading column leaves too much dead space */
.fx-prose-wide{--prose-w:min(1000px,100%)}
.fx-prose > *:first-child{margin-top:0}
.fx-prose p{margin:0 0 18px}
.fx-prose h2{font-size:clamp(21px,2.1vw,30px);color:var(--navy);margin:38px 0 14px;line-height:1.3}
.fx-prose h3{font-size:clamp(17px,1.6vw,22px);color:var(--navy);margin:30px 0 12px}
.fx-prose h4{font-size:16px;color:var(--navy);margin:24px 0 10px}
.fx-prose a{color:var(--blue);text-decoration:underline;text-underline-offset:3px}
.fx-prose a:hover{color:var(--orange)}
.fx-prose strong,.fx-prose b{color:var(--navy);font-weight:600}
.fx-prose ul,.fx-prose ol{margin:0 0 18px;padding-left:22px}
.fx-prose ul{list-style:disc}
.fx-prose ol{list-style:decimal}
.fx-prose li{margin-bottom:8px;padding-left:4px}
.fx-prose li::marker{color:var(--orange)}
.fx-prose img{max-width:100%;height:auto;border-radius:8px;margin:22px 0;
  box-shadow:0 18px 40px -22px rgba(11,45,90,.4)}
.fx-prose blockquote{margin:24px 0;padding:18px 24px;border-left:3px solid var(--orange);
  background:var(--soft);border-radius:0 8px 8px 0;color:var(--navy);font-size:15.5px}
.fx-prose blockquote p:last-child{margin:0}
.fx-prose table{width:100%;border-collapse:collapse;margin:22px 0;font-size:14px}
.fx-prose th,.fx-prose td{border:1px solid var(--line);padding:11px 14px;text-align:left}
.fx-prose th{background:var(--soft);color:var(--navy);font-weight:600}
.fx-prose hr{border:0;border-top:1px solid var(--line);margin:32px 0}
.fx-prose-sm{font-size:13px;line-height:1.7;max-width:none}
.fx-prose-sm p{margin:0 0 8px}

/* ---------- team ---------- */
.fx-team{padding:clamp(48px,6vw,80px) 0;background:
  radial-gradient(120% 90% at 50% 0%,#EEF4FB 0%,var(--soft) 60%)}
.fx-team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.fx-member{background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden;
  box-shadow:0 12px 30px -20px rgba(11,45,90,.45);
  transition:transform .38s var(--ease),box-shadow .38s var(--ease)}
.fx-member:hover{transform:translateY(-6px);box-shadow:0 30px 60px -26px rgba(11,45,90,.48)}
.fx-member .fx-thumb{height:260px;background:#dbe6f2}
.fx-member:hover .fx-art{transform:scale(1.06)}
.fx-member-body{padding:18px 18px 20px;text-align:center}
.fx-member-body h3{font-size:15px;font-weight:600;color:var(--navy);margin-bottom:3px}
.fx-member-body p{font-size:12.5px;color:var(--grey);margin-bottom:12px}
.fx-member-social{display:flex;justify-content:center;gap:8px}
.fx-member-social a{width:30px;height:30px;border-radius:50%;background:#EAF2FB;color:var(--blue);
  display:grid;place-items:center;font-size:12px;transition:.28s var(--ease)}
.fx-member-social a:hover{background:var(--blue);color:#fff;transform:translateY(-2px)}

/* ---------- contact info boxes ---------- */
.fx-contact-boxes{padding:clamp(44px,5vw,70px) 0 0}
.fx-cbox-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.fx-cbox{position:relative;background:#fff;border:1px solid var(--line);border-radius:10px;
  padding:30px 26px;overflow:hidden;
  box-shadow:0 12px 30px -22px rgba(11,45,90,.4);
  transition:transform .38s var(--ease),box-shadow .38s var(--ease),border-color .38s}
.fx-cbox:before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--orange);
  transform:scaleY(0);transform-origin:bottom;transition:transform .38s var(--ease)}
.fx-cbox:hover:before{transform:scaleY(1)}
.fx-cbox:hover{transform:translateY(-5px);border-color:#CFDFF2;box-shadow:var(--shadow)}
.fx-cbox-icon{width:46px;height:46px;border-radius:10px;display:grid;place-items:center;
  font-size:18px;color:var(--blue);background:linear-gradient(150deg,#EAF2FB,#DCE9F8);
  margin-bottom:16px;transition:.3s var(--ease)}
.fx-cbox:hover .fx-cbox-icon{background:linear-gradient(150deg,var(--blue),var(--blue-dark));color:#fff}
.fx-cbox h3{font-size:15px;font-weight:600;color:var(--navy);margin-bottom:8px}

/* ---------- contact form + map ---------- */
.fx-contact-main{padding:clamp(44px,5.5vw,80px) 0}
.fx-contact-grid{display:grid;grid-template-columns:1.35fr 1fr;gap:clamp(28px,4vw,56px);align-items:start}
.fx-form-wrap h2{font-size:clamp(21px,2.2vw,30px)}
.fx-form-wrap .fx-rule{display:block;width:54px;height:3px;background:var(--orange);margin:14px 0 26px}
.fx-form{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.fx-field{display:flex;flex-direction:column;gap:7px}
/* Flex columns stretch every child to fill the full width by default —
   that's what was pulling the Submit button to match the field width,
   not anything set on the button itself. Opting it out sizes it to its
   own text content instead, like every other .fx-btn on the site. */
.fx-field .fx-btn{align-self:flex-start}
.fx-field-full{grid-column:1/-1}
.fx-field label{font-size:12.5px;font-weight:600;color:var(--navy)}
.fx-field input,.fx-field textarea{
  font:inherit;font-size:14px;color:var(--navy);background:#fff;
  border:1px solid var(--line);border-radius:8px;padding:13px 15px;
  transition:border-color .25s,box-shadow .25s}
.fx-field textarea{resize:vertical;min-height:140px}
.fx-field input:focus,.fx-field textarea:focus{outline:none;border-color:var(--blue);
  box-shadow:0 0 0 3px rgba(15,86,168,.12)}
.fx-field input::placeholder,.fx-field textarea::placeholder{color:#9AA9BA}

.fx-alert{border-radius:8px;padding:13px 16px;font-size:13.5px;margin-bottom:20px}
.fx-alert-ok{background:#E8F6EE;color:#1B7A47;border:1px solid #BFE5CF}
.fx-alert-err{background:#FDECEC;color:#A82424;border:1px solid #F5C6C6}
.fx-alert ul{margin:0;padding-left:18px;list-style:disc}

.fx-contact-aside h3{font-size:17px;color:var(--navy);margin-bottom:14px}
.fx-mailto{display:inline-flex;align-items:center;gap:9px;font-size:14px;font-weight:600;
  color:var(--blue);margin-bottom:22px}
.fx-mailto:hover{color:var(--orange)}
.fx-contact-map{border-radius:10px;overflow:hidden;box-shadow:var(--shadow);line-height:0}
.fx-contact-map iframe{width:100%;height:clamp(280px,32vw,420px);border:0;display:block}

/* ---------- responsive ---------- */
@media (max-width:1024px){
  .fx-team-grid{grid-template-columns:1fr 1fr}
  .fx-cbox-grid{grid-template-columns:1fr}
  .fx-contact-grid{grid-template-columns:1fr}
}
@media (max-width:760px){
  .fx-team-grid{grid-template-columns:1fr}
  .fx-form{grid-template-columns:1fr}
  .fx-member .fx-thumb{height:300px}
  .fx-page-hero{min-height:230px}
}

/* =========================================================
   FILTER PILLS  (Applications listing, and reusable
   wherever a category/industry filter is needed)
   ========================================================= */
.fx-filters{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-bottom:36px}
.fx-pill{font-size:13px;font-weight:600;color:var(--navy);background:#fff;
  border:1px solid var(--line);border-radius:999px;padding:10px 20px;
  transition:.28s var(--ease);white-space:nowrap}
.fx-pill:hover{border-color:#CFDFF2;color:var(--blue)}
.fx-pill.fx-is-active{background:var(--blue);border-color:var(--blue);color:#fff;
  box-shadow:0 10px 22px -10px rgba(15,86,168,.55)}

/* =========================================================
   LISTING GRID  (Applications / Products)
   reuses the .fx-ind-card visual language from the homepage
   ========================================================= */
.fx-listing{padding:clamp(20px,3vw,36px) 0 clamp(56px,6vw,88px)}
.fx-listing-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.fx-list-card{background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden;
  box-shadow:0 12px 30px -22px rgba(11,45,90,.4);
  transition:transform .38s var(--ease),box-shadow .38s var(--ease)}
.fx-list-card:hover{transform:translateY(-6px);box-shadow:0 30px 60px -26px rgba(11,45,90,.45)}
.fx-list-card .fx-thumb{height:200px}
.fx-list-card:hover .fx-art{transform:scale(1.07)}
.fx-list-card .fx-thumb:after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 55%,rgba(4,18,38,.55) 100%)}
.fx-list-body{padding:20px 22px 24px}
.fx-list-body .fx-eyebrow-tag{display:inline-block;font-size:10.5px;font-weight:700;
  letter-spacing:.08em;color:var(--blue);background:#EAF2FB;border-radius:999px;
  padding:4px 11px;margin-bottom:11px}
.fx-list-body h3{font-size:17px;font-weight:600;color:var(--navy);margin-bottom:8px}
.fx-list-body p{font-size:13px;color:var(--grey);line-height:1.6}

@media (max-width:1180px){.fx-listing-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:1024px){.fx-listing-grid{grid-template-columns:1fr 1fr}}
@media (max-width:640px){
  .fx-listing-grid{grid-template-columns:1fr}
  /* Filter pills were wrapping into a tall multi-row wall on mobile —
     with a long category list (Manufacturer/Application landing pages
     can have 10-15+ options) this pushed real content far down the
     screen before anyone reached it. Switched to a single horizontally
     scrollable row instead — standard mobile pattern for a filter list
     too long to fit on screen, takes up one row's height regardless of
     how many options exist. Desktop is untouched (still wraps/centers,
     confirmed working fine there). */
  .fx-filters{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
    margin-left:calc(-1 * var(--hero-pad));margin-right:calc(-1 * var(--hero-pad));
    padding:0 var(--hero-pad) 6px;gap:8px;
    -webkit-mask-image:linear-gradient(90deg,#000 92%,transparent 100%);
    mask-image:linear-gradient(90deg,#000 92%,transparent 100%)}
  .fx-filters::-webkit-scrollbar{display:none}
  .fx-pill{flex-shrink:0;padding:9px 16px;font-size:12.5px}
}

/* =========================================================
   MANUFACTURER LISTING
   ========================================================= */
.fx-mfr-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.fx-mfr-card{background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden;
  display:flex;flex-direction:column;
  box-shadow:0 12px 30px -22px rgba(11,45,90,.4);
  transition:transform .38s var(--ease),box-shadow .38s var(--ease),border-color .38s}
.fx-mfr-card:hover{transform:translateY(-6px);border-color:#CFDFF2;box-shadow:0 30px 60px -26px rgba(11,45,90,.45)}
.fx-mfr-logo{height:112px;display:flex;align-items:center;justify-content:center;
  padding:22px 28px;border-bottom:1px solid var(--line);background:
  linear-gradient(180deg,#FBFCFE,#F5F8FC)}
.fx-mfr-logo img{max-width:100%;max-height:100%;object-fit:contain;
  filter:grayscale(.15);transition:.3s var(--ease)}
.fx-mfr-card:hover .fx-mfr-logo img{filter:none;transform:scale(1.04)}
.fx-mfr-body{padding:18px 20px 22px;flex:1;display:flex;flex-direction:column}
.fx-mfr-body h3{font-size:15px;font-weight:600;color:var(--navy);margin-bottom:8px}
.fx-mfr-body p{font-size:12.5px;color:var(--grey);line-height:1.65;flex:1;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.fx-mfr-body .fx-explore{margin-top:14px}

@media (max-width:1180px){.fx-mfr-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:760px){.fx-mfr-grid{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.fx-mfr-grid{grid-template-columns:1fr}}


/* =========================================================
   CSS-ONLY FADE-IN
   No JS dependency at all — runs on paint via @keyframes.
   Use on static content (legal pages, plain articles) instead
   of .fx-reveal, which needs jQuery + IntersectionObserver to
   ever add .fx-in. If that JS never runs for any reason, a
   .fx-reveal element stays invisible forever; .fx-fade-in
   cannot get stuck that way because the browser plays the
   animation itself, with no class to wait for.
   ========================================================= */
.fx-fade-in{animation:fxFadeIn .7s var(--ease) both}
@keyframes fxFadeIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.fx-fade-in{animation:none}}

/* =========================================================
   MANUFACTURER DETAIL PAGE
   ========================================================= */

/* banner: logo inset over the gradient hero, name beside it */
.fx-mfr-hero{display:flex;align-items:flex-end;gap:22px}
.fx-mfr-hero-logo{width:96px;height:96px;flex-shrink:0;border-radius:14px;background:#fff;
  display:grid;place-items:center;padding:14px;box-shadow:0 18px 40px -18px rgba(0,0,0,.45)}
.fx-mfr-hero-logo img{max-width:100%;max-height:100%;object-fit:contain}
.fx-mfr-hero-text h1{margin-bottom:6px}

/* about block: plain prose, no image (manufacturer bio only) */
.fx-mfr-about{padding:clamp(40px,5vw,64px) 0 clamp(24px,3vw,36px)}

/* product-category row — compact cards, image + title only, no description.
   Same photo language as the Applications cards (800x420, cover-cropped)
   but shorter, since these are just jump-points into a filter below. */
.fx-cat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.fx-cat-card{position:relative;border-radius:10px;overflow:hidden;height:120px;
  box-shadow:0 12px 26px -18px rgba(11,45,90,.4);
  transition:transform .32s var(--ease),box-shadow .32s var(--ease)}
.fx-cat-card:hover{transform:translateY(-4px);box-shadow:0 22px 44px -20px rgba(11,45,90,.45)}
.fx-cat-card .fx-art{transition:transform .4s var(--ease)}
.fx-cat-card:hover .fx-art{transform:scale(1.08)}
.fx-cat-card:after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(6,20,44,.15) 0%,rgba(6,20,44,.72) 100%)}
.fx-cat-card span{position:absolute;left:14px;right:14px;bottom:12px;z-index:2;
  color:#fff;font-size:14px;font-weight:600;line-height:1.3}

/* products — same small contained image as the homepage Featured Products
   carousel (fx-prod-card / fx-prod-img, 112px, object-fit:contain on a pale
   gradient tile) but laid out as a plain responsive grid here instead of a
   carousel, since this page shows the full catalogue rather than a
   curated slider */
.fx-prod-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:18px}

/* applications — 1-2 wide feature cards rather than a grid, since a
   manufacturer typically has very few */
.fx-app-feature{display:grid;grid-template-columns:280px 1fr;gap:0;
  background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;
  box-shadow:0 14px 34px -22px rgba(11,45,90,.4);margin-bottom:20px;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.fx-app-feature:hover{transform:translateY(-4px);box-shadow:0 26px 50px -24px rgba(11,45,90,.45)}
.fx-app-feature .fx-thumb{height:100%;min-height:190px}
.fx-app-feature-body{padding:26px 28px}
.fx-app-feature-body .fx-eyebrow-tag{margin-bottom:10px}
.fx-app-feature-body h3{font-size:19px;font-weight:600;color:var(--navy);margin-bottom:10px}
.fx-app-feature-body p{font-size:13.5px;color:var(--grey);line-height:1.7;margin-bottom:14px;max-width:60ch}

@media (max-width:1024px){
  .fx-cat-row{grid-template-columns:repeat(2,1fr)}
  .fx-prod-grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:760px){
  .fx-mfr-hero{flex-direction:column;align-items:flex-start}
  .fx-cat-row{grid-template-columns:1fr 1fr}
  .fx-prod-grid{grid-template-columns:1fr 1fr}
  .fx-app-feature{grid-template-columns:1fr}
  .fx-app-feature .fx-thumb{height:180px}
}
@media (max-width:480px){.fx-prod-grid{grid-template-columns:1fr}}

/* =========================================================
   SHARED — eyebrow tag usable outside its two original contexts,
   plus a small read-only chip for flat tag lists (Industries, etc.)
   ========================================================= */
.fx-eyebrow-tag{display:inline-block;font-size:10.5px;font-weight:700;
  letter-spacing:.08em;color:var(--blue);background:#EAF2FB;border-radius:999px;
  padding:4px 11px}

.fx-tag-list{display:flex;flex-wrap:wrap;gap:8px}
.fx-tag-chip{display:inline-flex;align-items:center;font-size:12px;font-weight:600;
  color:var(--blue);background:#EAF2FB;border-radius:999px;padding:7px 15px;
  transition:.25s var(--ease)}
.fx-tag-chip:hover{background:var(--blue);color:#fff}

/* section rhythm shared by the three new detail-style pages */
.fx-section{padding:clamp(40px,5vw,68px) 0}
.fx-section + .fx-section{border-top:1px solid var(--line)}

/* =========================================================
   PRODUCT CATEGORY DETAIL — 75/25 split layout
   Left: Applications (grid, 4-up) above Products (slider).
   Right: Manufacturers, vertical pager.
   Uses fr units (3fr/1fr), not percentages — this gives an exact 75/25
   split regardless of the gap between columns (a literal 75%/25% would
   overflow once a gap is added between them).
   ========================================================= */
.fx-cat-split{display:grid;grid-template-columns:3fr 1fr;gap:32px;align-items:start}
/* min-width:0 is required here — without it, a grid item will not shrink
   below the natural width of its content (the Products carousel's
   fixed-width track), and instead grows past its own grid column,
   shoving the Manufacturers column out of view entirely. Measured this
   happening before adding the fix: .fx-cat-split-main rendered at 1401px
   inside a 1306px parent, with .fx-cat-split-side pushed off to x:1500. */
.fx-cat-split-main,.fx-cat-split-side{min-width:0}
.fx-cat-split-main > .fx-section-inner + .fx-section-inner{margin-top:44px}

/* 4-across grid within a 70/30 or 75/25 split — used for Applications
   (Category page) and Product Categories (Manufacturer page). Separate
   class from
   the full-width Applications LISTING page's .fx-listing-grid (which is
   3 across at full page width) since this column is narrower and needs
   more, smaller columns to still read as 4-up. */
.fx-split-grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media (max-width:1180px){.fx-split-grid-4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.fx-split-grid-4{grid-template-columns:1fr}}

/* Applications card here is .fx-list-card with its description and
   eyebrow tag OMITTED in the view (not a new class) — title + image +
   link only, so it stays light enough to sit four across in a narrower
   column. Kept as a tiny tuck on the reused class rather than a variant. */
.fx-split-grid-4 .fx-list-card .fx-list-body{padding:14px 15px 16px}
.fx-split-grid-4 .fx-list-card .fx-thumb{height:120px}
.fx-split-grid-4 .fx-list-card h3{font-size:13.5px;margin-bottom:6px}
/* clamp to exactly 2 lines — without this, cards in the same row end up
   different heights depending on how long each application's text is,
   which looks uneven across a 4-up grid */
.fx-split-grid-4 .fx-list-card p{font-size:11.5px;line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden}

@media (max-width:1024px){.fx-cat-split{grid-template-columns:1fr}}

/* ---- Vertical pager, right column ----
   Generic: used for Manufacturers (Category page, compact photo+name
   rows via .fx-vitem) AND Applications (Manufacturer page, image tiles
   via .fx-vitem-media) — same paging mechanism, two item shapes. */
.fx-vslider{position:relative}
.fx-vslider-nav{display:flex;justify-content:flex-end;gap:8px;margin-bottom:14px}
.fx-vslider-nav .fx-c-arrow{position:static} /* override the horizontal slider's absolute positioning */
.fx-vwindow{overflow:hidden}
.fx-vtrack{display:flex;flex-direction:column;transition:transform .5s var(--ease)}
.fx-vitem{display:flex;align-items:center;gap:12px;padding:12px;margin-bottom:12px;
  background:#fff;border:1px solid var(--line);border-radius:10px;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s}
.fx-vitem:hover{transform:translateX(-3px);border-color:#CFDFF2;box-shadow:var(--shadow)}
.fx-vitem-logo{width:44px;height:44px;flex-shrink:0;border-radius:8px;display:grid;place-items:center;
  background:linear-gradient(180deg,#FBFCFE,#F2F6FB);padding:6px}
.fx-vitem-logo img{max-width:100%;max-height:100%;object-fit:contain}
.fx-vitem span{font-size:13px;font-weight:600;color:var(--navy);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}

/* second item shape: image tile with the title overlaid at the bottom —
   for large/landscape images (Applications) where a small square logo
   treatment doesn't fit the source material. Same visual language as
   .fx-cat-card (gradient scrim, hover zoom), sized for this narrower
   column instead of the 4-up grid it originated on. */
/* height chosen against the REAL column width at 75/25 (~317px at a
   typical 1268px content width) so the crop reads as roughly 1.85:1 —
   close to a normal photo landscape ratio. The original 130px height
   at the wider 30% column (380px) was closer to 2.9:1, cropped so wide
   and short it read as stretched rather than a proper photo. */
/* .fx-vitem-media-wrap is the actual repeating unit the vertical pager
   measures (image tile + description together) — margin-bottom moved
   here from .fx-vitem-media itself, since spacing now belongs to the
   whole unit, not just the image. */
.fx-vitem-media-wrap{margin-bottom:16px}
.fx-vitem-media{position:relative;display:block;border-radius:10px;overflow:hidden;
  height:170px;margin-bottom:8px;box-shadow:0 12px 26px -18px rgba(11,45,90,.4);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.fx-vitem-media:hover{transform:translateY(-3px);box-shadow:0 20px 40px -18px rgba(11,45,90,.45)}
.fx-vitem-media .fx-art{transition:transform .4s var(--ease)}
.fx-vitem-media:hover .fx-art{transform:scale(1.08)}
/* min-height, not just line-clamp — line-clamp only caps LONG text at 2
   lines, it does not reserve space for short text that never reaches 2
   lines. In a grid (like the Category page's cards), the grid itself
   stretches every item in a row to match, hiding this. This list is a
   vertical flex column, which does not do that — items were coming out
   different heights depending on each one's actual description length,
   which silently broke the pager's height math (it measures one item and
   assumes every item matches). min-height guarantees every item reserves
   the same 2-line space regardless of how much text it actually has. */
.fx-vitem-desc{font-size:11.5px;color:var(--grey);line-height:1.55;min-height:36px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.fx-vitem-media:after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(6,20,44,.1) 0%,rgba(6,20,44,.85) 100%)}
/* Two independent legibility guarantees, not one — a gradient scrim alone
   assumes the uploaded photo is reasonably dark. If someone uploads a
   bright or white-background application photo, the scrim alone may not
   be enough. text-shadow works even where the scrim doesn't: a tight,
   near-opaque shadow for a hard edge right against the letters (reads
   even on near-white), plus a softer wider one for ambient darkening —
   same technique already used on .fx-hero-script, strengthened here
   since this has to survive an unpredictable uploaded image, not a
   fixed solid-colour background. */
.fx-vitem-media span{position:absolute;left:14px;right:14px;bottom:12px;z-index:2;
  color:#fff;font-size:13.5px;font-weight:600;line-height:1.3;
  text-shadow:0 1px 3px rgba(0,0,0,.9),0 2px 10px rgba(0,0,0,.6)}

/* =========================================================
   PRODUCT DETAIL — smaller image, simple text meta box
   ========================================================= */
/* Scoped override for the product page only — About/Home pages keep
   their original clamp(240px,26vw,380px) hero-video sizing untouched. */
.fx-about-video-sm{height:260px}

/* Category/Manufacturer as plain labelled rows, no images, no cards —
   sits inside .fx-about-copy (the same column as the description), so
   it stays aligned with the product image row above it rather than
   becoming a separate full-width section. */
/* Constrained to 30-35% and left-aligned — a block element stretches to
   fill its parent by default, which is why this was spanning the full
   content column before. max-width shrinks it; margin-right:auto keeps
   it pinned left instead of centering once it's narrower than its
   container. min-width stops it getting uncomfortably cramped on a
   narrower column. */
.fx-meta-box{margin-top:22px;margin-right:auto;max-width:35%;min-width:260px;
  border:1px solid var(--line);border-radius:10px;
  padding:4px 18px;background:#fff}
.fx-meta-row{display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding:13px 0}
.fx-meta-row + .fx-meta-row{border-top:1px solid var(--line)}
.fx-meta-label{font-size:12px;font-weight:600;color:var(--grey);
  letter-spacing:.02em;flex-shrink:0}
.fx-meta-row a{display:inline-flex;align-items:center;gap:7px;
  font-size:14px;font-weight:600;color:var(--blue);text-align:right}
.fx-meta-row a:hover{color:var(--orange)}
.fx-meta-row a i{font-size:11px}

/* =========================================================
   DETAIL-PAGE SECTION TITLES — orange bar prefix
   Scoped to .fx-title-bar specifically (not the shared .fx-sec-head h2
   used everywhere, including the homepage) so this only affects the
   "Related X" headings on the Manufacturer/Category/Application/Product
   detail pages, not the established homepage section headings.
   ========================================================= */
.fx-title-bar{position:relative;padding-left:18px}
.fx-title-bar:before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:4px;
  background:var(--orange);border-radius:2px}

/* =========================================================
   REFERENCE DESIGN — round image cards, distinct from every
   other rectangular listing on the site
   ========================================================= */
.fx-rd-grid{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:48px 28px;justify-items:center;padding:12px}
/* soft dot texture behind the grid, same technique already used in the
   footer — a plain white section otherwise reads as flat/empty */
.fx-rd-grid:before{content:"";position:absolute;inset:-30px -20px;z-index:-1;
  background-image:radial-gradient(circle,#D8E3F0 1px,transparent 1.2px);
  background-size:20px 20px;opacity:.7;
  -webkit-mask:radial-gradient(ellipse 70% 70% at 50% 50%,#000 40%,transparent 85%);
  mask:radial-gradient(ellipse 70% 70% at 50% 50%,#000 40%,transparent 85%)}
.fx-rd-card{display:flex;flex-direction:column;align-items:center;text-align:center;width:100%;max-width:230px;
  animation:fxFadeIn .7s var(--ease) both;animation-delay:var(--d,0s)}

/* rotating dashed ring — subtle continuous motion even before hover,
   the "animated" touch, using conic-gradient rather than an actual
   border so it can rotate smoothly without any JS */
.fx-rd-ring{position:relative;width:100%;aspect-ratio:1/1}
.fx-rd-ring:before{content:"";position:absolute;inset:-9px;border-radius:50%;
  background:conic-gradient(from 0deg,var(--blue) 0deg,transparent 70deg,transparent 290deg,var(--orange) 360deg);
  opacity:.5;animation:fxSpinRing 9s linear infinite;
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 3px));
  mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 3px));
  transition:opacity .35s var(--ease)}
.fx-rd-card:hover .fx-rd-ring:before{opacity:1}
@keyframes fxSpinRing{to{transform:rotate(360deg)}}

.fx-rd-circle{position:relative;width:100%;height:100%;border-radius:50%;overflow:hidden;
  box-shadow:0 16px 34px -18px rgba(11,45,90,.4);
  transition:transform .4s cubic-bezier(.34,1.56,.64,1),box-shadow .35s var(--ease)}
.fx-rd-circle .fx-art{transition:transform .5s var(--ease)}
.fx-rd-card:hover .fx-rd-circle{transform:translateY(-8px) scale(1.04);
  box-shadow:0 28px 52px -20px rgba(15,86,168,.5)}
.fx-rd-card:hover .fx-art{transform:scale(1.12)}
.fx-rd-circle:after{content:"";position:absolute;inset:0;border-radius:50%;
  background:linear-gradient(180deg,transparent 55%,rgba(6,20,44,.6) 100%);
  opacity:0;transition:opacity .35s var(--ease)}
.fx-rd-card:hover .fx-rd-circle:after{opacity:1}

/* title with an animated orange underline — same "accent draws in on
   interaction" language already used elsewhere on the site, here as the
   one piece of "highlighted" detail this card is allowed (title only,
   no other text per the confirmed design) */
.fx-rd-card h3{position:relative;margin-top:20px;font-size:15px;font-weight:600;
  color:var(--navy);padding-bottom:10px;transition:color .3s var(--ease)}
.fx-rd-card h3:after{content:"";position:absolute;left:50%;bottom:0;width:0;height:2px;
  background:var(--orange);transition:width .35s var(--ease),left .35s var(--ease)}
.fx-rd-card:hover h3{color:var(--blue)}
.fx-rd-card:hover h3:after{width:36px;left:calc(50% - 18px)}

@media (max-width:1180px){.fx-rd-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:760px){.fx-rd-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:480px){.fx-rd-grid{grid-template-columns:1fr}}

/* ---------- detail page: freely-flowing TinyMCE body ----------
   Images the admin inserts and floats left/right inside the rich text
   editor need real float behavior + clearfix, since .fx-prose elsewhere
   never needed floated images before (every other page's images sit in
   their own fixed layout slot, not inline within free-flowing text). */
.fx-rd-body{overflow:hidden} /* clearfix for floated children */
.fx-rd-body img{border-radius:10px;box-shadow:0 16px 34px -18px rgba(11,45,90,.35)}
.fx-rd-body img[style*="float: left"],.fx-rd-body img[style*="float:left"]{margin:6px 28px 20px 0}
.fx-rd-body img[style*="float: right"],.fx-rd-body img[style*="float:right"]{margin:6px 0 20px 28px}

/* =========================================================
   SERVICE LANDING / DETAIL — full content block, image one
   side, alternating on the listing page
   ========================================================= */
/* Image sized down to "medium" (was 42%, now 34%) so the content
   column gets more room — more of the long_description body is visible
   before scrolling, which was the point of shrinking it. */
.fx-service-block{display:grid;grid-template-columns:34% 1fr;gap:44px;align-items:start;
  padding:clamp(36px,4vw,56px) 0}
.fx-service-block + .fx-service-block{border-top:1px solid var(--line)}
.fx-service-block-rev{grid-template-columns:1fr 34%}
.fx-service-block-rev .fx-service-media{order:2}
.fx-service-media{border-radius:14px;overflow:hidden;aspect-ratio:4/3;max-width:340px;
  box-shadow:0 20px 44px -22px rgba(11,45,90,.4)}
.fx-service-content h2{font-size:clamp(21px,2.1vw,28px);margin-bottom:12px}
.fx-service-lead{font-size:15px;color:var(--navy);font-weight:500;line-height:1.7;margin-bottom:14px}

@media (max-width:900px){
  .fx-service-block,.fx-service-block-rev{grid-template-columns:1fr;gap:24px}
  .fx-service-block-rev .fx-service-media{order:0}
  .fx-service-media{aspect-ratio:16/9}
}