/* ==========================================================================
   Pengfeng Precision Hardware — Global Stylesheet
   Multi-page industrial website · Pengfeng Precision Hardware (pf898.com)
   Design system: tokens → reset → layout → components → pages → responsive
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design Tokens
   -------------------------------------------------------------------------- */
:root{
  /* Brand — navy */
  --navy-900:#04101F;
  --navy-800:#0A1E38;
  --navy-700:#12294A;
  --navy-600:#1B3A63;
  --navy-500:#24507F;

  /* Brand — blue */
  --blue-700:#0B4FB8;
  --blue-600:#1263E0;
  --blue-500:#2B82F5;
  --blue-300:#93BEFB;
  --blue-100:#DCE9FB;
  --blue-50:#EFF6FF;

  /* Accent — orange */
  --accent:#FF6A00;
  --accent-600:#E85D00;
  --accent-50:#FFF3EA;

  /* Support */
  --green:#0E9F6E;
  --green-50:#E7F8F1;

  /* Neutral */
  --ink-900:#0B1420;
  --ink-800:#1F2A37;
  --ink-700:#334155;
  --ink-600:#475569;
  --ink-500:#64748B;
  --ink-400:#94A3B8;
  --ink-300:#CBD5E1;
  --line:#E2E8F0;
  --line-soft:#F1F5F9;
  --bg:#FFFFFF;
  --bg-soft:#F7F9FC;
  --bg-blue:#EFF6FF;
  --bg-navy:#0A1E38;

  /* Radius */
  --r-xs:6px;  --r-sm:10px; --r-md:14px;
  --r-lg:20px; --r-xl:28px; --r-full:100px;

  /* Shadow */
  --sh-1:0 1px 2px rgba(11,20,32,.05), 0 1px 3px rgba(11,20,32,.06);
  --sh-2:0 4px 12px rgba(11,20,32,.07), 0 2px 4px rgba(11,20,32,.04);
  --sh-3:0 12px 32px rgba(11,20,32,.10), 0 4px 8px rgba(11,20,32,.04);
  --sh-4:0 24px 64px rgba(11,20,32,.14), 0 8px 16px rgba(11,20,32,.06);
  --sh-blue:0 12px 32px rgba(18,99,224,.22);

  /* Layout */
  --container:1240px;
  --gutter:28px;
  --header-h:78px;
  --topbar-h:38px;

  /* Type */
  --font:"Inter","Noto Sans SC",-apple-system,BlinkMacSystemFont,"Segoe UI",
         "PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  --mono:"JetBrains Mono","SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
}

/* --------------------------------------------------------------------------
   2. Reset & Base
   -------------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
/* The UA stylesheet implements [hidden] as display:none, but ANY author rule
   that sets an explicit display beats it — .qrmodal{display:grid} is enough.
   The result is a "hidden" overlay that still paints over the page and
   swallows every click underneath it. This one rule makes the attribute mean
   what it says for every component on the site. */
