/* ==========================================================
   PLI — Phillips Light Industrial
   Brand: PLI Yellow #FEC202 · Accent Gold #E9AE00 · Deep Black #050505
          Charcoal #1B1B1B · Steel Gray #767676 · White #FFFFFF
   Type:  Roboto Condensed — 800/700 headlines, 500 subheads, 400 body
   Graphic language: 12–15° angled cuts, corner notches, high contrast
   Architecture: fixed WebGL canvas behind the page; sections are either
   transparent (world visible), scrimmed, or solid (world hidden).
   ========================================================== */

:root {
  --yellow: #FEC202;
  --gold: #E9AE00;
  --black: #050505;
  --charcoal: #1B1B1B;
  --gray: #767676;
  --light: #F4F4F4;
  --white: #FFFFFF;
  --cut: 13deg;
  --notch: 28px;
  --header-h: 78px;
  --ease: cubic-bezier(.22,.9,.24,1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: "Roboto Condensed", "Arial Narrow", sans-serif;
  font-weight: 400;
  background: var(--black);
  color: var(--white);
  line-height: 1.55;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
body.nav-open { overflow: hidden; }
body.no-webgl {
  background:
    radial-gradient(1200px 700px at 75% 20%, rgba(254,194,2,.14), transparent 60%),
    radial-gradient(900px 700px at 10% 80%, rgba(254,194,2,.06), transparent 55%),
    var(--black);
  background-attachment: fixed;
}

/* Lenis */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

/* width:100% is load-bearing — `margin: 0 auto` cancels cross-axis stretch
   inside a column flex parent, which would otherwise let this size to
   max-width (1240px) and overflow narrower viewports. */
.container { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 28px; }
.yellow { color: var(--yellow); }
.icon { display: inline-block; vertical-align: middle; stroke: currentColor; fill: none; }
.ic-y { stroke: var(--yellow) !important; }
.ic-yf { fill: var(--yellow); stroke: none; }

h1, h2, h3, h4 {
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -.005em;
  line-height: 1.02;
}

section { position: relative; z-index: 1; }

/* Keyboard focus stays visible everywhere; mouse users never see it. */
:focus-visible {
  outline: 3px solid var(--yellow);
  outline-offset: 3px;
  border-radius: 2px;
}
/* clip-path clips everything an element paints — an outline included, and an
   outline sits outside the border box. Clipped controls would otherwise take
   focus with no visible ring at all, so they get an inset one instead. */
.btn:not(.btn-ghost):focus-visible,
.svc-card:focus-visible,
.problem-tile:focus-visible,
.industry-tile:focus-visible,
.solution-card:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 3px var(--yellow);
}
/* ...and where the surface is itself yellow or near-white, the ring flips to
   black so it still has something to contrast against. */
.btn.btn-yellow:focus-visible,
.industry-tile:focus-visible,
.solution-card:focus-visible {
  box-shadow: inset 0 0 0 3px var(--black);
}
.skip-link {
  position: absolute; left: 16px; top: -60px; z-index: 300;
  background: var(--yellow); color: var(--black);
  font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  padding: 12px 20px; text-decoration: none;
  transition: top .25s var(--ease);
}
.skip-link:focus { top: 16px; }

/* ==========================================================
   PANELS
   Every band on this site is opaque. The parent runs a WebGL world behind
   the page and its sections declare themselves transparent or scrimmed
   over it; here a band is simply a ground colour, and the rhythm comes
   from alternating them.
   ========================================================== */
.panel-solid { position: relative; z-index: 2; }
.panel-dark { background: var(--black); }
.panel-charcoal { background: var(--charcoal); }

/* The parent site's PRELOADER block lived here. It existed to hold the page
   while Three.js and five postprocessing addons downloaded; this site has no
   WebGL and nothing to wait for, so the markup was removed and these rules
   matched nothing on any of the seven pages. Deleted rather than left as
   dead weight the next person has to work out the status of. */

/* ==========================================================
   CURSOR
   ========================================================== */
.cursor {
  position: fixed; inset: 0; z-index: 9998; pointer-events: none;
  mix-blend-mode: difference;
  opacity: 0; transition: opacity .3s;   /* revealed on first pointer move */
}
.cursor.active { opacity: 1; }
.cursor-dot, .cursor-ring {
  position: absolute; top: 0; left: 0;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  will-change: transform;
}
.cursor-dot { width: 7px; height: 7px; background: var(--white); margin: -3.5px 0 0 -3.5px; }
.cursor-ring {
  width: 34px; height: 34px; margin: -17px 0 0 -17px;
  border: 1.5px solid rgba(255,255,255,.55);
  transition: width .3s var(--ease), height .3s var(--ease), margin .3s var(--ease), border-color .3s;
}
.cursor.is-link .cursor-ring { width: 58px; height: 58px; margin: -29px 0 0 -29px; border-color: var(--yellow); }
.cursor.is-cta .cursor-ring { width: 74px; height: 74px; margin: -37px 0 0 -37px; border-color: var(--yellow); }

/* ==========================================================
   SCROLL PROGRESS
   ========================================================== */
.scroll-progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 200; background: rgba(255,255,255,.08); }
.scroll-progress span {
  display: block; height: 100%; background: var(--yellow);
  transform: scaleX(0); transform-origin: left;
}

/* ==========================================================
   TEXT SPLITTING
   ========================================================== */
/* Masks clip on both axes, so the padding must clear descenders (commas,
   parentheses) that hang below tight display line-heights. */
.line-mask { display: block; overflow: hidden; padding-bottom: .18em; margin-bottom: -.18em; }
.line-inner { display: inline-block; will-change: transform; }
.char-word { display: inline-block; white-space: nowrap; }
.char { display: inline-block; will-change: transform; }
.word-mask { display: inline-block; overflow: hidden; padding-bottom: .18em; margin-bottom: -.18em; }
.word { display: inline-block; will-change: transform; }

/* ==========================================================
   BUTTONS
   ========================================================== */
/* The fill wipe is a background gradient rather than a ::before overlay.
   A button's label is a bare text node, so it cannot be lifted above an
   overlay with z-index — a positioned ::before would paint over it. */
.btn {
  --btn-bg: transparent;
  --btn-fill: transparent;
  position: relative;
  display: inline-flex; align-items: center; gap: 10px;
  font-family: inherit; font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em; font-size: 15px;
  /* Explicit, not inherited. Every .btn on this site used to be an <a>, which
     picks up body's 1.55 for free; the disabled "Browse all openings" control
     on /jobs-open-positions/ is a <button>, and the UA sheet gives form
     controls line-height: normal (~1.17 in Roboto Condensed) instead. Above
     760px .page-ctas is a flex row and stretch equalised the heights, hiding
     it — below 760px each .btn goes full-width onto its own flex line, and
     the button rendered 48px against the anchor's 53.25px directly beneath
     it. Unitless so .btn-lg scales with its own font-size. */
  line-height: 1.55;
  text-decoration: none; border: none; cursor: pointer;
  padding: 15px 32px 15px 24px;
  clip-path: polygon(0 0, 100% 0, calc(100% - 15px) 100%, 0 100%);
  background-color: var(--btn-bg);
  background-image: linear-gradient(to right, var(--btn-fill) 0 50%, transparent 50% 100%);
  background-size: 200% 100%;
  background-position: 100% 0;
  background-repeat: no-repeat;
  transition: background-position .45s var(--ease), color .3s var(--ease), box-shadow .3s;
  will-change: transform;
}
.btn:hover { background-position: 0 0; }

.btn-yellow { --btn-bg: var(--yellow); --btn-fill: var(--black); color: var(--black); }
.btn-yellow:hover { color: var(--yellow); }

.btn-ghost {
  --btn-fill: var(--white); color: var(--white);
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.55); clip-path: none;
}
.btn-ghost:hover { color: var(--black); box-shadow: inset 0 0 0 1.5px var(--white); }

.btn-outline {
  --btn-fill: var(--yellow); color: var(--white);
  /* clip-path:none for the same reason as .btn-ghost — the border here is an
     inset shadow, and the angled clip would slice it off down the right edge. */
  box-shadow: inset 0 0 0 1.5px var(--yellow); clip-path: none;
}
.btn-outline:hover { color: var(--black); }

.btn-lg { padding: 18px 38px 18px 28px; font-size: 16px; }
.btn-block { width: 100%; justify-content: center; }
.magnetic { will-change: transform; }

/* ==========================================================
   SECTION HEADS
   ========================================================== */
.section-head { margin-bottom: 60px; }
.kicker {
  display: inline-block;
  font-weight: 500; text-transform: uppercase;
  letter-spacing: .24em; font-size: 12px;
  color: var(--gray);
  margin-bottom: 16px; padding-left: 36px;
  position: relative;
}
.kicker::before {
  content: ""; position: absolute; left: 0; top: 50%;
  width: 26px; height: 3px; background: var(--yellow);
  transform: translateY(-50%) skewX(calc(-1 * var(--cut)));
}
.section-head h2 { font-size: clamp(34px, 5.4vw, 66px); }
/* These headings sit in a narrow grid column, so they need their own ceiling
   or long words overflow the mask and get clipped. */
.coverage .section-head h2,
.contact .section-head h2 { font-size: clamp(30px, 3.6vw, 50px); }

/* ==========================================================
   HEADER
   ========================================================== */
.site-header {
  position: fixed; inset: 2px 0 auto 0; z-index: 150;
  transition: background .4s var(--ease), backdrop-filter .4s, border-color .4s;
  border-bottom: 1px solid transparent;
}
.site-header.scrolled {
  background: rgba(5,5,5,.72);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom-color: rgba(255,255,255,.09);
}
.header-inner {
  max-width: 1400px; margin: 0 auto;
  height: var(--header-h); padding: 0 28px;
  display: flex; align-items: center; gap: 30px;
}

/* ---------- brand lockup ----------
   Matched to the supplied PLI Sorting artwork: a solid mark with the letters
   knocked out of it, and SORTING set at roughly 63% of the mark's cap height,
   optically centred beside it. Measured off the reference — the mark's letters
   are ~430 units tall and SORTING's caps ~270.

   Two things this deliberately drops from the parent's version: the black
   border and white outline ring (the real mark is a plain solid block, no
   keyline), and the wide .16em tracking on the word, which turned SORTING
   into a subtitle rather than half of a lockup. */
.brand { display: flex; align-items: center; gap: 6px; text-decoration: none; color: var(--white); }
/* line-height below 1 is what makes the block hug the letters. At line-height
   1 the em box alone is taller than the caps, so the mark can never get past
   ~56% ink-to-box and reads as a padded chip rather than the artwork's solid
   block. .8 puts it at ~89%, matching the reference. Safe here because "PLI"
   has no descenders — do not reuse this on arbitrary text. */
.brand-mark {
  display: inline-block;
  font-weight: 900; font-size: 26px;
  letter-spacing: 0; line-height: .8;
  color: var(--black); background: var(--white);
  /* The block needs visible breathing room around the letters. Driving the
     ink-to-box ratio to the reference's ~88% is arithmetically faithful but
     optically wrong at this size: at 26px the letters end up touching the
     edges and the mark reads as cramped. Padding is set by eye instead, and
     the extra side padding is also what gives the block its broader,
     closer-to-square proportion. */
  padding: 4px 11px;
}
.brand-mark.sm { font-size: 20px; padding: 3px 9px; }
.brand-name {
  font-weight: 900; font-size: 16.5px;
  letter-spacing: .015em; line-height: 1;
  text-transform: uppercase;
}

/* On a light ground the mark returns to the artwork as drawn — black block,
   letters knocked out white. The default above is the reversal for the dark
   grounds that make up most of the site. Without this the white block would
   disappear into the white family cards. */
.panel-light .brand-mark,
.fam-card .brand-mark { color: var(--white); background: var(--black); }

.main-nav { display: flex; align-items: center; gap: 22px; margin-left: auto; }
/* The roll-up needs height and line-height locked to the same value, or the
   single visible line is clipped by its own overflow box. The yellow duplicate
   is taken out of flow so translateY(-100%) advances exactly one line. */
.main-nav a:not(.btn) {
  position: relative;
  color: var(--white); text-decoration: none;
  font-weight: 500; text-transform: uppercase;
  font-size: 12px; letter-spacing: .11em;
  white-space: nowrap;
  display: block;
  line-height: 1.5;
  height: 1.5em;
  overflow: hidden;
}
.main-nav a:not(.btn) span {
  display: block;
  transition: transform .45s var(--ease);
}
.main-nav a:not(.btn) span::after {
  content: attr(data-t);
  position: absolute; left: 0; top: 100%;
  color: var(--yellow);
}
.main-nav a:not(.btn):hover span { transform: translateY(-100%); }
.nav-cta { font-size: 12px; padding: 12px 24px 12px 17px; white-space: nowrap; }
/* The page you are on reads yellow — aria-current was being set with nothing
   rendering for sighted users.
   Matches any [aria-current], not only "page": a nav item can be the section
   you are inside without being the document you are reading, and that case
   takes aria-current="true". /book-appointment/ marks the Jobs parent that
   way, and it still needs the highlight — it is the only you-are-here signal
   in that header, since there is no top-level item for the page itself. */
.main-nav a[aria-current] { color: var(--yellow); }
/* .main-nav .mega-cols a further down the sheet is an exact specificity tie
   with the rule above and wins on source order, so the current item inside an
   open mega panel was rendering in the same grey as its siblings — the one
   place the marker most needs to show. Qualified to outrank it. */
.main-nav .mega-cols a[aria-current] { color: var(--yellow); }

.header-phone {
  display: flex; align-items: center; gap: 8px;
  color: var(--yellow); text-decoration: none;
  font-weight: 700; font-size: 16px; letter-spacing: .04em;
  white-space: nowrap;
}
.nav-toggle { display: none; }
.nav-foot { display: none; }   /* only surfaces inside the overlay menu */

/* ==========================================================
   SOLUTIONS MEGA MENU
   ========================================================== */
/* The panel anchors to .header-inner rather than to the nav item itself:
   four columns hung off a 70px-wide label would run straight past the
   right edge of the viewport. This keeps it on the page grid instead. */
.header-inner { position: relative; }

.nav-item { display: flex; align-items: center; gap: 5px; }

.mega-caret {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; padding: 0;
  background: none; border: none; cursor: pointer;
  color: rgba(255,255,255,.65);
  transition: color .3s var(--ease), transform .35s var(--ease);
}
.mega-caret:hover { color: var(--yellow); }
.nav-item.is-open > .mega-caret { color: var(--yellow); transform: rotate(180deg); }

/* No gap between the header edge and the panel — a dead strip here is what
   makes menus feel like they snatch themselves away mid-approach. */
.mega {
  position: absolute;
  top: 100%; left: 28px; right: 28px;
  z-index: 5;
  opacity: 0; visibility: hidden;
  transform: translateY(-10px);
  /* visibility is discrete, so it is held until the fade finishes on close and
     flipped instantly on open — otherwise the panel is still computed hidden
     when ArrowDown tries to focus its first link, and focus silently fails. */
  transition: opacity .26s var(--ease), transform .26s var(--ease), visibility 0s linear .26s;
}
.nav-item.is-open .mega {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity .26s var(--ease), transform .26s var(--ease), visibility 0s;
}

/* The shadow lives on the unclipped parent: an outer box-shadow on the clipped
   panel itself would be clipped away to nothing. */
.mega { filter: drop-shadow(0 26px 44px rgba(0,0,0,.55)); }
.mega-inner {
  background: rgba(11,11,11,.97);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  border: 1px solid rgba(255,255,255,.12);
  border-top: 3px solid var(--yellow);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--notch)), calc(100% - var(--notch)) 100%, 0 100%);
  padding: 24px 34px 34px;
}

.main-nav .mega .mega-all {
  display: inline-flex; align-items: center; gap: 10px;
  height: auto; overflow: visible;
  font-weight: 700; text-transform: uppercase;
  font-size: 12px; letter-spacing: .1em;
  color: var(--yellow); text-decoration: none;
  padding: 0 0 15px;
  margin-bottom: 22px;
  border-bottom: 1px solid rgba(255,255,255,.12);
  width: 100%;
  transition: gap .3s var(--ease);
}
.main-nav .mega .mega-all:hover { gap: 16px; }
.main-nav .mega .mega-all span { transition: none; }
.main-nav .mega .mega-all span::after { content: none; }
.main-nav .mega .mega-all:hover span { transform: none; }

.mega-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px 34px; }

/* Industries has no sub-groups, so its six links are grid items directly rather
   than sitting inside .mega-col stacks. */

/* Above the mobile breakpoint that flat list becomes an ordinary vertical
   dropdown: one stacked column, sized to its own content and hung off the
   label, rather than the full-width sheet Solutions needs for four grouped
   columns. Narrow enough (~270px) to anchor to the nav item at every desktop
   width — a single horizontal row was ~820px and ran off the right of the
   viewport at 1280 and below, which is what ruled that layout out.
   Desktop only: under 1151px the nav is the stacked overlay, which already
   renders .mega-cols as one column and positions the panel in flow.
   The rows deliberately keep their inherited styling, so the dividers and the
   hover slide match the Solutions columns exactly. */
@media (min-width: 1151px) {
  .nav-item.nav-compact { position: relative; }
  /* Offsets only, never transform — .mega animates `transform` for its reveal,
     so a translate used for positioning would fight the open/close tween. */
  .nav-item.nav-compact > .mega { left: 0; right: auto; width: max-content; }
  .nav-compact .mega-cols { grid-template-columns: 1fr; gap: 0; }
}

.mega-head {
  font-weight: 700; text-transform: uppercase;
  font-size: 11px; letter-spacing: .2em;
  /* Not var(--gray): #767676 on this panel lands near 4.3:1, just under the
     4.5:1 AA floor for text this size. This sits around 6.8:1. */
  color: rgba(255,255,255,.58);
  padding-left: 26px; position: relative;
  margin-bottom: 10px;
}
.mega-head::before {
  content: ""; position: absolute; left: 0; top: 50%;
  width: 18px; height: 3px; background: var(--yellow);
  transform: translateY(-50%) skewX(calc(-1 * var(--cut)));
}

/* Undo the header link roll-up for panel links: it locks height to 1.5em
   and hides overflow, which would clip these two-line rows. */
.main-nav .mega-cols a {
  display: flex; align-items: center; gap: 11px;
  height: auto; overflow: visible;
  line-height: 1.3;
  font-size: 14px; font-weight: 500;
  text-transform: none; letter-spacing: .01em;
  color: rgba(255,255,255,.82);
  padding: 10px 6px 10px 0;
  border-bottom: 1px solid rgba(255,255,255,.07);
  transition: color .25s var(--ease), padding-left .25s var(--ease), border-color .25s;
}
.main-nav .mega-cols a span { transition: none; }
.main-nav .mega-cols a span::after { content: none; }
.main-nav .mega-cols a:hover span { transform: none; }
.main-nav .mega-cols a:hover,
.main-nav .mega-cols a:focus-visible {
  color: var(--yellow);
  padding-left: 9px;
  border-bottom-color: rgba(254,194,2,.35);
}
.mega-cols a .icon { width: 21px; height: 21px; flex-shrink: 0; }

/* ==========================================================
   HERO
   ========================================================== */
.hero {
  min-height: 100svh;
  display: flex; align-items: center;
}
/* keeps the headline legible where it crosses the 3D geometry */
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(100deg, rgba(5,5,5,.94) 0%, rgba(5,5,5,.78) 34%, rgba(5,5,5,.25) 60%, transparent 78%);
}
.hero-content { position: relative; z-index: 1; }
.hero-content {
  max-width: 1240px; margin: 0 auto;
  padding: calc(var(--header-h) + 60px) 28px 140px;
  width: 100%;
}
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 11px;
  font-weight: 500; text-transform: uppercase;
  letter-spacing: .2em; font-size: 12px;
  color: rgba(255,255,255,.88);
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(5,5,5,.35);
  backdrop-filter: blur(8px);
  padding: 10px 20px;
  clip-path: polygon(0 0, 100% 0, calc(100% - 11px) 100%, 0 100%);
  margin-bottom: 32px;
}
.pulse-dot {
  width: 9px; height: 9px; border-radius: 50%; background: var(--yellow);
  box-shadow: 0 0 0 0 rgba(254,194,2,.6);
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(254,194,2,.55); }
  70% { box-shadow: 0 0 0 13px rgba(254,194,2,0); }
  100% { box-shadow: 0 0 0 0 rgba(254,194,2,0); }
}

.hero-title {
  font-size: clamp(37px, 8.6vw, 132px);
  font-weight: 800;
  margin-bottom: 30px;
  text-shadow: 0 8px 60px rgba(0,0,0,.55);
}
.hero-title .line { display: block; }

.hero-sub {
  font-size: clamp(17px, 1.9vw, 22px);
  color: rgba(255,255,255,.85);
  max-width: 660px; margin-bottom: 44px;
  text-shadow: 0 4px 30px rgba(0,0,0,.6);
}
.hero-ctas { display: flex; gap: 20px; flex-wrap: wrap; }

.hero-scroll {
  position: absolute; left: 50%; bottom: 34px;
  width: 26px; height: 44px;
  border: 2px solid rgba(255,255,255,.3); border-radius: 14px;
  transform: translateX(-50%);
}
.hero-scroll span {
  position: absolute; left: 50%; top: 8px;
  width: 4px; height: 9px; border-radius: 2px; background: var(--yellow);
  transform: translateX(-50%);
  animation: scrolldot 1.8s infinite;
}
@keyframes scrolldot {
  0% { top: 8px; opacity: 1; }
  70% { top: 25px; opacity: 0; }
  100% { top: 8px; opacity: 0; }
}

/* ==========================================================
   MARQUEE
   ========================================================== */
/* The tilted band is deliberately wider than the viewport; the outer section
   clips it so it never adds horizontal page scroll. */
.marquee-band {
  position: relative; z-index: 2;
  overflow: hidden;
  padding: 24px 0;
}
.marquee-tilt {
  background: var(--yellow); color: var(--black);
  padding: 16px 0;
  width: 108%; margin-left: -4%;
  transform: rotate(-1.2deg);
  border-top: 2px solid var(--black); border-bottom: 2px solid var(--black);
}
.marquee { overflow: hidden; }
.marquee-track {
  display: flex; align-items: center; gap: 30px;
  width: max-content; will-change: transform;
}
.marquee-track span {
  font-weight: 800; text-transform: uppercase;
  font-size: clamp(20px, 2.4vw, 32px); letter-spacing: .02em;
  white-space: nowrap;
}
.marquee-track i { font-style: normal; font-size: 13px; opacity: .5; }

/* ==========================================================
   TRUST + STATS
   ========================================================== */
.trustbar { padding: 90px 0; }
.trust-list {
  list-style: none;
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px;
  padding-bottom: 64px;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.trust-list li {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  text-align: center;
  font-weight: 700; text-transform: uppercase;
  font-size: 13px; letter-spacing: .1em;
  color: rgba(255,255,255,.9);
}
.trust-list .icon { width: 44px; height: 44px; color: var(--white); }

.stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
  padding-top: 56px;
}
.stat b {
  display: block;
  font-size: clamp(42px, 5vw, 68px); font-weight: 800;
  color: var(--yellow); line-height: 1;
  font-variant-numeric: tabular-nums;
}
.stat span {
  display: block; margin-top: 10px;
  font-weight: 500; text-transform: uppercase;
  letter-spacing: .14em; font-size: 11px; color: var(--gray);
}

/* ==========================================================
   DIVISIONS
   ========================================================== */
