@charset "UTF-8";
/* ==========================================================================
   CTCC — main.css   ·   the theme's single stylesheet
   Everything the site needs, in one file, in cascade order:
     PART 1  shared    tokens, reset, layout, buttons, topbar, header,
                       page banner, footer, archive parts  — every page
     PART 2  homepage                                       — prefix h-
     PART 3  about us                                       — prefix a-
     PART 4  inquiry                                        — prefix i-
     PART 5  product archive   product-category.php         — prefix pc-
     PART 6  product single    product-single.php           — prefix ps-
     PART 7  news archive      news-category.php            — prefix nc-
     PART 8  news single       news-single.php              — prefix ns-
     PART 9  tag pages         product-tag.php, news-tag.php — pt- / nt-
     PART 10 search results    search.php                   — prefix search-
     PART 11 404              404.php                       — prefix e404-
     PART 12 taxonomy archive  product-tax.php              — prefix ptx-
     (PART 13 removed 2026-10-02: material hub Pages deleted, trees are categories)
   One file means there is no per-file isolation left, so the prefix is the
   only guard: page rules must carry their page prefix and may NEVER be reused
   by another page. Anything two pages need belongs in PART 1.
   Prefix = the template's own initials, never the concept (inquiry -> i-, not
   contact -> c-; product-single -> ps-, not pd-). `c-` stays off limits
   because the token layer owns it (--c-* colour scale).
   The homepage keeps its own h- rules and is never restyled to match these
   pages; nothing below PART 4 may reach into h-.
   ========================================================================== */

/* ==========================================================================
   PART 1 — shared, all pages   (was static/css/base.css)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens — sampled from moban.wpmbg.com/demo/2023new/waimaojixie
   -------------------------------------------------------------------------- */
:root {
  /* Brand */
  /* Sampled from the reference shop, then lifted roughly 9 points of
     lightness so the whole site reads one notch brighter. Hue and
     saturation are unchanged — only L moved, so the family stays in tune.
     The second lift (L +4) was to stop the navy reading heavy / flat
     against the orange CTA.                                               */
  --c-primary:      #164393;   /* headings, primary surfaces            */
  --c-primary-rgb:  22,67,147; /* same colour, for rgba() overlays      */
  --c-primary-d:    #0E3476;   /* darker shade for gradients / overlays */
  --c-primary-d-rgb: 14,52,118;
  --c-primary-l:    #2259B9;
  --c-link:         #014C9D;   /* button / link hover                   */
  --c-link-2:       #0D5BBA;   /* dropdown item hover                   */
  --c-accent:       #F26F20;   /* accent fill: CTA, badges, logo mark   */
  --c-accent-h:     #C24E00;   /* accent fill, hover (darker)           */
  --c-accent-l:     #FF6A00;   /* bright accent for dark surfaces       */
  --c-accent-t:     #C24E00;   /* accent as text on light surfaces      */
  --c-topbar:       #01ABF5;   /* announcement bar                      */

  /* Neutrals */
  --c-dark:         #0A2951;   /* footer                                */
  --c-heading:      #164393;
  --c-text:         #7A7A7A;
  --c-grey:         #868988;
  --c-line:         #E4E7ED;
  --c-line-2:       #D7CFCF;
  --c-soft:         #F7F9FD;
  --c-light:        #F9F9F9;
  --c-grey-bg:      #F3F3F3;
  --c-white:        #FFFFFF;

  /* Type */
  --f-head: "Saira", "Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
  --f-body: "Roboto", "Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei", sans-serif;

  /* Metrics */
  --container:      1200px;
  --topbar-h:       45px;
  --header-h:       96px;   /* over the hero, not yet scrolled */
  --header-h-pin:   68px;   /* once scrolled / on inner pages  */
  --section-pad:    72px;
  --gutter:         15px;
}

/* --------------------------------------------------------------------------
   2. Reset
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--f-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.9;                 /* the reference body line-height */
  color: var(--c-text);
  background: var(--c-white);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--c-link); text-decoration: none; transition: color .25s ease; }
a:hover { color: var(--c-accent-t); }
ul, ol { margin: 0; padding: 0; list-style: none; }
p { margin: 0 0 16px; }
figure, blockquote { margin: 0; }

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 16px;
  font-family: var(--f-head);
  font-weight: 500;                 /* reference never goes above 500 */
  color: var(--c-heading);
  line-height: 1.2;
}
h1 { font-size: clamp(34px, 4.6vw, 65px); line-height: 1.04; }
h2 { font-size: 32px; }
h3 { font-size: 22px; line-height: 1.36; }
h4 { font-size: 19px; line-height: 1.42; }
h5 { font-size: 16px; line-height: 1.5; }
h6 { font-size: 15px; line-height: 1.5; text-transform: uppercase; letter-spacing: .06em; }

:focus-visible { outline: 2px solid var(--c-accent-l); outline-offset: 2px; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--c-accent); color: #fff; padding: 12px 20px;
}
.skip-link:focus { left: 0; color: #fff; }

/* --------------------------------------------------------------------------
   3. Layout primitives
   -------------------------------------------------------------------------- */
.container {
  width: 100%; max-width: var(--container);
  margin: 0 auto; padding: 0 var(--gutter);
}
.section { padding: var(--section-pad) 0; }
.section--soft  { background: var(--c-soft); }
.section--light { background: var(--c-light); }
.section--grey  { background: var(--c-grey-bg); }
.section--tight { padding: 48px 0; }

/* Centred block heading — title / optional subtitle */
.section-head { margin-bottom: 44px; }
.section-head--center { text-align: center; }
.section-head__title { margin-bottom: 10px; }
.section-head__sub {
  max-width: 720px; margin: 0 auto;
  font-size: 15px; line-height: 1.9; color: var(--c-text);
}

/* Inline text link with an arrow */
.arrow-link {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--f-head); font-size: 15px; font-weight: 500;
  color: var(--c-link); text-transform: uppercase; letter-spacing: .04em;
}
.arrow-link .arrow { transition: transform .25s ease; }
.arrow-link:hover { color: var(--c-accent-t); }
.arrow-link:hover .arrow { transform: translateX(4px); }

/* --------------------------------------------------------------------------
   4. Buttons — square, uppercase Saira, hover shifts to the link blue
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 32px;
  font-family: var(--f-head); font-size: 15px; font-weight: 500;
  line-height: 1; text-transform: uppercase; letter-spacing: .05em;
  border: 1px solid transparent; border-radius: 0;
  cursor: pointer;
  transition: background-color .3s ease, color .3s ease, border-color .3s ease;
}
.btn .arrow { display: inline-block; transition: transform .25s ease; }
.btn:hover .arrow { transform: translateX(4px); }

.btn--accent  { background: var(--c-accent);  color: #fff; border-color: var(--c-accent-h); }
.btn--accent:hover  { background: var(--c-accent-h); color: #fff; border-color: var(--c-accent-h); }
.btn--primary { background: var(--c-primary); color: #fff; border-color: var(--c-primary); }
.btn--primary:hover { background: var(--c-link); color: #fff; border-color: var(--c-link); }
.btn--outline { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); }
.btn--outline:hover { background: #fff; color: var(--c-primary); border-color: #fff; }
.btn--ghost   { background: transparent; color: var(--c-primary); border-color: var(--c-primary); }
.btn--ghost:hover { background: var(--c-primary); color: #fff; }
.btn--white   { background: #fff; color: var(--c-primary); border-color: #fff; }
.btn--white:hover { background: var(--c-accent); color: #fff; border-color: var(--c-accent); }
.btn--sm      { padding: 11px 22px; font-size: 14px; }
.btn--lg      { padding: 18px 40px; font-size: 16px; }
.btn--block   { display: flex; width: 100%; }

/* --------------------------------------------------------------------------
   5. Site topbar (announcement / advert strip)
   -------------------------------------------------------------------------- */
.site-topbar {
  position: relative; z-index: 101;
  min-height: var(--topbar-h);
  background: var(--c-topbar);
  color: rgba(255,255,255,.92);
  font-size: 16px; line-height: 1.2;
}
.site-topbar__inner {
  display: flex; align-items: center; justify-content: center;
  gap: 30px; flex-wrap: wrap;
  min-height: var(--topbar-h);
}
.site-topbar a { color: rgba(255,255,255,.92); }
.site-topbar a:hover { color: #fff; }
.site-topbar__item { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.site-topbar__item svg { flex-shrink: 0; opacity: .8; }

/* --------------------------------------------------------------------------
   6. Site header — one geometry, two paints

   The bar is FIXED, never sticky: a sticky bar would shove the whole page up
   by 28px the instant it changed height, whereas a fixed bar can run the
   96px -> 68px shrink without reflowing anything underneath it.

   Being out of the flow also means the browser will NOT carry the bar up with
   the page while you scroll — so JS supplies exactly that motion: the bar is
   translated down by the announcement-bar height and that offset is eaten away
   by the scroll position. It therefore starts parked under the announcement
   bar and rides up with the page; the moment it reaches the top of the viewport
   (scroll = announcement-bar height) the offset is 0, JS adds .is-pinned and
   the shrink runs. Left and right edges never move — only height and the
   vertical offset do.

   Every template whose first band is not a hero carries a .page-banner (404
   carries .e404), and its top padding is --header-h + its original padding,
   i.e. exactly the room the bar takes, so inner pages look the way they did.

     .site-header--overlay : transparent over the photo band (home, about us,
                             inquiry), solid navy once pinned
     .site-header--light   : solid white bar, navy type (every other page)
   -------------------------------------------------------------------------- */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  height: var(--header-h);
  transition: height .3s ease, background-color .3s ease,
              border-bottom-color .3s ease, box-shadow .3s ease;
}
.site-header.is-pinned { height: var(--header-h-pin); }
.site-header__inner {
  display: flex; align-items: center; gap: 24px;
  height: 100%;
  /* Owns a stacking context so the header content paints ABOVE the scrim
     drawn by .site-header--overlay::before. Without it the scrim lands on
     top of the logo, the nav and the orange CTA — positioned descendants
     paint after static ones — which visibly desaturated the button
     (#F26F20 read as ~#C76430 next to the identical hero button).
     Same idiom as .h-hero__copy and .page-banner__inner. */
  position: relative; z-index: 1;
}

/* --overlay — floats over the photo, with a gradient under the white type so
   the type stays legible; turns solid navy as it pins. */
.site-header--overlay { background: transparent; }
.site-header--overlay.is-pinned {
  background: var(--c-primary);
  box-shadow: 0 4px 18px rgba(0, 0, 0, .18);
}
.site-header--overlay:not(.is-pinned)::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(var(--c-primary-d-rgb),.38) 0%, rgba(var(--c-primary-d-rgb),0) 100%);
}

