/* Figtree — self-hosted variable font (SIL OFL 1.1), weights 300-900 in one file.
   Chosen by measuring candidate faces against the source artwork: at wght 650 its
   stroke/height (0.1678) and width/height (11.054) were the closest match to the
   artwork's 0.1667 / 10.881. Self-hosted so the site renders identically on every
   platform rather than falling back to each OS's UI font. */
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url('../fonts/figtree-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url('../fonts/figtree-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Titan International — homepage styles
   Shared verbatim between the local preview and the WordPress block theme. */

:root {
  /* Sampled from the source artwork; brand navy cross-checked against the
     official logo from titanintl.com (#0c123c). */
  --navy-900: #00142c;
  --navy-800: #062038;
  --navy-700: #0a2a4c;
  --gold: #d4942c;          /* graphic gold: rules, icons, borders, and text on navy */
  --gold-bright: #ea9c2a;   /* gold on NAVY — the artwork lightens it on dark grounds */
  --gold-rule: #e6b869;     /* thin decorative rules — measurably lighter than the text gold */
  --gold-light: #e8c78e;
  --ink: #051325;
  --body: #545a66;
  --muted: #8a97a8;
  --line: #e2e6ec;
  --surface: #f7f7f8;
  --hex-line: #e2e2e7;
  --white: #fff;

  /* Shared type scale. Six text steps plus two display clamps and one glyph
     size. Page templates draw from these rather than inventing sizes: the
     Capabilities build reached twelve distinct sizes on one page, six of them
     between 10.5px and 13px, which is what made it read as cluttered. */
  --fs-h1: clamp(30px, 3.05vw, 50px);   /* page headline */
  --fs-sub: clamp(15px, 1.28vw, 21px);  /* gold sub-headline under an H1 */
  --fs-h2: 21px;                        /* section heading, closing CTA */
  --fs-h3: 16px;                        /* card and sidebar heading */
  --fs-lead: 14px;                      /* lede, column headings */
  --fs-body: 13px;                      /* body copy, form fields */
  --fs-sm: 11.5px;                      /* card copy, meta, footer */
  --fs-xs: 10.5px;                      /* uppercase labels, pills, eyebrows */
  --fs-arw: 17px;                       /* standalone arrow and chevron glyphs */
  /* Component constants. Not part of the content ladder above, but declared so
     the consistency check has a complete allow-list and nobody has to guess
     whether a 13.5px in a diff is the nav or a stray. */
  --fs-nav: 13.5px;                     /* primary nav */
  --fs-btn: 12.5px;                     /* button labels */
  --fs-eyebrow: 12px;                   /* eyebrow above a headline */
  --fs-wordmark: 38px;                  /* built-in wordmark fallback */

  --wrap: 1340px;
  --skew: -8deg;

  --sans: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

body.titan {
  margin: 0;
  font-family: var(--sans);
  color: var(--body);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  line-height: 1.55;
}

.titan img { max-width: 100%; display: block; }
.titan a { color: inherit; text-decoration: none; }

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: 32px; }

/* ---------- shared bits ---------- */

/* `.growth p` (0,1,1) outranks a bare `.eyebrow` (0,1,0) and turns it grey —
   same cascade trap as the buttons. Keep the selector specific. */
.eyebrow, .growth .eyebrow {
  font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--gold-bright); margin: 0 0 7px;
}

/* Buttons in the artwork are chamfered navy tags with a hairline gold edge and a
   plain gold arrow — not pills. The gold edge is the element background; an inset
   pseudo-element supplies the navy face. */
.btn {
  position: relative; display: inline-flex; align-items: center; gap: 14px;
  font-size: var(--fs-btn); font-weight: 800; letter-spacing: .045em; text-transform: uppercase;
  padding: 11px 22px; cursor: pointer; background: var(--gold);
  clip-path: polygon(11px 0, calc(100% - 12px) 0, 100% 11px, 100% calc(100% - 11px), calc(100% - 12px) 100%, 0 100%, 0 11px);
  transition: transform .18s ease;
}
.btn::before {
  content: ""; position: absolute; inset: 1.5px; z-index: 0;
  clip-path: polygon(10px 0, calc(100% - 11px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 11px) 100%, 0 100%, 0 10px);
  transition: background-color .18s ease;
}
.btn > * { z-index: 0; }
.btn .arw { position: relative; z-index: 1; color: var(--gold-bright); font-size: var(--fs-arw); line-height: 1; flex: none; }
/* Must out-specify `.titan a { color: inherit }` (0,1,1), or the label falls
   back to body grey and drops to ~2.7:1 against the navy face. */
