/* ============================================================
   ENSI Precision — site.css
   One stylesheet, no build step. Design tokens live in :root.
   Type: Schibsted Grotesk (display) / Inter (body) / IBM Plex Mono (labels)
   ============================================================ */

:root{
  /* color */
  --paper:#FCFBF8;
  --white:#FFFFFF;
  --wash:#F4F2EC;
  --ink:#14171C;
  --ink-mid:#4B515A;
  --ink-dim:#7B818A;
  --line:#E8E5DC;
  --line-mid:#D6D2C5;
  --navy:#24418C;
  --navy-deep:#18306E;
  --amber:#F0A11E;
  --amber-deep:#A66E05;
  --dark:#111419;
  --dark-2:#1A1E25;
  --inv:#F2F1EC;
  --inv-mid:#A9AEB6;
  --inv-dim:#6F747D;

  /* logo-derived palette — scoped to the homepage hero + nav CTA only,
     see css comments at each use site. Colors sampled directly from
     images/brand/logo-ensi.svg (#031D53 navy, #4A4A4A gray). */
  --logo-navy:#031D53;
  --logo-navy-light:#123B7A;
  --logo-gray:#4A4A4A;
  --logo-steel:#DCE1E7;
  --logo-steel-deep:#C3CBD4;

  /* type */
  --font-display:"Schibsted Grotesk",system-ui,sans-serif;
  --font-body:"Inter",system-ui,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,monospace;

  /* misc */
  --r:2px;
  --nav-h:96px;
}
/* Shorter bar on phones — a 96px header eats too much of a small viewport.
   Everything positional (sticky offsets, scroll-margins, the mobile menu
   inset) derives from --nav-h, so both values cascade on their own. */
@media(max-width:980px){
  :root{--nav-h:88px}
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-body);
  font-size:16px;line-height:1.7;
  color:var(--ink);background:var(--paper);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--amber);color:var(--ink)}

.wrap{max-width:1200px;margin:0 auto;padding:0 28px}
.sec{padding:104px 0}
.sec-tight{padding:72px 0}

/* ---------- typography ---------- */
h1,h2,h3,h4{font-family:var(--font-display);font-weight:700;line-height:1.08;letter-spacing:-.015em}
.t-hero{font-size:clamp(40px,5.6vw,68px);letter-spacing:-.025em;line-height:1.02}
.t-1{font-size:clamp(30px,4vw,46px);letter-spacing:-.02em}
.t-2{font-size:clamp(22px,2.6vw,30px)}
.t-3{font-size:19px;line-height:1.35}
.lead{font-size:18px;line-height:1.75;color:var(--ink-mid)}
.kick{
  font-family:var(--font-mono);font-size:11px;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:var(--amber-deep);
  margin-bottom:18px;display:flex;align-items:center;gap:12px;
}
.kick::before{content:"";width:22px;height:1px;background:var(--amber);flex:none}
.dark .kick,.on-dark .kick{color:var(--amber)}
.sec-head{max-width:640px;margin-bottom:56px}
.sec-head p{margin-top:16px}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center}
.sec-head.center .kick{justify-content:center}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-body);font-weight:600;font-size:14.5px;letter-spacing:.01em;
  padding:15px 24px;border-radius:var(--r);text-decoration:none;
  transition:background .18s,color .18s,border-color .18s;
  white-space:nowrap;
}
.btn .arr{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .18s}
.btn:hover .arr{transform:translateX(3px)}
.btn-cta{background:var(--amber);color:var(--ink)}
.btn-cta:hover{background:#E3920C}
.btn-ghost{border:1px solid var(--line-mid);color:var(--ink);background:transparent}
.btn-ghost:hover{border-color:var(--ink)}
.dark .btn-ghost,.on-dark .btn-ghost{border-color:#3A3F48;color:var(--inv)}
.dark .btn-ghost:hover,.on-dark .btn-ghost:hover{border-color:var(--inv)}
.link-arrow{
  display:inline-flex;align-items:center;gap:8px;
  font-weight:600;font-size:14.5px;color:var(--navy);text-decoration:none;
}
.link-arrow .arr{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .18s}
.link-arrow:hover .arr{transform:translateX(3px)}

/* ---------- nav ---------- */
.nav{
  position:sticky;top:0;z-index:100;background:var(--paper);
  border-bottom:1px solid var(--line);height:var(--nav-h);
}
.nav.scrolled{box-shadow:0 1px 0 var(--line),0 8px 24px rgba(17,20,25,.05)}
.nav-inner{
  max-width:1240px;margin:0 auto;padding:0 28px;height:100%;
  display:flex;align-items:center;gap:40px;
  position:relative; /* anchors the services mega panel to the container */
}
.logo{display:flex;align-items:center;text-decoration:none;flex:none}
.logo-img{height:76px;width:auto;display:block}
/* logo-ensi.svg's viewBox is cropped tight to the artwork (icon + ENSI +
   tagline, no blank canvas). The tagline is only ~7.4% of the artwork's
   height, so its legibility is set entirely by how large the whole lockup
   renders — hence sizing it close to --nav-h on both breakpoints. */
@media(min-width:981px){
  .logo-img{width:clamp(268px,18.5vw,296px);height:auto;max-width:none}
}

.menu{display:flex;align-items:center;gap:4px;list-style:none;margin-left:auto}
.m-item{position:relative}
.m-link{
  display:flex;align-items:center;gap:6px;
  font-size:14.5px;font-weight:500;color:var(--ink);text-decoration:none;
  padding:10px 14px;border-radius:var(--r);
}
.m-link:hover{color:var(--navy)}
.m-link .chev{width:9px;height:9px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .18s;margin-top:1px}
.m-item.open .m-link .chev{transform:rotate(180deg)}

/* the old .drop dropdown is gone — all three nav groups (Services,
   Industries, Resources) now use the shared .mega-panel system below;
   the chev still rotates on hover for pointer users */
@media(hover:hover){
  .m-item:hover .m-link .chev{transform:rotate(180deg)}
}

.nav-cta{margin-left:8px;flex:none}
.nav-cta .btn{padding:11px 20px;font-size:14px}
/* nav "Get a Quote" — logo-navy instead of the sitewide amber, so the nav
   CTA reads as ENSI's own color; lightens on hover (darkening an already
   dark navy would make the hover state harder to see, not easier) */
.nav-cta .btn-cta,.nav-cta-m .btn-cta{background:var(--logo-navy);color:var(--white)}
.nav-cta .btn-cta:hover,.nav-cta-m .btn-cta:hover{background:var(--logo-navy-light)}

.burger{display:none;flex-direction:column;gap:5px;padding:10px;margin-left:auto}
.burger span{width:22px;height:2px;background:var(--ink);transition:transform .2s,opacity .2s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media(max-width:980px){
  .menu{
    position:fixed;inset:var(--nav-h) 0 0 0;background:var(--paper);
    flex-direction:column;align-items:stretch;gap:0;padding:16px 28px 40px;
    overflow-y:auto;display:none;border-top:1px solid var(--line);
  }
  .menu.open{display:flex}
  .m-item{border-bottom:1px solid var(--line)}
  .m-link{width:100%;justify-content:space-between;padding:17px 2px;font-size:16px}
  .nav-cta{display:none}
  .menu .nav-cta-m{display:block;margin-top:24px;border:0}
  .burger{display:flex}
}
@media(min-width:981px){.nav-cta-m{display:none}}

/* ---------- nav mega menus ----------
   One shared panel system for all three nav groups. Services is the
   large master panel (three editorial link columns plus one featured
   panel); Industries and Resources are smaller variants of the same
   component (.mega-panel-sm / -xs width modifiers) with identical
   background, border, shadow, offset, typography and hover language.
   Panels center on .nav-inner (.m-item.mega is position:static so
   each panel spans/aligns to the header container instead of hugging
   its trigger). Open/close reuses the shared .open class — hover
   intent, focus and Escape behavior live in js/main.js; the ::before
   strip is a transparent bridge across the trigger-to-panel gap so a
   diagonal pointer move doesn't close the menu. On mobile every panel
   collapses into the existing accordion with the featured panel and
   redundant single headings hidden. */
.m-item.mega{position:static}
.mega-panel{
  position:absolute;top:calc(100% + 10px);left:50%;
  width:min(1120px,100%);transform:translate(-50%,6px);
  background:var(--paper);border:1px solid var(--line);border-radius:3px;
  box-shadow:0 20px 50px rgba(17,20,25,.10);
  padding:30px 32px 32px;
  opacity:0;visibility:hidden;
  transition:opacity .18s,transform .18s,visibility .18s;
}
.mega-panel::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px}
.m-item.mega.open .mega-panel{opacity:1;visibility:visible;transform:translate(-50%,0)}

/* mini panel variants — Industries (2-col, 640px) and Resources
   (single column, 560px); everything else inherits from .mega-panel */
.mega-panel-sm{width:min(640px,100%)}
.mega-panel-xs{width:min(560px,100%)}
.mega-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:0 28px}

.mega-grid{display:grid;grid-template-columns:1.02fr 1.08fr .98fr 1.12fr;gap:0 36px}
.mega-h{
  font-family:var(--font-mono);font-size:11.5px;font-weight:500;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-dim);
  padding-bottom:12px;margin-bottom:10px;border-bottom:1px solid var(--line);
}
.mega-link{
  display:block;padding:11px 10px;margin:0 -10px 2px;
  border-left:2px solid transparent;border-radius:var(--r);text-decoration:none;
  transition:background-color .2s,border-color .2s;
}
.mega-link .dt{display:block;font-weight:600;font-size:14.5px;color:var(--ink);transition:color .18s}
.mega-link .dd{display:block;font-size:13px;color:var(--ink-dim);line-height:1.5;margin-top:2px}
.mega-link:hover,.mega-link:focus-visible{background:var(--wash);border-left-color:var(--amber)}
.mega-link:hover .dt,.mega-link:focus-visible .dt{color:var(--navy)}
.mega-link:focus-visible{outline:2px solid var(--logo-navy);outline-offset:-2px}
.mega-link[aria-current="page"]{border-left-color:var(--amber)}
.mega-link[aria-current="page"] .dt{color:var(--navy)}
.mega-all{margin-top:14px;font-size:13.5px}

.mega-feature{border-left:1px solid var(--line);padding-left:32px}
.mega-feature-media{aspect-ratio:9/7;border-radius:2px;margin-bottom:16px}
.mega-feature-kick{
  font-family:var(--font-mono);font-size:11px;font-weight:500;letter-spacing:.12em;
  text-transform:uppercase;color:var(--amber-deep);margin-bottom:8px;
}
.mega-feature-t{font-family:var(--font-display);font-size:16.5px;font-weight:600;margin-bottom:6px}
.mega-feature p{font-size:13px;line-height:1.6;color:var(--ink-mid);margin-bottom:14px}
.mega-feature .link-arrow{font-size:13.5px}

@media(max-width:980px){
  .m-item.mega{position:relative}
  .mega-panel{
    position:static;width:auto;transform:none;
    border:0;border-radius:0;box-shadow:none;background:transparent;
    padding:0 0 14px;opacity:1;visibility:visible;display:none;
  }
  .mega-panel::before{display:none}
  .m-item.mega.open .mega-panel{display:block}
  .mega-grid,.mega-grid-2{display:block}
  .mega-h{margin-top:16px;padding-bottom:8px}
  .mega-col:first-child .mega-h{margin-top:0}
  /* the mini panels' single heading just repeats the accordion label */
  .mega-panel-sm > .mega-h{display:none}
  .mega-link{margin:0;padding:13px 2px;border-left:0}
  .mega-link:hover,.mega-link:focus-visible{background:transparent}
  .mega-all{margin-top:10px;padding:6px 2px}
  .mega-feature{display:none}
}

/* ---------- hero (home) ----------
   Full-bleed two-panel composition: a real product photo fills the left
   half edge-to-edge (object-fit:cover, no card, no padding), a solid dark
   panel fills the right half with the conversion content. No outer
   container and no gap between panels — one continuous band directly
   below the nav. If the real photo isn't in place yet, the left panel is
   a flat neutral fill — no illustration, no grid, no broken-image icon. */
.hero{display:grid;grid-template-columns:1fr 1fr;min-height:560px;overflow:hidden}
.hero-photo{position:relative;background:var(--wash);overflow:hidden}
.hero-photo-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.hero-photo-missing{
  display:none;position:absolute;inset:0;align-items:center;justify-content:center;
  text-align:center;padding:24px;
}
.hero-photo-missing span{
  font-family:var(--font-mono);font-size:12.5px;line-height:1.7;
  color:var(--ink-dim);letter-spacing:.02em;
}
/* hero panel: #0B2545 replaces the generic near-black, so the hero reads
   as ENSI's own color rather than a stock dark section. The inner column
   splits into two blocks — hero-main sits in the upper-middle area, and
   hero-trust-block is pinned to the bottom via margin-top:auto, separated
   by a single hairline rather than a card. Scoped to this section only —
   the shared --logo-navy token (nav CTA, hero button text, etc.) is
   untouched. */
.hero-panel{background:#0B2545;color:var(--inv);display:flex}
.hero-panel-inner{
  display:flex;flex-direction:column;justify-content:flex-start;
  width:100%;padding:64px 64px 48px;
}
.hero-main{max-width:70%}
.hero-h1{
  font-family:var(--font-display);font-size:clamp(34px,3vw,50px);font-weight:800;
  line-height:1.1;letter-spacing:-.02em;color:var(--inv);
}
.hero-points{list-style:none;margin-top:20px;display:flex;flex-direction:column;gap:9px}
.hero-points li{
  position:relative;padding-left:18px;font-size:15.5px;line-height:1.5;color:#BCC1C9;
}
.hero-points li::before{
  content:"";position:absolute;left:0;top:8px;width:5px;height:5px;border-radius:50%;background:var(--amber);
}
/* light steel CTA reads clearly against the navy panel; darkens on hover
   the same way the site's amber CTA darkens, just inverted (light->darker) */
.hero-cta{
  margin-top:26px;background:var(--logo-steel);color:var(--logo-navy);
  min-height:52px;padding:0 28px;
}
.hero-cta:hover{background:var(--logo-steel-deep)}
.hero-cta:focus-visible{outline:2px solid var(--logo-steel);outline-offset:3px}
.hero-secure{font-size:12.5px;color:#9BA1AC;margin-top:14px;letter-spacing:.01em}

.hero-trust-block{
  margin-top:auto;padding-top:24px;border-top:1px solid rgba(255,255,255,.22);
  display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap;
  width:100%;
}
.hero-trust-line{font-size:12.5px;color:#9BA1AC;max-width:230px;flex:none;letter-spacing:.01em}
.hero-trust-logos{display:flex;flex:1;justify-content:flex-end}
/* single wide logo-strip image (1200×220) — object-fit:contain so it never
   crops or stretches, transparency preserved. Selector is doubled up
   (.hero-trust-logos .hero-logo-strip) to out-specificity the base .media
   rule (aspect-ratio:4/3, object-fit:cover) that's declared later in this
   file. A light dashed border stands in until the file is dropped into
   images/home/hero-client-logos.png, per IMAGE-SLOTS.md. */
.hero-trust-logos .hero-logo-strip{
  aspect-ratio:1200/220;width:100%;max-width:480px;
  background:none;border:1px dashed rgba(255,255,255,.22);border-radius:0;
}
.hero-trust-logos .hero-logo-strip::before{content:none}
.hero-trust-logos .hero-logo-strip::after{
  content:attr(data-label) "\A" attr(data-dims);
  color:var(--inv-dim);font-size:10.5px;
}
.hero-trust-logos .hero-logo-strip img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  filter:contrast(1.1) brightness(1.08);
}

@media(max-width:980px){
  .hero{grid-template-columns:1fr;min-height:0}
  .hero-panel{order:1}
  .hero-photo{order:2;aspect-ratio:4/3}
  .hero-panel-inner{padding:40px 28px 32px}
  .hero-h1{font-size:clamp(34px,7vw,46px)}
  .hero-main{max-width:none}
  .hero-trust-block{justify-content:flex-start;margin-top:32px;padding-top:20px}
  .hero-trust-logos{justify-content:flex-start}
}
@media(max-width:560px){
  .hero-panel-inner{padding:32px 24px 28px}
  .hero-h1{font-size:32px}
  .hero-cta{width:100%;justify-content:center}
  .hero-trust-block{flex-direction:column;align-items:flex-start;gap:16px}
  .hero-trust-line{max-width:none}
}

/* ---------- capabilities (home, below hero) ----------
   Direct restyle to match the reference card (hubs.com capabilities grid):
   soft rounded card, no border/stripe, photo flush at the rounded top,
   sentence-case heading, bold gray process line, light spec bullets.
   Logo-navy carried only on the link, where the reference itself uses its
   own brand color. */
.cap-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.cap-card{
  background:var(--wash);border-radius:14px;overflow:hidden;
  box-shadow:0 1px 2px rgba(17,20,25,.05),0 10px 28px rgba(17,20,25,.05);
}
.cap-card .media{border-radius:0;aspect-ratio:4/3}
.cap-body{padding:28px 30px 34px}
.cap-body h3{font-size:23px;font-weight:700;color:var(--ink);margin-bottom:14px}
.cap-sub{font-size:16.5px;font-weight:700;color:var(--ink-mid);line-height:1.4;margin-bottom:18px}
.cap-specs{list-style:none;margin-bottom:26px}
.cap-specs li{
  position:relative;padding-left:16px;margin-bottom:8px;
  font-size:13.5px;line-height:1.55;color:var(--ink-dim);
}
.cap-specs li:last-child{margin-bottom:0}
.cap-specs li::before{
  content:"";position:absolute;left:0;top:7px;width:4px;height:4px;border-radius:50%;background:var(--ink-dim);
}
.cap-link{
  display:inline-flex;align-items:center;gap:8px;
  font-weight:600;font-size:15px;color:var(--logo-navy);text-decoration:none;
}
.cap-link .arr{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .18s}
.cap-link:hover .arr{transform:translateX(3px)}
/* homepage-only refinements — .cap-body/.cap-sub/.cap-specs/.cap-link
   are shared with cnc-machining.html, so these are scoped under the
   homepage's own .cap-sec wrapper and don't touch the base rules or
   the service page. */
.cap-sec .cap-body h3{margin-bottom:16px}
.cap-sec .cap-sub{margin-bottom:20px}
.cap-sec .cap-specs{margin-bottom:28px}
.cap-sec .cap-specs li{font-size:14px}
.cap-sec .cap-card{display:flex;flex-direction:column}
.cap-sec .cap-body{display:flex;flex:1;flex-direction:column;padding:24px 24px 28px}
.cap-sec .cap-link{margin-top:auto}
.cap-sec .cap-card-casting .media img{object-position:center}
#services{scroll-margin-top:calc(var(--nav-h) + 24px)}
/* the die-casting card links to its own service page — its single
   .cap-link is stretched over the card so the whole tile is one click
   target without nesting links inside links. */
.cap-sec .cap-card-casting{position:relative}
.cap-sec .cap-card-casting .cap-link::after{content:"";position:absolute;inset:0}
.cap-sec .cap-card-casting .cap-link:focus-visible{outline:2px solid var(--logo-navy);outline-offset:2px}
@media(max-width:900px){
  .cap-grid{grid-template-columns:1fr 1fr}
  .cap-grid .cap-card:last-child{grid-column:1/-1}
}
@media(max-width:760px){
  .cap-grid{grid-template-columns:1fr}
  .cap-grid .cap-card:last-child{grid-column:auto}
}

/* ---------- from drawing to delivered parts (home, section 3) ----------
   Redesigned as a single horizontal process timeline (RapidDirect-style
   reference, reworked with ENSI's own tokens/copy/icons — no text or
   branding copied): one thin line runs behind four circular step icons,
   the first reads as "active" in ENSI navy with a soft outer ring, the
   rest sit in flat light-gray circles. No cards, no numbered squares,
   no dividers, no bottom CTA. Reveal reuses the sitewide .rv/.in
   IntersectionObserver (js/main.js, unchanged) — each icon/title/
   description transitions individually so the stagger and easing here
   can differ from the sitewide default, and the "run once" behavior is
   inherited for free. */
.svc-sec{background:var(--wash);padding:68px 0;position:relative;overflow:hidden}
.svc-wrap{display:flex;flex-direction:column;align-items:center;text-align:center;position:relative;z-index:1;max-width:1240px}
.svc-head{max-width:900px;margin-bottom:72px}
.svc-h2{font-size:42px;font-weight:700;letter-spacing:-.015em;line-height:1.15;margin-bottom:18px}
.svc-intro{max-width:900px;margin:0 auto;font-size:17px;line-height:1.65;color:var(--ink-mid)}

.svc-timeline{position:relative;width:100%;max-width:1180px;display:grid;grid-template-columns:repeat(4,1fr)}
.svc-timeline::before{
  content:"";position:absolute;left:12.5%;right:12.5%;top:33px;height:1px;
  background:#c3beae;z-index:0;transform:scaleX(0);transform-origin:left;
  transition:transform 1.1s cubic-bezier(.22,.61,.36,1);
}
/* cancel the generic .rv fade on the container itself — only its ::before
   line animates; each step below handles its own reveal. */
.svc-timeline.rv{opacity:1;transform:none}
.svc-timeline.rv.in::before{transform:scaleX(1)}

.svc-step:nth-child(1){--d:0ms}
.svc-step:nth-child(2){--d:275ms}
.svc-step:nth-child(3){--d:550ms}
.svc-step:nth-child(4){--d:825ms}
.svc-step{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;padding:0 20px}

/* icon — a single fixed 64×64 box for every step (so every circle,
   active or inactive, centers on the line identically); the inactive
   visual circle is shrunk to ~56px via padding + background-clip
   instead of resizing the box, which would misalign it against the
   line. Property-list transitions (not the shorthand) so the entrance
   stagger (--d) can be scoped to opacity/transform only — hover later
   changes background/color/size/padding on a flat, undelayed 250ms. */
.svc-icon{
  position:relative;z-index:2;
  width:66px;height:66px;flex:none;border-radius:50%;box-sizing:border-box;
  background:#ebe9e3;background-clip:content-box;padding:5px;color:#6b7280;
  display:flex;align-items:center;justify-content:center;margin-bottom:32px;
  opacity:0;transform:scale(.92);
  transition-property:opacity,transform,background-color,color,box-shadow,width,height,padding;
  transition-duration:.55s,.55s,.25s,.25s,.25s,.25s,.25s,.25s;
  transition-timing-function:ease,ease,ease,ease,ease,ease,ease,ease;
  transition-delay:0s,0s,0s,0s,0s,0s,0s,0s;
}
.svc-step.in .svc-icon{
  opacity:1;transform:scale(1);
  transition-delay:var(--d,0ms),var(--d,0ms),0s,0s,0s,0s,0s,0s;
}
.svc-icon svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}

.svc-step h3{
  font-size:18px;margin-bottom:10px;color:var(--ink);
  opacity:0;transform:translateY(10px);
  transition-property:opacity,transform,color;
  transition-duration:.5s,.5s,.25s;
  transition-delay:0s,0s,0s;
}
.svc-step.in h3{opacity:1;transform:translateY(0);transition-delay:var(--d,0ms),var(--d,0ms),0s}
.svc-step p{
  font-size:14.5px;line-height:1.6;color:var(--ink-mid);max-width:215px;
  opacity:0;transform:translateY(10px);transition:opacity .5s ease,transform .5s ease;
}
.svc-step.in p{opacity:1;transform:translateY(0);transition-delay:var(--d,0ms)}

/* active first step — navy fill, white icon, soft outer ring stands in
   for the reference's glow (a real blur-glow reads as a drop-shadow
   effect the brief asks to avoid; a flat ring keeps it understated) */
.svc-step-active .svc-icon{padding:0;background:var(--logo-navy);color:var(--white);box-shadow:0 0 0 8px rgba(3,29,83,.12)}

/* short navy segment on the line, directly beneath a step — always on
   for the active step, previewed on hover for the other three */
.svc-step::after{
  content:"";position:absolute;z-index:1;top:33px;left:50%;width:46px;height:3px;border-radius:2px;
  background:var(--logo-navy);transform:translate(-50%,-50%) scaleX(0);transition:transform .25s ease;
}
.svc-step-active::after{transform:translate(-50%,-50%) scaleX(1)}

/* hover — temporarily "activates" any step: navy fill, white icon, a
   touch larger (1.05×), title darkens to navy, its line segment shows. */
.svc-step:hover .svc-icon{width:69.3px;height:69.3px;padding:0;background:var(--logo-navy);color:var(--white);box-shadow:0 0 0 8px rgba(3,29,83,.12)}
.svc-step:hover h3{color:var(--logo-navy)}
.svc-step:hover::after{transform:translate(-50%,-50%) scaleX(1)}

/* background — two faint pale diagonal bands on the right edge (not a
   single outlined polygon); low opacity, hidden once the viewport gets
   narrow enough that they could reach the timeline/text. transform-
   origin:bottom anchors the bottom edge exactly at its computed
   position — skewX only ever pushes the top edge further right (away
   from content), so the shear itself can never drift the shape toward
   the icons, whatever the angle. */
.svc-sec::before,.svc-sec::after{
  content:"";position:absolute;top:0;height:100%;width:90px;
  background:rgba(3,29,83,.045);transform:skewX(-11deg);transform-origin:bottom;
  z-index:0;pointer-events:none;
}
.svc-sec::before{right:96px}
.svc-sec::after{right:-10px;background:rgba(3,29,83,.03)}
@media(max-width:1400px){.svc-sec::before,.svc-sec::after{display:none}}

@media(prefers-reduced-motion:reduce){
  .svc-timeline::before,.svc-icon,.svc-step h3,.svc-step p,.svc-step::after{transition:none!important}
  .svc-timeline::before{transform:scaleX(1)!important}
  .svc-icon,.svc-step h3,.svc-step p{opacity:1!important;transform:none!important}
}

/* tablet — stays horizontal (per spec), just tighter spacing; icon
   sizing and the line/segment positions are unchanged. */
@media(max-width:1080px){
  .svc-h2{font-size:36px}
  .svc-timeline{max-width:100%}
  .svc-step{padding:0 10px}
  .svc-step p{max-width:170px}
}

/* mobile — true vertical timeline: icons stack in a left column joined
   by connecting line segments, copy sits to the right. Not a centered
   stack — text is left-aligned beside each icon. */
@media(max-width:620px){
  .svc-sec{padding:56px 0}
  .svc-h2{font-size:30px}
  .svc-head{margin-bottom:40px}
  .svc-timeline{grid-template-columns:1fr;row-gap:0;max-width:360px}
  .svc-timeline::before{display:none}
  .svc-step{flex-direction:row;align-items:flex-start;text-align:left;padding:0 0 36px}
  .svc-step::after{display:none}
  .svc-step:not(:last-child)::before{
    content:"";position:absolute;z-index:0;left:33px;top:70px;bottom:8px;width:1px;background:#c3beae;
  }
  .svc-step:last-child{padding-bottom:0}
  .svc-icon{margin:0 18px 0 0}
  .svc-step p{max-width:none}
}

/* ---------- page hero (interior pages) ---------- */
.p-hero{padding:80px 0 64px;border-bottom:1px solid var(--line)}
.p-hero .crumb{
  font-family:var(--font-mono);font-size:12px;letter-spacing:.06em;
  color:var(--ink-dim);margin-bottom:26px;
}
.p-hero .crumb a{color:var(--ink-dim);text-decoration:none}
.p-hero .crumb a:hover{color:var(--ink)}
.p-hero .crumb b{color:var(--ink);font-weight:500}
.p-hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:64px;align-items:center}
.p-hero .lead{max-width:560px;margin-top:22px}
.p-hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px}
@media(max-width:980px){.p-hero-grid{grid-template-columns:1fr;gap:40px}}