/* --light — white bar. Its type colours are set in the block at the end of
   this section, after the rules they have to override. */
.site-header--light {
  background: var(--c-white);
  border-bottom: 1px solid var(--c-line);
}
.site-header--light.is-pinned {
  border-bottom-color: transparent;
  box-shadow: 0 4px 18px rgba(10, 41, 81, .10);
}

/* Logo (image: transparent PNG, blue hexagon + orange wordmark) */
.site-logo { display: inline-flex; align-items: center; flex-shrink: 0; }
.site-logo img { display: block; height: 44px; width: auto; }
/* On photo-band pages (home / about / inquiry) the header floats transparent
   over a dark photo: the full-colour logo loses contrast there, so the
   overlay variant renders it as a flat white silhouette instead. */
/* White silhouette on the overlay header (home / about / inquiry photo bands):
   the full-colour logo loses contrast on the dark photo, so the overlay
   variant renders it flat white. Restored 2026-10-03 after user review. */
.site-header--overlay .site-logo img { filter: brightness(0) invert(1); }

/* Primary navigation — uppercase, 1px red underline on hover */
.site-nav { display: flex; align-items: stretch; height: 100%; margin: 0 auto; min-width: 0; }
.site-nav__list { display: flex; align-items: stretch; height: 100%; }
.site-nav__list > li { position: relative; display: flex; align-items: stretch; }
.site-nav__list > li > a {
  display: flex; align-items: center; gap: 6px;
  height: 100%; padding: 0 15px;
  white-space: nowrap;
  font-family: var(--f-head); font-size: 15px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .04em;
  color: #fff;
  border-bottom: 1px solid transparent;
  transition: border-color .25s ease, color .25s ease;
}
.site-nav__list > li > a .caret { width: 10px; height: 10px; opacity: .75; }
.site-nav__list > li:hover > a,
.site-nav__list > li.is-current > a { border-bottom-color: var(--c-accent-l); }

/* Dropdown */
.site-nav__list .sub-menu {
  position: absolute; top: 100%; left: 50%;
  min-width: 232px; padding: 8px 0;
  background: #fff;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .14);
  opacity: 0; visibility: hidden;
  transform: translate3d(-50%, 10px, 0);
  transition: opacity .35s ease, transform .35s ease, visibility .35s ease;
  z-index: 30;
}
.site-nav__list > li:hover > .sub-menu,
.site-nav__list > li:focus-within > .sub-menu {
  opacity: 1; visibility: visible; transform: translate3d(-50%, 0, 0);
}
.site-nav__list .sub-menu a {
  display: block; padding: 10px 20px;
  font-family: var(--f-body); font-size: 14px; line-height: 1.5;
  color: var(--c-heading); text-align: center;
}
.site-nav__list .sub-menu a:hover { background: var(--c-link-2); color: #fff; }

/* Right-hand actions: language switch + inquiry button */
.site-header__actions { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }

.lang-switch { position: relative; }
.lang-switch__btn {
  display: inline-flex; align-items: center; gap: 7px;
  height: 38px; padding: 0 13px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.22); border-radius: 0;
  color: #fff; cursor: pointer;
  font-family: var(--f-head); font-size: 14px; font-weight: 500; letter-spacing: .04em;
  transition: background-color .25s ease, border-color .25s ease;
}
.lang-switch__btn:hover { background: rgba(255,255,255,.2); border-color: rgba(255,255,255,.4); }
.lang-switch__btn .caret { width: 10px; height: 10px; }
.lang-switch__list {
  position: absolute; top: calc(100% + 8px); right: 0;
  min-width: 170px; padding: 8px 0;
  background: #fff; box-shadow: 0 10px 26px rgba(0, 0, 0, .14);
  opacity: 0; visibility: hidden; transform: translate3d(0, 8px, 0);
  transition: opacity .3s ease, transform .3s ease, visibility .3s ease;
  z-index: 30;
}
.lang-switch:hover .lang-switch__list,
.lang-switch:focus-within .lang-switch__list {
  opacity: 1; visibility: visible; transform: translate3d(0, 0, 0);
}
.lang-switch__list a {
  display: block; padding: 9px 18px;
  font-size: 14px; color: var(--c-heading);
}
.lang-switch__list a:hover { background: var(--c-link-2); color: #fff; }
.lang-switch__list a.is-active { color: var(--c-accent-t); font-weight: 500; }

/* Burger (mobile) */
.nav-toggle {
  display: none;
  width: 44px; height: 38px; padding: 0;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.22); border-radius: 0;
  color: #fff; cursor: pointer;
}
/* One button, two states: while the drawer is out the bars fold into an X, so
   the drawer needs no close control of its own. 10px is the real distance
   between the bar centres at mobile sizes (2px bar + 4px margin either side),
   i.e. exactly what it takes to land all three on one line. */
.nav-toggle span {
  display: block; width: 20px; height: 2px; margin: 4px auto;
  background: currentColor;
  transition: transform .3s ease, opacity .2s ease;
}
.nav-toggle.is-active span:nth-child(1) { transform: translateY(10px) rotate(45deg); }
.nav-toggle.is-active span:nth-child(2) { opacity: 0; }
.nav-toggle.is-active span:nth-child(3) { transform: translateY(-10px) rotate(-45deg); }

/* Accordion chevron for the mobile drawer. display:none here — above 960px the
   section opens on hover and the link already carries a caret of its own. */