.titan .btn { color: #fff; }
.btn span:not(.arw) { position: relative; z-index: 1; }

.btn-navy::before { background: var(--navy-900); }
.btn-navy:hover::before { background: var(--navy-700); }
.btn-ghost::before { background: var(--navy-900); }
.btn-ghost:hover::before { background: #0b2542; }

/* Short gold accent tucked under the right end of the headline, as in the artwork
   (measured: 58x4px, sitting ~2px below the H1). */
.headline { width: fit-content; max-width: 100%; }
.rule-gold { width: 58px; height: 4px; background: var(--gold-rule); border: 0; margin: 2px 0 0 auto; }

/* Decorative edges.
   In the source artwork the honeycomb is NOT a full-page field: it is clipped
   inside a chevron-shaped wedge at each edge, bounded by a navy-to-blue gradient
   line, with a faint white chevron and then a pale gold chevron layered outside.
   Hexagons are pointy-top, ~24px wide, row spacing ~21px (measured). */
.deco { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }

/* Decoration is sized from the margin actually available beside the content
   ((section - wrap) / 2), so it can never reach the text. At 1672px it is full
   width; by ~1340px it has shrunk to a sliver; below that it collapses to zero.
   A fixed width overlapped the headline on any viewport under ~1600px. */
.hexwedge {
  position: absolute; top: 0; bottom: 0;
  width: max(0px, min(66px, calc(((100% - var(--wrap)) / 2 + 26px) * 0.57)));
  background-image: url("../img/hexgrid.png");
  background-size: 24px 42px;
}
.hexwedge-l { left: 0;  clip-path: polygon(0 0, 100% 50%, 0 100%); }
.hexwedge-r { right: 0; clip-path: polygon(100% 0, 0 50%, 100% 100%); }

.chevlines {
  position: absolute; top: 0; bottom: 0; height: 100%;
  width: max(0px, min(116px, calc((100% - var(--wrap)) / 2 + 26px)));
}
.chevlines-l { left: 0; }
.chevlines-r { right: 0; transform: scaleX(-1); }
.chevlines path { fill: none; vector-effect: non-scaling-stroke; }

/* Dark band keeps a full-bleed honeycomb, as in the artwork. */
.hexfield {
  position: absolute; inset: 0; pointer-events: none;
  background-image: url("../img/hexgrid-dark.png");
  background-size: 24px 42px;
}

/* ---------- utility bar ---------- */

.utility {
  background: var(--navy-900); color: #dfe6ef;
  font-size: var(--fs-body); letter-spacing: .01em;
}
.utility .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 42px; }
.utility ul { display: flex; align-items: center; gap: 0; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.utility li { display: flex; align-items: center; gap: 9px; padding: 0 18px; position: relative; }
.utility li + li::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 1px; height: 15px; background: rgba(255,255,255,.18);
}
.utility li:first-child { padding-left: 0; }
.utility .ico { width: 15px; height: 15px; flex: none; color: var(--gold); }
.utility .ico-gold { color: var(--gold); }
.utility .ico-flag { width: 20px; height: 14px; color: #e8eef6; }
.utility a:hover { color: #fff; }

/* ---------- header ---------- */

.site-header { background: #fff; border-bottom: 1px solid var(--line); position: relative; z-index: 20; }
.site-header .wrap { display: flex; align-items: center; gap: 32px; min-height: 98px; }

/* Brand lockup: the wordmark overlaps the globe, as in the source artwork.
   "INTERNATIONAL, INC." is right-aligned under the wordmark, not centred. */
.brand { display: block; flex: none; text-decoration: none; }
.brand-logo { height: 72px; width: auto; display: block; }

.brandmark { position: relative; display: inline-block; padding-left: 34px; }
.brand .globe {
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 58px; height: 58px; color: var(--navy-900); opacity: .92;
}
.brand .wordmark { position: relative; display: block; line-height: 1; }
.brand .wm-main {
  display: block;
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, "Times New Roman", Times, serif;
  font-size: var(--fs-wordmark); font-weight: 700; letter-spacing: .005em; color: var(--navy-900);
}
.brand .wm-sub {
  /* Narrower than the wordmark so it tucks under it and clears the globe. */
  display: block; text-align: right; font-size: 8px; font-weight: 600;
  letter-spacing: .125em; color: var(--navy-900); margin-top: 5px;
  white-space: nowrap;
}

/*
 * THE HEADER HAS THREE STATES, chosen by viewport width. The values here are
 * the full-width state and match the client's comp (Homepage Revision.png):
 * measured at the artwork's 1672px, comp nav span HOME->CONTACT is 770px and
 * this renders 774. Do not tighten these to fix clipping at narrower widths --
 * that is what the two media blocks below are for.
 *
 *   > 1320px   comp metrics (this rule)        header fits with gutter to ~1302
 *   <= 1320px  compressed metrics (see below)  fits with gutter to 1161, raw 1128
 *   <= 1150px  hamburger (see below)           nav collapses; CTA stays visible
 *
 * --nav-pad-x drives the item padding, the current-item underline inset and the
 * dropdown caret's offset together. They were three separate literals and they
 * have to agree: the underline is drawn with left/right insets that line up
 * with the label, so changing the padding alone shifts the rule out from under
 * the word. It is also what makes the compressed state a three-line override.
 *
 * The nav cannot wrap or shrink on its own -- every link is white-space: nowrap
 * inside a no-wrap flex row, so the row's min-content floor is its full width.
 */
.mainnav { margin-left: auto; --nav-pad-x: 16px; }
.mainnav ul { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
.mainnav a {
  display: flex; align-items: center; gap: 6px; padding: 12px var(--nav-pad-x);
  font-size: var(--fs-nav); font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
  color: var(--ink); position: relative; white-space: nowrap;
}
.mainnav a:hover { color: var(--gold); }
.mainnav .is-current { color: var(--ink); }
.mainnav .is-current::after {
  content: ""; position: absolute; left: var(--nav-pad-x); right: var(--nav-pad-x); bottom: 4px;
  height: 2px; background: var(--gold);
}
.mainnav .caret { width: 9px; height: 9px; opacity: .55; }

/* Real WP menus: dropdown panels for items with children. Opens on hover and on
   keyboard focus (:focus-within), so it is reachable without a mouse.
   The caret is a background image rather than a pseudo-element, because ::after
   is already used for the current-item underline and an item can be both. */
.mainnav li { position: relative; }
.mainnav .menu-item-has-children > a {
  padding-right: calc(var(--nav-pad-x) + 12px);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%23051325' stroke-width='2' stroke-opacity='0.55'><path d='m2 4 4 4 4-4'/></svg>");
  background-repeat: no-repeat;
  background-position: right calc(var(--nav-pad-x) - 2px) center;
}
.mainnav ul ul {
  display: none; position: absolute; top: 100%; left: 8px; z-index: 30;
  min-width: 232px; padding: 6px 0; margin: 0;
  background: #fff; border: 1px solid var(--line);
  box-shadow: 0 16px 34px rgba(10,26,48,.14);
  flex-direction: column; align-items: stretch;
}
.mainnav li:hover > ul,
.mainnav li:focus-within > ul { display: flex; }
.mainnav ul ul a {
  padding: 10px 16px; font-size: var(--fs-btn); letter-spacing: .02em;
  text-transform: none; font-weight: 600; white-space: nowrap;
}
.mainnav ul ul a:hover { background: var(--surface); color: var(--gold); }

/* WordPress marks the active item with its own class; mirror the fallback style. */
.mainnav .current-menu-item > a::after,
.mainnav .current_page_item > a::after {
  content: ""; position: absolute; left: var(--nav-pad-x); right: var(--nav-pad-x); bottom: 4px;
  height: 2px; background: var(--gold);
}
.mainnav ul ul .current-menu-item > a::after { display: none; }

/* Inside the drawer the submenu is inline, not a floating panel. Scoped to the
   hamburger breakpoint, which is where the drawer exists. */
@media (max-width: 1150px) {
  .mainnav ul ul {
    display: flex; position: static; min-width: 0; border: 0; box-shadow: none;
    padding: 0 0 0 14px; background: transparent;
  }
  .mainnav .menu-item-has-children > a { background-image: none; padding-right: 4px; }
}
.header-cta { flex: none; margin-left: 8px; }
/* Hidden by default; the 1150px block below turns it on. Must precede that
   block -- same specificity, so source order decides. */
.navtoggle { display: none; }

/*
 * Compressed state. The comp metrics need ~1302px of viewport to sit inside
 * the wrap's 32px gutter (raw content locks at 1270); below that, REQUEST A
 * QUOTE walks off the right edge, because nothing in the row can give. These
 * five levers were each measured in isolation and are additive: padding 70px,
 * tracking 23.9, item gap 24, wrap gap 16, CTA margin 8 -- 141.9px total,
 * taking the gutter-clean threshold to 1161 and the raw one to 1128.
 *
 * Applied only here, not globally: the clipping is conditional on width, so
 * the fix is too, and full-width pages -- where the client reviews against the
 * artwork -- keep the comp's spacing. 1320 rather than 1302 so a classic
 * scrollbar (15-17px) cannot push a 1320-1336 window below the comp threshold.
 */
@media (max-width: 1320px) {
  .site-header .wrap { gap: 24px; }
  .mainnav { --nav-pad-x: 11px; }
  .mainnav ul { gap: 0; }
  .mainnav a { letter-spacing: .04em; }
  .header-cta { margin-left: 0; }
}

/*
 * Hamburger state. Compressed metrics are gutter-clean to 1161 and stop
 * fitting at all at 1128; between those the CTA eats into the 32px gutter, and
 * by 1131 it sits 3px from the viewport edge. 1150 caps that: the button is
 * never closer than 22px to the edge, and Chrome's 125% step on a 1440px
 * window (1152) keeps the full nav. Below here the nav collapses; the CTA stays
 * visible beside the toggle -- ample room for brand + toggle + button -- until
 * the 860px mobile rule hides it with the rest of the desktop chrome. nav.js
 * closes the drawer when the toggle is no longer displayed, so it follows this
 * breakpoint without carrying its own copy of the number.
 */
@media (max-width: 1150px) {
  .mainnav { display: none; }
  .navtoggle {
    display: inline-flex; align-items: center; justify-content: center;
    margin-left: auto; width: 44px; height: 44px; border: 1px solid var(--line);
    background: #fff; border-radius: 6px; color: var(--ink);
  }
}


/* ---------- hero ---------- */

.hero { position: relative; background: #fff; overflow: hidden; }
.hero .wrap {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: minmax(0,.95fr) minmax(0,1.25fr);
  gap: 40px; align-items: center; padding-block: 16px 14px;
}

.hero h1 {
  font-size: clamp(33px, 3.38vw, 56px); line-height: .92; letter-spacing: -0.003em;
  font-weight: 650; color: var(--ink); margin: 0 0 8px;
}
.hero .services {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap; line-height: 1.05;
  font-size: clamp(17px, 1.55vw, 26px); font-weight: 700; color: var(--gold); margin: 0;
}
.hero .services .dot { font-size: .5em; opacity: .8; }
.hero .lede { font-size: var(--fs-h3); line-height: 1.38; max-width: 46ch; margin: 14px 0 0; }

.trustrow {
  display: flex; flex-wrap: nowrap; gap: 12px; margin: 14px 0 0;
}
.trustrow div { display: flex; align-items: center; gap: 7px; font-size: var(--fs-sm); color: var(--ink); font-weight: 500; white-space: nowrap; position: relative; }
.trustrow div + div { padding-left: 12px; }
.trustrow div + div::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 1px; height: 15px; background: #d8dce2;
}
.trustrow .ico { width: 19px; height: 19px; color: var(--gold); flex: none; }

.hero .btn { margin-top: 14px; }

/* angled material strip */
.matstrip {
  background: var(--surface);
  padding: 8px 0 12px;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px;
}
/* A flex column so the gold bar is pinned to the card's bottom edge: the grid
   stretches every card to the tallest, so the five bars stay on one line even
   when one label wraps (see .name below). Labels sit on that shared row too;
   a one-line label simply starts a line lower than a two-line one. */
.matcard { text-align: center; display: flex; flex-direction: column; }
.matcard .shot {
  height: 235px; overflow: hidden; transform: skewX(var(--skew));
  background: #fff;   /* matches the extracted photos' white ground */
}
.matcard .shot img {
  width: 100%; height: 100%; object-fit: cover;
  transform: skewX(calc(var(--skew) * -1)) scale(1.16);
  transition: transform .4s ease;
}
.matcard:hover .shot img { transform: skewX(calc(var(--skew) * -1)) scale(1.22); }
/* Wrapping allowed since 2026-09-04: "Tungsten & Tungsten Carbide" measures
   189px in a 129px card, so the artwork's nowrap would have run it into its
   neighbours. Balanced so the long label breaks evenly ("Tungsten & /
   Tungsten Carbide") instead of orphaning one word. */
.matcard .name {
  margin: auto 0 0; padding-top: 10px; font-size: var(--fs-xs); font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--ink);
  text-wrap: balance;
}
.matcard .bar { width: 34px; height: 2px; background: #e0ad53; margin: 6px auto 0; }

/* ---------- growth band ---------- */

.growth { background: var(--navy-900); color: #fff; position: relative; overflow: hidden; }
.growth .inner {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: minmax(0,.9fr) auto minmax(0,1.5fr) minmax(0,.72fr);
  align-items: center; gap: 0;
}
.growth .intro { padding: 18px 38px 14px 32px; max-width: 470px; }
.growth h2 {
  font-size: clamp(20px, 1.55vw, 25px); line-height: .94; font-weight: 600;
  letter-spacing: -.02em; margin: 0 0 11px; color: #fff;
}
.growth p { font-size: var(--fs-eyebrow); line-height: 1.17; color: #ccccd2; margin: 0 0 13px; }

.growth .divider { color: var(--gold-bright); opacity: .9; align-self: stretch; display: grid; place-items: center; padding-inline: 6px; }
.growth .divider svg { width: 34px; height: 92px; }

.pillars { display: grid; grid-template-columns: repeat(4, 1fr); }
.pillar { padding: 21px 20px; text-align: center; position: relative; }
.pillar + .pillar::before {
  content: ""; position: absolute; left: 0; top: 16%; bottom: 16%;
  width: 1px; background: rgba(255,255,255,.16);
}
.pillar .ico { width: 40px; height: 40px; margin: 0 auto 9px; color: var(--gold-bright); }
.pillar h3 {
  font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: #fff; margin: 0 0 7px; line-height: 1.3;
}
.pillar p { font-size: var(--fs-sm); line-height: 1.42; color: #ccccd2; margin: 0; }

.growth .shot {
  align-self: stretch; min-height: 0; position: relative;
  /* Slant flipped to the bottom edge (2026-08-24): the client circled the
     flag -- a top-left cut amputated it. */
  clip-path: polygon(0 0, 100% 0, 100% 100%, 16% 100%);
}
/* object-position left TOP everywhere this photo renders: cover-cropping must
   eat the right and bottom of the frame, never the flag at the top-left.
   `left center` failed below 1181px -- the full-width 240px band showed source
   rows 195-485 of 680 and decapitated the flag. */
.growth .shot img { width: 100%; height: 100%; object-fit: cover; object-position: left top; position: absolute; inset: 0; }

/* ---------- pillar cards ---------- */

.cards { background: #fff; padding: 14px 0 12px; }
.cards .grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.card {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .58fr); align-items: stretch;
  border: 1px solid var(--line); background: #fff;
  transition: box-shadow .2s ease, transform .2s ease;
}
.card:hover { box-shadow: 0 12px 32px rgba(10,26,48,.09); transform: translateY(-2px); }
.card .txt { padding: 10px 12px; display: flex; flex-direction: column; }
.card .ico { width: 21px; height: 21px; color: var(--navy-900); margin-bottom: 6px; }
.card h3 {
  font-size: var(--fs-btn); font-weight: 700; letter-spacing: .01em; line-height: 1.28;
  color: var(--ink); margin: 0 0 5px; text-transform: uppercase;
}
.card p { font-size: var(--fs-sm); line-height: 1.4; margin: 0 0 6px; }
.card .more {
  margin-top: auto; font-size: var(--fs-sm); font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--gold); display: inline-flex; align-items: center; gap: 8px;
}
.card .more:hover { gap: 12px; }
.card .shot { position: relative; min-height: 126px; }
.card .shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ---------- closing cta ---------- */

.closing { position: relative; background: #fff; overflow: hidden; border-top: 1px solid var(--line); }
.closing .wrap {
  position: relative; z-index: 2; padding-block: 5px;
  display: flex; align-items: center; justify-content: center; gap: 34px; flex-wrap: wrap;
}
.closing .copy { text-align: center; }
.closing h2 {
  font-size: clamp(21px, 1.75vw, 28px); font-weight: 600; letter-spacing: -.02em;
  line-height: 1.15; color: var(--ink); margin: 0 0 2px;
}
.closing p { font-size: var(--fs-btn); margin: 0; }

/* ---------- footer ---------- */

/* ---------- site footer (Contact Us revision artwork) ---------- */

/* Gold hairline across the top. Present in the Contact Us and About artwork
   (measured #dca434, full width) and absent from Services and News only because
   those pages put a navy CTA directly above it — which is exactly the case that
   needs the separator most, or the two navy blocks merge into one. */
.site-footer {
  position: relative; background: var(--navy-900); color: #b9c3d0;
  font-size: var(--fs-sm); border-top: 2px solid var(--gold); overflow: hidden;
}
.site-footer a { color: inherit; }
.site-footer a:hover { color: #fff; }

.footer-main {
  position: relative; z-index: 2;
  display: grid; gap: 32px;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, .9fr)) minmax(0, 1.2fr);
  padding-block: 34px 30px;
}

/* Logo and the ISO 9001 badge sit on one row, top-aligned, the badge in the
   gap Ilisha marked (2026-09-01). The badge is served at its native 40x80 —
   the only artwork supplied — so it is never scaled. The artwork is drawn on
   white with a navy "ISO 9001" wordmark, so the white ground has to stay: it
   gets a 4px white plaque with a soft corner so the tile reads as deliberate
   on the navy, not as an un-keyed background. */
.footer-marks { display: flex; align-items: flex-start; gap: 18px; margin-bottom: 14px; }
.footer-logo { width: 168px; height: auto; flex: none; }
.footer-badge {
  width: 40px; height: 80px; flex: none; box-sizing: content-box;
  padding: 4px; background: #fff; border-radius: 3px;
}
.footer-brand address { font-style: normal; line-height: 1.6; margin: 0 0 10px; }
.footer-contact { margin: 0; display: flex; flex-direction: column; gap: 3px; line-height: 1.6; }

.footer-col h2 {
  font-size: var(--fs-sm); font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  color: #fff; margin: 0 0 12px;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.footer-cta p { margin: 0 0 14px; line-height: 1.55; }
.footer-cta .btn { font-size: var(--fs-sm); padding: 9px 18px; }

.footer-legal {
  position: relative; z-index: 2;
  border-top: 1px solid rgba(255,255,255,.12); font-size: var(--fs-sm); color: #8ea0b4;
}
.footer-legal .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding-block: 12px; flex-wrap: wrap;
}
.footer-legal ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 18px; }

/* ---------- responsive ---------- */

/*
 * The growth band is the only section that packs four variable columns into one
 * row -- intro, divider, four pillars, photo -- and below ~1260px it runs out
 * of room while the hero (two columns) and the card grid still look settled.
 * Pillar copy shreds into five ragged lines and the intro squeezes to a third
 * of its measure. Reported by the client as the middle section not behaving
 * like the top and bottom on zoom, which is the same thing from the other side:
 * zoom narrows the CSS viewport, so 125% on a 1440px window lands in that range.
 *
 * Two pillars per row buys back half the row's width demand and keeps the band
 * horizontal -- and keeps the facility photo, which stacking would have dropped
 * below the fold. Below 1180 the band stacks and runs full width, so four
 * across fits again until the 860px rule takes it back to two.
 *
 * The trigger is 1280 and not 1360 deliberately. The 2x2 state is 117px (57%)
 * taller than the settled row, so it is a real cost, and measurement puts the
 * old layout comfortably fine down to ~1260: triggering at 1360 spent that cost
 * across 100px where nothing was wrong, and put the resulting layout snap at
 * ~105% zoom, where the band would rearrange while the hero and cards sat
 * still. That is the client's own complaint restated. At 1280 the snap
 * coincides with the width where the row genuinely stops fitting.
 */
@media (max-width: 1280px) {
  .pillars { grid-template-columns: repeat(2, 1fr); }
  .pillar { padding: 16px 18px; }
  /* Column rules come from .pillar + .pillar::before, which draws on the left
     edge of every pillar but the first. At two per row that leaves one
     dangling down the left edge of pillar 3, which starts the second row
     rather than sitting beside pillar 2. Hiding the odd-numbered ones keeps
     the real column rule on both rows and drops only the orphan; the 860px
     rule hides all of them instead, because there the band is stacked. */
  .pillar:nth-child(odd)::before { display: none; }
}

@media (max-width: 1180px) {
  .hero .wrap { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .matcard .shot { height: 220px; }
  .growth .inner { grid-template-columns: minmax(0, 1fr); }
  .growth .divider { display: none; }
  .growth .intro { max-width: none; padding: 40px 32px 8px; }
  .growth .shot { clip-path: none; min-height: 240px; }
  .pillars { grid-template-columns: repeat(4, 1fr); }
  .cards .grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 860px) {
  .wrap { padding-inline: 20px; }
  /* The trust row is nowrap on desktop (four items, one line). On a phone its
     one-line width (~534px) forced the whole hero column wider than the screen,
     and .hero's overflow:hidden then silently cut the lede and this row off.
     Wrap it, and drop the divider bars so a wrapped line doesn't start with one. */
  .trustrow { flex-wrap: wrap; column-gap: 16px; row-gap: 8px; }
  .trustrow div + div { padding-left: 0; }
  .trustrow div + div::before { display: none; }
  .utility .wrap { justify-content: center; text-align: center; }
  .utility li { padding: 0 12px; }
  .header-cta { display: none; }
  .matstrip { grid-template-columns: repeat(2, 1fr); gap: 8px 4px; }
  .matcard:last-child { grid-column: 1 / -1; }
  .pillars { grid-template-columns: repeat(2, 1fr); }
  .pillar + .pillar::before { display: none; }
  .cards .grid { grid-template-columns: minmax(0, 1fr); }
  .card { grid-template-columns: 1fr .8fr; }
  .deco { display: none; }
}

/* mobile nav drawer */
.mainnav.is-open {
  display: block; position: absolute; left: 0; right: 0; top: 100%;
  background: #fff; border-bottom: 1px solid var(--line);
  box-shadow: 0 18px 32px rgba(10,26,48,.12); padding: 8px 20px 18px;
}
.mainnav.is-open ul { flex-direction: column; align-items: stretch; gap: 0; }
.mainnav.is-open a { padding: 14px 4px; border-bottom: 1px solid var(--line); }

/* All THREE current-item underline rules have to be suppressed here, not just
   the fallback nav's. The drawer stacks full-width rows with their own
   border-bottom, so an underline meant to sit under a 42px label instead draws
   a ~440px gold bar doubling the row divider — and inset by --nav-pad-x, which
   is the desktop padding, so it does not even line up with the 4px-padded
   drawer link. The Home item carries current-menu-item AND current_page_item,
   so both WP selectors are needed alongside .is-current. */
.mainnav.is-open .is-current::after,
.mainnav.is-open .current-menu-item > a::after,
.mainnav.is-open .current_page_item > a::after { display: none; }

@media (max-width: 560px) {
  .utility ul:first-child { display: none; }
  .brand .wm-main { font-size: calc(var(--fs-wordmark) * .71); }
  .brand .globe { width: 38px; height: 38px; }
  .card { grid-template-columns: minmax(0, 1fr); }
  .card .shot { min-height: 150px; order: -1; }
  .closing .wrap { flex-direction: column; gap: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .titan *, .titan *::before, .titan *::after {
    transition: none !important; animation: none !important;
  }
}

/* Flag glyphs use a 26x18 viewBox rather than the 24x24 of the other icons. */
.trustrow .ico-flag { width: 22px; height: 15px; }

/* footer responsive */
@media (max-width: 1100px) {
  .footer-main { grid-template-columns: minmax(0,1.4fr) repeat(2, minmax(0,1fr)); }
}
@media (max-width: 720px) {
  .footer-main { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 26px; }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
  .footer-main { grid-template-columns: minmax(0, 1fr); }
  .footer-legal .wrap { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* ---------- generic page template ---------- */

.pagehead { position: relative; background: #fff; overflow: hidden; }
.pagehead .wrap { position: relative; z-index: 2; padding-block: 34px 22px; }
.pagehead h1 {
  font-size: var(--fs-h1); line-height: .96; letter-spacing: -.026em;
  font-weight: 650; color: var(--ink); margin: 0;
}
.pagehead-sub {
  font-size: var(--fs-sub); font-weight: 600; color: var(--gold);
  margin: 10px 0 0; max-width: 60ch;
}
.pagehead .rule-gold { margin: 14px 0 0 0; }

.pagebody { background: #fff; }
.pagebody .wrap { padding-block: 26px 48px; }

/* Content coming from the block editor. Kept deliberately plain so editor output
   inherits the site's type and colour without fighting block styles. */
.prose { max-width: 78ch; font-size: var(--fs-h3); line-height: 1.62; }
.prose > * + * { margin-top: 1.05em; }
.prose h2 {
  font-size: var(--fs-h2); font-weight: 650; line-height: 1.15;
  letter-spacing: -.02em; color: var(--ink); margin-top: 1.9em;
}
.prose h3 {
  font-size: var(--fs-h3); font-weight: 650; line-height: 1.25;
  color: var(--ink); margin-top: 1.6em;
}
.prose a { color: var(--gold); text-decoration: underline; text-underline-offset: 2px; }
.prose a:hover { color: var(--ink); }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li + li { margin-top: .35em; }
.prose img { border-radius: 2px; }
.prose blockquote {
  border-left: 3px solid var(--gold-rule); padding-left: 18px; margin-left: 0;
  color: var(--ink); font-size: 1.05em;
}
.prose table { border-collapse: collapse; width: 100%; font-size: .95em; }
.prose th, .prose td { border: 1px solid var(--line); padding: 8px 10px; text-align: left; }
.prose th { background: var(--surface); color: var(--ink); font-weight: 700; }
.prose figcaption { font-size: var(--fs-btn); color: var(--muted); margin-top: .5em; }

@media (max-width: 860px) {
  .pagehead .wrap { padding-block: 24px 18px; }
  .pagebody .wrap { padding-block: 20px 36px; }
}

/* ================= Products & Materials template ================= */

.screen-reader-text {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(1px,1px,1px,1px); white-space: nowrap;
}

/* gold-filled button variant used in the sourcing CTA */
.btn-gold { background: var(--gold-bright); }
.btn-gold::before { background: var(--gold-bright); }
.titan .btn-gold { color: var(--navy-900); }
.btn-gold .arw { color: var(--navy-900); }
.btn-gold:hover::before { background: #f2ab3c; }

/* ---- hero ---- */
.pm-hero { position: relative; background: #fff; overflow: hidden; }
.pm-hero .wrap {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: minmax(0,.95fr) minmax(0,1.15fr);
  gap: 36px; align-items: center; padding-block: 6px 10px;
}
.pm-hero h1 {
  font-size: var(--fs-h1); line-height: .96; letter-spacing: -.026em;
  font-weight: 650; color: var(--ink); margin: 0 0 6px;
}
/* The artwork sets this on two lines across ~470px. 34ch was ~340px, which
   forced a third line and pushed the whole hero 27px taller than the strip
   beside it. */
.pm-hero-sub {
  font-size: var(--fs-sub); font-weight: 650; line-height: 1.28;
  color: var(--gold); margin: 0 0 8px; max-width: 45ch;
}
.pm-hero-lede { font-size: var(--fs-body); line-height: 1.45; margin: 0; max-width: 48ch; }
.pm-hero .matstrip { padding: 6px 0; }
/* 195px, up from 158: Ilisha Smith's 2026-08-28 punch list asks to increase
   the size of the materials bar, and the round's mockups draw this strip
   proportionally larger. The hero band's height is still set by the taller
   copy column, so the page's band rhythm is unchanged. */
.pm-hero .matcard .shot { height: 195px; }
.pm-hero .matcard .name, .pm-hero .matcard .bar { display: none; }

/* ---- filter bar ---- */
.pm-filters { position: relative; background: var(--navy-900); overflow: hidden; }
.pm-filters .wrap {
  position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; min-height: 52px; flex-wrap: nowrap;
}
.pm-filter-list { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; }
.pm-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 9px; border: 0; background: transparent; cursor: pointer;
  font: inherit; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: #fff; border-radius: 999px;
  transition: background-color .15s ease, color .15s ease;
}
.pm-pill .ico { width: 15px; height: 15px; color: var(--gold-bright); flex: none; }
.pm-pill:hover { background: rgba(255,255,255,.08); }
.pm-pill.is-active { background: var(--gold-bright); color: var(--navy-900); }
.pm-pill.is-active .ico { color: var(--navy-900); }

.pm-search { display: flex; align-items: center; gap: 6px; flex: none; }
.pm-search-field {
  display: flex; align-items: center; gap: 8px; background: #fff;
  border-radius: 999px; padding: 6px 12px; min-width: 158px;
}
.pm-search-field svg { width: 15px; height: 15px; color: var(--muted); flex: none; }
.pm-search-field input {
  border: 0; outline: 0; font: inherit; font-size: var(--fs-body); color: var(--ink);
  background: transparent; width: 100%;
}
.pm-search-btn { font-size: var(--fs-xs); padding: 8px 14px; }

/* ---- material cards ---- */
.pm-grid-wrap { background: #fff; }
.pm-grid-wrap .wrap { padding-block: 12px 12px; }
/* One row that scrolls horizontally — Ryan Devone's 2026-08-28 email: "Add 3
   more materials - keep on same row. Can you make the products scroll across
   the page". Was repeat(8, 1fr); the flex basis of 148px matches what eight
   1fr columns computed inside the wrap, so the visible cards are unchanged and
   the additions extend past the right edge. Filtered-out cards are [hidden]
   (display: none), so the row shrinks out of scrolling when few match. */
.pm-grid {
  display: flex; gap: 14px; overflow-x: auto;
  scroll-snap-type: x proximity; padding-bottom: 8px;
  scrollbar-width: thin; scrollbar-color: var(--gold) #eceef1;
}
.pm-grid::-webkit-scrollbar { height: 8px; }
.pm-grid::-webkit-scrollbar-track { background: #eceef1; }
.pm-grid::-webkit-scrollbar-thumb { background: var(--gold); }
.pm-card {
  flex: 0 0 148px; scroll-snap-align: start;
  display: flex; flex-direction: column; text-align: center;
  border: 1px solid var(--line); background: #fff; padding: 7px 8px 10px;
  transition: box-shadow .2s ease, transform .2s ease;
}
.pm-card:hover { box-shadow: 0 10px 26px rgba(10,26,48,.10); transform: translateY(-2px); }
.pm-card[hidden] { display: none; }
.pm-card-shot { aspect-ratio: 180 / 92; overflow: hidden; background: #fff; }
.pm-card-shot img { width: 100%; height: 100%; object-fit: cover; }
/* .06em rather than .1em: at the site's content width these cards are 147px,
   and .1em pushed "Specialty Alloys" onto a second line. Grid rows stretch to
   the tallest card, so one wrapped title cost every card 20px. */
.pm-card h2 {
  font-size: var(--fs-body); font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink); margin: 10px 0 7px;
}
.pm-card-blurb { font-size: var(--fs-sm); line-height: 1.28; margin: 0 0 7px; }
.pm-card-forms { font-size: var(--fs-sm); line-height: 1.28; color: var(--ink); margin: 0 0 10px; }
.pm-card-forms strong { font-weight: 700; }
.pm-card .more {
  margin-top: auto; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--gold);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.pm-card .more:hover { gap: 12px; }
.pm-empty { text-align: center; color: var(--muted); padding: 26px 0 6px; margin: 0; }

/* The .pm-browse band ("Browse by Material Type / Form / End Market") and its
   rules were removed per Ilisha Smith's 2026-08-28 punch list. The
   Capabilities .cp-browse band is a different section and stays — she scoped
   the removal to Products & Materials. */

/* ---- sourcing CTA ---- */
.pm-cta { position: relative; background: var(--navy-900); overflow: hidden; }
.pm-cta-inner {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: minmax(0,1.25fr) auto minmax(0,.62fr);
  align-items: center; gap: 28px;
  max-width: var(--wrap); margin-inline: auto; padding-left: 32px;
}
.pm-cta-copy { padding-block: 22px; }
.pm-cta-copy h2 {
  font-size: var(--fs-h2); font-weight: 650; line-height: 1.15;
  color: #fff; margin: 0 0 7px; letter-spacing: -.015em;
}
.pm-cta-copy p { font-size: var(--fs-body); color: #ccccd2; margin: 0; }
.pm-cta-actions { display: flex; gap: 12px; flex-wrap: wrap; }
/* The closing-CTA facility slot. Declaration-identical on all three directory
   pages (.pm-cta-shot / .cp-cta-shot / .nw-cta-shot -- kept per-page so each
   page's stacking media query below still wins the cascade): same grid column,
   same clip, same photo, `left top` anchored so the flag and the TITAN sign in
   the photo's top-left survive cover-cropping at every width. facility-wide.png
   (a 4.8:1 sliver of the same shot) is retired -- squarer boxes over-zoomed it
   and cut the sign; see HANDOFF.md 2026-08-24. */
.pm-cta-shot {
  align-self: stretch; position: relative; min-height: 108px;
  clip-path: polygon(18% 0, 100% 0, 100% 100%, 0 100%);
}
.pm-cta-shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: left top; }

/* ---- responsive ---- */
@media (max-width: 1100px) {
  .pm-hero .wrap { grid-template-columns: minmax(0, 1fr); }
  .pm-cta-inner { grid-template-columns: minmax(0, 1fr); padding-inline: 32px; }
  .pm-cta-shot { display: none; }
}
@media (max-width: 780px) {
  /* The row scrolls at every width, so no column overrides any more; wider
     cards keep the copy readable where the old grid went 2-up then 1-up. */
  .pm-card { flex-basis: 190px; }
  .pm-filters .wrap { padding-block: 12px; }
  .pm-search { width: 100%; }
  .pm-search-field { flex: 1; min-width: 0; }
  /* The filter bar is a nowrap row, so a full-width search stayed on the pills'
     line and was pushed off the right edge (clipped by .pm-filters). Let it
     drop below the pills. */
  .pm-filters .wrap { flex-wrap: wrap; }
}

/* ================= Contact Us template ================= */

.cu-hero { position: relative; background: #fff; overflow: hidden; }
.cu-hero .wrap { position: relative; z-index: 2; padding-block: 20px 14px; }
.cu-hero h1 {
  font-size: var(--fs-h1); line-height: .96; letter-spacing: -.026em;
  font-weight: 650; color: var(--ink); margin: 0 0 8px;
}
.cu-hero-sub { font-size: var(--fs-lead); color: var(--body); margin: 0; }

.cu-main { background: #fff; }
.cu-main .wrap { padding-block: 4px 24px; }
.cu-grid { display: grid; grid-template-columns: minmax(0,1.85fr) minmax(0,1fr); gap: 22px; align-items: start; }

/* ---- form card (placeholder) ---- */
.cu-formcard, .cu-infocard {
  border: 1px solid var(--line); background: #fff; padding: 16px 20px;
  box-shadow: 0 2px 10px rgba(10,26,48,.04);
}
.cu-field { margin-bottom: 9px; }
.cu-label {
  display: block; font-size: var(--fs-body); font-weight: 700; line-height: 1.2;
  color: var(--ink); margin-bottom: 4px;
}
.cu-label b { color: #c0392b; font-weight: 700; }
.cu-form input[type="text"],
.cu-form input[type="email"],
.cu-form input[type="tel"],
.cu-form select,
.cu-form textarea {
  width: 100%; font: inherit; font-size: var(--fs-body); color: var(--ink);
  border: 1px solid #c9ced8; background: #fff; border-radius: 2px;
  padding: 4px 10px; transition: border-color .15s ease, box-shadow .15s ease;
}
.cu-form textarea { resize: vertical; min-height: 62px; height: 70px; }
.cu-form input:focus, .cu-form select:focus, .cu-form textarea:focus {
  outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(212,148,44,.18);
}
.cu-split { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cu-split label { display: block; font-size: var(--fs-sm); line-height: 1.2; color: var(--muted); margin-top: 2px; }
.cu-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cu-submit { margin-top: 2px; padding: 7px 20px; }
.cu-form-note {
  margin: 9px 0 0; font-size: var(--fs-sm); color: var(--muted);
  border-left: 3px solid var(--gold-rule); padding-left: 10px;
}

/* ---- contact info card ---- */
.cu-infocard h2 {
  font-size: var(--fs-h3); font-weight: 700; color: var(--ink); margin: 0 0 12px; letter-spacing: -.01em;
}
.cu-info-row { display: flex; gap: 12px; align-items: flex-start; margin: 0 0 10px; font-size: var(--fs-body); line-height: 1.5; }
.cu-info-row .ico { width: 20px; height: 20px; color: var(--gold); flex: none; margin-top: 1px; }
.cu-info-row .cu-strong { color: var(--ink); font-weight: 700; }
.cu-infocard a:hover { color: var(--gold); }
/* Capped so the info card tracks the form card instead of running long. */
.cu-aerial { width: 100%; height: 150px; object-fit: cover; margin-top: 4px; }

/* ---- map ---- */
/* A static composite from tools/fetch-map.py, not an embed — see the note in
   template-contact.php. The surface ground still shows through while the image
   decodes. */
.cu-map {
  position: relative; margin-top: 16px; border: 1px solid var(--line); overflow: hidden;
  background: var(--surface);
}
.cu-map-img { display: block; width: 100%; height: 113px; object-fit: cover; filter: saturate(.92); }
.cu-map-pin {
  position: absolute; left: 50%; top: 57px; width: 22px; height: 31px;
  transform: translate(-50%, -84%); filter: drop-shadow(0 2px 3px rgba(5,19,37,.35));
}
.cu-map-credit {
  position: absolute; right: 0; top: 113px; transform: translateY(-100%); margin: 0;
  background: rgba(255,255,255,.82); padding: 2px 7px;
  font-size: var(--fs-xs); color: var(--body);
}
.cu-map-credit a { text-decoration: underline; }
.cu-directions {
  display: inline-block; margin-top: 6px; font-size: var(--fs-sm);
  font-weight: 700; letter-spacing: .03em;
}
.titan .cu-directions { color: var(--gold); }
.cu-directions:hover { text-decoration: underline; }
.cu-map-card {
  position: absolute; left: 50%; top: 57px; transform: translate(22px, -50%);
  background: #fff; border-radius: 3px; box-shadow: 0 6px 18px rgba(10,26,48,.22);
  padding: 10px 14px; font-size: var(--fs-body); line-height: 1.45; color: var(--body); max-width: 240px;
}
.cu-map-card strong { display: block; color: var(--ink); font-size: var(--fs-body); margin-bottom: 2px; }

/* ---- value props ---- */
.cu-values {
  display: grid; grid-template-columns: repeat(4, minmax(0,1fr));
  border: 1px solid var(--line); margin-top: 16px;
}
.cu-value { display: flex; gap: 12px; align-items: flex-start; padding: 8px 15px; position: relative; }
.cu-value + .cu-value::before {
  content: ""; position: absolute; left: 0; top: 18%; bottom: 18%; width: 1px; background: var(--line);
}
.cu-value .ico { width: 26px; height: 26px; color: var(--gold); flex: none; }
.cu-value h3 {
  font-size: var(--fs-body); font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  color: var(--ink); margin: 2px 0 4px;
}
.cu-value p { font-size: var(--fs-sm); line-height: 1.42; margin: 0; }

@media (max-width: 1000px) {
  .cu-grid { grid-template-columns: minmax(0, 1fr); }
  .cu-values { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .cu-value:nth-child(3)::before { display: none; }
}
@media (max-width: 620px) {
  .cu-values { grid-template-columns: minmax(0, 1fr); }
  .cu-value + .cu-value::before { left: 18px; right: 18px; top: 0; bottom: auto; width: auto; height: 1px; }
  .cu-field-row, .cu-split { grid-template-columns: minmax(0, 1fr); }
  .cu-map-card { position: static; transform: none; max-width: none; box-shadow: none; border-top: 1px solid var(--line); }
  .cu-map-pin { top: 57px; }
}

/* ================= About Us template ================= */
/* Band heights measured off About Us Webpage.png at its native 1672px:
   utility 32 | header+hero 395 | foundation 215 | industries 175 | footer 124.
   The footer differs from the artwork's — see the note in the template header. */

/* Outline button: gold hairline, white face, navy label. Same construction as
   .btn — the element background is the edge, ::before is the face. */
.btn-outline { background: var(--gold-rule); }
.btn-outline::before { background: #fff; }
.titan .btn-outline { color: var(--ink); }
.btn-outline:hover::before { background: #fffaf1; }

/* ---- hero ---- */
.ab-hero { position: relative; background: #fff; overflow: hidden; }
.ab-hero .wrap {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .56fr);
  gap: 32px; align-items: center; padding-block: 20px 26px;
}
.ab-hero h1 {
  font-size: var(--fs-h1); line-height: .96; letter-spacing: -.026em;
  font-weight: 650; color: var(--ink); margin: 0 0 10px;
}
.ab-hero-lede { font-size: var(--fs-lead); line-height: 1.5; margin: 0; max-width: 530px; }

.ab-badges {
  list-style: none; margin: 16px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 24px;
}
.ab-badges li { display: flex; align-items: center; gap: 10px; }
.ab-badges .ico { width: 26px; height: 26px; color: var(--gold-bright); flex: none; }
.ab-badges .ico-flag { width: 28px; height: 20px; }
.ab-badges span {
  font-size: var(--fs-sm); font-weight: 700; line-height: 1.32;
  letter-spacing: .035em; text-transform: uppercase; color: var(--ink);
}
.ab-hero-btn { margin-top: 16px; }

/* The photo panel bleeds past the wrap to the viewport's right edge, so it is
   positioned against the section rather than living in the grid. The grid's
   narrow right column reserves the space. */
.ab-hero-shot {
  position: absolute; z-index: 1; top: 6px; bottom: 6px;
  left: calc(50% + var(--wrap) / 2 - 500px); right: 0;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 105px 100%);
}
.ab-hero-shot img { width: 100%; height: 100%; object-fit: cover; }

/* ---- our foundation ---- */
.ab-foundation { position: relative; background: var(--navy-900); color: #fff; overflow: hidden; }
.ab-foundation-inner { position: relative; z-index: 2; padding-block: 6px 8px; }
/* Leave room for the quality card, which overlaps the right of the band. */
.ab-foundation .ab-pillars { padding-right: 428px; }

.ab-pillars { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
.ab-pillar { padding: 0 18px; }
.ab-pillar:first-child { padding-left: 0; }
.ab-pillar + .ab-pillar { border-left: 1px solid rgba(224, 173, 83, .32); }
.ab-pillar .ico { width: 26px; height: 26px; color: var(--gold-bright); margin-bottom: 8px; }
.ab-pillar h2 {
  font-size: var(--fs-lead); font-weight: 700; letter-spacing: .02em; text-transform: uppercase;
  color: #fff; margin: 0 0 6px;
}
.ab-pillar p { font-size: var(--fs-body); line-height: 1.4; color: #ccccd2; margin: 0; }

.ab-values { list-style: none; margin: 0; padding: 0; }
.ab-values li {
  position: relative; padding-left: 15px; font-size: var(--fs-body); line-height: 1.62; color: #ccccd2;
}
.ab-values li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--gold-bright);
}

/* Left-pointing chevron card, full-bleed to the right edge. Gold hairline is the
   element background; the inset ::before supplies the white face. */
.ab-quality {
  position: absolute; z-index: 3; top: 0; bottom: 0;
  left: calc(50% + var(--wrap) / 2 - 456px); right: 0;
  background: var(--gold-rule);
  clip-path: polygon(62px 0, 100% 0, 100% 100%, 62px 100%, 0 50%);
}
.ab-quality::before {
  content: ""; position: absolute; inset: 0; background: #fff;
  clip-path: polygon(64px 2px, calc(100% - 2px) 2px, calc(100% - 2px) calc(100% - 2px), 64px calc(100% - 2px), 2px 50%);
}
.ab-quality-inner {
  position: relative; z-index: 1; height: 100%;
  display: flex; align-items: center; gap: 18px;
  padding: 22px 40px 22px 96px;
}
.ab-quality .ico { width: 54px; height: 54px; color: var(--gold-bright); flex: none; }
.ab-quality h2 {
  font-size: var(--fs-lead); font-weight: 700; letter-spacing: .02em; text-transform: uppercase;
  color: var(--ink); margin: 0 0 8px;
}
.ab-quality p { font-size: var(--fs-body); line-height: 1.5; color: var(--body); margin: 0 0 14px; max-width: 46ch; }

/* ---- serving industries ---- */
.ab-industries { position: relative; background: #fff; overflow: hidden; }
/* The artwork's honeycomb here is a faint field on the right only. */
.hexfield-light {
  background-image: url("../img/hexgrid.png");
  left: auto; width: 34%;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 40%);
          mask-image: linear-gradient(to right, transparent, #000 40%);
}
.ab-industries-inner {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: minmax(0, 1fr) 330px;
  gap: 40px; align-items: center; padding-block: 6px 8px;
}
.ab-industries h2 {
  font-size: var(--fs-h2); font-weight: 700; color: var(--ink);
  margin: 0 0 6px; text-align: center;
}
.ab-industries-sub {
  font-size: var(--fs-body); line-height: 1.45; color: var(--body);
  margin: 0 auto; max-width: 62ch; text-align: center;
}

.ab-industry-list {
  list-style: none; margin: 14px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 22px 0; /* two rows since the 2026-08-28 round added six industries */
}
.ab-industry-list li {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 0 8px; text-align: center;
}
.ab-industry-list li + li { border-left: 1px solid var(--hex-line); }
/* The first item of each row starts a new grid row, so the li + li column rule
   would dangle down its left edge — same orphan-rule shape as the pillars'
   2×2 state, and the same fix. */
.ab-industry-list li:nth-child(6n + 1) { border-left: 0; }
/* Ink, not gold — the artwork switches stroke colour for this row. */
.ab-industry-list .ico { width: 32px; height: 32px; color: var(--ink); }
.ab-industry-list span {
  font-size: var(--fs-xs); font-weight: 700; line-height: 1.3;
  letter-spacing: .045em; text-transform: uppercase; color: var(--ink);
}

.ab-next { border: 1px solid #eecca3; background: #fff; padding: 12px 16px; }
/* Card buttons sit a size below the page-level CTAs in the artwork. */
.ab-next .btn, .ab-quality .btn { padding: 8px 18px; font-size: var(--fs-sm); }
.ab-next h2 { font-size: var(--fs-h3); font-weight: 700; color: var(--ink); margin: 0 0 8px; text-align: left; }
.ab-next p { font-size: var(--fs-body); line-height: 1.42; color: var(--body); margin: 0 0 12px; }

@media (max-width: 1100px) {
  .ab-hero .wrap, .ab-industries-inner { grid-template-columns: minmax(0, 1fr); }
  .ab-hero-shot { position: static; clip-path: none; height: 260px; }
  .ab-foundation .ab-pillars { padding-right: 0; }
  .ab-quality { position: static; clip-path: none; }
  .ab-quality::before { display: none; }
  .ab-quality-inner { padding: 22px 24px; background: #fff; }
  .ab-pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 0; }
  .ab-industry-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 0; }
  .ab-industry-list li:nth-child(3n+1) { border-left: 0; }
}
@media (max-width: 640px) {
  .ab-pillars, .ab-industry-list { grid-template-columns: minmax(0, 1fr); }
  .ab-pillar + .ab-pillar, .ab-industry-list li + li { border-left: 0; }
  .ab-badges { gap: 14px 20px; }
}

/* ================= Capabilities template ================= */
/* Band heights measured off Services.png at its native 1672px:
   utility 28 | header+hero 321 | filter bar 37 | cards 201 | scalable 80 |
   browse 90 | CTA 92 (+ footer). */

/* The hero collage's panels are steeper than the material strip's -8deg:
   fitted from the artwork at dx/dy = -0.375, i.e. skewX(-20.6deg). */
.cp-hero { --cp-skew: -20.6deg; position: relative; background: #fff; overflow: hidden; }
.cp-hero .wrap {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1fr);
  gap: 28px; align-items: center; padding-block: 12px 16px;
}
.cp-hero h1 {
  font-size: var(--fs-h1); line-height: .96; letter-spacing: -.026em;
  font-weight: 650; color: var(--ink); margin: 0 0 6px;
}
.cp-hero-sub {
  font-size: var(--fs-sub); font-weight: 650; line-height: 1.06;
  color: var(--gold-bright); margin: 0 0 6px; max-width: 27ch;
}
.cp-hero-lede { font-size: var(--fs-body); line-height: 1.4; margin: 0; max-width: 52ch; }

.cp-trust { list-style: none; margin: 6px 0 0; padding: 0; display: flex; gap: 0; }
.cp-trust li { display: flex; align-items: center; gap: 7px; padding: 0 12px; }
.cp-trust li:first-child { padding-left: 0; }
.cp-trust li + li { border-left: 1px solid var(--hex-line); }
.cp-trust .ico { width: 24px; height: 24px; color: var(--gold-bright); flex: none; }
.cp-trust .ico-flag { width: 26px; height: 18px; }
.cp-trust span { font-size: var(--fs-xs); font-weight: 600; line-height: 1.3; color: var(--ink); }

.cp-hero-actions { display: flex; align-items: center; gap: 26px; margin-top: 6px; }
/* The hero's tag button is a size down from the page-level CTAs in the artwork. */
.cp-hero-actions .btn { padding: 8px 20px; }
.cp-textlink {
  font-size: var(--fs-body); font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--ink); display: inline-flex; align-items: center; gap: 9px;
}
.cp-textlink span { font-size: var(--fs-h3); }

/* One row of three skewed tiles — the survivors of the client's 2026-08-23
   "Remove This" markup, restored on Ilisha's 2026-08-24 ask. The tile is
   skewed and the image counter-skewed, the same trick the homepage material
   strip uses. Height stays near the original 94px because the source crops
   are low-resolution and do not survive being shown larger. */
.cp-collage {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px; align-self: center;
}
.cp-tile { display: block; overflow: hidden; height: 104px; transform: skewX(var(--cp-skew)); background: #fff; }
.cp-tile img {
  width: 100%; height: 100%; object-fit: cover;
  transform: skewX(calc(var(--cp-skew) * -1)) scale(1.42);
}

/* ---- filter bar ---- */
.cp-bar { background: var(--navy-900); }
.cp-bar .wrap { display: flex; align-items: center; gap: 20px; padding-block: 9px; }
.cp-pills { display: flex; align-items: center; gap: 4px; flex: 1 1 auto; flex-wrap: wrap; }
.cp-pill {
  display: inline-flex; align-items: center; gap: 7px;
  border: 0; background: none; cursor: pointer; padding: 5px 12px;
  font-family: inherit; font-size: var(--fs-xs); font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: #fff;
}
.cp-pill .ico { width: 16px; height: 16px; color: var(--gold-bright); flex: none; }
.cp-pill.is-active {
  background: var(--gold-bright); color: var(--navy-900);
  clip-path: polygon(9px 0, calc(100% - 9px) 0, 100% 50%, calc(100% - 9px) 100%, 9px 100%, 0 50%);
  padding: 5px 18px;
}
.cp-pill.is-active .ico { display: none; }
.cp-pill:not(.is-active):hover { color: var(--gold-bright); }
/* The directory's All Services pill is a static label since the 2026-08-28
   punch list ("non-clickable ... so visitors do not assume it is a broken
   link"): no pointer affordance, but it keeps the active-state visuals that
   filter.js toggles through data-filter-label. */
.cp-pill.is-static { cursor: default; }

.cp-search { display: flex; align-items: center; flex: none; }
.cp-search-field {
  display: flex; align-items: center; gap: 8px; background: #fff;
  padding: 5px 12px; width: 216px;
}
.cp-search-field svg { width: 15px; height: 15px; color: var(--muted); flex: none; }
.cp-search-field input {
  border: 0; outline: 0; width: 100%; font-family: inherit;
  font-size: var(--fs-body); color: var(--ink); background: none;
}
.cp-search-btn {
  border: 0; cursor: pointer; font-family: inherit; background: var(--navy-900);
  color: #fff; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; padding: 8px 16px; box-shadow: inset 0 0 0 1px var(--gold-rule);
}
.cp-search-btn:hover { background: var(--navy-700); }

/* ---- service cards ---- */
.cp-grid-wrap { background: #fff; }
/* These two rows are drawn wider than the site wrap in the artwork (x 97-1578
   at 1672). They deliberately do NOT get their own measure: matching that made
   the band heights right and put the cards 50px left of the logo above them and
   the footer below them, four alignment changes down one page. One content edge
   for the whole site wins over per-band fidelity to a mockup that disagrees
   with the other four mockups anyway. */
.cp-grid-wrap .wrap { padding-block: 16px 18px; }
.cp-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
/* Column flex so the "View service" links bottom-align across the row. The
   cards stretch to the tallest (Research & Development wraps its title), and
   without this the five links sit at five different heights. */
.cp-card {
  position: relative; background: #fff; border: 1px solid var(--hex-line);
  padding-bottom: 10px; display: flex; flex-direction: column;
}
.cp-card-shot { height: 60px; overflow: hidden; }
.cp-card-shot img { width: 100%; height: 100%; object-fit: cover; }
/* White disc straddling the photo's lower edge, as in the artwork. The photo
   crops are taken from the un-occluded part of each shot so nothing shows
   through behind it. */
.cp-card-badge {
  position: absolute; left: 12px; top: 38px;
  width: 42px; height: 42px; border-radius: 50%; background: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 4px rgba(5, 19, 37, .12);
}
.cp-card-badge svg { width: 24px; height: 24px; color: var(--gold-bright); }
.cp-card h2 {
  font-size: var(--fs-body); font-weight: 700; letter-spacing: .045em; text-transform: uppercase;
  color: var(--ink); margin: 6px 12px 5px 60px;
}
.cp-card-blurb { font-size: var(--fs-sm); line-height: 1.38; color: var(--body); margin: 0 12px 6px; }
.cp-card-point {
  position: relative; font-size: var(--fs-sm); line-height: 1.38; color: var(--body);
  margin: 0 12px 6px; padding-left: 13px;
}
.cp-card-point::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--gold-bright);
}
.cp-more {
  display: inline-flex; align-items: center; gap: 8px; margin: auto 12px 0;
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  align-self: flex-start;
}
.titan .cp-more { color: var(--gold-bright); }
.cp-empty { text-align: center; color: var(--body); padding: 16px 0 0; margin: 0; }

/* ---- built for scalable processing ---- */
.cp-scale { position: relative; background: var(--navy-900); color: #fff; overflow: hidden; }
.cp-scale-inner {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: minmax(0, 1.25fr) repeat(4, minmax(0, 1fr));
  gap: 0; align-items: center; padding-block: 14px;
}
.cp-scale-lead { padding-right: 22px; }
.cp-scale-lead h2 { font-size: var(--fs-arw); font-weight: 700; color: #fff; margin: 0 0 4px; }
.cp-scale-lead p { font-size: var(--fs-sm); line-height: 1.42; color: #ccccd2; margin: 0; }
.cp-scale-col { display: flex; align-items: flex-start; gap: 10px; padding: 0 14px; }
.cp-scale-col + .cp-scale-col { border-left: 1px solid rgba(224, 173, 83, .3); }
.cp-scale-col .ico { width: 28px; height: 28px; color: var(--gold-bright); flex: none; }
.cp-scale-col .ico-flag { width: 28px; height: 20px; }
.cp-scale-col h3 {
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: #fff; margin: 0 0 4px;
}
.cp-scale-col p { font-size: var(--fs-xs); line-height: 1.4; color: #ccccd2; margin: 0; }

/* The .cp-browse band ("Browse by Service Type / Material / End Market /
   Need a Custom Solution?") and its rules were removed per Ryan Devone's
   2026-09-04 answers — the Products & Materials counterpart had already gone
   on 2026-08-28. The .cp-scale strip now meets .cp-cta directly. */

/* ---- closing CTA ---- */
.cp-cta { position: relative; background: var(--navy-900); color: #fff; overflow: hidden; }
/* Mirrors .pm-cta-inner / .pm-cta-shot exactly -- see the comment there. The
   old absolute overlay (left: calc(50% + var(--wrap)/2 - 190px)) assumed the
   viewport was at least as wide as --wrap and collapsed to a 96px sliver at
   1152. */
.cp-cta-inner {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: minmax(0,1.25fr) auto minmax(0,.62fr);
  align-items: center; gap: 28px;
  max-width: var(--wrap); margin-inline: auto; padding-left: 32px;
}
.cp-cta-copy { max-width: 46ch; }
.cp-cta h2 { font-size: var(--fs-h2); font-weight: 700; color: #fff; margin: 0 0 5px; }
.cp-cta-copy p { font-size: var(--fs-body); line-height: 1.42; color: #ccccd2; margin: 0; }
.cp-cta-actions { display: flex; gap: 14px; }
.cp-cta-shot {
  align-self: stretch; position: relative; min-height: 108px;
  clip-path: polygon(18% 0, 100% 0, 100% 100%, 0 100%);
}
.cp-cta-shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: left top; }

@media (max-width: 1200px) {
  .cp-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cp-scale-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 0; }
  .cp-scale-lead { grid-column: 1 / -1; padding-right: 0; }
  .cp-scale-col:nth-child(even) { border-left: 0; }
}
@media (max-width: 1000px) {
  .cp-hero .wrap { grid-template-columns: minmax(0, 1fr); }
  .cp-tile { height: 84px; }
  .cp-bar .wrap { flex-wrap: wrap; }
  .cp-cta-shot { display: none; }
  .cp-cta-inner { grid-template-columns: minmax(0, 1fr); padding-inline: 32px; }
}
@media (max-width: 700px) {
  .cp-grid, .cp-scale-inner { grid-template-columns: minmax(0, 1fr); }
  .cp-scale-col + .cp-scale-col { border-left: 0; }
  .cp-trust { flex-wrap: wrap; gap: 10px 0; }
  .cp-tile { height: 64px; }
}

/* ================= News & Insights template ================= */
/* Band heights measured off News and Articles.png at its native 1672px:
   utility 33 | header + hero + filters + feed 668 | CTA 90 (+ footer). */

/* ---- hero ---- */
.nw-hero { position: relative; background: #fff; overflow: hidden; }
.nw-hero .wrap {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .78fr);
  gap: 30px; align-items: center; padding-block: 10px 14px;
}
.nw-hero h1 {
  font-size: var(--fs-h1); line-height: .96; letter-spacing: -.026em;
  font-weight: 650; color: var(--ink); margin: 0 0 10px;
}
.nw-hero-lede { font-size: var(--fs-body); line-height: 1.5; margin: 0; max-width: 52ch; }
.nw-hero-shot {
  position: absolute; z-index: 1; top: 0; bottom: 0;
  left: calc(50% + var(--wrap) / 2 - 560px); right: 0;
  clip-path: polygon(96px 0, 100% 0, calc(100% - 96px) 100%, 0 100%);
}
.nw-hero-shot img { width: 100%; height: 100%; object-fit: cover; }

/* ---- topic bar ---- */
.nw-bar { background: #fff; }
.nw-bar .wrap { display: flex; align-items: center; gap: 20px; padding-block: 6px; }
.nw-pills { display: flex; align-items: center; gap: 8px; flex: 1 1 auto; flex-wrap: wrap; }
.nw-pill {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  border: 1px solid var(--hex-line); background: #fff; padding: 7px 15px;
  font-family: inherit; font-size: var(--fs-xs); font-weight: 700;
  letter-spacing: .055em; text-transform: uppercase; color: var(--ink);
}
.nw-pill .caret { width: 11px; height: 11px; }
.nw-pill:hover { border-color: var(--gold-rule); }
.nw-pill.is-active { background: var(--navy-900); border-color: var(--navy-900); color: #fff; }

.nw-search { display: flex; align-items: center; flex: none; }
.nw-search-field {
  display: flex; align-items: center; gap: 8px; background: #fff;
  border: 1px solid var(--hex-line); padding: 6px 12px; width: 200px;
}
.nw-search-field svg { width: 15px; height: 15px; color: var(--muted); flex: none; }
.nw-search-field input {
  border: 0; outline: 0; width: 100%; font-family: inherit;
  font-size: var(--fs-body); color: var(--ink); background: none;
}
.nw-search-btn {
  border: 0; cursor: pointer; font-family: inherit; background: var(--navy-900);
  color: #fff; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .055em;
  text-transform: uppercase; padding: 9px 18px;
}
.nw-search-btn:hover { background: var(--navy-700); }

/* ---- feed ---- */
/* Single column since 2026-09-04: the 320px sidebar that held "Popular Topics"
   went with that card (Ryan Devone's answers). The three-card grid keeps its
   column count and simply gets wider; .nw-side* below now serve single.php,
   whose article column still has Related and Latest. */
.nw-main { background: #fff; }
.nw-main-inner { padding-block: 8px 14px; }
.nw-feed-head { font-size: var(--fs-h3); font-weight: 700; color: var(--ink); margin: 0 0 10px; }
.nw-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.nw-card { border: 1px solid var(--hex-line); background: #fff; display: flex; flex-direction: column; }
.nw-card-shot { height: 124px; overflow: hidden; }
.nw-card-shot img { width: 100%; height: 100%; object-fit: cover; }
.nw-card-meta {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin: 12px 14px 8px;
}
/* Pale cream chip - the one colour on these three pages with no existing token
   near it (measured #feecd5 against a white ground). */
.nw-chip {
  background: #feecd5; color: var(--gold-bright);
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: 4px 9px;
}
.nw-card-meta time { font-size: var(--fs-sm); color: var(--muted); white-space: nowrap; }
.nw-card h3 { font-size: var(--fs-lead); font-weight: 700; line-height: 1.25; color: var(--ink); margin: 0 14px 8px; }
.nw-card-excerpt { font-size: var(--fs-sm); line-height: 1.42; color: var(--body); margin: 0 14px 12px; }
.nw-more {
  display: inline-flex; align-items: center; gap: 8px; margin: auto 14px 12px;
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
.titan .nw-more { color: var(--gold-bright); }
.nw-empty { text-align: center; color: var(--body); padding: 16px 0 0; margin: 0; }

.nw-side { display: flex; flex-direction: column; gap: 11px; }
.nw-side-card { border: 1px solid var(--hex-line); background: var(--surface); padding: 10px 14px; }
.nw-side-card h2 { font-size: var(--fs-lead); font-weight: 700; color: var(--ink); margin: 0; }
.nw-side-card > p { font-size: var(--fs-sm); line-height: 1.38; color: var(--body); margin: 0 0 8px; }

/* The .nw-side-head / .nw-subscribe rules for the "Stay Connected" card went
   with its markup — removed per Ilisha Smith's 2026-08-28 punch list — and
   the .nw-topics rules for "Popular Topics" followed on 2026-09-04 (Ryan
   Devone's answers). */

/* ---- closing CTA ---- */
.nw-cta { position: relative; background: var(--navy-900); color: #fff; overflow: hidden; }
/* Mirrors .pm-cta-inner / .pm-cta-shot exactly -- see the comment there. The
   old absolute overlay (left: calc(50% + var(--wrap)/2 - 130px)) assumed the
   viewport was at least as wide as --wrap and collapsed to a 36px sliver at
   1152. */
.nw-cta-inner {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: minmax(0,1.25fr) auto minmax(0,.62fr);
  align-items: center; gap: 28px;
  max-width: var(--wrap); margin-inline: auto; padding-left: 32px;
}
.nw-cta h2 { font-size: var(--fs-h2); font-weight: 700; color: #fff; margin: 0 0 4px; }
.nw-cta-copy p { font-size: var(--fs-body); line-height: 1.42; color: #ccccd2; margin: 0; }
.nw-cta-actions { display: flex; gap: 14px; }
.nw-cta-shot {
  align-self: stretch; position: relative; min-height: 108px;
  clip-path: polygon(18% 0, 100% 0, 100% 100%, 0 100%);
}
.nw-cta-shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: left top; }

@media (max-width: 1100px) {
  .nw-hero .wrap { grid-template-columns: minmax(0, 1fr); }
  .nw-hero-shot { position: static; clip-path: none; height: 220px; }
  .nw-cta-shot { display: none; }
  .nw-cta-inner { grid-template-columns: minmax(0, 1fr); padding-inline: 32px; }
}
@media (max-width: 780px) {
  .nw-grid { grid-template-columns: minmax(0, 1fr); }
  .nw-bar .wrap { flex-wrap: wrap; }
  .nw-search { width: 100%; }
  .nw-search-field { flex: 1 1 auto; width: auto; }
}


/* ================= closing CTA (shared) ================= */
/* Products, Capabilities and News each end on a navy CTA sitting directly above
   the navy footer. Without one shared height the block of navy at the foot of
   the page measured 307px on About, 389 on News and 408 on Capabilities, which
   reads as a footer that changes size from page to page. One padding, one type
   treatment; the gold hairline on .site-footer separates the two. */
/* Padding lives on the COPY, not the inner grid, so the photo column can
   stretch to the band's full height on all three pages. */
.pm-cta-copy, .cp-cta-copy, .nw-cta-copy { padding-block: 16px; }

.pm-cta-copy h2, .cp-cta h2, .nw-cta h2 {
  font-size: var(--fs-h2); font-weight: 700; line-height: 1.2;
  letter-spacing: -.015em; color: #fff; margin: 0 0 5px;
}
.pm-cta-copy p, .cp-cta-copy p, .nw-cta-copy p {
  font-size: var(--fs-body); line-height: 1.42; color: #ccccd2; margin: 0; max-width: 54ch;
}


/* ================= single article (single.php) ================= */
/* From the client's "Designer (7)" article mockup.
 *
 * ON THE MOCKUP'S OVERLAP: in the artwork the "Looking Toward the Future"
 * paragraph disappears behind an inline photograph. Ilisha Smith flagged it as
 * something to fix, not to copy. Every block below is in normal document flow —
 * there is deliberately no positioned or negatively-margined image rule here.
 * If copy ever ends up under a picture on this template, something new was
 * added; it did not come from these styles.
 *
 * The sidebar card styling is the News listing's (.nw-side, .nw-side-card),
 * reused rather than restated. Since 2026-09-04 the listing itself has no
 * sidebar, so this template is the only user of the 320px column split. */

.ar { position: relative; background: #fff; overflow: hidden; }
.ar-inner {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: minmax(0, 1fr) 320px;
  gap: 28px; align-items: start; padding-block: 14px 30px;
}
.ar-main { min-width: 0; }

/* ---- breadcrumb + head ---- */
.ar-crumbs {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  font-size: var(--fs-sm); color: var(--muted); margin-bottom: 12px;
}
.titan .ar-crumbs a { color: var(--body); }
.titan .ar-crumbs a:hover { color: var(--gold); }
.ar-crumbs [aria-current] { color: var(--ink); }

.ar-head h1 {
  font-size: var(--fs-h1); line-height: .98; letter-spacing: -.026em;
  font-weight: 650; color: var(--ink); margin: 4px 0 0;
}
.ar-deck {
  font-size: var(--fs-lead); line-height: 1.45; color: var(--body);
  margin: 9px 0 0; max-width: 62ch;
}
.ar-meta {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px 20px;
  list-style: none; margin: 13px 0 0; padding: 0;
}
.ar-meta li { display: inline-flex; align-items: center; gap: 7px; font-size: var(--fs-sm); color: var(--body); }
.ar-meta svg { width: 15px; height: 15px; color: var(--gold-bright); flex: none; }

/* ---- hero ---- */
/* Chevron-clipped on the trailing edge, matching the artwork and the angled
   photo panels used on the homepage and the News hero. */
.ar-hero { position: relative; margin: 16px 0 0; }
.ar-hero img {
  /* height:auto is load-bearing. WordPress prints width/height attributes on the
     thumbnail, and without this the attribute height wins over aspect-ratio and
     the hero renders at the source image's full height (measured 596px against
     an intended 290px). */
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 5; object-fit: cover;
  clip-path: polygon(0 0, calc(100% - 46px) 0, 100% 50%, calc(100% - 46px) 100%, 0 100%);
}
.ar-hero::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 3px;
  background: var(--gold-rule);
}

.ar-body { margin-top: 18px; }
.ar-body > h2:first-child { margin-top: 0; }

/* ---- in-body blocks, authored into the post content ---- */

/* Three-up icon row, e.g. "Supporting Domestic Supply Chain Resilience". */
.ar-feature { margin-top: 1.7em; }
.ar-feature-head {
  font-size: var(--fs-lead); font-weight: 700; color: var(--ink);
  margin: 0 0 12px; padding-bottom: 9px; border-bottom: 1px solid var(--gold-rule);
}
.ar-feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.ar-feature-item { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 11px; align-items: start; }
.ar-feature-item svg { width: 34px; height: 34px; color: var(--gold-bright); }
.ar-feature-item h4 { font-size: var(--fs-body); font-weight: 700; color: var(--ink); margin: 0 0 4px; line-height: 1.25; }
.ar-feature-item p { font-size: var(--fs-sm); line-height: 1.42; color: var(--body); margin: 0; }

/* Checklist beside a supporting picture. Two grid columns — the image is a
   sibling of the list, never layered over it. */
.ar-split {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 22px; align-items: center; margin-top: 1.5em;
}
.ar-split img { width: 100%; height: 100%; max-height: 210px; object-fit: cover; display: block; }
.ar-checklist { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--gold-rule); }
.ar-checklist li {
  display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 9px; align-items: start;
  font-size: var(--fs-sm); line-height: 1.4; color: var(--body); padding: 6px 0;
}
.ar-checklist li + li { margin-top: 0; }
.ar-checklist svg { width: 14px; height: 14px; margin-top: 2px; color: var(--gold-bright); }

/* Inline photograph with a caption. Plain flow: figure, then caption, then the
   next paragraph. */
.ar-figure { margin: 1.5em 0 0; }
/* height:auto is load-bearing — the img carries width/height attributes so the
   space is reserved before it decodes, and without this the attribute height
   wins over the scaled width and the photo renders at its intrinsic 1314px. */
.ar-figure img { width: 100%; height: auto; display: block; }
.ar-figure figcaption {
  font-size: var(--fs-sm); line-height: 1.4; color: var(--muted);
  font-style: italic; margin-top: 9px;
}

/* LinkedIn callout bar. */
.ar-linkedin {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  border: 1px solid var(--hex-line); background: var(--surface);
  padding: 11px 14px; margin-top: 1.5em;
}
.ar-linkedin svg.ico { width: 26px; height: 26px; color: #0a66c2; flex: none; }
.ar-linkedin p { font-size: var(--fs-sm); line-height: 1.4; color: var(--body); margin: 0; flex: 1 1 260px; }
.titan .ar-linkedin p strong { color: var(--ink); }
.ar-linkedin .btn { flex: none; padding: 7px 15px; font-size: var(--fs-xs); }

/* Pull quote. */
.ar-quote {
  display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 11px; align-items: start;
  border: 1px solid var(--hex-line); border-left: 3px solid var(--gold-rule);
  background: var(--surface); padding: 13px 16px; margin-top: 1.5em;
}
.ar-quote svg { width: 22px; height: 22px; color: var(--gold-bright); }
.ar-quote p { font-size: var(--fs-body); line-height: 1.5; color: var(--ink); margin: 0; }
.ar-quote cite { display: block; font-size: var(--fs-sm); font-style: normal; color: var(--muted); margin-top: 5px; }

/* Closing statement banner. */
.ar-banner {
  display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 15px; align-items: center;
  border: 1px solid var(--hex-line); background: var(--surface);
  padding: 13px 17px; margin-top: 1.7em;
}
.ar-banner svg { width: 44px; height: 44px; color: var(--gold-bright); }
.ar-banner h4 { font-size: var(--fs-h2); font-weight: 700; letter-spacing: -.015em; color: var(--ink); margin: 0; line-height: 1.15; }
.ar-banner p { font-size: var(--fs-lead); font-weight: 650; color: var(--gold); margin: 3px 0 0; }

/* ---- share + pager ---- */
.ar-share { display: flex; align-items: center; gap: 10px; margin-top: 26px; }
.ar-share-label { font-size: var(--fs-sm); color: var(--body); margin-right: 2px; }
.ar-share-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 27px; height: 27px; border-radius: 50%; background: var(--navy-900);
}
.titan .ar-share-btn { color: #fff; }
.ar-share-btn svg { width: 15px; height: 15px; }
.ar-share-btn:hover { background: var(--gold); }

.ar-pager {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px;
  border-top: 1px solid var(--hex-line); margin-top: 20px; padding-top: 14px;
}
.ar-pager-next { text-align: right; }
.ar-pager a { display: block; }
.ar-pager-label {
  display: block; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted);
}
.titan .ar-pager a:hover .ar-pager-label { color: var(--gold); }
.ar-pager-title { display: block; font-size: var(--fs-sm); font-weight: 700; line-height: 1.3; color: var(--ink); margin-top: 3px; }

/* ---- sidebar extras ---- */
.ar-side { position: sticky; top: 14px; }
.ar-related { list-style: none; margin: 6px 0 0; padding: 0; }
.ar-related li + li { border-top: 1px solid var(--hex-line); margin-top: 9px; padding-top: 9px; }
.ar-related a { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 11px; align-items: start; }
/* A post with no featured image would otherwise still reserve the 88px picture
   column and squeeze its title into it (measured: title 88px wide instead of
   191px). */
.ar-related a.is-noshot { grid-template-columns: minmax(0, 1fr); }
.ar-related-shot { display: block; height: 62px; overflow: hidden; }
.ar-related-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ar-related-cat {
  display: block; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--gold-bright);
}
.ar-related-title { display: block; font-size: var(--fs-sm); font-weight: 700; line-height: 1.3; color: var(--ink); margin-top: 3px; }
.titan .ar-related a:hover .ar-related-title { color: var(--gold); }
.ar-related-meta { display: block; font-size: var(--fs-xs); color: var(--muted); margin-top: 3px; }

.ar-latest { list-style: none; margin: 6px 0 0; padding: 0; }
.ar-latest li + li { border-top: 1px solid var(--hex-line); margin-top: 8px; padding-top: 8px; }
.ar-latest a { display: block; font-size: var(--fs-sm); font-weight: 700; line-height: 1.32; color: var(--ink); }
.titan .ar-latest a:hover { color: var(--gold); }
.ar-latest time { display: block; font-size: var(--fs-xs); color: var(--muted); margin-top: 3px; }
.ar-viewall { width: 100%; justify-content: center; margin-top: 11px; padding: 7px 16px; font-size: var(--fs-xs); }

@media (max-width: 1100px) {
  .ar-inner { grid-template-columns: minmax(0, 1fr); }
  .ar-side { position: static; }
}
@media (max-width: 780px) {
  .ar-feature-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .ar-split { grid-template-columns: minmax(0, 1fr); }
  .ar-pager { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .ar-pager-next { text-align: left; }
  .ar-hero img { aspect-ratio: 16 / 7; }
}

/* ================= Service & material sub-pages (2026-08-23) =================
   One layout serves both: photograph left, write-up right, between the
   directory's pill bar (rendered as links here, not filters) and the shared
   closing bands. Pills reuse .cp-pill / .pm-pill visuals; the anchors only
   need the link resets and a "you are here" state. */

.sv-bar { background: var(--navy-900); padding-block: 10px; }
.sv-bar .wrap { display: flex; align-items: center; }
.sv-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.sv-pills a { text-decoration: none; }
.sv-pills .is-here { box-shadow: inset 0 -2px 0 var(--gold-bright); }

.sv-main { position: relative; background: #fff; overflow: hidden; }
.sv-grid {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 44px; align-items: center; padding-block: 34px 40px;
}
.sv-shot img { width: 100%; height: auto; display: block; }
.sv-copy h1 { font-size: var(--fs-h1); line-height: 1.02; letter-spacing: -.01em; color: var(--ink); margin: 0 0 14px; }
.sv-intro { font-size: var(--fs-lead); line-height: 1.5; font-weight: 600; color: var(--ink); margin: 0 0 10px; max-width: 56ch; }
.sv-points { list-style: none; margin: 0 0 12px; padding: 0; }
.sv-points li {
  font-size: var(--fs-body); line-height: 1.45; padding-left: 18px; position: relative; margin-bottom: 4px;
}
.sv-points li::before { content: ""; position: absolute; left: 0; top: .52em; width: 8px; height: 8px; background: var(--gold-bright); }
.sv-outro { font-size: var(--fs-body); margin: 0 0 16px; }

/* Material variant: spec stack + paragraphs, and a second stacked section for
   Tungsten's continuation block. */
.mt-specs { font-size: var(--fs-body); line-height: 1.6; font-weight: 600; color: var(--ink); margin: 0 0 12px; }
.mt-para { font-size: var(--fs-body); line-height: 1.5; margin: 0 0 10px; max-width: 58ch; }
.mt-h2 { font-size: var(--fs-h2); font-weight: 700; color: var(--ink); margin: 0 0 12px; }
.mt-section-cont { border-top: 1px solid var(--line); }
.mt-shot img { max-height: 460px; width: auto; max-width: 100%; margin-inline: auto; }

/* The no-photo service card (Mechanical Milling until its photo arrives):
   same frame, the badge carries the visual weight. */
.cp-card-nophoto { padding-top: 26px; }
.cp-card-nophoto .cp-card-badge { position: static; margin: 0 0 10px; }

@media (max-width: 860px) {
  .sv-grid { grid-template-columns: minmax(0, 1fr); gap: 22px; padding-block: 24px 30px; }
  .sv-shot { max-width: 420px; margin-inline: auto; }
}

/* ---- thank-you page (template-thankyou.php) ----
   The contact form's redirect target. Borrows the contact card's frame so the
   page reads as a continuation of the form the visitor just submitted, and
   caps its measure — a single short paragraph across the full 1216px wrap
   looks like a layout error rather than a confirmation. */
.ty-card {
  border: 1px solid var(--line); background: #fff; padding: 28px 32px;
  box-shadow: 0 2px 10px rgba(10,26,48,.04);
  max-width: 720px; margin: 24px auto 40px;
}
.ty-card > p { margin: 0 0 14px; }
.ty-card > p:last-child { margin-bottom: 0; }
.ty-contact { line-height: 1.7; font-weight: 600; }
.ty-actions { margin-top: 22px; }

@media (max-width: 860px) {
  .ty-card { padding: 22px 20px; margin: 18px auto 30px; }
}

/* ---- contact form: honeypot and validation ----
   .cu-hp must be unreachable for people but still submitted by a bot that
   fills every input, so it is moved off-screen rather than display:none —
   some bots skip what is display:none, which is the opposite of the point. */
.cu-hp {
  position: absolute !important; left: -9999px !important;
  width: 1px; height: 1px; overflow: hidden;
}
.cu-form-alert {
  margin: 0 0 12px; padding: 9px 12px; font-size: var(--fs-body); font-weight: 600;
  color: #7f231a; background: #fdf1ef; border: 1px solid #e6b3ab;
}
.cu-field-error {
  display: block; margin-top: 3px; font-size: 12px; font-weight: 600; color: #c0392b;
}
.cu-form [aria-invalid="true"] { border-color: #c0392b; }