[hidden]{display:none !important}
html{scroll-behavior:smooth; scroll-padding-top:calc(var(--header-h) + 24px)}
body{
  margin:0;
  font-family:var(--font);
  font-size:18px;
  line-height:1.65;
  color:var(--ink-700);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
h1,h2,h3,h4,h5{margin:0; color:var(--ink-900); line-height:1.18; letter-spacing:-.02em; font-weight:800}
h1{font-size:60px}
h2{font-size:44px}
h3{font-size:27px}
h4{font-size:21px}
p{margin:0 0 20px}
p:last-child{margin-bottom:0}
a{color:var(--blue-600); text-decoration:none; transition:color .18s ease}
a:hover{color:var(--blue-700)}
ul{margin:0; padding:0; list-style:none}
img{max-width:100%; display:block}
img,video{height:auto}
button{font-family:inherit}
::selection{background:var(--blue-600); color:#fff}

/* Anchors */
.section[id],div[id],figure[id]{scroll-margin-top:calc(var(--header-h) + 24px)}

/* Focus */
a:focus-visible,button:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible,summary:focus-visible{
  outline:3px solid var(--blue-500); outline-offset:2px; border-radius:4px;
}

/* Skip link */
.skip{
  position:absolute; left:16px; top:-60px; z-index:999;
  background:var(--blue-600); color:#fff; padding:12px 22px;
  border-radius:var(--r-sm); font-weight:700; transition:top .2s;
}
.skip:focus{top:12px; color:#fff}

/* --------------------------------------------------------------------------
   3. Layout
   -------------------------------------------------------------------------- */
.container{width:100%; max-width:var(--container); margin:0 auto; padding:0 var(--gutter)}
.section{padding:104px 0}
.section--tight{padding:76px 0}
.section--soft{background:var(--bg-soft)}
.section--blue{background:var(--bg-blue)}
.section--navy{background:var(--navy-800); color:#C7D6EA}
.section--navy h2,.section--navy h3,.section--navy h4{color:#fff}

.grid{display:grid; gap:26px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.grid-5{grid-template-columns:repeat(5,1fr)}

/* Section heading */
.sec-head{max-width:820px; margin:0 auto 60px; text-align:center}
.sec-head--left{margin-left:0; text-align:left; max-width:720px}
.sec-head__eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  font-size:14px; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:var(--blue-600); margin-bottom:18px;
}
.sec-head__eyebrow::before{content:""; width:26px; height:3px; border-radius:2px; background:var(--accent)}
.sec-head p{font-size:19.5px; color:var(--ink-600); margin-top:20px}
.section--navy .sec-head p{color:#9FB6D4}
.section--navy .sec-head__eyebrow{color:var(--blue-300)}
.section--navy .sec-head__eyebrow::before{background:var(--accent)}

.sec-div{display:flex; align-items:center; gap:20px; margin-bottom:46px}
.sec-div::after{content:""; flex:1; height:1px; background:var(--line)}
.sec-div h2{font-size:38px}

/* --------------------------------------------------------------------------
   4. Buttons
   -------------------------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:16px 30px; border-radius:var(--r-full);
  font-size:17px; font-weight:750; letter-spacing:-.01em;
  border:2px solid transparent; cursor:pointer;
  transition:all .2s cubic-bezier(.2,.7,.3,1);
  white-space:nowrap; text-align:center;
}
.btn svg{width:19px; height:19px; flex:none}
.btn--primary{background:var(--blue-600); color:#fff; box-shadow:var(--sh-blue)}
.btn--primary:hover{background:var(--blue-700); color:#fff; transform:translateY(-2px); box-shadow:0 16px 40px rgba(18,99,224,.3)}
.btn--accent{background:var(--accent); color:#fff; box-shadow:0 12px 32px rgba(255,106,0,.26)}
.btn--accent:hover{background:var(--accent-600); color:#fff; transform:translateY(-2px)}
.btn--ghost{background:#fff; color:var(--ink-900); border-color:var(--line)}
.btn--ghost:hover{border-color:var(--ink-900); color:var(--ink-900); background:var(--bg-soft)}
.btn--onNavy{background:rgba(255,255,255,.09); color:#fff; border-color:rgba(255,255,255,.24); backdrop-filter:blur(6px)}
.btn--onNavy:hover{background:rgba(255,255,255,.16); color:#fff; border-color:rgba(255,255,255,.4)}
.btn--lg{padding:19px 38px; font-size:18.5px}
.btn--sm{padding:11px 22px; font-size:15.5px}
.btn--block{display:flex; width:100%}

.link-arrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:17px; font-weight:750; color:var(--blue-600);
}
.link-arrow svg{width:18px; height:18px; transition:transform .2s ease}
.link-arrow:hover svg{transform:translateX(5px)}

/* --------------------------------------------------------------------------
   5. Topbar
   -------------------------------------------------------------------------- */
.topbar{background:var(--navy-900); color:#8FA6C4; font-size:14.5px}
.topbar__in{display:flex; align-items:center; justify-content:space-between; height:var(--topbar-h)}
.topbar__items{display:flex; align-items:center; gap:26px}
.topbar__items li{display:flex; align-items:center; gap:8px}
.topbar__items svg{width:15px; height:15px; color:var(--blue-500); flex:none}
.topbar__items a{color:#8FA6C4}
.topbar__items a:hover{color:#fff}
.topbar__links{display:flex; align-items:center; gap:20px}
.topbar__links a{color:#8FA6C4; font-weight:600}
.topbar__links a:hover{color:#fff}

/* --------------------------------------------------------------------------
   6. Header
   -------------------------------------------------------------------------- */
.header{
  position:sticky; top:0; z-index:120;
  background:rgba(255,255,255,.94); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.header__in{display:flex; align-items:center; gap:12px; height:var(--header-h)}

/* Logo — official Pengfeng banner lockup (4:1).
   The footer sits on navy, so it uses logo-invert.webp: a pre-built variant with
   the near-black wordmark knocked out to white. A CSS filter cannot do this —
   brightness(0) invert(1) also inverts the white plate of an opaque logo file. */
.logo{display:block; flex:none; line-height:0}
.logo__img{display:block; height:38px; width:auto; max-width:none}
.logo--light .logo__img{opacity:.95; transition:opacity .18s ease}
.footer__brand .logo--light:hover .logo__img{opacity:1}

/* Nav is centred in the leftover space rather than pushed right by
   margin-left:auto. With 8 items plus two buttons the old layout left the
   logo stranded against the container edge and the whole bar read as
   left-heavy; centring the nav makes both sides carry equal weight. */
.nav{margin-left:auto; margin-right:auto; padding-left:40px}
.nav>ul{display:flex; align-items:center; gap:10px}
.nav__item{position:relative}
.nav__link{
  display:flex; align-items:center; gap:5px;
  padding:11px 10px; border-radius:var(--r-sm);
  font-size:15.5px; font-weight:650; color:var(--ink-700); position:relative;
  white-space:nowrap;
}
.nav__link:hover{color:var(--blue-600)}
.nav__link.is-active{color:var(--blue-600)}
.nav__link.is-active::after{
  content:""; position:absolute; left:15px; right:15px; bottom:4px;
  height:2.5px; background:var(--blue-600); border-radius:2px;
}
.nav__link svg{width:13px; height:13px; opacity:.5; flex:none}

/* Dropdown */
.dropdown{
  position:absolute; top:calc(100% + 10px); left:50%; transform:translateX(-50%) translateY(-8px);
  width:330px; padding:12px; background:#fff; border-radius:var(--r-lg);
  box-shadow:var(--sh-4); border:1px solid var(--line);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .2s ease, transform .2s ease, visibility .2s;
}
/* Invisible bridge across the 10px offset — without it the panel closes
   the moment the pointer travels down from the nav link to the panel. */
.dropdown::before{
  content:""; position:absolute; left:0; right:0; top:-11px; height:11px;
}
.nav__item:hover .dropdown{opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%) translateY(0)}
.dropdown--wide{width:340px}
.dropdown a{display:flex; gap:14px; padding:13px 15px; border-radius:var(--r-md); transition:background .16s ease}
.dropdown a:hover{background:var(--bg-blue)}
.dropdown__ico{
  width:40px; height:40px; border-radius:var(--r-sm); flex:none;
  background:var(--bg-blue); color:var(--blue-600);
  display:grid; place-items:center;
}
.dropdown__ico svg{width:20px; height:20px}
/* Category photo variant (Products / Capabilities). The SVG chips sit on a
   tinted plate; a real part photo needs the opposite treatment — white plate,
   no tint, hairline border — otherwise the tint shows through the light
   aluminium in the CNC and deep-drawing shots and muddies them. */
.dropdown__ico--img{
  width:52px; height:52px; border-radius:var(--r-sm); overflow:hidden;
  background:#fff; border:1px solid var(--line);
  box-shadow:0 1px 3px rgba(15,23,42,.07);
}
.dropdown__ico--img img{width:100%; height:100%; object-fit:cover; display:block}

.dropdown__t{font-size:16px; font-weight:700; color:var(--ink-900); display:block; line-height:1.3}
.dropdown__d{font-size:14px; color:var(--ink-500); display:block; margin-top:3px}

/* Multi-column dropdown (Industries — 9 items in 3 columns) */
.dropdown--cols{padding:14px 14px 8px}
.dropdown__grid{display:grid; gap:2px}
.dropdown__grid--3{grid-template-columns:repeat(3,1fr)}
.dropdown--cols .dropdown__grid a{padding:11px 12px; gap:11px}
.dropdown--cols .dropdown__grid .dropdown__ico{width:34px; height:34px; border-radius:9px}
.dropdown--cols .dropdown__grid .dropdown__ico svg{width:18px; height:18px}
.dropdown--cols .dropdown__grid .dropdown__t{font-size:15px}
.dropdown--cols .dropdown__grid .dropdown__d{font-size:13px; margin-top:2px}
.dropdown__all{
  display:flex; align-items:center; justify-content:center; gap:7px;
  margin-top:8px; padding:11px 15px; border-radius:var(--r-md);
  background:var(--bg-blue); color:var(--blue-600);
  font-size:14.5px; font-weight:750; letter-spacing:.01em;
}
.dropdown__all:hover{background:var(--blue-600); color:#fff}
.dropdown__all svg{width:16px; height:16px; flex:none; transition:transform .18s ease}
.dropdown__all:hover svg{transform:translateX(3px)}

/* Keep wide panels inside the viewport when they open near the right edge */
.nav__item--right .dropdown{left:auto; right:-14px; transform:translateY(-8px)}
.nav__item--right:hover .dropdown{transform:translateY(0)}

/* Mobile menu (injected by pfScript) */
.mm{
  position:fixed; left:0; right:0; z-index:119; overflow:auto;
  background:#fff; border-bottom:1px solid var(--line); box-shadow:var(--sh-3);
  overscroll-behavior:contain;
}
.mm__g{
  padding:18px 24px 7px; font-size:12px; font-weight:800;
  letter-spacing:.13em; text-transform:uppercase; color:var(--ink-400);
  background:var(--bg-soft); border-bottom:1px solid var(--line-soft);
}
.mm__l{
  display:block; padding:13px 24px; font-size:16.5px; font-weight:600;
  color:var(--ink-900); border-bottom:1px solid var(--line-soft);
  transition:background .14s ease, color .14s ease;
}
.mm__l:hover,.mm__l:focus-visible{background:var(--bg-blue); color:var(--blue-600)}
.mm__l--cta{
  font-size:17px; font-weight:800; color:var(--blue-600); border-bottom:0;
  background:var(--bg-blue);
}

/* .nav carries margin-left/right:auto and centres itself, so the actions
   block must not add another margin-left:auto — it would be inert at best
   and fight the nav centring at worst. */
.header__actions{display:flex; align-items:center; gap:10px}

/* Header CTAs stay compact — 10 nav items already consume most of the bar */
.header__actions .btn{padding:13px 19px; font-size:15.5px}
.header__actions .btn--primary{white-space:nowrap}

/* Burger */
.burger{
  display:none; width:46px; height:46px; border:1px solid var(--line);
  border-radius:var(--r-md); background:#fff; cursor:pointer;
  align-items:center; justify-content:center; flex:none;
}
.burger span{display:block; width:20px; height:2px; background:var(--ink-900); border-radius:2px; margin:2.5px 0}

/* --------------------------------------------------------------------------
   7. Hero (homepage)
   -------------------------------------------------------------------------- */
.hero{position:relative; overflow:hidden; background:var(--navy-800); color:#fff; padding:96px 0 0}
.hero::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(900px 500px at 82% 12%, rgba(43,130,245,.30), transparent 62%),
    radial-gradient(700px 420px at 10% 88%, rgba(255,106,0,.14), transparent 60%);
}
.hero__grid{
  position:absolute; inset:0; opacity:.10;
  background-image:linear-gradient(rgba(255,255,255,.5) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.5) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(closest-side at 50% 40%,#000,transparent);
  -webkit-mask-image:radial-gradient(closest-side at 50% 40%,#000,transparent);
}
.hero__in{
  position:relative; display:grid; grid-template-columns:1.08fr 1fr;
  gap:64px; align-items:center; padding-bottom:88px;
}
.hero h1{color:#fff; font-size:64px; margin-bottom:14px}
.hero h1 .hl{
  background:linear-gradient(100deg,var(--blue-300),#fff 55%,var(--accent));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero__lead{font-size:20.5px; color:#B4C8E2; max-width:560px; margin-bottom:32px}
.hero__chips{display:flex; flex-wrap:wrap; gap:12px; margin-bottom:36px}
.hero__chips span{
  display:inline-flex; align-items:center; gap:9px;
  padding:11px 20px; border-radius:var(--r-full);
  background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.18);
  font-size:15.5px; font-weight:650; color:#E4EDF7;
}
.hero__chips svg{width:16px; height:16px; color:var(--blue-300)}
.hero__cta{display:flex; flex-wrap:wrap; gap:16px}
.hero__trust{display:flex; flex-wrap:wrap; gap:30px; margin-top:44px; padding-top:32px; border-top:1px solid rgba(255,255,255,.14)}
.hero__trust div{font-size:14.5px; color:#8FA6C4; font-weight:600}
.hero__trust b{display:block; font-size:22px; color:#fff; font-weight:800; letter-spacing:-.02em}

/* Hero visual */
.hero__visual{position:relative}
.hero__img{
  position:relative; border-radius:var(--r-xl); overflow:hidden;
  box-shadow:0 40px 90px rgba(0,0,0,.42); aspect-ratio:4/3; background:var(--navy-700);
}
.hero__img img{width:100%; height:100%; object-fit:cover}
.hero__img::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,transparent 52%,rgba(10,30,56,.62) 100%);
}
/* Hero bottom strip */
.hero__strip{position:relative; border-top:1px solid rgba(255,255,255,.13)}
.hero__strip ul{
  display:grid; grid-template-columns:repeat(4,1fr);
}
.hero__strip li{padding:28px 30px; border-right:1px solid rgba(255,255,255,.11)}
.hero__strip li:last-child{border-right:0}
.hero__strip b{display:block; font-size:34px; font-weight:850; color:#fff; letter-spacing:-.03em; line-height:1.1}
.hero__strip b em{color:var(--accent); font-style:normal}
.hero__strip span{font-size:14.5px; color:#8FA6C4; font-weight:600}

/* --------------------------------------------------------------------------
   8. Page hero (inner pages)
   -------------------------------------------------------------------------- */
.phero{
  position:relative; overflow:hidden;
  background:var(--navy-800); color:#fff; padding:78px 0 84px;
}
.phero::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(820px 440px at 88% 8%, rgba(43,130,245,.30), transparent 62%);
}
.phero__grid{
  position:absolute; inset:0; opacity:.10;
  background-image:linear-gradient(rgba(255,255,255,.5) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.5) 1px,transparent 1px);
  background-size:56px 56px;
}
.phero__in{position:relative; display:grid; grid-template-columns:1.15fr .85fr; gap:60px; align-items:center}
.phero h1{color:#fff; font-size:52px}
.phero p{font-size:19.5px; color:#B4C8E2; margin-top:22px; max-width:620px}
.phero__art{border-radius:var(--r-xl); overflow:hidden; box-shadow:var(--sh-4); aspect-ratio:16/10; background:var(--navy-700)}
.phero__art img{width:100%; height:100%; object-fit:cover}

/* Breadcrumb */
.crumb{position:relative; display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-bottom:22px; font-size:15px}
.crumb a{color:#8FA6C4; font-weight:600}
.crumb a:hover{color:#fff}
.crumb span{color:#5B7599}
.crumb .sep{color:#5B7599; font-size:13px}
.crumb .cur{color:#fff; font-weight:700}

/* --------------------------------------------------------------------------
   9. Cards
   -------------------------------------------------------------------------- */
.card{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  padding:34px 30px; transition:all .24s cubic-bezier(.2,.7,.3,1);
  display:flex; flex-direction:column; height:100%;
}
.card:hover{border-color:var(--blue-300); box-shadow:var(--sh-3); transform:translateY(-5px)}
.card__ico{
  width:56px; height:56px; border-radius:var(--r-md); margin-bottom:22px;
  background:var(--bg-blue); color:var(--blue-600); display:grid; place-items:center; flex:none;
}
.card__ico svg{width:27px; height:27px}
.card__ico--accent{background:var(--accent-50); color:var(--accent)}
.card__ico--navy{background:#EEF2F7; color:var(--navy-700)}
.card__ico--green{background:var(--green-50); color:var(--green)}
.card h3,.card h2{font-size:23px; margin-bottom:12px}
.card p{font-size:17px; color:var(--ink-600); margin-bottom:20px}
.card__foot{margin-top:auto; padding-top:20px; border-top:1px solid var(--line-soft)}
.card__list{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:20px}
.card__list li{
  font-size:14px; font-weight:650; color:var(--ink-600);
  background:var(--bg-soft); padding:6px 12px; border-radius:var(--r-xs);
}

/* Service card with image */
.svcard{
  position:relative; border-radius:var(--r-lg); overflow:hidden;
  background:var(--navy-800); min-height:400px; display:flex;
  flex-direction:column; justify-content:flex-end;
  padding:36px 30px; color:#fff; isolation:isolate;
  transition:transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s;
}
.svcard img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2;
  transition:transform .5s cubic-bezier(.2,.7,.3,1);
}
.svcard::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg,rgba(4,16,31,.24) 0%,rgba(10,30,56,.86) 68%,rgba(10,30,56,.95) 100%);
}
.svcard:hover{transform:translateY(-6px); box-shadow:var(--sh-4)}
.svcard:hover img{transform:scale(1.06)}
.svcard__n{
  position:absolute; top:28px; right:28px; z-index:1;
  font-family:var(--mono); font-size:14px; font-weight:700;
  color:rgba(255,255,255,.5); letter-spacing:.06em;
}
.svcard h3{color:#fff; font-size:27px; margin-bottom:12px}
.svcard p{color:#C7D6EA; font-size:17px; margin-bottom:20px}
.svcard__spec{
  position:absolute; top:26px; left:30px; z-index:1;
  display:flex; flex-direction:column; gap:6px;
}
.svcard__spec span{
  font-family:var(--mono); font-size:13px; font-weight:700;
  color:var(--blue-300); background:rgba(43,130,245,.16);
  border:1px solid rgba(43,130,245,.3); padding:4px 11px; border-radius:var(--r-xs);
  backdrop-filter:blur(6px);
}

/* Feature row (numbered) */
.frow{
  display:grid; grid-template-columns:74px 1fr; gap:26px;
  padding:30px 0; border-top:1px solid var(--line); align-items:start;
}
.frow:last-child{border-bottom:1px solid var(--line)}
.frow__n{
  font-family:var(--mono); font-size:17px; font-weight:800; color:var(--blue-600);
  letter-spacing:.04em; padding-top:5px;
}
.frow h3{font-size:23px; margin-bottom:10px}
.frow p{font-size:17.5px; color:var(--ink-600); margin:0}

/* --------------------------------------------------------------------------
   10. Split (text + media)
   -------------------------------------------------------------------------- */
.split{display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center}
.split--rev .split__art{order:-1}
.split__art{border-radius:var(--r-xl); overflow:hidden; box-shadow:var(--sh-3); position:relative; background:var(--bg-soft)}
.split__art img{width:100%; height:100%; object-fit:cover}
.split__art--tall{aspect-ratio:4/5}
.split__art--wide{aspect-ratio:16/11}
.split__art figcaption{
  position:absolute; left:0; right:0; bottom:0;
  padding:44px 28px 22px; font-size:15px; font-weight:600; color:#DCE9FB;
  background:linear-gradient(180deg,transparent,rgba(4,16,31,.86));
}
.split__txt h2{font-size:40px; margin-bottom:20px}
.split__txt p{font-size:18.5px; color:var(--ink-600); margin-bottom:20px}
.split__txt>.link-arrow{margin-top:8px}

/* Checklist */
.checks{margin:28px 0}
.checks li{
  display:flex; gap:14px; align-items:flex-start;
  padding:11px 0; font-size:17.5px; color:var(--ink-700); font-weight:600;
}
.checks svg{width:24px; height:24px; flex:none; color:var(--green); margin-top:1px}
.checks b{color:var(--ink-900)}

/* --------------------------------------------------------------------------
   11. Stats
   -------------------------------------------------------------------------- */
.statbar{background:var(--navy-800); color:#fff; padding:0}
.statbar__grid{display:grid; grid-template-columns:repeat(4,1fr)}
.stat{padding:44px 30px; border-right:1px solid rgba(255,255,255,.11)}
.stat:last-child{border-right:0}
.stat__n{
  font-size:46px; font-weight:850; color:#fff; letter-spacing:-.035em;
  line-height:1.05; margin-bottom:10px; display:flex; align-items:baseline; gap:3px;
}
.stat__n em{color:var(--accent); font-style:normal}
.stat__l{font-size:16.5px; font-weight:650; color:#B4C8E2}
.stat__d{font-size:14.5px; color:#7A93B4; margin-top:5px}

/* Spec strip (dark) */
.spec{background:var(--navy-900); color:#fff; padding:70px 0}
.spec__grid{display:grid; grid-template-columns:repeat(4,1fr); gap:0}
.spec__i{padding:0 32px; border-left:1px solid rgba(255,255,255,.12)}
.spec__i:first-child{border-left:0; padding-left:0}
.spec__i b{display:block; font-family:var(--mono); font-size:38px; font-weight:800; color:var(--blue-300); letter-spacing:-.03em}
.spec__i span{display:block; font-size:16px; color:#8FA6C4; margin-top:7px; font-weight:600}

/* --------------------------------------------------------------------------
   12. Steps
   -------------------------------------------------------------------------- */
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:0; position:relative}
.steps::before{
  content:""; position:absolute; top:52px; left:11%; right:11%;
  height:2px; background:repeating-linear-gradient(90deg,var(--blue-300) 0 9px,transparent 9px 18px);
  z-index:0;
}
.step{position:relative; z-index:1; text-align:center; padding:0 22px}
.step__n{
  width:74px; height:74px; margin:0 auto 26px; border-radius:50%;
  background:#fff; border:2.5px solid var(--blue-600);
  display:grid; place-items:center;
  font-family:var(--mono); font-size:25px; font-weight:800; color:var(--blue-600);
  box-shadow:0 0 0 9px var(--bg);
}
.step h3{font-size:21px; margin-bottom:11px}
.step p{font-size:16.5px; color:var(--ink-600)}

/* --------------------------------------------------------------------------
   13. Testimonials
   -------------------------------------------------------------------------- */
.tst{position:relative; overflow:hidden}
.tst__track{display:flex; gap:26px; width:100%; transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.tst__slide{flex:0 0 calc((100% - 52px)/3); min-width:0}
.tst__card{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  padding:34px 30px; height:100%; display:flex; flex-direction:column;
}
.tst__stars{display:flex; gap:3px; color:var(--accent); margin-bottom:18px; justify-content:center}
.tst__stars svg{width:19px; height:19px}
/* Centred throughout — stars, quote and attribution. The cards sit three
   across under a centred section heading, and left-aligned bodies under a
   centred heading read as a misalignment rather than a choice: the eye
   starts at the heading, finds the text starting somewhere else, and
   stops. Centring also suits the content, which is a single short
   quotation rather than a paragraph of running text. */
.tst__card p{
  font-size:17.5px; color:var(--ink-700); line-height:1.72; flex:1;
  text-align:center;
}
.tst__who{
  display:flex; align-items:center; justify-content:center; gap:14px;
  margin-top:26px; padding-top:24px; border-top:1px solid var(--line-soft);
  text-align:left;
}
.tst__av{
  width:48px; height:48px; border-radius:50%; flex:none;
  background:linear-gradient(140deg,var(--navy-700),var(--blue-600));
  display:grid; place-items:center; color:#fff; font-weight:800; font-size:18px;
}
.tst__who b{display:block; font-size:16.5px; color:var(--ink-900); font-weight:750}
.tst__who span{display:block; font-size:14px; color:var(--ink-500)}
.tst__ctrl{display:flex; gap:10px; justify-content:center; margin-top:40px}
.tst__ctrl button{
  width:48px; height:48px; border-radius:50%; border:1.5px solid var(--line);
  background:#fff; cursor:pointer; display:grid; place-items:center; color:var(--ink-700);
  transition:all .18s ease;
}
.tst__ctrl button:hover{border-color:var(--blue-600); color:var(--blue-600)}
.tst__ctrl svg{width:20px; height:20px}

/* --------------------------------------------------------------------------
   14. Industries
   -------------------------------------------------------------------------- */
.ind{
  position:relative; border-radius:var(--r-lg); overflow:hidden;
  min-height:220px; display:flex; align-items:flex-end;
  padding:28px 26px; color:#fff; isolation:isolate; cursor:default;
}
.ind img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; transition:transform .5s}
.ind::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg,rgba(4,16,31,.34) 0%,rgba(10,30,56,.9) 72%,rgba(10,30,56,.96) 100%);
}
.ind h3{
  color:#fff; font-size:21px; margin-bottom:0; transition:transform .25s;
  text-shadow:0 2px 10px rgba(4,16,31,.85), 0 1px 3px rgba(4,16,31,.9);
}
.ind p{
  font-size:15.5px; color:#C7D6EA; margin:0;
  max-height:0; opacity:0; overflow:hidden;
  transition:max-height .35s ease, opacity .3s ease, margin .3s ease;
}
.ind:hover img{transform:scale(1.07)}
.ind:hover p{max-height:130px; opacity:1; margin-top:10px}

/* Clickable industry card (links to the detail page) */
.ind--link{display:block; color:inherit}
.ind--link h3{color:#fff}
.ind--link::after{
  content:""; position:absolute; inset:0; z-index:2;
}
.ind--link:hover{
  border-color:var(--blue-500);
  box-shadow:var(--sh-3);
}
.ind--link:hover h3::after{
  content:"→"; margin-left:9px; font-weight:800;
  display:inline-block; transition:transform .2s ease;
}
.ind--link:hover h3::after{transform:translateX(4px)}

/* --------------------------------------------------------------------------
   15. Materials / Tabs
   -------------------------------------------------------------------------- */
.mtabs{display:flex; gap:10px; justify-content:center; margin-bottom:44px; flex-wrap:wrap}
.mtab{
  display:inline-flex; align-items:center; gap:11px;
  padding:14px 28px 14px 20px; border-radius:var(--r-full);
  border:1.5px solid var(--line); background:#fff;
  font-size:17px; font-weight:700; color:var(--ink-600); cursor:pointer;
  transition:all .18s ease;
}
.mtab svg{width:19px; height:19px}
.mtab.is-on{background:var(--navy-800); border-color:var(--navy-800); color:#fff}
.mpanel{display:none}
.mpanel.is-on{display:block; animation:fadeUp .42s ease}

@keyframes fadeUp{from{opacity:0; transform:translateY(16px)} to{opacity:1; transform:none}}

.matgrid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
.mat{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-md);
  padding:20px 22px; transition:all .18s ease;
}
.mat:hover{border-color:var(--blue-500); box-shadow:var(--sh-2)}
.mat b{display:block; font-size:18.5px; color:var(--ink-900); font-weight:750; margin-bottom:5px}
.mat span{display:block; font-family:var(--mono); font-size:13.5px; color:var(--blue-600); font-weight:700; letter-spacing:.02em}
.mat p{font-size:15px; color:var(--ink-500); margin:8px 0 0; line-height:1.55}

.pills{display:flex; flex-wrap:wrap; gap:11px}
.pills span{
  padding:11px 20px; border-radius:var(--r-full);
  background:#fff; border:1px solid var(--line);
  font-size:16px; font-weight:650; color:var(--ink-700);
  transition:all .16s ease;
}
.pills span:hover{border-color:var(--blue-500); color:var(--blue-600); background:var(--bg-blue)}

/* --------------------------------------------------------------------------
   16. QA grid
   -------------------------------------------------------------------------- */
.qa{display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:rgba(255,255,255,.14)}
.qa__i{background:var(--navy-800); padding:44px 40px}
.qa__ico{
  width:52px; height:52px; border-radius:var(--r-md); margin-bottom:22px;
  background:rgba(43,130,245,.16); color:var(--blue-300); display:grid; place-items:center;
}
.qa__ico svg{width:26px; height:26px}
.qa__i h3{color:#fff; font-size:23px; margin-bottom:12px}
.qa__i p{color:#9FB6D4; font-size:17px; margin:0}

/* --------------------------------------------------------------------------
   17. Tabs (generic, for inner pages)
   -------------------------------------------------------------------------- */
.ptabs{display:flex; gap:10px; justify-content:center; margin-bottom:46px; flex-wrap:wrap}
.ptab{
  display:inline-flex; align-items:center; gap:11px;
  padding:14px 26px 14px 18px; border-radius:var(--r-full);
  border:1.5px solid var(--line); background:#fff;
  font-size:17px; font-weight:700; color:var(--ink-600); cursor:pointer;
  transition:all .18s ease;
}
.ptab svg{width:19px; height:19px}
.ptab.is-on{background:var(--navy-800); border-color:var(--navy-800); color:#fff}

.chips{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:26px}
.chips span{
  padding:10px 17px; border-radius:var(--r-sm);
  background:var(--bg-blue); border:1px solid #D6E5FC;
  font-size:15.5px; font-weight:650; color:var(--blue-700);
}
.chips b{font-family:var(--mono); font-weight:800}

.note{
  padding:28px 30px; border-radius:var(--r-lg);
  background:var(--bg-blue); border:1px solid #D6E5FC;
}
.note b{display:block; font-size:19px; color:var(--navy-800); margin-bottom:8px; font-weight:800}
.note p{font-size:17px; color:var(--ink-600); margin:0}

/* --------------------------------------------------------------------------
   18. Quote form
   -------------------------------------------------------------------------- */
.quoteband{background:var(--navy-800); color:#fff; padding:96px 0}
.quoteband__in{display:grid; grid-template-columns:1fr 1.05fr; gap:64px; align-items:start}
.quoteband h2{color:#fff; font-size:42px; margin-bottom:20px}
.quoteband p{color:#B4C8E2; font-size:18.5px; margin-bottom:28px}
.qpoints li{display:flex; gap:14px; padding:10px 0; font-size:17.5px; color:#D6E2F0; font-weight:600}
.qpoints svg{width:23px; height:23px; color:var(--green); flex:none; margin-top:2px}

/* Capacity strip below the quote bullets.
   The bullet list is short and the form beside it is tall, which left the
   lower half of this column empty. Four numbers in a 2x2 grid fill that space
   and give a screening buyer the capacity figures they came for. Borders
   rather than cards: the band is already dark, and more boxes would fight the
   white quote form sitting next to it. */
.qstats{
  display:grid; grid-template-columns:1fr 1fr; gap:22px 28px;
  margin-top:38px; padding-top:34px;
  border-top:1px solid rgba(255,255,255,.14);
}
.qstat b{
  display:block; color:#fff; font-size:44px; line-height:1.05;
  font-weight:800; letter-spacing:-.03em; margin-bottom:6px;
  font-variant-numeric:tabular-nums;
}
.qstat span{
  display:block; color:#8FA6C4; font-size:15.5px; font-weight:600;
  letter-spacing:.01em;
}
@media (max-width:560px){
  .qstats{gap:18px 20px; margin-top:30px; padding-top:26px}
  .qstat b{font-size:36px}
  .qstat span{font-size:14.5px}
}

form.qform{
  background:#fff; border-radius:var(--r-xl); padding:38px 36px;
  box-shadow:var(--sh-4);
}
form.qform h3{font-size:25px; margin-bottom:8px}
form.qform>.formsub{font-size:16px; color:var(--ink-500); margin-bottom:26px}
.frow2{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.fld{margin-bottom:16px; position:relative}
.fld label{display:block; font-size:14.5px; font-weight:700; color:var(--ink-700); margin-bottom:7px}
.fld input,.fld select,.fld textarea{
  width:100%; padding:14px 16px; border-radius:var(--r-md);
  border:1.5px solid var(--line); background:#fff;
  font-family:inherit; font-size:16.5px; color:var(--ink-900);
  transition:border-color .18s, box-shadow .18s;
}
.fld textarea{resize:vertical; min-height:112px}
.fld input:focus,.fld select:focus,.fld textarea:focus{
  outline:none; border-color:var(--blue-600); box-shadow:0 0 0 4px var(--blue-100);
}
.fld input::placeholder,.fld textarea::placeholder{color:var(--ink-400)}
.fld select{appearance:none; cursor:pointer; padding-right:44px}
.fld:has(select)::after{
  content:""; position:absolute; right:17px; bottom:22px; pointer-events:none;
  width:9px; height:9px; border-right:2px solid var(--ink-400); border-bottom:2px solid var(--ink-400);
  transform:rotate(45deg);
}

.formnote{font-size:14px; color:var(--ink-500); margin-top:14px; text-align:center}

/* Inquiry submit failure. Sits directly above the button, which is where the
   visitor's focus already is, and uses the same shape as an inline field
   error rather than a full-width red banner — a lead who hits a network
   error should be able to just press Send again. */
.formerr{
  margin:0 0 14px; padding:12px 16px;
  border:1px solid #F3C9C4; border-left:3px solid #D93A2B;
  border-radius:var(--r-sm); background:#FDF2F1;
  font-size:14.5px; line-height:1.55; color:#8C2318;
}
.formerr[hidden]{display:none}

/* The quote form is a white card inside the dark .quoteband, but
   `.quoteband p` is a descendant selector and so reaches every <p> in that
   card — including the ones inquiry.js creates at runtime. Being (0,1,1)
   against .formerr's (0,1,0) it won, and a send failure came out in pale
   blue on pale pink at 18.5px. Prefixing with `form.qform` raises these to
   (0,2,1) and beats it.

   The alternative — qualifying the band rule with :not() — is not worth it:
   :not() only accepts a selector list, so :not(form p) is invalid and drops
   the rule entirely, and :not(.qform p) relies on Selectors Level 4 complex
   :not() support for no benefit. .formsub above already solves the same
   problem this way. */
form.qform .formerr{color:#8C2318; font-size:14.5px; margin-bottom:14px}
form.qform .formnote{color:var(--ink-500); font-size:14px; margin-top:14px}

/* Fields the visitor has to fix. Marked by inquiry.js via aria-invalid
   rather than by the browser's own :invalid, because the form carries
   novalidate — without this the only cue would be the persistent message
   above the button, which does not say which of eight inputs is at fault.
   The left border matches .formerr so the two read as one message. */
.qform [aria-invalid="true"]{
  border-color:#D93A2B;
  box-shadow:0 0 0 3px rgba(217,58,43,.10);
}
.qform [aria-invalid="true"]:focus{
  border-color:#D93A2B;
  box-shadow:0 0 0 3px rgba(217,58,43,.16);
}

/* --------------------------------------------------------------------------
   19. CTA strip
   -------------------------------------------------------------------------- */
.ctastrip{padding:84px 0; background:var(--bg-blue); border-top:1px solid #D6E5FC}
.ctastrip__in{display:grid; grid-template-columns:1fr auto; gap:44px; align-items:center}
.ctastrip h2{font-size:38px; margin-bottom:14px}
.ctastrip p{font-size:18.5px; color:var(--ink-600); margin:0}
.ctastrip__btns{display:flex; gap:14px; flex-wrap:wrap}

/* --------------------------------------------------------------------------
   20. FAQ
   -------------------------------------------------------------------------- */
.faq{max-width:900px; margin:0 auto}
.faq details{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-md);
  margin-bottom:14px; overflow:hidden; transition:all .2s ease;
}
.faq details[open]{border-color:var(--blue-300); box-shadow:var(--sh-2)}
.faq summary{
  padding:24px 60px 24px 28px; cursor:pointer; position:relative;
  font-size:19px; font-weight:750; color:var(--ink-900); list-style:none;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:""; position:absolute; right:28px; top:50%; width:12px; height:12px;
  border-right:2.5px solid var(--blue-600); border-bottom:2.5px solid var(--blue-600);
  transform:translateY(-70%) rotate(45deg); transition:transform .22s ease;
}
.faq details[open] summary::after{transform:translateY(-20%) rotate(225deg)}
.faq summary:hover{color:var(--blue-600)}
.faq__body{padding:0 28px 26px; font-size:17.5px; color:var(--ink-600); line-height:1.72}
.faq__body p:last-child{margin-bottom:0}
.faq__body b{color:var(--ink-900)}

/* --------------------------------------------------------------------------
   21. Resources / Insights cards
   -------------------------------------------------------------------------- */
.res{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  overflow:hidden; display:flex; flex-direction:column;
  transition:all .24s cubic-bezier(.2,.7,.3,1);
}
.res:hover{border-color:var(--blue-300); box-shadow:var(--sh-3); transform:translateY(-5px)}
.res__thumb{aspect-ratio:16/10; overflow:hidden; background:var(--bg-soft)}
.res__thumb img{width:100%; height:100%; object-fit:cover; transition:transform .5s}
.res:hover .res__thumb img{transform:scale(1.05)}
.res__body{padding:26px 26px 28px; flex:1; display:flex; flex-direction:column}
.res__tag{
  display:inline-block; font-family:var(--mono); font-size:12.5px; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; color:var(--blue-600); margin-bottom:11px;
}
.res__body h3{font-size:21px; margin-bottom:11px}
.res__body p{font-size:16.5px; color:var(--ink-600); margin-bottom:18px; flex:1}
.res__meta{font-size:14.5px; color:var(--ink-400); font-weight:600; padding-top:16px; border-top:1px solid var(--line-soft)}

/* --------------------------------------------------------------------------
   22. Gallery / figure
   -------------------------------------------------------------------------- */
.gal{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.gal figure{
  margin:0; border-radius:var(--r-lg); overflow:hidden;
  position:relative; aspect-ratio:4/3; background:var(--bg-soft);
}
.gal img{width:100%; height:100%; object-fit:cover; transition:transform .5s}
.gal figure:hover img{transform:scale(1.06)}
.gal figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:40px 22px 18px;
  font-size:15px; font-weight:700; color:#fff;
  background:linear-gradient(180deg,transparent,rgba(4,16,31,.88));
}

/* --------------------------------------------------------------------------
   23. Footer
   -------------------------------------------------------------------------- */
.footer{background:var(--navy-900); color:#8FA6C4; padding:76px 0 0}
.footer__top{display:grid; grid-template-columns:1.6fr 1fr 1fr 1.3fr; gap:52px; padding-bottom:52px}
.footer h2{color:#fff; font-size:16.5px; margin-bottom:22px; letter-spacing:.01em}
.footer__brand p{font-size:16.5px; margin:20px 0 24px; max-width:330px}
.footer li{margin-bottom:12px}
.footer li a{color:#8FA6C4; font-size:16px; font-weight:550}
.footer li a:hover{color:#fff}
.footer__contact li{display:flex; gap:12px; align-items:flex-start; font-size:16px}
.footer__contact svg{width:18px; height:18px; color:var(--blue-500); flex:none; margin-top:4px}
.footer__contact a{color:#C7D6EA}
.footer__contact a:hover{color:#fff}
.socials{display:flex; gap:10px}
.socials a{
  width:40px; height:40px; border-radius:var(--r-sm);
  background:rgba(255,255,255,.07); display:grid; place-items:center;
  color:#8FA6C4; transition:all .18s;
}
.socials a:hover{background:var(--blue-600); color:#fff}
.socials svg{width:19px; height:19px}

/* --------------------------------------------------------------------------
   23b. Footer QR codes
   --------------------------------------------------------------------------
   The footer is dark navy and a QR code only decodes against light
   surroundings. Each code therefore sits on a white plate whose padding IS
   the quiet zone, so the four-module margin the format requires is also what
   visually separates the code from the footer. Do not crop that padding away.

   The plate keeps the code perfectly square; giving the img rounded corners
   would clip the corner modules (three of the four finders live there).*/
.footer__qr{display:flex; gap:14px; margin-top:26px}
.footer__qrItem{
  display:flex; flex-direction:column; align-items:center; gap:11px;
  background:none; border:0; padding:0; cursor:pointer;
  color:#8FA6C4; font:inherit; transition:transform .18s;
}
.footer__qrItem:hover{transform:translateY(-3px)}
.footer__qrItem:focus-visible{outline:2px solid var(--blue-300); outline-offset:6px; border-radius:6px}
.footer__qrImg{
  display:block; width:112px; height:112px; padding:7px;
  background:#fff; border-radius:10px;
  box-shadow:0 4px 16px rgba(0,0,0,.28);
  transition:box-shadow .18s;
}
.footer__qrItem:hover .footer__qrImg{box-shadow:0 8px 24px rgba(37,99,235,.4)}
.footer__qrImg img{display:block; width:100%; height:100%; border-radius:3px}
.footer__qrCap{
  display:inline-flex; align-items:center; gap:7px;
  font-size:15px; font-weight:600; color:#C7D6EA; white-space:nowrap;
}
.footer__qrItem:hover .footer__qrCap{color:#fff}
.footer__qrCap svg{width:17px; height:17px; color:var(--blue-300); flex:none}

/* QR lightbox — sized so a phone can scan from arm's length. */
.qrmodal{position:fixed; inset:0; z-index:200; display:grid; place-items:center}
.qrmodal__bd{position:absolute; inset:0; background:rgba(4,16,31,.78); backdrop-filter:blur(3px)}
.qrmodal__box{
  position:relative; background:#fff; border-radius:16px;
  padding:34px 34px 28px; text-align:center;
  max-width:min(92vw, 420px); animation:pfQrIn .2s ease-out;
}
@keyframes pfQrIn{from{opacity:0; transform:scale(.94)} to{opacity:1; transform:none}}
.qrmodal__x{
  position:absolute; top:8px; right:10px; width:38px; height:38px;
  border:0; background:none; color:#64748B; font-size:30px; line-height:1;
  cursor:pointer; border-radius:8px;
}
.qrmodal__x:hover{background:#F1F5F9; color:#0F172A}
.qrmodal__title{margin:0 0 16px; font-size:20px; font-weight:750; color:#0F172A}
.qrmodal__img{
  width:320px; max-width:100%; aspect-ratio:1; margin:0 auto;
  /* The displayed asset already carries a 4-module white margin, so the
     modal must not add another crop or the code can lose its quiet zone. */
}
.qrmodal__img img{display:block; width:100%; height:100%; border-radius:6px}
.qrmodal__hint{margin:18px 0 0; font-size:15.5px; color:#64748B}

.footer__bot{
  border-top:1px solid rgba(255,255,255,.1); padding:26px 0;
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
  font-size:15px;
}
.footer__bot nav{display:flex; gap:22px; flex-wrap:wrap}
.footer__bot a{color:#8FA6C4}
/* Right-aligned to sit opposite the copyright, and muted to the same grey as
   the links it replaces so the strip does not gain a second visual weight.
   Right-aligned on desktop and centred on narrow screens, matching the flex
   direction the media query already switches below. */
.footer__addr{
  margin:0; color:#8FA6C4; text-align:right; line-height:1.55;
  font-size:14.5px;
}

/* --------------------------------------------------------------------------
   24. Floating actions
   -------------------------------------------------------------------------- */
.fab{
  position:fixed; right:24px; bottom:24px; z-index:110;
  display:flex; flex-direction:column; gap:12px;
}
.fab a,.fab button{
  width:56px; height:56px; border-radius:50%; border:0; cursor:pointer;
  display:grid; place-items:center; box-shadow:var(--sh-3);
  transition:transform .2s cubic-bezier(.2,.7,.3,1), box-shadow .2s;
}
.fab a:hover,.fab button:hover{transform:translateY(-4px) scale(1.05); box-shadow:var(--sh-4)}
.fab svg{width:26px; height:26px}

/* Hover labels.

   The floating buttons are circles with no text, so on a desktop — where
   nobody can see an icon's meaning without hovering — the phone button and
   the quote button are indistinguishable from each other and from the mail
   icon they replaced. The label is drawn as a ::after on the button itself
   rather than as a child element, which keeps the markup free of a wrapper
   that would break the fixed column layout.

   Two details that are easy to get wrong:

   place-items:center on the button makes it a grid container, so a child
   would be centred inside the circle. ::after escapes that because it is not
   laid out as a grid item — it is positioned against the button's own box.

   The label sits to the left because the bar hugs the right edge of the
   viewport; to the right there is no room, and it would be clipped.

   On touch devices there is no hover, so the label is hidden rather than
   left to flash on tap. The aria-label carries the same information for
   screen readers, which is why every button still has one. */
.fab a::after,.fab button::after{
  content:attr(data-tip); position:absolute; right:calc(100% + 12px);
  top:50%; transform:translateY(-50%) translateX(6px);
  background:var(--navy-800); color:#fff; white-space:nowrap;
  padding:7px 12px; border-radius:8px; font-size:13px; font-weight:600;
  letter-spacing:.01em; line-height:1.3; pointer-events:none;
  opacity:0; visibility:hidden;
  transition:opacity .16s ease, transform .16s ease, visibility .16s;
  box-shadow:0 6px 18px rgba(10,30,56,.22);
}
.fab a{position:relative}
.fab button{position:relative}
.fab a:hover::after,.fab button:hover::after{
  opacity:1; visibility:visible; transform:translateY(-50%) translateX(0);
}
.fab a:focus-visible::after,.fab button:focus-visible::after{
  opacity:1; visibility:visible; transform:translateY(-50%) translateX(0);
}
@media (hover:none){ .fab a::after,.fab button::after{display:none} }

.fab__wa{background:#25D366; color:#fff}
.fab__tel{background:#0EA5E9; color:#fff}
.fab__mail{background:var(--blue-600); color:#fff}
/* The QR button is white with a navy glyph rather than a fifth brand colour:
   it is a way of reaching the same WhatsApp account as the button above it,
   and giving it its own colour would imply it leads somewhere different.
   The hairline keeps it from reading as a disabled control against the
   coloured circles. */
.fab__qr{background:#fff; color:var(--navy-800); box-shadow:var(--sh-3), inset 0 0 0 1px rgba(10,44,107,.14)}
.fab__qr svg{fill:currentColor; stroke:none}
.fab__top{background:var(--navy-800); color:#fff; opacity:0; visibility:hidden}
.fab__top.is-on{opacity:1; visibility:visible}

/* --------------------------------------------------------------------------
   25. Reveal animation
   -------------------------------------------------------------------------- */
.rv{opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1)}
.rv.is-in{opacity:1; transform:none}

/* --------------------------------------------------------------------------
   25b. Product catalogue
   -------------------------------------------------------------------------- */
/* Category pill bar (4 categories) */
.cats{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:18px; margin-bottom:56px;
}
.cat{
  position:relative; padding:26px 24px; border-radius:var(--r-lg);
  background:#fff; border:1.5px solid var(--line);
  display:flex; flex-direction:column; gap:14px;
  transition:all .22s cubic-bezier(.2,.7,.3,1);
}
.cat:hover{border-color:var(--blue-500); box-shadow:var(--sh-3); transform:translateY(-4px)}
.cat__ico{
  width:52px; height:52px; border-radius:var(--r-md);
  background:var(--bg-blue); color:var(--blue-600);
  display:grid; place-items:center;
}
.cat__ico svg{width:26px; height:26px}
.cat--accent .cat__ico{background:var(--accent-50); color:var(--accent)}
.cat--navy .cat__ico{background:#EEF2F7; color:var(--navy-700)}
.cat--green .cat__ico{background:var(--green-50); color:var(--green)}
.cat b{display:block; font-size:19.5px; color:var(--ink-900); font-weight:750; line-height:1.3}
.cat span{display:block; font-size:15px; color:var(--ink-500); font-weight:600}
.cat.is-on{background:var(--navy-800); border-color:var(--navy-800)}
.cat.is-on b{color:#fff}
.cat.is-on span{color:var(--blue-300)}
.cat.is-on .cat__ico{background:rgba(43,130,245,.18); color:var(--blue-300)}

/* Product grid — 4 columns × 3 rows */
.pgrid{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:22px;
}
.prod{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  overflow:hidden; display:flex; flex-direction:column;
  transition:all .24s cubic-bezier(.2,.7,.3,1);
}
.prod:hover{border-color:var(--blue-300); box-shadow:var(--sh-3); transform:translateY(-5px)}

/* Visual area — real catalogue photography */
.prod__vis{
  position:relative; aspect-ratio:1/1; overflow:hidden;
  background:#F4F6F9;
  display:grid; place-items:center;
}
.prod__vis img{width:100%; height:100%; object-fit:cover; transition:transform .5s}
.prod:hover .prod__vis img{transform:scale(1.06)}
/* Icon placeholder — kept as a graceful fallback if a photo is ever missing */
.prod__ph{display:grid; place-items:center; width:100%; height:100%; padding:24px}
.prod__ph svg{
  width:58px; height:58px; color:var(--ink-300);
  transition:color .24s ease, transform .3s cubic-bezier(.2,.7,.3,1);
}
.prod:hover .prod__ph svg{color:var(--blue-500); transform:scale(1.07)}

/* "Photo pending" tag — removed once a real image is supplied */
.prod__tag{
  position:absolute; top:12px; left:12px; z-index:1;
  font-family:var(--mono); font-size:10.5px; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase;
  padding:4px 9px; border-radius:var(--r-xs);
  background:rgba(255,255,255,.92); color:var(--ink-400);
  border:1px solid var(--line);
}
/* The catalogue images range from near-white to near-black, so a flat text
   colour cannot stay legible on all of them: rgba(15,23,42,.32) vanishes
   against a dark part. A small translucent pill keeps the number readable
   whatever the photo behind it does. */
.prod__n{
  position:absolute; top:10px; right:10px; z-index:1;
  padding:3px 7px; border-radius:5px;
  background:rgba(255,255,255,.82);
  box-shadow:0 1px 3px rgba(15,23,42,.14);
  font-family:var(--mono); font-size:12px; font-weight:800;
  color:rgba(15,23,42,.72); letter-spacing:.04em;
}

.prod__body{padding:20px 20px 22px; flex:1; display:flex; flex-direction:column}
.prod__body h3{font-size:18px; margin-bottom:8px; line-height:1.35}
.prod__body p{font-size:15px; color:var(--ink-600); margin-bottom:14px; flex:1; line-height:1.6}
.prod__meta{
  display:flex; flex-wrap:wrap; gap:6px;
  padding-top:13px; border-top:1px solid var(--line-soft);
}
.prod__meta span{
  font-family:var(--mono); font-size:11.5px; font-weight:700;
  color:var(--blue-700); background:var(--bg-blue);
  padding:3px 8px; border-radius:var(--r-xs);
}

/* Spec strip for a product category page */
.pspec{display:grid; grid-template-columns:repeat(4,1fr); gap:0}
.pspec__i{padding:0 28px; border-left:1px solid var(--line)}
.pspec__i:first-child{border-left:0; padding-left:0}
.pspec__i b{
  display:block; font-family:var(--mono); font-size:32px; font-weight:800;
  color:var(--blue-600); letter-spacing:-.03em;
}
.pspec__i span{display:block; font-size:15.5px; color:var(--ink-600); margin-top:6px; font-weight:600}

/* Applications list on product pages */
.appgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.app{
  display:flex; gap:14px; align-items:flex-start;
  padding:20px 22px; border-radius:var(--r-md);
  background:#fff; border:1px solid var(--line);
  transition:all .18s ease;
}
.app:hover{border-color:var(--blue-500); background:var(--bg-blue)}
.app svg{width:22px; height:22px; color:var(--green); flex:none; margin-top:2px}
.app b{display:block; font-size:16.5px; color:var(--ink-900); font-weight:700}
.app span{display:block; font-size:14.5px; color:var(--ink-500); margin-top:3px}

/* --------------------------------------------------------------------------
   25b-2. Product detail page — main column + product navigation sidebar
   --------------------------------------------------------------------------
   Two columns at 1fr / 340px. The sidebar holds all 48 products grouped by
   category, which is tall; it sticks while the main column scrolls so the
   visitor always has the rest of the catalogue within reach.

   Below 1080px the sidebar drops out of the flow and becomes a details
   disclosure at the top of the page. A 48-item list is not something to push
   below 5000px of product copy on a phone, and a disclosure keeps the whole
   navigation reachable without a scroll marathon. */
.pdl{display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:52px; align-items:start}

.pdl__main{min-width:0}

.pdl__fig{
  margin:0 0 30px; border-radius:var(--r-xl); overflow:hidden;
  background:var(--bg-soft); border:1px solid var(--line);
}
.pdl__fig img{display:block; width:100%; height:auto; aspect-ratio:1/1; object-fit:cover}
.pdl__fig figcaption{
  padding:14px 20px; font-size:14.5px; color:var(--ink-500);
  border-top:1px solid var(--line); background:#fff;
}

/* Standing disclaimer about the artwork.
   The catalogue images are representative rather than photographs of customer
   parts, and a B2B buyer needs to know that before drawing conclusions from
   the picture. Placed directly under the figure so it cannot be missed. */
.pdl__note{
  display:flex; gap:16px; align-items:flex-start;
  padding:22px 24px; border-radius:var(--r-lg); margin-bottom:44px;
  background:var(--accent-50); border:1px solid #FDE3C2;
}
.pdl__note svg{width:24px; height:24px; color:var(--accent); flex:none; margin-top:2px}
.pdl__note p{font-size:16px; color:#7A4B08; margin:0; line-height:1.6}
.pdl__note b{color:#5E3906; font-weight:800}

.pdl__sec{margin-bottom:52px}
.pdl__sec h2{
  font-size:30px; margin-bottom:16px; padding-bottom:14px;
  border-bottom:2px solid var(--line-soft);
}
.pdl__sec p{font-size:17.5px; line-height:1.75; color:var(--ink-600); margin-bottom:16px}
.pdl__sec p:last-child{margin-bottom:0}
.pdl__secLead{font-size:16.5px !important; color:var(--ink-500) !important; margin-bottom:22px !important}

/* Specification table. Two columns of label/value rows rather than a <table>:
   there is no tabular data here to align numerically, and a definition list
   reflows to a stacked layout on narrow screens without any extra markup. */
.pspec__list{
  border:1px solid var(--line); border-radius:var(--r-lg);
  overflow:hidden; background:#fff;
}
.pspec__row{
  display:grid; grid-template-columns:230px minmax(0,1fr);
  border-bottom:1px solid var(--line-soft);
}
.pspec__row:last-child{border-bottom:0}
.pspec__row:nth-child(even){background:var(--bg-soft)}
.pspec__row dt{
  padding:16px 22px; font-size:15px; font-weight:700; color:var(--ink-900);
  border-right:1px solid var(--line-soft);
}
.pspec__row dd{
  padding:16px 22px; margin:0; font-size:15.5px; color:var(--ink-600); line-height:1.6;
}

.pdl__apps{margin-bottom:0}

/* Related parts — four siblings, wrapped around the current product. */
.prel__grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
.prel{
  display:flex; flex-direction:column; gap:4px;
  padding:16px; border-radius:var(--r-md);
  background:#fff; border:1px solid var(--line);
  transition:all .2s ease;
}
.prel:hover{border-color:var(--blue-500); box-shadow:var(--sh-2); transform:translateY(-3px)}
.prel__thumb{
  display:block; aspect-ratio:1/1; border-radius:var(--r-sm);
  overflow:hidden; background:var(--bg-soft); margin-bottom:10px;
}
.prel__thumb img{width:100%; height:100%; object-fit:cover; transition:transform .4s}
.prel:hover .prel__thumb img{transform:scale(1.07)}
.prel b{font-size:15.5px; font-weight:700; color:var(--ink-900); line-height:1.35}
.prel i{
  font-family:var(--mono); font-size:11.5px; font-weight:700;
  color:var(--blue-600); letter-spacing:.01em;
}

/* Closing call to action, inside the main column. */
.pdl__cta{
  display:grid; grid-template-columns:1fr auto; gap:32px; align-items:center;
  padding:38px 40px; border-radius:var(--r-xl);
  background:var(--navy-800); color:#fff;
}
.pdl__cta h3{color:#fff; font-size:26px; margin-bottom:10px}
.pdl__cta p{color:#B4C8E2; font-size:17px; margin:0; max-width:520px; line-height:1.65}
.pdl__ctaBtns{display:flex; flex-direction:column; gap:11px}

/* ---- Sidebar: the 48-item product navigation ---- */
/* align-items:start is what the other two-column sections use, but here it is
   actively harmful: it collapses the sidebar to its own content height, and a
   sticky element can only travel inside its containing block. Stretching the
   column to match the main column (which is ~3400px) is what gives the nav
   room to stay on screen for the whole read. */
.pdl__side{min-width:0; align-self:stretch}
/* The nav lists all 48 products, which makes this box ~3400px tall — taller
   than the viewport and the same height as the main column. A sticky element
   can only travel inside its own containing block, so at that size it never
   moves: it just scrolls away with the page. Capping the height to the
   viewport and letting the list scroll inside turns it into a real sidebar
   that stays put for the whole read. */
.pnav__stick{
  position:sticky; top:calc(var(--header-h) + 20px);
  max-height:calc(100vh - var(--header-h) - 40px);
  display:flex; flex-direction:column;
}
/* Only the list scrolls; the "Products" header and the group titles stay put
   so the reader always knows which category they are in. */
.pnav__scroll{
  overflow-y:auto; overscroll-behavior:contain;
  min-height:0; flex:1 1 auto;
  scrollbar-width:thin;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 10px,#000 calc(100% - 14px),transparent 100%);
          mask-image:linear-gradient(to bottom,transparent 0,#000 10px,#000 calc(100% - 14px),transparent 100%);
}
.pnav__scroll::-webkit-scrollbar{width:6px}
.pnav__scroll::-webkit-scrollbar-thumb{background:var(--line); border-radius:3px}
.pnav__scroll::-webkit-scrollbar-track{background:transparent}

.pnav__head{
  display:flex; align-items:center; gap:13px;
  padding:18px 20px; border-radius:var(--r-lg) var(--r-lg) 0 0;
  background:var(--navy-800); color:#fff;
}
.pnav__headIco{
  width:38px; height:38px; border-radius:var(--r-sm); flex:none;
  background:rgba(43,130,245,.22); color:var(--blue-300); display:grid; place-items:center;
}
.pnav__headIco svg{width:19px; height:19px}
.pnav__head b{display:block; font-size:16.5px; font-weight:750; line-height:1.2}
.pnav__head i{
  display:block; font-style:normal; font-size:13px;
  color:#8FA6C4; font-weight:600; margin-top:2px;
}

.pnav__grp{border:1px solid var(--line); border-top:0}
.pnav__grp:first-of-type{border-top:0}
.pnav__grpHead{
  display:block; padding:12px 20px;
  font-size:13px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-500); background:var(--bg-soft);
  border-bottom:1px solid var(--line); transition:color .16s;
}
.pnav__grpHead:hover{color:var(--blue-600)}
.pnav__list{padding:5px}

.pnav__i{
  display:flex; align-items:center; gap:12px;
  padding:8px 10px; border-radius:var(--r-sm);
  transition:background .16s ease;
}
.pnav__i:hover{background:var(--bg-blue)}
.pnav__thumb{
  width:46px; height:46px; flex:none;
  border-radius:var(--r-xs); overflow:hidden; background:var(--bg-soft);
  border:1px solid var(--line-soft);
}
.pnav__thumb img{width:100%; height:100%; object-fit:cover}
.pnav__txt{min-width:0; flex:1}
.pnav__txt b{
  display:block; font-size:14.5px; font-weight:650; color:var(--ink-700);
  line-height:1.3; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.pnav__txt i{
  display:block; font-style:normal; font-family:var(--mono);
  font-size:11px; font-weight:700; color:var(--ink-400);
  margin-top:3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.pnav__i:hover .pnav__txt b{color:var(--blue-700)}
.pnav__i:hover .pnav__txt i{color:var(--blue-600)}

/* Current product. Navy fill plus a left rule, so the position in a 48-item
   list is visible at a glance without relying on colour alone. */
.pnav__i.is-on{background:var(--navy-800); box-shadow:inset 3px 0 0 var(--accent)}
.pnav__i.is-on .pnav__txt b{color:#fff; font-weight:750}
.pnav__i.is-on .pnav__txt i{color:var(--blue-300)}
.pnav__i.is-on .pnav__thumb{border-color:rgba(255,255,255,.22)}
.pnav__i.is-on:hover{background:var(--navy-800)}
.pnav__i.is-on:hover .pnav__txt b{color:#fff}

.pnav__help{
  padding:20px; border-radius:0 0 var(--r-lg) var(--r-lg);
  background:var(--bg-blue); border:1px solid var(--line); border-top:0;
}
.pnav__help p{font-size:14.5px; color:var(--ink-600); margin:0 0 10px; line-height:1.55}

/* Mobile fallback — a disclosure holding the same 48 links.
   Rendered from the same markup; only the wrapper element differs, which is
   why the panel below is closed by [hidden] rather than by display:none on a
   class (see the [hidden] rule in the reset — author display rules beat the
   UA sheet, so the attribute has to be given !important there). */
.pnav__mobile{display:none}
.pnav__mobile > summary{
  display:flex; align-items:center; gap:13px; cursor:pointer; list-style:none;
  padding:18px 20px; border-radius:var(--r-lg);
  background:var(--navy-800); color:#fff;
}
.pnav__mobile > summary::-webkit-details-marker{display:none}
.pnav__mobile[open] > summary{border-radius:var(--r-lg) var(--r-lg) 0 0}
/* The summary carries the same title/subtitle pair as the desktop head, but
   the b and i are inline by default, which folds "48 parts we manufacture"
   onto the title's line and clips it. Block them, and let the text column
   shrink so the row never collides with the floating action buttons. */
.pnav__mobile > summary b{display:block; font-size:15.5px; font-weight:750; line-height:1.25}
.pnav__mobile > summary i{
  display:block; font-style:normal; font-size:12.5px;
  color:#8FA6C4; font-weight:600; margin-top:2px;
}
.pnav__mobile > summary > span:last-child{min-width:0; flex:1 1 auto}

/* Compact hero for detail pages.
   The category pages use a 16:10 landscape photo in the hero; a product
   detail page already shows the part twice — once in the hero and once in the
   main column — so the hero art is dropped rather than repeated. */
.phero--compact{padding:64px 0 70px}
.phero--compact .phero__in{grid-template-columns:1fr}
.phero--compact .phero__art{display:none}
.phero--compact h1{font-size:46px}
.phero__btns{display:flex; flex-wrap:wrap; gap:14px; margin-top:30px}

/* Clickable product card on the category pages.
   The link sits on the h3 so it carries real link text; the ::after overlay
   stretches it across the whole card, which keeps the entire surface
   clickable without nesting the card's contents inside an anchor. */
.prod--link{position:relative}
.prod__link{color:inherit}
.prod__link::after{content:""; position:absolute; inset:0; z-index:2}
.prod--link:hover .prod__link{color:var(--blue-700)}
/* The overlay swallows pointer events for the text beneath it, so the spec
   chips have to sit above it or they cannot be selected. */
.prod--link .prod__meta,.prod--link .prod__go{position:relative; z-index:3}
.prod__go{
  display:inline-flex; align-items:center; gap:7px; margin-top:14px;
  font-size:14px; font-weight:700; color:var(--blue-600);
  opacity:0; transform:translateX(-4px); transition:all .22s ease;
}
.prod__go svg{width:16px; height:16px; flex:none}
.prod--link:hover .prod__go{opacity:1; transform:none}
/* Touch devices never get a hover, so the affordance has to be permanent
   there or it is simply not shown. */
@media (hover:none){
  .prod__go{opacity:1; transform:none}
}

@media (max-width:1080px){
  .pdl{grid-template-columns:1fr; gap:36px}
  /* Both copies of the 48-item catalogue exist in the markup so the sidebar
     markup stays identical across breakpoints; only one is ever visible. */
  .pdl__side{display:none}
  .pnav__mobile{display:block; margin-bottom:34px}
  .pnav__mobile .pnav__grp{border-top:1px solid var(--line)}
  .pnav__mobile .pnav__grp:first-of-type{border-top:0}
  .pnav__mobile .pnav__help{border-top:1px solid var(--line); border-radius:0 0 var(--r-lg) var(--r-lg)}
  .pdl__cta{grid-template-columns:1fr; gap:26px}
  .pdl__ctaBtns{flex-direction:row; flex-wrap:wrap}
}
@media (max-width:760px){
  .pdl__sec h2{font-size:25px}
  .pdl__sec p{font-size:16.5px; line-height:1.7}
  .pdl__sec{margin-bottom:42px}
  .pspec__row{grid-template-columns:1fr}
  .pspec__row dt{
    padding-bottom:0; border-right:0;
    font-size:13px; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-500);
  }
  .pspec__row dd{padding-top:5px}
  .prel__grid{grid-template-columns:repeat(2,1fr); gap:12px}
  .pdl__cta{padding:28px 24px}
  .pdl__cta h3{font-size:22px}
  .pdl__cta p{font-size:15.5px}
  .phero--compact{padding:48px 0 54px}
  .phero--compact h1{font-size:34px}
  .phero--compact p{font-size:17px}
}

/* --------------------------------------------------------------------------
   25c. News
   -------------------------------------------------------------------------- */
/* Featured article */
.nfeat{
  display:grid; grid-template-columns:1.15fr .85fr; gap:0;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-xl);
  overflow:hidden; margin-bottom:52px;
  transition:all .24s cubic-bezier(.2,.7,.3,1);
}
.nfeat:hover{border-color:var(--blue-300); box-shadow:var(--sh-3)}
.nfeat__thumb{position:relative; aspect-ratio:16/10; overflow:hidden; background:var(--bg-soft)}
.nfeat__thumb img{width:100%; height:100%; object-fit:cover; transition:transform .5s}
.nfeat:hover .nfeat__thumb img{transform:scale(1.05)}
.nfeat__body{padding:40px 38px; display:flex; flex-direction:column; justify-content:center}
.nfeat__body h3{font-size:28px; margin-bottom:14px; line-height:1.28}
.nfeat__body p{font-size:17px; color:var(--ink-600); margin-bottom:22px}

/* Category filter pills */
.nfilters{
  display:flex; gap:10px; flex-wrap:wrap; justify-content:center;
  margin-bottom:44px;
}
.nfilter{
  display:inline-flex; align-items:center; gap:9px;
  padding:12px 24px; border-radius:var(--r-full);
  border:1.5px solid var(--line); background:#fff;
  font-size:16.5px; font-weight:700; color:var(--ink-600);
  cursor:pointer; transition:all .18s ease;
}
.nfilter svg{width:17px; height:17px}
.nfilter.is-on{background:var(--navy-800); border-color:var(--navy-800); color:#fff}
.nfilter b{
  font-family:var(--mono); font-size:12.5px; font-weight:800;
  opacity:.6; margin-left:2px;
}

/* News card */
.ncard{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  overflow:hidden; display:flex; flex-direction:column;
  transition:all .24s cubic-bezier(.2,.7,.3,1);
}
.ncard:hover{border-color:var(--blue-300); box-shadow:var(--sh-3); transform:translateY(-5px)}
.ncard__thumb{position:relative; aspect-ratio:16/9; overflow:hidden; background:var(--bg-soft)}
.ncard__thumb img{width:100%; height:100%; object-fit:cover; transition:transform .5s}
.ncard:hover .ncard__thumb img{transform:scale(1.05)}
/* An article with no cover. Rendered instead of <img src=""> because the
   browser resolves an empty src to the current page URL, requests the HTML as
   an image, and draws a broken-image icon with the alt text spilling out.

   This block must stay after .nfeat__thumb and .ncard__thumb: those set
   `background` at the same specificity, so whichever comes last wins, and
   putting it earlier silently loses the gradient. */
.nfeat__thumb--none, .ncard__thumb--none{
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, var(--navy-900), var(--navy-700));
}
.nfeat__thumb__ph, .ncard__thumb__ph{
  font-size:64px; font-weight:800; line-height:1; letter-spacing:-.02em;
  color:rgba(255,255,255,.16); user-select:none;
}
.ncard__thumb__ph{font-size:40px}
.ncard__body{padding:24px 24px 26px; flex:1; display:flex; flex-direction:column}
.ncard__meta{
  display:flex; align-items:center; gap:12px; margin-bottom:13px;
  font-size:14px; font-weight:650; color:var(--ink-400);
}
.ncard__cat{
  padding:4px 11px; border-radius:var(--r-full);
  background:var(--bg-blue); color:var(--blue-700); font-weight:750; font-size:13px;
}
.ncard__body h3{font-size:20px; margin-bottom:11px; line-height:1.4}
.ncard__body p{font-size:16px; color:var(--ink-600); margin-bottom:18px; flex:1}
.ncard__more{
  display:inline-flex; align-items:center; gap:7px;
  font-size:15.5px; font-weight:750; color:var(--blue-600);
  padding-top:16px; border-top:1px solid var(--line-soft);
}
.ncard__more svg{width:16px; height:16px; transition:transform .2s}
.ncard:hover .ncard__more svg{transform:translateX(4px)}

/* --------------------------------------------------------------------------
   25d. Industry detail pages
   -------------------------------------------------------------------------- */
/* Why-choose-us trio (numbered /01 /02 /03) */
.why3{display:grid; grid-template-columns:repeat(3,1fr); gap:26px}
.why3__i{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  padding:34px 30px; position:relative; overflow:hidden;
  transition:all .24s cubic-bezier(.2,.7,.3,1);
}
.why3__i:hover{border-color:var(--blue-300); box-shadow:var(--sh-3); transform:translateY(-5px)}
.why3__n{
  position:absolute; top:20px; right:24px;
  font-family:var(--mono); font-size:34px; font-weight:800;
  color:var(--blue-100); letter-spacing:-.04em; line-height:1;
}
.why3__ico{
  width:56px; height:56px; border-radius:var(--r-md); margin-bottom:22px;
  background:var(--bg-blue); color:var(--blue-600); display:grid; place-items:center;
}
.why3__ico svg{width:27px; height:27px}
.why3__i h3{font-size:22px; margin-bottom:12px; padding-right:56px}
.why3__i p{font-size:16.5px; color:var(--ink-600); margin:0}

/* Stage flow — prototyping → production (5 stages) */
.stages{display:grid; gap:0}
.stage{
  display:grid; grid-template-columns:88px 1fr; gap:30px;
  padding:34px 0; border-top:1px solid var(--line); align-items:start;
}
.stage:last-child{border-bottom:1px solid var(--line)}
.stage__n{
  width:72px; height:72px; border-radius:50%;
  background:var(--navy-800); color:#fff;
  display:grid; place-items:center;
  font-family:var(--mono); font-size:19px; font-weight:800; letter-spacing:.02em;
}
.stage__body h3{font-size:24px; margin-bottom:12px}
.stage__body>p{font-size:17px; color:var(--ink-600); margin-bottom:16px}
.stage__pts{display:grid; grid-template-columns:repeat(2,1fr); gap:9px 24px}
.stage__pts li{
  display:flex; gap:11px; align-items:flex-start;
  font-size:16.5px; color:var(--ink-700); font-weight:600;
}
.stage__pts svg{width:20px; height:20px; flex:none; color:var(--green); margin-top:2px}

/* Service grid (links to product pages) */
.svcgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
.svc{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  padding:30px 28px; display:flex; flex-direction:column;
  transition:all .24s cubic-bezier(.2,.7,.3,1); color:inherit;
}
.svc:hover{border-color:var(--blue-500); box-shadow:var(--sh-3); transform:translateY(-5px)}
.svc__ico{
  width:50px; height:50px; border-radius:var(--r-md); margin-bottom:20px;
  background:var(--bg-blue); color:var(--blue-600); display:grid; place-items:center;
}
.svc__ico svg{width:24px; height:24px}
.svc h3{font-size:21px; margin-bottom:11px}
.svc p{font-size:16px; color:var(--ink-600); margin-bottom:18px; flex:1}
.svc__go{
  display:inline-flex; align-items:center; gap:7px;
  font-size:15.5px; font-weight:750; color:var(--blue-600);
  padding-top:16px; border-top:1px solid var(--line-soft);
}
.svc__go svg{width:16px; height:16px; transition:transform .2s}
.svc:hover .svc__go svg{transform:translateX(4px)}

/* Materials split (two panels side by side) */
.matsplit{display:grid; grid-template-columns:1fr 1fr; gap:24px}
.matpanel{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  padding:32px 30px;
}
.matpanel h3{
  display:flex; align-items:center; gap:11px;
  font-size:21px; margin-bottom:18px;
}
.matpanel h3 svg{width:22px; height:22px; color:var(--blue-600); flex:none}
.matpanel__list li{
  display:flex; gap:12px; align-items:baseline;
  padding:9px 0; font-size:16.5px; color:var(--ink-700);
  border-top:1px solid var(--line-soft);
}
.matpanel__list li:first-child{border-top:0}
.matpanel__list b{font-family:var(--mono); font-size:14.5px; color:var(--blue-700); flex:none}
.matpanel__ft{margin-top:20px; padding-top:16px; border-top:1px solid var(--line-soft)}

/* Application bullet list */
.applist{display:grid; grid-template-columns:repeat(2,1fr); gap:14px 34px}
.applist li{
  display:flex; gap:14px; align-items:flex-start;
  font-size:18px; color:var(--ink-700); font-weight:600;
}
.applist svg{width:22px; height:22px; flex:none; color:var(--blue-600); margin-top:2px}

/* Cross-links to sibling industries */
.indlinks{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
.indlink{
  display:flex; align-items:center; gap:13px;
  padding:18px 20px; border-radius:var(--r-md);
  background:#fff; border:1px solid var(--line);
  font-size:16.5px; font-weight:700; color:var(--ink-900);
  transition:all .18s ease;
}
.indlink:hover{border-color:var(--blue-500); background:var(--bg-blue); color:var(--blue-700)}
.indlink svg{width:20px; height:20px; color:var(--ink-400); flex:none; transition:color .18s}
.indlink:hover svg{color:var(--blue-600)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rv{opacity:1; transform:none; transition:none}
  *{animation-duration:.01ms !important; transition-duration:.01ms !important}
}

/* --------------------------------------------------------------------------
   25e. Service (capability) detail pages
   -------------------------------------------------------------------------- */
/* Pain-point cards — "Do you have these troubles?" */
.pains{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.pain{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  padding:30px 28px; transition:all .22s cubic-bezier(.2,.7,.3,1);
  display:flex; flex-direction:column;
}
.pain:hover{border-color:var(--blue-300); box-shadow:var(--sh-3); transform:translateY(-4px)}
.pain__q{
  display:flex; align-items:flex-start; gap:13px; margin-bottom:16px;
}
.pain__q svg{
  width:24px; height:24px; flex:none; margin-top:1px;
  color:var(--accent); fill:var(--accent);
}
.pain h3{font-size:20px; margin-bottom:11px; line-height:1.4}
.pain p{font-size:16px; color:var(--ink-600); margin:0}

/* Sub-process grid (one-stop service) */
.procgrid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px}
.proc{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  padding:28px 24px; transition:all .22s cubic-bezier(.2,.7,.3,1);
  position:relative; overflow:hidden; color:inherit; display:block;
}
.proc:hover{border-color:var(--blue-500); box-shadow:var(--sh-3); transform:translateY(-5px)}
.proc__ico{
  width:48px; height:48px; border-radius:var(--r-md); margin-bottom:18px;
  background:var(--bg-blue); color:var(--blue-600); display:grid; place-items:center;
}
.proc__ico svg{width:24px; height:24px}
.proc h3{font-size:18.5px; margin-bottom:10px}
.proc p{font-size:15px; color:var(--ink-600); margin:0; line-height:1.6}
.proc__n{
  position:absolute; top:16px; right:20px;
  font-family:var(--mono); font-size:13px; font-weight:800;
  color:var(--ink-300); letter-spacing:.03em;
}

/* Material library (METAL / PLASTIC tab panels) */
.mlib{display:grid; grid-template-columns:repeat(2,1fr); gap:18px}
.mlibitem{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-md);
  padding:24px 24px 22px;
}
.mlibitem h3{
  font-size:19px; margin-bottom:8px; color:var(--ink-900);
  display:flex; align-items:center; gap:10px;
}
.mlibitem h3 svg{width:19px; height:19px; color:var(--blue-600); flex:none}
.mlibitem>p{font-size:15px; color:var(--ink-600); margin-bottom:14px; line-height:1.6}
.mliballoys{
  display:flex; flex-wrap:wrap; gap:7px;
  padding-top:14px; border-top:1px solid var(--line-soft);
}
.mliballoys li{
  font-family:var(--mono); font-size:12px; font-weight:700;
  color:var(--blue-700); background:var(--bg-blue);
  padding:4px 9px; border-radius:var(--r-xs);
}

/* Equipment list */
.eqlist{display:grid; grid-template-columns:repeat(2,1fr); gap:18px}
.eq{
  display:flex; gap:18px; align-items:flex-start;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  padding:26px 26px;
}
.eq__ico{
  width:48px; height:48px; border-radius:var(--r-md); flex:none;
  background:#EEF2F7; color:var(--navy-700); display:grid; place-items:center;
}
.eq__ico svg{width:24px; height:24px}
.eq h3{font-size:18.5px; margin-bottom:7px}
.eq p{font-size:15.5px; color:var(--ink-600); margin:0; line-height:1.6}
.eq span{
  display:inline-block; font-family:var(--mono); font-size:12.5px;
  font-weight:700; color:var(--ink-400); margin-top:8px; letter-spacing:.03em;
}

/* Surface-treatment numbered grid */
.fingrid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px}
.fin{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-md);
  padding:20px 20px 18px; transition:all .18s ease;
}
.fin:hover{border-color:var(--blue-500); box-shadow:var(--sh-2)}
.fin__n{
  font-family:var(--mono); font-size:13px; font-weight:800;
  color:var(--blue-600); letter-spacing:.04em; margin-bottom:9px; display:block;
}
.fin b{display:block; font-size:16.5px; color:var(--ink-900); font-weight:700; line-height:1.35}
.fin span{display:block; font-size:14px; color:var(--ink-500); margin-top:6px; line-height:1.5}

/* Order steps (compact 5-step) */
.osteps,.ostep-wrap{display:grid; grid-template-columns:repeat(5,1fr); gap:0; position:relative}
.osteps::before,.ostep-wrap::before{
  content:""; position:absolute; top:40px; left:10%; right:10%;
  height:2px; background:repeating-linear-gradient(90deg,var(--blue-300) 0 9px,transparent 9px 18px);
}
.ostep{position:relative; z-index:1; text-align:center; padding:0 18px}
.ostep__n{
  width:64px; height:64px; margin:0 auto 20px; border-radius:50%;
  background:var(--navy-800); color:#fff;
  display:grid; place-items:center;
  font-family:var(--mono); font-size:16px; font-weight:800;
  box-shadow:0 0 0 7px var(--bg);
}
.ostep h3{font-size:18px; margin-bottom:9px}
.ostep p{font-size:15px; color:var(--ink-600); margin:0}

/* Commitment / callout band */
.commit{
  background:var(--navy-800); border-radius:var(--r-xl);
  padding:52px 48px; color:#fff; text-align:center;
  position:relative; overflow:hidden;
}
.commit::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(600px 300px at 50% 0%, rgba(43,130,245,.26), transparent 70%);
}
.commit__ico{
  width:64px; height:64px; margin:0 auto 22px; border-radius:50%;
  background:rgba(43,130,245,.18); color:var(--blue-300);
  display:grid; place-items:center; position:relative;
}
.commit__ico svg{width:32px; height:32px}
.commit h3{color:#fff; font-size:28px; margin-bottom:16px; position:relative}
.commit p{color:#B4C8E2; font-size:18px; max-width:720px; margin:0 auto 30px; position:relative}

/* --------------------------------------------------------------------------
   25f. About page — mirrors the pf898.com/company structure
   -------------------------------------------------------------------------- */
/* Six-across fact bar. The reference site carries six numbers, not four, and
   46px digits do not survive a sixth column — hence the size override. */
.statbar__grid--6{grid-template-columns:repeat(6,1fr)}
.statbar__grid--6 .stat{padding:38px 22px}
.statbar__grid--6 .stat__n{font-size:36px}
.statbar__grid--6 .stat__l{font-size:15.5px}
.statbar__grid--6 .stat__d{font-size:13.5px}

/* Factory photo wall — one lead shot plus satellites. The lead spans two
   columns and two rows so the block reads as a documentary spread rather
   than a uniform catalogue grid. */
.shotgrid{
  display:grid; grid-template-columns:repeat(3,1fr);
  grid-auto-rows:238px; gap:18px;
}
.shotgrid--4{grid-template-columns:repeat(4,1fr)}
.shotgrid figure{
  margin:0; border-radius:var(--r-lg); overflow:hidden; position:relative;
  background:var(--bg-soft); grid-column:span 1; grid-row:span 1;
}
.shotgrid img{width:100%; height:100%; object-fit:cover; transition:transform .5s}
.shotgrid figure:hover img{transform:scale(1.06)}
.shotgrid figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:38px 20px 15px;
  font-size:14.5px; font-weight:700; color:#fff;
  background:linear-gradient(180deg,transparent,rgba(4,16,31,.88));
}
/* Declared after `.shotgrid figure` so the 2x2 span is not overridden by the
   span 1 default above. */
.shotgrid .shotgrid__lead{grid-column:span 2; grid-row:span 2}
.shotgrid__lead figcaption{font-size:17px; padding:48px 26px 20px}

/* Corporate culture — MISSION / VALUES / VISION as text panels */
.cult3{display:grid; grid-template-columns:repeat(3,1fr); gap:24px}
.cult{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  padding:34px 30px; display:flex; flex-direction:column; height:100%;
  border-top:4px solid var(--blue-600);
  transition:transform .24s cubic-bezier(.2,.7,.3,1), box-shadow .24s, border-color .24s;
}
.cult:hover{transform:translateY(-5px); box-shadow:var(--sh-3); border-top-color:var(--accent)}
.cult__k{
  display:inline-block; align-self:flex-start; margin-bottom:16px;
  font-family:var(--mono); font-size:12.5px; font-weight:800; letter-spacing:.16em;
  color:var(--blue-600); background:var(--bg-blue);
  padding:7px 14px; border-radius:var(--r-xs);
}
.cult h3{font-size:23px; margin-bottom:12px}
.cult p{font-size:17px; color:var(--ink-600); margin:0}

/* Honours — the certificate is shown as a framed print, not a thumbnail */
.honor{display:grid; grid-template-columns:400px 1fr; gap:60px; align-items:center}
.honor__cert{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-xl);
  padding:24px; box-shadow:var(--sh-3);
}
.honor__cert img{width:100%; height:auto; border-radius:var(--r-md)}
.honor__txt h2{font-size:40px; margin-bottom:20px}
.honor__txt p{font-size:18.5px; color:var(--ink-600)}

/* Team wall — real shop-floor photography, 3 across */
.teamgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.teamgrid figure{
  margin:0; border-radius:var(--r-lg); overflow:hidden; position:relative;
  aspect-ratio:4/3; background:var(--bg-soft);
}
.teamgrid img{width:100%; height:100%; object-fit:cover; transition:transform .5s}
.teamgrid figure:hover img{transform:scale(1.06)}
.teamgrid figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:38px 22px 16px;
  font-size:15px; font-weight:700; color:#fff;
  background:linear-gradient(180deg,transparent,rgba(4,16,31,.88));
}

/* --------------------------------------------------------------------------
   25b. Product pagination

   Sits above the responsive section on purpose: the mobile rules below need
   to be able to override the row layout here, and a later section always wins
   at equal specificity.
   -------------------------------------------------------------------------- */
.pager{
  display:flex; align-items:center; justify-content:center;
  flex-wrap:wrap; gap:14px; margin-top:44px;
}
.pager__nums{display:flex; align-items:center; gap:8px}
.pager__btn,.pager__num{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:46px; border:1px solid var(--line); border-radius:var(--r-sm);
  background:#fff; color:var(--navy-900); cursor:pointer;
  font:inherit; font-size:14.5px; font-weight:700;
  transition:background .18s, border-color .18s, color .18s, transform .18s;
}
.pager__btn{padding:0 20px}
.pager__num{width:46px; padding:0; font-variant-numeric:tabular-nums}
.pager__btn svg{width:17px; height:17px; flex:none}

.pager__btn:hover:not(:disabled),
.pager__num:hover{border-color:var(--blue-600); color:var(--blue-700)}
.pager__btn:active:not(:disabled),.pager__num:active{transform:translateY(1px)}

/* The active page is filled navy rather than outlined, so the current
   position reads at a glance from across the grid. */
.pager__num.is-on{
  background:var(--navy-800); border-color:var(--navy-800); color:#fff;
  box-shadow:0 4px 14px rgba(10,44,107,.18);
}
/* Disabled rather than hidden: a Previous button that disappears shifts the
   whole row sideways on click, which is disorienting. */
.pager__btn:disabled{opacity:.36; cursor:not-allowed}
.pager__btn:focus-visible,.pager__num:focus-visible{
  outline:2px solid var(--blue-600); outline-offset:2px;
}

/* Announces the visible range for screen readers, and stays visible on
   screen too — "Page 2 of 2" is more use to a sighted reader than the
   buttons alone. */
.pager__status{
  margin:14px 0 0; text-align:center;
  font-size:13.5px; font-weight:600; color:var(--text-soft);
}

/* Cards on a non-first page start hidden, which is what the hidden attribute
   in the pager script sets. Without JS they all stay visible, so the
   catalogue still works and every product remains reachable. */
.pgrid > [hidden]{display:none}

/* --------------------------------------------------------------------------
   25c. Process infographic at the foot of every product page

   The source is a tall portrait JPEG (1168x2184). Shown at its natural aspect
   inside a capped column so it reads as a document to scroll through rather
   than a banner stretched across the page, and lazy-loaded because it sits
   below roughly 3000px of content on every one of the 96 pages.
   -------------------------------------------------------------------------- */
.pflow{margin:0 0 34px; padding-top:34px; border-top:1px solid var(--line)}
.pflow h2{margin-bottom:8px}
.pflow__lead{margin:0 0 22px; color:var(--text-soft); font-size:16.5px}
.pflow img{
  display:block; width:100%; height:auto; margin:0 auto;
  max-width:560px; border-radius:var(--r-lg);
  border:1px solid var(--line); background:#fff;
}

/* On a phone the image is already full-width, so drop the frame and let the
   page gutter do the work. */
@media (max-width:760px){
  .pflow{padding-top:28px; margin-bottom:28px}
  .pflow img{border-radius:var(--r-md); border:0}
}

/* --------------------------------------------------------------------------
   26. Responsive
   -------------------------------------------------------------------------- */
/* 8 nav items + 2 CTAs need the compact bar well before the 1180 breakpoint */
@media (max-width:1400px){
  .header__actions .btn--ghost{display:none}
  .header__actions .btn{padding:12px 17px; font-size:15px}
  .pgrid{grid-template-columns:repeat(3,1fr)}
}

@media (max-width:1180px){
  :root{--gutter:24px}
  h1{font-size:52px}
  h2{font-size:38px}
  .hero h1{font-size:54px}
  .phero h1{font-size:44px}
  .hero__in{gap:44px}
  .matgrid{grid-template-columns:repeat(3,1fr)}
  .footer__top{grid-template-columns:1.4fr 1fr 1fr; gap:40px}
  .footer__brand{grid-column:1/-1}
}

/* The 8-item bar needs the burger well before the CTA is pushed out.
   Measured intrinsic need: 152 logo + 865 nav (8 items, 10px gaps) + 158 CTA
   + 24 flex gaps = ~1199px, and the container adds its own gutter on top.
   At 1080 the CTA was already clipped 8px wide and the page gained a
   horizontal scrollbar, so the switch-over moves to 1200. */
@media (max-width:1200px){
  .nav{display:none}
  .burger{display:flex}
}

@media (max-width:1024px){
  :root{--header-h:70px}
  h1{font-size:44px}
  h2{font-size:32px}
  .section{padding:76px 0}
  .sec-head{margin-bottom:46px}
  .header__actions .btn--ghost{display:none}
  .hero{padding-top:64px}
  .hero h1{font-size:44px}
  .hero__in,.split,.quoteband__in,.phero__in,.ctastrip__in{grid-template-columns:1fr; gap:44px}
  .hero__visual{max-width:560px; margin:0 auto}
  .split--rev .split__art{order:0}
  .split__art{max-width:620px}
  .phero__art{max-width:640px}
  .ctastrip__btns{justify-content:flex-start}
  .grid-4,.statbar__grid,.spec__grid,.qa,.steps,.matgrid,.gal{grid-template-columns:repeat(2,1fr)}
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .grid-5{grid-template-columns:repeat(2,1fr)}
  .steps::before{display:none}
  .stat:nth-child(2){border-right:0}
  .stat__n{font-size:38px}
  .spec__i:nth-child(3){border-left:0; padding-left:0}
  .spec__i:nth-child(-n+2){padding-bottom:32px}
  .spec__i:nth-child(n+3){padding-top:32px}
  .tst__slide{flex-basis:calc((100% - 26px)/2)}
  .footer__top{grid-template-columns:1fr 1fr; gap:36px}
  /* Product catalogue */
  .pgrid{grid-template-columns:repeat(3,1fr)}
  .cats{grid-template-columns:repeat(2,1fr)}
  .pspec{grid-template-columns:repeat(2,1fr)}
  .pspec__i{padding:20px 24px}
  .pspec__i:nth-child(odd){border-left:0; padding-left:0}
  /* News */
  .nfeat{grid-template-columns:1fr}
  .nfeat__thumb{aspect-ratio:16/9}
  /* Industry detail */
  .why3{grid-template-columns:repeat(3,1fr)}
  .stage__pts{grid-template-columns:repeat(2,1fr)}
  .svcgrid{grid-template-columns:repeat(2,1fr)}
  .matsplit{grid-template-columns:1fr 1fr}
  .applist{grid-template-columns:1fr 1fr}
  .indlinks{grid-template-columns:repeat(2,1fr)}
  /* Service detail */
  .pains{grid-template-columns:repeat(2,1fr)}
  .procgrid{grid-template-columns:repeat(3,1fr)}
  .eqlist{grid-template-columns:1fr}
  .fingrid{grid-template-columns:repeat(3,1fr)}
  .ostep__n{width:52px; height:52px; font-size:14px}
  .ostep{padding:0 10px}
  .ostep h3{font-size:16.5px}
  .ostep p{font-size:14px}
  .commit{padding:44px 36px}
  /* About page */
  .statbar__grid--6{grid-template-columns:repeat(3,1fr)}
  .statbar__grid--6 .stat:nth-child(2){border-right:1px solid rgba(255,255,255,.11)}
  .statbar__grid--6 .stat:nth-child(3n){border-right:0}
  .cult3{grid-template-columns:repeat(3,1fr); gap:18px}
  .cult h3{font-size:20px}
  .cult p{font-size:15.5px}
  .honor{grid-template-columns:320px 1fr; gap:40px}
  .teamgrid{grid-template-columns:repeat(2,1fr)}
  .shotgrid{grid-template-columns:repeat(3,1fr); grid-auto-rows:210px; gap:14px}
  .shotgrid--4{grid-template-columns:repeat(3,1fr)}
  .shotgrid .shotgrid__lead{grid-column:span 2; grid-row:span 2}
  .shotgrid figcaption{font-size:13.5px; padding:32px 16px 12px}
  .shotgrid__lead figcaption{font-size:15.5px; padding:40px 20px 16px}
}

@media (max-width:760px){
  :root{--gutter:20px; --header-h:66px; --topbar-h:40px}
  body{font-size:17px}
  h1{font-size:33px}
  h2{font-size:27px}
  h3{font-size:22px}
  /* The pager wraps to two rows on a phone: page numbers stay on the first
     line with Previous/Next beneath, so nothing is squeezed to a 40px target. */
  .pager{gap:12px; margin-top:34px}
  .pager__nums{order:-1; width:100%; justify-content:center}
  .pager__btn{min-height:50px; padding:0 22px; font-size:15.5px}
  .pager__num{width:50px; min-height:50px; font-size:15.5px}
  .pager__status{font-size:13px}
  .section{padding:58px 0}
  .section--tight{padding:48px 0}
  .sec-head{margin-bottom:38px}
  .sec-head p{font-size:17.5px}
  .sec-head__eyebrow{font-size:12.5px}
  .sec-div h2{font-size:26px}

  /* Topbar — keep phone + quote link only */
  .topbar__items li:not(:first-child){display:none}
  .topbar__links a:first-child,.topbar__links span{display:none}
  .topbar__links{gap:12px; font-size:12.5px}
  .topbar__links a{font-weight:700}
  .topbar__items{font-size:12.5px}
  .topbar__items svg{width:13px; height:13px}

  /* Header — logo shrink + compact CTA so burger is always visible */
  .header__in{gap:10px}
  .logo__img{height:32px}
  .header__actions{gap:8px; margin-left:auto}
  /* Override the generic .btn{width:100%} below — must come before it in source order */
  .header__actions .btn--primary{width:auto; flex:none; font-size:13.5px; padding:10px 13px; gap:6px}
  .header__actions .btn--primary svg{width:16px; height:16px}
  .burger{width:42px; height:42px; flex:none; display:flex}
  /* Mobile menu sits below sticky header */
  #pfMobile > .mm{top:106px !important; max-height:calc(100vh - 106px)}

  /* Hero */
  .hero{padding-top:46px}
  .hero h1{font-size:33px; letter-spacing:-.018em}
  .hero__lead{font-size:18px}
  .hero__in{padding-bottom:60px; gap:36px}
  .hero__cta .btn,.hero__cta .link-arrow{width:100%}
  .hero__chips span{font-size:14px; padding:9px 16px}
  .hero__trust{gap:22px}
  .hero__strip ul{grid-template-columns:repeat(2,1fr)}
  .hero__strip li{border-right:1px solid rgba(255,255,255,.11); padding:22px 20px}
  .hero__strip b{font-size:27px}

  /* Page hero */
  .phero{padding:34px 0 50px}
  .phero h1{font-size:31px}
  .phero p{font-size:17.5px}
  .crumb{font-size:13.5px; margin-bottom:16px}

  /* Grids → single column */
  .grid-2,.grid-3,.grid-4,.grid-5,.statbar__grid,.spec__grid,
  .steps,.matgrid,.gal{grid-template-columns:1fr}
  .qa{grid-template-columns:1fr}
  .tst__slide{flex-basis:100%}
  .frow2{grid-template-columns:1fr; gap:0}
  .statbar__grid{grid-template-columns:repeat(2,1fr)}

  /* Product catalogue */
  .pgrid{grid-template-columns:repeat(2,1fr); gap:14px}
  .cats{grid-template-columns:1fr; gap:12px; margin-bottom:38px}
  .cat{padding:20px 20px; gap:11px; flex-direction:row; align-items:center}
  .cat__ico{width:44px; height:44px; flex:none}
  .cat__ico svg{width:22px; height:22px}
  .cat b{font-size:17.5px}
  .cat span{font-size:14px}
  .prod__vis{aspect-ratio:4/3}
  .prod__ph svg{width:42px; height:42px}
  .prod__tag{font-size:9.5px; top:8px; left:8px; padding:3px 7px}
  .prod__n{top:7px; right:7px; font-size:11px; padding:2px 6px}
  .prod__body{padding:15px 15px 17px}
  .prod__body h3{font-size:16px; margin-bottom:6px}
  .prod__body p{font-size:13.5px; margin-bottom:11px; line-height:1.55}
  .prod__meta{padding-top:10px; gap:5px}
  .prod__meta span{font-size:10.5px; padding:2px 6px}
  .pspec{grid-template-columns:1fr}
  .pspec__i{padding:14px 0; border-left:0}
  .pspec__i:first-child{padding-top:0}
  .pspec__i b{font-size:27px}
  .appgrid{grid-template-columns:1fr; gap:12px}
  .app{padding:16px 18px}

  /* News */
  .nfeat{border-radius:var(--r-lg)}
  .nfeat__body{padding:26px 22px}
  .nfeat__body h3{font-size:22px}
  .nfeat__body p{font-size:16px}
  .nfilters{flex-wrap:nowrap; overflow-x:auto; justify-content:flex-start;
    scrollbar-width:none; padding-bottom:6px}
  .nfilters::-webkit-scrollbar{display:none}
  .nfilter{flex:none; font-size:15.5px; padding:11px 18px}
  .ncard__body{padding:19px 18px 21px}
  .ncard__body h3{font-size:18px}
  .ncard__body p{font-size:15px}

  /* Industry detail */
  .why3{grid-template-columns:1fr; gap:14px}
  .why3__i{padding:26px 24px}
  .why3__n{font-size:28px; top:16px; right:20px}
  .why3__ico{width:48px; height:48px; margin-bottom:16px}
  .why3__ico svg{width:23px; height:23px}
  .why3__i h3{font-size:20px; padding-right:48px}
  .stage{grid-template-columns:1fr; gap:14px; padding:26px 0}
  .stage__n{width:56px; height:56px; font-size:15px}
  .stage__body h3{font-size:20px}
  .stage__body>p{font-size:16px}
  .stage__pts{grid-template-columns:1fr; gap:8px}
  .svcgrid{grid-template-columns:1fr; gap:14px}
  .svc{padding:24px 22px}
  .svc__ico{width:44px; height:44px; margin-bottom:15px}
  .svc h3{font-size:19px}
  .matsplit{grid-template-columns:1fr; gap:14px}
  .matpanel{padding:24px 22px}
  .applist{grid-template-columns:1fr; gap:11px}
  .applist li{font-size:16.5px}
  .indlinks{grid-template-columns:1fr; gap:10px}
  .indlink{padding:15px 17px; font-size:15.5px}

  /* Service detail */
  .pains{grid-template-columns:1fr; gap:12px}
  .pain{padding:22px 20px}
  .pain__q{margin-bottom:12px; gap:11px}
  .pain__q svg{width:21px; height:21px}
  .pain h3{font-size:18px}
  .pain p{font-size:15px}
  .procgrid{grid-template-columns:1fr 1fr; gap:12px}
  .proc{padding:22px 20px}
  .proc__ico{width:42px; height:42px; margin-bottom:13px}
  .proc__ico svg{width:21px; height:21px}
  .proc h3{font-size:17px; margin-bottom:7px}
  .proc p{font-size:14px}
  .mlib{grid-template-columns:1fr; gap:12px}
  .mlibitem{padding:20px 20px 18px}
  .eq{padding:20px 20px; gap:14px}
  .eq__ico{width:42px; height:42px}
  .fingrid{grid-template-columns:1fr 1fr; gap:10px}
  .fin{padding:16px 16px 14px}
  .fin b{font-size:15px}
  .fin span{font-size:13px}
  .ostep-wrap{grid-template-columns:1fr; gap:20px; position:static}
  .ostep-wrap::before{display:none}
  .ostep{display:flex; gap:16px; align-items:flex-start; text-align:left; padding:0}
  .ostep__n{width:48px; height:48px; font-size:13px; margin-bottom:0; flex:none; box-shadow:none}
  .ostep h3{font-size:16.5px; margin-bottom:5px}
  .ostep p{display:block; font-size:14.5px}
  .commit{padding:34px 24px}
  .commit h3{font-size:22px}
  .commit p{font-size:16px}
  .stat{padding:28px 20px}
  .stat:nth-child(2n){border-right:0}
  .spec__i{padding:22px 0; border-left:0; border-top:1px solid rgba(255,255,255,.12)}
  .spec__i:first-child{border-top:0; padding-top:0}
  .spec__i b{font-size:31px}
  .step{padding:0 4px}
  .step__n{width:58px; height:58px; font-size:20px; margin-bottom:18px}
  .tst__slide{flex-basis:100%}

  /* About page */
  .statbar__grid--6{grid-template-columns:repeat(2,1fr)}
  .statbar__grid--6 .stat:nth-child(3n){border-right:1px solid rgba(255,255,255,.11)}
  .statbar__grid--6 .stat:nth-child(2n){border-right:0}
  .statbar__grid--6 .stat__n{font-size:32px}
  .cult3{grid-template-columns:1fr; gap:16px}
  .cult h3{font-size:18.5px}
  .cult p{font-size:15px}
  .honor{grid-template-columns:1fr; gap:30px}
  .honor__cert{max-width:340px; padding:18px}
  .honor__txt h2{font-size:28px}
  .honor__txt p{font-size:16.5px}
  .teamgrid{grid-template-columns:1fr; gap:12px}
  .shotgrid{grid-template-columns:1fr 1fr; grid-auto-rows:150px; gap:10px}
  .shotgrid .shotgrid__lead{grid-column:1/-1; grid-row:span 2}
  .shotgrid figcaption{font-size:12.5px; padding:26px 12px 10px}
  .shotgrid__lead figcaption{font-size:14.5px; padding:34px 16px 12px}

  /* Cards */
  .card{padding:26px 22px}
  .svcard{min-height:330px; padding:28px 24px}
  .svcard h3{font-size:23px}
  .card__ico{width:48px; height:48px; margin-bottom:18px}
  .card__ico svg{width:23px; height:23px}
  .frow{grid-template-columns:1fr; gap:8px; padding:24px 0}
  .frow__n{padding-top:0}

  /* Quote band / form */
  .quoteband{padding:58px 0}
  .quoteband h2{font-size:27px}
  form.qform{padding:26px 22px}
  .frow2{grid-template-columns:1fr; gap:0}
  .drop{padding:26px 20px}

  /* Buttons full width on mobile */
  .btn{width:100%}
  .ctastrip__in{gap:28px}
  .ctastrip h2{font-size:27px}
  .ctastrip__btns .btn{width:100%}

  /* Tabs scrollable */
  .mtabs,.ptabs{
    flex-wrap:nowrap; overflow-x:auto; justify-content:flex-start;
    -webkit-overflow-scrolling:touch; scrollbar-width:none; padding-bottom:6px;
  }
  .mtabs::-webkit-scrollbar,.ptabs::-webkit-scrollbar{display:none}
  .mtab,.ptab{flex:none}

  /* FAQ */
  .faq summary{padding:20px 52px 20px 22px; font-size:17.5px}
  .faq__body{padding:0 22px 22px; font-size:16.5px}

  /* Footer */
  .footer{padding-top:52px}
  .footer__top{grid-template-columns:1fr; gap:32px; padding-bottom:36px}
  .footer__bot{flex-direction:column; text-align:center; gap:14px}
  .footer__addr{text-align:center}
  /* Single column footer: centre the codes and give them a little more room,
     since a phone is the device most likely scanning them. */
  .footer__qr{justify-content:center; gap:18px; margin-top:24px}
  .footer__qrImg{width:124px; height:124px; padding:8px}
  /* Modal: fall back to a viewport-relative size so the code plus the white
     margin always fits without the page gaining a scrollbar. */
  .qrmodal__box{padding:28px 24px 22px; border-radius:14px}
  .qrmodal__img{width:min(300px, 76vw)}
  .qrmodal__title{margin-bottom:14px; font-size:19px}

  /* FAB */
  .fab{right:16px; bottom:16px}
  .fab a,.fab button{width:50px; height:50px}
  .fab svg{width:23px; height:23px}
}

/* Very narrow phones (≤390px) — the header bar must still fit on one line */
@media (max-width:390px){
  .logo__img{height:27px}
  .header__actions{gap:7px}
  .header__actions .btn--primary{font-size:13px; padding:9px 11px; gap:5px}
  .header__actions .btn--primary svg{display:none}
  .burger{width:40px; height:40px}
}

/* --------------------------------------------------------------------------
   The quote form's honey pot

   Off-screen rather than display:none, because a hidden input is also
   invisible to the very scripts this is meant to catch — they walk the DOM and
   skip what they cannot see. Kept out of the tab order and marked decorative
   for assistive technology, so it costs a person nothing at all. Same clipping
   technique as the skip link. */
.pf-trap{
  position:absolute; left:-9999px; top:auto;
  width:1px; height:1px; overflow:hidden;
}