.sub-toggle {
  display: none;
  align-items: center; justify-content: center;
  padding: 0;
  background: transparent; border: 0;
  border-bottom: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.7); cursor: pointer;
  transition: color .25s ease, background-color .25s ease;
}
.sub-toggle .caret { width: 12px; height: 12px; transition: transform .3s ease; }
.sub-toggle:hover { color: #fff; background: rgba(255,255,255,.06); }
.site-nav li.is-expanded > .sub-toggle { color: #fff; }
.site-nav li.is-expanded > .sub-toggle .caret { transform: rotate(180deg); }

/* CTA that lives inside the mobile drawer instead of the bar. The bar hides
   its own button under 640px (see §11) so that the logo and the burger — both
   flex-shrink: 0 — can never overflow the row and push the burger off screen.
   Hidden here at every width; the drawer re-enables it. */
.site-nav__cta { display: none; }

/* ---- Light variant: navy type on the white bar --------------------------
   Sits after the rules above so it wins on source order as well as on
   specificity. --c-primary is the site's heading navy, so the bar reads as
   the same family as every H1 under it; hover lifts the label to the orange
   used by every other control on the site, and the CTA keeps its brand fill.
   The language switch and the burger trade their white-on-dark glass for a
   6% navy wash so they still read as buttons on white.                    */
.site-header--light .site-nav__list > li > a { color: var(--c-primary); }
.site-header--light .site-nav__list > li:hover > a,
.site-header--light .site-nav__list > li.is-current > a { color: var(--c-accent-t); }

/* The dropdown is white too, so it needs an edge against the bar */
.site-header--light .site-nav__list .sub-menu { border-top: 2px solid var(--c-accent); }

.site-header--light .lang-switch__btn {
  background: rgba(22, 67, 147, .06);
  border-color: rgba(22, 67, 147, .22);
  color: var(--c-primary);
}
.site-header--light .lang-switch__btn:hover {
  background: rgba(22, 67, 147, .13);
  border-color: rgba(22, 67, 147, .42);
}
.site-header--light .nav-toggle {
  background: rgba(22, 67, 147, .06);
  border-color: rgba(22, 67, 147, .22);
  color: var(--c-primary);
}

/* --------------------------------------------------------------------------
   7. Inner-page banner (used by every template except home)
   -------------------------------------------------------------------------- */
.page-banner {
  position: relative;
  /* The bar is fixed, so it takes no room in the flow: this banner starts
     right under the announcement bar and the bar floats on top of it — which
     is also what lets the transparent variant work on about us / inquiry.
     Clearing --header-h here restores the original 76px of air under the bar. */
  padding: calc(var(--header-h) + 76px) 0 66px;
  background: var(--c-primary) url("../img/hero-machining.webp") center/cover no-repeat;
  color: #fff;
}
.page-banner::before {
  content: ""; position: absolute; inset: 0;
  background: rgba(var(--c-primary-d-rgb), .72);
}
.page-banner__inner { position: relative; z-index: 1; }
/* One size for every subpage heading on the site, not the fluid clamp the bare
   h1 gets: the banners all sit in the same band with the same 66px of air below
   them, so a 65px heading here just fights the breadcrumb. Phones keep the old
   floor (see the 640px block) — "Send Your Inquiry" at 45px wraps on a 375px
   screen, and the banner has no vertical room to spare. */
.page-banner__title { color: #fff; margin: 0 0 10px; font-size: 45px; }
.breadcrumb { display: flex; flex-wrap: wrap; gap: 8px; font-size: 14px; color: rgba(255,255,255,.75); }
.breadcrumb a { color: rgba(255,255,255,.9); }
.breadcrumb a:hover { color: #fff; }
.breadcrumb__sep { opacity: .55; }

/* --------------------------------------------------------------------------
   8. Site footer
   -------------------------------------------------------------------------- */
.site-footer { background: var(--c-dark); color: rgba(255,255,255,.66); font-size: 14.5px; }
/* Longhands on purpose — this class sits on the SAME element as .container.
   A `padding` shorthand here (equal specificity, later in the file) wipes the
   container's horizontal gutter, which is what used to leave the whole footer
   flush against the edge of the screen on phones. The side padding belongs to
   .container; this rule only owns the vertical rhythm. */
.site-footer__main { padding-top: 62px; padding-bottom: 46px; }
.site-footer__grid {
  display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.25fr; gap: 44px;
}
.site-footer h4 {
  color: #fff; font-size: 16px; font-weight: 500;
  letter-spacing: .06em; text-transform: uppercase;
  margin: 0 0 22px; padding-bottom: 12px;
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.site-footer__brand .site-logo { margin-bottom: 20px; }
.site-footer__brand p { line-height: 1.9; margin-bottom: 18px; }
.site-footer__certs { display: flex; flex-wrap: wrap; gap: 8px; }
.site-footer__certs span {
  padding: 5px 11px; font-size: 12px; letter-spacing: .04em;
  border: 1px solid rgba(255,255,255,.22); color: rgba(255,255,255,.8);
}
.site-footer li { margin-bottom: 12px; }
.site-footer li a { color: rgba(255,255,255,.66); }
.site-footer li a:hover { color: #fff; }
.site-footer__contact-line {
  display: flex; gap: 11px; align-items: flex-start; margin-bottom: 15px; line-height: 1.7;
}
.site-footer__contact-line svg { flex-shrink: 0; margin-top: 4px; color: var(--c-accent-l); }
.site-footer__contact-line strong { color: #fff; font-weight: 500; display: block; }
.site-footer__contact-line a { color: rgba(255,255,255,.72); }
.site-footer__contact-line a:hover { color: #fff; }
.site-footer__bottom {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding: 18px 0; border-top: 1px solid rgba(255,255,255,.12);
  font-size: 13.5px;
}
.site-footer__bottom-links { display: flex; gap: 18px; }
.site-footer__bottom a { color: rgba(255,255,255,.66); }
.site-footer__bottom a:hover { color: #fff; }

/* --------------------------------------------------------------------------
   9. Archive & single shared parts — added 2026-09-19
   Used by PART 5-11: both archives, both single templates, both tag pages,
   search results and 404. These pages were built together and share real
   components, so the components live here. The homepage's own h- cards are
   intentionally left alone — nothing in this section touches them.
   -------------------------------------------------------------------------- */

/* Screen-reader-only text — WordPress prints one inside every search form. */
.screen-reader-text {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Archive toolbar — result count left, a short note right */
.archive-bar {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  margin-bottom: 32px; padding-bottom: 18px;
  border-bottom: 1px solid var(--c-line);
}
.archive-bar__count {
  font-family: var(--f-head); font-size: 14.5px; font-weight: 500;
  letter-spacing: .02em; color: var(--c-heading);
}
.archive-bar__count b { color: var(--c-accent-t); }
.archive-bar__note { font-size: 13.5px; color: var(--c-grey); }

/* Card grids */
.archive-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.archive-grid--wide { grid-template-columns: repeat(4, 1fr); }
.archive-grid--half { grid-template-columns: repeat(2, 1fr); }

/* Product card */
.card-product {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--c-line);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.card-product:hover {
  transform: translateY(-5px); border-color: transparent;
  box-shadow: 0 16px 34px rgba(var(--c-primary-rgb), .14);
}
.card-product__media {
  position: relative; aspect-ratio: 4 / 3;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #EEF3FB 0%, #DCE6F5 100%);
  overflow: hidden;
}
.card-product__media img { width: 100%; height: 100%; object-fit: cover; }
.card-product__media svg { width: 78px; height: 78px; color: var(--c-primary); opacity: .82; transition: transform .4s ease, opacity .3s ease; }
.card-product:hover .card-product__media svg { transform: scale(1.08); opacity: 1; }
.card-product__tag {
  position: absolute; top: 0; left: 0;
  padding: 5px 11px; background: var(--c-accent); color: #fff;
  font-family: var(--f-head); font-size: 11.5px; font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase;
}
.card-product__body { flex: 1; display: flex; flex-direction: column; padding: 20px 22px 22px; }
.card-product__title { font-size: 17px; line-height: 1.45; margin-bottom: 9px; }
.card-product__title a { color: var(--c-heading); }
.card-product__title a:hover { color: var(--c-accent-t); }
.card-product__meta {
  margin-bottom: 11px;
  font-size: 12.5px; letter-spacing: .04em;
  text-transform: uppercase; color: var(--c-grey);
}
.card-product__text { font-size: 14px; line-height: 1.8; color: var(--c-text); margin-bottom: 16px; }
.card-product__link {
  margin-top: auto;
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--f-head); font-size: 13.5px; font-weight: 500;
  letter-spacing: .06em; text-transform: uppercase; color: var(--c-link);
}
.card-product__link:hover { color: var(--c-accent-t); }

/* News card */
.card-news {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--c-line);
  transition: transform .3s ease, box-shadow .3s ease;
}
.card-news:hover { transform: translateY(-5px); box-shadow: 0 16px 34px rgba(var(--c-primary-rgb), .14); }
.card-news__media {
  aspect-ratio: 16 / 9; position: relative;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #EEF3FB 0%, #D8E3F4 100%);
  overflow: hidden;
}
.card-news__media img { width: 100%; height: 100%; object-fit: cover; }
.card-news__date {
  position: absolute; top: 14px; left: 14px;
  padding: 6px 10px; background: var(--c-primary); color: #fff;
  font-family: var(--f-head); font-size: 12px; font-weight: 500;
  line-height: 1.3; text-align: center;
}
.card-news__date b { display: block; font-size: 18px; }
.card-news__body { flex: 1; display: flex; flex-direction: column; padding: 20px 22px 22px; }
.card-news__cat {
  margin-bottom: 8px;
  font-family: var(--f-head); font-size: 12.5px; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; color: var(--c-accent-t);
}
.card-news__title { font-size: 17px; line-height: 1.5; margin-bottom: 10px; }
.card-news__title a { color: var(--c-heading); }
.card-news__title a:hover { color: var(--c-accent-t); }
.card-news__text { font-size: 14px; line-height: 1.8; color: var(--c-text); margin-bottom: 14px; }
.card-news__link {
  margin-top: auto;
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--f-head); font-size: 13px; font-weight: 500;
  letter-spacing: .06em; text-transform: uppercase; color: var(--c-link);
}
.card-news__link:hover { color: var(--c-accent-t); }

/* Entry — body copy for both single templates */
.entry { font-size: 15.5px; line-height: 1.95; color: var(--c-text); }
.entry > * + * { margin-top: 18px; }
.entry > :first-child { margin-top: 0; }
.entry h2 { font-size: 26px; margin-top: 44px; }
.entry h3 { font-size: 21px; margin-top: 34px; }
.entry h4 { font-size: 18px; margin-top: 28px; }
.entry h2, .entry h3, .entry h4 { margin-bottom: 0; }
.entry ul, .entry ol { padding-left: 22px; }
.entry ul { list-style: disc; }
.entry ol { list-style: decimal; }
.entry li + li { margin-top: 8px; }
.entry a { color: var(--c-link); text-decoration: underline; text-underline-offset: 3px; }
.entry a:hover { color: var(--c-accent-t); }
.entry strong { color: var(--c-heading); }
.entry img { max-width: 100%; height: auto; display: block; }
.entry blockquote { padding: 20px 24px; background: var(--c-soft); border-left: 3px solid var(--c-accent); }
.entry code { padding: 2px 6px; background: var(--c-soft); font-size: 13.5px; }
.entry table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.entry th, .entry td { padding: 11px 16px; border: 1px solid var(--c-line); text-align: left; vertical-align: top; }
.entry th { background: var(--c-soft); font-family: var(--f-head); font-weight: 500; color: var(--c-heading); }

/* Pagination — WordPress' own classes, so the_posts_pagination() is enough */
.nav-links {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 8px; margin-top: 52px;
}
.page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 42px; height: 42px; padding: 0 13px;
  border: 1px solid var(--c-line); background: #fff;
  font-family: var(--f-head); font-size: 14px; font-weight: 500;
  color: var(--c-heading);
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
.page-numbers:hover { border-color: var(--c-primary); color: var(--c-primary); }
.page-numbers.current { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }
.page-numbers.dots { border-color: transparent; background: transparent; }

/* Search form — WordPress' own classes */
.search-form { display: flex; gap: 10px; max-width: 560px; }
.search-field {
  flex: 1; min-width: 0; padding: 14px 18px;
  border: 1px solid var(--c-line); background: #fff;
  font-family: var(--f-body); font-size: 15px; color: var(--c-text);
}
.search-field:focus { border-color: var(--c-primary); outline: none; }
.search-submit {
  padding: 14px 30px; border: 1px solid var(--c-accent-h);
  background: var(--c-accent); color: #fff; cursor: pointer;
  font-family: var(--f-head); font-size: 14.5px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .05em;
  transition: background-color .3s ease;
}
.search-submit:hover { background: var(--c-accent-h); }

/* Empty state */
.empty-state { padding: 70px 24px; text-align: center; border: 1px dashed var(--c-line-2); background: #fff; }
.empty-state__icon { width: 54px; height: 54px; margin: 0 auto 18px; color: var(--c-primary); opacity: .35; }
.empty-state__icon svg { width: 100%; height: 100%; }
.empty-state__title { font-size: 22px; margin-bottom: 10px; }
.empty-state__text { max-width: 520px; margin: 0 auto; font-size: 15px; line-height: 1.9; color: var(--c-text); }
.empty-state .btn { margin-top: 26px; }

/* Pill links — the product-line jump row on 404, and anywhere else it fits */
.link-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.link-pills a {
  padding: 11px 20px; border: 1px solid var(--c-line); background: #fff;
  font-family: var(--f-head); font-size: 13.5px; font-weight: 500;
  letter-spacing: .05em; text-transform: uppercase; color: var(--c-heading);
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
.link-pills a:hover { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }
.link-pills--spaced { margin-top: 46px; }

@media (max-width: 1080px) {
  .archive-grid, .archive-grid--wide { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  .archive-grid, .archive-grid--wide, .archive-grid--half { grid-template-columns: 1fr; gap: 20px; }
  .search-form { flex-direction: column; }
  .search-submit { width: 100%; }
  .entry { font-size: 15px; }
  .empty-state { padding: 48px 20px; }
}

/* --------------------------------------------------------------------------
   10. Back to top — one button, every page (printed by footer.php)
   Fixed to the right edge; hidden until the page has been scrolled about a
   screen, then fades in. Square and navy like the rest of the chrome, orange
   on hover like every other control on the site.
   -------------------------------------------------------------------------- */
.site-totop {
  position: fixed; right: 26px; bottom: 32px; z-index: 90;
  display: flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; padding: 0;
  background: var(--c-primary); color: #fff;
  border: 0; border-radius: 0; cursor: pointer;
  opacity: 0; visibility: hidden;
  transform: translate3d(0, 12px, 0);
  transition: opacity .3s ease, transform .3s ease, visibility .3s ease,
              background-color .3s ease;
}
.site-totop.is-visible { opacity: 1; visibility: visible; transform: translate3d(0, 0, 0); }
.site-totop:hover { background: var(--c-accent); }

/* The button floats in the same corner the footer signs off in. Down to
   ~1400px the container runs close enough to the edge that they would meet,
   so hold the bottom row clear of it — a link must never sit under a button. */
@media (max-width: 1400px) {
  .site-footer__bottom { padding-right: 62px; }
}

/* --------------------------------------------------------------------------
   11. Responsive
   -------------------------------------------------------------------------- */

/* Large screens — the content column steps up so a 1200px block does not look
   lost in the middle of a 1920px monitor (which leaves 360px of dead space on
   each side). Breakpoints are picked so the column never fills more than ~83%
   of the viewport: small and mid-size laptops stay at 1200px and never cramp. */
@media (min-width: 1680px) { :root { --container: 1400px; } }
@media (min-width: 2200px) { :root { --container: 1600px; } }

/* The bar now carries seven items (Home / Inserts / PCD / PCBN / About Us /
   Contact Us / News). At the full 15px padding that row starts to meet the logo
   and the action buttons a little above the 1080px breakpoint — in the band
   where the bar has not yet handed over to the drawer. Tighten one step
   earlier than the rest of the layout does; the values are the same as the
   1080px block below, so the two can never disagree. */
@media (max-width: 1200px) {
  .site-nav__list > li > a { padding: 0 10px; font-size: 14px; letter-spacing: .02em; }
}

@media (max-width: 1080px) {
  :root { --section-pad: 56px; --header-h: 78px; --header-h-pin: 62px; }
  .site-footer__grid { grid-template-columns: 1fr 1fr; gap: 36px; }
  .site-nav__list > li > a { padding: 0 10px; font-size: 14px; letter-spacing: .02em; }
}
@media (max-width: 960px) {
  /* ---- Full-width panel, dropped from under the bar ----------------------
     The panel stays in the DOM and is taken out with visibility rather than
     display, so the drop can animate. It is a child of the fixed header, so
     `top: 100%` always parks it directly under the bar and it rides along when
     the bar shrinks.

     Height = everything left on the screen. --header-shift is the distance the
     bar still has to travel before it pins, published by main.js every frame,
     so "shift + bar height" is exactly what sits above the panel and the panel
     meets the bottom edge at every scroll position (not just at 0 and pinned).
     No JS at all? The 0px fallback just leaves the panel a bar-height short. */
  .site-nav {
    display: flex; flex-direction: column;
    position: absolute; top: 100%; left: 0; right: 0;
    margin: 0;
    height: calc(100vh - var(--header-shift, 0px) - var(--header-h));
    height: calc(100dvh - var(--header-shift, 0px) - var(--header-h));
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--c-primary);
    padding: 6px 0 16px;
    box-shadow: 0 18px 34px rgba(0, 0, 0, .3);
    transform: translate3d(0, -14px, 0);
    opacity: 0;
    visibility: hidden;
    transition: transform .26s ease, opacity .22s ease, visibility .26s;
  }
  .site-nav.is-open { transform: none; opacity: 1; visibility: visible; }
  /* Pinned, --header-shift is already 0, but the bar is 28px shorter: without
     this the panel would stop 28px short of the bottom edge. */
  .site-header.is-pinned .site-nav {
    height: calc(100vh - var(--header-h-pin));
    height: calc(100dvh - var(--header-h-pin));
  }

  /* flex-shrink: 0 — the panel is a column flex box with a fixed height, and a
     long menu (every section expanded) must push it into scrolling rather than
     squash the list. */
  .site-nav .site-nav__list { flex-direction: column; align-items: stretch; flex-shrink: 0; height: auto; }
  .site-nav .site-nav__list > li { display: block; }
  /* A section with children becomes label | chevron on row 1, submenu spanning
     both columns on row 2. Sections without children stay plain blocks so
     their label keeps running the full width. */
  .site-nav .site-nav__list > li.menu-item-has-children {
    display: grid; grid-template-columns: minmax(0, 1fr) 52px;
  }
  .site-nav .site-nav__list > li > a {
    height: auto; padding: 14px 20px;
    border-bottom: 1px solid rgba(255,255,255,.12);
  }
  .site-nav .site-nav__list > li.menu-item-has-children > a { grid-column: 1; grid-row: 1; padding-right: 8px; }
  .site-nav .sub-toggle { grid-column: 2; grid-row: 1; display: flex; }
  /* The link's own caret would be a second chevron on the same row */
  .site-nav .site-nav__list > li > a .caret { display: none; }

  /* ---- Submenus: closed until the chevron is tapped ---------------------
     These have to beat the desktop hover / focus-within rules, which are one
     class heavier (…> li:hover > .sub-menu), hence the doubled-up selectors:
     without them a tapped section would inherit the desktop dropdown's
     translate3d(-50%) and slide half a width to the left. */
  .site-nav .site-nav__list > li:hover > .sub-menu,
  .site-nav .site-nav__list > li:focus-within > .sub-menu {
    opacity: 1; visibility: visible; transform: none;
  }
  .site-nav .sub-menu {
    grid-column: 1 / -1; grid-row: 2;
    position: static; opacity: 1; visibility: visible; transform: none;
    box-shadow: none; min-width: 0; background: rgba(255,255,255,.06);
    padding: 0;
    max-height: 0; overflow: hidden;
    transition: max-height .32s ease;
  }
  .site-nav .sub-menu a {
    color: rgba(255,255,255,.82); text-align: left; padding: 11px 32px;
  }
  .site-nav .sub-menu a:hover { background: rgba(255,255,255,.1); color: #fff; }
  /* The drawer is navy whichever variant opened it, so the light bar's navy
     labels and its orange dropdown rule are both undone here. */
  .site-header--light .site-nav .site-nav__list > li > a { color: #fff; }
  .site-header--light .site-nav .sub-menu { border-top: 0; }
  /* Flex column so the three bars are centred in the 38px box. As plain block
     flow the 4px margins between them collapse and the group sits at the top,
     which reads as a button with a fat empty strip under the icon. */
  .nav-toggle {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    margin-left: auto;
  }
  .site-header__actions { margin-left: auto; }
  .site-topbar__inner { gap: 18px; font-size: 12.5px; }
  .site-topbar__item--addr { display: none; }
}
@media (max-width: 640px) {
  /* Phones get a slightly wider gutter than the 15px the desktop column uses:
     15px reads as "touching the edge" once the whole layout is 375px wide.
     It is a token, so the header, every section and the footer all move
     together and their left edges stay aligned. */
  :root { --section-pad: 44px; --gutter: 20px; }
  body { font-size: 15px; }
  h2 { font-size: 26px; }
  /* The desktop 45px banner heading is wider than a phone column once the
     title runs past a word or two ("Send Your Inquiry", "CNGA120404 …"), so
     it drops back to the floor the fluid h1 clamp used to give it. */
  .page-banner__title { font-size: 34px; }
  .section-head { margin-bottom: 32px; }

  /* ---- Footer on a phone -------------------------------------------------
     Stacking all four columns wastes half the screen: the two link lists are
     a dozen short words each, so they ride side by side while the two wide
     blocks — brand paragraph, contact details — take a full row each.
     The sign-off row flips from a sideways row into a stack, left aligned
     like the rest of the footer, and buys its clearance from the to-top
     button with bottom padding instead of the desktop `padding-right: 62px`:
     clearing the button vertically works whatever the text length, whereas
     clearing it sideways ate 62px out of a 375px screen and forced the links
     to wrap twice. */
  .site-footer__main { padding-top: 46px; padding-bottom: 34px; }
  .site-footer__grid { grid-template-columns: 1fr 1fr; gap: 32px 22px; }
  .site-footer__brand,
  .site-footer__contact { grid-column: 1 / -1; }
  .site-footer h4 { margin-bottom: 16px; padding-bottom: 10px; }
  .site-footer__bottom {
    flex-direction: column; align-items: flex-start;
    gap: 12px; padding: 18px 0 70px;
  }
  .site-footer__bottom-links { flex-wrap: wrap; gap: 10px 20px; }

  .site-topbar__inner { text-align: center; }
  .site-totop { right: 16px; bottom: 20px; width: 42px; height: 42px; }
  .lang-switch { display: none; }

  /* ---- The bar keeps the logo and the burger and nothing else ------------
     Neither the logo nor .site-header__actions can shrink (both are
     flex-shrink: 0), so anything else in the row pushes whatever follows it
     further right — and the burger is last, i.e. the first thing to leave the
     viewport. Dropping the CTA here frees ~165px, which is why the burger is
     fully on screen down to 320px. The language switch is already gone above. */
  .site-header__actions .btn { display: none; }

  /* The CTA moved rather than disappeared: full width inside the open panel,
     inset to line up with the links above it. `margin-top: auto` parks it at
     the bottom of the full-height panel — links at the top, enquiry where the
     thumb already is, instead of a button floating in the middle of the navy. */
  .site-nav.is-open .site-nav__cta { display: flex; margin: auto 20px 8px; }
}

/* ==========================================================================
   PART 2 — homepage (h-)   (was static/css/home.css)
   ========================================================================== */

/* --------------------------------------------------------------------------
   h-hero — full-bleed photo with the copy sitting on top, single button.
   The site header floats over this band, so the top padding must clear it.
   -------------------------------------------------------------------------- */
.h-hero {
  position: relative;
  display: flex; align-items: center;
  min-height: 600px;
  padding: calc(var(--header-h) + 64px) 0 88px;
  background: var(--c-primary) url("../img/hero-machining.webp") center/cover no-repeat;
  color: #fff;
  overflow: hidden;
}
.h-hero::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(var(--c-primary-d-rgb),.78) 0%, rgba(var(--c-primary-d-rgb),.52) 45%, rgba(var(--c-primary-d-rgb),.20) 100%);
}
.h-hero__copy {
  /* No max-width here on purpose — the .container class already caps this at
     var(--container) and centres it, so the hero copy lines up exactly with
     the header, the product grid and every other section. */
  position: relative; z-index: 1;
  text-shadow: 1px 1px 2px rgba(0,0,0,.36);
}
.h-hero__title { color: #fff; margin-bottom: 20px; }
.h-hero__lead {
  font-size: 17px; line-height: 1.9; color: rgba(255,255,255,.9);
  max-width: 640px; margin-bottom: 34px;
}

/* --------------------------------------------------------------------------
   h-stats — 4 numbers on a full-width band, placed after the product grid
   -------------------------------------------------------------------------- */
.h-stats { background: var(--c-primary); padding: 80px 0; }
.h-stats__grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.h-stat { padding: 0 20px; text-align: center; color: #fff; }
.h-stat__num {
  font-family: var(--f-head); font-size: 44px; font-weight: 500; line-height: 1;
  margin-bottom: 10px;
}
.h-stat__num small { font-size: 24px; }
.h-stat__label { font-size: 14px; color: rgba(255,255,255,.75); line-height: 1.6; }

/* --------------------------------------------------------------------------
   h-products — 8 cards, 4 across
   -------------------------------------------------------------------------- */
.h-products__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.h-product {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--c-line);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.h-product:hover { transform: translateY(-5px); border-color: transparent; box-shadow: 0 16px 34px rgba(var(--c-primary-rgb),.14); }
.h-product__media {
  position: relative; aspect-ratio: 4 / 3;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #EEF3FB 0%, #DCE6F5 100%);
  overflow: hidden;
}
.h-product__media svg { width: 84px; height: 84px; color: var(--c-primary); opacity: .82; transition: transform .4s ease, opacity .3s ease; }
.h-product:hover .h-product__media svg { transform: scale(1.08); opacity: 1; }
.h-product__tag {
  position: absolute; top: 0; left: 0;
  padding: 5px 11px; background: var(--c-accent); color: #fff;
  font-family: var(--f-head); font-size: 11.5px; font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase;
}
.h-product__body { flex: 1; display: flex; flex-direction: column; padding: 20px 20px 22px; text-align: center; }
.h-product__title { font-size: 18px; margin-bottom: 8px; }
.h-product__title a { color: var(--c-heading); }
.h-product__title a:hover { color: var(--c-accent-t); }
.h-product__text { font-size: 14px; line-height: 1.8; color: var(--c-text); margin-bottom: 16px; }
.h-product__link {
  margin-top: auto;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font-family: var(--f-head); font-size: 13.5px; font-weight: 500;
  letter-spacing: .06em; text-transform: uppercase; color: var(--c-link);
}
.h-product__link:hover { color: var(--c-accent-t); }

/* --------------------------------------------------------------------------
   h-about — photo + copy, with a 2×2 advantage grid
   -------------------------------------------------------------------------- */
.h-about__grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 56px; align-items: center; }
.h-about__media { position: relative; }
.h-about__photo {
  aspect-ratio: 4 / 3;
  background: linear-gradient(135deg, var(--c-primary) 0%, var(--c-primary-l) 55%, #3A7CCB 100%);
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.9);
  font-family: var(--f-head); font-size: 14px; letter-spacing: .18em; text-transform: uppercase;
}
.h-about__badge {
  position: absolute; right: -18px; bottom: -18px;
  width: 132px; height: 132px; padding: 18px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--c-accent); color: #fff; text-align: center;
}
.h-about__badge strong { font-family: var(--f-head); font-size: 38px; font-weight: 500; line-height: 1; }
.h-about__badge span { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; margin-top: 6px; opacity: .9; }
.h-about__title { font-size: 32px; margin-bottom: 16px; }
.h-about__text { font-size: 15.5px; line-height: 1.95; margin-bottom: 18px; }
.h-advantages { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 26px; margin: 24px 0 30px; }
.h-advantage { display: flex; gap: 12px; }
.h-advantage__icon {
  width: 34px; height: 34px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--c-soft); color: var(--c-primary);
}
.h-advantage h4 { font-size: 16px; margin-bottom: 3px; }
.h-advantage p { font-size: 13.5px; line-height: 1.7; margin: 0; }

/* --------------------------------------------------------------------------
   h-cases — 6 application cards, 3 across
   -------------------------------------------------------------------------- */
.h-cases__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.h-case {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--c-line);
  transition: transform .3s ease, box-shadow .3s ease;
}
.h-case:hover { transform: translateY(-5px); box-shadow: 0 16px 34px rgba(var(--c-primary-rgb),.14); }
.h-case__media {
  aspect-ratio: 16 / 10;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--c-primary-d) 0%, var(--c-primary) 100%);
}
.h-case__media svg { width: 66px; height: 66px; color: rgba(255,255,255,.85); }
.h-case__body { flex: 1; display: flex; flex-direction: column; padding: 20px 22px 22px; }
.h-case__cat {
  font-family: var(--f-head); font-size: 12.5px; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; color: var(--c-accent-t);
  margin-bottom: 8px;
}
.h-case__title { font-size: 18px; margin-bottom: 8px; }
.h-case__title a { color: var(--c-heading); }
.h-case__title a:hover { color: var(--c-accent-t); }
.h-case__text { font-size: 14px; line-height: 1.8; color: var(--c-text); margin-bottom: 16px; }
.h-case__specs {
  margin-top: auto; padding-top: 14px; border-top: 1px solid var(--c-line);
  display: flex; flex-wrap: wrap; gap: 6px;
}
.h-case__specs span {
  padding: 4px 9px; background: var(--c-soft);
  font-size: 12px; color: var(--c-primary); letter-spacing: .02em;
}

/* --------------------------------------------------------------------------
   h-qual — certificate strip
   -------------------------------------------------------------------------- */
.h-qual__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; }
.h-qual__item {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: 22px 14px;
  background: #fff; border: 1px solid var(--c-line);
  transition: border-color .3s ease, box-shadow .3s ease;
}
.h-qual__item:hover { border-color: var(--c-link); box-shadow: 0 12px 26px rgba(var(--c-primary-rgb),.1); }
.h-qual__thumb {
  width: 100%; aspect-ratio: 3 / 4;
  display: flex; align-items: center; justify-content: center;
  background: repeating-linear-gradient(135deg, #F7F9FD 0 10px, #EEF3FB 10px 20px);
  border: 1px dashed var(--c-line-2);
  color: var(--c-grey);
}
.h-qual__item span { font-size: 13.5px; color: var(--c-heading); text-align: center; line-height: 1.5; }

/* --------------------------------------------------------------------------
   h-news — 3 latest posts
   -------------------------------------------------------------------------- */
.h-news__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.h-post {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--c-line);
  transition: transform .3s ease, box-shadow .3s ease;
}
.h-post:hover { transform: translateY(-5px); box-shadow: 0 16px 34px rgba(var(--c-primary-rgb),.14); }
.h-post__media {
  aspect-ratio: 16 / 9; position: relative;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #EEF3FB 0%, #D8E3F4 100%);
}
.h-post__media svg { width: 54px; height: 54px; color: var(--c-primary); opacity: .7; }
.h-post__date {
  position: absolute; top: 14px; left: 14px;
  padding: 6px 10px; background: var(--c-primary); color: #fff;
  font-family: var(--f-head); font-size: 12px; font-weight: 500; line-height: 1.3; text-align: center;
}
.h-post__date b { display: block; font-size: 18px; }
.h-post__body { flex: 1; display: flex; flex-direction: column; padding: 20px 22px 22px; }
.h-post__cat {
  font-family: var(--f-head); font-size: 12.5px; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; color: var(--c-accent-t); margin-bottom: 8px;
}
.h-post__title { font-size: 17px; line-height: 1.5; margin-bottom: 12px; }
.h-post__title a { color: var(--c-heading); }
.h-post__title a:hover { color: var(--c-accent-t); }
.h-post__link {
  margin-top: auto;
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--f-head); font-size: 13px; font-weight: 500;
  letter-spacing: .06em; text-transform: uppercase; color: var(--c-link);
}

/* --------------------------------------------------------------------------
   h-inquiry — contact details + full enquiry form
   -------------------------------------------------------------------------- */
.h-inquiry { background: var(--c-soft); }
.h-inquiry__grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 56px; }
.h-inquiry__title { font-size: 32px; margin-bottom: 14px; }
.h-inquiry__text { font-size: 15.5px; line-height: 1.95; margin-bottom: 26px; }
.h-contact-line { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 20px; }
.h-contact-line__icon {
  width: 42px; height: 42px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--c-primary); color: #fff;
}
.h-contact-line strong {
  display: block; font-family: var(--f-head); font-size: 14px; font-weight: 500;
  letter-spacing: .06em; text-transform: uppercase; color: var(--c-heading); margin-bottom: 3px;
}
.h-contact-line span, .h-contact-line a { font-size: 14.5px; line-height: 1.7; color: var(--c-text); }
.h-contact-line a:hover { color: var(--c-accent-t); }

.h-form { background: #fff; padding: 36px 36px 38px; border: 1px solid var(--c-line); }
.h-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.h-form__field { margin-bottom: 16px; }
.h-form label {
  display: block; margin-bottom: 7px;
  font-family: var(--f-head); font-size: 13.5px; font-weight: 500;
  letter-spacing: .04em; color: var(--c-heading);
}
.h-form label .req { color: var(--c-accent-t); }
.h-form input, .h-form select, .h-form textarea {
  width: 100%; padding: 13px 14px;
  font: inherit; font-size: 14.5px; line-height: 1.5; color: var(--c-heading);
  background: var(--c-soft);
  border: 1px solid var(--c-line); border-radius: 0;
  transition: border-color .2s ease, background-color .2s ease;
}
.h-form input:focus, .h-form select:focus, .h-form textarea:focus {
  outline: none; background: #fff; border-color: var(--c-link);
}
.h-form textarea { resize: vertical; min-height: 118px; }
.h-form__note { margin: 14px 0 0; font-size: 12.5px; color: var(--c-grey); }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  .h-products__grid { grid-template-columns: repeat(3, 1fr); }
  .h-about__grid, .h-inquiry__grid { grid-template-columns: 1fr; gap: 44px; }
  .h-cases__grid, .h-news__grid { grid-template-columns: repeat(2, 1fr); }
  .h-qual__grid { grid-template-columns: repeat(3, 1fr); }
  .h-about__badge { right: 12px; bottom: -18px; }
}
@media (max-width: 760px) {
  .h-hero { min-height: 0; padding: calc(var(--header-h) + 40px) 0 60px; }
  .h-stats { padding: 56px 0; }
  .h-stats__grid { grid-template-columns: 1fr 1fr; }
  .h-stat { border-bottom: 1px solid rgba(255,255,255,.14); }
  .h-stat:nth-child(2) { border-right: 0; }
  .h-stat:nth-child(3), .h-stat:nth-child(4) { border-bottom: 0; }
  .h-products__grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .h-cases__grid, .h-news__grid { grid-template-columns: 1fr; }
  .h-qual__grid { grid-template-columns: repeat(2, 1fr); }
  .h-advantages { grid-template-columns: 1fr; }
  .h-form { padding: 26px 22px 28px; }
  .h-form__row { grid-template-columns: 1fr; gap: 0; }
  .h-about__badge { width: 108px; height: 108px; }
  .h-about__badge strong { font-size: 30px; }
}
@media (max-width: 460px) {
  .h-products__grid { grid-template-columns: 1fr; }
  .h-stats__grid { grid-template-columns: 1fr; }
  .h-stat { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.14); }
  .h-stat:nth-child(3), .h-stat:nth-child(4) { border-bottom: 1px solid rgba(255,255,255,.14); }
  .h-stat:last-child { border-bottom: 0; }
  .h-qual__grid { grid-template-columns: 1fr 1fr; }
}