/* ---------- media placeholder / photo slots ----------
   <figure class="media" data-src="images/x.jpg" data-dims="1600×1200" data-label="alt text">
   js/main.js swaps in the real photo when the file exists. Until then the
   placeholder shows the exact path + recommended size (data-src/data-dims);
   data-label is only used as the alt-text fallback, see IMAGE-SLOTS.md. */
.media{
  position:relative;border-radius:3px;overflow:hidden;
  background:
    linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px),
    linear-gradient(160deg,var(--dark-2),var(--dark) 70%);
  background-size:28px 28px,28px 28px,100% 100%;
  aspect-ratio:4/3;
}
.media.wide{aspect-ratio:16/9}
.media.tall{aspect-ratio:3/4}
.media::after{
  content:attr(data-src) "\A" attr(data-dims);
  white-space:pre-line;
  position:absolute;left:18px;bottom:14px;right:18px;
  font-family:var(--font-mono);font-size:11px;line-height:1.6;letter-spacing:.02em;
  color:var(--inv-dim);
}
.media::before{
  content:"";position:absolute;top:14px;left:18px;width:26px;height:26px;
  border-top:1px solid #3A3F48;border-left:1px solid #3A3F48;
}
.media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.media.loaded::after,.media.loaded::before{display:none}

/* ---------- cards (services / industries / resources) ---------- */
.card-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.card-grid.g2{grid-template-columns:1fr 1fr}
.card-grid.g3{grid-template-columns:repeat(3,1fr)}
.card{
  display:flex;flex-direction:column;background:var(--white);
  border:1px solid var(--line);border-radius:3px;overflow:hidden;
  text-decoration:none;transition:border-color .18s,transform .18s;
}
.card:hover{border-color:var(--ink);transform:translateY(-2px)}
.card .media{border-radius:0;aspect-ratio:3/2}
.card-body{padding:24px 24px 26px;display:flex;flex-direction:column;flex:1}
.card h3{font-size:18px;margin-bottom:8px}
.card p{font-size:14px;line-height:1.65;color:var(--ink-mid);flex:1}
.card .card-foot{
  margin-top:20px;display:flex;align-items:center;gap:8px;
  font-weight:600;font-size:13.5px;color:var(--navy);
}
.card .card-foot .arr{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .18s}
.card:hover .card-foot .arr{transform:translateX(3px)}
@media(max-width:1060px){.card-grid{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.card-grid,.card-grid.g3,.card-grid.g2{grid-template-columns:1fr}}

/* ---------- resources (home, "Manufacturing Resources") ----------
   Editorial content-card layout — reuses the shared .card/.card-body/
   .card-foot component (also used as-is by blog.html) rather than
   redeclaring a card system, under its own scoped container/refinements
   so blog.html's own card grid is untouched. Centered head (no eyebrow,
   no left-aligned oversized heading) replaces the old plain three-
   column text index. */
/* wider container (~11% more per-card width than the sitewide 1200px
   .wrap) scoped to this section only — other pages sharing .wrap are
   unaffected. */
.res-sec .wrap{max-width:1320px}
.res-sec .sec-head{margin-bottom:44px}
.res-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.res-sec .card{border-radius:4px}
.res-sec .card .media{aspect-ratio:4/3;overflow:hidden}
.res-sec .card .media img{transition:transform .28s ease;object-position:center}
.res-sec .card:hover .media img{transform:scale(1.025)}
/* the shop-notes card reuses the "Why Choose ENSI" machining photo —
   it's a tall shop-floor shot, so bias the crop toward the lower third
   (drawing + finished part on the bench) rather than the ceiling. */
.res-sec .card .media[data-src*="why-ensi-machining"] img{object-position:center 78%}
.res-meta{
  display:block;font-family:var(--font-mono);font-size:11.5px;font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;color:var(--amber-deep);margin-bottom:12px;
}
.res-sec .card-body{padding:26px 26px 28px}
.res-sec .card h3{
  font-size:21px;margin-bottom:10px;
  text-decoration:underline;text-decoration-color:transparent;text-underline-offset:4px;
  transition:color .2s ease,text-decoration-color .2s ease;
}
.res-sec .card:hover h3{color:var(--navy);text-decoration-color:var(--line-mid)}
.res-sec .card p{font-size:14.5px}
@media(max-width:900px){.res-cards{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.res-cards{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){
  .res-sec .card,.res-sec .card .media img{transition:none!important}
}

/* ---------- why choose ensi (home, section 4) ----------
   Same full-bleed dark section, 50/50 split, and section height as the
   previous version — only the left media and the right list content
   change. Left is an editorial 4-image grid (one large image spanning
   the full column height, three smaller images stacked beside it) —
   flush, no radius/border/shadow, object-fit:cover via the shared .media
   image rule. Right keeps the same heading/intro/list rhythm, with the
   old icon column swapped for a small mono index number (no boxes). */
.proc-sec{background:var(--dark)}
.proc-grid{display:grid;grid-template-columns:1fr 1fr;align-items:stretch;min-height:520px}
.proc-media-wrap{
  display:grid;grid-template-columns:1.3fr 1fr;grid-template-rows:repeat(3,1fr);gap:4px;
}
.proc-media-wrap .proc-img{
  width:100%;height:100%;aspect-ratio:auto;border-radius:0;
}
.proc-img-main{grid-column:1;grid-row:1 / 4}
.proc-img-sub{grid-column:2}
.proc-body{padding:64px 56px;display:flex;flex-direction:column;justify-content:center}
.proc-h2{
  font-family:var(--font-display);color:var(--inv);font-weight:700;
  font-size:clamp(26px,2.6vw,32px);letter-spacing:-.015em;margin-bottom:18px;
}
.proc-intro{color:var(--inv-mid);font-size:16px;line-height:1.7;max-width:460px;margin-bottom:34px}
.proc-list{list-style:none;display:flex;flex-direction:column;gap:26px}
.proc-list li{display:grid;grid-template-columns:32px 1fr;gap:18px;align-items:start}
.proc-list .proc-n{
  font-family:var(--font-mono);font-size:13px;font-weight:600;letter-spacing:.04em;
  color:var(--amber);padding-top:3px;
}
.proc-list strong{color:var(--inv);font-weight:600;font-size:16px}
.proc-list span:not(.proc-n){display:block;color:var(--inv-mid);font-size:15px;line-height:1.6;margin-top:4px}
@media(max-width:900px){
  .proc-grid{grid-template-columns:1fr;min-height:0}
  .proc-media-wrap{aspect-ratio:4/3}
  .proc-body{padding:48px 28px}
}
@media(max-width:560px){
  .proc-body{padding:40px 24px}
  .proc-media-wrap{gap:3px}
}

/* ---------- dark split section ---------- */
.dark{background:var(--dark);color:var(--inv)}
.dark h1,.dark h2,.dark h3{color:var(--inv)}
.dark p{color:var(--inv-mid)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center}
.split .lead{color:var(--inv-mid)}
.why-list{margin-top:36px;border-top:1px solid #2A2F38}
.why{display:grid;grid-template-columns:44px 1fr;gap:20px;padding:24px 0;border-bottom:1px solid #2A2F38}
.why .ic{width:34px;height:34px;fill:none;stroke:var(--amber);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;margin-top:3px}
.why h3{font-size:16.5px;margin-bottom:6px}
.why p{font-size:14px;line-height:1.65}
@media(max-width:980px){.split{grid-template-columns:1fr;gap:44px}}

/* ---------- rapid prototyping to production (home, section 5) ----------
   Composition replicated from the 3ERP "From rapid prototyping to
   production" band: centered head block, then a 2-up row of tall photo
   tiles followed by one full-width photo tile — each tile a full-bleed
   photo with a solid, square-cornered text panel anchored bottom-left
   (generous right-hand padding leaves the photo visible, exactly the
   reference's proportion), then one shared CTA centered below all three.
   Panels use the site's own light palette, not a floating white card —
   no radius, no shadow, left-aligned copy, dot-marker bullets reusing the
   existing sitewide bullet language (.cap-specs / .hero-points). */
.rpp-sec{padding:104px 0;border-bottom:1px solid var(--line)}
.rpp-head{max-width:640px;margin:0 auto 48px;text-align:center}
.rpp-head .lead{margin-top:16px}
.rpp-row{display:grid;gap:2px}
.rpp-row-2{grid-template-columns:1fr 1fr}
.rpp-row-1{margin-top:2px}
.rpp-tile{
  position:relative;min-height:560px;display:flex;align-items:flex-end;
  padding:40px 100px 40px 40px;overflow:hidden;
}
.rpp-tile .media{
  position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;border-radius:0;z-index:0;
}
/* panel: fixed max-width (not 100% of the padded area) so it never
   creeps past the reference's proportion and more of each photo stays
   visible; padding trimmed to shorten the visible text block without
   touching copy */
.rpp-panel{position:relative;z-index:1;width:100%;max-width:340px;background:var(--paper);padding:20px 22px}
.rpp-panel h3{font-size:19px;margin-bottom:8px;color:var(--ink)}
.rpp-panel p{font-size:15px;line-height:1.55;color:var(--ink-mid);margin-bottom:14px}
.rpp-list{list-style:none}
.rpp-list li{
  position:relative;padding-left:16px;margin-bottom:6px;
  font-size:14px;line-height:1.45;color:var(--ink-mid);
}
.rpp-list li:last-child{margin-bottom:0}
.rpp-list li::before{
  content:"";position:absolute;left:0;top:7px;width:4px;height:4px;border-radius:50%;background:var(--amber);
}
.rpp-cta{
  display:flex;width:fit-content;margin:40px auto 0;background:var(--logo-navy);color:var(--white);
  min-height:52px;justify-content:center;padding:0 34px;
}
.rpp-cta:hover{background:var(--logo-navy-light)}
.rpp-cta:focus-visible{outline:2px solid var(--logo-navy);outline-offset:3px}
@media(max-width:900px){
  .rpp-row-2{grid-template-columns:1fr}
  .rpp-tile{min-height:0;aspect-ratio:4/3;padding:28px 28px 28px 24px}
  .rpp-panel{max-width:380px}
}
@media(max-width:560px){
  .rpp-sec{padding:56px 0}
  .rpp-tile{padding:20px 20px 20px 16px}
  .rpp-panel{max-width:none;padding:20px 18px}
  .rpp-cta{width:100%}
}

/* ---------- industries we support (home, section 6) ----------
   Composition replicated from the Protolabs "Major Industries Served"
   band: left-aligned head block, then four equal columns — a large photo
   on top, plain title + one-line description directly below, the whole
   item clickable. Square corners, a single hairline border for
   definition (no card lift, no shadow, no icon, no arrow). Refinement
   pass: .ind-wrap widens just this section's container, images moved to
   a taller 4:3 ratio so the row reads as photographic rather than a row
   of small news cards, and title/description sizes increased. */
.wrap.ind-wrap{max-width:1360px}
.ind-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.ind-item{
  display:block;text-decoration:none;color:inherit;background:var(--white);
  border:1px solid var(--line);border-radius:0;overflow:hidden;
  transition:border-color .18s;
}
.ind-item:hover{border-color:var(--ink)}
.ind-item:focus-visible{outline:2px solid var(--logo-navy);outline-offset:2px}
.ind-item .ind-media{aspect-ratio:4/3;border-radius:0}
.ind-body{padding:22px 20px 26px}
.ind-body h3{font-size:21px;margin-bottom:10px;color:var(--ink)}
.ind-body p{
  font-size:15px;line-height:1.55;color:var(--ink-mid);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
@media(max-width:1060px){.ind-grid{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.ind-grid{grid-template-columns:1fr}}

/* ---------- generic definition rows ---------- */
.rows{border-top:1px solid var(--line)}
.row{display:grid;grid-template-columns:220px 1fr;gap:32px;padding:22px 4px;border-bottom:1px solid var(--line)}
.row .rl{font-family:var(--font-display);font-weight:600;font-size:15px}
.row p{font-size:14.5px;line-height:1.7;color:var(--ink-mid)}
.row a{color:var(--navy);text-decoration:none;border-bottom:1px solid var(--line-mid)}
.row a:hover{border-bottom-color:var(--navy)}
@media(max-width:640px){.row{grid-template-columns:1fr;gap:8px}}

/* ---------- chips ---------- */
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{
  font-family:var(--font-mono);font-size:12.5px;letter-spacing:.02em;
  padding:9px 14px;border:1px solid var(--line-mid);border-radius:2px;
  color:var(--ink-mid);text-decoration:none;background:var(--white);
  transition:border-color .15s,color .15s;
}
a.chip:hover{border-color:var(--ink);color:var(--ink)}

/* ---------- fit / not-fit ---------- */
.fit-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.fit{border:1px solid var(--line);border-radius:3px;background:var(--white);padding:34px 32px}
.fit h3{font-size:17px;margin-bottom:18px;display:flex;align-items:center;gap:10px}
.fit h3 .dot{width:9px;height:9px;border-radius:50%;flex:none}
.fit.yes h3 .dot{background:#3D8B4F}
.fit.no h3 .dot{background:#C24C3A}
.fit ul{list-style:none}
.fit li{
  font-size:14.5px;line-height:1.65;color:var(--ink-mid);
  padding:10px 0 10px 22px;border-bottom:1px solid var(--line);position:relative;
}
.fit li:last-child{border-bottom:0}
.fit li::before{content:"";position:absolute;left:2px;top:19px;width:8px;height:1.5px;background:var(--line-mid)}
@media(max-width:860px){.fit-grid{grid-template-columns:1fr}}

/* ---------- tables ---------- */
.tbl-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:3px;background:var(--white)}
table{width:100%;border-collapse:collapse;font-size:14px;min-width:680px}
th{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  text-align:left;color:var(--ink-dim);font-weight:500;
  padding:14px 20px;border-bottom:1px solid var(--line);background:var(--wash);
}
td{padding:16px 20px;border-bottom:1px solid var(--line);vertical-align:top;line-height:1.6;color:var(--ink-mid)}
td:first-child{font-weight:600;color:var(--ink);white-space:nowrap}
tr:last-child td{border-bottom:0}

/* ---------- CTA band ---------- */
.cta-band{background:var(--dark);color:var(--inv);padding:96px 0}
.cnc-cta-simple{background:var(--navy-deep)}
.cnc-cta-simple .btn-cta{background:var(--white);color:var(--navy-deep)}
.cnc-cta-simple .btn-cta:hover{background:#E9EEF7}
.cta-inner{display:grid;grid-template-columns:1.2fr .8fr;gap:64px;align-items:center}
.cta-band h2{color:var(--inv)}
.cta-band .cta-sub{color:var(--inv-mid);margin-top:16px;font-size:16.5px;max-width:480px}
.cta-side{display:flex;flex-direction:column;align-items:flex-start;gap:18px}
.cta-side .mono-note{font-family:var(--font-mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--inv-dim)}
.cta-side p{font-size:14px;color:var(--inv-mid)}
.cta-side .mail{color:var(--inv);text-decoration:none;border-bottom:1px solid #3A3F48}
.cta-side .mail:hover{border-bottom-color:var(--amber)}
@media(max-width:900px){.cta-inner{grid-template-columns:1fr;gap:40px}}

/* ---------- home final CTA (scoped) ----------
   .cta-band/.cta-side are the shared final-CTA block reused on every
   interior page; these rules only fire when the homepage's own
   .home-final-cta class is present, so no other page is affected. */
.home-final-cta{background:var(--dark-2);border-bottom:1px solid #262B33}
.home-final-cta .btn-cta{padding:17px 30px;font-size:15px}
.home-final-cta .cta-side p{color:var(--inv);font-size:15px}
.home-final-cta .mono-note{color:var(--inv-mid)}

/* ---------- forms (minimalist) ---------- */
.form{max-width:640px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 28px}
.field{margin-bottom:26px}
.field.full{grid-column:1/-1}
.field label{
  display:block;font-family:var(--font-mono);font-size:11px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-dim);margin-bottom:9px;
}
.field label em{font-style:normal;color:var(--amber-deep)}
.field input,.field textarea,.field select{
  width:100%;font:inherit;font-size:15px;color:var(--ink);
  background:transparent;border:0;border-bottom:1px solid var(--line-mid);
  padding:10px 2px 12px;border-radius:0;outline:none;
  transition:border-color .15s;
}
.field textarea{resize:vertical;min-height:120px;line-height:1.6}
.field input:focus,.field textarea:focus,.field select:focus{border-bottom-color:var(--ink)}
.field input::placeholder,.field textarea::placeholder{color:#B9BDC4}
.field.file input{border-bottom:0;padding:0;font-size:13.5px;color:var(--ink-mid)}
.field .hint{font-size:12.5px;color:var(--ink-dim);margin-top:8px;line-height:1.5}
.form .btn{margin-top:10px}
.form-note{font-size:13px;color:var(--ink-dim);margin-top:18px;line-height:1.6}
@media(max-width:640px){.form-grid{grid-template-columns:1fr}}

/* ---------- blog ---------- */
.post-list{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.post-meta{
  font-family:var(--font-mono);font-size:11.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-dim);margin-bottom:12px;
}
.article{max-width:720px;margin:0 auto}
.article .post-meta{margin-bottom:20px}
.article h1{font-size:clamp(30px,4vw,44px);letter-spacing:-.02em;margin-bottom:22px}
.article .lead{margin-bottom:40px}
.article h2{font-size:24px;margin:48px 0 16px}
.article h3{font-size:18px;margin:32px 0 12px}
.article p{margin-bottom:18px;color:var(--ink-mid)}
.article ul,.article ol{margin:0 0 18px 22px;color:var(--ink-mid)}
.article li{margin-bottom:8px}
.article strong{color:var(--ink)}
.article a{color:var(--navy)}
.article blockquote{
  border-left:2px solid var(--amber);padding:4px 0 4px 22px;margin:28px 0;
  font-family:var(--font-display);font-weight:500;font-size:18px;line-height:1.5;color:var(--ink);
}
.article hr{border:0;border-top:1px solid var(--line);margin:40px 0}
@media(max-width:900px){.post-list{grid-template-columns:1fr}}

/* ---------- footer ---------- */
.footer{background:var(--dark);color:var(--inv-mid);padding:80px 0 36px}
.footer-top{
  display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr 1fr;gap:48px;
  padding-bottom:56px;border-bottom:1px solid #262B33;
}
.flogo{display:block;margin-bottom:22px}
/* the footer runs on --dark, where the header logo's #031D53 navy would all
   but disappear — logo-ensi-light.svg is the same artwork with the two flat
   fills swapped for the palette's light pair (--inv / --inv-mid) */
.flogo-img{width:100%;max-width:240px;height:auto;display:block}
.footer-brand p{font-size:13.5px;line-height:1.75;max-width:300px}

/* footer contact block — registered entity, phone, email and address in the
   brand column. Every row is the same 2-column grid (icon | text) so the
   address, which carries no icon, still lines up with the rows above it. */
.footer-legal{
  font-size:13.5px;font-weight:600;color:var(--inv);
  margin:24px 0 14px;max-width:300px;line-height:1.5;
}
.footer-contact{list-style:none;display:grid;gap:13px;font-size:13.5px;line-height:1.65}
.fc-row{display:grid;grid-template-columns:16px 1fr;gap:11px;align-items:start}
.fc-ico{
  width:15px;height:15px;margin-top:3px;flex:none;
  fill:none;stroke:#4468C4;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
}
.fc-row a{color:var(--inv-mid);text-decoration:none;transition:color .15s}
.fc-row a:hover{color:var(--inv)}
.fc-note{display:block;font-size:12.5px;color:var(--inv-dim);margin-top:2px}
/* address has no icon of its own — push it into the text column */
.fc-addr .fc-body{grid-column:2;font-style:normal}
.footer-title{
  font-family:var(--font-mono);font-size:11px;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--inv-dim);margin-bottom:18px;
}
.footer-col a{
  display:block;font-size:14px;color:var(--inv-mid);text-decoration:none;
  padding:5px 0;transition:color .15s;
}
.footer-col a:hover{color:var(--inv)}
.footer-bottom{
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  padding-top:30px;font-size:12.5px;color:var(--inv-dim);
}
.footer-bottom a{color:var(--inv-dim);text-decoration:none}
.footer-bottom a:hover{color:var(--inv)}
/* legal links sit opposite the copyright line; the gap is sized for a row of
   several policy links, so more can be added without touching this rule */
.footer-policy{display:flex;flex-wrap:wrap;gap:28px}
@media(max-width:1000px){.footer-top{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.footer-top{grid-template-columns:1fr}}

/* ---------- WhatsApp floating contact button (every page) ----------
   Single source of truth for styling; the site has no shared-include
   mechanism (each page is a self-contained file, same as the
   duplicated header/footer), so the same markup snippet is repeated
   at the end of every page's <body>, right before js/main.js. Pure
   HTML/CSS — no JS dependency, nothing to wire up per page. */
.whatsapp-btn{
  position:fixed;right:24px;bottom:24px;z-index:1000;
  width:52px;height:52px;border-radius:50%;
  background:#25D366;display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 14px rgba(17,20,25,.22);
  text-decoration:none;
  transition:background-color .2s ease,transform .2s ease,box-shadow .2s ease;
}
.whatsapp-btn svg{width:28px;height:28px;fill:#fff;display:block}
.whatsapp-btn:hover,.whatsapp-btn:focus-visible{
  background:#20bd5c;transform:scale(1.05);
  box-shadow:0 6px 18px rgba(17,20,25,.28);
}
.whatsapp-btn:focus-visible{outline:2px solid #fff;outline-offset:3px}

.whatsapp-tip{
  position:absolute;right:calc(100% + 12px);top:50%;
  transform:translateY(-50%) translateX(4px);
  background:var(--dark-2);color:var(--inv);
  font-family:var(--font-body);font-size:13.5px;font-weight:500;line-height:1.3;
  padding:8px 14px;border-radius:4px;white-space:nowrap;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .18s ease,transform .18s ease,visibility .18s ease;
}
.whatsapp-tip::after{
  content:"";position:absolute;left:100%;top:50%;transform:translateY(-50%);
  border:5px solid transparent;border-left-color:var(--dark-2);
}
/* hover:hover keeps this desktop-only — touchscreens have no true
   hover state, so this rule never applies there and a tap can't leave
   the tooltip stuck open. */
@media(hover:hover){
  .whatsapp-btn:hover .whatsapp-tip{opacity:1;visibility:visible;transform:translateY(-50%) translateX(0)}
}
.whatsapp-btn:focus-visible .whatsapp-tip{opacity:1;visibility:visible;transform:translateY(-50%) translateX(0)}

/* the open fullscreen mobile-nav overlay (.menu.open, see nav rules
   above) sits in the same corner — hide the button while it's open
   rather than risk it floating over the menu's own CTA/links. */
body:has(.menu.open) .whatsapp-btn{display:none}

@media(max-width:640px){
  .whatsapp-btn{
    right:calc(16px + env(safe-area-inset-right,0px));
    bottom:calc(16px + env(safe-area-inset-bottom,0px));
    width:48px;height:48px;
  }
  .whatsapp-btn svg{width:26px;height:26px}
}

@media(prefers-reduced-motion:reduce){
  .whatsapp-btn,.whatsapp-tip{transition:none!important}
}

/* ---------- reveal ---------- */
.rv{opacity:0;transform:translateY(18px);transition:opacity .6s cubic-bezier(.2,.6,.2,1),transform .6s cubic-bezier(.2,.6,.2,1)}
.rv.in{opacity:1;transform:none}
.d1{transition-delay:.08s}
.d2{transition-delay:.16s}
.d3{transition-delay:.24s}
.d4{transition-delay:.32s}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rv{opacity:1;transform:none;transition:none}
}

/* ---------- utilities ---------- */
.mt-0{margin-top:0}.mt-24{margin-top:24px}.mt-40{margin-top:40px}.mt-56{margin-top:56px}
.wash{background:var(--wash)}
.center{text-align:center}

/* ---------- aspect-ratio helpers (editorial photo slots) ----------
   Square-cornered variants of .media for sections that need a specific
   crop ratio instead of the default 4:3 — radius:0 matches the flush
   photo treatment already used by .ind-media / .rpp-tile .media. */
.media.ar-32{aspect-ratio:3/2;border-radius:0}
.media.ar-1611{aspect-ratio:16/11;border-radius:0}
.media.ar-53{aspect-ratio:5/3;border-radius:0}
.media.ar-85{aspect-ratio:8/5;border-radius:0}
.media.ar-1811{aspect-ratio:18/11;border-radius:0}
.media.ar-21{aspect-ratio:2/1;border-radius:0}

/* ---------- on-dark link-arrow / rows ----------
   .link-arrow and .row p both hard-code light-background colors
   (navy / ink-mid); scope readable variants to any dark-bg ancestor —
   .row p otherwise renders dark-gray-on-navy, unreadable. */
.dark .link-arrow,.on-dark .link-arrow{color:var(--inv)}
.dark .link-arrow:hover,.on-dark .link-arrow:hover{color:var(--amber)}
.dark .rows,.on-dark .rows{border-top-color:#2A2F38}
.dark .row,.on-dark .row{border-bottom-color:#2A2F38}
.dark .row p,.on-dark .row p{color:var(--inv-mid)}

/* ---------- CNC Machining page (interior) ----------
   Page-specific sections not reused elsewhere on the site. Everything
   that already existed as a shared component (.hero, .split, .dark,
   .rows, .chips, .cta-band, .tbl-scroll) is reused as-is below in the
   HTML rather than redeclared here. */

/* Hero — reuses the homepage .hero/.hero-photo/.hero-panel components.
   Content is deliberately cut to four elements (heading, one short lead,
   one CTA, one confidentiality line) instead of the bullet list/second
   link/file-types line this used to carry, so the panel reads as calm
   and premium rather than a crowded marketing template. */
.cncp-hero .hero-panel-inner{justify-content:center}
.cncp-hero .hero-secure{display:flex;align-items:center;gap:7px}
.cncp-hero .hero-secure .lock-ic{width:13px;height:13px;flex:none;opacity:.85}

/* Hard height cap + desktop content sizing. The real outer hero wrapper
   is this same <section class="hero cncp-hero"> element — .hero is the
   grid (photo+panel columns), .cncp-hero is this page's own modifier on
   it. The shared .hero rule only sets a 560px *floor* (min-height); fixed
   height + min-height:0 + overflow:hidden below removes any
   content-driven growth entirely, so the wrapper can't grow past 580px
   regardless of what the panel content needs. .hero-photo/.hero-panel
   are the actual left/right columns, held to height:100% of that box. */
@media (min-width:1024px){
  .cncp-hero{
    height:580px;
    min-height:0!important;
    max-height:580px;
    overflow:hidden;
  }
  .cncp-hero .hero-photo,
  .cncp-hero .hero-panel{
    height:100%;
    min-height:0;
  }
  .cncp-hero .hero-photo{
    position:relative;
    overflow:hidden;
  }
  .cncp-hero .hero-photo-img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    max-width:none;
    object-fit:cover;
    object-position:center;
  }
  /* content group: left-aligned, capped well short of the full column so
     it reads as an intentional composition with room around it, not a
     block of text filling the panel */
  .cncp-hero .hero-main{max-width:540px}
  .cncp-hero .hero-h1{font-size:50px;line-height:1.08}
  .cncp-hero .hero-lead{margin-top:20px;font-size:17.5px;line-height:1.55;color:#BCC1C9;max-width:100%}
  .cncp-hero .hero-cta{margin-top:30px}
  .cncp-hero .hero-secure{margin-top:15px}
}

/* ---------- CNC Machining in-page section nav ----------
   Sits directly below the hero; scoped entirely to this page via
   .cncp-subnav (no shared class touched). Sticks under the main header
   once scrolled past, with a scrollspy-driven underline (js/main.js). */
.cncp-subnav{
  position:sticky;top:var(--nav-h);z-index:90;
  background:var(--paper);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.cncp-subnav.is-stuck{
  background:rgba(252,251,248,.92);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  box-shadow:0 8px 20px rgba(17,20,25,.06);
}
.cncp-subnav-inner{
  position:relative;
  display:flex;align-items:center;justify-content:space-between;
  height:80px;
}
.cncp-subnav-link{
  position:relative;flex:none;
  font-size:14.5px;font-weight:500;color:var(--ink-mid);text-decoration:none;
  padding:8px 2px;
  transition:color .2s ease,transform .2s ease;
}
.cncp-subnav-link::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:var(--ink-mid);opacity:0;transform:scaleX(0);transition:opacity .2s ease,transform .2s ease;
}
@media(hover:hover){
  .cncp-subnav-link:hover{color:var(--ink);transform:translateY(-2px)}
  .cncp-subnav-link:hover::after{opacity:.3;transform:scaleX(1)}
}
.cncp-subnav-link:focus-visible{outline:2px solid var(--amber);outline-offset:3px;border-radius:2px}
.cncp-subnav-link.active{color:var(--ink);font-weight:600}
.cncp-subnav-indicator{
  position:absolute;left:0;bottom:-1px;height:2px;width:0;
  background:var(--amber);
  transition:transform .28s cubic-bezier(.4,0,.2,1),width .28s cubic-bezier(.4,0,.2,1);
}
@media(prefers-reduced-motion:reduce){
  .cncp-subnav-link,.cncp-subnav-link::after,.cncp-subnav-indicator{transition:none!important}
}
@media(max-width:980px){
  .cncp-subnav-inner{
    justify-content:flex-start;gap:28px;height:64px;
    overflow-x:auto;scrollbar-width:none;
  }
  .cncp-subnav-inner::-webkit-scrollbar{display:none}
  .cncp-subnav-link{white-space:nowrap}
}

/* Anchor targets for the in-page nav — clears the sticky header (--nav-h,
   76px) plus the sticky sub-nav (80px) with a little breathing room.
   Scoped to sections after .cncp-hero (general sibling combinator) so it
   can't leak onto same-named #faq/#materials/etc. ids on other pages. */
.cncp-hero ~ section[id]{scroll-margin-top:161px}

/* CNC Milling / Turning capabilities — one asymmetric editorial block
   instead of two equal cards: milling is the large primary row, turning
   a smaller secondary row offset opposite and divided by a hairline. */
.mt-cap{display:grid;grid-template-columns:1.35fr 1fr;gap:56px;align-items:center}
.mt-cap-body h3{font-size:27px;margin-bottom:14px}
.mt-cap-sub{grid-template-columns:1fr 1.05fr;margin-top:64px;padding-top:56px;border-top:1px solid var(--line)}
.mt-cap-sub .mt-cap-body h3{font-size:21px}
.mt-cap-body .cap-specs{margin-top:18px}
@media(max-width:900px){
  .mt-cap,.mt-cap-sub{grid-template-columns:1fr;gap:28px}
  .mt-cap-sub{margin-top:40px;padding-top:40px}
}

/* Machining capacity — full-width dark band with the complete table and
   image sharing one row. Overrides stay inside #capacity so the shared
   table and media components remain unchanged everywhere else. */
#capacity>.wrap{max-width:none;padding-right:clamp(28px,3vw,56px);padding-left:clamp(28px,3vw,56px)}
.cncp-capacity-split{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:28px;align-items:stretch;
}
.cncp-capacity-split .dark-tbl{min-width:0;overflow:visible;border-radius:0}
.cncp-capacity-split table{width:100%;min-width:0;height:100%;table-layout:fixed}
.cncp-capacity-split td{overflow-wrap:anywhere}
.cncp-capacity-split td:first-child{width:39%;white-space:normal}
.cncp-capacity-media{width:100%;height:100%;min-height:100%;aspect-ratio:auto;align-self:stretch}

/* CNC tolerances — image-free engineering specification layout. The
   reference-style table remains continuous rather than becoming cards. */
#tolerances .cncp-tolerance-layout{
  display:grid;grid-template-columns:minmax(300px,.82fr) minmax(0,1.18fr);
  gap:clamp(56px,7vw,104px);align-items:start;
}
#tolerances .cncp-tolerance-intro{padding-top:6px}
#tolerances .cncp-tolerance-intro .lead{max-width:480px;margin-top:20px}
#tolerances .cncp-tolerance-specs{margin:0;border-color:#353B45}
#tolerances .cncp-tolerance-specs .row{
  grid-template-columns:minmax(170px,.7fr) minmax(0,1.3fr);
  gap:clamp(28px,4vw,60px);padding:28px 0;border-color:#2A3039;
}
#tolerances .cncp-tolerance-specs .rl{font-size:16px;line-height:1.45;color:var(--inv)}
#tolerances .cncp-tolerance-specs p{font-size:15px;line-height:1.7;color:var(--inv-mid)}
@media(max-width:900px){
  #tolerances .cncp-tolerance-layout{grid-template-columns:1fr;gap:48px}
  #tolerances .cncp-tolerance-intro .lead{max-width:680px}
}
@media(max-width:560px){
  #tolerances .cncp-tolerance-specs .row{grid-template-columns:1fr;gap:9px;padding:23px 0}
}

.tbl-scroll.dark-tbl{border-color:#2A2F38;background:var(--dark-2)}
.dark-tbl th{background:#1E222A;color:var(--inv-dim);border-color:#2A2F38}
.dark-tbl td{color:var(--inv-mid);border-color:#2A2F38}
.dark-tbl td:first-child{color:var(--inv)}
@media(max-width:900px){
  .cncp-capacity-split{grid-template-columns:1fr;gap:28px}
  .cncp-capacity-media{height:auto;min-height:0;aspect-ratio:5/3}
}

/* CNC machining materials — a scoped material browser inspired by the
   reference's navigation/detail logic, rebuilt in ENSI's own palette.
   The media area is a real workshop photo rather than a video player. */
.cncp-materials-sec .sec-head{max-width:760px;margin-right:auto;margin-left:auto;text-align:center}
.cncp-material-browser{
  display:grid;grid-template-columns:272px minmax(0,1fr);min-height:620px;
  overflow:hidden;border:1px solid var(--line);border-radius:16px;background:var(--white);
  box-shadow:0 18px 50px rgba(17,20,25,.07);
}
.cncp-material-rail{
  max-height:620px;overflow-y:auto;background:var(--wash);border-right:1px solid var(--line);
  scrollbar-width:thin;scrollbar-color:var(--line-mid) transparent;
}
.cncp-material-rail::-webkit-scrollbar{width:5px}
.cncp-material-rail::-webkit-scrollbar-thumb{background:var(--line-mid);border-radius:10px}
.cncp-material-group{padding:24px 18px 18px}
.cncp-material-group + .cncp-material-group{border-top:1px solid var(--line)}
.cncp-material-group-h{
  padding:0 8px 13px;
  font-family:var(--font-mono);font-size:11px;font-weight:500;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-dim);
}
.cncp-material-list{display:flex;flex-direction:column;gap:3px}
.cncp-material-item{
  position:relative;display:flex;width:100%;align-items:center;justify-content:flex-start;
  min-height:46px;padding:0 12px 0 16px;border-radius:8px;
  border:0;background:transparent;color:var(--ink-mid);font-family:inherit;
  font-size:14px;font-weight:500;text-align:left;cursor:pointer;
  transition:background-color .2s,color .2s,transform .2s;
}
.cncp-material-item::before{
  content:"";position:absolute;left:0;top:10px;bottom:10px;width:2px;border-radius:2px;
  background:var(--amber);transform:scaleY(0);transition:transform .2s;
}
.cncp-material-item:hover{background:var(--white);color:var(--ink);transform:translateX(3px)}
.cncp-material-item:hover::before,.cncp-material-item.active::before{transform:scaleY(1)}
.cncp-material-item.active{background:var(--white);color:var(--ink);box-shadow:0 5px 16px rgba(17,20,25,.06)}
.cncp-material-item:focus-visible{outline:2px solid var(--logo-navy);outline-offset:2px}
.cncp-material-feature{display:grid;grid-template-columns:minmax(0,1.18fr) minmax(320px,.82fr);min-width:0}
.cncp-material-photo{
  position:relative;min-width:0;min-height:620px;overflow:hidden;
  background:
    linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px),
    linear-gradient(160deg,var(--dark-2),var(--dark) 70%);
  background-size:28px 28px,28px 28px,100% 100%;
}
.cncp-material-photo::before{
  content:"";position:absolute;top:18px;left:20px;width:28px;height:28px;
  border-top:1px solid #3A3F48;border-left:1px solid #3A3F48;
}
.cncp-material-photo::after{
  content:attr(data-file) "\A" attr(data-dims);white-space:pre-line;
  position:absolute;left:22px;right:22px;bottom:20px;
  font-family:var(--font-mono);font-size:11px;line-height:1.65;letter-spacing:.02em;
  overflow-wrap:anywhere;color:var(--inv-dim);
}
.cncp-material-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cncp-material-photo.loaded::before,.cncp-material-photo.loaded::after{display:none}
.cncp-material-copy{display:flex;flex-direction:column;padding:46px 38px 38px;background:var(--white)}
.cncp-material-copy h3{font-size:31px;line-height:1.1;margin-bottom:20px;color:var(--ink)}
.cncp-material-copy > p{font-size:15px;line-height:1.72;color:var(--ink-mid)}
.cncp-material-facts{margin-top:30px;border-top:1px solid var(--line)}
.cncp-material-facts div{padding:16px 0;border-bottom:1px solid var(--line)}
.cncp-material-facts dt{
  margin-bottom:6px;font-family:var(--font-mono);font-size:10.5px;font-weight:500;
  letter-spacing:.09em;text-transform:uppercase;color:var(--ink-dim);
}
.cncp-material-facts dd{font-size:13.5px;line-height:1.55;color:var(--ink)}
.cncp-material-guide{
  display:inline-flex;align-items:center;gap:9px;margin-top:auto;padding-top:30px;
  font-size:14px;font-weight:600;color:var(--logo-navy);text-decoration:none;
}
.cncp-material-guide .arr{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.2;transition:transform .2s}
.cncp-material-guide:hover .arr{transform:translateX(4px)}
@keyframes cncp-material-swap{
  from{opacity:.35;transform:translateY(7px)}
  to{opacity:1;transform:translateY(0)}
}
.cncp-material-feature.material-swap .cncp-material-photo,
.cncp-material-feature.material-swap .cncp-material-copy{animation:cncp-material-swap .28s ease both}
@media(max-width:1080px){
  .cncp-material-browser{grid-template-columns:238px minmax(0,1fr)}
  .cncp-material-feature{grid-template-columns:1fr}
  .cncp-material-photo{min-height:340px}
  .cncp-material-copy{padding:34px 32px}
}
@media(max-width:760px){
  .cncp-material-browser{grid-template-columns:1fr}
  .cncp-material-rail{
    display:flex;max-width:100%;max-height:none;overflow-x:auto;overflow-y:hidden;
    border-right:0;border-bottom:1px solid var(--line);scroll-snap-type:x mandatory;
  }
  .cncp-material-group{flex:0 0 min(82vw,300px);scroll-snap-align:start}
  .cncp-material-group + .cncp-material-group{border-top:0;border-left:1px solid var(--line)}
  .cncp-material-photo{min-height:360px}
}
@media(max-width:560px){
  .cncp-material-photo{min-height:300px}
  .cncp-material-copy{padding:30px 24px}
  .cncp-material-copy h3{font-size:27px}
}
@media(prefers-reduced-motion:reduce){
  .cncp-material-item,.cncp-material-item::before,.cncp-material-guide .arr{transition:none!important}
  .cncp-material-feature.material-swap .cncp-material-photo,
  .cncp-material-feature.material-swap .cncp-material-copy{animation:none!important}
}

/* Suitable CNC projects — one large image beside a concise checklist,
   amber dot bullets matching .hero-points/.rpp-list elsewhere on-brand. */
.cncp-list{list-style:none}
.cncp-list li{position:relative;padding-left:18px;margin-bottom:12px;font-size:14.5px;line-height:1.6;color:var(--ink-mid)}
.cncp-list li:last-child{margin-bottom:0}
.cncp-list li::before{content:"";position:absolute;left:0;top:8px;width:5px;height:5px;border-radius:50%;background:var(--amber)}

/* Shared 50/50 split used by Materials-image-side, Surface finishes,
   and Suitable-projects sections. */
.cncp-split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
@media(max-width:900px){.cncp-split{grid-template-columns:1fr;gap:28px}}

/* ---------- CNC Machining — Precision Manufacturing Route (process) ----------
   Replaces the old four-column "how to order" grid. Desktop: a tall
   scroll wrapper (.mtp-stagewrap) pins an inner two-column stage
   (.mtp-stage, position:sticky) while native JS (js/main.js) draws a
   CNC-toolpath SVG route on the left and swaps step copy on the right
   as scroll progress moves 0→1. --mtp-sticky-top is measured from the
   real header (--nav-h) + .cncp-subnav heights at runtime — the value
   below is only the pre-JS fallback so nothing jumps on first paint.
   Below 768px the whole interactive stage collapses to a plain static
   vertical list (see the max-width:767px block) — no sticky, no SVG,
   no JS-driven swapping, every step fully visible at once. */
.mtp-process{padding:104px 0 0;--mtp-sticky-top:156px}
.mtp-intro{max-width:640px}
/* editorial kicker — deliberately its own class, not the sitewide .kick
   (used 39x elsewhere): no box, no color-as-badge; a short amber rule
   plus muted dark-gray type carries it instead. */
.mtp-kick{
  display:flex;align-items:center;gap:14px;margin-bottom:20px;
  font-family:var(--font-mono);font-size:12px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-mid);
}
.mtp-kick::before{content:"";width:28px;height:1.5px;background:var(--amber);flex:none}
.mtp-h2{
  font-family:var(--font-display);font-weight:700;line-height:1.1;
  letter-spacing:-.02em;font-size:clamp(36px,3.6vw,54px);
  max-width:600px;color:var(--ink);
}
.mtp-lead{margin-top:20px;font-size:20px;line-height:1.65;color:var(--ink-mid);max-width:520px}

/* sticky stage */
.mtp-stagewrap{position:relative;height:150vh;margin-top:64px}
.mtp-stage{
  position:sticky;top:var(--mtp-sticky-top);
  height:min(660px,calc(100vh - var(--mtp-sticky-top) - 40px));
  min-height:420px;display:flex;align-items:center;
}
.mtp-stage-inner{
  display:grid;grid-template-columns:1.62fr 1fr;gap:clamp(32px,4vw,64px);
  align-items:center;width:100%;
}

/* left: CNC toolpath route */
.mtp-route{position:relative;height:clamp(360px,44vh,520px);min-height:320px}
.mtp-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.mtp-path-base{fill:none;stroke:var(--line-mid);stroke-width:1.25;stroke-linecap:round;stroke-linejoin:round}
.mtp-path-active{fill:none;stroke:var(--navy);stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}

.mtp-node{transform-box:fill-box;transform-origin:center;transition:transform .38s cubic-bezier(.22,1,.36,1)}
.mtp-node.is-active{transform:scale(1.1)}
/* the ring is the decorative outline; the dot is sized to fill most of
   its interior so it reads as a solid plate the number sits on, rather
   than a thin ring with the route line still visible crossing behind
   the number (the previous, too-faint version's main legibility bug) */
.mtp-node-ring{fill:none;stroke:var(--line-mid);stroke-width:1.75;transition:stroke .35s ease,stroke-width .35s ease}
.mtp-node-dot{fill:var(--paper);stroke:var(--line-mid);stroke-width:1.75;transition:fill .35s ease,stroke .35s ease}
.mtp-node-num{font-family:var(--font-mono);font-size:15px;font-weight:600;fill:var(--ink-mid);transition:fill .35s ease}
.mtp-node-label{
  font-family:var(--font-mono);font-size:12px;font-weight:500;letter-spacing:.08em;
  text-transform:uppercase;fill:var(--ink-mid);transition:fill .35s ease;
}
.mtp-node.is-active .mtp-node-ring{stroke:var(--amber);stroke-width:2}
.mtp-node.is-active .mtp-node-dot{fill:var(--navy);stroke:var(--navy)}
.mtp-node.is-active .mtp-node-num{fill:var(--paper)}
.mtp-node.is-active .mtp-node-label{fill:var(--ink)}
.mtp-node.is-done .mtp-node-ring{stroke:var(--navy);stroke-width:2}
.mtp-node.is-done .mtp-node-dot{fill:var(--navy);stroke:var(--navy)}
.mtp-node.is-done .mtp-node-num{fill:var(--paper)}
.mtp-node.is-done .mtp-node-label{fill:var(--ink-mid)}

.mtp-indicator{transform-box:fill-box;transform-origin:center}
.mtp-indicator-ring{fill:none;stroke:var(--navy);stroke-width:1.25;opacity:.4}
.mtp-indicator-dot{fill:var(--navy)}
.mtp-indicator.is-pulse .mtp-indicator-ring{animation:mtp-pulse .5s ease-out}
@keyframes mtp-pulse{0%{r:11;opacity:.5}100%{r:20;opacity:0}}

/* technical background microcopy — decorative, aria-hidden on the parent.
   Kept restrained but legible: readable at a glance without competing
   with the route or the step panel. */
.mtp-tick{
  position:absolute;font-family:var(--font-mono);font-size:11px;line-height:1.55;
  letter-spacing:.07em;text-transform:uppercase;color:var(--ink-mid);opacity:.55;
}
.mtp-tick-coord{top:0;left:0}
.mtp-tick-route{top:0;right:0;text-align:right}
.mtp-tick-start{left:1%;bottom:8%}
.mtp-tick-finish{right:0;bottom:26%;text-align:right}
.mtp-route::before{
  content:"";position:absolute;inset:8% 5%;
  background-image:
    linear-gradient(var(--line) 1px,transparent 1px),
    linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:38px 38px;opacity:.24;
}
.mtp-route::after{
  content:"";position:absolute;top:0;left:0;width:22px;height:22px;
  border-top:1px solid var(--line-mid);border-left:1px solid var(--line-mid);opacity:.6;
}

/* right: active-step panel */
.mtp-panel{position:relative;padding-left:40px;border-left:1px solid var(--line)}
.mtp-steps{display:grid;list-style:none;margin:0;padding:0;min-height:190px}
.mtp-step{grid-area:1/1;visibility:hidden;transition:visibility 0s linear .45s}
.mtp-step.is-active{visibility:visible;transition-delay:0s}
.mtp-step-count,.mtp-step-title,.mtp-step-desc,.mtp-step-meta{
  opacity:0;transform:translateY(14px);
  transition:opacity .42s cubic-bezier(.22,1,.36,1),transform .42s cubic-bezier(.22,1,.36,1);
}
.mtp-step.is-leaving .mtp-step-count,
.mtp-step.is-leaving .mtp-step-title,
.mtp-step.is-leaving .mtp-step-desc,
.mtp-step.is-leaving .mtp-step-meta{transform:translateY(-12px);opacity:0;transition-delay:0s!important}
.mtp-step.is-active .mtp-step-count{transition-delay:.02s}
.mtp-step.is-active .mtp-step-title{transition-delay:.06s}
.mtp-step.is-active .mtp-step-desc{transition-delay:.1s}
.mtp-step.is-active .mtp-step-meta{transition-delay:.13s}
.mtp-step.is-active .mtp-step-count,
.mtp-step.is-active .mtp-step-title,
.mtp-step.is-active .mtp-step-desc,
.mtp-step.is-active .mtp-step-meta{opacity:1;transform:translateY(0)}

.mtp-step-count{
  display:block;font-family:var(--font-mono);font-size:15.5px;font-weight:600;
  color:var(--amber-deep);letter-spacing:.05em;margin-bottom:16px;
}
.mtp-step-title{font-size:clamp(28px,2.8vw,36px);margin-bottom:16px;color:var(--ink)}
.mtp-step-desc{font-size:17.5px;line-height:1.7;color:var(--ink-mid);max-width:410px}
.mtp-step-meta{margin-top:24px;padding-top:18px;border-top:1px solid var(--line)}
.mtp-step-meta-l{
  display:block;font-family:var(--font-mono);font-size:11.5px;font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-mid);margin-bottom:7px;
}
.mtp-step-meta-v{font-size:15px;color:var(--ink)}

.mtp-cta,.mtp-cta.is-final{margin-top:32px;background:var(--logo-navy);color:var(--white)}
.mtp-cta:hover,.mtp-cta.is-final:hover{background:var(--logo-navy-light)}
.mtp-cta:focus-visible{outline:2px solid var(--logo-navy);outline-offset:3px}

.mtp-progress{display:flex;align-items:center;gap:14px;margin-top:34px}
.mtp-progress-num{font-family:var(--font-mono);font-size:11px;color:var(--ink-dim);flex:none}
.mtp-progress-track{flex:1;height:2px;background:var(--line-mid);position:relative}
.mtp-progress-fill{position:absolute;inset:0;width:25%;background:var(--navy);transition:width .4s cubic-bezier(.22,1,.36,1)}

@media(prefers-reduced-motion:reduce){
  .mtp-node,.mtp-node-ring,.mtp-node-dot,.mtp-node-num,.mtp-node-label,
  .mtp-step,.mtp-step-count,.mtp-step-title,.mtp-step-desc,.mtp-step-meta,
  .mtp-progress-fill,.mtp-path-active,.mtp-indicator-ring{transition:none!important;animation:none!important}
}

@media(max-width:1080px){
  .mtp-stage-inner{grid-template-columns:1.4fr 1fr;gap:32px}
}

@media(max-height:820px) and (min-width:768px){
  .mtp-stagewrap{height:150vh}
  .mtp-route::before{inset:5% 3%}
  .mtp-step-title{margin-bottom:10px}
  .mtp-step-meta{margin-top:16px;padding-top:14px}
  .mtp-cta{margin-top:22px}
  .mtp-progress{margin-top:22px}
}

/* mobile: plain static vertical workflow — no sticky, no SVG, no swap */
@media(max-width:767px){
  .mtp-process{padding:72px 0 0}
  .mtp-h2{max-width:none}
  .mtp-stagewrap{height:auto;margin-top:44px}
  .mtp-stage{position:static;top:auto;height:auto;min-height:0;display:block}
  .mtp-stage-inner{display:block;width:auto}
  .mtp-route{display:none}

  .mtp-panel{padding-left:0;border-left:0}
  .mtp-steps{display:block;min-height:0}
  .mtp-step{
    grid-area:auto;position:relative;visibility:visible!important;
    padding-left:52px;padding-bottom:40px;
    opacity:0;transform:translateY(10px);
    transition:opacity .5s ease,transform .5s ease;
  }
  .mtp-step:last-child{padding-bottom:0}
  .mtp-step.mtp-in-view{opacity:1;transform:translateY(0)}
  .mtp-step::before{
    content:attr(data-step);position:absolute;left:0;top:0;width:30px;height:30px;
    display:flex;align-items:center;justify-content:center;
    font-family:var(--font-mono);font-size:12px;font-weight:600;color:var(--ink-mid);
    background:var(--paper);border:1.75px solid var(--line-mid);border-radius:50%;
    transition:background-color .3s ease,border-color .3s ease,color .3s ease;
  }
  .mtp-step.mtp-in-view::before{background:var(--navy);border-color:var(--navy);color:var(--paper)}
  .mtp-step::after{
    content:"";position:absolute;left:14px;top:30px;bottom:-40px;width:1.5px;
    background:var(--line-mid);transition:background-color .4s ease;
  }
  .mtp-step:last-child::after{display:none}
  .mtp-step.mtp-in-view::after{background:var(--navy)}
  .mtp-step-count,.mtp-step-title,.mtp-step-desc,.mtp-step-meta{
    opacity:1;transform:none;transition:none;transition-delay:0s;
  }
  .mtp-step-title{font-size:25px}
  .mtp-step-desc{font-size:16.5px;max-width:none}
  .mtp-cta{margin-top:8px;width:100%;justify-content:center}
  .mtp-progress{display:none}
}
@media(max-width:767px) and (prefers-reduced-motion:reduce){
  .mtp-step{transition:none!important;opacity:1;transform:none}
}

/* FAQ — native <details>/<summary> accordion, no JS required. */
.faq-list{border-top:1px solid var(--line)}
.faq-item{border-bottom:1px solid var(--line)}
.faq-item summary{
  cursor:pointer;padding:22px 2px;list-style:none;
  display:flex;justify-content:space-between;align-items:center;gap:24px;
  font-family:var(--font-display);font-weight:600;font-size:16px;color:var(--ink);
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{
  content:"+";flex:none;font-family:var(--font-mono);font-size:20px;
  font-weight:400;color:var(--ink-dim);
}
.faq-item[open] summary::after{content:"\2013"}
.faq-item p{padding:0 26px 24px 2px;max-width:760px;font-size:14.5px;line-height:1.7;color:var(--ink-mid)}

/* ---------- homepage FAQ (replaces the old dark final CTA) ----------
   Two-column arrangement of the shared .faq-item accordion above —
   .faq-item's own summary/icon rules are reused as-is; this only adds
   the grid wrapper and, unlike the single-column version on the
   service pages, an open/close height animation. Native <details>
   hides everything but <summary> via the UA stylesheet's own
   display:none when closed, which can't be transitioned — .faq-a is
   forced to stay display:grid regardless of [open] (an ordinary author
   rule already outranks that UA default), so grid-template-rows can
   animate the collapse instead; .faq-a-in clips the content so the
   0fr track has something to shrink. */
.home-faq .wrap{max-width:1200px}
.home-faq{padding-bottom:80px}
.faq-grid{display:grid;grid-template-columns:1fr 1fr;column-gap:56px;border-top:1px solid var(--line-mid)}
.faq-grid .faq-item{border-bottom:1px solid var(--line-mid);transition:background-color .25s ease}
.faq-grid .faq-item[open]{background:var(--wash)}
.faq-grid .faq-item summary{
  padding:26px 4px;font-size:17px;
  transition:color .2s ease;
}
.faq-grid .faq-item summary::after{font-size:24px;color:var(--ink-mid)}
.faq-grid .faq-item summary:focus-visible{outline:2px solid var(--logo-navy);outline-offset:2px}
.faq-grid .faq-item[open] summary{color:var(--logo-navy)}
.faq-grid .faq-item[open] summary::after{color:var(--logo-navy)}
.faq-grid .faq-item .faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .32s ease}
.faq-grid .faq-item[open] .faq-a{grid-template-rows:1fr}
.faq-grid .faq-item .faq-a-in{overflow:hidden;min-height:0}
.faq-grid .faq-item p{padding:0 26px 24px 2px;max-width:460px;line-height:1.7}
@media(max-width:760px){.faq-grid{grid-template-columns:1fr;column-gap:0}}
@media(prefers-reduced-motion:reduce){
  .faq-grid .faq-item .faq-a,.faq-grid .faq-item{transition:none!important}
}

.faq-cta{text-align:center;margin-top:40px;padding-top:32px;border-top:1px solid var(--line)}
.faq-cta p{font-size:15.5px;color:var(--ink-mid);margin-bottom:18px}

/* ---------- CNC Milling page (interior) ----------
   Only the hero stays page-specific (kept unchanged by request). Every
   section below it reuses the CNC Turning page's .cnct-* classes and
   shared atoms (.hero, .media, .sec, .dark, .rows, .chips, .tbl-scroll,
   .cta-band, .faq-list) directly, so the two pages share one layout
   system and section rhythm instead of duplicate, parallel CSS. */

/* Hero — a restrained service introduction: text and one action on the
   left, one named image slot on the right. All overrides are page-scoped. */
.cncm-hero{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);min-height:500px;background:var(--wash)}
.cncm-hero .hero-panel{background:var(--wash);color:var(--ink)}
.cncm-hero .hero-panel-inner{justify-content:center;padding:72px clamp(44px,6vw,96px)}
.cncm-hero .hero-main{max-width:520px}
.cncm-hero .hero-h1{font-size:clamp(42px,4.2vw,60px);color:var(--ink)}
.cncm-hero .hero-lead{max-width:500px;margin-top:22px;font-size:18px;line-height:1.7;color:var(--ink-mid)}
.cncm-hero .hero-cta{margin-top:32px;background:var(--logo-navy);color:var(--white)}
.cncm-hero .hero-cta:hover{background:var(--logo-navy-light)}
.cncm-hero .hero-photo{background:var(--wash)}
@media(min-width:981px){
  .cncm-hero .hero-photo-img{transform:scale(1.12)}
}
@media(max-width:980px){
  .cncm-hero{grid-template-columns:1fr;min-height:0}
  .cncm-hero .hero-panel-inner{padding:56px 28px}
  .cncm-hero .hero-photo{border-top:1px solid var(--line);border-left:0}
}
@media(max-width:560px){
  .cncm-hero .hero-panel-inner{padding:44px 24px}
  .cncm-hero .hero-h1{font-size:38px}
}

/* Sections below the CNC Milling hero reuse the CNC Turning page's
   .cnct-* component classes directly (cap-cards, mf-grid, capacity-split,
   design-grid, timeline, note) so both pages share one layout system and
   section rhythm — see the CNC Turning block below for those rules. */

/* ---------- CNC Turning page (interior) ----------
   Redesigned as a shorter, denser premium page (simplification pass) —
   the original 14-section build merged down to 9, with no in-page
   anchor nav. Shared atoms (.hero, .media, .sec, .dark, .rows, .chips,
   .cncp-list, .tbl-scroll, .cta-band, .faq-list) are reused as-is in
   the HTML; the compositions below are unique to this page. Only three
   sections are dark — hero, capacity, final CTA — everything else
   (capabilities, materials, engineering review, prototype-to-
   production) is intentionally light and text-led, with photography
   reduced to three images total instead of the previous sixteen. */

/* Hero — mirrors the CNC Milling hero's mechanics exactly (warm-wash
   panel left, one large image right, min-height:500px, identical
   breakpoints) under its own decoupled class per your request to match
   that page's restraint. Deliberately minimal: headline, one short
   lead, one CTA — no bullet points, no metrics row, no secondary link,
   no in-page nav. The previous richer hero (two CTAs, three-metric
   stat row, dark navy panel, sticky subnav) has been removed outright,
   not just hidden. */
.cnct-hero{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);min-height:500px;background:var(--wash)}
.cnct-hero .hero-panel{background:var(--wash);color:var(--ink)}
.cnct-hero .hero-panel-inner{justify-content:center;padding:72px clamp(44px,6vw,96px)}
.cnct-hero .hero-main{max-width:520px}
.cnct-hero .hero-h1{font-size:clamp(42px,4.2vw,60px);color:var(--ink)}
.cnct-hero .hero-lead{max-width:500px;margin-top:22px;font-size:18px;line-height:1.7;color:var(--ink-mid)}
.cnct-hero .hero-cta{margin-top:32px;background:var(--logo-navy);color:var(--white)}
.cnct-hero .hero-cta:hover{background:var(--logo-navy-light)}
.cnct-hero .hero-photo{background:var(--wash)}
@media(min-width:981px){
  .cnct-hero .hero-photo-img{transform:scale(1.12)}
}
@media(max-width:980px){
  .cnct-hero{grid-template-columns:1fr;min-height:0}
  .cnct-hero .hero-panel-inner{padding:56px 28px}
  .cnct-hero .hero-photo{border-top:1px solid var(--line)}
}
@media(max-width:560px){
  .cnct-hero .hero-panel-inner{padding:44px 24px}
  .cnct-hero .hero-h1{font-size:38px}
}

/* CNC Turning Capabilities — one main image, then three compact
   capability cards (hairline seams, no shadow/radius) merging what
   were three separate sections in the previous build. */
.cnct-cap-cards{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line);margin-top:40px;
}
.cnct-cap-card{background:var(--paper);padding:30px 28px}
.cnct-cap-card h3{font-size:17px;margin-bottom:10px}
.cnct-cap-card p{font-size:14px;line-height:1.65;color:var(--ink-mid)}
@media(max-width:760px){
  .cnct-cap-cards{grid-template-columns:1fr}
}

/* CNC Turning Capacity — dark technical band, spec table + one image.
   The only dark section besides the hero and final CTA; carries the
   shop-capability side of tolerance/finish/inspection. The matching
   customer-facing drawing guidance for the same topics lives, in light
   form, in Engineering Review Before Production below. */
.cnct-capacity-split{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}
@media(min-width:901px){
  .cnct-capacity-split .tbl-scroll{order:2}
  .cnct-capacity-split .media{order:1}
}
@media(max-width:900px){.cnct-capacity-split{grid-template-columns:1fr}}

/* Materials & Finishes — redesigned as a clean two-column specification
   layout (redesign pass), replacing the previous chip/tag grid. Items
   render as a plain text-list system (subtle per-row bottom border, a
   two-column sub-grid within each material/finish group) instead of
   boxed tags — per the brief, this is informational content, not an
   interactive filter UI, so linked items (a few materials link out to
   materials.html) look identical to plain text at rest and only shift
   to navy on hover/focus. The vertical divider is centered in an 80px
   gap via matched left/right column padding rather than CSS grid-gap,
   which would push a border flush to one side instead of centering it.
   On mobile the divider rotates to horizontal between the two stacked
   columns. */
.cnct-mf-head{max-width:620px;margin-bottom:36px}

.cnct-mf-grid{display:grid;grid-template-columns:1fr 1fr;align-items:start}
.cnct-mf-col:first-child{padding-right:40px}
.cnct-mf-col:last-child{padding-left:40px;border-left:1px solid var(--line)}
.cnct-mf-col h3{font-size:22px;margin-bottom:32px}

.cnct-mf-group+.cnct-mf-group{margin-top:32px}
.cnct-mf-group-label{
  font-family:var(--font-mono);font-size:11.5px;font-weight:500;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-dim);margin-bottom:14px;
}

.cnct-mf-list{list-style:none;margin:0;display:grid;grid-template-columns:1fr 1fr;column-gap:20px}
.cnct-mf-list li{
  padding:14px 0;border-bottom:1px solid var(--line);
  font-size:15.5px;line-height:1.4;color:var(--ink);
}
.cnct-mf-list a{color:inherit;text-decoration:none;transition:color .15s ease}
.cnct-mf-list a:hover,.cnct-mf-list a:focus-visible{color:var(--navy)}

.cnct-mf-note{margin-top:20px;font-size:13.5px;line-height:1.6;color:var(--ink-dim)}
.cnct-mf-link{margin-top:32px}

@media(max-width:768px){
  .cnct-mf-grid{grid-template-columns:1fr}
  .cnct-mf-col:first-child{
    padding-right:0;padding-bottom:36px;margin-bottom:36px;
    border-bottom:1px solid var(--line);
  }
  .cnct-mf-col:last-child{padding-left:0;border-left:0}
}
@media(max-width:480px){
  .cnct-mf-list{grid-template-columns:1fr}
}

/* Engineering Review Before Production — two independent .rows lists
   side by side; merges the old dark tolerances section and the old
   design-considerations section into one light, focused set. */
.cnct-design-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 56px}
/* 900px, not the usual 760px — each column nests a full .row (fixed
   220px label + 1fr text), and that 1fr track won't shrink below its
   own content width. Below ~900px two such columns side by side
   overflow the viewport; collapsing to one column earlier gives each
   .row its full content width instead. */
@media(max-width:900px){.cnct-design-grid{grid-template-columns:1fr}}

/* Shared small technical note — used after the capabilities, capacity,
   and engineering-review sections. Readable on light and dark
   backgrounds alike. */
.cnct-note{font-size:13.5px;line-height:1.65;color:var(--ink-dim);max-width:760px}
.dark .cnct-note,.on-dark .cnct-note{color:var(--inv-dim)}

/* Prototype to Production — premium manufacturing-process timeline
   (redesign pass, replacing the previous five-column bordered grid).
   One continuous rail spans the five step centers at 10%/30%/50%/70%/
   90% of the container (exact math only holds with zero grid-gap —
   each .cnct-timeline-step keeps its own internal padding instead of
   a grid gap, so its box, and the 50% used to center its node, still
   equals the true track center). A dark navy progress line draws over
   the rail on first scroll into view; a small amber "toolpath" point
   is a ::after glued to the progress line's own trailing edge, so it
   travels automatically as the line grows — no separate synced
   animation. Nodes sit hollow/muted until the point reaches them, then
   light up amber (color budget: amber is step numbers, active nodes,
   and the point only — the line itself stays navy). Reveal is a single
   IntersectionObserver trigger (js/main.js, scoped to .cnct-timeline)
   that adds .in once; every other beat (per-node, per-step) is plain
   CSS transition-delay, timed so the last step finishes around 1.75s —
   inside the requested 1.2–1.8s window. */
#process{padding:128px 0}

.cnct-timeline{position:relative;margin-top:64px}

.cnct-timeline-rail{position:absolute;top:28px;left:10%;right:10%;height:2px;z-index:0}
.cnct-timeline-base{position:absolute;inset:0;background:var(--line-mid)}
.cnct-timeline-progress{
  position:absolute;top:0;left:0;bottom:0;width:0;
  background:var(--logo-navy);
  transition:width 1.3s cubic-bezier(.4,0,.2,1);
}
.cnct-timeline-progress::after{
  content:"";position:absolute;top:50%;right:-5px;width:10px;height:10px;
  border-radius:50%;background:var(--amber);transform:translateY(-50%);
  box-shadow:0 0 0 4px rgba(240,161,30,.18);
}
.cnct-timeline.in .cnct-timeline-progress{width:100%}

.cnct-timeline-steps{
  position:relative;z-index:1;list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(5,1fr);
}
.cnct-timeline-step{position:relative;padding:64px 12px 0}
.cnct-timeline-step:focus-visible{outline:2px solid var(--amber);outline-offset:6px;border-radius:2px}

.cnct-timeline-node{
  position:absolute;top:28px;left:50%;width:9px;height:9px;border-radius:50%;
  background:var(--paper);border:2px solid var(--line-mid);
  transform:translate(-50%,-50%);
  transition:background-color .3s ease,border-color .3s ease,box-shadow .3s ease,transform .2s ease;
  z-index:2;
}
.cnct-timeline-step:hover .cnct-timeline-node,
.cnct-timeline-step:focus-visible .cnct-timeline-node{transform:translate(-50%,-50%) scale(1.35)}

.cnct-timeline-ticks{
  position:absolute;top:36px;left:50%;width:32px;height:6px;
  transform:translateX(-50%);
  background-image:repeating-linear-gradient(90deg,var(--line-mid) 0,var(--line-mid) 1px,transparent 1px,transparent 6px);
  opacity:.45;transition:opacity .25s ease;
}
.cnct-timeline-step:hover .cnct-timeline-ticks,
.cnct-timeline-step:focus-visible .cnct-timeline-ticks{opacity:.9}

.cnct-timeline-num{
  display:block;font-family:var(--font-mono);font-size:13px;font-weight:500;
  color:var(--amber-deep);letter-spacing:.06em;margin-bottom:14px;
}
.cnct-timeline-step h3{font-size:18px;margin-bottom:8px;transition:transform .2s ease}
.cnct-timeline-step p{font-size:15px;line-height:1.6;color:var(--ink-mid);transition:color .2s ease}
.cnct-timeline-step:hover h3,.cnct-timeline-step:focus-visible h3{transform:translateY(-2px)}
.cnct-timeline-step:hover p,.cnct-timeline-step:focus-visible p{color:var(--ink)}

.cnct-timeline-body{opacity:0;transform:translateY(10px);transition:opacity .35s ease,transform .35s ease}
.cnct-timeline.in .cnct-timeline-body{opacity:1;transform:none}
.cnct-timeline.in .cnct-timeline-node{background:var(--amber);border-color:var(--amber);box-shadow:0 0 0 4px rgba(240,161,30,.18)}

.cnct-timeline-step:nth-child(1) .cnct-timeline-node{transition-delay:0s}
.cnct-timeline-step:nth-child(2) .cnct-timeline-node{transition-delay:.32s}
.cnct-timeline-step:nth-child(3) .cnct-timeline-node{transition-delay:.65s}
.cnct-timeline-step:nth-child(4) .cnct-timeline-node{transition-delay:.97s}
.cnct-timeline-step:nth-child(5) .cnct-timeline-node{transition-delay:1.3s}
.cnct-timeline-step:nth-child(1) .cnct-timeline-body{transition-delay:.1s}
.cnct-timeline-step:nth-child(2) .cnct-timeline-body{transition-delay:.42s}
.cnct-timeline-step:nth-child(3) .cnct-timeline-body{transition-delay:.75s}
.cnct-timeline-step:nth-child(4) .cnct-timeline-body{transition-delay:1.07s}
.cnct-timeline-step:nth-child(5) .cnct-timeline-body{transition-delay:1.4s}

@media(max-width:900px){
  .cnct-timeline{margin-top:48px}
  .cnct-timeline-rail{top:6px;bottom:6px;left:5px;right:auto;width:2px;height:auto}
  .cnct-timeline-progress{left:0;right:0;top:0;bottom:auto;width:auto;height:0;transition:height 1.3s cubic-bezier(.4,0,.2,1)}
  .cnct-timeline.in .cnct-timeline-progress{height:100%;width:auto}
  .cnct-timeline-progress::after{top:auto;right:auto;bottom:-5px;left:50%;transform:translateX(-50%)}
  .cnct-timeline-steps{grid-template-columns:1fr;row-gap:40px}
  .cnct-timeline-step{padding:0 0 0 34px}
  .cnct-timeline-node{top:6px;left:5px;transform:translate(-50%,0)}
  .cnct-timeline-step:hover .cnct-timeline-node,
  .cnct-timeline-step:focus-visible .cnct-timeline-node{transform:translate(-50%,0) scale(1.35)}
  .cnct-timeline-ticks{display:none}
}

@media(prefers-reduced-motion:reduce){
  .cnct-timeline-progress{transition:none!important;width:100%!important;height:100%!important}
  .cnct-timeline-node{transition:none!important;background:var(--amber)!important;border-color:var(--amber)!important;box-shadow:0 0 0 4px rgba(240,161,30,.18)!important}
  .cnct-timeline-body{transition:none!important;opacity:1!important;transform:none!important}
}

/* ---------- Sheet Metal page (interior) ----------
   Rebuilt to the same layout system as the CNC Milling and CNC Turning
   pages. Only the hero and the four-item capabilities grid are
   page-specific; every other section reuses the CNC Turning page's
   .cnct-* classes (mf-grid, capacity-split, design-grid, timeline,
   note) and the shared atoms (.sec, .dark, .rows, .tbl-scroll,
   .faq-list, .cta-band) as-is. */

/* Hero — mirrors the CNC Milling / CNC Turning hero mechanics exactly
   (warm-wash panel left, one large image right, min-height:500px,
   identical breakpoints) under its own decoupled page class. */
.shm-hero{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);min-height:500px;background:var(--wash)}
.shm-hero .hero-panel{background:var(--wash);color:var(--ink)}
.shm-hero .hero-panel-inner{justify-content:center;padding:72px clamp(44px,6vw,96px)}
.shm-hero .hero-main{max-width:520px}
.shm-hero .hero-h1{font-size:clamp(42px,4.2vw,60px);color:var(--ink)}
.shm-hero .hero-lead{max-width:500px;margin-top:22px;font-size:18px;line-height:1.7;color:var(--ink-mid)}
.shm-hero .hero-cta{margin-top:32px;background:var(--logo-navy);color:var(--white)}
.shm-hero .hero-cta:hover{background:var(--logo-navy-light)}
.shm-hero .hero-photo{background:var(--wash)}
@media(max-width:980px){
  .shm-hero{grid-template-columns:1fr;min-height:0}
  .shm-hero .hero-panel-inner{padding:56px 28px}
  .shm-hero .hero-photo{border-top:1px solid var(--line)}
}
@media(max-width:560px){
  .shm-hero .hero-panel-inner{padding:44px 24px}
  .shm-hero .hero-h1{font-size:38px}
}

/* Fabrication capabilities — four numbered process items in a 2×2 grid,
   one image each with title and a short line below. No cards, borders,
   or icons — the image edge and the mono step number carry the rhythm. */
.shm-cap-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px 48px}
.shm-cap-item .media{margin-bottom:22px}
.shm-cap-num{
  display:block;font-family:var(--font-mono);font-size:13px;font-weight:500;
  color:var(--amber-deep);letter-spacing:.06em;margin-bottom:10px;
}
.shm-cap-item h3{font-size:19px;margin-bottom:8px}
.shm-cap-item p{font-size:14.5px;line-height:1.65;color:var(--ink-mid);max-width:520px}
@media(max-width:760px){
  .shm-cap-grid{grid-template-columns:1fr;gap:40px}
}

/* ---------- Aluminum Die Casting page (interior) ----------
   Lives at services/aluminum-die-casting/. Same treatment as the Sheet
   Metal page: only the hero is page-specific; every section below it
   reuses the CNC Turning page's .cnct-* classes and the shared atoms. */
.adc-hero{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);min-height:500px;background:var(--wash)}
.adc-hero .hero-panel{background:var(--wash);color:var(--ink)}
.adc-hero .hero-panel-inner{justify-content:center;padding:72px clamp(44px,6vw,96px)}
.adc-hero .hero-main{max-width:520px}
.adc-hero .hero-h1{font-size:clamp(42px,4.2vw,60px);color:var(--ink)}
.adc-hero .hero-lead{max-width:500px;margin-top:22px;font-size:18px;line-height:1.7;color:var(--ink-mid)}
.adc-hero .hero-cta{margin-top:32px;background:var(--logo-navy);color:var(--white)}
.adc-hero .hero-cta:hover{background:var(--logo-navy-light)}
.adc-hero .hero-photo{background:var(--wash)}
@media(max-width:980px){
  .adc-hero{grid-template-columns:1fr;min-height:0}
  .adc-hero .hero-panel-inner{padding:56px 28px}
  .adc-hero .hero-photo{border-top:1px solid var(--line)}
}
@media(max-width:560px){
  .adc-hero .hero-panel-inner{padding:44px 24px}
  .adc-hero .hero-h1{font-size:38px}
}

/* ---------- Surface Finishes page (interior, v2) ----------
   Second, larger-scale rebuild. Six sections: editorial hero,
   interactive finish selector, three large feature stories, drawing
   spec guide, quality statement, FAQ + navy CTA. All classes are
   page-scoped under the "sfs-" prefix (the previous "sfp-" block was
   removed with its sections); shared atoms (.media, .sec-head, .lead,
   .t-1, .btn, .faq-list, .cta-band, .rv/.d1-.d3) are reused as-is.
   Background rhythm: paper hero, wash selector, white stories,
   paper spec guide, wash quality, white FAQ, navy CTA. */

/* page-scoped wider editorial container — composes with .wrap
   (class="wrap sfs-wrap"); later in the file, so it wins the
   max-width without touching any other page's 1200px container */
.sfs-wrap{max-width:1320px}

/* -- 1. hero: 46/54 split, image column stretches to the full hero
   height (~680px) instead of the sitewide 4:3 media box -- */
.sfs-hero{padding:56px 0 104px;border-bottom:1px solid var(--line)}
.sfs-hero .crumb{
  font-family:var(--font-mono);font-size:13px;letter-spacing:.06em;
  color:var(--ink-dim);margin-bottom:40px;
}
.sfs-hero .crumb a{color:var(--ink-dim);text-decoration:none}
.sfs-hero .crumb a:hover{color:var(--ink)}
.sfs-hero .crumb b{color:var(--ink);font-weight:500}
.sfs-hero-grid{
  display:grid;grid-template-columns:minmax(0,.94fr) minmax(0,1fr);
  gap:clamp(40px,4.5vw,72px);align-items:stretch;
}
.sfs-hero-copy{display:flex;flex-direction:column;justify-content:center;padding:40px 0}
.sfs-hero-h1{font-size:clamp(50px,5vw,68px);letter-spacing:-.028em;line-height:1.03}
.sfs-hero-lead{margin-top:30px;font-size:19px;line-height:1.75;color:var(--ink-mid);max-width:520px}
.sfs-hero-caps{
  margin-top:28px;padding-top:24px;border-top:1px solid var(--line);
  font-family:var(--font-mono);font-size:14.5px;letter-spacing:.02em;
  color:var(--ink-dim);max-width:520px;line-height:1.7;
}
.sfs-hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:40px}
.sfs-hero-media{aspect-ratio:auto;min-height:680px;height:100%;border-radius:0}
@media(max-width:1080px){.sfs-hero-media{min-height:560px}}
@media(max-width:980px){
  .sfs-hero{padding:40px 0 72px}
  .sfs-hero .crumb{margin-bottom:28px}
  .sfs-hero-grid{grid-template-columns:1fr;gap:44px}
  .sfs-hero-copy{padding:0}
  .sfs-hero-media{aspect-ratio:4/3;min-height:0;height:auto}
}
@media(max-width:560px){
  .sfs-hero-h1{font-size:42px}
  .sfs-hero-lead{font-size:17.5px}
  .sfs-hero-actions .btn{flex:1;justify-content:center}
}

/* -- 2. interactive finish selector: left vertical process list
   (~34%), right active panel (~66%). display:contents lets each
   item place its button into column 1 and its panel into column 2;
   every panel occupies the same grid area (rows 1-10 of column 2)
   and the active one fades in. Extra panel height distributes across
   the ten auto rows, so the list rows stretch to match the panel and
   the two columns always bottom-align. -- */
.sfs-select-sec{background:var(--wash);padding:110px 0;border-bottom:1px solid var(--line)}
.sfs-select-sec .sec-head{max-width:720px;margin-bottom:64px}
.sfs-selector{
  display:grid;grid-template-columns:minmax(0,.52fr) minmax(0,1fr);
  grid-template-rows:repeat(10,auto);
  column-gap:clamp(44px,5vw,84px);
}
.sfs-sel-item{display:contents}
.sfs-sel-btn{
  grid-column:1;position:relative;display:flex;align-items:center;gap:18px;
  width:100%;text-align:left;padding:19px 8px 19px 22px;
  border-bottom:1px solid var(--line-mid);
  font-family:var(--font-display);font-weight:600;font-size:19px;
  letter-spacing:-.01em;color:var(--ink-mid);cursor:pointer;
  transition:color .2s ease;
}
.sfs-sel-item:first-child .sfs-sel-btn{border-top:1px solid var(--line-mid)}
.sfs-sel-btn::before{
  content:"";position:absolute;left:0;top:22%;bottom:22%;width:3px;
  background:transparent;transition:background-color .25s ease;
}
.sfs-sel-btn:hover{color:var(--ink)}
.sfs-sel-btn:focus-visible{outline:2px solid var(--logo-navy);outline-offset:-2px}
.sfs-sel-item.active .sfs-sel-btn{color:var(--navy-deep)}
.sfs-sel-item.active .sfs-sel-btn::before{background:var(--amber)}
.sfs-sel-num{
  font-family:var(--font-mono);font-size:13px;font-weight:500;
  color:var(--ink-dim);width:26px;flex:none;
}
.sfs-sel-item.active .sfs-sel-num{color:var(--amber-deep)}

.sfs-sel-panel{
  grid-column:2;grid-row:1 / span 10;
  opacity:0;visibility:hidden;
  transition:opacity .4s ease,visibility 0s linear .4s;
}
.sfs-sel-item.active .sfs-sel-panel{opacity:1;visibility:visible;transition:opacity .4s ease}
.sfs-panel-media{aspect-ratio:16/9;border-radius:0}
.sfs-panel-name{font-size:clamp(24px,2.2vw,30px);margin-top:32px}
.sfs-panel-desc{margin-top:14px;font-size:17px;line-height:1.75;color:var(--ink-mid);max-width:640px}
.sfs-panel-meta{
  margin-top:30px;padding-top:24px;border-top:1px solid var(--line-mid);
  display:grid;grid-template-columns:repeat(3,1fr);gap:30px;
}
.sfs-panel-meta dt{
  font-family:var(--font-mono);font-size:11.5px;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-dim);
  margin-bottom:9px;
}
.sfs-panel-meta dd{margin:0;font-size:15.5px;line-height:1.65;color:var(--ink)}
@media(max-width:900px){
  /* accordion mode: each panel opens directly under its own button */
  .sfs-selector{display:block}
  .sfs-sel-item{display:block}
  .sfs-sel-btn{font-size:18px;padding:18px 8px 18px 20px}
  .sfs-sel-panel{display:none;grid-column:auto;grid-row:auto;opacity:1;visibility:visible;transition:none;padding:26px 0 38px}
  .sfs-sel-item.active .sfs-sel-panel{display:block}
  .sfs-select-sec{padding:80px 0}
  .sfs-select-sec .sec-head{margin-bottom:40px}
  .sfs-panel-meta{grid-template-columns:1fr;gap:20px}
  .sfs-panel-name{margin-top:24px}
}

/* light photo-slot variant for the selector — same probe/swap
   mechanics as .media, but a warm neutral panel instead of the dark
   technical placeholder, so a missing finish image reads as a quiet
   empty slot rather than a blueprint graphic */
.media.media-light{
  background:var(--wash);border:1px solid var(--line-mid);
}
.sfs-select-sec .media.media-light{background:var(--paper)}
.media.media-light::after{color:var(--ink-dim)}
.media.media-light::before{border-color:var(--line-mid)}
.media.media-light.loaded{border:0}

/* -- 3. three large feature stories: 58/42 splits, image-dominant,
   hairline rules between stories -- */
.sfs-features{background:var(--white);padding:110px 0;border-bottom:1px solid var(--line)}
.sfs-feature{
  display:grid;grid-template-columns:minmax(0,1.38fr) minmax(0,1fr);
  gap:clamp(48px,6vw,92px);align-items:center;padding:84px 0;
}
.sfs-feature:first-child{padding-top:0}
.sfs-feature:last-child{padding-bottom:0}
.sfs-feature + .sfs-feature{border-top:1px solid var(--line)}
.sfs-feature-rev{grid-template-columns:minmax(0,1fr) minmax(0,1.38fr)}
.sfs-feature-media{aspect-ratio:auto;height:clamp(500px,44vw,640px);border-radius:0}
.sfs-feature-copy h3{font-size:clamp(34px,3.4vw,48px);line-height:1.07;letter-spacing:-.02em;margin-bottom:24px}
.sfs-feature-copy p{font-size:17.5px;line-height:1.75;color:var(--ink-mid);max-width:480px}
.sfs-feature-spec{
  margin-top:32px;padding-top:24px;border-top:1px solid var(--line);
  font-family:var(--font-mono);font-size:13.5px;letter-spacing:.02em;
  color:var(--ink-dim);line-height:1.7;
}
@media(max-width:900px){
  .sfs-features{padding:72px 0}
  .sfs-feature,.sfs-feature-rev{grid-template-columns:1fr;gap:28px;padding:56px 0}
  .sfs-feature .sfs-feature-media{order:-1;aspect-ratio:4/3;height:auto}
  .sfs-feature-copy p{max-width:none}
}

/* -- 4. drawing specification guide: sticky intro (~36%) beside six
   large numbered rows (~64%) -- */
.sfs-spec{padding:110px 0;border-bottom:1px solid var(--line)}
.sfs-spec-grid{display:grid;grid-template-columns:minmax(260px,.56fr) 1fr;gap:clamp(52px,6vw,100px);align-items:start}
.sfs-spec-intro{position:sticky;top:calc(var(--nav-h) + 44px)}
.sfs-spec-list{border-top:1px solid var(--line-mid)}
.sfs-spec-row{
  display:grid;grid-template-columns:72px minmax(190px,240px) 1fr;
  gap:12px 28px;padding:32px 4px;border-bottom:1px solid var(--line-mid);
  align-items:baseline;
}
.sfs-spec-num{font-family:var(--font-mono);font-size:15px;font-weight:500;color:var(--amber-deep)}
.sfs-spec-row h3{font-size:19.5px;letter-spacing:-.01em}
.sfs-spec-row p{font-size:16px;line-height:1.7;color:var(--ink-mid)}
@media(max-width:980px){
  .sfs-spec{padding:80px 0}
  .sfs-spec-grid{grid-template-columns:1fr;gap:36px}
  .sfs-spec-intro{position:static}
  .sfs-spec-row{grid-template-columns:52px 1fr;padding:26px 2px}
  .sfs-spec-row p{grid-column:2}
}

/* -- 5. quality and control statement: heading left, three control
   statements divided by thin vertical rules right, note below -- */
.sfs-quality{background:var(--wash);padding:104px 0;border-bottom:1px solid var(--line)}
.sfs-quality-grid{
  display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.55fr);
  gap:clamp(48px,6vw,92px);align-items:start;
}
.sfs-quality-cols{display:grid;grid-template-columns:repeat(3,1fr)}
.sfs-quality-col{padding:6px 30px 10px;border-left:1px solid var(--line-mid)}
.sfs-quality-col:first-child{padding-left:0;border-left:0}
.sfs-quality-col h3{
  font-size:13px;letter-spacing:.12em;text-transform:uppercase;
  font-weight:600;margin-bottom:14px;color:var(--ink);
}
.sfs-quality-col p{font-size:15.5px;line-height:1.7;color:var(--ink-mid)}
.sfs-quality-note{
  margin-top:56px;padding-top:30px;border-top:1px solid var(--line-mid);
  font-size:16.5px;line-height:1.7;color:var(--ink-mid);max-width:780px;
}
@media(max-width:980px){
  .sfs-quality{padding:76px 0}
  .sfs-quality-grid{grid-template-columns:1fr;gap:40px}
  .sfs-quality-cols{grid-template-columns:1fr}
  .sfs-quality-col{padding:22px 0;border-left:0;border-top:1px solid var(--line-mid)}
  .sfs-quality-col:first-child{padding-top:0;border-top:0}
  .sfs-quality-note{margin-top:36px}
}