.segments { padding: 130px 0 150px; }
.segment-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; perspective: 1200px; }
.segment-card {
  position: relative;
  background: rgba(20,20,20,.55);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,.12);
  border-top: 3px solid var(--yellow);
  padding: 40px 32px 36px;
  clip-path: polygon(0 0, calc(100% - var(--notch)) 0, 100% var(--notch), 100% 100%, 0 100%);
  display: flex; flex-direction: column;
  transform-style: preserve-3d;
  overflow: hidden;
}
.card-sheen {
  position: absolute; inset: -40%;
  background: radial-gradient(circle at center, rgba(254,194,2,.16), transparent 55%);
  opacity: 0; pointer-events: none;
}
.seg-index {
  position: absolute; top: 22px; right: 34px;
  font-weight: 800; font-size: 46px; line-height: 1;
  color: rgba(255,255,255,.07);
}
.seg-logo {
  display: flex; align-items: center; gap: 10px;
  font-weight: 800; font-size: 24px; margin-bottom: 10px;
}
.seg-logo .brand-mark { outline-color: transparent; }
.seg-tag { color: var(--gray); font-weight: 500; margin-bottom: 24px; min-height: 46px; }
.segment-card ul { list-style: none; margin-bottom: 32px; flex: 1; }
.segment-card li {
  padding: 10px 0 10px 28px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  font-weight: 500; position: relative;
  transition: padding-left .3s var(--ease), color .3s;
}
.segment-card li::before {
  content: ""; position: absolute; left: 2px; top: 50%;
  width: 13px; height: 3px; background: var(--yellow);
  transform: translateY(-50%) skewX(calc(-1 * var(--cut)));
  transition: width .3s var(--ease);
}
.segment-card li:hover { padding-left: 34px; color: var(--yellow); }
.segment-card li:hover::before { width: 20px; }

/* ==========================================================
   PROBLEMS
   ========================================================== */
.problems { background: var(--charcoal); padding: 130px 0 150px; }
.problem-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.problem-tile {
  color: inherit; text-decoration: none;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.09);
  padding: 34px 22px;
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  text-align: center;
  font-weight: 700; text-transform: uppercase;
  font-size: 13px; letter-spacing: .08em;
  clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 0 100%);
  transition: background .35s, border-color .35s, transform .35s var(--ease);
}
.problem-tile:hover {
  background: rgba(254,194,2,.09);
  border-color: rgba(254,194,2,.5);
  transform: translateY(-7px);
}
.problem-tile .icon { width: 44px; height: 44px; color: var(--white); transition: transform .35s var(--ease); }
.problem-tile:hover .icon { transform: scale(1.12); }

/* ==========================================================
   ABOUT STATEMENT
   ========================================================== */
.about-band { padding: 170px 0; }
.about-statement {
  font-size: clamp(28px, 4.6vw, 58px);
  font-weight: 800; text-transform: uppercase;
  line-height: 1.12; max-width: 1100px;
  text-shadow: 0 8px 50px rgba(0,0,0,.6);
}

/* ==========================================================
   SOLUTIONS
   ========================================================== */
.solutions { background: var(--white); color: var(--black); padding: 130px 0 150px; }
.solutions .kicker { color: var(--gray); }
.solution-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; }
/* Eleven services, laid out 5 over 6 — the top row is the quality group, the
   bottom row is staffing, production and logistics, matching how the nav
   splits them. 30 columns is the lowest common multiple of 5 and 6, so a
   6-column card times five and a 5-column card times six both fill the row
   exactly; the gaps between tracks are absorbed into the spans, so the visible
   gutter stays 18px on both rows. Scoped above the first breakpoint — below it
   the grid drops to 4, 3 and 2 up and the spans must not apply. */
@media (min-width: 1151px) {
  .solution-grid { grid-template-columns: repeat(30, 1fr); }
  .solution-grid > * { grid-column: span 6; }
  .solution-grid > :nth-child(n + 6) { grid-column: span 5; }
}
.solution-card {
  position: relative;
  background: var(--white);
  border: 1.5px solid rgba(5,5,5,.12);
  color: var(--black); text-decoration: none;
  padding: 34px 18px 30px;
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  text-align: center;
  font-weight: 700; text-transform: uppercase;
  font-size: 13px; letter-spacing: .06em;
  clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 0 100%);
  overflow: hidden;
  transition: transform .35s var(--ease), border-color .35s, color .35s;
}
.solution-card::before {
  content: ""; position: absolute; inset: 0; background: var(--black);
  transform: translateY(101%); transition: transform .45s var(--ease); z-index: 0;
}
.solution-card > * { position: relative; z-index: 1; }
.solution-card:hover { transform: translateY(-8px); border-color: var(--black); color: var(--white); }
.solution-card:hover::before { transform: translateY(0); }
.solution-card .icon { width: 46px; height: 46px; transition: color .35s; }
.solution-card:hover .icon { color: var(--yellow); }
.card-arrow { opacity: 0; transform: translateX(-8px); transition: all .35s var(--ease); color: var(--yellow); }
/* the arrow's <svg> is deliberately not .icon (that class sizes icons at 46px
   in this grid), so it needs the stroke that .icon would otherwise supply —
   without it the path has fill:none and no stroke, and renders as nothing */
.card-arrow svg { stroke: currentColor; fill: none; }
.solution-card:hover .card-arrow { opacity: 1; transform: translateX(0); }

/* ==========================================================
   PROCESS (pinned horizontal)
   ========================================================== */
.process { padding: 0; }
.process-pin {
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(88px, 11vh, 120px) 0;
}
.process-viewport {
  --cols: 3;
  --gap: 30px;
  overflow: hidden;
}
/* Columns are sized off the viewport width, so exactly --cols cards fit and
   none is ever sliced at the edge. A flex track with fixed-px cards left a
   fractional card showing at most widths. */
.process-steps {
  list-style: none;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols));
  gap: var(--gap);
  width: 100%;
  will-change: transform;
}
.process-step {
  background: rgba(20,20,20,.5);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,.12);
  border-left: 3px solid var(--yellow);
  padding: 34px 30px 36px;
  clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%);
}
.step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px;
  background: rgba(254,194,2,.1);
  border: 1.5px solid rgba(254,194,2,.4);
  font-weight: 800; font-size: 19px; color: var(--yellow);
  clip-path: polygon(0 0, calc(100% - 13px) 0, 100% 13px, 100% 100%, 0 100%);
  margin-bottom: 22px;
}
.process-step .icon { display: block; width: 42px; height: 42px; margin-bottom: 16px; color: var(--white); }
.process-step h3 { font-size: 22px; margin-bottom: 10px; letter-spacing: .03em; }
.process-step p { font-size: 15px; color: rgba(255,255,255,.62); line-height: 1.55; }

.process-line { margin-top: 48px; height: 3px; background: rgba(255,255,255,.12); overflow: hidden; }
.process-line span { display: block; height: 100%; background: var(--yellow); transform: scaleX(0); transform-origin: left; }

/* Step the visible-card count down so cards never get too narrow to read. */
@media (max-width: 1240px) { .process-viewport { --gap: 24px; } }
@media (max-width: 1100px) { .process-viewport { --cols: 2; } }
@media (max-width: 1100px) and (orientation: landscape) and (max-height: 720px) {
  .process-pin { padding: 74px 0; }
  .process-step p { display: none; }   /* keep the pin inside short landscape viewports */
}

/* ==========================================================
   INDUSTRIES
   ========================================================== */
.industries { background: var(--light); color: var(--black); padding: 130px 0 150px; }
.industries .kicker { color: var(--gray); }

/* PLI Yellow measures ~1.5:1 on these light panels — far under the 3:1 floor
   for display text. On light sections the accent stops being the ink and
   becomes a highlight swash under black type, which keeps the brand cue. */
.solutions .yellow,
.industries .yellow {
  color: var(--black);
  background-image: linear-gradient(var(--yellow), var(--yellow));
  background-repeat: no-repeat;
  background-size: 100% .17em;
  background-position: 0 88%;
}
.industry-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.industry-tile {
  color: inherit; text-decoration: none;
  background: var(--white);
  display: flex; align-items: center; gap: 18px;
  padding: 24px 26px;
  font-weight: 700; text-transform: uppercase;
  font-size: 15px; letter-spacing: .05em;
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%);
  border-left: 4px solid var(--black);
  transition: border-color .35s, transform .35s var(--ease), box-shadow .35s;
}
.industry-tile:hover {
  border-left-color: var(--yellow);
  transform: translateX(8px);
  box-shadow: 0 16px 34px -16px rgba(5,5,5,.35);
}
.industry-tile .icon { width: 40px; height: 40px; flex: none; }

/* ==========================================================
   COVERAGE
   ========================================================== */
.coverage { padding: 140px 0; }
.coverage-wrap { display: grid; grid-template-columns: minmax(0, 470px) minmax(0, 1fr); gap: 70px; align-items: center; }
.coverage-info > p { color: rgba(255,255,255,.72); margin-bottom: 30px; }
.state-readout {
  background: rgba(254,194,2,.08);
  border-left: 4px solid var(--yellow);
  padding: 18px 22px; margin-bottom: 28px; min-height: 90px;
}
.state-readout strong {
  display: block; text-transform: uppercase;
  font-size: 21px; letter-spacing: .06em; color: var(--yellow);
}
.state-readout span { color: rgba(255,255,255,.75); font-size: 15px; }
.state-list { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; }
.state-list li {
  padding: 9px 20px;
  border: 1.5px solid rgba(255,255,255,.24);
  font-weight: 700; text-transform: uppercase;
  font-size: 12px; letter-spacing: .1em; cursor: pointer;
  clip-path: polygon(0 0, calc(100% - 11px) 0, 100% 100%, 0 100%);
  transition: background .3s, color .3s, border-color .3s;
}
.state-list li:hover, .state-list li.active { background: var(--yellow); color: var(--black); border-color: var(--yellow); }

.coverage-map svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 20px 40px rgba(0,0,0,.5)); }
.state {
  fill: rgba(255,255,255,.06);
  stroke: rgba(255,255,255,.35); stroke-width: 1.6; stroke-linejoin: round;
  cursor: pointer;
  transition: fill .35s var(--ease), stroke .35s;
}
.state:hover, .state.active { fill: var(--yellow); stroke: var(--yellow); }
.map-label {
  font-family: "Roboto Condensed", sans-serif; font-weight: 700; font-size: 20px;
  fill: rgba(255,255,255,.85); letter-spacing: .06em; pointer-events: none;
}
.hq-dot { fill: var(--yellow); }
.hq-ring {
  fill: none; stroke: var(--yellow); stroke-width: 2;
  transform-box: fill-box; transform-origin: center;
  animation: hqping 2.2s infinite;
}
@keyframes hqping {
  0% { transform: scale(.6); opacity: 1; }
  80%, 100% { transform: scale(2.6); opacity: 0; }
}

/* ==========================================================
   CONTACT
   ========================================================== */
.contact { background: var(--black); padding: 140px 0; }
/* minmax(0,…) rather than a px minimum: the long support email is an
   unbreakable string and would otherwise set the column's min-content width. */
.contact-wrap { display: grid; grid-template-columns: minmax(0, 460px) minmax(0, 1fr); gap: 70px; align-items: start; }
.contact-info > p { color: rgba(255,255,255,.72); margin-bottom: 36px; }
.contact-line {
  display: flex; align-items: center; gap: 18px;
  color: var(--white); text-decoration: none;
  padding: 18px 0;
  border-top: 1px solid rgba(255,255,255,.12);
  transition: color .3s;
}
.contact-line:last-of-type { border-bottom: 1px solid rgba(255,255,255,.12); }
.contact-line:hover { color: var(--yellow); }
.contact-line .icon { width: 32px; height: 32px; flex: none; }
.contact-line small {
  display: block; color: var(--gray);
  text-transform: uppercase; letter-spacing: .16em; font-size: 11px;
}
.contact-line span {
  min-width: 0;
  font-weight: 700; font-size: clamp(15px, 1.4vw, 19px); letter-spacing: .02em;
  overflow-wrap: anywhere;
}

.contact-form {
  background: rgba(27,27,27,.75);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,.1);
  border-top: 3px solid var(--yellow);
  padding: 44px 40px;
  clip-path: polygon(0 0, calc(100% - var(--notch)) 0, 100% var(--notch), 100% 100%, 0 100%);
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.contact-form label {
  display: block;
  font-weight: 500; text-transform: uppercase;
  font-size: 11px; letter-spacing: .14em;
  color: rgba(255,255,255,.6); margin-bottom: 20px;
}
.contact-form input,
.contact-form select,
.contact-form textarea {
  display: block; width: 100%; margin-top: 8px;
  background: rgba(255,255,255,.045);
  border: 1.5px solid rgba(255,255,255,.14);
  color: var(--white);
  font-family: inherit; font-size: 16px;
  padding: 13px 15px;
  transition: border-color .3s, background .3s;
}
.contact-form select option { color: var(--black); }
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  outline: none; border-color: var(--yellow); background: rgba(254,194,2,.06);
}
.contact-form input.invalid, .contact-form select.invalid { border-color: #e5484d; }
.file-label input { padding: 11px; }
.file-hint { display: block; margin-top: 7px; font-size: 12px; color: var(--gray); text-transform: none; letter-spacing: .02em; }
.form-success {
  margin-top: 20px;
  background: rgba(254,194,2,.1);
  border-left: 4px solid var(--yellow);
  padding: 16px 20px; font-size: 15px;
}
.form-success a { color: var(--yellow); }

/* ==========================================================
   FOOTER
   ========================================================== */
.site-footer { background: var(--charcoal); border-top: 3px solid var(--yellow); padding: 80px 0 0; }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 44px; padding-bottom: 60px; }
.footer-tag {
  margin-top: 20px; color: var(--gray);
  font-weight: 700; text-transform: uppercase; letter-spacing: .16em; font-size: 12px;
}
.site-footer h4 { font-size: 13px; letter-spacing: .16em; color: var(--yellow); margin-bottom: 18px; }
.site-footer .footer-grid a:not(.brand) {
  display: block; color: rgba(255,255,255,.7);
  text-decoration: none; font-weight: 500; font-size: 15px;
  padding: 6px 0;
  transition: color .3s, transform .3s var(--ease);
}
.site-footer .footer-grid a:not(.brand):hover { color: var(--yellow); transform: translateX(5px); }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.1);
  max-width: 1240px; margin: 0 auto; padding: 24px 28px;
  display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
  color: var(--gray); font-size: 14px;
}
.footer-bottom a { color: var(--yellow); text-decoration: none; font-weight: 700; }

/* ==========================================================
   MOBILE CTA
   ========================================================== */
.mobile-cta {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 140;
  background: rgba(5,5,5,.96);
  border-top: 1px solid rgba(255,255,255,.15);
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  gap: 10px;
}
.mobile-cta .btn { flex: 1; justify-content: center; font-size: 14px; padding: 14px 12px; }

/* ==========================================================
   INTERIOR PAGE — HERO
   ========================================================== */
/* Opaque on purpose. The WebGL world is a home-page signature; repeating it
   behind this hero would read as the same page twice. Everything down to the
   triage band is solid, so the world only surfaces in the lower half. */
.page-hero {
  position: relative; z-index: 2;
  padding: calc(var(--header-h) + 84px) 0 96px;
  background:
    radial-gradient(1100px 620px at 78% 12%, rgba(254,194,2,.09), transparent 62%),
    radial-gradient(760px 520px at 6% 88%, rgba(255,255,255,.045), transparent 60%),
    var(--black);
  overflow: hidden;
}
/* Drafting-table grid: brand geometry without another 3D scene. The mask keeps
   it from squaring off against the section edges. */
.hero-blueprint {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 78px 78px;
  -webkit-mask-image: radial-gradient(120% 90% at 70% 20%, #000 25%, transparent 78%);
  mask-image: radial-gradient(120% 90% at 70% 20%, #000 25%, transparent 78%);
}
/* The angled cut from the brand mark, blown up as a corner slab. */
.page-hero::after {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  top: 0; right: 0; width: 340px; height: 5px;
  background: var(--yellow);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 40px 100%);
}
.page-hero .container { position: relative; z-index: 1; }

.page-hero-inner {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: 64px; align-items: center;
}

/* Entrance is CSS, not GSAP: no ScrollTrigger means nothing above the fold can
   ever be stranded at opacity 0 waiting for a trigger that already passed. */
@keyframes heroRise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.page-hero-copy > *, .hero-index { animation: heroRise .7s var(--ease) both; }
.page-hero-copy > :nth-child(2) { animation-delay: .06s; }
.page-hero-copy > :nth-child(3) { animation-delay: .12s; }
.page-hero-copy > :nth-child(4) { animation-delay: .18s; }
.page-hero-copy > :nth-child(5) { animation-delay: .24s; }
.hero-index { animation-delay: .18s; }

/* ---- service index: the hero's right column earns its space by being a
   contents list for the page rather than decoration ---- */
.hero-index {
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.11);
  border-top: 3px solid var(--yellow);
  clip-path: polygon(0 0, calc(100% - var(--notch)) 0, 100% var(--notch), 100% 100%, 0 100%);
  padding: 22px 26px 26px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.hero-index-head {
  display: flex; justify-content: space-between; gap: 16px;
  font-weight: 700; text-transform: uppercase;
  font-size: 11px; letter-spacing: .18em;
  color: rgba(255,255,255,.55);
  padding-bottom: 15px; margin-bottom: 6px;
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.hero-index-row {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center; gap: 16px;
  padding: 15px 4px 15px 0;
  color: var(--white); text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.08);
  transition: padding-left .3s var(--ease), border-color .3s;
}
.hero-index-row:last-child { border-bottom: none; }
.hero-index-row:hover, .hero-index-row:focus-visible {
  padding-left: 10px;
  border-bottom-color: rgba(254,194,2,.4);
}
.hero-index-num {
  font-weight: 800; font-size: 13px; letter-spacing: .06em;
  color: rgba(255,255,255,.3);
  transition: color .3s;
}
.hero-index-row:hover .hero-index-num { color: var(--yellow); }
.hero-index-label {
  display: block; font-weight: 700; text-transform: uppercase;
  font-size: 14px; letter-spacing: .02em; line-height: 1.25;
}
.hero-index-label small {
  display: block; margin-top: 5px;
  font-weight: 500; text-transform: none; letter-spacing: 0;
  font-size: 12px; color: rgba(255,255,255,.5);
  overflow-wrap: anywhere;
}
.hero-index-count {
  font-weight: 800; font-size: 15px;
  min-width: 30px; text-align: center;
  color: var(--yellow);
  border-left: 2px solid rgba(254,194,2,.32);
  padding-left: 14px;
}

.breadcrumb { margin-bottom: 26px; }
.breadcrumb ol {
  list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  font-weight: 500; text-transform: uppercase;
  letter-spacing: .16em; font-size: 11px; color: var(--gray);
}
.breadcrumb a { color: var(--gray); text-decoration: none; transition: color .3s; }
.breadcrumb a:hover { color: var(--yellow); }
.breadcrumb li + li::before { content: "/"; margin-right: 10px; color: rgba(255,255,255,.28); }
.breadcrumb [aria-current="page"] { color: var(--white); }

.page-title { font-size: clamp(34px, 6.2vw, 84px); margin-bottom: 26px; text-shadow: 0 8px 60px rgba(0,0,0,.55); }
.page-lede {
  font-size: clamp(19px, 2.3vw, 27px);
  font-weight: 700; text-transform: uppercase; letter-spacing: .01em;
  line-height: 1.2; max-width: 780px; margin-bottom: 24px;
}
.page-intro {
  font-size: clamp(15px, 1.6vw, 18px);
  color: rgba(255,255,255,.76); max-width: 760px; margin-bottom: 40px;
  text-shadow: 0 4px 30px rgba(0,0,0,.6);
}
.page-ctas { display: flex; gap: 20px; flex-wrap: wrap; }

/* ==========================================================
   SERVICE GROUPS
   ========================================================== */
.svc-section { padding: 120px 0 130px; }
/* Every service group is opaque so the world stays sealed behind the top half
   of the page; .alt just keeps the four bands from reading as one slab. */
.svc-section.panel-solid { background: var(--charcoal); }
.svc-section.panel-solid.alt { background: var(--black); }
.section-intro { max-width: 780px; margin-top: 22px; color: rgba(255,255,255,.72); font-weight: 500; }

/* Six tracks, cards spanning two, so a trailing pair can be centred instead of
   left-orphaned — the quality group has five cards. */
.svc-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 22px; perspective: 1200px; }
.svc-grid > * { grid-column: span 2; }
.svc-grid > :nth-child(4):nth-last-child(2) { grid-column: 2 / span 2; }
.svc-grid-two > *, .svc-grid-staffing > * { grid-column: span 3; }

.svc-card {
  position: relative;
  display: flex; flex-direction: column;
  color: inherit; text-decoration: none;
  /* A light overlay, not the dark translucent recipe: these panels are opaque,
     and rgba(20,20,20,.55) would render the card DARKER than the surface it
     sits on. Matches .problem-tile / .why-tile. */
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1);
  border-top: 3px solid var(--yellow);
  padding: 34px 28px 30px;
  clip-path: polygon(0 0, calc(100% - var(--notch)) 0, 100% var(--notch), 100% 100%, 0 100%);
  transform-style: preserve-3d;
  overflow: hidden;
  transition: background .35s var(--ease), border-color .35s;
}
/* border-color is a four-side shorthand — spelling the top out again keeps the
   signature yellow rail from washing out on hover. */
.svc-card:hover {
  background: rgba(255,255,255,.075);
  border-color: rgba(254,194,2,.45);
  border-top-color: var(--yellow);
}
.svc-icon { width: 44px; height: 44px; margin-bottom: 20px; }
.svc-card h3 { font-size: 20px; letter-spacing: .01em; margin-bottom: 11px; }
.svc-card p { color: rgba(255,255,255,.7); font-weight: 500; flex: 1; }
.svc-card .card-arrow { margin-top: 22px; align-self: flex-start; }
.svc-card:hover .card-arrow { opacity: 1; transform: translateX(0); }

.svc-list { list-style: none; margin-top: 22px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 20px; }
.svc-list li {
  position: relative; font-weight: 500;
  padding: 9px 0 9px 26px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.svc-list li::before {
  content: ""; position: absolute; left: 2px; top: 50%;
  width: 12px; height: 3px; background: var(--yellow);
  transform: translateY(-50%) skewX(calc(-1 * var(--cut)));
}

.svc-aside {
  display: flex; flex-direction: column; justify-content: center; gap: 18px;
  padding: 34px 30px;
  background: rgba(255,255,255,.03);
  /* solid, not dashed: a dashed edge is the web's drop-zone/empty-state idiom
     and it is the only one in this sheet */
  border: 1px solid rgba(255,255,255,.14);
  clip-path: polygon(0 0, calc(100% - var(--notch)) 0, 100% var(--notch), 100% 100%, 0 100%);
}
.svc-aside-kicker { font-weight: 800; text-transform: uppercase; letter-spacing: .13em; font-size: 13px; color: var(--yellow); }
.svc-aside p { color: rgba(255,255,255,.72); font-weight: 500; }
.svc-aside .btn { align-self: flex-start; }

.group-cta {
  display: inline-flex; align-items: center; gap: 12px;
  margin-top: 46px; padding-bottom: 8px;
  color: var(--yellow); text-decoration: none;
  font-weight: 700; text-transform: uppercase; letter-spacing: .09em; font-size: 14px;
  border-bottom: 2px solid rgba(254,194,2,.35);
  transition: gap .3s var(--ease), border-color .3s;
}
.group-cta:hover { gap: 19px; border-bottom-color: var(--yellow); }
/* The industries band is a light panel, so the link flips to black there. */
.industries .group-cta { color: var(--black); border-bottom-color: rgba(5,5,5,.28); }
.industries .group-cta:hover { border-bottom-color: var(--black); }

/* ==========================================================
   TRIAGE BAND
   ========================================================== */
/* No background of its own: this is where the world is revealed, so the
   .panel-scrim gradient is left to show through. */
.triage-band {
  padding: 110px 0;
  border-top: 1px solid rgba(254,194,2,.28);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.triage-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, auto); gap: 54px; align-items: center; }