/* ==========================================================================
   PART 3 — about us (a-)   (was static/css/about.css)
   ========================================================================== */

/* Small uppercase label, used by two blocks on this page only. */
.a-eyebrow {
  display: inline-block; margin-bottom: 12px;
  font-family: var(--f-head); font-size: 13px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--c-accent-t);
}

/* --------------------------------------------------------------------------
   a-intro — photo + copy, two columns
   -------------------------------------------------------------------------- */
.a-intro__grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 56px; align-items: center; }
.a-intro__media { position: relative; }
.a-intro__photo {
  aspect-ratio: 4 / 3;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--c-primary) 0%, var(--c-primary-l) 55%, #3A7CCB 100%);
  color: rgba(255,255,255,.9);
  font-family: var(--f-head); font-size: 14px;
  letter-spacing: .18em; text-transform: uppercase;
}
.a-intro__badge {
  position: absolute; right: -18px; bottom: -18px;
  width: 132px; height: 132px; padding: 18px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--c-accent); color: #fff; text-align: center;
}
.a-intro__badge strong { font-family: var(--f-head); font-size: 38px; font-weight: 500; line-height: 1; }
.a-intro__badge span { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; margin-top: 6px; opacity: .9; }
.a-intro__title { font-size: 32px; margin-bottom: 16px; }
.a-intro__text { font-size: 15.5px; line-height: 1.95; margin-bottom: 18px; }
.a-intro__copy .btn { margin-top: 8px; }

