/* ==========================================================================
   Primionics home page (2026).

   Lifted out of the inline <style> in index.html so it can be cache-busted and
   edited like the rest of the site's sheets. The layout and typography are
   unchanged; the accent scheme moved from teal/gold onto the Primionics
   palette - #c8420f and #e5551a on light grounds, #ffb18d on the navy ones.

   The .expo.analytica / .expo.electronica / .expo.semicon blocks keep each
   exhibition's own colours on purpose: they are what makes the cards
   recognisable at a glance.
   ========================================================================== */

:root{
  --navy:#0f2238;--navy2:#173754;--ink:#0f2238;--ink2:#173754;--muted:#617480;--line:#dde6ea;
  --paper:#f5f7f8;--paper2:#eef3f5;--white:#fff;--accent:#c8420f;--accent2:#e5551a;--accent-light:#ffb18d;
  --max:1280px;--shadow:0 24px 70px rgba(7,28,45,.10);--shadow2:0 12px 34px rgba(7,28,45,.075);
}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink);background:#fff;-webkit-font-smoothing:antialiased}a{text-decoration:none;color:inherit}.wrap{max-width:var(--max);margin:0 auto;padding:0 34px}
.announce{background:#0a1727;color:#eaf2f5;border-bottom:1px solid rgba(255,255,255,.08)}.announce .wrap{min-height:43px;display:flex;align-items:center;justify-content:space-between;gap:22px;font-size:12px}.announce-main{display:flex;align-items:center;gap:12px}.announce-tag{padding:5px 9px;border:1px solid rgba(255,177,141,.48);background:rgba(255,177,141,.11);border-radius:999px;text-transform:uppercase;letter-spacing:.13em;font-size:9px;font-weight:800}.announce a{font-weight:750;border-bottom:1px solid rgba(255,255,255,.34);padding-bottom:2px}
.header{height:84px;background:rgba(255,255,255,.98);border-bottom:1px solid #e5ecef;display:flex;align-items:center;position:relative;z-index:20}.header .wrap{width:100%;display:flex;align-items:center;justify-content:space-between}.logo{font-size:21px;letter-spacing:.14em;font-weight:880}.header .nav{display:flex;align-items:center;gap:29px;color:#3b5060;font-size:13px}.header .nav a:hover{color:#0f2238}.header .nav .contact{background:var(--ink);color:#fff;border-radius:5px;padding:11px 17px;font-weight:750}
.hero{position:relative;overflow:hidden;background:linear-gradient(118deg,#fafcfd 0%,#f3f6f8 54%,#eaf0f3 100%);border-bottom:1px solid #e3eaee}.hero:after{content:"";position:absolute;width:760px;height:760px;right:-250px;top:-330px;border:1px solid rgba(13,50,72,.07);border-radius:50%;box-shadow:0 0 0 92px rgba(13,50,72,.021),0 0 0 184px rgba(13,50,72,.013)}.hero .wrap{min-height:600px;display:flex;align-items:center;position:relative;z-index:1}.hero-copy{width:min(760px,64%);padding:70px 0}.eyebrow{text-transform:uppercase;letter-spacing:.17em;font-size:10px;font-weight:850;color:var(--accent);margin-bottom:18px}.hero h1{font-size:64px;line-height:1.01;letter-spacing:-.047em;margin:0 0 26px;max-width:790px}.hero h1 span{color:#c8420f}.hero p{font-size:18px;line-height:1.72;color:#536875;margin:0;max-width:720px}.actions{display:flex;gap:12px;margin-top:32px}.btn{display:inline-flex;align-items:center;justify-content:center;min-height:49px;padding:0 22px;border-radius:5px;font-size:13px;font-weight:780}.btn.primary{background:var(--ink);color:#fff}.btn.secondary{border:1px solid #aebcc5;background:rgba(255,255,255,.66)}
.capability-strip{background:#fff;border-bottom:1px solid #e3eaee}.capability-strip .wrap{display:grid;grid-template-columns:repeat(3,1fr)}.capability{padding:24px 30px;border-right:1px solid #e5ebee}.capability:first-child{padding-left:0}.capability:last-child{border-right:0}.capability strong{display:block;font-size:13px;margin-bottom:6px}.capability span{display:block;color:#687b87;font-size:12px;line-height:1.55}
.trust{background:#fff;border-bottom:1px solid var(--line)}.trust .wrap{min-height:94px;display:grid;grid-template-columns:210px 1fr 110px;gap:20px;align-items:center}.trust-label{font-size:10px;text-transform:uppercase;letter-spacing:.14em;color:#70808c;font-weight:820}.brandrow{display:grid;grid-template-columns:repeat(8,1fr);gap:5px}.brand{height:37px;display:flex;align-items:center;justify-content:center;border-right:1px solid #e5eaed;font-size:11px;font-weight:850;letter-spacing:.025em;color:#415565}.brand:last-child{border-right:0}.trust-link{font-size:11px;font-weight:760;text-align:right}
.section{padding:88px 0}.section.soft{background:#f5f7f8}.section.dark{background:#0f2238;color:#fff}.section-head{display:grid;grid-template-columns:1fr .62fr;gap:42px;align-items:end;margin-bottom:40px}.section-head h2{font-size:40px;line-height:1.11;letter-spacing:-.034em;margin:0}.section-head p{margin:0;color:#627581;line-height:1.67;font-size:14px}.dark .section-head p{color:#aabdc7}.dark .eyebrow{color:#ffb18d}
/* event identity cards */
.events{padding:86px 0 92px;background:#fff}.event-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.expo{min-height:386px;border-radius:12px;overflow:hidden;position:relative;display:flex;flex-direction:column;box-shadow:var(--shadow2);transition:.24s}.expo:hover{transform:translateY(-4px);box-shadow:var(--shadow)}.expo-head{height:142px;padding:25px 27px;position:relative;overflow:hidden}.expo-head:after{content:"";position:absolute;inset:0;pointer-events:none}.expo-name{position:relative;z-index:2;display:flex;align-items:center;gap:13px}.expo-name strong{font-size:26px;letter-spacing:-.035em}.expo-submark{font-size:9px;text-transform:uppercase;letter-spacing:.16em;font-weight:850;margin-top:8px;position:relative;z-index:2}.expo-body{flex:1;padding:25px 27px 27px;display:flex;flex-direction:column}.expo-date{font-weight:800;font-size:15px}.expo-place{font-size:12px;color:#687985;margin-top:4px}.expo-booth{display:grid;grid-template-columns:1fr 1.3fr;margin:20px 0 17px;border-top:1px solid rgba(25,49,63,.13);border-bottom:1px solid rgba(25,49,63,.13)}.expo-booth div{padding:13px 0}.expo-booth div+div{border-left:1px solid rgba(25,49,63,.13);padding-left:17px}.expo-booth small{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.15em;color:#83929b;margin-bottom:4px}.expo-booth b{font-size:18px}.expo-focus{font-size:11px;line-height:1.58;color:#5f727e}.expo-link{margin-top:auto;padding-top:19px;font-size:11px;font-weight:850}
.expo.analytica{background:#fffdf5;border:1px solid #eadfbd}.analytica .expo-head{background:#f4c62d;color:#2e2147}.analytica .expo-head:after{background:radial-gradient(circle at 88% 26%,rgba(255,255,255,.44) 0 9px,transparent 10px),radial-gradient(circle at 78% 66%,rgba(255,255,255,.25) 0 26px,transparent 27px)}.ali-mark{width:28px;height:34px;position:relative;flex:0 0 auto}.ali-mark:before,.ali-mark:after{content:"";position:absolute;left:0;border-left:14px solid transparent;border-right:14px solid transparent}.ali-mark:before{top:0;border-top:16px solid #7c2b83}.ali-mark:after{bottom:0;border-bottom:16px solid #db3a8e}.analytica .expo-submark{color:#6c4e2b}.analytica .expo-link{color:#6d337a}
.expo.electronica{background:#fffafa;border:1px solid #ecdcdc}.electronica .expo-head{background:#f7e9e8;color:#16191e}.electronica .expo-head:before{content:"";position:absolute;width:120px;height:120px;right:-12px;top:12px;background:linear-gradient(90deg,transparent 49%,rgba(207,45,51,.16) 50% 51%,transparent 52%),linear-gradient(transparent 49%,rgba(207,45,51,.16) 50% 51%,transparent 52%);background-size:22px 22px;transform:rotate(12deg)}.electronica .expo-name strong{font-size:28px;font-weight:850}.electronica .expo-name strong span{color:#c92633}.electronica .expo-submark{color:#a23a42}.electronica .expo-link{color:#aa1f2d}.ei-mark{width:28px;height:28px;border:7px solid #ca2733;position:relative}.ei-mark:after{content:"";position:absolute;width:8px;height:8px;background:#ca2733;right:-13px;bottom:-13px}
.expo.semicon{background:#071b31;color:#fff;border:1px solid #102f4d}.semicon .expo-head{height:142px;background:linear-gradient(135deg,#06254b,#145e9a)}.semicon .expo-head:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 80% 26%,rgba(67,206,226,.18),transparent 30%),linear-gradient(115deg,transparent 62%,rgba(255,255,255,.06) 62% 64%,transparent 64%)}.semicon .expo-name strong{font-size:26px;letter-spacing:.015em}.semicon .expo-submark{color:#83d6e8}.semicon .expo-body{background:#071b31}.semicon .expo-place,.semicon .expo-focus{color:#b3c7d2}.semicon .expo-booth{border-color:rgba(255,255,255,.15)}.semicon .expo-booth div+div{border-color:rgba(255,255,255,.15)}.semicon .expo-booth small{color:#8da8b7}.semicon .expo-link{color:#86d6e8}.si-mark{width:31px;height:31px;border-radius:50%;border:2px solid #78d4e5;box-shadow:inset 0 0 0 6px rgba(120,212,229,.11);position:relative}.si-mark:after{content:"";position:absolute;width:44px;height:3px;left:-7px;bottom:-11px;background:linear-gradient(90deg,#ff9933 0 33%,#fff 33% 66%,#138808 66%)}
.solutions-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.solution{min-height:244px;border:1px solid #dce4e8;background:#fff;border-radius:9px;padding:28px;display:flex;flex-direction:column;position:relative}.solution .number{font-size:9px;color:#7b8e99;letter-spacing:.13em;font-weight:850}.solution h3{font-size:19px;line-height:1.23;margin:29px 0 11px}.solution p{font-size:12px;line-height:1.6;color:#667783;margin:0}.solution .more{margin-top:auto;padding-top:22px;font-size:11px;font-weight:850}.solution.featured{background:#16324e;color:#fff;border-color:#16324e}.solution.featured p{color:#afc1cb}.solution.featured .number{color:#ffb18d}
/* credible engineering system architectures */
.systems{background:linear-gradient(145deg,#0a1727,#132c47);color:#fff;position:relative;overflow:hidden}.systems:before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:48px 48px}.systems .wrap{position:relative;z-index:1}.system-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:15px}.system-card{border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.035);border-radius:10px;padding:27px}.system-card small{display:block;color:#f5b894;font-size:9px;letter-spacing:.15em;text-transform:uppercase;font-weight:850}.system-card h3{font-size:20px;margin:10px 0 18px}.arch-flow{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}.arch-node{min-height:68px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);border-radius:6px;padding:11px 9px;display:flex;align-items:center;font-size:10px;line-height:1.35;color:#d7e3e8}.system-card p{font-size:11px;line-height:1.58;color:#aabdc7;margin:17px 0 0}.assurance-rail{margin-top:15px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);border-radius:10px;padding:24px 27px;display:grid;grid-template-columns:220px 1fr;gap:25px;align-items:center}.assurance-rail strong{font-size:17px}.assurance-flow{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}.assurance-flow span{border-left:2px solid #e5551a;padding:8px 10px;font-size:10px;color:#d4e2e8}
/* featured products */
.featured-products{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.product-card{border:1px solid #dce4e8;border-radius:10px;background:#fff;overflow:hidden;display:flex;flex-direction:column;transition:.2s}.product-card:hover{transform:translateY(-3px);box-shadow:var(--shadow2)}.product-art{height:188px;background:linear-gradient(145deg,#f3f6f7,#e7edef);display:grid;place-items:center;position:relative;overflow:hidden}.product-art img{max-width:78%;max-height:145px;object-fit:contain;filter:drop-shadow(0 12px 16px rgba(15,40,53,.12));position:relative;z-index:2}.product-art:after{content:"";position:absolute;inset:20px;border:1px solid rgba(35,63,78,.08);border-radius:7px}.product-body{padding:22px 23px 23px;display:flex;flex-direction:column;flex:1}.product-meta{display:flex;justify-content:space-between;gap:10px;align-items:center}.product-meta small{font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:#74858f;font-weight:850}.product-tag{font-size:8px;letter-spacing:.08em;text-transform:uppercase;padding:4px 7px;border-radius:999px;background:#eef3f5;color:#4c6574;font-weight:850}.product-body h3{font-size:19px;margin:13px 0 8px}.product-body p{font-size:11px;line-height:1.58;color:#637581;margin:0}.product-more{margin-top:auto;padding-top:18px;font-size:10px;font-weight:850}.abstract-product{width:138px;height:86px;border-radius:7px;background:#fdfefe;border:2px solid #8297a4;box-shadow:inset -29px 0 0 #dfe8ec,0 13px 18px rgba(16,40,53,.09);position:relative;z-index:2}.abstract-product:before{content:"";position:absolute;right:12px;top:14px;width:39px;height:27px;border-radius:3px;background:#1d4160}.abstract-product:after{content:"";position:absolute;left:13px;bottom:17px;width:50px;height:5px;background:#e5551a;box-shadow:0 -15px 0 #92a7b1}.abstract-product.storage{width:145px;height:76px;box-shadow:inset 0 -17px 0 #dfe8ec,0 13px 18px rgba(16,40,53,.09)}.abstract-product.storage:before{width:76px;height:13px;background:#193a58;right:18px;top:17px}.abstract-product.storage:after{width:10px;height:10px;border-radius:50%;left:17px;bottom:18px;background:#e5551a;box-shadow:20px 0 0 #91a7b1,40px 0 0 #91a7b1}.abstract-product.panel{width:140px;height:98px;border:6px solid #526a78;background:#193a58;box-shadow:none}.abstract-product.panel:before{inset:9px;width:auto;height:auto;right:9px;top:9px;background:linear-gradient(135deg,#1a5870,#132c47);border:1px solid #a35a2c}.abstract-product.panel:after{width:48px;height:6px;left:40px;bottom:-17px;background:#607783;box-shadow:0 6px 0 8px #82949e}
.launches{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.launch{border:1px solid rgba(255,255,255,.13);background:rgba(255,255,255,.035);border-radius:10px;padding:29px;display:flex;flex-direction:column}.launch-badge{align-self:flex-start;border:1px solid rgba(255,177,141,.35);background:rgba(255,177,141,.08);padding:6px 9px;border-radius:999px;color:#ffc4a6;font-size:8px;letter-spacing:.12em;text-transform:uppercase;font-weight:850}.launch h3{font-size:21px;margin:20px 0 9px}.launch p{font-size:12px;line-height:1.6;color:#adc0ca;margin:0}.launch-spec{font-size:10px;line-height:1.6;color:#d7e3e7;margin:21px 0;border-top:1px solid rgba(255,255,255,.10);padding-top:16px}.launch-link{font-size:10px;font-weight:850;color:#ffb18d;margin-top:auto}
/* premium industry applications mosaic */
.industry-showcase{display:grid;grid-template-columns:1.34fr 1fr 1fr;grid-template-rows:215px 215px 178px;gap:14px}
.industry-card{position:relative;overflow:hidden;border-radius:12px;border:1px solid #dbe4e8;background:#fff;padding:25px 26px;display:flex;flex-direction:column;transition:transform .24s ease,box-shadow .24s ease,border-color .24s ease}
.industry-card:hover{transform:translateY(-3px);box-shadow:var(--shadow2);border-color:#cbd8de}.industry-card:before,.industry-card:after{content:"";position:absolute;pointer-events:none}
.industry-card:before{width:150px;height:150px;border:1px solid rgba(18,55,76,.10);border-radius:50%;right:-56px;top:-63px;box-shadow:0 0 0 34px rgba(18,55,76,.022)}
.industry-card:after{left:0;top:0;width:4px;height:100%;background:#bdcbd2}
.industry-card .ind-kicker{font-size:8px;text-transform:uppercase;letter-spacing:.16em;font-weight:850;color:#7c8d97;position:relative;z-index:1}
.industry-card strong{font-size:19px;line-height:1.18;letter-spacing:-.018em;margin-top:auto;position:relative;z-index:1;max-width:92%}
.industry-card p{font-size:11px;line-height:1.55;color:#667985;margin:8px 0 0;position:relative;z-index:1;max-width:94%}
.industry-card .ind-link{font-size:10px;font-weight:850;margin-top:15px;position:relative;z-index:1;color:#1d4160}
.industry-card.anchor{grid-row:1 / span 2;background:linear-gradient(148deg,#0f2238,#173754);color:#fff;border-color:#173754;padding:34px 34px}.industry-card.anchor:before{width:310px;height:310px;right:-100px;top:-100px;border-color:rgba(137,207,218,.18);box-shadow:0 0 0 52px rgba(114,192,204,.035),0 0 0 104px rgba(114,192,204,.018)}.industry-card.anchor:after{width:5px;background:linear-gradient(#ffb18d,#c8420f)}
.industry-card.anchor .ind-kicker{color:#ffb18d}.industry-card.anchor strong{font-size:31px;line-height:1.08;max-width:390px}.industry-card.anchor p{font-size:12px;line-height:1.62;color:#b4c6cf;max-width:390px}.industry-card.anchor .ind-link{color:#ffc9ad}
.industry-card.auto:after{background:#365f8c}.industry-card.aero:after{background:#556b7f}.industry-card.manufacturing:after{background:#c8420f}.industry-card.rail:after{background:#a8350b}.industry-card.cleanroom:after{background:#e5551a}.industry-card.academia:after{background:#8b6f9d}
.industry-card.manufacturing{background:linear-gradient(145deg,#f3f8f7,#fff)}.industry-card.cleanroom{background:linear-gradient(145deg,#f2f7f9,#fff)}
.industry-card.wide{grid-column:2 / span 2;display:grid;grid-template-columns:1fr 1.16fr;column-gap:24px;align-items:end}.industry-card.wide strong{font-size:21px}.industry-card.wide p{margin-top:0;align-self:end;padding-bottom:1px}.industry-card.wide .ind-link{grid-column:1;margin-top:12px}
.resource-grid{display:grid;grid-template-columns:1.45fr 1fr 1fr;gap:15px}.resource{border:1px solid #dce4e8;border-radius:9px;padding:26px;background:#fff}.resource.main{background:#16324e;color:#fff;border-color:#16324e}.resource small{font-size:9px;text-transform:uppercase;letter-spacing:.13em;font-weight:850;color:#768792}.resource.main small{color:#ffb18d}.resource h3{font-size:19px;margin:13px 0 9px}.resource p{font-size:11px;color:#667984;line-height:1.55}.resource.main p{color:#afc1cb}.resource b{display:block;margin-top:20px;font-size:10px}.academix{margin-top:16px;border-radius:9px;padding:25px 28px;border:1px solid #dde5e8;background:#f7f9fa;display:flex;justify-content:space-between;gap:30px;align-items:center}.academix strong{font-size:17px}.academix p{font-size:11px;line-height:1.55;color:#687a86;margin:7px 0 0;max-width:800px}.academix a{font-size:11px;font-weight:850;white-space:nowrap}
.final{background:#132c47;color:#fff;padding:61px 0}.final .wrap{display:flex;justify-content:space-between;gap:35px;align-items:center}.final h2{font-size:34px;letter-spacing:-.032em;margin:0 0 8px}.final p{margin:0;color:#b1c2cb;font-size:13px}.final .btn{background:#fff;color:#0f2238}.footer{background:#0a1727;color:#a8bbc5;padding:25px 0}.footer .wrap{display:flex;justify-content:space-between;gap:24px;font-size:10px}.footer strong{letter-spacing:.12em;color:#fff}
@media(max-width:1020px){.header .nav{display:none}.hero-copy{width:76%}.hero h1{font-size:52px}.capability-strip .wrap,.trust .wrap,.event-grid,.solutions-grid,.featured-products,.launches,.resource-grid{grid-template-columns:1fr 1fr}.trust .wrap{padding-top:18px;padding-bottom:18px}.brandrow{grid-template-columns:repeat(4,1fr)}.trust-link{text-align:left}.system-grid{grid-template-columns:1fr}.assurance-rail{grid-template-columns:1fr}.industry-showcase{grid-template-columns:1fr 1fr;grid-template-rows:auto}.industry-card.anchor{grid-row:auto;min-height:300px}.industry-card.wide{grid-column:auto;display:flex}.industry-card.wide .ind-link{grid-column:auto}.section-head{grid-template-columns:1fr}.final .wrap{align-items:flex-start}}
@media(max-width:700px){.wrap{padding:0 20px}.announce .wrap{align-items:flex-start;flex-direction:column;padding-top:10px;padding-bottom:10px}.announce a{display:none}.hero .wrap{min-height:520px}.hero-copy{width:100%;padding:65px 0}.hero h1{font-size:42px}.capability-strip .wrap,.event-grid,.solutions-grid,.featured-products,.launches,.industry-showcase,.resource-grid{grid-template-columns:1fr}.industry-card.anchor{min-height:300px}.industry-card.wide{grid-column:auto}.capability{padding:20px 0;border-right:0;border-bottom:1px solid #e5ebee}.brandrow{grid-template-columns:repeat(2,1fr)}.trust .wrap{grid-template-columns:1fr}.section{padding:68px 0}.section-head h2{font-size:32px}.arch-flow{grid-template-columns:1fr 1fr}.assurance-flow{grid-template-columns:1fr 1fr}.academix,.final .wrap,.footer .wrap{flex-direction:column;align-items:flex-start}}

/* --------------------------------------------------------------------------
   Trust strip: real partner logos rather than set names.

   The marks arrive at wildly different aspect ratios and weights (a square
   CODESYS block next to a wide Estone lockup), so they are capped on both
   axes and held to a common optical height. Muting them at rest keeps the
   row reading as one band instead of eight competing brand colours; each
   returns to full colour on hover, which also signals that it is a link.
   -------------------------------------------------------------------------- */

.brandrow { align-items: center; }

a.brand {
  height: 44px;
  padding: 0 10px;
  transition: opacity .18s ease, filter .18s ease;
  filter: grayscale(1);
  opacity: .62;
}

a.brand img {
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

a.brand:hover,
a.brand:focus-visible { filter: none; opacity: 1; }

a.brand:focus-visible { outline: 2px solid var(--accent, #c8420f); outline-offset: 3px; border-radius: 4px; }

a.trust-link {
  color: #c8420f;
  text-align: right;
  white-space: nowrap;
}

a.trust-link:hover { text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 900px) {
  .trust .wrap { grid-template-columns: 1fr; gap: 14px; padding-block: 18px; }
  .brandrow { grid-template-columns: repeat(4, 1fr); }
  a.trust-link { text-align: left; }
}

@media (max-width: 560px) {
  .brandrow { grid-template-columns: repeat(2, 1fr); }
}

/* ==========================================================================
   Reconciliation with the site-wide sheets.

   This page arrived standalone. Now that shared.js runs on it, three runtime
   sheets apply that it was never written against - design-system.css,
   homepage-palette.css and professional-polish.css. Two of their rules break
   it:

     * homepage-palette forces `background:#fff !important` on a list that
       includes `.solution`, which turned the featured card white while its
       own `color:#fff` stayed - white on white;
     * a global rule paints `strong` and `h3` in ink navy, which is correct on
       the light sections and unreadable inside every dark one (the
       announcement bar and the SEMICON card both measured about 1.1:1).

   Rather than drop those sheets - the injected header and footer need them -
   the page restates its own surfaces and its dark-ground text at the same
   weight, scoped to this body class so nothing else is affected.
   ========================================================================== */

body.home-2026 .solution.featured {
  background: #16324e !important;
  border-color: #16324e !important;
  color: #fff !important;
}

body.home-2026 .industry-card.anchor {
  background: linear-gradient(148deg, #0f2238, #173754) !important;
  border-color: #173754 !important;
  color: #fff !important;
}

/* every dark ground on the page, and the text that has to sit on it */
/* .systems is a dark gradient band but is not classed .section.dark, so it
   needs stating separately or the whole architecture block reads on white. */
body.home-2026 .systems {
  background: linear-gradient(145deg, #0a1727, #132c47) !important;
  color: #fff !important;
}

body.home-2026 .system-card {
  background: rgba(255, 255, 255, .035) !important;
  border-color: rgba(255, 255, 255, .12) !important;
}

body.home-2026 .arch-node {
  background: rgba(255, 255, 255, .05) !important;
  border-color: rgba(255, 255, 255, .14) !important;
  color: #dbe6ec !important;
}

body.home-2026 :is(
  .announce, .section.dark, .systems, .expo.semicon, .resource.main, .final,
  .solution.featured, .system-card, .launch, .industry-card.anchor
) :is(strong, b, h2, h3, h4) {
  color: #fff !important;
}

body.home-2026 .systems :is(p, .section-head p) { color: #b9cad6 !important; }
body.home-2026 .systems .eyebrow { color: #ffb18d !important; }
body.home-2026 .system-card small { color: #f5b894 !important; }

body.home-2026 .announce { color: #eaf2f5 !important; }
body.home-2026 .announce a { color: #fff !important; }

/* accents on those dark grounds */
body.home-2026 :is(.section.dark, .resource.main, .industry-card.anchor, .solution.featured) :is(.eyebrow, .number, small, .ind-kicker) {
  color: #ffb18d !important;
}

body.home-2026 :is(.solution.featured, .industry-card.anchor, .resource.main) :is(p, .ind-link, .more) {
  color: rgba(255, 255, 255, .82) !important;
}

body.home-2026 .expo.semicon :is(.expo-place, .expo-focus) { color: #b3c7d2 !important; }
body.home-2026 .semicon .expo-submark { color: #83d6e8 !important; }
body.home-2026 .semicon .expo-link { color: #86d6e8 !important; }

/* the light expo cards keep their own dark text - only nudged for contrast */
body.home-2026 :is(.expo.analytica, .expo.electronica) .expo-place { color: #5c6c7a !important; }
body.home-2026 .expo-booth small { color: #6a7d8b !important; }
body.home-2026 .semicon .expo-booth small { color: #a9c2d1 !important; }

/* small text that measured just under AA on white */
body.home-2026 .capability span { color: #5a6b7f !important; }
body.home-2026 .trust-label { color: #5a6b7f !important; }
body.home-2026 a.trust-link { color: #c8420f !important; }
body.home-2026 .solution:not(.featured) .number { color: #5a6b7f !important; }

/* body copy on the dark bands: the global sheets paint <p> in ink navy, which
   is right on the light sections and about 1.5:1 on these. */
body.home-2026 :is(.section.dark, .systems, .final, .launch, .resource.main) p {
  color: #c3d2dc !important;
}

body.home-2026 .final p { color: rgba(255, 255, 255, .82) !important; }

/* light industry cards: the kicker was #7c8d97 on white, 3.43:1 */
body.home-2026 .industry-card:not(.anchor) .ind-kicker { color: #5a6b7f !important; }

/* booth labels on the pale analytica and electronica card grounds */
body.home-2026 .expo-booth small { color: #5d6e7c !important; }

/* ==========================================================================
   Second pass.
   ========================================================================== */

/* ------------------------------------------------------- exhibitions ----- */

/* Each show's own logo now sits on a plate in its brand colour rather than
   being redrawn in CSS. analytica and electronica publish full-colour marks,
   so those plates are light; the SEMICON mark is a currentColor wordmark, so
   it takes the white of its dark plate. */
html body .expo-head {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
  height: auto;
  min-height: 142px;
  padding: 26px 27px;
}

html body .expo-logo {
  display: block;
  width: auto;
  height: auto;
  max-width: 210px;
  max-height: 46px;
  object-fit: contain;
  object-position: left center;
}

html body .expo-head .expo-submark { margin-top: 0; }

/* analytica: brand yellow as a top rule over a warm white plate */
html body .expo.analytica .expo-head {
  background: #fffdf6;
  border-top: 4px solid #f4c62d;
  border-bottom: 1px solid #eadfbd;
}
html body .expo.analytica .expo-submark { color: #6c4e2b; }

/* electronica: brand red as the rule, mark on white */
html body .expo.electronica .expo-head {
  background: #fffbfb;
  border-top: 4px solid #c92633;
  border-bottom: 1px solid #ecdcdc;
}
html body .expo.electronica .expo-submark { color: #9a2f37; }

/* SEMICON: their own deep blue, wordmark inherits white */
html body .expo.semicon .expo-head {
  background: linear-gradient(135deg, #06254b, #145e9a);
  border-top: 4px solid #43cee2;
  color: #fff;
}
html body .expo.semicon .expo-logo { color: #fff; }
html body .expo.semicon .expo-submark { color: #9fe0ee !important; }

/* the "meet us" action is a button, not a text link */
html body .expo-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: auto;
  padding: 12px 18px;
  border: 0;
  border-radius: 7px;
  background: #c8420f;
  color: #fff !important;
  font-family: var(--f-head, 'Plus Jakarta Sans', sans-serif);
  font-size: 12.5px;
  font-weight: 800;
  line-height: 1;
  text-align: center;
  transition: background .18s ease, transform .18s ease;
}

html body .expo-btn::after { content: "\2192"; font-size: 1.05em; }
html body .expo-btn:hover { background: #a8350b; transform: translateY(-1px); }
html body .expo-btn:focus-visible { outline: 3px solid rgba(200, 66, 15, .34); outline-offset: 3px; }

/* on the dark SEMICON card the orange still clears AA, but the cyan edge
   reads better against it */
html body .expo.semicon .expo-btn { background: #c8420f; }
html body .expo.semicon .expo-btn:hover { background: #a8350b; }

html body .expo-body { padding-bottom: 24px; }

/* ---------------------------------------------------- product cards ----- */

/* the whole card is the link now */
html body a.product-card {
  display: flex;
  flex-direction: column;
  color: inherit;
  text-decoration: none;
}

html body a.product-card .product-more {
  display: block;
  width: max-content;
  margin-top: auto;
  margin-left: auto;          /* bottom-right */
  padding-top: 14px;
}

html body a.product-card .product-art img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ------------------------------------------------ card actions bottom --- */

/* Every card action on this page sits in the bottom-right corner. */
html body :is(.solution .more, .launch .launch-link, .industry-card .ind-link, .resource b) {
  display: block;
  width: max-content;
  margin-top: auto;
  margin-left: auto;
}

html body .industry-card .ind-link { position: relative; z-index: 2; }

/* --------------------------------------------------- industry accent ---- */

/* professional-polish.css appends content:"Explore →" to .industry-card::after,
   which this page already uses as its accent bar. The two rules combined
   produced a 66px full-height colour block sitting on top of the card's text,
   and a second explore label beside the card's own .ind-link. The bar is
   restored to a hairline and the injected label suppressed - the card states
   its own action. */
html body .industry-card::after {
  content: "" !important;
  left: 0 !important;
  top: 0 !important;
  right: auto !important;
  bottom: auto !important;
  width: 3px !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
  border-radius: 0 !important;
}

html body .industry-card.anchor::after { width: 4px !important; }

/* ==========================================================================
   Type scale.

   The page set its section leads at 18px but card copy at 11-12px, meta
   labels at 8-9px and card actions at 10-11px - a cliff from h3 at 19px
   straight down to 8px, with 500 characters of architecture-node copy at
   10px and another 500 at 8px. Everything below is raised onto one scale:

     card title      19-21px   (unchanged)
     card copy       13.5px    (was 11-12)
     card action     12.5px    (was 10-11)
     meta / eyebrow  11px      (was 8-10)

   The exhibition cards are deliberately excluded - they are left exactly as
   they are.
   ========================================================================== */

/* ---- card copy ---- */
html body :is(.solution, .product-card, .industry-card, .launch, .system-card, .resource, .academix) p {
  font-size: 13.5px;
  line-height: 1.66;
}

html body .capability span { font-size: 13.5px; line-height: 1.62; }
html body .capability strong { font-size: 15px; }

html body .arch-node { font-size: 12px; line-height: 1.45; }
html body .launch-spec { font-size: 12px; line-height: 1.6; }

/* ---- meta, eyebrows and tags ---- */
html body :is(
  .eyebrow, .trust-label, .solution .number, .ind-kicker,
  .product-card small, .product-tag, .launch-badge, .system-card small,
  .resource small, .announce-tag
) {
  font-size: 11px;
  line-height: 1.4;
  letter-spacing: .13em;
}

html body :is(.product-card small, .system-card small, .resource small) {
  letter-spacing: .11em;
}

/* ---- card actions ---- */
html body :is(.solution .more, .product-more, .ind-link, .launch-link, .trust-link, .resource b) {
  font-size: 12.5px;
  line-height: 1.3;
}

/* ---- headings keep their weight against the larger body ---- */
html body :is(.solution, .product-card, .resource) h3 { font-size: 19.5px; line-height: 1.3; }
html body .industry-card:not(.anchor) strong { font-size: 20px; line-height: 1.24; }

/* the announcement bar sat at 12px against a 16px body */
html body .announce .wrap { font-size: 13px; }

/* ==========================================================================
   Alignment.
   ========================================================================== */

/* The capability strip singled out the first item with padding-left:0 and the
   last with no right border - both keyed to document order. Below 1000px the
   grid drops to two columns, so the third item becomes first in its row while
   keeping the 30px padding, and sat visibly indented from the two above it.
   Uniform padding with a rule above each item aligns at any column count. */
html body .capability-strip .wrap {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 0 36px;
}

html body .capability {
  padding: 22px 0 24px;
  border-right: 0;
  border-top: 1px solid #e5ebee;
}

html body .capability:first-child { padding-left: 0; }

/* the announcement pill was breaking across two lines */
html body .announce-tag { flex: none; white-space: nowrap; }
html body .announce-main { flex-wrap: wrap; row-gap: 4px; }
html body .announce .wrap { padding-block: 9px; gap: 18px; }

/* the trust strip's rail matched the sections either side */
html body .trust .wrap { align-items: center; }

/* section heads keep their two-column relationship until there is no room */
@media (max-width: 900px) {
  html body .section-head { grid-template-columns: minmax(0, 1fr); gap: 14px; }
}

/* --------------------------------------------------------------------------
   Wide industry cards: explicit placement instead of auto-flow.

   .industry-card.wide is a two-column grid, but nothing placed its children,
   so auto-flow filled row 1 with the eyebrow and the TITLE side by side, then
   dropped the description into row 2 column 1. The card read
   eyebrow -> description -> (look right) title, and align-items:end pushed the
   title to the bottom of its row so it floated away from everything else.

   The eyebrow and title now stack in the first column, the description holds
   the second, and the action sits on its own row at the trailing edge - the
   same bottom-right position every other card on the site uses.
   -------------------------------------------------------------------------- */

html body .industry-card.wide {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr) !important;
  grid-template-rows: auto 1fr auto;
  column-gap: 34px !important;
  row-gap: 6px;
  align-items: start !important;
  align-content: start;
}

html body .industry-card.wide .ind-kicker { grid-column: 1; grid-row: 1; }

html body .industry-card.wide strong {
  grid-column: 1;
  grid-row: 2;
  align-self: start;
  margin-top: 4px;
}

html body .industry-card.wide p {
  grid-column: 2 !important;
  grid-row: 1 / span 2 !important;
  align-self: start !important;
  margin: 0 !important;
  padding-bottom: 0 !important;
  max-width: 46ch;
}

html body .industry-card.wide .ind-link {
  grid-column: 1 / -1 !important;
  grid-row: 3;
  margin-top: 18px !important;
  margin-left: auto !important;
}

/* below the two-column breakpoint the card is a simple stack again */
@media (max-width: 860px) {
  html body .industry-card.wide {
    display: flex !important;
    flex-direction: column;
  }
  html body .industry-card.wide p { max-width: none; margin-top: 8px !important; }
  html body .industry-card.wide .ind-link { margin-top: auto !important; }
}

/* --------------------------------------------------------------------------
   Trust strip: fit the band to its content.

   Measured at 1440px it was a 44px row of logos inside a 255px section - the
   band had picked up the standard 80px section rhythm and a 94px min-height,
   so roughly 210px of the section was empty.

   The logos were also optically uneven: heights ran 12px to 26px because the
   eight-across grid left only ~76px per cell, so width was the binding
   constraint and each mark rendered at whatever height its aspect ratio gave.
   Putting the label and the link on their own line frees the full rail for the
   row, which lets HEIGHT bind instead - every mark now sits on one optical
   baseline, which is what makes a logo strip read as deliberate.
   -------------------------------------------------------------------------- */

html body .trust .wrap {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "label link"
    "row   row";
  align-items: center;
  gap: 16px 24px;
  min-height: 0;
}

html body .trust-label { grid-area: label; margin: 0; }
html body a.trust-link { grid-area: link; align-self: center; }

html body .brandrow {
  grid-area: row;
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 4px;
  align-items: center;
}

html body a.brand {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 6px;
}

/* Per-mark heights, not one height for all.

   These logos run from 1.05:1 (CODESYS, effectively square) to 6.48:1 (TOPAS,
   a long wordmark). Setting one height makes the square mark look tiny beside
   the wordmark - CODESYS was rendering at a fraction of TOPAS's visual weight.
   Each height below is normalised so the marks occupy comparable AREA, which
   is what the eye actually compares, blended 60/40 with a common height so
   the row still reads as a row. Measured ratios are in the comments. */
html body a.brand img {
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

html body a.brand img[src*="topas"]    { height: 21px !important; }  /* 6.48:1 */
html body a.brand img[src*="Kanomax"]  { height: 24px !important; }  /* 4.58:1 */
html body a.brand img[src*="Dolphin"]  { height: 26px !important; }  /* 3.69:1 */
html body a.brand img[src*="Estone"]   { height: 26px !important; }  /* 3.55:1 */
html body a.brand img[src*="Siglent"]  { height: 29px !important; }  /* 2.96:1 */
html body a.brand img[src*="pico"]     { height: 33px !important; }  /* 2.00:1 */
html body a.brand img[src*="Apacer"]   { height: 34px !important; }  /* 1.90:1 */
html body a.brand img[src*="Codesys"]  { height: 38px !important; }  /* 1.05:1 - a square
   lockup cannot reach the same area as a 6.5:1 wordmark in a single-line
   strip, so it takes the tallest height the row can carry and still reads a
   little lighter. Both CODESYS assets on file are square; there is no wide
   wordmark to use instead. */

@media (max-width: 1024px) {
  html body .brandrow { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 4px; }
}

@media (max-width: 620px) {
  html body .trust .wrap {
    grid-template-columns: 1fr;
    grid-template-areas: "label" "row" "link";
    gap: 14px;
  }
  html body a.trust-link { justify-self: start; }
  html body .brandrow { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* On a phone the cells are ~110px wide, so a 4:1 mark at 28px would be
   width-bound again and shrink out of line. Dropping the mark height keeps
   three across AND keeps every logo on one baseline. */
/* the phone cells are ~110px wide, so the whole set scales down together
   rather than letting width bind on the long wordmarks */
@media (max-width: 620px) {
  html body a.brand { height: 32px; }
  html body a.brand img[src*="topas"]   { height: 15px !important; }
  html body a.brand img[src*="Kanomax"] { height: 17px !important; }
  html body a.brand img[src*="Dolphin"] { height: 19px !important; }
  html body a.brand img[src*="Estone"]  { height: 19px !important; }
  html body a.brand img[src*="Siglent"] { height: 21px !important; }
  html body a.brand img[src*="pico"]    { height: 24px !important; }
  html body a.brand img[src*="Apacer"]  { height: 25px !important; }
  html body a.brand img[src*="Codesys"] { height: 27px !important; }
}

@media (max-width: 380px) {
  html body .brandrow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --------------------------------------------------------------------------
   Featured product card: the two labels were competing for one line.

   .product-meta laid the manufacturer ("Topas . Aerosol generation") and the
   portfolio wing ("Precision Environment") side by side in a 262px row, so
   both wrapped to three lines and read as one collided block. Stacking them
   gives each a single line and restores the wing as the card's eyebrow.
   -------------------------------------------------------------------------- */
.product-card .product-meta {
  display: flex !important;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px !important;
  margin-bottom: 10px;
}
.product-card .product-meta .product-tag { order: 1; }
.product-card .product-meta small {
  order: 2;
  font-size: 12px;
  line-height: 1.35;
  color: var(--p-text-2, #33455a);
}

/* The manufacturer is an attribution, not a second eyebrow: sentence case at
   12.5px keeps it to one line and lets the model name carry the card. */
html body .product-card .product-meta small.u-mfr,
html body .product-card .product-meta small {
  font-family: var(--p-font-body, Inter, sans-serif) !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--p-text-muted, #5a6b7f) !important;
}

/* --------------------------------------------------------------------------
   Industry rails: one system, not seven colours.

   Each industry card carried a 3px full-height ::after rail, and each was a
   different colour - #365F8C blue, #556B7F slate, #C8420F orange, #A8350B,
   #E55B1A, #8B6F9D purple - so the grid read as arbitrary colour-coding
   rather than one composition.

   The rail stays as a structural device. It is a hairline at rest on the
   supporting cards; the anchor keeps the orange, because the anchor is the
   one card the accent is for.
   -------------------------------------------------------------------------- */
.industry-card:not(.anchor)::after {
  background: var(--p-border-strong, #d3dde7) !important;
  background-image: none !important;
  width: 3px !important;
  transition: background-color .18s ease;
}

@media (hover: hover) and (pointer: fine) {
  .industry-card:not(.anchor):hover::after {
    background: var(--p-orange-readable, #c8420f) !important;
  }
}

/* --------------------------------------------------------------------------
   Industry grid: rows size to content.

   grid-template-rows was hard-coded to 215px 215px 178px while the cards carry
   overflow:hidden, so any card whose copy ran longer than its row was silently
   clipped. Measured: Automotive & EV lost 20px, Railways 44px, Cleanrooms 43px
   - a cut line of body copy on each.

   With auto rows the anchor still spans two of them; it just no longer dictates
   their height.
   -------------------------------------------------------------------------- */
.industry-showcase { grid-template-rows: auto auto auto !important; }
.industry-card { height: auto !important; }
.industry-card:not(.anchor)::after { width: 3px !important; }
.industry-card.anchor::after { width: 4px !important; }

/* the action needs less clearance on these compact cards than the site default */
html body main .industry-card > .ind-link { padding-top: 14px !important; }