.triage-inner h2 { font-size: clamp(28px, 3.6vw, 50px); margin-bottom: 20px; }
.triage-inner p { color: rgba(255,255,255,.72); font-weight: 500; max-width: 580px; }
.triage-ctas { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }

/* ==========================================================
   WHY PLI
   ========================================================== */
.why { padding: 120px 0 130px; }
.why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.why-tile {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.09);
  border-left: 3px solid var(--yellow);
  padding: 30px 26px;
  transition: background .35s, transform .35s var(--ease);
}
.why-tile:hover { background: rgba(255,255,255,.07); transform: translateX(6px); }
.why-tile .icon { width: 38px; height: 38px; margin-bottom: 16px; }
.why-tile h3 { font-size: 17px; margin-bottom: 10px; }
.why-tile p { color: rgba(255,255,255,.7); font-weight: 500; font-size: 15px; }

/* ==========================================================
   FAQ
   ========================================================== */
.faq { padding: 120px 0 130px; }
.faq-list { max-width: 920px; }
.faq-item { border-bottom: 1px solid rgba(255,255,255,.12); }
.faq-item summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 26px;
  padding: 26px 0;
  font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  font-size: clamp(16px, 1.7vw, 20px); line-height: 1.25;
  transition: color .3s;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--yellow); }
.faq-mark { position: relative; width: 18px; height: 18px; flex: none; }
.faq-mark::before, .faq-mark::after {
  content: ""; position: absolute; left: 50%; top: 50%; background: var(--yellow);
}
.faq-mark::before { width: 18px; height: 3px; transform: translate(-50%, -50%); }
.faq-mark::after {
  width: 3px; height: 18px; transform: translate(-50%, -50%);
  transition: transform .35s var(--ease), opacity .3s;
}
.faq-item[open] .faq-mark::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }
.faq-body { padding-bottom: 28px; max-width: 780px; color: rgba(255,255,255,.72); font-weight: 500; }

/* ==========================================================
   CLOSING CTA BAND
   ========================================================== */
.cta-band { padding: 150px 0 170px; text-align: center; }
.cta-band h2 { font-size: clamp(30px, 5vw, 68px); margin-bottom: 40px; text-shadow: 0 8px 50px rgba(0,0,0,.6); }
.cta-band .page-ctas { justify-content: center; }

/* ==========================================================
   INTERIOR DETAIL PAGES  (body.page-svc, body.page-ind)
   Shared hero chrome for both page types. Service pages then continue with
   the modules below; industry pages use their own set further down.
   Additive only — nothing above this block is redefined.
   ========================================================== */
/* Steel Gray is a brand colour but measures 4.49:1 on Deep Black, under the
   4.5:1 floor for label-sized text. Interior pages use a lighter tint (~7.8:1)
   and keep #767676 for rules and borders. */
.page-svc .kicker, .page-ind .kicker { color: rgba(255,255,255,.62); }
.page-svc .page-hero-copy > :nth-child(6),
.page-ind .page-hero-copy > :nth-child(6) { animation-delay: .3s; }
/* Service and industry names are longer than the hub's, so the display size
   steps down to hold two lines and keep the primary CTA above the fold on a
   720px screen. */
.page-svc .page-hero, .page-ind .page-hero { padding-top: calc(var(--header-h) + 66px); }
.page-svc .page-title, .page-ind .page-title { font-size: clamp(32px, 4.8vw, 64px); }
/* Longer names (Sorting & Segregation, Quality Representation, Reverse
   Logistics, Automotive Manufacturing Support) need one more step down to hold
   two lines rather than three, which is what keeps the primary CTA above the
   fold on a 720px screen. */
.page-svc .page-title.is-long,
.page-ind .page-title.is-long { font-size: clamp(29px, 4.1vw, 55px); }

.prose p { color: rgba(255,255,255,.74); font-weight: 500; max-width: 68ch; margin-bottom: 18px; }
.prose p:last-child { margin-bottom: 0; }

.callout {
  border-left: 3px solid var(--yellow);
  padding: 4px 0 4px 24px;
  font-size: clamp(17px, 1.9vw, 21px);
  font-weight: 700; text-transform: uppercase; line-height: 1.3;
}

/* ---- hero scan panel: a 2D stand-in for the home page's WebGL, and a
        literal picture of what this service does — sweep a lot, mark what
        conforms, flag what does not ---- */
.scan-panel {
  position: relative;
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.11);
  border-top: 3px solid var(--yellow);
  clip-path: polygon(0 0, calc(100% - var(--notch)) 0, 100% var(--notch), 100% 100%, 0 100%);
  padding: 18px 22px 20px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.scan-head, .scan-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  font-weight: 700; text-transform: uppercase;
  font-size: 11px; letter-spacing: .18em;
  color: rgba(255,255,255,.55);
}
.scan-head { padding-bottom: 14px; border-bottom: 1px solid rgba(255,255,255,.12); }
.scan-foot { padding-top: 14px; border-top: 1px solid rgba(255,255,255,.12); }
.scan-live { display: inline-flex; align-items: center; gap: 8px; color: var(--yellow); }
.scan-foot b { color: var(--yellow); font-size: 13px; }
.scan-foot i { font-style: normal; color: rgba(255,255,255,.7); font-size: 13px; }
.scan-svg { display: block; width: 100%; height: auto; margin: 6px 0; }

.scan-cell { fill: none; stroke: rgba(255,255,255,.15); stroke-width: 1.5; }
.scan-mark {
  fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round;
  transform-box: fill-box; transform-origin: center;
  opacity: 0;
  animation: markPop 4.5s ease-out infinite;
}
.scan-mark.ok { stroke: var(--yellow); }
.scan-mark.flag { stroke: rgba(255,255,255,.4); }
.scan-mark.r2 { animation-delay: .95s; }
.scan-mark.r3 { animation-delay: 1.9s; }
.scan-sweep { animation: scanSweep 4.5s linear infinite; }
.scan-bar { fill: var(--yellow); }

@keyframes scanSweep {
  from { transform: translateY(-4px); }
  to { transform: translateY(214px); }
}
@keyframes markPop {
  0% { opacity: 0; transform: scale(.4); }
  7% { opacity: 1; transform: scale(1); }
  84% { opacity: 1; transform: scale(1); }
  94%, 100% { opacity: 0; transform: scale(.92); }
}

/* ---- what's included ---- */
.check-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 48px; }
.check-item {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px;
  padding: 17px 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.check-item .icon { width: 20px; height: 20px; margin-top: 3px; color: var(--yellow); }
.check-item h3 { font-size: 15px; letter-spacing: .02em; margin-bottom: 5px; }
.check-item p { color: rgba(255,255,255,.66); font-weight: 500; font-size: 14px; line-height: 1.5; }

/* ---- where we inspect ---- */
.where-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.where-card {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.09);
  border-left: 3px solid var(--yellow);
  padding: 28px 24px;
  transition: background .35s, transform .35s var(--ease);
}
.where-card:hover { background: rgba(255,255,255,.07); transform: translateY(-5px); }
.where-card .icon { width: 36px; height: 36px; margin-bottom: 16px; }
.where-card h3 { font-size: 16px; margin-bottom: 9px; }
.where-card p { color: rgba(255,255,255,.68); font-weight: 500; font-size: 14px; line-height: 1.5; }

/* ---- who it's for ---- */
.who-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .82fr); gap: 56px; align-items: start; }
.who-chips { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.who-chip {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 20px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.13);
  clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 100%, 0 100%);
  color: var(--white); text-decoration: none;
  font-weight: 700; text-transform: uppercase; letter-spacing: .07em; font-size: 12px;
  transition: background .3s var(--ease), color .3s, border-color .3s;
}
.who-chip .icon { width: 18px; height: 18px; }
.who-chip:hover { background: var(--yellow); color: var(--black); border-color: var(--yellow); }
/* clipped, so the global outline would be clipped away with it */
.who-chip:focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--yellow); }

.trigger-list { list-style: none; }
.trigger-list li {
  position: relative; padding: 13px 0 13px 28px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  font-weight: 500; color: rgba(255,255,255,.75);
}
.trigger-list li::before {
  content: ""; position: absolute; left: 2px; top: 50%;
  width: 13px; height: 3px; background: var(--yellow);
  transform: translateY(-50%) skewX(calc(-1 * var(--cut)));
}

/* ---- proof strip ---- */
.trust-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.trust-item {
  display: flex; align-items: center; gap: 18px;
  padding: 26px 28px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.09);
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%);
}
.trust-item .icon { width: 34px; height: 34px; flex: none; }
.trust-item strong { display: block; font-weight: 800; text-transform: uppercase; font-size: 15px; letter-spacing: .03em; margin-bottom: 4px; }
.trust-item span { display: block; color: rgba(255,255,255,.64); font-weight: 500; font-size: 13.5px; line-height: 1.45; }
.trust-item b { color: var(--yellow); }

/* ---- related services: four across rather than the hub's three ---- */
.svc-grid-four { grid-template-columns: repeat(4, 1fr); }
.svc-grid-four > * { grid-column: span 1; }
.svc-grid-three { grid-template-columns: repeat(3, 1fr); }
.svc-grid-three > * { grid-column: span 1; }
.where-grid-three { grid-template-columns: repeat(3, 1fr); }
.trust-strip-four { grid-template-columns: repeat(4, 1fr); }

.faq-body a { color: var(--yellow); text-decoration: underline; text-underline-offset: 3px; }
.cta-band .cta-line { margin-top: 26px; color: rgba(255,255,255,.66); font-weight: 500; }
.cta-band .cta-line a { color: var(--yellow); text-decoration: none; }
.cta-band .cta-line a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---- containment: the firewall panel. Same panel chrome as the scan board so
        service pages read as one system, different diagram inside. ---- */
.guard-svg { display: block; width: 100%; height: auto; margin: 6px 0; }
.guard-lane { stroke: rgba(255,255,255,.16); stroke-width: 1.5; stroke-dasharray: 4 7; fill: none; }
.guard-bar { fill: var(--yellow); }
.guard-glow { animation: guardPulse 2.6s ease-in-out infinite; }
.guard-label {
  font-family: "Roboto Condensed", "Arial Narrow", sans-serif;
  font-weight: 700; font-size: 9px; letter-spacing: .16em;
  fill: rgba(255,255,255,.45);
}
.chip-box { fill: rgba(255,255,255,.05); stroke-width: 1.4; }
.chip-mark { fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.chip.bad .chip-box { stroke: rgba(255,255,255,.3); }
.chip.bad .chip-mark { stroke: rgba(255,255,255,.5); }
.chip.good .chip-box { stroke: rgba(254,194,2,.55); }
.chip.good .chip-mark { stroke: var(--yellow); }
/* suspect stock never gets past the bar; certified product keeps moving */
.chip.bad { animation: guardBlock 4.2s ease-in-out infinite; }
.chip.good { animation: guardPass 4.2s linear infinite; }
.chip.d2 { animation-delay: 1.4s; }
.chip.d3 { animation-delay: 2.8s; }

@keyframes guardBlock {
  0% { transform: translateX(-34px); opacity: 0; }
  14% { opacity: 1; }
  56% { transform: translateX(112px); }
  64% { transform: translateX(102px); }
  86% { transform: translateX(102px); opacity: 1; }
  100% { transform: translateX(102px); opacity: 0; }
}
@keyframes guardPass {
  0% { transform: translateX(0); opacity: 0; }
  16% { opacity: 1; }
  84% { opacity: 1; }
  100% { transform: translateX(126px); opacity: 0; }
}
@keyframes guardPulse {
  0%, 100% { opacity: .3; }
  50% { opacity: .7; }
}

/* ==========================================================
   TECHNICAL PLATES
   Drawn artwork instead of photography: the brand guide rules out polished
   corporate stock, and a shop drawing says more about inspection work than a
   generic factory photo would. Pure SVG, so it carries no licensing and
   scales to any width.
   ========================================================== */
.figure-band { padding: 108px 0 118px; }
.figure-wrap {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .46fr);
  gap: 56px; align-items: center;
}
.figure-plate {
  background: var(--white);
  border: 1px solid rgba(5,5,5,.14);
  clip-path: polygon(0 0, calc(100% - var(--notch)) 0, 100% var(--notch), 100% 100%, 0 100%);
  padding: 24px 26px;
  color: var(--black);
}
.figure-plate svg { display: block; width: 100%; height: auto; }
/* Second band on a page mirrors the first — copy left, photo right — so two
   bands do not read as the same module twice. */
.figure-band.flip .figure-wrap { grid-template-columns: minmax(0, .46fr) minmax(0, 1fr); }
.figure-band.flip .photo-figure { order: 2; }
.figure-band.flip .figure-cap { order: 1; }
.figure-band.on-dark .figure-plate {
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.1);
  color: var(--white);
}
.figure-cap h2 { font-size: clamp(26px, 3vw, 42px); margin-bottom: 20px; }
.figure-cap p { color: rgba(255,255,255,.72); font-weight: 500; margin-bottom: 16px; }
.panel-light .figure-cap p { color: rgba(5,5,5,.72); }
.figure-note {
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: 8px;
  font-weight: 700; text-transform: uppercase; letter-spacing: .12em; font-size: 11px;
  color: rgba(255,255,255,.5);
}
.panel-light .figure-note { color: #525252; }
.figure-note::before {
  content: ""; width: 18px; height: 3px; background: var(--yellow);
  transform: skewX(calc(-1 * var(--cut)));
}

/* ---- hero background photography ----
   Legibility is guaranteed by construction, not by luck with a given photo.
   The image is knocked back to half brightness AND sits under a scrim that is
   ~92% opaque across the copy column, so even a pure-white photo would leave
   the headline near 14:1 and the body copy above 8:1. The scrim thins toward
   the right so the panel side still reads as a photograph.

   --hero-dim lets a page lift a flat or mid-tone shot that would otherwise go
   to mud. It is safe to raise: at the copy column the scrim alone is ~94%
   opaque, so even a pure-white photo at --hero-dim: 1 leaves white headline
   type near 9.5:1. Measure after changing it; do not go above 1. */
.page-hero.has-photo { background: var(--black); }
/* Over a photograph the panel needs a real backdrop of its own — at 3.5%
   white the plant texture reads straight through its labels. */
.page-hero.has-photo .scan-panel {
  background: rgba(5,5,5,.62);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.hero-photo {
  position: absolute; inset: 0; z-index: 0;
  overflow: hidden; isolation: isolate;
}
.hero-photo img {
  width: 100%; height: 100%; object-fit: cover;
  /* each page frames its own shot: set --hero-pos on the section */
  object-position: var(--hero-pos, 50% 50%);
  filter: grayscale(1) contrast(1.06) brightness(var(--hero-dim, .5));
}
.hero-photo::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: var(--yellow); mix-blend-mode: color; opacity: .3;
}
.hero-photo::after {
  content: ""; position: absolute; inset: 0; z-index: 2;
  background:
    linear-gradient(100deg, rgba(5,5,5,.97) 0%, rgba(5,5,5,.94) 30%, rgba(5,5,5,.72) 54%, rgba(5,5,5,.5) 78%, rgba(5,5,5,.42) 100%),
    linear-gradient(180deg, rgba(5,5,5,.55), transparent 26%, transparent 68%, rgba(5,5,5,.72));
}

/* ---- photography ----
   Plant photography is shot under bright white light and would sit on a
   #050505 page like a sticker. Desaturating and re-tinting toward PLI Yellow
   makes it part of the palette. isolation:isolate keeps the blend from
   reaching the page behind it. */
/* In-page photographs keep their original colour — no desaturation and no
   duotone. Only the caption gradient below remains, and that is there to keep
   white caption text legible over whatever the lower edge of the photo is
   doing, not to restyle the image. */
.photo-figure {
  position: relative;
  overflow: hidden;
  background: var(--charcoal);
  border-top: 3px solid var(--yellow);
  clip-path: polygon(0 0, calc(100% - var(--notch)) 0, 100% var(--notch), 100% 100%, 0 100%);
}
.photo-figure img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 3 / 2; object-fit: cover;
  position: relative; z-index: 0;
}
.photo-figure::before {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(180deg, transparent 46%, rgba(5,5,5,.62));
}
.photo-cap {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  display: flex; align-items: center; gap: 11px;
  padding: 16px 22px;
  font-weight: 700; text-transform: uppercase;
  font-size: 11px; letter-spacing: .14em;
  color: rgba(255,255,255,.82);
}
.photo-cap::before {
  content: ""; flex: none; width: 18px; height: 3px; background: var(--yellow);
  transform: skewX(calc(-1 * var(--cut)));
}