/* --------------------------------------------------------------------------
   a-lines — the five product lines
   -------------------------------------------------------------------------- */
/* Five across, so every measurement here is one notch tighter than it was at
   three: icon 42 -> 38, title 19 -> 17, padding 26/24 -> 22/20, gap 24 -> 18.
   The body copy was cut back to a single line per line of tooling at the same
   time — the paragraphs it used to carry were the product-page blurbs. */
.a-lines__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; }
.a-line {
  display: flex; flex-direction: column;
  padding: 22px 20px 20px;
  background: #fff; border: 1px solid var(--c-line);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.a-line:hover { transform: translateY(-5px); border-color: transparent; box-shadow: 0 16px 34px rgba(var(--c-primary-rgb),.14); }
.a-line__head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.a-line__icon {
  width: 38px; height: 38px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--c-soft); color: var(--c-primary);
}
.a-line__title { margin: 0; font-size: 17px; line-height: 1.36; }
/* The material initials double as the route to that material's overview page,
   so they inherit the label's own colour and only mark themselves on hover —
   an orange line that turns into a stack of blue links would read as the card
   having two different kinds of text in it. */
.a-line__mats {
  margin: 0 0 8px;
  font-family: var(--f-head); font-size: 12px; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase; color: var(--c-accent-t);
}
.a-line__mats a { color: inherit; border-bottom: 1px solid transparent; }
.a-line__mats a:hover { color: var(--c-link); border-bottom-color: currentColor; }
.a-line__text { font-size: 14px; line-height: 1.8; color: var(--c-text); margin-bottom: 14px; }
.a-line__tags {
  margin-top: auto; padding-top: 12px; border-top: 1px solid var(--c-line);
  display: flex; flex-wrap: wrap; gap: 6px;
}
.a-line__tags span { padding: 3px 8px; background: var(--c-soft); font-size: 11.5px; color: var(--c-primary); }