/* -- 6. FAQ (white) + navy final CTA -- */
.sfs-faq{background:var(--white)}
.sfs-faq .faq-item summary{font-size:18.5px;padding:27px 2px}
.sfs-faq .faq-item summary::after{font-size:24px}
.sfs-faq .faq-item p{font-size:16px;line-height:1.75;max-width:800px;padding-bottom:28px}

/* deep-navy CTA band — deliberately distinct from the near-black
   footer that follows it, so the two dark blocks read separately */
.sfs-cta{background:var(--navy-deep);padding:104px 0}
.sfs-cta .cta-sub{color:#C7CFE4;font-size:17px}
.sfs-cta .mono-note{color:#93A1C6}
.sfs-cta .cta-side p{color:#C7CFE4}
.sfs-cta .cta-side p a{color:var(--inv)}
.sfs-cta .mail{border-bottom-color:#3E5390}
.sfs-cta .kick{color:var(--amber)}

@media(prefers-reduced-motion:reduce){
  .sfs-sel-panel,.sfs-sel-btn,.sfs-sel-btn::before{transition:none!important}
}

/* ============================================================
   SHARED INDUSTRY PAGE LAYOUT
   Editorial structure used by Medical, Automotive, Automation, and
   Robotics: full-width hero, development stages, capabilities, production
   support, materials/finishes, applications, and CTA. The historical
   .med-* class prefix is retained to avoid destabilizing the approved
   Medical page while the same layout is shared by the other industries.
   ============================================================ */
.med-page{background:var(--paper)}
.med-hero{
  position:relative;isolation:isolate;height:clamp(500px,31.6vw,570px);overflow:hidden;
  background:#EEF4F8;color:var(--ink);
}
.med-hero-inner{
  position:relative;z-index:3;height:100%;max-width:none;
  padding-left:clamp(28px,4vw,64px);padding-right:clamp(28px,4vw,64px);
  display:flex;align-items:stretch;
}
.med-hero-copy{
  width:min(760px,60%);padding:68px 0 48px;
  display:flex;flex-direction:column;align-items:flex-start;
}
.med-hero h1{
  font-size:clamp(40px,3.2vw,50px);line-height:1.08;letter-spacing:-.024em;
  max-width:760px;color:#282D38;
}
.med-hero .lead{
  color:#303946;max-width:650px;margin-top:25px;
  font-size:16px;line-height:1.65;
}
.med-hero .p-hero-actions{margin-top:24px}
.med-hero-primary{background:#0879C9;color:var(--white);border:1px solid #0879C9}
.med-hero-primary:hover{background:#006BB5;border-color:#006BB5}
.med-hero-secondary{background:#D9ECFA;color:#006AAA;border:1px solid #D9ECFA}
.med-hero-secondary:hover{background:#C9E4F7;border-color:#C9E4F7}
.med-hero-proof{margin-top:auto;padding-top:38px}
.med-hero-proof a{
  display:inline-block;color:#0879C9;font-weight:600;font-size:14px;
  text-decoration:underline;text-underline-offset:3px;
}
.med-hero-proof p{font-size:13px;line-height:1.6;color:#2E3743;margin-top:3px}
.med-hero-proof p span{color:#77818D;margin:0 5px}
.med-hero-media{
  position:absolute;z-index:0;inset:0;width:100%;height:100%;
  aspect-ratio:auto;border-radius:0;
}
.med-hero-media::before,.med-hero-media::after{display:none}
.med-hero-media img{object-fit:cover;object-position:center}
.med-hero-media .med-hero-fallback{
  transform:none;object-position:center 54%;
}
.med-hero-shade{
  position:absolute;z-index:2;inset:0;
  background:
    linear-gradient(90deg,
      rgba(250,252,253,.99) 0%,
      rgba(250,252,253,.98) 31%,
      rgba(250,252,253,.90) 45%,
      rgba(250,252,253,.48) 59%,
      rgba(250,252,253,.08) 76%,
      rgba(250,252,253,0) 100%);
}

.med-section-intro{
  display:grid;grid-template-columns:minmax(0,1.1fr) minmax(280px,.75fr);
  gap:clamp(50px,8vw,120px);align-items:end;margin-bottom:50px;
}
.med-section-intro > p{font-size:17px;line-height:1.75;color:var(--ink-mid);padding-bottom:3px}
.med-use{background:var(--white);border-bottom:1px solid var(--line)}
.med-use-layout{
  display:grid;grid-template-columns:minmax(280px,.74fr) minmax(0,1.26fr);
  gap:clamp(60px,8vw,120px);align-items:start;
}
.med-use-intro{position:sticky;top:calc(var(--nav-h) + 44px)}
.med-use-intro h2{max-width:500px}
.med-use-intro p{font-size:16.5px;line-height:1.75;color:var(--ink-mid);max-width:500px;margin-top:24px}
.med-use-list{border-top:1px solid var(--line-mid)}
.med-use-row{
  display:grid;grid-template-columns:minmax(190px,.9fr) minmax(240px,1.1fr);
  gap:34px;align-items:center;padding:28px 0;border-bottom:1px solid var(--line-mid);
}
.med-use-row .media{border:0;border-radius:0;aspect-ratio:8/5}
.med-use-row .media::before,.med-use-row .media::after{display:none}
.med-use-row .media img{object-fit:cover}
.med-use-row .media.med-use-placeholder{
  border:1px dashed var(--line-mid);
  background:
    linear-gradient(rgba(12,42,76,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(12,42,76,.035) 1px,transparent 1px),
    var(--wash);
  background-size:24px 24px,24px 24px,100% 100%;
}
.med-use-copy{padding:0}
.med-use-copy h3{font-size:23px;margin:0 0 11px}
.med-use-copy p{font-size:14.5px;line-height:1.72;color:var(--ink-mid)}

.med-capabilities{background:var(--wash);padding:104px 0;border-bottom:1px solid var(--line)}
.med-cap-head{max-width:700px;margin-bottom:48px}
.med-cap-head p{font-size:17px;line-height:1.72;color:var(--ink-mid);margin-top:18px}
.med-cap-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line-mid);border-bottom:1px solid var(--line-mid)}
.med-cap-card{
  display:flex;flex-direction:column;background:transparent;
  text-decoration:none;border-left:1px solid var(--line-mid);
}
.med-cap-card:first-child{border-left:0}
.med-cap-card .media{aspect-ratio:8/5;border:0;border-radius:0}
.med-cap-card .media::before,.med-cap-card .media::after{display:none}
.med-cap-card .media img{object-fit:cover}
.med-cap-body{display:flex;flex-direction:column;flex:1;padding:28px 28px 30px}
.med-cap-body h3{font-size:25px;margin:0 0 11px;text-decoration:underline;text-decoration-color:transparent;text-underline-offset:5px}
.med-cap-card:hover h3{text-decoration-color:var(--ink)}
.med-cap-body > p{font-size:14.5px;line-height:1.7;color:var(--ink-mid)}
.med-cap-body .med-cap-detail{margin:22px 0 26px;padding-top:20px;border-top:1px solid var(--line);font-size:13.5px;flex:1}
.med-cap-detail strong{color:var(--ink);font-weight:600}
.med-cap-link{
  display:flex;align-items:center;gap:8px;color:var(--navy);font-size:14px;font-weight:600;
}
.med-cap-link .arr{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.2}
.med-cap-card:hover .med-cap-link .arr{transform:translateX(3px)}

.med-quality{
  background:var(--white);padding:104px 0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.med-quality .wrap{max-width:1360px}
.med-support-head{max-width:820px;margin:0 auto 50px;text-align:center}
.med-support-head h2{font-size:clamp(32px,3.5vw,46px)}
.med-support-head p{
  max-width:760px;margin:18px auto 0;
  font-size:16.5px;line-height:1.7;color:var(--ink-mid);
}
.med-support-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
.med-support-card{background:#F4F5F6;display:flex;flex-direction:column}
.med-support-card .media{
  aspect-ratio:16/9;border:0;border-radius:0;background:var(--wash);
}
.med-support-card .media::before,.med-support-card .media::after{display:none}
.med-support-card .media img{object-fit:cover}
.med-support-body{padding:29px 30px 34px;flex:1}
.med-support-body h3{font-size:18px;line-height:1.35;margin-bottom:12px}
.med-support-body p{font-size:14.5px;line-height:1.68;color:var(--ink-mid)}

.med-materials-grid{
  display:grid;grid-template-columns:1.1fr .9fr .9fr;gap:0;
  border-top:1px solid var(--line-mid);border-bottom:1px solid var(--line-mid);
}
.med-materials-media{height:100%;min-height:590px;aspect-ratio:auto;border:0;border-radius:0}
.med-materials-media::before,.med-materials-media::after{display:none}
.med-materials-media img{object-fit:cover}
.med-material-column{padding:38px 34px 34px;border-left:1px solid var(--line-mid)}
.med-material-column h3{font-size:23px;line-height:1.25;margin:0 0 25px}
.med-material-column ul{list-style:none;border-top:1px solid var(--line);margin-bottom:28px}
.med-material-column li{padding:15px 0;border-bottom:1px solid var(--line)}
.med-material-column strong{display:block;font-size:14.5px}
.med-material-column li span{display:block;font-size:12.5px;line-height:1.55;color:var(--ink-dim);margin-top:3px}

.med-applications{background:var(--white);color:var(--ink);padding:96px 0;border-top:1px solid var(--line)}
.med-app-grid{display:grid;grid-template-columns:.75fr 1.25fr;gap:clamp(60px,9vw,130px);align-items:start}
.med-app-intro p{color:var(--ink-mid);margin-top:22px;max-width:470px}
.med-app-list{display:grid;grid-template-columns:1fr 1fr;list-style:none;border-top:1px solid var(--line-mid)}
.med-app-list li{
  padding:19px 24px 19px 0;
  border-bottom:1px solid var(--line-mid);font-size:14.5px;line-height:1.5;
}
.med-app-list li:nth-child(odd){border-right:1px solid var(--line-mid)}
.med-app-list li:nth-child(even){padding-left:24px}
.med-cta{background:#172E66}
.med-cta .cta-sub{color:#BBC6DE}
.med-cta .cta-side p{color:#BBC6DE}
.med-cta .cta-side p a{color:var(--white)}
.med-cta .mail{border-bottom-color:#405582}

@media(max-width:1080px){
  .med-support-grid{grid-template-columns:1fr 1fr}
  .med-materials-grid{grid-template-columns:1fr 1fr}
  .med-materials-media{grid-column:1 / -1;min-height:0;aspect-ratio:16/8}
  .med-material-column:first-of-type{border-left:0}
}
@media(max-width:900px){
  .med-section-intro,.med-use-layout,.med-app-grid{grid-template-columns:1fr}
  .med-hero,.med-hero-inner,.med-hero-media{min-height:570px}
  .med-hero-copy{width:min(620px,72%);padding:60px 0 44px}
  .med-hero-shade{
    background:linear-gradient(90deg,rgba(250,252,253,.99) 0%,rgba(250,252,253,.94) 48%,rgba(250,252,253,.52) 72%,rgba(250,252,253,.12) 100%);
  }
  .med-use-intro{position:static}
  .med-use-layout{gap:38px}
  .med-cap-grid{grid-template-columns:1fr}
  .med-cap-card{border-left:0;border-top:1px solid var(--line-mid)}
  .med-cap-card:first-child{border-top:0}
  .med-cap-card .media{aspect-ratio:16/7}
  .med-section-intro{gap:22px;align-items:start}
  .med-app-grid{gap:44px}
}
@media(max-width:620px){
  .med-hero,.med-hero-inner{min-height:620px}
  .med-hero-copy{width:100%;padding:48px 0 38px}
  .med-hero h1{font-size:clamp(36px,10.5vw,47px);max-width:520px}
  .med-hero .lead{font-size:15.5px;max-width:500px}
  .med-hero-media{height:100%;min-height:620px}
  .med-hero-media .med-hero-fallback{object-position:center}
  .med-hero-shade{
    background:
      linear-gradient(180deg,rgba(250,252,253,.98) 0%,rgba(250,252,253,.94) 62%,rgba(250,252,253,.72) 100%),
      linear-gradient(90deg,rgba(250,252,253,.96),rgba(250,252,253,.25));
  }
  .med-hero .p-hero-actions{gap:10px}
  .med-hero .btn{padding:13px 17px;font-size:13px}
  .med-hero-proof{padding-top:28px}
  .med-hero-proof p{max-width:330px}
  .med-hero-proof p span{margin:0 2px}
  .med-use-row{grid-template-columns:1fr;gap:20px;padding:26px 0}
  .med-use-row .media{aspect-ratio:16/9}
  .med-cap-body{padding-left:22px;padding-right:22px}
  .med-capabilities{padding:76px 0}
  .med-quality{padding:76px 0}
  .med-support-grid{grid-template-columns:1fr}
  .med-support-head{text-align:left;margin-bottom:34px}
  .med-support-head p{margin-left:0}
  .med-support-body{padding:25px 24px 29px}
  .med-materials-grid{grid-template-columns:1fr}
  .med-materials-media{grid-column:auto;aspect-ratio:4/3}
  .med-material-column{border-left:0;border-top:1px solid var(--line-mid);padding:30px 22px}
  .med-applications{padding:76px 0}
  .med-app-list{grid-template-columns:1fr}
  .med-app-list li:nth-child(odd){border-right:0}
  .med-app-list li:nth-child(even){padding-left:0}
}

@media(prefers-reduced-motion:reduce){
  .med-cap-card,.med-cap-link .arr{transition:none!important}
}

/* ============================================================
   MATERIALS REFERENCE PAGE
   Comparison-library layout based on a real engineering material
   browser: fixed family navigation, sticky selection guidance, and
   continuous grade tables. No decorative cards or eyebrow labels.
   ============================================================ */
.mat2-page{background:var(--paper)}
.mat2-hero{background:var(--white);padding:80px 0 86px;border-bottom:1px solid var(--line)}
.mat2-hero-grid{
  display:grid;grid-template-columns:minmax(0,1.02fr) minmax(420px,.98fr);
  gap:clamp(54px,7vw,96px);align-items:center;
}
.mat2-hero-copy h1{
  font-size:clamp(46px,5.3vw,70px);line-height:1.01;letter-spacing:-.03em;
  max-width:680px;
}
.mat2-hero-copy .lead{max-width:650px;margin-top:25px;font-size:18px}
.mat2-disclaimer{
  max-width:650px;margin-top:38px;padding-top:22px;border-top:1px solid var(--line);
  font-size:13px;line-height:1.65;color:var(--ink-dim);
}
.mat2-hero-media{aspect-ratio:4/3;border:0;border-radius:0;background:var(--wash)}
.mat2-hero-media::before,.mat2-hero-media::after,
.mat2-spec-media::before,.mat2-spec-media::after{display:none}
.mat2-hero-media img,.mat2-spec-media img{object-fit:cover}

.mat2-nav{
  position:sticky;z-index:60;top:var(--nav-h);
  background:var(--white);border-bottom:1px solid var(--line);
}
.mat2-nav-inner{display:flex;align-items:center;overflow-x:auto;scrollbar-width:none}
.mat2-nav-inner::-webkit-scrollbar{display:none}
.mat2-nav a{
  flex:1;min-width:max-content;text-align:center;padding:19px 22px;
  border-left:1px solid var(--line);text-decoration:none;
  font-size:14px;font-weight:600;color:var(--ink-mid);
  transition:color .18s,background-color .18s;
}
.mat2-nav a:last-child{border-right:1px solid var(--line)}
.mat2-nav a:hover{color:var(--navy);background:var(--wash)}

.mat2-library{padding:106px 0}
.mat2-library-grid{
  display:grid;grid-template-columns:minmax(260px,.62fr) minmax(0,1.38fr);
  gap:clamp(58px,7vw,104px);align-items:start;
}
.mat2-guide{position:sticky;top:calc(var(--nav-h) + 92px)}
.mat2-guide h2{font-size:clamp(30px,3vw,40px);line-height:1.08;letter-spacing:-.02em}
.mat2-guide > p{font-size:16px;line-height:1.75;color:var(--ink-mid);margin-top:20px}
.mat2-checks{margin:34px 0 30px;border-top:1px solid var(--line-mid)}
.mat2-checks > div{padding:18px 0;border-bottom:1px solid var(--line)}
.mat2-checks strong{display:block;font-size:14.5px}
.mat2-checks p{font-size:13px;line-height:1.55;color:var(--ink-dim);margin-top:3px}

.mat2-groups{border-top:1px solid var(--ink)}
.mat2-group{
  padding:52px 0 64px;border-bottom:1px solid var(--ink);
  scroll-margin-top:calc(var(--nav-h) + 72px);
}
.mat2-group-head{
  display:grid;grid-template-columns:minmax(170px,.55fr) minmax(0,1.45fr);
  gap:40px;align-items:start;margin-bottom:32px;
}
.mat2-group-head h2{font-size:clamp(28px,3vw,38px);letter-spacing:-.02em}
.mat2-group-head p{font-size:15.5px;line-height:1.72;color:var(--ink-mid);max-width:660px}
.mat2-table-wrap{overflow-x:auto}
.mat2-table{min-width:690px;border-top:1px solid var(--line-mid);table-layout:fixed;background:transparent}
.mat2-table th{
  font-family:var(--font-body);font-size:13px;letter-spacing:0;text-transform:none;
  font-weight:600;color:var(--ink);background:transparent;padding:14px 16px;
  border-bottom:1px solid var(--line-mid);
}
.mat2-table th:first-child{width:18%}
.mat2-table th:nth-child(2){width:40%}
.mat2-table td{font-size:13.5px;line-height:1.62;padding:17px 16px;border-bottom:1px solid var(--line);color:var(--ink-mid)}
.mat2-table td:first-child{font-size:14.5px;color:var(--ink)}
.mat2-table tbody tr:last-child td{border-bottom:0}

.mat2-spec{background:var(--wash);padding:104px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.mat2-spec-grid{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(52px,7vw,96px);align-items:center;
}
.mat2-spec-media{aspect-ratio:4/3;border:0;border-radius:0}
.mat2-spec-copy .lead{font-size:16.5px;margin-top:21px}
.mat2-spec-list{margin-top:34px;border-top:1px solid var(--line-mid)}
.mat2-spec-list > div{
  display:grid;grid-template-columns:120px 1fr;gap:24px;
  padding:17px 0;border-bottom:1px solid var(--line-mid);
}
.mat2-spec-list dt{font-weight:600;font-size:14px}
.mat2-spec-list dd{font-size:13.5px;line-height:1.6;color:var(--ink-mid);margin:0}

.mat2-cta{background:var(--navy-deep)}
.mat2-cta .cta-sub{color:#C4CDE1}
.mat2-cta .cta-side p{color:#C4CDE1}

@media(max-width:980px){
  .mat2-hero-grid,.mat2-library-grid,.mat2-spec-grid{grid-template-columns:1fr}
  .mat2-hero-copy{max-width:760px}
  .mat2-hero-media{aspect-ratio:16/9}
  .mat2-library-grid{gap:46px}
  .mat2-guide{position:static}
  .mat2-guide > p{max-width:680px}
  .mat2-checks{display:grid;grid-template-columns:1fr 1fr}
  .mat2-checks > div:nth-child(odd){padding-right:24px;border-right:1px solid var(--line)}
  .mat2-checks > div:nth-child(even){padding-left:24px}
}
@media(max-width:680px){
  .mat2-hero{padding:58px 0 64px}
  .mat2-hero-grid{gap:40px}
  .mat2-hero-copy h1{font-size:clamp(40px,12vw,52px)}
  .mat2-hero-copy .lead{font-size:16.5px}
  .mat2-nav a{padding:16px 18px}
  .mat2-library{padding:76px 0}
  .mat2-checks{display:block}
  .mat2-checks > div:nth-child(odd),.mat2-checks > div:nth-child(even){padding-left:0;padding-right:0;border-right:0}
  .mat2-group{padding:42px 0 50px}
  .mat2-group-head{grid-template-columns:1fr;gap:14px;margin-bottom:26px}
  .mat2-spec{padding:76px 0}
  .mat2-spec-list > div{grid-template-columns:1fr;gap:5px}
}

@media(prefers-reduced-motion:reduce){
  .mat2-nav a{transition:none!important}
}

/* ============================================================
   MATERIALS CATALOGUE — FIRST FOUR SCREENS
   Full-width catalogue hero, process selector, service tabs, and
   specification feature. Square edges and restrained rules keep
   this aligned with an established manufacturing website.
   ============================================================ */
.mat3-hero{
  position:relative;min-height:clamp(510px,38vw,650px);
  background:#EEF2F4;overflow:hidden;border-bottom:1px solid var(--line);
}
.mat3-hero-media{
  position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;
  border:0;border-radius:0;background:#E8ECEE;
}
.mat3-hero-media::before,.mat3-hero-media::after,
.mat3-selector .media::before,.mat3-selector .media::after,
.mat3-panel-media::before,.mat3-panel-media::after,
.mat3-guide-media::before,.mat3-guide-media::after{display:none}
.mat3-hero-media img,.mat3-selector img,.mat3-panel-media img,.mat3-guide-media img{
  width:100%;height:100%;object-fit:cover;
}
.mat3-hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,#F8FAFB 0%,rgba(248,250,251,.98) 29%,rgba(248,250,251,.82) 45%,rgba(248,250,251,.18) 66%,rgba(248,250,251,0) 78%);
}
.mat3-hero-inner{
  position:relative;z-index:2;min-height:clamp(510px,38vw,650px);
  display:flex;align-items:center;
}
.mat3-hero-copy{width:min(680px,54%);padding:58px 0 50px}
.mat3-hero h1{
  max-width:680px;font-size:clamp(48px,5.4vw,72px);
  line-height:1;letter-spacing:-.035em;
}
.mat3-hero .lead{max-width:640px;margin-top:25px;font-size:18px;line-height:1.62;color:var(--ink-mid)}
.mat3-hero .btn-ghost{background:rgba(255,255,255,.64);border-color:#AEB8C4}
.mat3-documentation{margin-top:52px}
.mat3-documentation a{
  color:var(--blue);font-size:14px;font-weight:600;text-decoration:underline;
  text-underline-offset:4px;
}
.mat3-documentation p{margin-top:7px;font-size:13px;line-height:1.55;color:var(--ink-mid)}

.mat3-selectors{padding:104px 0 112px;background:var(--white)}
.mat3-section-head{max-width:820px;margin:0 auto 48px;text-align:center}
.mat3-section-head h2{font-size:clamp(34px,3.5vw,48px);line-height:1.08;letter-spacing:-.025em}
.mat3-section-head p{margin-top:17px;font-size:16px;line-height:1.7;color:var(--ink-mid)}
.mat3-selector-grid{
  display:grid;grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--line-mid);border-bottom:1px solid var(--line-mid);
}
.mat3-selector{
  display:block;color:var(--ink);text-decoration:none;
  border-left:1px solid var(--line-mid);background:var(--white);
}
.mat3-selector:first-child{border-left:0}
.mat3-selector .media{aspect-ratio:7/5;border:0;border-radius:0;background:#E9ECEE;overflow:hidden}
.mat3-selector img{transition:transform .42s ease}
.mat3-selector span{
  position:relative;display:flex;align-items:center;justify-content:space-between;
  min-height:88px;padding:24px 26px;font-size:18px;font-weight:600;line-height:1.3;
}
.mat3-selector span::after{content:"→";color:var(--blue);font-size:20px;font-weight:400}
.mat3-selector:hover img{transform:scale(1.025)}
.mat3-selector:hover span{text-decoration:underline;text-underline-offset:5px}

.mat3-options{
  padding:104px 0 112px;background:var(--wash);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  scroll-margin-top:var(--nav-h);
}
.mat3-options .mat3-section-head{margin-bottom:40px}
.mat3-tabs{
  display:grid;grid-template-columns:repeat(4,1fr);
  border:1px solid var(--line-mid);border-bottom:0;background:var(--white);
}
.mat3-tab{
  appearance:none;border:0;border-left:1px solid var(--line-mid);border-radius:0;
  background:var(--white);padding:20px 16px;color:var(--ink-mid);
  font:600 14px/1.3 var(--font-body);cursor:pointer;
  transition:background-color .18s,color .18s;
}
.mat3-tab:first-child{border-left:0}
.mat3-tab:hover{color:var(--navy);background:#F5F7F8}
.mat3-tab.active{color:var(--white);background:var(--navy)}
.mat3-tab:focus-visible{position:relative;z-index:2;outline:3px solid var(--orange);outline-offset:-3px}
.mat3-panel{
  display:grid;grid-template-columns:minmax(0,1.03fr) minmax(420px,.97fr);
  min-height:540px;background:var(--white);border:1px solid var(--line-mid);
}
.mat3-panel[hidden]{display:none}
.mat3-panel-copy{padding:clamp(46px,5vw,74px)}
.mat3-panel-copy h3{font-size:clamp(30px,3.2vw,44px);line-height:1.08;letter-spacing:-.025em}
.mat3-panel-copy > p{max-width:680px;margin-top:18px;font-size:15.5px;line-height:1.72;color:var(--ink-mid)}
.mat3-material-columns{
  display:grid;grid-template-columns:1fr 1fr;gap:40px;
  margin:33px 0 31px;padding-top:25px;border-top:1px solid var(--line-mid);
}
.mat3-material-columns h4{margin-bottom:12px;font-size:14.5px}
.mat3-material-columns ul{list-style:none}
.mat3-material-columns li{position:relative;padding:7px 0 7px 16px;font-size:13.5px;line-height:1.45;color:var(--ink-mid)}
.mat3-material-columns li::before{content:"";position:absolute;left:0;top:14px;width:5px;height:5px;background:var(--orange)}
.mat3-panel-media{height:100%;min-height:540px;aspect-ratio:auto;border:0;border-radius:0;background:#E5E9EB}

.mat3-guide-section{padding:112px 0;background:var(--white)}
.mat3-guide-grid{
  display:grid;grid-template-columns:minmax(0,1.1fr) minmax(420px,.9fr);
  align-items:stretch;background:var(--navy-deep);
}
.mat3-guide-media{min-height:560px;aspect-ratio:auto;border:0;border-radius:0;background:#DDE2E5}
.mat3-guide-copy{
  display:flex;flex-direction:column;justify-content:center;
  padding:clamp(54px,6vw,86px);color:var(--white);
}
.mat3-guide-copy h2{font-size:clamp(35px,3.7vw,50px);line-height:1.05;letter-spacing:-.03em}
.mat3-guide-copy > p{margin-top:22px;font-size:16px;line-height:1.72;color:#CDD5E4}
.mat3-guide-copy ul{list-style:none;margin:28px 0 35px;border-top:1px solid rgba(255,255,255,.22)}
.mat3-guide-copy li{
  position:relative;padding:15px 0 15px 22px;border-bottom:1px solid rgba(255,255,255,.18);
  font-size:14px;line-height:1.55;color:#E7EAF1;
}
.mat3-guide-copy li::before{content:"";position:absolute;left:0;top:23px;width:6px;height:6px;background:var(--orange)}
.mat3-guide-copy .btn{align-self:flex-start}
#material-library{scroll-margin-top:var(--nav-h)}

@media(max-width:1080px){
  .mat3-selector-grid{grid-template-columns:1fr 1fr}
  .mat3-selector:nth-child(3){border-left:0;border-top:1px solid var(--line-mid)}
  .mat3-selector:nth-child(4){border-top:1px solid var(--line-mid)}
  .mat3-panel{grid-template-columns:1fr 1fr}
  .mat3-panel-copy{padding:44px}
  .mat3-guide-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:820px){
  .mat3-hero,.mat3-hero-inner{min-height:590px}
  .mat3-hero-copy{width:min(620px,78%)}
  .mat3-hero::after{
    background:linear-gradient(90deg,#F8FAFB 0%,rgba(248,250,251,.96) 44%,rgba(248,250,251,.58) 72%,rgba(248,250,251,.12) 100%);
  }
  .mat3-tabs{display:flex;overflow-x:auto;scrollbar-width:none}
  .mat3-tabs::-webkit-scrollbar{display:none}
  .mat3-tab{flex:1 0 180px}
  .mat3-panel,.mat3-guide-grid{grid-template-columns:1fr}
  .mat3-panel-media{min-height:0;aspect-ratio:16/9}
  .mat3-guide-media{min-height:0;aspect-ratio:16/10}
}
@media(max-width:620px){
  .mat3-hero,.mat3-hero-inner{min-height:625px}
  .mat3-hero-copy{width:100%;padding:48px 0 38px}
  .mat3-hero h1{font-size:clamp(40px,12vw,52px)}
  .mat3-hero .lead{font-size:16px}
  .mat3-hero::after{background:linear-gradient(180deg,rgba(248,250,251,.98) 0%,rgba(248,250,251,.94) 67%,rgba(248,250,251,.64) 100%)}
  .mat3-documentation{margin-top:40px}
  .mat3-selectors,.mat3-options,.mat3-guide-section{padding:76px 0}
  .mat3-section-head{text-align:left;margin-bottom:32px}
  .mat3-selector-grid{grid-template-columns:1fr}
  .mat3-selector,.mat3-selector:nth-child(4){border-left:0;border-top:1px solid var(--line-mid)}
  .mat3-selector:first-child{border-top:0}
  .mat3-selector .media{aspect-ratio:16/9}
  .mat3-selector span{min-height:76px;padding:20px 21px}
  .mat3-panel-copy{padding:36px 24px 42px}
  .mat3-material-columns{grid-template-columns:1fr;gap:22px}
  .mat3-panel-media{aspect-ratio:4/3}
  .mat3-guide-copy{padding:48px 26px 54px}
}

@media(prefers-reduced-motion:reduce){
  .mat3-selector img,.mat3-tab{transition:none!important}
}

/* ============================================================
   COMPANY PAGES — editorial layouts based on established
   manufacturing-site structures. No eyebrow labels, rounded
   template cards, decorative badges, or invented company metrics.
   ============================================================ */
.pl-blog-page,.pl-about-page,.pl-contact-page{background:var(--white)}
.pl-blog-page .media::before,.pl-blog-page .media::after{display:none}
.pl-blog-page .media img,.pl-about-page .media img,.pl-contact-page .media img{object-fit:cover}

/* Blog */
.pl-blog-hero{position:relative;min-height:480px;overflow:hidden;background:#E9EDF0}
.pl-blog-hero-media{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;border:0;border-radius:0}
.pl-blog-hero::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(249,251,252,.99) 0%,rgba(249,251,252,.95) 32%,rgba(249,251,252,.48) 59%,rgba(249,251,252,.04) 78%);
}
.pl-blog-hero-inner{position:relative;z-index:2;min-height:480px;display:flex;align-items:center}
.pl-blog-hero-copy{width:min(650px,55%)}
.pl-blog-hero h1{font-size:clamp(50px,5.7vw,76px);line-height:1;letter-spacing:-.035em}
.pl-blog-hero p{max-width:600px;margin-top:24px;font-size:18px;line-height:1.65;color:var(--ink-mid)}
.pl-blog-feature{padding:104px 0;background:var(--white)}
.pl-blog-feature-grid{
  display:grid;grid-template-columns:minmax(0,1.18fr) minmax(400px,.82fr);
  min-height:520px;color:var(--white);text-decoration:none;background:var(--navy-deep);
}
.pl-blog-feature-grid .media{height:100%;min-height:520px;aspect-ratio:auto;border:0;border-radius:0}
.pl-blog-feature-copy{display:flex;flex-direction:column;justify-content:center;padding:clamp(50px,6vw,82px)}
.pl-blog-meta{font-size:13px;line-height:1.5;color:var(--ink-dim)}
.pl-blog-feature-copy .pl-blog-meta{color:#BFC9DC}
.pl-blog-feature-copy h2{margin-top:18px;font-size:clamp(34px,3.7vw,50px);line-height:1.05;letter-spacing:-.03em}
.pl-blog-feature-copy > p:not(.pl-blog-meta){margin-top:22px;font-size:15.5px;line-height:1.72;color:#D0D7E5}
.pl-blog-feature-copy > span,.pl-blog-post-copy > span{
  display:flex;align-items:center;gap:9px;margin-top:32px;
  font-size:14px;font-weight:600;color:inherit;
}
.pl-blog-feature-copy .arr,.pl-blog-post-copy .arr{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2}
.pl-blog-feature-grid:hover h2,.pl-blog-post:hover h3{text-decoration:underline;text-underline-offset:6px}
.pl-blog-latest{padding:104px 0 112px;background:var(--wash);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.pl-blog-heading{
  display:grid;grid-template-columns:.85fr 1.15fr;gap:60px;align-items:end;
  margin-bottom:45px;
}
.pl-blog-heading h2{font-size:clamp(36px,4vw,52px);letter-spacing:-.025em}
.pl-blog-heading p{max-width:680px;font-size:16px;line-height:1.7;color:var(--ink-mid)}
.pl-blog-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line-mid);border-bottom:1px solid var(--line-mid)}
.pl-blog-post{
  display:flex;flex-direction:column;color:var(--ink);text-decoration:none;
  background:var(--white);border-left:1px solid var(--line-mid);
}
.pl-blog-post:first-child{border-left:0}
.pl-blog-post .media{aspect-ratio:8/5;border:0;border-radius:0;background:#E6EAEC}
.pl-blog-post-copy{display:flex;flex-direction:column;flex:1;padding:28px 28px 32px}
.pl-blog-post-copy h3{margin-top:13px;font-size:23px;line-height:1.25;letter-spacing:-.015em}
.pl-blog-post-copy > p:not(.pl-blog-meta){margin-top:15px;font-size:14.5px;line-height:1.68;color:var(--ink-mid)}
.pl-blog-post-copy > span{margin-top:auto;padding-top:27px;color:var(--navy)}
.pl-blog-topics{padding:96px 0;background:var(--white)}
.pl-blog-topics-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(60px,9vw,130px)}
.pl-blog-topics h2{font-size:clamp(34px,3.6vw,48px);line-height:1.08;letter-spacing:-.025em}
.pl-blog-topics p{max-width:490px;margin-top:19px;font-size:15.5px;line-height:1.7;color:var(--ink-mid)}
.pl-blog-topic-links{border-top:1px solid var(--ink)}
.pl-blog-topic-links a{
  display:flex;align-items:center;justify-content:space-between;padding:20px 0;
  border-bottom:1px solid var(--line-mid);color:var(--ink);font-size:17px;font-weight:600;text-decoration:none;
}
.pl-blog-topic-links a:hover{color:var(--blue)}
.pl-blog-topic-links span{font-size:20px;font-weight:400}
.pl-blog-cta{background:#172E66}
.pl-blog-cta .cta-sub,.pl-blog-cta .cta-side p{color:#BBC6DE}

/* About */
.pl-about-hero{position:relative;height:600px;min-height:600px;overflow:hidden;background:#F4F6F7}
.pl-about-hero-media{
  position:absolute;top:0;right:0;bottom:0;left:18%;
  width:82%;height:600px;aspect-ratio:auto;border:0;border-radius:0;
}
.pl-about-hero-media img{object-position:left center}
.pl-about-hero::after{
  content:"";position:absolute;inset:0;
  z-index:1;
  background:linear-gradient(90deg,rgba(248,250,251,.99) 0%,rgba(248,250,251,.95) 37%,rgba(248,250,251,.55) 61%,rgba(248,250,251,.05) 80%);
}
.pl-about-hero-media::before,.pl-about-hero-media::after{z-index:2}
.pl-about-hero-inner{position:relative;z-index:3;height:600px;min-height:600px;display:flex;align-items:center}
.pl-about-hero-copy{width:min(690px,52%)}
.pl-about-hero h1{font-size:clamp(48px,5.6vw,74px);line-height:1.01;letter-spacing:-.038em}
.pl-about-hero p{max-width:670px;margin-top:25px;font-size:18px;line-height:1.67;color:var(--ink-mid)}
.pl-about-story{padding:112px 0;background:var(--white)}
.pl-about-story-grid{display:grid;grid-template-columns:.88fr 1.12fr;gap:clamp(60px,8vw,116px);align-items:center}
.pl-about-story-copy h2,.pl-about-work h2,.pl-about-control h2{font-size:clamp(36px,4vw,52px);line-height:1.07;letter-spacing:-.03em}
.pl-about-story-copy p{margin-top:20px;font-size:16px;line-height:1.78;color:var(--ink-mid)}
.pl-about-story-media{aspect-ratio:4/3;border:0;border-radius:0;background:#E4E8EA}
.pl-about-purpose{padding:96px 0;background:var(--navy-deep);color:var(--white)}
.pl-about-purpose-grid{display:grid;grid-template-columns:1fr 1fr}
.pl-about-purpose article{padding:12px clamp(44px,6vw,84px) 14px;border-left:1px solid rgba(255,255,255,.24)}
.pl-about-purpose article:first-child{padding-left:0;border-left:0}
.pl-about-purpose article:last-child{padding-right:0}
.pl-about-purpose h2{font-size:clamp(31px,3.5vw,45px);line-height:1.08;letter-spacing:-.025em}
.pl-about-purpose p{margin-top:20px;font-size:17px;line-height:1.72;color:#CCD4E3}
.pl-about-facts{background:var(--white);border-bottom:1px solid var(--line)}
.pl-about-facts-grid{display:grid;grid-template-columns:repeat(4,1fr)}
.pl-about-facts article{padding:42px 28px 45px;border-left:1px solid var(--line-mid)}
.pl-about-facts article:first-child{padding-left:0;border-left:0}
.pl-about-facts article:last-child{padding-right:0}
.pl-about-facts h3{font-size:18px;line-height:1.3}
.pl-about-facts p{margin-top:12px;font-size:13.5px;line-height:1.65;color:var(--ink-mid)}
.pl-about-team{padding:108px 0 116px;background:var(--white);border-bottom:1px solid var(--line)}
.pl-about-team-head{
  display:grid;grid-template-columns:.8fr 1.2fr;gap:60px;align-items:end;
  margin-bottom:48px;
}
.pl-about-team-head h2{font-size:clamp(36px,4vw,52px);line-height:1.07;letter-spacing:-.03em}
.pl-about-team-head p{max-width:680px;font-size:16px;line-height:1.72;color:var(--ink-mid)}
.pl-about-team-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,2.6vw,38px);
}
.pl-about-person{min-width:0;background:var(--white)}
.pl-about-person .media{
  aspect-ratio:4/5;border:0;border-radius:0;background:#F0F1F2;
  background-image:none;
}
.pl-about-page .pl-about-person .media::before{display:block;border-color:#CBCFD3}
.pl-about-page .pl-about-person .media::after{display:block;color:#737A84}
.pl-about-page .pl-about-person .media.loaded::before,
.pl-about-page .pl-about-person .media.loaded::after{display:none}
.pl-about-person-copy{padding:27px 3px 8px}
.pl-about-person-copy h3{font-size:25px;line-height:1.22;letter-spacing:-.018em}
.pl-about-person-role{
  margin-top:9px;padding-bottom:18px;border-bottom:1px solid var(--line-mid);
  font-size:14px;font-weight:600;color:var(--blue);
}
.pl-about-person-copy > p:last-child{margin-top:18px;font-size:14.5px;line-height:1.72;color:var(--ink-mid)}
.pl-about-work{padding:108px 0 116px;background:var(--wash)}
.pl-about-heading{max-width:800px;margin:0 auto 48px;text-align:center}
.pl-about-heading p{margin-top:17px;font-size:16px;line-height:1.7;color:var(--ink-mid)}
.pl-about-work-grid{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line-mid);border-bottom:1px solid var(--line-mid)}
.pl-about-work-card{background:var(--white);border-left:1px solid var(--line-mid)}
.pl-about-work-card:first-child{border-left:0}
.pl-about-work-card .media{aspect-ratio:7/4;border:0;border-radius:0}
.pl-about-work-card > div{padding:36px 38px 42px}
.pl-about-work-card h3{font-size:29px;letter-spacing:-.02em}
.pl-about-work-card p{margin:15px 0 28px;font-size:15px;line-height:1.72;color:var(--ink-mid)}
.pl-about-control{padding:112px 0;background:var(--white)}
.pl-about-control-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(60px,8vw,110px);align-items:center}
.pl-about-control-grid > .media{aspect-ratio:4/3;border:0;border-radius:0}
.pl-about-control-grid > div > p{margin-top:21px;font-size:16px;line-height:1.75;color:var(--ink-mid)}
.pl-about-control-list{margin-top:34px;border-top:1px solid var(--line-mid)}
.pl-about-control-list p{display:grid;grid-template-columns:150px 1fr;gap:24px;padding:17px 0;border-bottom:1px solid var(--line-mid)}
.pl-about-control-list strong{font-size:14px}
.pl-about-control-list span{font-size:13.5px;line-height:1.6;color:var(--ink-mid)}
.pl-about-cta{background:#172E66}
.pl-about-cta .cta-sub,.pl-about-cta .cta-side p{color:#BBC6DE}

/* Contact */
.pl-contact-hero{padding:88px 0 96px;background:var(--white);border-bottom:1px solid var(--line)}
.pl-contact-hero-grid{display:grid;grid-template-columns:.88fr 1.12fr;gap:clamp(60px,8vw,114px);align-items:center}
.pl-contact-hero-copy h1{font-size:clamp(48px,5.5vw,72px);line-height:1;letter-spacing:-.038em}
.pl-contact-hero-copy > p{margin-top:25px;font-size:18px;line-height:1.7;color:var(--ink-mid)}
.pl-contact-email{display:inline-block;margin-top:33px;color:var(--blue);font-size:18px;font-weight:600;text-underline-offset:5px}
.pl-contact-hero-media{aspect-ratio:3/2;border:0;border-radius:0;background:#E7EAEC}
.pl-contact-routes{background:var(--navy-deep);color:var(--white)}
.pl-contact-route-grid{display:grid;grid-template-columns:repeat(3,1fr)}
.pl-contact-route-grid article{padding:52px 36px 55px;border-left:1px solid rgba(255,255,255,.2)}
.pl-contact-route-grid article:first-child{padding-left:0;border-left:0}
.pl-contact-route-grid article:last-child{padding-right:0}
.pl-contact-route-grid h2{font-size:25px;line-height:1.18}
.pl-contact-route-grid p{margin-top:15px;font-size:14.5px;line-height:1.68;color:#CAD3E3}
.pl-contact-route-grid a{display:inline-flex;gap:9px;margin-top:25px;color:var(--white);font-size:14px;font-weight:600;text-decoration:none}
.pl-contact-route-grid a:hover{text-decoration:underline;text-underline-offset:5px}
.pl-contact-route-grid a span{color:var(--orange);font-size:17px}
.pl-contact-quote{padding:112px 0;background:var(--wash);scroll-margin-top:var(--nav-h)}
.pl-contact-quote-grid{display:grid;grid-template-columns:.74fr 1.26fr;gap:clamp(60px,8vw,112px);align-items:start}
.pl-contact-quote-intro{position:sticky;top:calc(var(--nav-h) + 42px)}
.pl-contact-quote-intro h2{font-size:clamp(36px,4vw,52px);line-height:1.07;letter-spacing:-.03em}
.pl-contact-quote-intro > p{margin-top:21px;font-size:16px;line-height:1.72;color:var(--ink-mid)}
.pl-contact-details{margin-top:36px;border-top:1px solid var(--line-mid)}
.pl-contact-details > div{padding:18px 0;border-bottom:1px solid var(--line-mid)}
.pl-contact-details h3{font-size:14.5px}
.pl-contact-details p{margin-top:5px;font-size:13.5px;line-height:1.62;color:var(--ink-mid)}
.pl-contact-form-wrap{background:var(--white);border:1px solid var(--line-mid);padding:clamp(34px,4.5vw,62px)}
.pl-contact-form{max-width:none;background:transparent;border:0;padding:0}
.pl-contact-form .form-grid{gap:0 22px}
.pl-contact-form .field{margin-bottom:24px}
.pl-contact-form .field label{
  font-family:var(--font-body);font-size:12.5px;font-weight:500;
  letter-spacing:0;text-transform:none;color:var(--ink);margin-bottom:9px;
}
.pl-contact-form .field input:not([type="file"]),
.pl-contact-form .field textarea{
  width:100%;border:1px solid #D8DCE1;border-radius:6px;background:var(--white);
  padding:13px 14px;font-size:14px;line-height:1.45;outline:none;
}
.pl-contact-form .field input:not([type="file"]){height:48px}
.pl-contact-form .field textarea{min-height:145px;resize:vertical}
.pl-contact-form .field input:not([type="file"]):focus,
.pl-contact-form .field textarea:focus{border-color:var(--blue);box-shadow:0 0 0 2px rgba(15,73,142,.08)}
.pl-contact-upload{position:relative;min-height:220px;margin-top:22px!important}
.pl-contact-upload .pl-contact-dropzone{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  width:100%;min-height:220px;margin:0;padding:30px 24px;
  border:1px dashed #CCD2D8;border-radius:6px;background:#FCFCFC;
  text-align:center;cursor:pointer;transition:border-color .18s,background-color .18s;
}
.pl-contact-upload:hover .pl-contact-dropzone,
.pl-contact-upload:focus-within .pl-contact-dropzone{border-color:var(--blue);background:#F7FAFE}
.pl-contact-drop-icon{
  display:flex;align-items:center;justify-content:center;width:48px;height:48px;
  margin-bottom:17px;border-radius:50%;background:#F0F2F4;color:var(--navy);
  font-size:25px;font-weight:500;line-height:1;
}
.pl-contact-dropzone strong{font-size:18px;font-weight:500;color:var(--ink)}
.pl-contact-dropzone > span:last-child{margin-top:8px;font-size:11.5px;line-height:1.55;color:var(--ink-dim)}
.pl-contact-upload input[type="file"]{
  position:absolute;inset:0;z-index:2;width:100%;height:100%;padding:0;
  border:0;opacity:0;cursor:pointer;
}
.pl-contact-package{padding:104px 0 112px;background:var(--white)}
.pl-contact-package-head{
  display:grid;grid-template-columns:.85fr 1.15fr;gap:60px;align-items:end;margin-bottom:43px;
}
.pl-contact-package-head h2{font-size:clamp(36px,4vw,52px);line-height:1.07;letter-spacing:-.03em}
.pl-contact-package-head p{font-size:16px;line-height:1.72;color:var(--ink-mid)}
.pl-contact-package-grid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--ink);border-bottom:1px solid var(--ink)}
.pl-contact-package-grid article{padding:28px 26px 33px;border-left:1px solid var(--line-mid)}
.pl-contact-package-grid article:first-child{padding-left:0;border-left:0}
.pl-contact-package-grid article:last-child{padding-right:0}
.pl-contact-package-grid strong{display:block;font-size:25px;font-weight:500;color:var(--blue)}
.pl-contact-package-grid h3{margin-top:30px;font-size:19px}
.pl-contact-package-grid p{margin-top:11px;font-size:13.5px;line-height:1.63;color:var(--ink-mid)}

@media(max-width:980px){
  .pl-blog-feature-grid,.pl-about-story-grid,.pl-about-control-grid,.pl-contact-hero-grid,.pl-contact-quote-grid{grid-template-columns:1fr}
  .pl-blog-feature-grid .media{min-height:0;aspect-ratio:16/9}
  .pl-blog-grid{grid-template-columns:1fr 1fr}
  .pl-blog-post:nth-child(3){border-left:0;border-top:1px solid var(--line-mid)}
  .pl-about-story-grid,.pl-about-control-grid,.pl-contact-hero-grid{gap:48px}
  .pl-about-facts-grid,.pl-contact-package-grid{grid-template-columns:1fr 1fr}
  .pl-about-team-grid{grid-template-columns:repeat(3,1fr)}
  .pl-about-person:nth-child(3){border:0}
  .pl-about-facts article:nth-child(3),.pl-contact-package-grid article:nth-child(3){border-left:0;border-top:1px solid var(--line-mid)}
  .pl-about-facts article:nth-child(4),.pl-contact-package-grid article:nth-child(4){border-top:1px solid var(--line-mid)}
  .pl-contact-hero-copy{max-width:760px}
  .pl-contact-hero-media{aspect-ratio:16/8}
  .pl-contact-quote-intro{position:static;max-width:760px}
  .pl-contact-route-grid article{padding-left:28px;padding-right:28px}
}
@media(max-width:760px){
  .pl-blog-hero-copy,.pl-about-hero-copy{width:min(620px,78%)}
  .pl-about-hero-media{inset:0;width:100%;height:600px}
  .pl-about-hero-media img{object-position:center center}
  .pl-blog-grid,.pl-about-purpose-grid,.pl-about-work-grid,.pl-contact-route-grid{grid-template-columns:1fr}
  .pl-blog-post,.pl-blog-post:nth-child(3),.pl-about-work-card,.pl-contact-route-grid article{border-left:0;border-top:1px solid var(--line-mid)}
  .pl-blog-post:first-child,.pl-about-work-card:first-child,.pl-contact-route-grid article:first-child{border-top:0}
  .pl-blog-heading,.pl-blog-topics-grid,.pl-about-team-head,.pl-contact-package-head{grid-template-columns:1fr;gap:20px}
  .pl-about-team-grid{grid-template-columns:1fr;gap:42px;max-width:560px;margin:0 auto}
  .pl-about-purpose article,.pl-about-purpose article:first-child,.pl-about-purpose article:last-child{padding:38px 0;border-left:0;border-top:1px solid rgba(255,255,255,.24)}
  .pl-about-purpose article:first-child{border-top:0}
  .pl-contact-route-grid article,.pl-contact-route-grid article:first-child,.pl-contact-route-grid article:last-child{padding:38px 0}
}
@media(max-width:620px){
  .pl-blog-hero,.pl-blog-hero-inner{min-height:560px}
  .pl-blog-hero-copy,.pl-about-hero-copy{width:100%}
  .pl-blog-hero::after,.pl-about-hero::after{background:linear-gradient(180deg,rgba(248,250,251,.98) 0%,rgba(248,250,251,.94) 68%,rgba(248,250,251,.62) 100%)}
  .pl-blog-feature,.pl-about-story,.pl-about-team,.pl-about-work,.pl-about-control,.pl-contact-quote,.pl-contact-package{padding:76px 0}
  .pl-blog-feature-copy{padding:42px 25px 48px}
  .pl-blog-latest{padding:76px 0}
  .pl-blog-post-copy{padding:25px 22px 29px}
  .pl-blog-topics{padding:72px 0}
  .pl-about-hero,.pl-about-hero-inner{height:600px;min-height:600px}
  .pl-about-purpose{padding:60px 0}
  .pl-about-facts-grid,.pl-contact-package-grid{grid-template-columns:1fr}
  .pl-about-facts article,.pl-about-facts article:first-child,.pl-about-facts article:last-child,
  .pl-contact-package-grid article,.pl-contact-package-grid article:first-child,.pl-contact-package-grid article:last-child{
    padding:28px 0;border-left:0;border-top:1px solid var(--line-mid);
  }
  .pl-about-facts article:first-child,.pl-contact-package-grid article:first-child{border-top:0}
  .pl-about-team-grid{grid-template-columns:1fr}
  .pl-about-team-grid{gap:42px}
  .pl-about-person,.pl-about-person:nth-child(3){border:0}
  .pl-about-work-card > div{padding:29px 23px 34px}
  .pl-about-control-list p{grid-template-columns:1fr;gap:5px}
  .pl-contact-hero{padding:62px 0 72px}
  .pl-contact-hero-media{aspect-ratio:4/3}
  .pl-contact-form-wrap{padding:30px 20px}
}

/* Contact RFQ-first layout: the form is the primary first-screen action. */
.pl-contact-rfq-hero{
  padding:40px 0 52px;background:var(--wash);
  border-bottom:1px solid var(--line);scroll-margin-top:var(--nav-h);
}
.pl-contact-rfq-grid{
  display:grid;grid-template-columns:minmax(0,40%) minmax(0,60%);
  gap:clamp(44px,5.5vw,78px);align-items:start;
}
.pl-contact-intro{padding-top:8px}
.pl-contact-intro h1{
  max-width:500px;font-size:clamp(46px,4.8vw,64px);
  line-height:1.02;letter-spacing:-.038em;
}
.pl-contact-intro > p{max-width:500px;margin-top:21px;font-size:16px;line-height:1.7;color:var(--ink-mid)}
.pl-contact-intro .pl-contact-email{margin-top:25px;font-size:17px}
.pl-contact-info{margin-top:34px;border-top:1px solid var(--line-mid)}
.pl-contact-info > div{
  display:grid;grid-template-columns:126px 1fr;gap:18px;
  padding:14px 0;border-bottom:1px solid var(--line-mid);
}
.pl-contact-info strong{font-size:13.5px;line-height:1.5}
.pl-contact-info span{font-size:13.5px;line-height:1.5;color:var(--ink-mid)}
.pl-contact-rfq-hero .pl-contact-form-wrap{padding:30px 34px 28px;border-color:#CDD2D7}
.pl-contact-form-head{margin-bottom:21px;padding-bottom:17px;border-bottom:1px solid var(--line)}
.pl-contact-form-head h2{font-size:30px;line-height:1.1;letter-spacing:-.02em}
.pl-contact-form-head p{margin-top:8px;font-size:13.5px;line-height:1.55;color:var(--ink-mid)}
.pl-contact-rfq-hero .pl-contact-form .field{margin-bottom:14px}
.pl-contact-rfq-hero .pl-contact-form .field label{margin-bottom:7px;font-size:12px}
.pl-contact-rfq-hero .pl-contact-form .field input:not([type="file"]){height:44px;padding:10px 12px}
.pl-contact-rfq-hero .pl-contact-form .field textarea{min-height:108px;padding:11px 12px}
.pl-contact-rfq-hero .pl-contact-upload{min-height:132px;margin-top:3px!important;margin-bottom:14px}
.pl-contact-rfq-hero .pl-contact-upload .pl-contact-dropzone{min-height:132px;padding:17px 20px}
.pl-contact-rfq-hero .pl-contact-drop-icon{width:34px;height:34px;margin-bottom:9px;font-size:20px}
.pl-contact-rfq-hero .pl-contact-dropzone strong{font-size:15px}
.pl-contact-rfq-hero .pl-contact-dropzone > span:last-child{margin-top:5px;font-size:10.5px}
.pl-contact-rfq-hero .pl-contact-form .btn-cta{
  margin-top:0;background:var(--navy-deep);border-color:var(--navy-deep);color:var(--white);
}
.pl-contact-rfq-hero .pl-contact-form .btn-cta:disabled{opacity:.72;cursor:wait}
.pl-contact-rfq-hero .pl-contact-form .btn-cta:hover{background:var(--navy);border-color:var(--navy)}
.pl-contact-rfq-hero .form-note{margin-top:10px;font-size:12px}
.pl-form-privacy a{color:var(--navy);text-underline-offset:2px}

/* ---------- privacy policy ---------- */
.legal-page{background:var(--paper)}
.legal-hero{padding:96px 0 78px;background:var(--wash);border-bottom:1px solid var(--line)}
.legal-hero .wrap{max-width:940px}
.legal-hero .eyebrow{margin-bottom:18px;color:var(--navy);font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.legal-hero h1{font-size:clamp(46px,6vw,72px);line-height:1;letter-spacing:-.035em}
.legal-hero p:last-child{max-width:760px;margin-top:24px;color:var(--ink-mid);font-size:18px;line-height:1.65}
.legal-content{padding:92px 0 112px}
.legal-prose{max-width:860px}
.legal-prose section{padding:0 0 38px;margin-bottom:38px;border-bottom:1px solid var(--line)}
.legal-prose section:last-child{padding-bottom:0;margin-bottom:0;border-bottom:0}
.legal-prose h2{margin-bottom:16px;font-size:clamp(24px,2.6vw,32px);line-height:1.2;letter-spacing:-.018em}
.legal-prose p,.legal-prose li{color:var(--ink-mid);font-size:16px;line-height:1.75}
.legal-prose p+p{margin-top:13px}
.legal-prose ul{margin:15px 0 15px 22px}
.legal-prose li+li{margin-top:7px}
.legal-prose a{color:var(--navy);text-underline-offset:3px}
@media(max-width:760px){
  .legal-hero{padding:68px 0 54px}
  .legal-hero h1{font-size:42px}
  .legal-hero p:last-child{font-size:16px}
  .legal-content{padding:64px 0 80px}
  .legal-prose section{padding-bottom:30px;margin-bottom:30px}
}
.pl-contact-routes{background:#172E66}
.pl-contact-route-grid article{padding-top:39px;padding-bottom:41px}
.pl-contact-route-grid h2{font-size:22px}
.pl-contact-route-grid p{margin-top:12px;font-size:13.5px;line-height:1.62}
.pl-contact-route-grid a{margin-top:18px;font-size:13.5px}

@media(max-width:980px){
  .pl-contact-rfq-hero{padding:54px 0 64px}
  .pl-contact-rfq-grid{grid-template-columns:1fr;gap:38px}
  .pl-contact-intro{max-width:760px;padding-top:0}
  .pl-contact-intro h1{max-width:650px}
}
@media(max-width:760px){
  .pl-contact-route-grid article,
  .pl-contact-route-grid article:first-child,
  .pl-contact-route-grid article:last-child{padding:30px 0 32px}
}
@media(max-width:620px){
  .pl-contact-rfq-hero{padding:38px 0 48px}
  .pl-contact-intro h1{font-size:clamp(40px,12vw,52px)}
  .pl-contact-info > div{grid-template-columns:1fr;gap:4px}
  .pl-contact-rfq-hero .pl-contact-form-wrap{padding:24px 18px 22px}
  .pl-contact-rfq-hero .pl-contact-form .form-grid{grid-template-columns:1fr}
  .pl-contact-rfq-hero .pl-contact-upload,
  .pl-contact-rfq-hero .pl-contact-upload .pl-contact-dropzone{min-height:150px}
}

/* Quality control — restrained editorial layout with inspection stages,
   capability detail, and requested records connected to the drawing. */
.quality-page{background:var(--white)}
.quality-hero{display:grid;grid-template-columns:minmax(0,44%) minmax(0,56%);min-height:560px}
.quality-hero-copy{display:flex;align-items:center;background:var(--navy-deep);color:var(--white)}
.quality-hero-copy > div{width:min(100%,570px);margin-left:auto;padding:72px clamp(42px,5.5vw,84px) 72px 28px}
.quality-hero h1{font-size:clamp(44px,4.5vw,64px);line-height:1.03;letter-spacing:-.038em}
.quality-hero p{max-width:520px;margin-top:24px;font-size:17px;line-height:1.72;color:rgba(255,255,255,.78)}
.quality-hero .btn{margin-top:31px}
.quality-hero-media{min-height:560px;border:0;border-radius:0;background:#E9ECEF}
.quality-hero-media::after{color:#79808A}
.quality-hero-media::before{border-color:#B9BEC5}
.quality-overview{padding:96px 0 102px;background:var(--paper)}
.quality-overview-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:90px;align-items:start}
.quality-overview h2,.quality-inspection h2,.quality-records h2,.quality-certificates h2,.quality-cta h2{font-size:clamp(38px,4vw,54px);line-height:1.06;letter-spacing:-.035em}
.quality-overview-grid > p{max-width:610px;padding-top:7px;font-size:17px;line-height:1.75;color:var(--ink-mid)}
.quality-stage-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:66px;border-top:1px solid var(--ink);border-bottom:1px solid var(--line-mid)}
.quality-stage-grid article{min-height:260px;padding:25px 28px 32px;border-left:1px solid var(--line-mid)}
.quality-stage-grid article:first-child{border-left:0}
.quality-stage-grid span{display:block;font-family:var(--font-mono);font-size:14px;color:var(--ink-dim)}
.quality-stage-grid h3{margin-top:38px;font-size:21px;line-height:1.25}
.quality-stage-grid p{margin-top:12px;font-size:14px;line-height:1.68;color:var(--ink-mid)}
.quality-inspection{padding:104px 0;background:var(--white)}
.quality-inspection-grid{display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);gap:84px;align-items:center}
.quality-detail-media{aspect-ratio:3/2;border:0;border-radius:0;background:#E9ECEF}
.quality-detail-media::after{color:#79808A}
.quality-detail-media::before{border-color:#B9BEC5}
.quality-inspection-copy > p{max-width:570px;margin-top:23px;font-size:16px;line-height:1.72;color:var(--ink-mid)}
.quality-inspection-copy dl{margin-top:38px;border-top:1px solid var(--ink)}
.quality-inspection-copy dl > div{display:grid;grid-template-columns:170px 1fr;gap:28px;padding:19px 0;border-bottom:1px solid var(--line-mid)}
.quality-inspection-copy dt{font-size:14px;font-weight:700;line-height:1.45}
.quality-inspection-copy dd{font-size:14px;line-height:1.65;color:var(--ink-mid)}
.quality-records{padding:96px 0 100px;background:#102A58;color:var(--white)}
.quality-records-grid{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:100px;align-items:start}
.quality-records-grid > div:first-child p{max-width:480px;margin-top:24px;font-size:16px;line-height:1.72;color:rgba(255,255,255,.7)}
.quality-record-list{border-top:1px solid rgba(255,255,255,.5)}
.quality-record-list > div{display:grid;grid-template-columns:190px 1fr;gap:28px;padding:20px 0;border-bottom:1px solid rgba(255,255,255,.18)}
.quality-record-list strong{font-size:14px;line-height:1.5}
.quality-record-list span{font-size:14px;line-height:1.65;color:rgba(255,255,255,.7)}
.quality-certificates{padding:96px 0 102px;background:var(--paper)}
.quality-certificates-head{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:90px;align-items:start}
.quality-certificates-head p{max-width:620px;padding-top:5px;font-size:16px;line-height:1.75;color:var(--ink-mid)}
.quality-certificate-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;margin-top:58px}
.quality-certificate{aspect-ratio:3/4;border:1px solid var(--line-mid);border-radius:0;background:#F0F1F2}
.quality-certificate::before{border-color:#C8CCD1}
.quality-certificate::after{color:#737A84}
.quality-cta{padding:74px 0;background:#203B76;color:var(--white)}
.quality-cta-inner{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:70px;align-items:center}
.quality-cta h2{max-width:760px;font-size:clamp(34px,3.6vw,48px)}
.quality-cta p{max-width:680px;margin-top:17px;font-size:15px;line-height:1.68;color:rgba(255,255,255,.72)}
.quality-cta .btn{white-space:nowrap;background:var(--amber);color:var(--ink)}
@media(max-width:980px){
  .quality-hero{grid-template-columns:1fr;min-height:0}
  .quality-hero-copy > div{width:auto;max-width:none;margin:0;padding:72px 28px}
  .quality-hero-media{min-height:460px}
  .quality-overview-grid,.quality-records-grid{grid-template-columns:1fr;gap:30px}
  .quality-certificates-head{grid-template-columns:1fr;gap:26px}
  .quality-stage-grid{grid-template-columns:1fr 1fr}
  .quality-stage-grid article:nth-child(3){border-left:0;border-top:1px solid var(--line-mid)}
  .quality-stage-grid article:nth-child(4){border-top:1px solid var(--line-mid)}
  .quality-inspection-grid{grid-template-columns:1fr;gap:54px}
}
@media(max-width:680px){
  .quality-hero-copy > div{padding:58px 22px}
  .quality-hero-media{min-height:320px}
  .quality-overview,.quality-inspection,.quality-records,.quality-certificates{padding:72px 0}
  .quality-stage-grid{grid-template-columns:1fr;margin-top:46px}
  .quality-stage-grid article{min-height:0;padding:24px 0 30px;border-left:0;border-top:1px solid var(--line-mid)}
  .quality-stage-grid article:first-child{border-top:0}
  .quality-stage-grid h3{margin-top:24px}
  .quality-inspection-copy dl > div,.quality-record-list > div{grid-template-columns:1fr;gap:7px}
  .quality-certificate-grid{grid-template-columns:1fr;gap:24px;margin-top:44px}
  .quality-cta-inner{grid-template-columns:1fr;gap:30px}
  .quality-cta .btn{justify-self:start}
}

/* Simplified surface-finishes page — one restrained image, plain process
   descriptions, drawing requirements, and no badges, numbered labels, or cards. */
.surface-simple-page{background:var(--white)}
.surface-simple-hero{padding:78px 0 86px;background:var(--paper);border-bottom:1px solid var(--line)}
.surface-simple-hero-grid{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:78px;align-items:center}
.surface-simple-hero-copy h1{max-width:610px;font-size:clamp(48px,5vw,70px);line-height:1.02;letter-spacing:-.042em}
.surface-simple-hero-copy p{max-width:570px;margin-top:26px;font-size:17px;line-height:1.75;color:var(--ink-mid)}
.surface-simple-hero-copy .btn{margin-top:31px}
.surface-simple-media{aspect-ratio:3/2;border:1px solid var(--line-mid);border-radius:0;background:#F0F1F2}
.surface-simple-media::before{border-color:#C8CCD1}
.surface-simple-media::after{color:#737A84}
.surface-simple-options{padding:96px 0 102px}
.surface-simple-intro{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:90px;align-items:start}
.surface-simple-intro h2,.surface-simple-drawing h2,.surface-simple-cta h2{font-size:clamp(38px,4vw,54px);line-height:1.06;letter-spacing:-.035em}
.surface-simple-intro p{max-width:620px;padding-top:5px;font-size:16px;line-height:1.75;color:var(--ink-mid)}
.surface-simple-list{display:grid;grid-template-columns:1fr 1fr;margin-top:62px;border-top:1px solid var(--ink)}
.surface-simple-list article{min-height:190px;padding:28px 38px 34px 0;border-bottom:1px solid var(--line-mid)}
.surface-simple-list article:nth-child(even){padding-right:0;padding-left:38px;border-left:1px solid var(--line-mid)}
.surface-simple-list h3{font-size:23px;line-height:1.28}
.surface-simple-list p{max-width:530px;margin-top:13px;font-size:14.5px;line-height:1.72;color:var(--ink-mid)}
.surface-simple-drawing{padding:96px 0;background:var(--wash)}
.surface-simple-drawing-grid{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:92px;align-items:start}
.surface-simple-drawing-grid > div > p{max-width:470px;margin-top:22px;font-size:16px;line-height:1.72;color:var(--ink-mid)}
.surface-simple-drawing dl{border-top:1px solid var(--ink)}
.surface-simple-drawing dl > div{display:grid;grid-template-columns:180px 1fr;gap:30px;padding:20px 0;border-bottom:1px solid var(--line-mid)}
.surface-simple-drawing dt{font-size:14px;font-weight:700;line-height:1.5}
.surface-simple-drawing dd{font-size:14px;line-height:1.68;color:var(--ink-mid)}
.surface-simple-cta{padding:74px 0;background:#203B76;color:var(--white)}
.surface-simple-cta-inner{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:70px;align-items:center}
.surface-simple-cta h2{max-width:750px;font-size:clamp(34px,3.6vw,48px)}
.surface-simple-cta p{max-width:680px;margin-top:17px;font-size:15px;line-height:1.68;color:rgba(255,255,255,.72)}
.surface-simple-cta .btn{white-space:nowrap;background:var(--amber);color:var(--ink)}
@media(max-width:900px){
  .surface-simple-hero-grid,.surface-simple-intro,.surface-simple-drawing-grid{grid-template-columns:1fr;gap:48px}
  .surface-simple-hero-copy h1{max-width:720px}
  .surface-simple-media{max-width:760px}
  .surface-simple-cta-inner{grid-template-columns:1fr;gap:30px}
  .surface-simple-cta .btn{justify-self:start}
}
@media(max-width:620px){
  .surface-simple-hero{padding:58px 0 64px}
  .surface-simple-options,.surface-simple-drawing{padding:72px 0}
  .surface-simple-list{grid-template-columns:1fr;margin-top:46px}
  .surface-simple-list article,.surface-simple-list article:nth-child(even){min-height:0;padding:24px 0 28px;border-left:0}
  .surface-simple-drawing dl > div{grid-template-columns:1fr;gap:7px}
}

@media(prefers-reduced-motion:reduce){
  .pl-blog-feature-grid,.pl-blog-post,.pl-blog-topic-links a{transition:none!important}
}