/* plate linework */
.pl-part { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }
.pl-hole { fill: none; stroke: currentColor; stroke-width: 1.8; }
.pl-dim { fill: none; stroke: currentColor; stroke-width: 1.1; opacity: .55; }
.pl-thin { fill: none; stroke: currentColor; stroke-width: 1; opacity: .3; }
.pl-y { fill: none; stroke: var(--yellow); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.pl-yf { fill: var(--yellow); }
.pl-fill { fill: currentColor; opacity: .05; }
.pl-txt {
  font-family: "Roboto Condensed", "Arial Narrow", sans-serif;
  font-weight: 700; font-size: 12px; letter-spacing: .07em;
  fill: currentColor;
}
.pl-txt-sm { font-size: 10px; letter-spacing: .15em; opacity: .55; }
.pl-txt-y { fill: #B98A00; }
.figure-band.on-dark .pl-txt-y { fill: var(--yellow); }

/* ---- sorting: the split panel. Third in the family — inspection scans a lot,
        containment holds a line, sorting divides one stream into two. ---- */
.sort-svg { display: block; width: 100%; height: auto; margin: 6px 0; }
.sort-node { fill: var(--yellow); }
.sort-svg .chip.up { animation: sortUp 4.4s ease-in-out infinite; }
.sort-svg .chip.down { animation: sortDown 4.4s ease-in-out infinite; }

@keyframes sortUp {
  0% { transform: translate(0, 0); opacity: 0; }
  10% { opacity: 1; }
  42% { transform: translate(130px, 0); }
  62% { transform: translate(182px, -37px); }
  90% { transform: translate(276px, -37px); opacity: 1; }
  100% { transform: translate(292px, -37px); opacity: 0; }
}
@keyframes sortDown {
  0% { transform: translate(0, 0); opacity: 0; }
  10% { opacity: 1; }
  42% { transform: translate(130px, 0); }
  62% { transform: translate(182px, 41px); }
  90% { transform: translate(276px, 41px); opacity: 1; }
  100% { transform: translate(292px, 41px); opacity: 0; }
}

/* ---- rework: the recovery panel. A flagged part enters the station and
        leaves it certified — the page's whole argument in one loop. ---- */
.fix-svg { display: block; width: 100%; height: auto; margin: 6px 0; }
.fix-station { fill: none; stroke: var(--yellow); stroke-width: 2; }
.fix-glow { fill: var(--yellow); animation: fixFlash 4.4s ease-in-out infinite; }
.fix-chip { animation: fixTravel 4.4s linear infinite; }
.fix-chip .chip-box { stroke: rgba(255,255,255,.34); }
.fix-chip .mark-was { stroke: rgba(255,255,255,.5); animation: fixWas 4.4s linear infinite; }
.fix-chip .mark-now { stroke: var(--yellow); animation: fixNow 4.4s linear infinite; }
.fix-chip.d2, .fix-chip.d2 .mark-was, .fix-chip.d2 .mark-now { animation-delay: 2.2s; }

@keyframes fixTravel {
  0% { transform: translateX(0); opacity: 0; }
  8% { opacity: 1; }
  92% { opacity: 1; }
  100% { transform: translateX(250px); opacity: 0; }
}
@keyframes fixWas { 0%, 42% { opacity: 1; } 52%, 100% { opacity: 0; } }
@keyframes fixNow { 0%, 48% { opacity: 0; } 58%, 100% { opacity: 1; } }
@keyframes fixFlash { 0%, 38% { opacity: .18; } 50% { opacity: .6; } 62%, 100% { opacity: .18; } }

/* ---- quality representation: the link panel. A PLI rep sits at the customer
        site and status flows back to you — the service in one loop. ---- */
.rep-svg { display: block; width: 100%; height: auto; margin: 6px 0; }
.rep-site { fill: rgba(255,255,255,.04); stroke: rgba(255,255,255,.22); stroke-width: 1.5; }
.rep-mark { fill: none; stroke: var(--yellow); stroke-width: 2; }
.rep-halo { fill: var(--yellow); animation: repPulse 2.8s ease-in-out infinite; }
.rep-dot { fill: var(--yellow); animation: repFlow 3.6s linear infinite; }
.rep-dot.d2 { animation-delay: 1.2s; }
.rep-dot.d3 { animation-delay: 2.4s; }

@keyframes repPulse { 0%, 100% { opacity: .16; } 50% { opacity: .42; } }
@keyframes repFlow {
  0% { transform: translateX(0); opacity: 0; }
  14% { opacity: 1; }
  86% { opacity: 1; }
  100% { transform: translateX(-96px); opacity: 0; }
}

/* ---- assembly: the build panel. Loose components feed three lanes into one
        cell and leave as a single checked unit — the service in one loop. ---- */
.asm-svg { display: block; width: 100%; height: auto; margin: 6px 0; }
.asm-cell { fill: none; stroke: var(--yellow); stroke-width: 2; }
.asm-glow { fill: var(--yellow); animation: asmFlash 4.4s ease-in-out infinite; }
.asm-part { animation: asmFeed 4.4s linear infinite; }
.asm-part .chip-box { stroke: rgba(255,255,255,.34); }
.asm-part.p2 { animation-delay: .16s; }
.asm-part.p3 { animation-delay: .32s; }
.asm-out { animation: asmBuilt 4.4s linear infinite; }
.asm-out .chip-box { stroke: rgba(254,194,2,.6); fill: rgba(254,194,2,.09); }
.asm-out .chip-mark { stroke: var(--yellow); }

@keyframes asmFeed {
  0% { transform: translateX(0); opacity: 0; }
  8% { opacity: 1; }
  38% { opacity: 1; }
  46%, 100% { transform: translateX(112px); opacity: 0; }
}
@keyframes asmFlash { 0%, 42% { opacity: .1; } 52% { opacity: .5; } 64%, 100% { opacity: .1; } }

/* ---- packaging: the pack panel. A carton runs the line, takes a label, and
        leaves sealed and counted — the service in one loop. ---- */
.pak-svg { display: block; width: 100%; height: auto; margin: 6px 0; }
.pak-head { fill: none; stroke: var(--yellow); stroke-width: 2; }
.pak-glow { fill: var(--yellow); animation: pakFlash 4.6s ease-in-out infinite; }
.pak-box { animation: pakRun 4.6s linear infinite; }
.pak-box .chip-box { stroke: rgba(255,255,255,.34); }
.pak-box .pak-label { fill: var(--yellow); animation: pakLabel 4.6s linear infinite; }
.pak-box .chip-mark { stroke: var(--yellow); animation: pakSealed 4.6s linear infinite; }
.pak-box.d2, .pak-box.d2 .pak-label, .pak-box.d2 .chip-mark { animation-delay: 2.3s; }

@keyframes pakRun {
  0% { transform: translateX(0); opacity: 0; }
  8% { opacity: 1; }
  92% { opacity: 1; }
  100% { transform: translateX(252px); opacity: 0; }
}
/* the box sits under the applicator between 50% and 67% of its run, so the
   label lands at 56% and the seal check follows once it is clear */
@keyframes pakLabel { 0%, 52% { opacity: 0; } 60%, 100% { opacity: 1; } }
@keyframes pakSealed { 0%, 72% { opacity: 0; } 80%, 100% { opacity: 1; } }
@keyframes pakFlash { 0%, 46% { opacity: .1; } 55% { opacity: .48; } 66%, 100% { opacity: .1; } }

/* ---- kitting: the kit panel. A tray runs past three component bins, fills a
        slot at each, and leaves counted — the service in one loop. ---- */
.kit-svg { display: block; width: 100%; height: auto; margin: 6px 0; }
.kit-bin { fill: rgba(255,255,255,.05); stroke: rgba(255,255,255,.28); stroke-width: 1.4; }
.kit-tray { fill: rgba(255,255,255,.04); stroke: rgba(254,194,2,.55); stroke-width: 1.8; }
.kit-run { animation: kitRun 5s linear infinite; }
.kit-slot { fill: var(--yellow); opacity: 0; animation: kitFill 5s linear infinite; }
.kit-slot.s2 { animation-delay: .5s; }
.kit-slot.s3 { animation-delay: 1s; }
.kit-check { fill: none; stroke: var(--yellow); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; opacity: 0; animation: kitDone 5s linear infinite; }

@keyframes kitRun {
  0% { transform: translateX(0); opacity: 0; }
  6% { opacity: 1; }
  92% { opacity: 1; }
  100% { transform: translateX(216px); opacity: 0; }
}
/* s1 lands at 30%, s2 at 40%, s3 at 50% via the delays above */
@keyframes kitFill { 0%, 22% { opacity: 0; } 30%, 100% { opacity: 1; } }
@keyframes kitDone { 0%, 58% { opacity: 0; } 66%, 100% { opacity: 1; } }

/* ---- industrial staffing: the roster panel. Empty shift slots fill one by
        one until the floor is covered — the service in one loop. ---- */
.stf-svg { display: block; width: 100%; height: auto; margin: 6px 0; }
.stf-person circle, .stf-person path { fill: none; stroke: rgba(255,255,255,.26); stroke-width: 1.6; }
.stf-on { opacity: 0; animation: stfFill 5.6s linear infinite; }
.stf-on circle { fill: var(--yellow); stroke: var(--yellow); }
.stf-on path { stroke: var(--yellow); stroke-width: 1.8; }
.stf-on.n2 { animation-delay: .3s; }
.stf-on.n3 { animation-delay: .6s; }
.stf-on.n4 { animation-delay: .9s; }
.stf-on.n5 { animation-delay: 1.2s; }
.stf-on.n6 { animation-delay: 1.5s; }
.stf-on.n7 { animation-delay: 1.8s; }
.stf-on.n8 { animation-delay: 2.1s; }

/* the last slot carries a 2.1s delay, so every slot is lit from ~48% to 86%
   before the roster clears and the loop restarts */
@keyframes stfFill { 0%, 4% { opacity: 0; } 10%, 86% { opacity: 1; } 94%, 100% { opacity: 0; } }

/* .step-num (the homepage process badge, above) is reused as-is inside
   .where-card on the staffing page — it wants a bare number, not a label. */
.where-card .step-num { margin-bottom: 18px; }

/* ---- warehouse support: the flow panel. Receiving keeps arriving while
        overflow holds the surge and shipping keeps going out. ---- */
.whs-svg { display: block; width: 100%; height: auto; margin: 6px 0; }
.whs-hold { fill: none; stroke: var(--yellow); stroke-width: 2; }
.whs-glow { fill: var(--yellow); animation: whsPulse 5.2s ease-in-out infinite; }
.whs-box .chip-box { stroke: rgba(255,255,255,.32); }
.whs-in { animation: whsFlow 5.2s linear infinite; }
.whs-in.d2 { animation-delay: 2.6s; }
/* outbound runs a half-cycle behind inbound, so the bay is never empty */
.whs-out { animation: whsFlow 5.2s linear infinite; animation-delay: 1.3s; }
.whs-out.d2 { animation-delay: 3.9s; }

@keyframes whsFlow {
  0% { transform: translateX(0); opacity: 0; }
  8% { opacity: 1; }
  92% { opacity: 1; }
  100% { transform: translateX(268px); opacity: 0; }
}
@keyframes whsPulse { 0%, 100% { opacity: .1; } 50% { opacity: .38; } }
@keyframes asmBuilt {
  0%, 50% { transform: translateX(0); opacity: 0; }
  58% { transform: translateX(10px); opacity: 1; }
  94% { transform: translateX(96px); opacity: 1; }
  100% { transform: translateX(104px); opacity: 0; }
}

/* ---- reverse logistics: the recovery loop. Returned product runs the wrong
        way down the top lane into recovery, then leaves again on the bottom
        lane carrying a tick. Two lanes travelling in opposite directions is
        the whole idea of the service, so they must stay mirrored. ---- */
.rev-svg { display: block; width: 100%; height: auto; margin: 6px 0; }
.rev-hold { fill: none; stroke: var(--yellow); stroke-width: 2; }
.rev-glow { fill: var(--yellow); animation: revPulse 5.4s ease-in-out infinite; }
.rev-box .chip-box { stroke: rgba(255,255,255,.32); }
.rev-tick { stroke: var(--yellow); }
.rev-back { animation: revBack 5.4s linear infinite; }
.rev-back.d2 { animation-delay: 2.7s; }
/* outbound runs a half-cycle behind inbound, so recovery is never idle */
.rev-out { animation: revOut 5.4s linear infinite; animation-delay: 1.35s; }
.rev-out.d2 { animation-delay: 4.05s; }

@keyframes revBack {
  0% { transform: translateX(0); opacity: 0; }
  8% { opacity: 1; }
  92% { opacity: 1; }
  100% { transform: translateX(-268px); opacity: 0; }
}
@keyframes revOut {
  0% { transform: translateX(0); opacity: 0; }
  8% { opacity: 1; }
  92% { opacity: 1; }
  100% { transform: translateX(268px); opacity: 0; }
}
@keyframes revPulse { 0%, 100% { opacity: .1; } 50% { opacity: .38; } }

/* ==========================================================
   LIGHT PANELS ON SERVICE PAGES
   The site already alternates into light bands (.solutions is white,
   .industries is --light). This is the same device made reusable, so a
   service page can break to a spec-sheet white without leaving the system.
   ========================================================== */
.panel-light {
  position: relative; z-index: 2;
  background: var(--light);
  color: var(--black);
}
/* Yellow is ~1.5:1 here, so on light bands it becomes a highlight under
   black type rather than the ink itself. */
.panel-light .yellow {
  color: var(--black);
  background-image: linear-gradient(var(--yellow), var(--yellow));
  background-repeat: no-repeat;
  background-size: 100% .17em;
  background-position: 0 88%;
}
/* #767676 is only 4.1:1 on --light; this sits near 7:1 */
.panel-light .kicker { color: #525252; }
.panel-light .kicker::before { background: var(--black); }
.panel-light .section-intro,
.panel-light .prose p { color: rgba(5,5,5,.72); }

.panel-light .check-item { border-bottom-color: rgba(5,5,5,.13); }
/* black line icons are the guide's own default on light ground, and a yellow
   check would sit at 1.7:1 here */
.panel-light .check-item .icon { color: var(--black); }
.panel-light .check-item p { color: rgba(5,5,5,.68); }

.panel-light .trust-item {
  background: var(--white);
  border-color: rgba(5,5,5,.1);
}
.panel-light .trust-item span { color: rgba(5,5,5,.66); }
.panel-light .trust-item b { color: var(--black); }

.panel-light .where-card {
  background: var(--white);
  border-color: rgba(5,5,5,.1);
  border-left-color: var(--black);
}
.panel-light .where-card:hover { background: var(--white); border-left-color: var(--yellow); }
.panel-light .where-card p { color: rgba(5,5,5,.66); }

.panel-light .trigger-list li { border-bottom-color: rgba(5,5,5,.12); color: rgba(5,5,5,.75); }
.panel-light .trigger-list li::before { background: var(--black); }

.panel-light .who-chip {
  background: var(--white);
  border-color: rgba(5,5,5,.14);
  color: var(--black);
}
.panel-light .who-chip:hover { background: var(--yellow); border-color: var(--yellow); }
.panel-light .who-chip:focus-visible { box-shadow: inset 0 0 0 3px var(--black); }

.panel-light .group-cta { color: var(--black); border-bottom-color: rgba(5,5,5,.28); }
.panel-light .group-cta:hover { border-bottom-color: var(--black); }

/* .btn-ghost is white text on a white hairline — built for the dark panels and
   effectively invisible on --light. Inverting it keeps the same outline-button
   shape at full contrast; --btn-fill drives the hover wipe, so it flips too. */
.panel-light .btn-ghost {
  --btn-fill: var(--black); color: var(--black);
  box-shadow: inset 0 0 0 1.5px rgba(5,5,5,.35);
}
.panel-light .btn-ghost:hover { color: var(--white); box-shadow: inset 0 0 0 1.5px var(--black); }

/* The solution map is the one industry module that lives on a light band. */
.panel-light .sol-row { background: var(--white); border-color: rgba(5,5,5,.1); }
.panel-light .sol-row .icon { color: var(--black); }
.panel-light .sol-desc { color: rgba(5,5,5,.66); }
.panel-light .sol-arrow { color: rgba(5,5,5,.35); }
.panel-light .sol-row:hover { border-color: rgba(5,5,5,.2); }
.panel-light .sol-row:hover .sol-arrow { color: var(--black); }
/* Yellow on white is ~1.5:1, so the hover rail is black here and the yellow
   is kept for the icon wash only, where it is decoration rather than meaning. */
.panel-light .sol-row::before { background: var(--black); }

/* ==========================================================
   INDUSTRY PAGE MODULES  (body.page-ind)
   Industry pages answer a different question than service pages — "can you
   handle my sector's problems" rather than "what is this service" — so they
   run their own set of blocks instead of reusing the service modules.
   Additive only.
   ========================================================== */

/* ---- hero stat rail. Industry heroes drop the service pages' copy + diagram
        split for a single full-width column with the numbers underneath: the
        promise on these pages is response time, so it leads. ---- */
.ind-hero .page-hero-inner { grid-template-columns: minmax(0, 1fr); gap: 46px; }
/* No measure on the copy block itself — .page-lede and .page-intro already
   carry their own, and capping the shared parent squeezes the h1 into a third
   line, which pushes the stat rail and the primary CTA below the fold. */
.ind-stats {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0; margin: 0;
  border-top: 1px solid rgba(255,255,255,.14);
  animation: heroRise .7s var(--ease) .3s both;
}
.ind-stat { padding: 26px 30px 0 0; }
.ind-stat + .ind-stat { padding-left: 34px; border-left: 1px solid rgba(255,255,255,.14); }
.ind-stat dt {
  font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
  color: rgba(255,255,255,.62); margin-bottom: 10px;
}
.ind-stat dd {
  margin: 0 0 8px;
  font-weight: 900; line-height: 1;
  font-size: clamp(30px, 3.4vw, 44px);
  color: var(--white);
  /* Values are display type, so they set uppercase regardless of how the page
     types them. Numerals and "ISO" are unaffected; a worded value like
     "Same day" would otherwise sit in title case beside the uppercase unit. */
  text-transform: uppercase;
}
.ind-stat dd b { font-weight: 900; color: var(--yellow); }
.ind-stat dd i {
  font-style: normal; font-weight: 700;
  font-size: .42em; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255,255,255,.7);
}
.ind-stat p { font-size: 13.5px; font-weight: 500; color: rgba(255,255,255,.6); max-width: 30ch; }

/* ---- numbered problem cards. The service pages list what a service includes;
        an industry page opens on what is going wrong, so these lead with the
        index number and read as a numbered brief. ---- */
.prob-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px;
  background: rgba(255,255,255,.09);
  border: 1px solid rgba(255,255,255,.09);
}
.prob-card {
  background: var(--black);
  padding: 34px 30px 32px;
  transition: background .3s var(--ease);
}
.prob-card:hover { background: #0d0d0d; }
.prob-num {
  display: block;
  font-size: 13px; font-weight: 900; letter-spacing: .16em;
  color: var(--yellow); margin-bottom: 20px;
}
.prob-card h3 {
  font-size: 17px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .01em; line-height: 1.22; margin-bottom: 10px;
}
.prob-card p { font-size: 14.5px; font-weight: 500; color: rgba(255,255,255,.66); line-height: 1.55; }

/* ---- solution map. The highest-value module on an industry page: it routes
        sector traffic into the service pages. Rows rather than cards so seven
        of them scan in one pass. ---- */
.sol-map { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.sol-row {
  position: relative;
  display: grid; grid-template-columns: 26px minmax(0, 1fr) auto;
  align-items: center; gap: 4px 16px;
  padding: 20px 22px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.1);
  text-decoration: none; color: inherit;
  transition: border-color .3s var(--ease), background .3s var(--ease), transform .3s var(--ease);
}
/* the rail is the hover affordance; it grows from the left edge */
.sol-row::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--yellow);
  transform: scaleY(0); transform-origin: top;
  transition: transform .3s var(--ease);
}
.sol-row:hover, .sol-row:focus-visible { border-color: rgba(255,255,255,.24); transform: translateX(3px); }
.sol-row:hover::before, .sol-row:focus-visible::before { transform: scaleY(1); }
.sol-row .icon { width: 26px; height: 26px; grid-row: span 2; color: var(--yellow); }
.sol-name { font-size: 16px; font-weight: 800; text-transform: uppercase; letter-spacing: .02em; }
.sol-desc { grid-column: 2; font-size: 14px; font-weight: 500; color: rgba(255,255,255,.62); line-height: 1.5; }
.sol-arrow {
  grid-row: span 2; display: inline-flex; color: rgba(255,255,255,.3);
  transition: color .3s var(--ease), transform .3s var(--ease);
}
.sol-row:hover .sol-arrow { color: var(--yellow); transform: translateX(4px); }

/* ---- where-we-work list, inside the photo band rather than as its own
        section: the band already says "on site", so the list belongs to it. ---- */
.loc-list { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 0; }
.loc-list li {
  padding: 11px 0 11px 26px; position: relative;
  font-size: 15px; font-weight: 600;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.loc-list li::before {
  content: ""; position: absolute; left: 0; top: 50%; width: 12px; height: 2px;
  background: var(--yellow); transform: translateY(-50%);
}

/* ---- spec plates. Automotive buyers scan for the programme codes before they
        read anything else, so the code is the object and the prose supports
        it. Reused by any industry with named customer requirements. ---- */
.plate-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.plate {
  padding: 28px 26px 30px;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.12);
  border-top: 3px solid var(--yellow);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%);
}
/* Scoped to .plate for weight, not reach: the code is a <p>, so the
   `.plate p` description rule below outranks a bare `.plate-code` and the
   codes render as small grey body copy instead of the yellow they lead with. */
.plate .plate-code {
  font-size: 26px; font-weight: 900; letter-spacing: .04em;
  color: var(--yellow); line-height: 1; margin-bottom: 16px;
}
.plate h3 {
  font-size: 15px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .02em; line-height: 1.25; margin-bottom: 10px;
}
.plate p { font-size: 14px; font-weight: 500; color: rgba(255,255,255,.64); line-height: 1.55; }

/* ---- reason rows. Same content shape as the service pages' why-tiles but
        laid on their side, which keeps this section short on a page that
        already carries a lot of stacked blocks. ---- */
.reason-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 44px; }
.reason {
  display: flex; align-items: flex-start; gap: 18px;
  padding: 22px 0;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.reason .icon { width: 30px; height: 30px; flex-shrink: 0; color: var(--yellow); }
.reason h3 {
  font-size: 16px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .02em; margin-bottom: 6px;
}
.reason p { font-size: 14.5px; font-weight: 500; color: rgba(255,255,255,.64); line-height: 1.55; }

/* ---- industries hub: the routing grid, and the page's whole reason to exist.
        Each card previews the page it leads to by carrying that page's own hero
        image, so the hub and its children read as one set. Motion is 2D only —
        image scale, rail wipe, arrow slide — no tilt and no rotation. ---- */
.ind-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.ind-card {
  position: relative; display: block; overflow: hidden;
  text-decoration: none; color: inherit;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.1);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--notch)), calc(100% - var(--notch)) 100%, 0 100%);
  transition: border-color .35s var(--ease), background .35s var(--ease), transform .35s var(--ease);
}
.ind-card:hover, .ind-card:focus-visible {
  border-color: rgba(255,255,255,.22);
  background: rgba(255,255,255,.06);
  transform: translateY(-4px);
}
/* the rail wipes down the left edge on hover, matching .sol-row */
.ind-card::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; z-index: 4;
  background: var(--yellow);
  transform: scaleY(0); transform-origin: top;
  transition: transform .4s var(--ease);
}
.ind-card:hover::before, .ind-card:focus-visible::before { transform: scaleY(1); }

.ind-card-media { display: block; position: relative; aspect-ratio: 16 / 9; overflow: hidden; isolation: isolate; }
.ind-card-media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  /* the same desaturate-and-re-tint the heroes use, so hub art sits in the
     palette rather than dropping six full-colour photos onto a black page */
  filter: grayscale(1) contrast(1.05) brightness(.58);
  transform: scale(1.02);
  transition: transform .6s var(--ease), filter .5s var(--ease);
}
.ind-card:hover .ind-card-media img,
.ind-card:focus-visible .ind-card-media img {
  transform: scale(1.07);
  filter: grayscale(1) contrast(1.05) brightness(.78);
}
.ind-card-media::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: var(--yellow); mix-blend-mode: color; opacity: .28;
}
.ind-card-media::after {
  content: ""; position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(180deg, rgba(5,5,5,.12) 40%, rgba(5,5,5,.88));
}
.ind-card-num {
  position: absolute; left: 26px; bottom: 14px; z-index: 3;
  font-size: 12px; font-weight: 900; letter-spacing: .18em; color: var(--yellow);
}

/* display is set explicitly rather than left to the element: these wrappers
   were spans, which stay inline, and inline padding never reaches block
   children — the heading and services line sat 1px off the card edge. */
.ind-card-body { display: block; padding: 26px 32px 30px; }
/* arrow shares the heading row rather than floating in a corner, so it can
   never collide with the services line below */
.ind-card-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 12px; }
.ind-card-head h3 { font-size: clamp(20px, 2vw, 26px); }
.ind-card-go { display: inline-flex; flex-shrink: 0; color: rgba(255,255,255,.32); transition: color .3s var(--ease), transform .3s var(--ease); }
.ind-card:hover .ind-card-go, .ind-card:focus-visible .ind-card-go { color: var(--yellow); transform: translateX(5px); }
.ind-card-body > p { font-size: 15px; font-weight: 500; color: rgba(255,255,255,.68); line-height: 1.55; margin-bottom: 20px; }
.ind-card-svc {
  display: block; padding-top: 16px;
  /* the clip-path bites a --notch triangle out of the bottom-right corner, so
     the last line of this list is held clear of it */
  padding-right: var(--notch);
  border-top: 1px solid rgba(255,255,255,.1);
  font-size: 11.5px; font-weight: 700; letter-spacing: .12em; line-height: 1.75;
  text-transform: uppercase; color: rgba(255,255,255,.5);
}

/* ---- natural-colour hero. The default .has-photo treatment desaturates the
        photograph and re-tints it toward PLI Yellow; this variant leaves the
        colour alone. The scrim underneath stays and is pulled slightly darker,
        because a full-colour plant photo is busier behind white type than a
        duotone one — it needs the help more, not less. ---- */
.page-hero.is-natural .hero-photo img { filter: contrast(1.02) brightness(var(--hero-dim, .6)); }
.page-hero.is-natural .hero-photo::before { content: none; }
.page-hero.is-natural .hero-photo::after {
  background:
    linear-gradient(100deg, rgba(5,5,5,.97) 0%, rgba(5,5,5,.95) 32%, rgba(5,5,5,.78) 56%, rgba(5,5,5,.55) 80%, rgba(5,5,5,.45) 100%),
    linear-gradient(180deg, rgba(5,5,5,.6), transparent 26%, transparent 64%, rgba(5,5,5,.8));
}

/* ==========================================================
   LEGAL PAGES  (body.page-legal)
   Long-form reading, not marketing. Set on a light band because a policy is
   read start-to-finish and long body copy on near-black is tiring, with a
   sticky contents rail so a 13-section document stays navigable.
   ========================================================== */
.legal-wrap { display: grid; grid-template-columns: minmax(0, 250px) minmax(0, 1fr); gap: 64px; align-items: start; }