/* --------------------------------------------------------------------------
   a-visit — contact details on top, edge-to-edge location map underneath.
   The contact block is left aligned: eyebrow, heading, intro, the 2 x 2 item
   grid and the enquiry button all sit on the container's left edge.
   The map div is placed OUTSIDE .container in the markup, which is what makes
   it span the full viewport: no 100vw trick, so no horizontal scrollbar when
   a classic (non-overlay) scrollbar is present.
   -------------------------------------------------------------------------- */
/* Two overrides on the shared .section:
   · padding-bottom: 0 — the map is the last thing on the page and runs into
     the dark footer, so the shared 72px bottom padding would leave a white
     band above it.
   · scroll-margin-top — the header's Contact Us item links here as
     /about-us.html#contact; without this the sticky header (68px) would cover
     the heading right after the jump.
   `.a-visit` sits after `.section` in the cascade, so the overrides win at
   equal specificity. */
.a-visit { padding-bottom: 0; scroll-margin-top: calc(var(--header-h-pin) + 24px); }
.a-visit__title { font-size: 32px; margin-bottom: 16px; }
/* max-width only: the intro stays on the left edge, the cap just keeps the
   line length readable on a wide screen. */
.a-visit__text { font-size: 15.5px; line-height: 1.95; margin-bottom: 34px; max-width: 660px; }
.a-visit__list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px 34px; margin-bottom: 36px; }
.a-visit__item { display: flex; gap: 14px; }
.a-visit__icon {
  width: 38px; height: 38px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--c-soft); color: var(--c-primary);
}
.a-visit__item strong {
  display: block; margin-bottom: 4px;
  font-family: var(--f-head); font-size: 12.5px; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase; color: var(--c-heading);
}
.a-visit__item span { font-size: 14.5px; line-height: 1.7; color: var(--c-text); }
.a-visit__item a { color: var(--c-text); }
.a-visit__item a:hover { color: var(--c-link); }
/* The enquiry button needs no rule of its own: `.btn` is inline-flex, which
   already sits on the left edge of the block like every other item here. */
/* Full-bleed map. A single hairline on top only: left/right borders would sit
   against the viewport edge, and a bottom one would just double the footer's
   own edge — the section has no bottom padding, so the map meets the footer. */
.a-visit__map {
  margin-top: 46px; background: var(--c-soft);
  border-top: 1px solid var(--c-line);
}
.a-visit__map iframe { display: block; width: 100%; height: 480px; border: 0; }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
/* Same boundary as the material hub's operation cards: the column is only its
   full 1170px from a 1200px viewport up, which is where five cards fit. */
@media (max-width: 1200px) {
  .a-lines__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1080px) {
  .a-intro__grid { grid-template-columns: 1fr; gap: 44px; }
  .a-visit__map { margin-top: 40px; }
  .a-intro__badge { right: 12px; bottom: -18px; }
}
@media (max-width: 760px) {
  .a-lines__grid { grid-template-columns: 1fr; gap: 16px; }
  .a-visit__title { font-size: 26px; }
  .a-visit__list { grid-template-columns: 1fr; gap: 20px; }
  .a-visit__map iframe { height: 380px; }
  .a-intro__badge { width: 108px; height: 108px; }
  .a-intro__badge strong { font-size: 30px; }
}
@media (max-width: 460px) {
  .a-lines__grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   PART 4 — inquiry (i-)   (was static/css/inquiry.css)
   ========================================================================== */

/* --------------------------------------------------------------------------
   i-inquiry — aside on the left, form on the right
   -------------------------------------------------------------------------- */
.i-inquiry { background: var(--c-soft); }
.i-inquiry__grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 56px; align-items: start; }

.i-aside__eyebrow {
  display: inline-block; margin-bottom: 12px;
  font-family: var(--f-head); font-size: 13px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--c-accent-t);
}
.i-aside__title { font-size: 32px; margin-bottom: 14px; }
.i-aside__text { font-size: 15.5px; line-height: 1.95; margin-bottom: 28px; }

/* What happens next — three numbered steps */
.i-steps { display: grid; gap: 16px; margin-bottom: 34px; }
.i-step { display: flex; gap: 14px; }
.i-step__num {
  width: 32px; height: 32px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--c-primary); color: #fff;
  font-family: var(--f-head); font-size: 14px; font-weight: 500;
}
.i-step__title {
  display: block; margin-bottom: 3px;
  font-family: var(--f-head); font-size: 15.5px; font-weight: 500; color: var(--c-heading);
}
.i-step__text { margin: 0; font-size: 14px; line-height: 1.75; }

/* Direct contact lines */
.i-lines { display: grid; gap: 18px; padding-top: 26px; border-top: 1px solid var(--c-line); }
.i-line { display: flex; gap: 14px; align-items: flex-start; }
.i-line__icon {
  width: 40px; height: 40px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: #fff; border: 1px solid var(--c-line); color: var(--c-primary);
}
.i-line__label {
  display: block; margin-bottom: 3px;
  font-family: var(--f-head); font-size: 13.5px; font-weight: 500;
  letter-spacing: .06em; text-transform: uppercase; color: var(--c-heading);
}
.i-line__value { font-size: 14.5px; line-height: 1.7; color: var(--c-text); }
a.i-line__value:hover { color: var(--c-accent-t); }

/* --------------------------------------------------------------------------
   i-form — the enquiry form itself
   -------------------------------------------------------------------------- */
.i-form {
  padding: 36px 36px 38px;
  background: #fff; border: 1px solid var(--c-line);
  box-shadow: 0 14px 40px rgba(var(--c-primary-rgb), .07);
}
.i-form__title {
  font-size: 24px; margin-bottom: 22px; padding-bottom: 16px;
  border-bottom: 1px solid var(--c-line);
}
.i-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.i-form__field { margin-bottom: 16px; }
.i-form label {
  display: block; margin-bottom: 7px;
  font-family: var(--f-head); font-size: 13.5px; font-weight: 500;
  letter-spacing: .04em; color: var(--c-heading);
}
.i-form label .req { color: var(--c-accent-t); }
.i-form input, .i-form select, .i-form textarea {
  width: 100%; padding: 13px 14px;
  font: inherit; font-size: 14.5px; line-height: 1.5; color: var(--c-heading);
  background: var(--c-soft);
  border: 1px solid var(--c-line); border-radius: 0;
  transition: border-color .2s ease, background-color .2s ease;
}
.i-form input:focus, .i-form select:focus, .i-form textarea:focus {
  outline: none; background: #fff; border-color: var(--c-link);
}
.i-form textarea { resize: vertical; min-height: 130px; }
.i-form__note { margin: 14px 0 0; font-size: 12.5px; color: var(--c-grey); }

/* --------------------------------------------------------------------------
   i-help — what to put in the enquiry
   -------------------------------------------------------------------------- */
.i-help__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.i-help__item {
  padding: 28px 24px;
  background: #fff; border: 1px solid var(--c-line);
  text-align: center;
}
.i-help__icon {
  display: inline-flex; width: 52px; height: 52px;
  align-items: center; justify-content: center;
  background: var(--c-soft); color: var(--c-primary);
  margin-bottom: 14px;
}
.i-help__title { font-size: 17px; margin-bottom: 8px; }
.i-help__text { font-size: 14px; line-height: 1.8; color: var(--c-text); margin: 0; }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  .i-inquiry__grid { grid-template-columns: 1fr; gap: 44px; }
  .i-help__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  .i-form { padding: 26px 22px 28px; }
  .i-form__row { grid-template-columns: 1fr; gap: 0; }
  .i-help__grid { grid-template-columns: 1fr; gap: 16px; }
  .i-aside__title { font-size: 26px; }
}

/* ==========================================================================
   PART 5 — product archive   (pc-)   ·   product-category.php
   The five product-line category archives. Layout comes from the shared
   archive parts in PART 1; only what is specific to a product archive is here.
   ========================================================================== */

/* Category blurb (the term description), under the banner */
.pc-desc {
  max-width: 860px; margin: 0 auto 42px; text-align: center;
  font-size: 15.5px; line-height: 1.95; color: var(--c-text);
}

/* Closing call to action — a part number the visitor did not find */
.pc-cta {
  margin-top: 72px; padding: 44px 40px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 26px;
  background: var(--c-soft); border: 1px solid var(--c-line);
}
.pc-cta__title { font-size: 24px; margin-bottom: 8px; }
.pc-cta__text { max-width: 640px; font-size: 15px; line-height: 1.85; color: var(--c-text); }

@media (max-width: 760px) {
  .pc-cta { padding: 32px 24px; }
  .pc-cta .btn { width: 100%; }
}

/* ==========================================================================
   PART 6 — product single   (ps-)   ·   product-single.php
   ========================================================================== */

.ps-layout {
  display: grid; grid-template-columns: minmax(0, 1fr) 380px;
  gap: 56px; align-items: start;
}
.ps-main { min-width: 0; }
/* Gallery: capped box (was a full-column 4/3 = ~550px tall) + thumbnail strip.
   Image source chain lives in ctcc_product_gallery_images(). */
.ps-gallery { margin-bottom: 30px; display: grid; gap: 12px; }
.ps-gallery__main {
  aspect-ratio: 4 / 3; max-height: 430px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #EEF3FB 0%, #DCE6F5 100%);
  border: 1px solid var(--c-line); overflow: hidden;
}
.ps-gallery__main img { max-width: 100%; max-height: 100%; object-fit: contain; }
.ps-gallery__main svg { width: 120px; height: 120px; color: var(--c-primary); opacity: .7; }
.ps-gallery__thumbs { display: flex; flex-wrap: wrap; gap: 10px; }
.ps-gallery__thumb {
  width: 88px; height: 88px; display: block;
  border: 1px solid var(--c-line); background: #fff; overflow: hidden;
}
.ps-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ps-gallery__thumb:hover { border-color: var(--c-primary); }