.legal-toc { position: sticky; top: calc(var(--header-h) + 26px); }
.legal-toc p {
  font-size: 11.5px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase;
  color: #525252; padding-bottom: 12px; margin-bottom: 6px;
  border-bottom: 1px solid rgba(5,5,5,.14);
}
.legal-toc ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; }
.legal-toc a {
  display: block; position: relative;
  padding: 8px 0 8px 30px;
  font-size: 13.5px; font-weight: 600; line-height: 1.35;
  color: rgba(5,5,5,.6); text-decoration: none;
  transition: color .25s var(--ease);
}
.legal-toc a::before {
  counter-increment: toc; content: counter(toc, decimal-leading-zero);
  position: absolute; left: 0; top: 8px;
  font-size: 11px; font-weight: 800; letter-spacing: .1em; color: rgba(5,5,5,.32);
  transition: color .25s var(--ease);
}
.legal-toc a:hover { color: var(--black); }
.legal-toc a.is-current { color: var(--black); font-weight: 800; }
.legal-toc a.is-current::before { color: #8a6800; }

/* A document that numbers its own sections (Terms) keeps those numbers, since
   legal sections get cited by number. The rail's counter is turned off there so
   the two numbering schemes do not stack up as "01  1. Use of the Site". */
.legal-toc.is-self-numbered a { padding-left: 0; }
.legal-toc.is-self-numbered a::before { content: none; }

.legal-body { max-width: 74ch; }
.legal-body > p, .legal-body li { font-size: 16px; font-weight: 500; color: rgba(5,5,5,.78); line-height: 1.72; }
.legal-body > p { margin-bottom: 20px; }
.legal-body strong { font-weight: 800; color: var(--black); }
.legal-body h2 {
  font-size: clamp(20px, 2vw, 26px); line-height: 1.15;
  margin: 52px 0 18px; padding-top: 26px;
  border-top: 1px solid rgba(5,5,5,.14);
  scroll-margin-top: calc(var(--header-h) + 26px);
}
.legal-body h2:first-of-type { margin-top: 44px; }
.legal-body ul { list-style: none; margin: 0 0 22px; padding: 0; }
.legal-body li { position: relative; padding: 9px 0 9px 26px; }
.legal-body li::before {
  content: ""; position: absolute; left: 0; top: 19px;
  width: 12px; height: 2px; background: var(--yellow);
}
.legal-body a { color: var(--black); text-decoration: underline; text-underline-offset: 3px; }
.legal-body a:hover { color: #6b5200; }

/* effective date — highlighted because it is the first thing anyone checks
   when they want to know whether a policy is current */
.legal-meta {
  display: inline-flex; align-items: baseline; gap: 10px;
  padding: 11px 18px; margin-top: 6px;
  background: rgba(254,194,2,.14); border-left: 3px solid var(--yellow);
  font-size: 14px; font-weight: 700; color: var(--black);
}
.legal-meta span { font-size: 11.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: #6b5200; }

.legal-contact {
  margin-top: 26px; padding: 28px 30px;
  background: var(--white); border: 1px solid rgba(5,5,5,.12);
  clip-path: polygon(0 0, calc(100% - var(--notch)) 0, 100% var(--notch), 100% 100%, 0 100%);
}
.legal-contact address { font-style: normal; font-size: 16px; font-weight: 600; color: var(--black); line-height: 1.7; }
.legal-contact address a { color: var(--black); }

/* ==========================================================
   CONFIRMATION MODAL
   Shown in place after a successful submit — no reload, no route change, which
   keeps the smooth-scroll feel of the rest of the site. Generic on purpose so
   any future form can reuse it.
   ========================================================== */
.modal {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center;
  padding: 24px;
  opacity: 0; visibility: hidden;
  /* visibility is discrete, so it is held until the fade finishes on close and
     flipped instantly on open — otherwise the panel is still computed hidden
     when focus tries to move into it, and the move silently fails. */
  transition: opacity .28s var(--ease), visibility 0s linear .28s;
}
.modal.is-open { opacity: 1; visibility: visible; transition: opacity .28s var(--ease), visibility 0s; }
.modal-scrim { position: absolute; inset: 0; background: rgba(5,5,5,.82); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.modal-panel {
  position: relative; z-index: 1;
  width: min(600px, 100%); max-height: calc(100vh - 48px); overflow-y: auto;
  padding: 44px 46px 40px;
  background: #0d0d0d;
  border: 1px solid rgba(255,255,255,.14);
  border-top: 4px solid var(--yellow);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--notch)), calc(100% - var(--notch)) 100%, 0 100%);
  transform: translateY(14px) scale(.985);
  transition: transform .32s var(--ease);
}
.modal.is-open .modal-panel { transform: none; }
.modal-close {
  position: absolute; top: 16px; right: 16px;
  width: 42px; height: 42px; display: grid; place-items: center;
  background: none; border: 1px solid rgba(255,255,255,.16); color: rgba(255,255,255,.72);
  cursor: pointer; transition: color .25s, border-color .25s, background .25s;
}
.modal-close:hover, .modal-close:focus-visible { color: var(--black); background: var(--yellow); border-color: var(--yellow); }
.modal-mark {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 11.5px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase;
  color: var(--yellow); margin-bottom: 16px;
}
.modal-panel h2 { font-size: clamp(26px, 3.2vw, 38px); line-height: 1.06; margin-bottom: 16px; }
.modal-panel > p { font-size: 15.5px; font-weight: 500; color: rgba(255,255,255,.74); line-height: 1.62; margin-bottom: 14px; }
.modal-urgent {
  margin-top: 26px; padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,.13);
}
.modal-urgent p { font-size: 15px; font-weight: 600; color: var(--white); margin-bottom: 16px; }
.modal-fine { font-size: 13px; font-weight: 500; color: rgba(255,255,255,.55); margin-top: 14px; }

/* inline error, for a submission the server rejects — the modal is only ever
   for the success case */
.form-error {
  margin-top: 20px;
  background: rgba(229,72,77,.12);
  border-left: 4px solid #e5484d;
  padding: 16px 20px; font-size: 15px; color: #ffc9cb;
}
.form-error a { color: var(--yellow); }

/* ==========================================================
   CONTACT PAGE  (body.page-contact)
   Reuses the homepage form wholesale (.contact-wrap / .contact-form and the
   rest). Only the pieces that page did not need are added here. Additive only.
   ========================================================== */

/* ---- the two fastest routes, sat in the hero. Someone with a line down should
        not have to scroll to find the phone number, so it is the largest thing
        on the page after the h1. ---- */
.reach-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 34px; }
.reach-card {
  display: block; padding: 26px 28px 28px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.14);
  border-left: 3px solid var(--yellow);
  text-decoration: none; color: inherit;
  transition: background .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
.reach-card:hover, .reach-card:focus-visible {
  background: rgba(255,255,255,.09);
  border-color: rgba(255,255,255,.26);
  transform: translateY(-3px);
}
.reach-label {
  display: flex; align-items: center; gap: 9px;
  font-size: 11.5px; font-weight: 800; letter-spacing: .17em; text-transform: uppercase;
  color: rgba(255,255,255,.6); margin-bottom: 12px;
}
.reach-label .icon { width: 17px; height: 17px; color: var(--yellow); }
.reach-value {
  display: block; font-weight: 900; line-height: 1.05;
  font-size: clamp(21px, 2.5vw, 32px);
  color: var(--white); margin-bottom: 8px;
  /* the email is one long unbreakable token and would otherwise set the
     column's min-content width and push the grid past its container */
  overflow-wrap: anywhere;
  transition: color .3s var(--ease);
}
.reach-card:hover .reach-value { color: var(--yellow); }
.reach-note { font-size: 13.5px; font-weight: 500; color: rgba(255,255,255,.62); line-height: 1.5; }

/* ---- form extras the homepage form does not carry ---- */
/* Honeypot. Positioned off-screen rather than display:none — some bots skip
   hidden fields but will fill a positioned one. Kept out of tab order and the
   accessibility tree by the markup. */
.hp-field {
  position: absolute; left: -9999px; width: 1px; height: 1px;
  overflow: hidden; opacity: 0; pointer-events: none;
}
.contact-form .form-consent {
  display: flex; align-items: flex-start; gap: 12px;
  margin: 4px 0 22px;
  font-size: 13.5px; font-weight: 500; color: rgba(255,255,255,.7); line-height: 1.5;
  /* This is a <label>, so it inherits .contact-form label — which is uppercase
     and letter-spaced for two-word field names. A consent sentence set that way
     is close to unreadable, and this one has to actually be read. */
  text-transform: none; letter-spacing: .01em;
}
.contact-form .form-consent input[type="checkbox"] {
  width: 19px; height: 19px; flex: none; margin-top: 1px;
  accent-color: var(--yellow); cursor: pointer;
}
.contact-form .form-consent input.invalid { outline: 2px solid #e5484d; outline-offset: 2px; }
/* The consent sentence is the one place in the form that contains a link, and
   nothing above styles it — it was rendering in the browser default blue
   (#0000EE) on a near-black panel, which is both off-brand and about 2.3:1. */
.contact-form .form-consent a {
  color: var(--yellow);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.contact-form .form-consent a:hover { color: var(--white); }

/* ---- address blocks on the light band ---- */
.addr-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.addr-card {
  padding: 30px 32px 32px;
  background: var(--white);
  border: 1px solid rgba(5,5,5,.12);
  clip-path: polygon(0 0, calc(100% - var(--notch)) 0, 100% var(--notch), 100% 100%, 0 100%);
}
.addr-card.is-hq { box-shadow: inset 4px 0 0 var(--yellow); }
.addr-label {
  font-size: 11.5px; font-weight: 800; letter-spacing: .17em; text-transform: uppercase;
  color: #8a6800; margin-bottom: 14px;
}
.addr-card address { font-style: normal; font-size: 16.5px; font-weight: 600; color: var(--black); line-height: 1.6; }
.addr-card p { font-size: 15px; font-weight: 500; color: rgba(5,5,5,.7); line-height: 1.6; }
.addr-card a { color: var(--black); text-decoration: underline; text-underline-offset: 3px; }

/* ==========================================================
   ABOUT PAGE  (body.page-about)
   The company page. It carries the same hard-edged system as the rest of the
   site but wants a warmer read, so it leans on natural-colour photography, more
   air inside the cards, and a slower reveal. Additive only.
   ========================================================== */

/* ---- an established-since mark. Same shape language as .rr-live but static:
        heritage is not a live status, so it does not pulse. ---- */
.est-mark {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 9px 18px; margin-bottom: 22px;
  border: 1px solid rgba(254,194,2,.4); background: rgba(254,194,2,.08);
  clip-path: polygon(0 0, 100% 0, calc(100% - 11px) 100%, 0 100%);
  font-size: 11.5px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase;
  color: var(--yellow);
}
.est-mark b { font-size: 15px; font-weight: 900; letter-spacing: .1em; }

/* ---- belief cards. The one place on the site where the copy is about the
        company rather than the work, so these get the most air of any card in
        the system and a numeral instead of an icon. ---- */
.val-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.val-card {
  position: relative; overflow: hidden;
  padding: 34px 36px 36px;
  background: var(--white);
  border: 1px solid rgba(5,5,5,.12);
  clip-path: polygon(0 0, calc(100% - var(--notch)) 0, 100% var(--notch), 100% 100%, 0 100%);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.val-card:hover { transform: translateY(-5px); border-color: rgba(5,5,5,.2); box-shadow: 0 18px 40px rgba(5,5,5,.1); }
/* the rule under the numeral grows on hover — the warm equivalent of the yellow
   rail the darker modules use */
.val-num {
  display: block; position: relative;
  font-size: 13px; font-weight: 900; letter-spacing: .2em;
  color: #8a6800; padding-bottom: 14px; margin-bottom: 18px;
}
.val-num::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 34px;
  background: var(--yellow);
  transition: width .45s var(--ease);
}
.val-card:hover .val-num::after { width: 76px; }
.val-card h3 { font-size: clamp(19px, 1.8vw, 23px); line-height: 1.2; margin-bottom: 12px; }
.val-card p { font-size: 15.5px; font-weight: 500; color: rgba(5,5,5,.72); line-height: 1.6; }

/* ==========================================================
   RAPID RESPONSE PAGE  (body.page-rr)
   The urgency page. Its one big idea is elapsed time, so the response track is
   the centrepiece and everything else supports it. Additive only.
   ========================================================== */

/* ---- live badge. The page's promise is that someone picks up, so the hero
        says so with a pulse rather than a claim. ---- */
.rr-live {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 9px 16px; margin-bottom: 22px;
  border: 1px solid rgba(254,194,2,.4); background: rgba(254,194,2,.08);
  clip-path: polygon(0 0, 100% 0, calc(100% - 11px) 100%, 0 100%);
  font-size: 11.5px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase;
  color: var(--yellow);
}

/* ---- the response track. Horizontal on desktop, vertical on phones. JS sets
        --p (0-1); the axis is chosen here so one handler drives both. ---- */
.track { position: relative; margin-top: 8px; }
.track-rail {
  position: absolute; top: 13px; height: 3px;
  background: rgba(5,5,5,.12);
  /* Runs dot-centre to dot-centre, not edge to edge, or the rail trails ~250px
     past the last dot and reads as unfinished. Dots sit at the start of each of
     four 1fr columns with a 28px gap: a column is (100% - 84px)/4, so the last
     dot centre lands at 75% + 35px, leaving 25% - 35px on the right. Left is
     half a 29px dot. */
  left: 14px; right: calc(25% - 35px);
}
.track-fill {
  display: block; height: 100%; background: var(--yellow);
  /* Defaults to full, not empty: if the script never runs the track still reads
     as a finished timeline rather than a dim, blank rail. JS adds .is-live and
     drives --p down from there. */
  transform: scaleX(var(--p, 1)); transform-origin: left;
}
.track-steps {
  position: relative; list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px;
}
.track-step { padding-right: 24px; }
.track-dot {
  display: block; width: 29px; height: 29px; margin-bottom: 20px;
  border-radius: 50%;
  background: var(--yellow); border: 3px solid var(--yellow);
  position: relative; z-index: 1;
  transition: border-color .4s var(--ease), background .4s var(--ease), transform .4s var(--ease);
}
.track-time {
  font-size: 12px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: #8a6800; margin-bottom: 8px;
  transition: color .4s var(--ease);
}
.track-step h3 { font-size: clamp(17px, 1.5vw, 20px); line-height: 1.2; margin-bottom: 10px; }
.track-step p { font-size: 14.5px; font-weight: 500; color: rgba(5,5,5,.68); line-height: 1.55; }
.track-step { transition: opacity .45s var(--ease); }

/* Everything above is the finished state, which is what renders with no JS and
   under prefers-reduced-motion. .is-live is added only when the scrub actually
   takes over, and only then do steps start out dimmed and light in sequence. */
.track.is-live .track-step { opacity: .45; }
.track.is-live .track-step.is-on { opacity: 1; }
.track.is-live .track-dot { background: var(--light); border-color: rgba(5,5,5,.16); }
.track.is-live .track-step.is-on .track-dot { background: var(--yellow); border-color: var(--yellow); transform: scale(1.12); }
.track.is-live .track-time { color: rgba(5,5,5,.42); }
.track.is-live .track-step.is-on .track-time { color: #8a6800; }

/* ---- what we respond to: compact icon cards, seven of them ---- */
.rr-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.rr-card {
  padding: 24px 22px 26px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1);
  border-top: 3px solid rgba(254,194,2,.5);
  transition: background .35s var(--ease), border-top-color .35s var(--ease), transform .35s var(--ease);
}
.rr-card:hover { background: rgba(255,255,255,.07); border-top-color: var(--yellow); transform: translateY(-4px); }
.rr-card .icon { width: 30px; height: 30px; color: var(--yellow); margin-bottom: 16px; }
.rr-card h3 { font-size: 15.5px; line-height: 1.25; }

/* ---- how it works: a numbered stepper with the connector drawn between the
        numerals, so the sequence reads as one run rather than six boxes ---- */
.rr-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.rr-step { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 22px; padding: 0 0 30px; }
.rr-step:last-child { padding-bottom: 0; }
/* connector runs from under one numeral to the next */
.rr-step:not(:last-child)::before {
  content: ""; position: absolute; left: 27px; top: 58px; bottom: 8px; width: 2px;
  background: linear-gradient(180deg, rgba(254,194,2,.5), rgba(255,255,255,.08));
}
.rr-step h3 { font-size: 17px; margin-bottom: 8px; }
.rr-step p { font-size: 15px; font-weight: 500; color: rgba(255,255,255,.7); line-height: 1.6; }
.rr-step .step-num { margin-bottom: 0; }

/* ---- weigh-up: the two ways this goes, side by side. Carries the section's
        argument better than prose can, and it is the page's closing pitch. ---- */
.weigh { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.weigh-col {
  padding: 30px 32px 32px;
  background: var(--white);
  border: 1px solid rgba(5,5,5,.12);
  clip-path: polygon(0 0, calc(100% - var(--notch)) 0, 100% var(--notch), 100% 100%, 0 100%);
}
.weigh-col.is-pli { border-color: rgba(5,5,5,.2); box-shadow: inset 4px 0 0 var(--yellow); }
.weigh-label {
  font-size: 11.5px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(5,5,5,.5); margin-bottom: 18px;
}
.weigh-col.is-pli .weigh-label { color: #8a6800; }
.weigh-col ul { list-style: none; margin: 0; padding: 0; }
.weigh-col li {
  position: relative; padding: 12px 0 12px 30px;
  border-bottom: 1px solid rgba(5,5,5,.1);
  font-size: 15px; font-weight: 600; color: rgba(5,5,5,.78); line-height: 1.45;
}
.weigh-col li:last-child { border-bottom: 0; }
/* a cross for the do-nothing column, a tick for ours — drawn, so no icon font */
.weigh-col li::before,
.weigh-col li::after {
  content: ""; position: absolute; left: 3px; top: 19px;
  width: 13px; height: 2px; background: rgba(5,5,5,.32);
}
.weigh-col li::before { transform: rotate(45deg); }
.weigh-col li::after { transform: rotate(-45deg); }
.weigh-col.is-pli li::before {
  left: 4px; top: 20px; width: 6px; height: 2px;
  background: var(--black); transform: rotate(45deg); transform-origin: left center;
}
.weigh-col.is-pli li::after {
  left: 8px; top: 22px; width: 12px; height: 2px;
  background: var(--black); transform: rotate(-52deg); transform-origin: left center;
}

/* ---- division split. Industry pages route to two division sites rather than
        the single .group-cta a service page carries, so each gets real estate
        and a reason rather than being a bare link. ---- */
.family-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
/* Some industries draw on all three divisions rather than two. Collapses
   straight to one column at 920 with the base .family-split rule — a 2-up
   middle step would leave a ragged single card on the second row. */
.family-split-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.family-card {
  display: block; padding: 34px 32px 30px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.12);
  text-decoration: none; color: inherit;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--notch)), calc(100% - var(--notch)) 100%, 0 100%);
  transition: background .3s var(--ease), border-color .3s var(--ease);
}
.family-card:hover, .family-card:focus-visible { background: rgba(255,255,255,.07); border-color: rgba(254,194,2,.45); }
.family-mark {
  display: inline-block; margin-bottom: 20px;
  font-size: 15px; font-weight: 900; line-height: 1.08;
  text-transform: uppercase; letter-spacing: .04em;
  color: var(--yellow);
  border-left: 3px solid var(--yellow); padding-left: 12px;
}
.family-card h3 {
  font-size: clamp(18px, 1.7vw, 22px); font-weight: 800;
  text-transform: uppercase; letter-spacing: .01em; line-height: 1.2; margin-bottom: 12px;
}
.family-card > p { font-size: 15px; font-weight: 500; color: rgba(255,255,255,.66); line-height: 1.6; margin-bottom: 20px; }
.family-go {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em;
  color: var(--yellow);
  transition: gap .3s var(--ease);
}
.family-card:hover .family-go { gap: 16px; }

@media (prefers-reduced-motion: reduce) {
  /* the global rule collapses durations to .01ms, which would strand these
     mid-keyframe at opacity 0 — show the finished state instead */
  .scan-sweep { display: none; }
  .scan-mark { opacity: 1; animation: none; }
  .chip.bad, .chip.good, .guard-glow { animation: none; }
  .chip.bad { transform: translateX(102px); opacity: 1; }
  .chip.good { opacity: 1; }
  .sort-svg .chip.up { animation: none; opacity: 1; transform: translate(182px, -37px); }
  .sort-svg .chip.down { animation: none; opacity: 1; transform: translate(182px, 41px); }
  .fix-chip, .fix-glow { animation: none; }
  .fix-chip { opacity: 1; transform: translateX(190px); }
  .fix-chip .mark-was { animation: none; opacity: 0; }
  .fix-chip .mark-now { animation: none; opacity: 1; }
  .rep-dot, .rep-halo { animation: none; }
  .rep-dot { opacity: 1; transform: translateX(-48px); }
  .rep-halo { opacity: .3; }
  .asm-part, .asm-out, .asm-glow { animation: none; }
  .asm-part { opacity: 1; transform: none; }
  .asm-out { opacity: 1; transform: translateX(96px); }
  .asm-glow { opacity: .12; }
  .pak-box, .pak-glow { animation: none; }
  .pak-box { opacity: 1; transform: translateX(196px); }
  .pak-box .pak-label, .pak-box .chip-mark { animation: none; opacity: 1; }
  .pak-glow { opacity: .12; }
  .kit-run, .kit-slot, .kit-check { animation: none; }
  .kit-run { opacity: 1; transform: translateX(170px); }
  .kit-slot, .kit-check { opacity: 1; }
  .stf-on { animation: none; opacity: 1; }
  .whs-in, .whs-out, .whs-glow { animation: none; }
  .whs-in, .whs-out { opacity: 1; transform: translateX(150px); }
  .whs-glow { opacity: .12; }
  .rev-back, .rev-out, .rev-glow { animation: none; }
  /* mirrored, like the running animation: inbound has come back down the top
     lane, outbound has gone forward along the bottom one */
  .rev-back { opacity: 1; transform: translateX(-140px); }
  .rev-out { opacity: 1; transform: translateX(140px); }
  .rev-glow { opacity: .12; }
}

/* ==========================================================
   RESOURCES  (body.page-res, body.page-post)
   Two page types. The index routes; the posts are read start to finish. Both
   lean on what already exists — .legal-wrap for the article column, .faq for
   the questions, .page-hero for the banner — so the only genuinely new pieces
   here are the feed card, the empty download state, and the article furniture.
   ========================================================== */

/* ---- hero jump rail. The index carries three separate blocks; naming them in
        the hero means nobody has to scroll to find out what is on the page.
        Sits below the CTAs, in the same slot the industry pages use for their
        stat rail. ---- */
.res-jump { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 36px; }
.res-jump a {
  display: inline-flex; align-items: baseline; gap: 10px;
  padding: 11px 20px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.15);
  font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255,255,255,.8); text-decoration: none;
  transition: color .3s var(--ease), background .3s var(--ease), border-color .3s var(--ease);
}
.res-jump a:hover, .res-jump a:focus-visible {
  color: var(--black); background: var(--yellow); border-color: var(--yellow);
}
.res-jump b { font-size: 11px; font-weight: 900; color: var(--yellow); }
.res-jump a:hover b, .res-jump a:focus-visible b { color: rgba(5,5,5,.5); }

/* ---- the insights feed. Same motion language as the industries hub — image
        scale, left-rail wipe, arrow slide — but built for a light band, so the
        card is white-on-grey with a shadow rather than a lifted tint. ---- */
.post-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; }
.post-card {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  text-decoration: none; color: inherit;
  background: var(--white);
  border: 1px solid rgba(5,5,5,.12);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--notch)), calc(100% - var(--notch)) 100%, 0 100%);
  transition: border-color .35s var(--ease), box-shadow .35s var(--ease), transform .35s var(--ease);
}
.post-card:hover, .post-card:focus-visible {
  border-color: rgba(5,5,5,.24);
  box-shadow: 0 18px 44px rgba(5,5,5,.13);
  transform: translateY(-4px);
}
.post-card::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; z-index: 4;
  background: var(--yellow);
  transform: scaleY(0); transform-origin: top;
  transition: transform .4s var(--ease);
}
.post-card:hover::before, .post-card:focus-visible::before { transform: scaleY(1); }

.post-media { display: block; position: relative; aspect-ratio: 16 / 9; overflow: hidden; isolation: isolate; }
.post-media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: grayscale(1) contrast(1.05) brightness(.6);
  transform: scale(1.02);
  transition: transform .6s var(--ease), filter .5s var(--ease);
}
.post-card:hover .post-media img,
.post-card:focus-visible .post-media img {
  transform: scale(1.07);
  filter: grayscale(1) contrast(1.05) brightness(.8);
}
.post-media::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: var(--yellow); mix-blend-mode: color; opacity: .28;
}
.post-media::after {
  content: ""; position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(180deg, rgba(5,5,5,.1) 42%, rgba(5,5,5,.82));
}
/* category and length ride on the image, so the card answers "what kind of
   read is this, and how long" before the title has to */
.post-cat, .post-time {
  position: absolute; bottom: 16px; z-index: 3;
  font-weight: 900; text-transform: uppercase;
}
.post-cat { left: 26px; font-size: 11px; letter-spacing: .16em; color: var(--yellow); }
.post-time { right: 26px; font-size: 11px; font-weight: 800; letter-spacing: .12em; color: rgba(255,255,255,.68); }

.post-body { display: flex; flex-direction: column; flex: 1; padding: 28px 32px 32px; }
.post-body h3 {
  font-size: clamp(19px, 1.9vw, 25px); line-height: 1.16; margin-bottom: 14px;
  transition: color .3s var(--ease);
}
.post-card:hover h3, .post-card:focus-visible h3 { color: #6b5200; }
.post-body > p { font-size: 15px; font-weight: 500; color: rgba(5,5,5,.7); line-height: 1.6; margin-bottom: 22px; }
.post-more {
  display: inline-flex; align-items: center; gap: 10px;
  /* margin-top:auto pins this to the card floor so two cards with different
     excerpt lengths still line their read-more links up */
  margin-top: auto; padding-right: var(--notch);
  font-size: 12.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--black);
  transition: gap .3s var(--ease);
}
.post-card:hover .post-more, .post-card:focus-visible .post-more { gap: 16px; }
.post-more svg { color: #8a6800; }

/* ---- downloads, empty on purpose. Dashed rather than solid so the state
        reads as "nothing here yet" by design instead of looking like a band
        that failed to load. ---- */
.dl-empty {
  max-width: 780px; margin: 0 auto; text-align: center;
  padding: 58px 48px 54px;
  background: rgba(255,255,255,.035);
  border: 1px dashed rgba(255,255,255,.22);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--notch)), calc(100% - var(--notch)) 100%, 0 100%);
}
.dl-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 74px; height: 74px; margin-bottom: 26px;
  border: 1px solid rgba(254,194,2,.4);
  background: rgba(254,194,2,.08);
  color: var(--yellow);
}
.dl-empty h3 { font-size: clamp(22px, 2.6vw, 34px); margin-bottom: 16px; }
.dl-empty > p {
  font-size: 16px; font-weight: 500; color: rgba(255,255,255,.7); line-height: 1.66;
  max-width: 58ch; margin: 0 auto 32px;
}
.dl-empty .page-ctas { justify-content: center; }

/* ---- article furniture. The body column itself is .legal-body, which already
        handles long-form measure, headings and the sticky rail. ---- */
.art-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
  margin-top: 28px;
  font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255,255,255,.62);
}
.art-meta b { color: rgba(255,255,255,.92); font-weight: 800; }
.art-dot { width: 4px; height: 4px; flex: none; background: var(--yellow); }

/* the opening paragraph is set larger — it is the standfirst, and stepping down
   from it into body size is what makes a long page feel like an article */
.legal-body .art-lead {
  font-size: 18.5px; font-weight: 500; color: rgba(5,5,5,.86);
  line-height: 1.62; margin-bottom: 26px;
}
/* closing note. Scoped under .legal-body because .legal-body > p is 0,1,1 and
   would otherwise win on size and colour. */
.legal-body .art-note {
  margin: 44px 0 0; padding: 26px 30px;
  background: rgba(254,194,2,.13); border-left: 3px solid var(--yellow);
  font-size: 16px; font-weight: 600; color: var(--black); line-height: 1.65;
}

/* read-next. Also scoped: .legal-body a underlines every link in the column,
   which would draw a line under the whole card. */
.legal-body .art-next {
  display: block; margin-top: 54px; padding: 28px 32px;
  background: var(--white); border: 1px solid rgba(5,5,5,.14);
  text-decoration: none; color: inherit;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--notch)), calc(100% - var(--notch)) 100%, 0 100%);
  transition: border-color .35s var(--ease), box-shadow .35s var(--ease), transform .35s var(--ease);
}
.legal-body .art-next:hover, .legal-body .art-next:focus-visible {
  border-color: rgba(5,5,5,.26);
  box-shadow: 0 16px 38px rgba(5,5,5,.12);
  transform: translateY(-3px);
}
.art-next p {
  font-size: 11.5px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase;
  color: #6b5200; margin-bottom: 10px;
}
.art-next h3 { font-size: clamp(18px, 1.8vw, 23px); line-height: 1.18; padding-right: var(--notch); }
.art-next span {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 15px;
  font-size: 12.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  transition: gap .3s var(--ease);
}
.legal-body .art-next:hover span, .legal-body .art-next:focus-visible span { gap: 16px; }

/* ---- FAQ on a light band. The block was written for near-black only: the
        hairlines, the body copy and the hover colour all assume white type on
        dark, and PLI Yellow on #F4F4F4 is far too weak to carry either the
        hover state or the open/close mark. ---- */
.faq.panel-light .faq-item { border-bottom-color: rgba(5,5,5,.14); }
.faq.panel-light .faq-item summary:hover { color: #6b5200; }
.faq.panel-light .faq-mark::before,
.faq.panel-light .faq-mark::after { background: #8a6800; }
.faq.panel-light .faq-body { color: rgba(5,5,5,.74); }
.faq.panel-light .faq-body a { color: var(--black); }

/* careers line under the closing CTA — a different audience than the rest of
   the band, so it is separated by a rule rather than sitting in the CTA row */
.cta-careers {
  max-width: 560px; margin: 36px auto 0; padding-top: 26px;
  border-top: 1px solid rgba(255,255,255,.12);
  font-size: 14.5px; font-weight: 600; color: rgba(255,255,255,.6);
}
.cta-careers a {
  color: var(--yellow); font-weight: 800;
  text-decoration: underline; text-underline-offset: 4px;
  transition: color .3s var(--ease);
}
.cta-careers a:hover { color: var(--white); }

/* ==========================================================
   PLI SORTING — DIVISION MODULES
   Everything above this line is the shared PLI system, carried over from
   the parent site unchanged on purpose: these are sibling sites of one
   brand and the family resemblance is the point. What follows is only
   what this division needs and the parent does not have.
   ========================================================== */

/* ---------- ground utilities ----------
   The system assigns a ground per component. These exist because the
   homepage reuses components that appear on more than one ground, and the
   difference is the ground, not the component. Only used on a section. */
.is-black { background: var(--black); }
.is-charcoal { background: var(--charcoal); }

/* ==========================================================
   HOMEPAGE HERO — photographic
   A full-bleed plant photograph under the same desaturate-and-re-tint
   treatment the interior heroes use, so the homepage and the service
   pages read as one set rather than two designs.
   ========================================================== */
/* .hero::before is the scrim the parent needs to hold type over 3D
   geometry. .hero-photo brings its own gradient stack; running both
   darkens twice and the photograph disappears under it. */
.hero.has-photo::before { content: none; }
.hero.has-photo { --hero-dim: .5; --hero-pos: 64% 46%; }

/* The inherited display size assumes a two-line headline over nothing but
   a sub-line. This hero runs three lines and then carries both a promise
   line and a paragraph beneath it, and at 132px that stack pushes the
   primary CTA off a 900px screen entirely. */
.hero.has-photo .hero-title { font-size: clamp(32px, 5.4vw, 74px); margin-bottom: 24px; }
.hero.has-photo .hero-sub { font-size: clamp(16px, 1.6vw, 20px); margin-bottom: 20px; }
.hero.has-photo .hero-content { position: relative; z-index: 3; }
/* z-index only. .hero-scroll is already absolutely positioned and centred
   with left:50% + translateX(-50%); making it relative re-bases that 50%
   against its static position and throws it a full viewport to the right,
   which is horizontal page overflow at every width above 760px. */
.hero.has-photo .hero-scroll { z-index: 3; }

/* ==========================================================
   INTERIOR HERO SCALE
   A step down from the parent's. Its scale was tuned for short service
   names on a page of their own; these headings run longer, the lede is a
   full sentence, and at the inherited size the hero filled the viewport
   and pushed the primary CTA below the fold on a laptop. Same specificity
   as the rules above, later in the file, so these win.
   ========================================================== */
/* Steel Gray measures 4.49:1 on Deep Black — under the 4.5:1 floor, and the
   breadcrumb is 11px. The parent's sheet already makes this substitution for
   .kicker and says why, but never applied it to the breadcrumb, which sits on
   the same near-black hero. Same fix, same reason. #767676 stays correct for
   rules and borders, which carry no text. */
.breadcrumb ol { color: rgba(255,255,255,.62); }
.breadcrumb a { color: rgba(255,255,255,.62); }

/* .legal-meta was authored for the light band: black type on a 14% yellow
   wash, which works over white. On the dark hero that same wash composites
   down to a near-black olive and the black type vanishes into it — 1.25:1,
   the worst contrast on the site before this. On a dark ground the accent
   becomes the ink instead. */
.page-hero .legal-meta { color: var(--yellow); background: rgba(254,194,2,.1); }
.page-hero .legal-meta span { color: rgba(255,255,255,.66); }

.page-svc .page-title, .page-ind .page-title { font-size: clamp(29px, 3.6vw, 48px); }
.page-svc .page-lede, .page-ind .page-lede { font-size: clamp(16.5px, 1.7vw, 21px); }
.page-svc .page-intro, .page-ind .page-intro { font-size: clamp(14.5px, 1.35vw, 16.5px); max-width: 66ch; }
.page-svc .page-hero, .page-ind .page-hero { padding: calc(var(--header-h) + 58px) 0 78px; }

/* ==========================================================
   SERVICE BANDS  (/services/)
   Each service is a photograph beside its copy, alternating sides down
   the page. Distinct from .figure-band, whose 1fr/.46fr split gives the
   text a column too narrow for a paragraph plus a five-item list.
   ========================================================== */
.svc-band { padding: 100px 0 108px; }
.svc-wrap {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 58px; align-items: center;
}
.svc-band.flip .photo-figure { order: 2; }
.svc-band.flip .svc-copy { order: 1; }
.svc-copy h2 { font-size: clamp(26px, 3vw, 40px); margin-bottom: 18px; }
.svc-copy > p { color: rgba(255,255,255,.74); font-weight: 500; margin-bottom: 24px; }
.svc-copy .group-cta { margin-top: 30px; }
/* .svc-list is a two-column grid built for a full-width band; in this
   column it has to be one, or five items break to one word per line */
.svc-list-one { grid-template-columns: minmax(0, 1fr); margin-top: 0; }
.svc-list-one strong { font-weight: 800; color: var(--white); }
/* .figure-note is inline-flex, and .group-cta above it is too — left alone
   the two share a line and the note runs into the CTA's underline. flex
   (not inline-flex) makes it block-level so it takes its own row. */
.svc-copy .figure-note { display: flex; margin-top: 24px; }

/* Where-we-work tiles carry a label and nothing else on this page: the
   brief gives no supporting sentence, so the tile centres on its label
   rather than leaving a gap where a paragraph would have gone. */
.place-tile.is-bare { display: flex; flex-direction: column; justify-content: center; min-height: 150px; }
.place-tile.is-bare h3 { margin-bottom: 0; }
.panel-light .place-tile {
  background: var(--white); border-color: rgba(5,5,5,.12);
}
/* border-color has to be restated. The dark-ground .place-tile:hover further
   down the sheet sets it to rgba(255,255,255,.24) at the same specificity and
   later in source order, so without this the tile's border turns near-white
   on hover over a #F4F4F4 band and effectively disappears. */
.panel-light .place-tile:hover {
  background: var(--white);
  border-color: rgba(5,5,5,.26);
  box-shadow: 0 16px 34px -16px rgba(5,5,5,.3);
}
.panel-light .place-tile .icon { color: var(--black); }
.panel-light .place-tile p { color: rgba(5,5,5,.7); }

/* ---------- hero supporting paragraph ----------
   The brief gives the hero a bold promise line and then a paragraph of
   plain detail under it. .hero-sub carries the promise; this is the
   paragraph, set quieter so the two do not compete. */
.hero-body {
  font-size: clamp(14.5px, 1.35vw, 16.5px);
  font-weight: 500;
  color: rgba(255,255,255,.74);
  max-width: 600px;
  margin: 0 0 34px;
  text-shadow: 0 4px 30px rgba(0,0,0,.6);
}

/* ==========================================================
   PLAIN PHOTO BAND
   A photograph on its own, no headline and no caption. The brief carries
   no copy at these points in the page, and writing a line to sit under a
   picture is how a spec quietly stops being the spec.
   ========================================================== */
.photo-band { padding: 0 0 4px; }
/* the caption gradient exists to hold white caption text over the lower
   edge of a photo — with no caption it is just an unexplained darkening */
.photo-figure.is-plain::before { content: none; }
.photo-figure.is-wide img { aspect-ratio: 21 / 8; }

/* ==========================================================
   INDUSTRY CHIPS
   Labels, not links. Each word is taken from the sentence above them, and
   this site has no industry pages for them to lead to.
   ========================================================== */
/* Its own band rather than the parent's .industries, which is a light-band
   component: it hard-sets `color: var(--black)` and switches .yellow to the
   highlight-behind-black-type treatment. Dropped onto a dark ground those
   two make the whole section black on charcoal. */
.ind-band { padding: 120px 0 130px; }
.ind-row { display: flex; flex-wrap: wrap; gap: 14px; }
.ind-chip {
  display: inline-flex; align-items: center; gap: 13px;
  padding: 15px 26px 15px 20px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.12);
  border-left: 3px solid var(--yellow);
  font-weight: 700; text-transform: uppercase;
  font-size: 14px; letter-spacing: .06em;
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%);
}
.ind-chip .icon { width: 30px; height: 30px; flex: none; }
.panel-light .ind-chip {
  background: var(--white); border-color: rgba(5,5,5,.12);
  border-left-color: var(--yellow); color: var(--black);
}

/* ==========================================================
   PLI STAFFING — DIVISION MODULES
   This site has two audiences on one page: employers hiring, and people
   looking for work. Almost every decision below is about keeping those
   two paths distinct without making the page twice as long.
   ========================================================== */

/* ---------- warm hero ----------
   The quality side desaturates its heroes to grayscale and re-tints them
   toward the brand — right for a plant bay, wrong here. This page is about
   people, and that treatment drains every bit of warmth out of a crew shot
   and leaves it looking like a cold industrial stock photo.

   So: true colour, slightly lifted saturation, and a good deal brighter.
   The .is-natural rules further up the sheet are scoped to .page-hero and
   never reach the homepage hero, which is why this restates them. */
.hero.has-photo { --hero-dim: .78; --hero-pos: 58% 44%; }
.hero.has-photo .hero-photo.is-natural img {
  filter: contrast(1.03) saturate(1.08) brightness(var(--hero-dim));
}
.hero.has-photo .hero-photo.is-natural::before { content: none; }   /* no duotone tint */
/* The scrim carries more of the load now that the image is brighter: it
   stays heavy on the left where the headline sits and clears to almost
   nothing on the right, so the crew is actually visible. */
.hero.has-photo .hero-photo.is-natural::after {
  background:
    linear-gradient(100deg, rgba(5,5,5,.97) 0%, rgba(5,5,5,.93) 30%, rgba(5,5,5,.7) 56%, rgba(5,5,5,.4) 80%, rgba(5,5,5,.28) 100%),
    linear-gradient(180deg, rgba(5,5,5,.5), transparent 26%, transparent 66%, rgba(5,5,5,.72));
}

/* The job-seeker route, given its own line in the hero rather than being
   buried below the employer CTAs. Quieter than a button so it does not
   compete with "Request Staff", but not hidden either. */
.hero-alt {
  margin-top: 26px;
  font-weight: 700; text-transform: uppercase;
  font-size: 12px; letter-spacing: .14em;
  color: rgba(255,255,255,.6);
}
.hero-alt a {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--yellow); text-decoration: none;
  border-bottom: 1px solid rgba(254,194,2,.4);
  padding-bottom: 2px; margin-left: 6px;
  transition: gap .3s var(--ease), border-color .3s;
}
.hero-alt a:hover { gap: 13px; border-bottom-color: var(--yellow); }
.hero-alt svg { stroke: currentColor; fill: none; }

/* five service types, so the six-track grid runs 3 + 2 with the pair
   centred rather than orphaned at the left */
.line-grid-five > * { grid-column: span 2; }
.line-grid-five > :nth-child(4) { grid-column: 2 / span 2; }
.line-grid-five > :nth-child(5) { grid-column: 4 / span 2; }

/* ---------- focus areas: label + description, one per line ---------- */
.focus-list { list-style: none; margin: 0 0 4px; padding: 0; }
.focus-list li {
  position: relative;
  padding: 14px 0 14px 26px;
  border-bottom: 1px solid rgba(255,255,255,.1);
  font-weight: 500; font-size: 15.5px; line-height: 1.55;
  color: rgba(255,255,255,.74);
}
.focus-list li::before {
  content: ""; position: absolute; left: 0; top: 23px;
  width: 13px; height: 3px; background: var(--yellow);
  transform: skewX(calc(-1 * var(--cut)));
}
.focus-list strong { font-weight: 800; color: var(--white); }

/* ---------- roles: icon + role, scannable at a glance ---------- */
.role-list { list-style: none; margin: 0 0 4px; padding: 0; }
.role-list li {
  display: flex; align-items: center; gap: 15px;
  padding: 13px 0;
  border-bottom: 1px solid rgba(255,255,255,.1);
  font-weight: 500; font-size: 15.5px; line-height: 1.4;
  color: rgba(255,255,255,.78);
}
.role-list .icon { width: 30px; height: 30px; flex: none; color: var(--white); }
.role-list strong { font-weight: 800; color: var(--white); }

/* four steps rather than the sorting site's five.
   Qualified with .flow-steps deliberately. As a bare .flow-steps-four this is
   specificity (0,1,0), exactly tying the base .flow-steps rule further down
   the sheet and every .flow-steps restatement inside a media query — so it
   lost on source order and the four steps laid out on a FIVE-column track at
   desktop (one empty column, rail pointing at an absent fifth badge) and on a
   THREE-column track from 921 to 1150px (three up, step 04 orphaned below).
   Nothing overflowed, so the responsive sweep passed it. At (0,2,0) it wins
   everywhere except where an equally specific override restates it below.
   The same trap is documented for .industry-grid-four in the 1150px block. */
.flow-steps.flow-steps-four { grid-template-columns: repeat(4, 1fr); }
/* the rail is sized off five columns; four moves the last badge outward */
.flow-track.is-four .flow-rail { right: calc(25% - 56px); }

/* ---------- five-column footer ----------
   The shared footer is four columns. This site needs five, because
   employers and job seekers each want their own list and merging them
   loses the one distinction the whole page is built around. The brand
   column keeps a little extra width; the four link columns are even. */
.footer-grid-five { grid-template-columns: 1.35fr 1fr 1fr 1.1fr 1fr; gap: 34px; }

/* three offices */
.place-grid-three { grid-template-columns: repeat(3, 1fr); }
.place-grid-three .place-tile.is-bare { min-height: 132px; }
.place-tile p { font-size: 14.5px; font-weight: 500; color: rgba(255,255,255,.6); margin-top: 6px; }

/* ==========================================================
   404 ROUTES OUT
   Three cards, each a route somewhere useful. Same anatomy as the service
   cards so a lost visitor lands on something familiar rather than a page
   that looks like a different site.
   ========================================================== */
.lost-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.lost-card {
  position: relative;
  display: flex; flex-direction: column;
  color: inherit; text-decoration: none;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1);
  border-top: 3px solid var(--yellow);
  padding: 32px 28px 30px;
  clip-path: polygon(0 0, calc(100% - var(--notch)) 0, 100% var(--notch), 100% 100%, 0 100%);
  transition: background .35s var(--ease), border-color .35s, transform .35s var(--ease);
}
.lost-card:hover {
  background: rgba(255,255,255,.075);
  border-color: rgba(254,194,2,.45);
  border-top-color: var(--yellow);
  transform: translateY(-5px);
}
.lost-card .icon { width: 40px; height: 40px; margin-bottom: 18px; color: var(--white); transition: color .35s; }
.lost-card:hover .icon { color: var(--yellow); }
.lost-card h3 { font-size: 19px; margin-bottom: 10px; padding-right: var(--notch); }
.lost-card p { color: rgba(255,255,255,.7); font-weight: 500; font-size: 15px; flex: 1; }
.lost-go { margin-top: 20px; color: var(--yellow); transition: transform .3s var(--ease); }
/* not .icon — that class sizes icons at 40px here — so it needs the stroke
   .icon would otherwise supply, or the arrow renders as nothing */
.lost-go svg { stroke: currentColor; fill: none; }
.lost-card:hover .lost-go { transform: translateX(6px); }

/* ==========================================================
   CERTIFICATION BAND  (/about/)
   One short claim that has to carry weight, so it gets a band of its own
   rather than becoming a bullet in a list of six.
   ========================================================== */
.cert-band { padding: 92px 0 100px; }
.cert-inner {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  gap: 34px; align-items: center;
  max-width: 940px;
  padding: 38px 40px 40px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1);
  border-left: 3px solid var(--yellow);
  clip-path: polygon(0 0, calc(100% - var(--notch)) 0, 100% var(--notch), 100% 100%, 0 100%);
}
.cert-mark { width: 62px; height: 62px; color: var(--white); flex: none; }
.cert-inner h2 { font-size: clamp(24px, 2.6vw, 34px); margin-bottom: 14px; }
.cert-inner p { color: rgba(255,255,255,.78); font-weight: 500; font-size: clamp(15px, 1.6vw, 17px); }
.cert-inner strong { font-weight: 800; color: var(--white); }

/* ==========================================================
   ABOUT PROSE
   Long-form company copy. Capped at a readable measure — the section is
   full-width and without this the lines run past 100 characters.
   ========================================================== */
.about-prose { max-width: 74ch; }
.about-prose p { color: rgba(255,255,255,.78); font-weight: 500; font-size: clamp(15px, 1.6vw, 17.5px); line-height: 1.68; }
.about-prose p + p { margin-top: 20px; }

/* ==========================================================
   PROOF
   Five statements beside the coverage map. The map is a picture of the
   fifth statement, which is why the two share a band.
   ========================================================== */
.proof-band { padding: 120px 0 130px; }
.proof-cover {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .8fr);
  gap: 64px; align-items: center;
}
.proof-list { list-style: none; margin: 0; padding: 0; }
.proof-list li {
  position: relative;
  padding: 20px 0 20px 40px;
  border-bottom: 1px solid rgba(255,255,255,.12);
  font-weight: 500; font-size: clamp(15px, 1.6vw, 18px);
  color: rgba(255,255,255,.86);
}
.proof-list li:first-child { border-top: 1px solid rgba(255,255,255,.12); }
.proof-list li::before {
  content: ""; position: absolute; left: 0; top: 50%;
  width: 22px; height: 3px; background: var(--yellow);
  transform: translateY(-50%) skewX(calc(-1 * var(--cut)));
}

/* The map is decorative here: every state it shows is named in the list
   beside it, so it needs no readout and its paths are not interactive
   targets. With no hover state to light them they have to read at rest,
   which the parent's near-invisible resting fill does not do. */
.proof-cover .coverage-map .state {
  cursor: default;
  fill: rgba(255,255,255,.05);
  stroke: rgba(255,255,255,.5);
}
.proof-cover .coverage-map .state:hover { fill: rgba(255,255,255,.05); stroke: rgba(255,255,255,.5); }
/* Ohio carries the HQ marker, so it is the one state drawn in the accent */
.proof-cover .coverage-map .state[data-state="OH"] { fill: rgba(254,194,2,.16); stroke: var(--yellow); }
.proof-cover .coverage-map .state[data-state="OH"]:hover { fill: rgba(254,194,2,.16); stroke: var(--yellow); }

/* ==========================================================
   SCAN HEADING REVEAL
   The house entrance for headings that name the work: a yellow rule
   crosses the line and the words resolve behind it. The bar is injected
   by script, so it is display:none under reduced motion rather than
   merely stopped — a stopped one sits across the words as a solid bar.
   ========================================================== */
[data-split="scan"] { position: relative; }
.head-sweep {
  position: absolute; left: 0; right: 0; top: 50%;
  height: 3px; background: var(--yellow);
  transform: scaleX(0); transform-origin: left;
  box-shadow: 0 0 26px 3px rgba(254,194,2,.55);
  pointer-events: none;
}

/* ==========================================================
   SERVICE CARDS — the seven
   ========================================================== */