/* Product spec table from ACF 组#55 (ctcc_product_spec_rows()). */
.ps-info { margin: 0 0 34px; border: 1px solid var(--c-line); background: #fff; }
.ps-info__title {
  padding: 15px 24px; background: var(--c-primary); color: #fff;
  font-family: var(--f-head); font-size: 15px; font-weight: 500;
  letter-spacing: .06em; text-transform: uppercase;
}
.ps-info table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.ps-info th, .ps-info td { padding: 11px 20px; border-top: 1px solid var(--c-line); text-align: left; vertical-align: top; }
.ps-info th { width: 230px; background: var(--c-soft); font-family: var(--f-head); font-weight: 500; color: var(--c-heading); }
.ps-info td { color: var(--c-text); }

.ps-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.ps-badge {
  display: inline-block;
  padding: 5px 12px; background: var(--c-soft); border: 1px solid var(--c-line);
  font-family: var(--f-head); font-size: 12.5px; font-weight: 500;
  letter-spacing: .06em; text-transform: uppercase; color: var(--c-heading);
}
.ps-badge--accent { background: var(--c-accent); border-color: var(--c-accent); color: #fff; }

.ps-aside { position: sticky; top: calc(var(--header-h-pin) + 24px); }
.ps-card { padding: 26px 24px; border: 1px solid var(--c-line); background: #fff; }
.ps-card__title { font-size: 20px; margin-bottom: 10px; }
.ps-card__text { margin-bottom: 20px; font-size: 14.5px; line-height: 1.85; color: var(--c-text); }
.ps-card .btn { width: 100%; }
.ps-card .btn + .btn { margin-top: 10px; }

.ps-specs { margin-top: 22px; border: 1px solid var(--c-line); background: #fff; }
.ps-specs__title {
  padding: 15px 24px; background: var(--c-primary); color: #fff;
  font-family: var(--f-head); font-size: 15px; font-weight: 500;
  letter-spacing: .06em; text-transform: uppercase;
}
.ps-specs table { width: 100%; border-collapse: collapse; font-size: 14px; }
.ps-specs th, .ps-specs td { padding: 11px 24px; border-top: 1px solid var(--c-line); text-align: left; vertical-align: top; }
.ps-specs th { width: 44%; background: var(--c-soft); font-family: var(--f-head); font-weight: 500; color: var(--c-heading); }
.ps-specs td { color: var(--c-text); }

.ps-related { margin-top: 76px; padding-top: 56px; border-top: 1px solid var(--c-line); }

@media (max-width: 1080px) {
  .ps-layout { grid-template-columns: 1fr; gap: 40px; }
  .ps-aside { position: static; }
  .ps-specs { margin-top: 0; }
  .ps-info th { width: 42%; }
}

/* ==========================================================================
   PART 7 — news archive   (nc-)   ·   news-category.php
   ========================================================================== */

.nc-desc {
  max-width: 860px; margin: 0 auto 42px; text-align: center;
  font-size: 15.5px; line-height: 1.95; color: var(--c-text);
}

/* ==========================================================================
   PART 8 — news single   (ns-)   ·   news-single.php

   The article header is its own tinted block rather than the shared navy page
   banner: titles vary too much in length for a display-size H1, and a tinted
   slab is also the cheapest way to separate the head from the white copy
   underneath it. The body is a two-column layout — copy on the left, a sticky
   rail on the right.

   NOTE — every rule that touches `.entry` below is scoped to `.ns-main` on
   purpose. The product template shares the same `.entry` base from PART 1 and
   is not part of this pass, so nothing here may leak into it.
   ========================================================================== */

/* --- Article head ------------------------------------------------------- */

.ns-head {
  padding: calc(var(--header-h) + 52px) 0 44px;
  background: var(--c-soft);
  border-bottom: 1px solid var(--c-line);
}
/* `.breadcrumb` ships white because the navy page banner uses it — repaint it
   here, scoped, rather than shipping a second global variant. */
.ns-head__crumb { margin-bottom: 18px; color: var(--c-grey); }
.ns-head__crumb a { color: var(--c-link); }
.ns-head__crumb a:hover { color: var(--c-accent-t); }
.ns-head__crumb .breadcrumb__sep { opacity: 1; color: var(--c-line-2); }

.ns-title { max-width: 900px; font-size: clamp(27px, 3.2vw, 40px); line-height: 1.26; margin: 0; }

.ns-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px;
  max-width: 900px; margin-top: 18px;
  font-size: 13.5px; color: var(--c-grey);
}
.ns-meta__item { display: inline-flex; align-items: center; gap: 7px; }
.ns-meta__item svg { flex-shrink: 0; opacity: .55; }
.ns-chip {
  padding: 5px 13px; background: var(--c-primary);
  font-family: var(--f-head); font-size: 12px; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase;
  transition: background-color .25s ease;
}
.ns-meta a.ns-chip { color: #fff; }
.ns-meta a.ns-chip:hover { background: var(--c-accent); color: #fff; }

.ns-lede { max-width: 820px; margin: 20px 0 0; font-size: 16.5px; line-height: 1.85; color: var(--c-text); }

.ns-tags {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  max-width: 900px; margin-top: 22px; padding-top: 18px;
  border-top: 1px solid var(--c-line);
}
.ns-tags__label {
  margin-right: 4px;
  font-family: var(--f-head); font-size: 12px; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase; color: var(--c-grey);
}
.ns-tags a {
  padding: 5px 12px; border: 1px solid var(--c-line-2); background: #fff;
  font-size: 13px; color: var(--c-heading);
  transition: border-color .25s ease, color .25s ease;
}
.ns-tags a:hover { border-color: var(--c-primary); color: var(--c-primary); }

/* --- Body + sticky rail ------------------------------------------------- */

/* Capped at 1100px so the copy column lands at a comfortable measure (~745px,
   roughly 70 characters) instead of stretching with --container on a wide
   monitor. The rail is what absorbs the width the old 900px column left empty. */
.ns-layout {
  display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 56px;
  max-width: 1100px; margin: 0 auto; align-items: start;
}
.ns-main { min-width: 0; }
.ns-aside { position: sticky; top: calc(var(--header-h-pin) + 24px); display: grid; gap: 20px; }

.ns-hero { margin: 0 0 34px; }
.ns-hero img { width: 100%; height: auto; display: block; }

.ns-toc { padding: 22px 20px 20px; background: var(--c-soft); border: 1px solid var(--c-line); }
.ns-toc[hidden] { display: none; }
.ns-toc__title {
  margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--c-line);
  font-family: var(--f-head); font-size: 13px; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase; color: var(--c-heading);
}
.ns-toc__list { display: grid; gap: 3px; }
.ns-toc__list a {
  display: block; padding: 7px 10px; border-left: 2px solid var(--c-line);
  font-size: 13.5px; line-height: 1.55; color: var(--c-text);
  transition: border-color .2s ease, color .2s ease;
}
.ns-toc__list a:hover { border-left-color: var(--c-accent); color: var(--c-heading); }
.ns-toc__list a.is-active { border-left-color: var(--c-primary); color: var(--c-heading); font-weight: 500; }
.ns-toc__list a.ns-toc__h3 { padding-left: 22px; font-size: 13px; }

.ns-card { padding: 24px 22px; background: var(--c-primary); }
.ns-card__title { color: #fff; font-size: 19px; margin-bottom: 10px; }
.ns-card__text { margin-bottom: 18px; font-size: 14px; line-height: 1.85; color: rgba(255,255,255,.78); }
.ns-card .btn { width: 100%; }
.ns-card .btn + .btn { margin-top: 10px; }

/* --- Article body typography (scoped — product single is untouched) ------ */

.ns-main .entry > figure,
.ns-main .entry > blockquote,
.ns-main .entry > pre,
.ns-main .entry > hr,
.ns-main .entry > .wp-block-table { margin-top: 32px; }
.ns-main .entry > figure + *,
.ns-main .entry > blockquote + *,
.ns-main .entry > pre + * { margin-top: 32px; }

/* The orange tick is the only decoration the body gets — enough to break a
   long read into scannable sections without a second type size. */
.ns-main .entry h2 { position: relative; padding-left: 16px; margin-top: 46px; }
.ns-main .entry h2::before {
  content: ""; position: absolute; left: 0; top: .16em; bottom: .16em;
  width: 3px; background: var(--c-accent);
}
.ns-main .entry h3 { margin-top: 36px; }

/* The bar is fixed, so anything an in-page link lands on needs the clearance. */
.ns-main .entry h2,
.ns-main .entry h3,
.ns-main .entry h4 { scroll-margin-top: calc(var(--header-h-pin) + 24px); }

.ns-main .entry figure { margin: 0; }
.ns-main .entry figcaption { margin-top: 11px; font-size: 13.5px; line-height: 1.7; color: var(--c-grey); }
.ns-main .entry blockquote { font-size: 16px; }
.ns-main .entry pre {
  padding: 20px 22px; background: var(--c-dark); color: #E6EDF7;
  overflow-x: auto; font-size: 13.5px; line-height: 1.7;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.ns-main .entry pre code { padding: 0; background: none; color: inherit; font-size: inherit; }
.ns-main .entry hr { height: 0; border: 0; border-top: 1px solid var(--c-line); }
.ns-main .entry iframe { max-width: 100%; }
/* The block editor wraps tables in .wp-block-table, so that is the element that
   gets the scrollbar — a wide spec table then never bursts the page. */
.ns-main .entry .wp-block-table { overflow-x: auto; }
.ns-main .entry .wp-block-table table { min-width: 460px; }

/* --- Previous / next --------------------------------------------------- */

.ns-nav {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px;
  max-width: 1100px; margin: 64px auto 0; padding-top: 40px;
  border-top: 1px solid var(--c-line);
}
.ns-nav__item {
  display: block; padding: 20px 22px; background: #fff;
  border: 1px solid var(--c-line);
  transition: border-color .25s ease, box-shadow .25s ease;
}
.ns-nav__item:hover { border-color: var(--c-primary); box-shadow: 0 10px 24px rgba(var(--c-primary-rgb), .1); }
/* Only one neighbour exists (first / last post) — let it own the whole row
   instead of leaving a hole beside it. */
.ns-nav__item:only-child { grid-column: 1 / -1; }
.ns-nav__label {
  margin-bottom: 7px;
  font-family: var(--f-head); font-size: 12px; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase; color: var(--c-grey);
}
.ns-nav__title {
  font-size: 16px; line-height: 1.5; color: var(--c-heading);
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
}
.ns-nav__item--prev { text-align: left; }
.ns-nav__item--next { text-align: right; }

.ns-related { max-width: 1100px; margin: 76px auto 0; padding-top: 56px; border-top: 1px solid var(--c-line); }

@media (max-width: 1080px) {
  .ns-layout { gap: 40px; }
}
@media (max-width: 960px) {
  .ns-layout { grid-template-columns: 1fr; gap: 44px; }
  .ns-aside { position: static; }
  /* A jump list in front of the article is worth less than the scroll it costs
     once the rail has folded under the copy. */
  .ns-toc { display: none; }
}
@media (max-width: 760px) {
  .ns-head { padding: calc(var(--header-h) + 34px) 0 32px; }
  .ns-nav { grid-template-columns: 1fr; }
  .ns-nav__item--next { text-align: left; }
}

/* ==========================================================================
   PART 9 — tag pages   (pt- / nt-)   ·   product-tag.php, news-tag.php
   product-tag.php stacks two blocks: the products carrying this term on top,
   the articles below. news-tag.php is the plain article-only listing.
   ========================================================================== */

.pt-intro {
  max-width: 860px; margin: 0 auto 48px; text-align: center;
  font-size: 15.5px; line-height: 1.95; color: var(--c-text);
}
.pt-block + .pt-block { margin-top: 76px; padding-top: 60px; border-top: 1px solid var(--c-line); }
.pt-block__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 30px;
}
.pt-block__title { font-size: 26px; }
.pt-block__count { font-size: 14px; color: var(--c-grey); }

.nt-intro {
  max-width: 860px; margin: 0 auto 42px; text-align: center;
  font-size: 15.5px; line-height: 1.95; color: var(--c-text);
}

/* ==========================================================================
   PART 10 — search results   (search-)   ·   search.php
   Results are a plain list, not cards — one row per hit, each row opening
   with the section the hit belongs to.
   ========================================================================== */

.search-panel { padding-top: 40px; }
.search-panel .search-form { max-width: 640px; margin: 0 auto; }

.search-head {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: 16px; margin: 44px 0 0; padding-bottom: 18px;
  border-bottom: 1px solid var(--c-line);
}
.search-head__count {
  font-family: var(--f-head); font-size: 15px; font-weight: 500;
  color: var(--c-heading);
}
.search-head__count b { color: var(--c-accent-t); }
.search-head__note { font-size: 13.5px; color: var(--c-grey); }

.search-item { display: block; padding: 28px 0; border-bottom: 1px solid var(--c-line); }
.search-item__cat {
  display: inline-block; margin-bottom: 12px; padding: 3px 11px;
  background: var(--c-soft); border: 1px solid var(--c-line);
  font-family: var(--f-head); font-size: 11.5px; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase; color: var(--c-link);
}
.search-item__title { font-size: 19px; line-height: 1.5; margin-bottom: 9px; }
.search-item__title a { color: var(--c-heading); }
.search-item__title a:hover { color: var(--c-accent-t); }
.search-item__excerpt { font-size: 14.5px; line-height: 1.85; color: var(--c-text); }
.search-item__meta { margin-top: 9px; font-size: 13px; color: var(--c-grey); }

@media (max-width: 760px) {
  .search-item { padding: 24px 0; }
}

/* ==========================================================================
   PART 11 — 404   (e404-)   ·   404.php
   ========================================================================== */

/* 404 is the one page with no .page-banner, so it clears the fixed header
   itself: --header-h + the padding this block always had. */
.e404 { padding: calc(var(--header-h) + 90px) 0 110px; text-align: center; }
.e404__code {
  font-family: var(--f-head); font-weight: 500; line-height: .9;
  font-size: clamp(96px, 16vw, 168px);
  color: var(--c-primary); opacity: .12;
}
.e404__title { font-size: 32px; margin: -24px 0 14px; }
.e404__text { max-width: 560px; margin: 0 auto 32px; font-size: 15.5px; line-height: 1.95; color: var(--c-text); }
.e404__search { max-width: 520px; margin: 0 auto 46px; }

@media (max-width: 760px) {
  .e404 { padding: calc(var(--header-h) + 64px) 0 80px; }
  .e404__title { margin-top: -14px; }
}

/* ==========================================================================
   PART 12 — taxonomy archive   (ptx-)   ·   product-tax.php
   The material trees (currently pcd / pcbn; carbide / mcd are defined but
   not registered) and inserts. Layout comes from the shared archive parts in
   PART 1; only what is specific to a taxonomy archive is here.
   ========================================================================== */

/* Term description, under the banner */
.ptx-desc {
  max-width: 860px; margin: 0 auto 42px; text-align: center;
  font-size: 15.5px; line-height: 1.95; color: var(--c-text);
}

/* Child terms — the next level down. On an inserts family page this is the
   list of designations filed under it, so it doubles as the family's contents. */
.ptx-chips { margin-bottom: 44px; }
.ptx-chips__label {
  margin-bottom: 14px;
  font-family: var(--f-head); font-size: 13px; font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase; color: var(--c-grey);
}
.ptx-chips__list { display: flex; flex-wrap: wrap; gap: 10px; }
.ptx-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px;
  border: 1px solid var(--c-line); background: #fff;
  font-size: 14px; color: var(--c-primary);
  transition: border-color .2s, background .2s;
}
.ptx-chip b { font-weight: 500; font-size: 12px; color: var(--c-grey); }
.ptx-chip:hover { border-color: var(--c-primary); background: var(--c-soft); }

/* Closing call to action — a part number the visitor did not find */
.ptx-cta {
  margin-top: 72px; padding: 44px 40px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 26px;
  background: var(--c-soft); border: 1px solid var(--c-line);
}
.ptx-cta__title { font-size: 24px; margin-bottom: 8px; }
.ptx-cta__text { max-width: 640px; font-size: 15px; line-height: 1.85; color: var(--c-text); }

@media (max-width: 760px) {
  .ptx-cta { padding: 32px 24px; }
  .ptx-cta .btn { width: 100%; }
}

/* The same operation in the other materials — two cards, one per URL field
   filled on the term. Absent entirely when neither field holds a value, so
   nothing here needs a "hidden" state. Two columns rather than a full-width
   row: the label sits above them like .ptx-chips__label, and the pair reads
   as a sidebar note, not as a second product grid. */
.ptx-xref { margin-top: 64px; }
.ptx-xref__label {
  margin-bottom: 16px;
  font-family: var(--f-head); font-size: 13px; font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase; color: var(--c-grey);
}
.ptx-xref__list {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px; max-width: 720px;
}
.ptx-xref__card {
  display: flex; align-items: center; gap: 14px;
  padding: 20px 22px;
  background: #fff; border: 1px solid var(--c-line);
  transition: border-color .25s ease, background .25s ease;
}
/* Material + operation form one label — "PCD Turning", the same shape the
   navigation dropdowns use — with only the material in the accent colour.
   `gap` on the flex row is what separates the two words: the markup's own
   whitespace must not be counted on (a flex container drops it), so the
   spacing survives any reformatting of the template. */
.ptx-xref__body {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 5px;
  min-width: 0;
}
.ptx-xref__mat {
  font-family: var(--f-head); font-size: 17px; font-weight: 500;
  text-transform: uppercase; color: var(--c-accent-t);
}
.ptx-xref__op {
  font-family: var(--f-head); font-size: 17px; font-weight: 500;
  line-height: 1.3; color: var(--c-heading);
}
.ptx-xref__arrow { margin-left: auto; font-size: 18px; color: var(--c-accent-t); transition: transform .25s ease; }
.ptx-xref__card:hover { border-color: var(--c-primary); background: var(--c-soft); }
.ptx-xref__card:hover .ptx-xref__arrow { transform: translateX(4px); }

@media (max-width: 760px) {
  .ptx-xref { margin-top: 52px; }
  .ptx-xref__list { grid-template-columns: 1fr; }
  .ptx-xref__card { padding: 18px 20px; }
}