.line-band { padding: 120px 0 130px; }
.line-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 22px; perspective: 1200px; }
.line-grid > * { grid-column: span 2; }
/* seven cards: the last centres rather than orphaning at the left */
.line-grid > :nth-child(7):last-child { grid-column: 3 / span 2; }

.line-card {
  position: relative;
  display: flex; flex-direction: column;
  color: inherit; text-decoration: none;
  /* a light overlay, not a dark one: these panels are opaque and a dark
     translucent card would render darker than the band it sits on */
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1);
  border-top: 3px solid var(--yellow);
  padding: 34px 28px 30px;
  clip-path: polygon(0 0, calc(100% - var(--notch)) 0, 100% var(--notch), 100% 100%, 0 100%);
  transform-style: preserve-3d;
  overflow: hidden;
  transition: background .35s var(--ease), border-color .35s, transform .35s var(--ease);
}
/* border-color is a four-side shorthand — restating the top keeps the
   signature yellow rail from washing out on hover */
.line-card:hover {
  background: rgba(255,255,255,.075);
  border-color: rgba(254,194,2,.45);
  border-top-color: var(--yellow);
  transform: translateY(-5px);
}
.line-card-num {
  position: absolute; top: 18px; right: calc(var(--notch) + 6px);
  font-weight: 800; font-size: 38px; line-height: 1;
  color: rgba(255,255,255,.07);
}
.line-card .svc-icon { width: 44px; height: 44px; margin-bottom: 20px; color: var(--white); transition: color .35s; }
.line-card:hover .svc-icon { color: var(--yellow); }
.line-card h3 { font-size: 20px; letter-spacing: .01em; margin-bottom: 11px; padding-right: var(--notch); }
.line-card p { color: rgba(255,255,255,.7); font-weight: 500; flex: 1; }
.line-card-go {
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: 22px;
  font-weight: 700; text-transform: uppercase;
  font-size: 12px; letter-spacing: .12em; color: var(--yellow);
  transition: gap .3s var(--ease);
}
.line-card:hover .line-card-go { gap: 17px; }
/* not .icon — that class sizes icons at 44px in this grid — so it needs
   the stroke .icon would otherwise supply, or it renders as nothing */
.line-card-go svg { stroke: currentColor; fill: none; }

/* the card's own PASS mark, pressed into the notch on hover */
.line-card-mark {
  position: absolute; top: 0; right: 0;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  background: var(--yellow); color: var(--black);
  clip-path: polygon(0 0, 100% 0, 100% 100%);
  opacity: 0; transform: translate(10px, -10px);
  transition: opacity .3s var(--ease), transform .45s var(--ease);
}
.line-card-mark svg { stroke: currentColor; fill: none; margin: -14px 0 0 14px; }
.line-card:hover .line-card-mark { opacity: 1; transform: none; }

/* ==========================================================
   RESPONSE FLOW
   Five steps on a rail that fills as the section passes. Deliberately not
   a pinned horizontal track: pinning holds the page still while the
   reader is trying to move, and this reads the same without taking the
   scroll away from them.
   ========================================================== */
.flow { padding: 120px 0 130px; }
.flow-track { position: relative; margin-top: 8px; }
/* The rail stops just past the last badge rather than running to the edge.
   Five equal columns put step 05 at 80%; the badge is 56px wide, so pulling
   the right edge back by (20% - 56px) lands the rail exactly on it. Run to
   0 and the line trails off into empty column, which reads as unfinished. */
.flow-rail {
  position: absolute; left: 0; right: calc(20% - 56px); top: 27px; height: 3px;
  background: rgba(255,255,255,.12);
  overflow: hidden;
}
.flow-fill {
  display: block; height: 100%; background: var(--yellow);
  transform: scaleX(0); transform-origin: left;
  /* no transition: the value is written every frame from scroll position,
     and easing it would make the fill lag the step that it lights */
}
.flow-steps {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 26px;
}
.flow-step { position: relative; padding-top: 0; }
.flow-num {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; margin-bottom: 24px;
  background: var(--black);
  border: 1.5px solid rgba(255,255,255,.2);
  font-weight: 800; font-size: 19px; color: rgba(255,255,255,.45);
  clip-path: polygon(0 0, calc(100% - 13px) 0, 100% 13px, 100% 100%, 0 100%);
  transition: color .4s var(--ease), border-color .4s var(--ease), background .4s var(--ease);
}
.flow-step.is-on .flow-num {
  color: var(--black); background: var(--yellow); border-color: var(--yellow);
}
.flow-step .icon {
  display: block; width: 38px; height: 38px; margin-bottom: 16px;
  color: rgba(255,255,255,.5);
  transition: color .4s var(--ease);
}
.flow-step.is-on .icon { color: var(--white); }
.flow-step h3 { font-size: 19px; margin-bottom: 10px; letter-spacing: .02em; }
.flow-step p { font-size: 14.5px; color: rgba(255,255,255,.64); line-height: 1.55; font-weight: 500; }
.flow-note { margin-top: 54px; color: rgba(255,255,255,.72); font-weight: 500; max-width: 720px; }

/* ==========================================================
   WHERE WE WORK
   ========================================================== */
.where-band { padding: 120px 0 130px; }
.place-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.place-tile {
  position: relative;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1);
  padding: 30px 26px 32px;
  clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 0 100%);
  transition: background .35s, border-color .35s, transform .35s var(--ease);
}
/* the signature hover detail: a 3px yellow rail wiping down the left edge */
.place-tile::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; z-index: 4;
  background: var(--yellow);
  transform: scaleY(0); transform-origin: top;
  transition: transform .4s var(--ease);
}
.place-tile:hover { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.24); transform: translateY(-5px); }
.place-tile:hover::before { transform: scaleY(1); }
.place-tile .icon { width: 40px; height: 40px; margin-bottom: 18px; color: var(--white); }
.place-tile h3 { font-size: 18px; margin-bottom: 9px; }
.place-tile p { font-size: 14.5px; font-weight: 500; color: rgba(255,255,255,.66); line-height: 1.55; }

/* ==========================================================
   PROOF STRIP
   ========================================================== */
.proof-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; }
.proof-grid.proof-strip { margin-top: 62px; }
.proof-item { padding: 6px 26px; border-left: 1px solid rgba(255,255,255,.14); }
.proof-item:first-child { border-left: 0; padding-left: 0; }
.proof-item b {
  display: block; font-weight: 800; line-height: 1;
  font-size: clamp(30px, 3.4vw, 46px); color: var(--yellow);
  font-variant-numeric: tabular-nums; margin-bottom: 12px;
}
.proof-item span {
  display: block; font-weight: 500; font-size: 14px;
  color: rgba(255,255,255,.68); line-height: 1.5;
}
/* light-band variant — #767676 is only 4.1:1 on --light, and yellow on
   white is about 1.5:1, so both have to be restated here */
.panel-light .proof-item { border-left-color: rgba(5,5,5,.16); }
.panel-light .proof-item b { color: #8a6800; }
.panel-light .proof-item span { color: rgba(5,5,5,.7); }

/* ==========================================================
   INDUSTRIES — four named sectors, so four wide rather than the parent's
   three. Deliberately not links: this site has no industry pages, and a
   tile that names a thing has to reach that thing or nowhere at all.
   ========================================================== */
.industry-grid-four { grid-template-columns: repeat(4, 1fr); }
.industry-grid-four .industry-tile { flex-direction: column; align-items: flex-start; gap: 14px; padding: 26px 24px 28px; }

/* ==========================================================
   FAMILY OF BRANDS
   ========================================================== */
.family-band { padding: 120px 0 130px; }
.fam-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
/* the homepage names only the two sibling divisions, not itself */
.fam-grid-two { grid-template-columns: repeat(2, 1fr); max-width: 820px; }
.fam-card {
  display: flex; flex-direction: column;
  padding: 34px 30px 32px;
  background: var(--white);
  border: 1px solid rgba(5,5,5,.12);
  color: var(--black); text-decoration: none;
  clip-path: polygon(0 0, calc(100% - var(--notch)) 0, 100% var(--notch), 100% 100%, 0 100%);
  transition: transform .35s var(--ease), box-shadow .35s, border-color .35s;
}
.fam-card:hover { transform: translateY(-6px); border-color: rgba(5,5,5,.3); box-shadow: 0 18px 44px rgba(5,5,5,.3); }
.fam-card.is-self { box-shadow: inset 4px 0 0 var(--yellow); }
.fam-card.is-self:hover { box-shadow: inset 4px 0 0 var(--yellow), 0 18px 44px rgba(5,5,5,.3); }
/* same lockup proportion as the header brand: the division name sits at about
   63% of the mark's cap height, not level with it */
.fam-logo { display: flex; align-items: center; gap: 7px; margin-bottom: 14px; }
.fam-logo > span:not(.brand-mark) {
  font-weight: 900; font-size: 13px; letter-spacing: .015em; line-height: 1;
  text-transform: uppercase;
}
.fam-card p { font-size: 15px; font-weight: 500; color: rgba(5,5,5,.7); line-height: 1.6; flex: 1; margin-bottom: 22px; }
.fam-go {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 700; text-transform: uppercase; font-size: 12px; letter-spacing: .12em;
  /* yellow is about 1.5:1 on white — on light grounds the darkened gold
     carries the accent instead */
  color: #8a6800;
  transition: gap .3s var(--ease), color .3s;
}
.fam-card:hover .fam-go { gap: 17px; color: var(--black); }
.fam-go svg { stroke: currentColor; fill: none; }
.fam-here {
  align-self: flex-start;
  font-weight: 800; text-transform: uppercase; font-size: 11px; letter-spacing: .18em;
  background: var(--yellow); color: var(--black); padding: 7px 14px;
  clip-path: polygon(0 0, 100% 0, calc(100% - 9px) 100%, 0 100%);
}

/* ==========================================================
   CLOSING CTA
   ========================================================== */
.cta-final { padding: 140px 0 120px; text-align: center; }
.cta-final h2 { font-size: clamp(30px, 5.4vw, 72px); margin-bottom: 26px; }
.cta-final > .container > p {
  max-width: 620px; margin: 0 auto 42px;
  font-size: clamp(15px, 1.7vw, 18px); color: rgba(255,255,255,.78);
}
.cta-final .page-ctas { justify-content: center; }
/* Two lines, not one. Joined by a middot the address and the promise wrap
   mid-sentence at almost every width, and .2em tracking makes the break
   worse — the email is long enough to own a line. */
.cta-mail-line { margin-top: 38px; font-size: 16px; font-weight: 700; letter-spacing: .04em; }
.cta-closing {
  margin-top: 12px;
  font-weight: 700; text-transform: uppercase;
  font-size: 12px; letter-spacing: .2em; color: rgba(255,255,255,.55);
}
.cta-band .cta-closing { margin-top: 34px; }
.cta-mail { color: var(--yellow); text-decoration: none; overflow-wrap: anywhere; }
.cta-mail:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ==========================================================
   LIGHT-BAND CORRECTIONS
   The system was written dark-first. Anything placed on .panel-light has
   to restate its border, muted text, link and accent colours or it fails
   contrast — the most common bug in this sheet.
   ========================================================== */
.panel-light { background: var(--light); color: var(--black); }
.panel-light .kicker { color: #525252; }
.panel-light .section-intro { color: rgba(5,5,5,.72); }
.panel-light .yellow {
  color: var(--black);
  background-image: linear-gradient(var(--yellow), var(--yellow));
  background-repeat: no-repeat;
  background-size: 100% .17em;
  background-position: 0 88%;
}
/* .btn-ghost is a white inset border — invisible on a light band */
.panel-light .btn-ghost { color: var(--black); box-shadow: inset 0 0 0 1.5px rgba(5,5,5,.5); --btn-fill: var(--black); }
.panel-light .btn-ghost:hover { color: var(--white); box-shadow: inset 0 0 0 1.5px var(--black); }

.panel-light .why-tile { background: var(--white); border-color: rgba(5,5,5,.12); border-left-color: var(--yellow); }
.panel-light .why-tile:hover { background: var(--white); box-shadow: 0 16px 34px -16px rgba(5,5,5,.3); }
.panel-light .why-tile p { color: rgba(5,5,5,.72); }

.faq.panel-light .faq-item { border-bottom-color: rgba(5,5,5,.14); }
.faq.panel-light .faq-item summary:hover { color: #6b5200; }
.faq.panel-light .faq-mark::before,
.faq.panel-light .faq-mark::after { background: #8a6800; }
.faq.panel-light .faq-body { color: rgba(5,5,5,.74); }
.faq.panel-light .faq-body a { color: var(--black); }


/* ==========================================================
   RESPONSIVE
   ========================================================== */
/* The phone number is the first thing to go when the header runs out of room,
   then the nav links collapse to the hamburger. */
@media (max-width: 1320px) {
  .header-phone { display: none; }
}

/* Below this the links move into a full-screen overlay behind the hamburger.
   The CTA stays in the header bar so it is always one tap away. */
@media (max-width: 1150px) {
  /* Height comes from viewport units, not a bottom offset: the header keeps a
     transform after the intro, which makes it the containing block for this
     fixed element and would collapse a top/bottom pair to zero. */
  .main-nav {
    position: fixed;
    top: var(--header-h); right: 0; left: 0;
    height: calc(100svh - var(--header-h));
    background: rgba(5,5,5,.98);
    backdrop-filter: blur(20px);
    flex-direction: column; align-items: flex-start;
    /* `safe` centres the menu while it fits, then flips to start-aligned once
       it outgrows the screen. Plain `center` overflows in both directions, so
       an expanded Solutions panel pushed the top of the list above the scroll
       origin where it could not be reached at all. */
    justify-content: center;
    justify-content: safe center;
    gap: 4px; padding: 24px clamp(28px, 8vw, 90px) 44px;
    transform: translateX(100%);
    /* A transform alone still leaves every link focusable and announced while
       the menu is shut, so visibility does the actual hiding — held until the
       slide finishes on close, flipped instantly on open. */
    visibility: hidden;
    transition: transform .5s var(--ease), visibility 0s linear .5s;
    overflow-y: auto;
  }
  .main-nav.open {
    transform: none;
    visibility: visible;
    transition: transform .5s var(--ease), visibility 0s;
  }
  .main-nav a:not(.btn) {
    font-size: clamp(28px, 5vw, 44px);
    letter-spacing: .02em; font-weight: 700;
    height: auto; line-height: 1.35; padding: 8px 0;
    flex-shrink: 0;   /* never let the label collapse to its padding */
  }
  .main-nav a:not(.btn) span::after { display: none; }
  .main-nav a:not(.btn):hover span { transform: none; color: var(--yellow); }

  .nav-toggle {
    display: flex; flex-direction: column; gap: 5px; margin-left: 8px;
    background: none; border: none; cursor: pointer; padding: 10px;
  }
  .nav-toggle span { width: 26px; height: 2.5px; background: var(--white); transition: transform .35s var(--ease), opacity .3s; }
  .nav-toggle.open span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
  .nav-toggle.open span:nth-child(2) { opacity: 0; }
  .nav-toggle.open span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

  .nav-cta { margin-left: auto; }

  .nav-foot {
    display: block; flex-shrink: 0;
    margin-top: 34px; padding-top: 26px;
    border-top: 1px solid rgba(255,255,255,.14);
    width: 100%; max-width: 460px;
  }
  .nav-phone {
    display: inline-flex; align-items: center; gap: 12px;
    color: var(--yellow); text-decoration: none;
    font-weight: 700; font-size: 26px; letter-spacing: .03em;
  }
  .nav-foot > span {
    display: block; margin-top: 8px;
    color: var(--gray); font-size: 13px;
    text-transform: uppercase; letter-spacing: .14em;
  }

  /* The mega menu stops floating and becomes an accordion in the overlay.
     These rules sit last in the block on purpose: the generic
     .main-nav a:not(.btn) sizing above would otherwise render the panel
     links at 44px alongside the top-level items. */
  .nav-item { flex-wrap: wrap; width: 100%; gap: 0; }
  .nav-item .nav-mega-link { flex: 1; }
  .mega-caret {
    width: 46px; height: 46px; margin-right: -10px;
    color: var(--yellow);
  }
  .mega {
    position: static; flex-basis: 100%;
    display: none;
    opacity: 1; visibility: visible; transform: none; transition: none;
  }
  .nav-item.is-open .mega { display: block; }
  .mega-inner {
    background: none; box-shadow: none; clip-path: none;
    backdrop-filter: none; -webkit-backdrop-filter: none;
    border: none; border-left: 2px solid rgba(254,194,2,.4);
    padding: 4px 0 16px 18px;
    margin-bottom: 8px;
  }
  .mega-cols { grid-template-columns: 1fr; gap: 2px 0; }
  .mega-head { font-size: 10px; margin: 15px 0 2px; }
  .main-nav .mega .mega-all { font-size: 13px; padding-bottom: 12px; margin-bottom: 6px; }
  /* font-weight too: .main-nav a:not(.btn) above ties on specificity and would
     otherwise leak 700 onto these rows */
  .main-nav .mega-cols a { font-size: 17px; font-weight: 500; line-height: 1.3; padding: 12px 6px 12px 0; }
  .mega-cols a .icon { width: 19px; height: 19px; }

  .solution-grid { grid-template-columns: repeat(4, 1fr); }
  .trust-list { grid-template-columns: repeat(3, 1fr); row-gap: 34px; }
  .segment-grid { grid-template-columns: 1fr; max-width: 580px; margin: 0 auto; }
}

@media (max-width: 920px) {
  .problem-grid { grid-template-columns: repeat(2, 1fr); }
  .solution-grid { grid-template-columns: repeat(3, 1fr); }
  .coverage-wrap, .contact-wrap { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .industry-grid { grid-template-columns: repeat(2, 1fr); }
  .stats { grid-template-columns: repeat(2, 1fr); row-gap: 40px; }

  /* the hero's index column stacks under the copy rather than being squeezed
     into a sliver that breaks its labels one letter per line */
  .page-hero-inner { grid-template-columns: 1fr; gap: 40px; }
  /* copy runs the full width here, so the scrim can no longer thin out to one
     side — it goes near-uniform instead */
  .hero-photo::after {
    background:
      linear-gradient(180deg, rgba(5,5,5,.9), rgba(5,5,5,.86) 55%, rgba(5,5,5,.93));
  }

  /* service cards drop to two up; the centred-orphan rule has to be undone
     or the fourth card would sit in a half-column */
  .svc-grid > *, .svc-grid > :nth-child(4):nth-last-child(2) { grid-column: span 3; }
  .svc-grid-staffing > * { grid-column: span 6; }
  .why-grid { grid-template-columns: repeat(2, 1fr); }
  .triage-inner { grid-template-columns: 1fr; gap: 34px; }
  .triage-ctas { flex-direction: row; flex-wrap: wrap; }

  /* service detail pages */
  .check-grid { grid-template-columns: 1fr; gap: 0; }
  .where-grid { grid-template-columns: repeat(2, 1fr); }
  .who-inner { grid-template-columns: 1fr; gap: 38px; }
  .figure-wrap { grid-template-columns: 1fr; gap: 36px; }
  /* .figure-band.flip .figure-wrap is 0,3,0 and would otherwise keep its
     two-column split at phone widths, squeezing the photo to ~94px. Reset the
     order too, so every band reads photo-then-copy on a phone. */
  .figure-band.flip .figure-wrap { grid-template-columns: 1fr; }
  .figure-band.flip .photo-figure { order: 1; }
  .figure-band.flip .figure-cap { order: 2; }
  .figure-band { padding: 84px 0 90px; }
  .trust-strip { grid-template-columns: 1fr; }
  .trust-strip-four { grid-template-columns: repeat(2, 1fr); }
  .svc-grid-four, .svc-grid-three { grid-template-columns: repeat(2, 1fr); }
  .where-grid-three { grid-template-columns: repeat(2, 1fr); }

  /* industry modules */
  .ind-cards { grid-template-columns: minmax(0, 1fr); }
  .post-grid { grid-template-columns: minmax(0, 1fr); }
  .prob-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* legal: the contents rail stops being sticky and sits above the text */
  .legal-wrap { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .legal-toc { position: static; }

  /* contact */
  .reach-grid, .addr-grid { grid-template-columns: minmax(0, 1fr); }

  /* about */
  .val-grid { grid-template-columns: minmax(0, 1fr); }

  /* rapid response */
  .rr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .weigh { grid-template-columns: minmax(0, 1fr); }
  /* the track turns vertical: rail down the left, steps stacked beside it, and
     --p now drives scaleY */
  .track-steps { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .track-rail { left: 13px; right: auto; top: 0; bottom: 0; width: 3px; height: auto; }
  .track-fill { width: 100%; height: 100%; transform: scaleY(var(--p, 0)); transform-origin: top; }
  .track-step { padding: 0 0 30px 52px; position: relative; }
  .track-step:last-child { padding-bottom: 0; }
  .track-dot { position: absolute; left: 0; top: 0; margin-bottom: 0; }
  .plate-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sol-map, .reason-grid, .family-split { grid-template-columns: minmax(0, 1fr); }
  .reason-grid { gap: 0; }
  /* the rail stacks, so the divider moves from between columns to between rows */
  .ind-stats { grid-template-columns: minmax(0, 1fr); }
  .ind-stat { padding: 22px 0 0; }
  .ind-stat + .ind-stat {
    padding-left: 0; border-left: 0;
    border-top: 1px solid rgba(255,255,255,.14);
  }
  .ind-stat p { max-width: 48ch; }
}

@media (max-width: 760px) {
  :root { --header-h: 66px; }
  /* the sticky bottom bar carries the CTA from here down */
  .nav-cta { display: none; }
  .nav-toggle { margin-left: auto; }

  .trust-list { grid-template-columns: repeat(2, 1fr); }
  .trust-list li:last-child { grid-column: 1 / -1; }
  .solution-grid, .problem-grid { grid-template-columns: repeat(2, 1fr); }
  .industry-grid { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; gap: 0; }
  .footer-grid { grid-template-columns: 1fr; gap: 30px; }
  .mobile-cta { display: flex; }
  body { padding-bottom: 66px; }

  /* Accessible tap targets (WCAG 2.5.5 asks for ~44px) and no text under 12px. */
  .site-footer .footer-grid a:not(.brand) { padding: 12px 0; }
  .nav-toggle { padding: 13px 10px; }
  .stat span, .contact-line small, .file-hint, .contact-form label { font-size: 12px; }
  .state-list li { padding: 12px 20px; }
  .footer-bottom { font-size: 13px; }
  .footer-bottom a { padding: 12px 0; display: inline-block; }

  /* narrow two-column cards: trim the gutters and let long service names break */
  .solution-card { padding: 26px 10px 24px; font-size: 12px; }
  .solution-card span, .problem-tile span { overflow-wrap: anywhere; hyphens: auto; }
  .problem-tile { padding: 28px 14px; }
  .hero-ctas .btn { width: 100%; justify-content: center; }
  .hero-scroll { display: none; }

  /* interior pages: everything to a single column */
  .page-hero { padding: calc(var(--header-h) + 60px) 0 76px; }
  .page-ctas .btn, .triage-ctas .btn { width: 100%; justify-content: center; }
  .svc-section, .why, .faq { padding: 84px 0 90px; }
  .svc-grid > *,
  .svc-grid > :nth-child(4):nth-last-child(2),
  .svc-grid-two > * { grid-column: span 6; }
  .why-grid { grid-template-columns: 1fr; }
  .svc-list { grid-template-columns: 1fr; }
  .triage-band { padding: 80px 0; }
  .cta-band { padding: 100px 0 110px; }

  /* Plate labels are SVG text: they scale with the drawing instead of
     reflowing, so at phone widths they fall under ~6px. The plate keeps its
     own scale and scrolls inside its frame rather than shrinking further. */
  .figure-plate { overflow-x: auto; clip-path: none; padding: 18px; }
  .figure-plate svg { min-width: 620px; }

  /* service detail pages */
  .where-grid, .where-grid-three, .svc-grid-four, .svc-grid-three, .trust-strip-four { grid-template-columns: 1fr; }
  /* these grids drop to a single explicit track, so their cards must span 1.
     Left at the .svc-grid default of span 6 they generate five zero-width
     implicit tracks and the gaps between them eat ~110px of card width. */
  .svc-grid-four > *, .svc-grid-three > * { grid-column: span 1; }
  .scan-panel { padding: 16px 16px 18px; }
  .callout { font-size: 17px; padding-left: 18px; }

  /* contact */
  .modal-panel { padding: 34px 22px 30px; }
  .modal-close { top: 10px; right: 10px; width: 38px; height: 38px; }
  .reach-card { padding: 22px 20px 24px; }
  .addr-card { padding: 24px 22px 26px; }

  /* about */
  .val-card { padding: 26px 24px 28px; }

  /* rapid response */
  .rr-grid { grid-template-columns: minmax(0, 1fr); }
  .weigh-col { padding: 24px 22px 26px; }
  .rr-step { grid-template-columns: 46px minmax(0, 1fr); gap: 16px; }
  /* .step-num is a fixed 56px square, which would overhang the narrower column */
  .rr-step .step-num { width: 46px; height: 46px; font-size: 17px; }
  .rr-step:not(:last-child)::before { left: 22px; top: 50px; }

  /* industry pages */
  .prob-grid, .plate-grid { grid-template-columns: minmax(0, 1fr); }
  .ind-card-body { padding: 22px 22px 24px; }
  .post-body { padding: 24px 22px 26px; }
  .post-cat { left: 22px; }
  .post-time { right: 22px; }
  .dl-empty { padding: 42px 24px 40px; }
  .legal-body .art-note { padding: 22px 22px; }
  .legal-body .art-next { padding: 24px 22px; }
  .ind-card-num { left: 22px; }
  .prob-card { padding: 26px 22px 24px; }
  .plate { padding: 24px 20px 26px; }
  .sol-row { padding: 18px 18px; gap: 4px 14px; }
  .family-card { padding: 28px 24px 26px; }

  /* native swipe carousel instead of the desktop pin; one whole card per
     snap, with a sliver of the next showing there is more to swipe */
  .process-pin { min-height: 0; padding: 90px 0 100px; }
  .process-viewport {
    --gap: 16px;
    overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 28px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin: 0 -28px; padding: 0 28px;
  }
  .process-viewport::-webkit-scrollbar { display: none; }
  .process-steps {
    transform: none !important;
    grid-auto-columns: calc(100% - 46px);   /* full card + a peek of the next */
  }
  .process-step { scroll-snap-align: start; }
  .process-line { margin-top: 28px; }
  .contact-form { padding: 32px 24px; }
  .segments, .problems, .solutions, .industries { padding: 90px 0 100px; }
  .about-band { padding: 110px 0; }
  .coverage, .contact { padding: 100px 0; }
  .cursor { display: none; }
}

/* ==========================================================
   REDUCED MOTION
   ========================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .noise { display: none; }
  .marquee-tilt { transform: none; width: 100%; margin-left: 0; }
}

/* ==========================================================
   PLI SORTING — RESPONSIVE + REDUCED MOTION
   Media queries only, so ordering after the shared blocks above is safe:
   every rule here is already gated on a condition.
   ========================================================== */
@media (max-width: 1150px) {
  .proof-grid { grid-template-columns: repeat(3, 1fr); row-gap: 34px; }
  .proof-item:nth-child(3n + 1) { border-left: 0; padding-left: 0; }
  .place-grid { grid-template-columns: repeat(2, 1fr); }
  /* ties .industry-grid on specificity, so it has to be restated here or
     the shared 920px rule below never reaches the four-up variant */
  .industry-grid-four { grid-template-columns: repeat(2, 1fr); }
  /* five steps across is unreadable here; the rail goes with them, since
     a horizontal rail under a wrapped grid points at nothing */
  .flow-steps { grid-template-columns: repeat(3, 1fr); row-gap: 44px; }
  .flow-rail { display: none; }
}

@media (max-width: 920px) {
  /* three cards to a row becomes two, and the centred-seventh rule has to
     be undone or that card lands in a half column */
  .line-grid > *, .line-grid > :nth-child(7):last-child { grid-column: span 3; }
  /* the 3+2 centring is a six-track idea; at two-up it must be undone or
     cards 4 and 5 land in half columns */
  .line-grid-five > *,
  .line-grid-five > :nth-child(4),
  .line-grid-five > :nth-child(5) { grid-column: span 3; }
  /* matches the (0,2,0) of the base four-step rule, or it would lose to it */
  .flow-steps.flow-steps-four { grid-template-columns: repeat(2, 1fr); row-gap: 40px; }
  .place-grid-three { grid-template-columns: repeat(3, 1fr); }
  /* five columns will not hold here; the shared rule drops .footer-grid to
     two, and the five-column override has to come with it or the columns
     squeeze to about 90px and every link wraps */
  .footer-grid-five { grid-template-columns: 1fr 1fr; gap: 30px 44px; }
  .proof-cover { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .lost-grid { grid-template-columns: minmax(0, 1fr); max-width: 560px; }
  /* the badge stacks above the claim rather than shrinking beside it */
  .cert-inner { grid-template-columns: minmax(0, 1fr); gap: 22px; padding: 30px 28px 32px; }
  .cert-mark { width: 50px; height: 50px; }
  .fam-grid-two { grid-template-columns: minmax(0, 1fr); }
  .photo-figure.is-wide img { aspect-ratio: 16 / 9; }
  .hero-body { margin-top: -14px; }
  /* service bands stack, photo first every time — alternating sides is a
     two-column idea and reads as an inconsistent order once stacked */
  .svc-wrap { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .svc-band.flip .photo-figure { order: 1; }
  .svc-band.flip .svc-copy { order: 2; }
  .svc-band { padding: 76px 0 84px; }
  .fam-grid { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; }
  .flow-steps { grid-template-columns: repeat(2, 1fr); }
  .hero-note { margin-top: -10px; }
}

@media (max-width: 760px) {
  .line-grid > *, .line-grid > :nth-child(7):last-child { grid-column: span 6; }
  .line-grid-five > *,
  .line-grid-five > :nth-child(4),
  .line-grid-five > :nth-child(5) { grid-column: span 6; }
  .flow-steps.flow-steps-four { grid-template-columns: 1fr; }
  .place-grid-three { grid-template-columns: 1fr; }
  .footer-grid-five { grid-template-columns: 1fr; gap: 30px; }
  .hero-alt { font-size: 12px; letter-spacing: .1em; }
  .place-grid, .industry-grid-four { grid-template-columns: 1fr; }
  .flow-steps { grid-template-columns: 1fr; row-gap: 34px; }
  .proof-grid { grid-template-columns: repeat(2, 1fr); }
  .proof-item { padding: 6px 0; border-left: 0; }
  .proof-item:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .line-band, .where-band, .family-band, .flow, .proof-band { padding: 90px 0 100px; }
  .ind-row { flex-direction: column; }
  .ind-chip { width: 100%; }
  .photo-figure.is-wide img { aspect-ratio: 4 / 3; }
  .cta-final { padding: 100px 0 110px; }
  .cta-final .page-ctas .btn { width: 100%; justify-content: center; }
  .line-card { padding: 28px 22px 26px; }
  .line-card-num { font-size: 30px; }
  /* nothing under 12px at phone sizes */
  .hero-note { font-size: 12px; letter-spacing: .12em; }
  .cta-closing { font-size: 12px; letter-spacing: .16em; }
}

@media (prefers-reduced-motion: reduce) {
  /* The sweep is injected by script and animated from scaleX(0). With
     transitions collapsed it would sit across the words as a solid yellow
     bar, so it is removed outright rather than merely stopped. */
  .head-sweep { display: none; }
  .pulse-dot { box-shadow: none; }
  /* the rail never fills without scroll animation, so an empty grey rule
     under the steps is just a stray line */
  .flow-rail { display: none; }
  .flow-step .icon, .flow-step.is-on .icon { color: var(--white); }
  .flow-num { color: var(--black); background: var(--yellow); border-color: var(--yellow); }
}


/* ==========================================================
   PLI STAFFING — INDUSTRIES PAGE
   The staffing side has no per-industry child pages, so this page is a
   reference sheet rather than a routing hub. That single fact drives every
   rule below: the cards must read as panels, not as links that lead nowhere.
   Additive only — nothing above this line is modified.
   ========================================================== */

/* ---------- warm interior hero ----------
   .page-hero.is-natural (further up the sheet) already skips the
   desaturate-and-yellow-tint the quality side applies, but it still lands at
   --hero-dim .6, which is a quality-side number. Staffing heroes carry people,
   and people at 60% brightness read as a cold stock photo — the exact failure
   the homepage hero was tuned away from. Same correction, same reasoning.

   Unscoped on purpose: this stylesheet serves only the staffing site, so
   every interior hero here wants the warm number, not just /industries/.
   Equal specificity to the base rule, so it wins on source order. */
.page-hero.is-natural { --hero-dim: .74; }
.page-hero.is-natural .hero-photo img {
  filter: contrast(1.02) saturate(1.06) brightness(var(--hero-dim));
}

/* ---------- static industry panels ----------
   .ind-cards on the quality side is a routing grid: every card is an <a>, and
   the hover rail, the lift and the sliding arrow all promise a destination.
   Here there is no destination, so .is-static strips the affordances and keeps
   only the card chrome. A card that looks clickable and is not is worse than
   one that never offered. */
.ind-cards.is-static { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.ind-cards.is-static .ind-card { cursor: default; }
/* the left rail is the hover affordance — it has nothing to signal here */
.ind-cards.is-static .ind-card::before { content: none; }
.ind-cards.is-static .ind-card:hover {
  transform: none;
  border-color: rgba(255,255,255,.1);
  background: rgba(255,255,255,.03);
}
.ind-cards.is-static .ind-card:hover .ind-card-media img { transform: scale(1.02); }

/* Six photographs on one dark page need a common treatment or the section
   reads as a stock-library dump — this set runs grey metal, cool blue, green
   stands, warm wood, red brick and a blue roof. The quality side solves that
   with full grayscale plus a heavy yellow duotone; that is too cold for a
   staffing page, so this holds a third of the original colour and sits a good
   deal brighter, warm rather than clinical. */
.ind-cards.is-static .ind-card-media { aspect-ratio: 3 / 2; }
.ind-cards.is-static .ind-card-media img,
.ind-cards.is-static .ind-card:hover .ind-card-media img {
  filter: grayscale(.68) sepia(.12) contrast(1.03) brightness(.82);
}
.ind-cards.is-static .ind-card-media::before { opacity: .14; }
.ind-cards.is-static .ind-card-media::after {
  background: linear-gradient(180deg, rgba(5,5,5,0) 55%, rgba(5,5,5,.55));
}

.ind-cards.is-static .ind-card-body { padding: 24px 26px 28px; }
.ind-cards.is-static .ind-card-body h3 {
  font-size: clamp(18px, 1.6vw, 22px);
  text-transform: uppercase; letter-spacing: .01em; line-height: 1.2;
  margin-bottom: 10px;
}
/* the module's <p> reserves 20px for the services list that follows it on the
   quality side; there is no list here, so that becomes dead space above a
   28px pad. The notch still needs clearing, though. */
.ind-cards.is-static .ind-card-body > p {
  margin-bottom: 0;
  padding-right: var(--notch);
  font-size: 14.5px;
}

/* ---------- five reason tiles ----------
   .why-grid is a 3-track grid built for six. Five leaves an orphan, so the
   trailing pair is centred over a six-track grid — the same correction
   .line-grid-five makes on the homepage, for the same reason. */
.why-grid.is-five { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.why-grid.is-five > * { grid-column: span 2; }
.why-grid.is-five > :nth-child(4) { grid-column: 2 / span 2; }
.why-grid.is-five > :nth-child(5) { grid-column: 4 / span 2; }

@media (max-width: 1150px) {
  .ind-cards.is-static { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 920px) {
  /* two up, so the trailing tile sits alone on the last row rather than
     stretching to full width and out-weighting the four above it */
  .why-grid.is-five > *,
  .why-grid.is-five > :nth-child(4),
  .why-grid.is-five > :nth-child(5) { grid-column: span 3; }
}

@media (max-width: 760px) {
  .ind-cards.is-static { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .ind-cards.is-static .ind-card-body { padding: 22px 22px 24px; }
  .why-grid.is-five > *,
  .why-grid.is-five > :nth-child(4),
  .why-grid.is-five > :nth-child(5) { grid-column: span 6; }
}


/* ==========================================================
   PLI STAFFING — STAFFING SOLUTIONS PAGE
   Additive only — nothing above this line is modified.
   ========================================================== */

/* ---------- the five solutions ----------
   The quality side gives each service a full photo band on /services/, but
   each of those bands carries a five-item list and its own CTA. These five
   are a heading and one paragraph each; the same treatment would be five
   large photographs holding up forty-five words apiece.

   So: one section, five anchored rows, read as a spec sheet. Three columns
   at desktop — mark, name, description — which puts all five names in a
   single scannable vertical run instead of buried at the top of five
   paragraphs. */
.sol-stack { padding: 116px 0 124px; }
.sol-block {
  position: relative;
  display: grid;
  grid-template-columns: 64px minmax(0, 300px) minmax(0, 1fr);
  /* The gutters grow with the viewport rather than staying fixed. With a
     44px gap the description column runs to ~776px, the 62ch measure caps
     it at ~620px, and the 150px left over pools as a dead right margin that
     reads as a mistake. Widening the gutters spends that space between the
     columns instead. */
  gap: 0 clamp(40px, 5.4vw, 92px);
  align-items: start;
  padding: 42px 0;
  border-top: 1px solid rgba(255,255,255,.11);
  /* the header is fixed, so a deep link would otherwise drop the heading
     underneath it */
  scroll-margin-top: calc(var(--header-h) + 30px);
}
.sol-block:last-child { border-bottom: 1px solid rgba(255,255,255,.11); }

/* The homepage links straight to #temporary … #project. Without a landing
   cue the page just appears mid-scroll and it is not obvious which block
   was asked for; this rail marks it and fades in rather than snapping. */
.sol-block::before {
  content: ""; position: absolute; left: -26px; top: 0; bottom: 0; width: 3px;
  background: var(--yellow);
  opacity: 0; transition: opacity .45s var(--ease);
}
.sol-block:target::before { opacity: 1; }

.sol-mark { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.sol-index {
  font-size: 14px; font-weight: 900; letter-spacing: .18em;
  color: var(--yellow); line-height: 1;
}
.sol-mark .icon { width: 34px; height: 34px; color: rgba(255,255,255,.9); }
.sol-block h2 {
  font-size: clamp(21px, 2.1vw, 28px);
  text-transform: uppercase; letter-spacing: .01em; line-height: 1.18;
  /* optical alignment: the number's cap-height sits a couple of px above the
     heading's, and matching them by eye reads straighter than matching the
     boxes */
  margin-top: -3px;
}
.sol-block > p {
  font-size: 15.5px; font-weight: 500; line-height: 1.65;
  color: rgba(255,255,255,.72);
  max-width: 62ch;
}

/* ---------- the closing line under the roles list ----------
   Brief copy, not a caption: it needs to read as a sentence rather than as
   the 11px uppercase production marker .figure-note renders. */
.role-note {
  margin-top: 20px;
  font-size: 15px; font-weight: 500; line-height: 1.6;
  color: rgba(255,255,255,.72);
}

@media (max-width: 1150px) {
  /* mark and name share the first row, description drops beneath the name —
     the three-column run stops fitting before the copy stops being readable */
  .sol-block { grid-template-columns: 56px minmax(0, 1fr); gap: 16px 30px; }
  /* The mark is still a 62px vertical stack here (index over icon) while the
     heading beside it is ~25px, so without this it sizes row 1 on its own and
     the paragraph in row 2 starts 56px below the heading instead of 16px —
     heading and body copy visibly detach, in this band only. Spanning both
     rows lets the copy close up under its own heading. Same fix as
     .sol-row .icon further up the sheet. */
  .sol-mark { grid-row: span 2; }
  /* the column is now the full width of the container, so the measure cap
     matters more here than it did in the three-column layout, not less */
  .sol-block > p { grid-column: 2; max-width: 76ch; }
  .sol-block::before { left: -18px; }
}

@media (max-width: 760px) {
  .sol-stack { padding: 84px 0 90px; }
  .sol-block { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 34px 0; }
  .sol-block > p { grid-column: 1; }
  /* no room for an outdented rail at phone widths */
  .sol-block::before { left: -14px; width: 2px; }
  .sol-mark { flex-direction: row; align-items: center; gap: 16px; }
  .sol-mark .icon { width: 28px; height: 28px; }
  .sol-block h2 { margin-top: 0; }
}


/* ==========================================================
   PLI STAFFING — JOB SEEKER PAGES (/jobs-open-positions/, /book-appointment/)
   Additive only — nothing above this line is modified.
   ========================================================== */

/* ---------- pending-integration panel ----------
   Both pages have one section whose real content comes from a third party
   that is not wired up yet: the PCRecruiter job feed, and the Acuity
   scheduler. The panel says so on its face rather than faking listings or a
   calendar. It is deliberately not styled as an error or a warning — nothing
   is broken, the integration simply has not landed — but it is distinct
   enough that nobody mistakes it for finished work.
   Both mount points keep an id (#jobFeed, #scheduler) so the integration has
   somewhere to go. ---------- */
.feed-panel {
  padding: 40px 42px 44px;
  background: rgba(255,255,255,.035);
  border: 1px dashed rgba(255,255,255,.22);
  border-left: 3px solid var(--yellow);
}
.feed-flag {
  display: inline-flex; align-items: center; gap: 9px;
  margin-bottom: 18px;
  font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--yellow);
}
.feed-flag .icon { color: var(--yellow); flex: none; }
.feed-empty {
  font-size: 17px; font-weight: 500; line-height: 1.6;
  color: rgba(255,255,255,.82);
  max-width: 62ch;
  margin-bottom: 26px;
}
.feed-panel .page-ctas { margin-top: 0; }

/* A control with nowhere to go yet. Rendered as a disabled <button> rather
   than an <a href="#">, so it is inert to keyboard and pointer alike and
   announces itself as unavailable instead of silently failing. */
.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: .42;
  cursor: not-allowed;
  pointer-events: none;
}

/* ---------- three-step flow ----------
   Qualified with .flow-steps for the same reason .flow-steps-four is: a bare
   .flow-steps-three ties every .flow-steps rule on specificity and loses on
   source order, which silently lays three steps on the five-column base
   track. See the note on .flow-steps-four above. */
.flow-steps.flow-steps-three { grid-template-columns: repeat(3, 1fr); }
/* rail stops on the last badge — a third of the way in rather than a fifth */
.flow-track.is-three .flow-rail { right: calc(33.333% - 56px); }

/* ---------- four reason tiles ----------
   .why-grid is a 3-track grid built for six. Four on it leaves a single
   orphan on row two; four tracks reads as one deliberate row instead. */
.why-grid.is-four { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ---------- roles list outside a photo band ----------
   .role-list is authored for the .figure-cap column, which is ~355px wide
   and caps the line length for free. On a full-width section it needs its
   own measure or the items run the width of the container. */
.prep-list { max-width: 78ch; }

@media (max-width: 1150px) {
  .why-grid.is-four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 920px) {
  .flow-steps.flow-steps-three { grid-template-columns: repeat(2, 1fr); row-gap: 40px; }
  .flow-track.is-three .flow-rail { display: none; }
  .feed-panel { padding: 34px 30px 36px; }
}

@media (max-width: 760px) {
  .flow-steps.flow-steps-three { grid-template-columns: 1fr; row-gap: 34px; }
  .why-grid.is-four { grid-template-columns: minmax(0, 1fr); }
  .feed-panel { padding: 28px 22px 30px; }
  .feed-empty { font-size: 16px; }
  .feed-panel .page-ctas .btn { width: 100%; justify-content: center; }
}

/* ---------- compact section ----------
   .svc-section carries 120/130px of padding, which is right for a section
   with a grid or a photo band in it. "Prefer to browse first?" is a heading,
   one sentence and one link — at full padding it reads as a section that
   lost its content. */
.svc-section.is-compact { padding: 84px 0 88px; }
.svc-section.is-compact .section-head { margin-bottom: 0; }
.svc-section.is-compact .group-cta { margin-top: 26px; }

@media (max-width: 760px) {
  .svc-section.is-compact { padding: 64px 0 68px; }
}


/* ==========================================================
   PLI STAFFING — ABOUT, CONTACT, LEGAL, 404
   Additive only — nothing above this line is modified.
   ========================================================== */

/* ---------- prose band ----------
   Two paragraphs of straight body copy with no list, grid or photo to sit
   in. .section-intro is capped at 780px and coloured for a lede; this is the
   section's actual content, so it gets a reading measure of its own. */
.prose-band { max-width: 74ch; }
.prose-band p {
  font-size: 16.5px; font-weight: 500; line-height: 1.7;
  color: rgba(255,255,255,.76);
}
.prose-band p + p { margin-top: 20px; }

/* ---------- split CTA ----------
   The About page closes on two audiences at once — "whether you need people
   or need work". A single .page-ctas row would put an employer's button and
   a job seeker's buttons on one line, and each reader has to scan past the
   other's to find their own. Two labelled columns instead, so each side is
   addressed by name. */
.split-cta {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 26px 44px;
  /* Centred as a block, left-aligned inside it. .cta-final centres its
     children, so letting this run the full container width put two
     left-aligned columns under a centred headline and a centred phone line —
     three different alignments in one section. Capping the width and
     centring the block keeps the columns readable and the section coherent. */
  max-width: 780px;
  margin: 34px auto 0;
  text-align: left;
}
.split-cta-side { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.split-cta-label {
  font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--yellow);
}
/* .cta-final centres its children; the columns below it are left-aligned, so
   the divider between them has something to sit against */
.split-cta .page-ctas { margin: 0; justify-content: flex-start; }
.split-cta-side + .split-cta-side { border-left: 1px solid rgba(255,255,255,.14); padding-left: 44px; }

/* ---------- 404 audience groups ----------
   The brief splits the recovery links into Employers and Job seekers rather
   than one undifferentiated set, so each group gets a label and its own row
   of two. */
.lost-grid.is-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lost-group-label {
  margin: 34px 0 16px;
  font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--yellow);
}
.lost-group-label:first-of-type { margin-top: 0; }

@media (max-width: 920px) {
  .split-cta { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  /* the divider was a column separator; stacked, it becomes a top rule */
  .split-cta-side + .split-cta-side {
    border-left: 0; padding-left: 0;
    border-top: 1px solid rgba(255,255,255,.14); padding-top: 28px;
  }
}

@media (max-width: 760px) {
  .lost-grid.is-two { grid-template-columns: minmax(0, 1fr); }
  .prose-band p { font-size: 16px; }
  .split-cta .page-ctas .btn { width: 100%; justify-content: center; }
  .split-cta-side { align-items: stretch; }
  .split-cta-side > .btn { width: 100%; justify-content: center; }
}