@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/barlow-condensed-600.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/barlow-condensed-700.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Barlow';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/barlow-400.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Barlow';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/barlow-500.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Barlow';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/barlow-600.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Barlow';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/barlow-700.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
/* US Machinery Sales — design tokens
   Premium American industrial: navy dominates, red is the action color,
   white/steel does the work. */
:root {
  /* palette */
  --navy-900: #0B1F3A;
  --navy-800: #102A4C;
  --navy-700: #16325C;
  --red-600: #B22234;
  --red-700: #8E1B2A;
  --blue-500: #3E6DB5;
  --blue-300: #8FADD6;
  --white: #FFFFFF;
  --steel-100: #F2F5F8;
  --steel-200: #E4EAF0;
  --steel-300: #C9D2DC;
  --steel-600: #5B6773;
  --ink: #121A24;

  /* type */
  --font-display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --font-body: 'Barlow', 'Segoe UI', Arial, sans-serif;
  --fs-h1: clamp(2.4rem, 1.6rem + 3.2vw, 4.2rem);
  --fs-h2: clamp(1.9rem, 1.4rem + 1.8vw, 2.8rem);
  --fs-h3: clamp(1.35rem, 1.15rem + 0.7vw, 1.75rem);
  --fs-body: clamp(1rem, 0.96rem + 0.15vw, 1.0625rem);
  --fs-small: 0.875rem;
  --lh-body: 1.65;

  /* spacing (4px grid) */
  --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem;
  --s-6: 1.5rem; --s-8: 2rem; --s-12: 3rem; --s-16: 4rem; --s-20: 5rem;

  /* layout */
  --container: 74rem;
  --container-wide: 84rem;
  --radius: 4px;
  --radius-lg: 8px;

  /* effects */
  --shadow-card: 0 1px 2px rgba(11, 31, 58, 0.06), 0 8px 24px -8px rgba(11, 31, 58, 0.14);
  --shadow-card-hover: 0 2px 4px rgba(11, 31, 58, 0.08), 0 16px 40px -12px rgba(11, 31, 58, 0.22);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* signature keyline: thin red-white-blue strip (hero + footer only) */
  --keyline: linear-gradient(to right, var(--red-600) 0 33.4%, var(--white) 33.4% 66.7%, var(--blue-500) 66.7% 100%);
}

/* Mobile legibility.
   --fs-small is 14px, which is fine for meta text on a desktop monitor and too small for
   a phone held at arm's length on a mill floor. On narrow screens the small size steps up
   to 15px, and the two classes that carry real body copy rather than metadata take the
   full body size. Breadcrumbs, stat notes and footer meta stay small on purpose; they are
   chrome, not content. */
@media (max-width: 47.9375rem) {
  :root { --fs-small: 0.9375rem; }
}

/* reset + base */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}
img, picture, video, svg { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; }
a { color: var(--blue-500); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--navy-700); }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.08;
  color: var(--navy-900);
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); text-transform: uppercase; letter-spacing: 0.015em; }
h2 { font-size: var(--fs-h2); text-transform: uppercase; letter-spacing: 0.01em; }
h3 { font-size: var(--fs-h3); }
p  { max-width: 68ch; }

:focus-visible {
  outline: 3px solid var(--blue-500);
  outline-offset: 2px;
  border-radius: 2px;
}

.container { max-width: var(--container); margin-inline: auto; padding-inline: var(--s-6); }
.container--wide { max-width: var(--container-wide); }

.section { padding-block: var(--s-16); }
.section--tight { padding-block: var(--s-12); }
.section--steel { background: var(--steel-100); }
.section--navy { background: var(--navy-900); color: var(--white); }
.section--navy h2, .section--navy h3 { color: var(--white); }
.section--navy p { color: var(--steel-200); }
.section--navy a { color: var(--blue-300); }

.eyebrow {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--red-600);
  display: block;
  margin-bottom: var(--s-3);
}
.section--navy .eyebrow { color: var(--blue-300); }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--navy-900); color: var(--white); padding: var(--s-3) var(--s-6);
}
.skip-link:focus { left: 0; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ===== header ===== */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--navy-900);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.site-header__inner {
  display: flex; align-items: center; gap: var(--s-6);
  max-width: var(--container-wide); margin-inline: auto;
  padding: 0 var(--s-6); min-height: 4.5rem;
}
.site-header__logo { display: flex; align-items: center; flex-shrink: 0; }
.site-header__logo img { height: 3rem; width: auto; }
.site-nav { display: flex; align-items: center; gap: var(--s-2); margin-left: auto; }
.site-nav a {
  font-family: var(--font-display); font-weight: 600; font-size: 1.0625rem;
  letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none;
  color: var(--steel-200); padding: var(--s-3) var(--s-4); border-radius: var(--radius);
  transition: color 0.15s var(--ease), background 0.15s var(--ease);
}
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--white); background: var(--navy-700); }
.site-nav__cta {
  margin-left: var(--s-3);
  background: var(--red-600); color: var(--white) !important;
  white-space: nowrap;
}
.site-nav__cta:hover { background: var(--red-700) !important; }

/* products dropdown */
.nav-drop { position: relative; }
.nav-drop > button {
  font-family: var(--font-display); font-weight: 600; font-size: 1.0625rem;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--steel-200); background: none; border: 0; cursor: pointer;
  padding: var(--s-3) var(--s-4); border-radius: var(--radius);
  display: flex; align-items: center; gap: var(--s-2);
}
.nav-drop > button:hover, .nav-drop.open > button { color: var(--white); background: var(--navy-700); }
.nav-drop__caret { width: 0.6em; height: 0.6em; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform 0.15s var(--ease); }
.nav-drop.open .nav-drop__caret { transform: rotate(225deg) translateY(-1px); }
.nav-drop__panel {
  position: absolute; top: calc(100% + 0.25rem); left: 50%; transform: translateX(-50%);
  display: none; gap: var(--s-8);
  background: var(--white); color: var(--ink);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-card-hover);
  padding: var(--s-6) var(--s-8); min-width: 34rem;
  border-top: 3px solid var(--red-600);
}
.nav-drop.open .nav-drop__panel { display: flex; }
/* The panel hangs 0.25rem below the button, and that strip belongs to neither element.
   Dragging the pointer down through it counts as leaving .nav-drop, so the menu shut
   before you could reach an item. This bridges the gap: it is a child of the panel, so
   the pointer never leaves the dropdown on the way down. */
.nav-drop__panel::before {
  content: ''; position: absolute; left: 0; right: 0;
  top: calc(-1 * (0.25rem + 3px)); height: calc(0.25rem + 3px);
}
.nav-drop__group h4 {
  font-size: var(--fs-small); letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--steel-600); font-family: var(--font-body); font-weight: 600;
  margin-bottom: var(--s-3); white-space: nowrap;
}
.nav-drop__group ul { list-style: none; padding: 0; display: grid; gap: 2px; }
.nav-drop__group a {
  display: block; padding: var(--s-2) var(--s-3); margin-inline: calc(-1 * var(--s-3));
  color: var(--navy-900); text-decoration: none; font-weight: 500; border-radius: var(--radius);
  white-space: nowrap;
}
.nav-drop__group a:hover { background: var(--steel-100); color: var(--red-600); }

/* mobile nav */
.nav-toggle {
  display: none; background: none; border: 0; cursor: pointer; padding: var(--s-3);
  margin-left: auto;
}
.nav-toggle span { display: block; width: 26px; height: 2px; background: var(--white); margin: 6px 0; transition: transform 0.2s var(--ease), opacity 0.2s; }
@media (max-width: 64rem) {
  .nav-toggle { display: block; }
  .site-nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--navy-900); padding: var(--s-4) var(--s-6) var(--s-8);
    border-bottom: 3px solid var(--red-600);
    max-height: calc(100vh - 4.5rem); overflow-y: auto;
  }
  .site-nav.open { display: flex; }
  body.nav-open .nav-toggle span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  body.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
  body.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
  .nav-drop__panel {
    position: static; transform: none; display: none; flex-direction: column; gap: var(--s-4);
    box-shadow: none; border-radius: 0; min-width: 0; border-top: 0;
    background: var(--navy-800); padding: var(--s-4) var(--s-6);
  }
  .nav-drop__group h4 { color: var(--blue-300); }
  .nav-drop__group a { color: var(--steel-200); }
  .nav-drop__group a:hover { background: var(--navy-700); color: var(--white); }
  .nav-drop > button { width: 100%; justify-content: space-between; }
  .site-nav__cta { margin: var(--s-4) 0 0; text-align: center; }
}

/* Small phones. The header needs 356px to lay out at its default sizes (24px padding each
   side + a 234px logo + a 24px gap + the 50px menu button), so on a 320px screen the menu
   button hung 12px off the right edge and every page could be panned sideways.
   Rather than hard-code smaller sizes, tighten the padding and let the logo shrink: it
   gives back exactly as much as it needs to and stays full size everywhere else. */
@media (max-width: 26rem) {
  .site-header__inner { padding-inline: var(--s-4); gap: var(--s-4); }
  .site-header__logo { flex-shrink: 1; min-width: 0; }
  .site-header__logo img { height: auto; max-height: 3rem; max-width: 100%; }
}

/* ===== hero (media-layer contract: swap the poster for a <video> with zero layout change) ===== */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--navy-900); color: var(--white);
  display: grid; align-items: end;
  min-height: min(82vh, 46rem);
}
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media img, .hero__media video { width: 100%; height: 100%; object-fit: cover; }
.hero__media img { animation: hero-drift 24s var(--ease) infinite alternate; }
/* The poster sits under the video so the video can cross-fade in over it. Both fill the
   same box, so there is no layout change when the swap happens. */
.hero__poster, .hero__video { position: absolute; inset: 0; }
/* Cross-fade rather than cut. The clip opens on a title card that looks nothing like the
   poster, so a hard swap read as the page glitching. `is-fading` is added by JS only once it
   has committed to loading a video, which keeps the poster visible for reduced-motion and
   no-JS visitors, and keeps it up if autoplay is refused and `playing` never fires. */
/* Hiding is instant, revealing is the fade. Transitioning both ways meant the element
   spent 500ms fading its own poster out to reveal an identical poster underneath: invisible
   to the eye, but half a second of pointless compositing on first paint. */
.hero__video.is-fading { opacity: 0; transition: none; }
.hero__video.is-fading.is-playing { opacity: 1; transition: opacity 500ms var(--ease); }
@media (prefers-reduced-motion: reduce) {
  .hero__media img { animation: none; }
  .hero__video { transition: none; }
}
@keyframes hero-drift { from { transform: scale(1) } to { transform: scale(1.07) } }
/* Two scrims, not one.
   A still photo can be graded once and checked once. Video cannot: the frame behind the
   headline changes constantly, and this clip has near-white mill roof and sheet metal in
   it. Measured against the original single bottom-up gradient, the H1 fell to a contrast
   ratio of 1.00 against the brightest frames, meaning white text on white. The horizontal
   scrim darkens the side the text sits on and leaves the machinery readable on the other,
   which keeps the footage doing its job while the copy stays legible on every frame.

   Re-measured 2026-08-05 when the hero swapped to the client's full 30 second clip, which
   brought in frames the old ten second cut never contained. The eyebrow failed on the new
   footage at 2.67:1 desktop and 3.13:1 tablet, worst around the 23 to 25 second mark, so
   both gradients were strengthened. Current worst case, by `node scripts/check-hero-contrast.mjs`:
   eyebrow 5.11 desktop / 5.45 tablet / 4.89 mobile, H1 8.77 / 9.45 / 6.13, sub 8.74 / 7.48 / 6.41.
   ⚠ Re-run that gate whenever the hero clip changes. It measures real painted pixels through
   these gradients at every second of the video, and it is the only thing standing between a
   new clip and unreadable copy. */
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to right, rgba(11, 31, 58, 0.90) 0%, rgba(11, 31, 58, 0.80) 45%, rgba(11, 31, 58, 0.16) 78%, rgba(11, 31, 58, 0.06) 100%),
    linear-gradient(to top, rgba(11, 31, 58, 0.93) 0%, rgba(11, 31, 58, 0.60) 55%, rgba(11, 31, 58, 0.42) 100%);
}
/* On a phone the copy runs the full width, so a side scrim buys nothing. Darken evenly. */
@media (max-width: 47.9375rem) {
  .hero::after {
    background: linear-gradient(to top, rgba(11, 31, 58, 0.93) 0%, rgba(11, 31, 58, 0.74) 55%, rgba(11, 31, 58, 0.62) 100%);
  }
}
/* padding-BLOCK only. The `padding` shorthand here used to set left and right to 0, which
   silently cancelled the `padding-inline` this element inherits from .container, so on a
   phone the headline, the paragraph and both buttons sat hard against the screen edge.
   Invisible on desktop, because max-width centres the container and creates a margin. */
.hero__content { padding-block: var(--s-20) var(--s-16); }
/* Measured against the worst frame of the hero video, --blue-300 (#8FADD6) gives the
   eyebrow only 2.39:1. It is small uppercase text, so it needs 4.5:1. This tint keeps a
   trace of the brand blue and clears the bar (5.11 desktop, 5.45 tablet, 4.89 mobile
   against the 30 second clip). It is the tightest element in the hero, so it is the one
   that fails first when the footage changes. Only inside the hero: on solid backgrounds
   elsewhere --blue-300 is fine. */
.hero .eyebrow { color: #EDF2FA; }
/* The hero headline runs longer than the other h1s on the site, so it gets its own ceiling.
   At the global --fs-h1 max of 4.2rem and 22ch it wrapped to four lines and pushed the
   buttons onto the bottom edge of a 900px viewport, which is a font-size problem rather than
   a copy problem: the CTA has to be visible without scrolling. 32ch at 3.5rem holds it to
   three lines with the buttons clear.
   Two lines is possible, but only by letting the headline run the full 1136px of the
   container, and that puts white type straight over the brightest part of the machinery
   frame on the right of the video. The measure stays. Re-check both numbers if the headline
   text ever changes. */
.hero__content h1 { color: var(--white); max-width: 32ch; font-size: clamp(2.4rem, 1.6rem + 2.6vw, 3.5rem); }
.hero__sub { margin-top: var(--s-4); font-size: clamp(1.05rem, 1rem + 0.4vw, 1.3rem); color: var(--steel-200); max-width: 56ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--s-4); margin-top: var(--s-8); }
.hero__keyline { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--keyline); }

/* ===== buttons ===== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  font-family: var(--font-display); font-weight: 600; font-size: 1.125rem;
  letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none;
  padding: 0.8rem 1.75rem; border-radius: var(--radius); border: 2px solid transparent;
  cursor: pointer; transition: background 0.15s var(--ease), border-color 0.15s var(--ease), color 0.15s var(--ease), transform 0.15s var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--red-600); color: var(--white); }
.btn--primary:hover { background: var(--red-700); color: var(--white); }
.btn--ghost { border-color: rgba(255, 255, 255, 0.55); color: var(--white); background: transparent; }
.btn--ghost:hover { border-color: var(--white); background: rgba(255, 255, 255, 0.1); color: var(--white); }
.btn--navy { background: var(--navy-900); color: var(--white); }
.btn--navy:hover { background: var(--navy-700); color: var(--white); }

/* ===== brand bar ===== */
.brand-bar { border-top: 1px solid var(--steel-200); border-bottom: 1px solid var(--steel-200); background: var(--white); }
.brand-bar__inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: var(--s-8) var(--s-16); padding-block: var(--s-8);
}
.brand-bar a { display: block; }
.brand-bar img {
  height: 3.25rem; width: auto; filter: grayscale(1) opacity(0.55);
  transition: filter 0.2s var(--ease);
}
/* Optical sizing, not uniform height, and the reason is worth writing down. The supplied
   Lico artwork carried 40% dead space in its height and 19% in its width, while the EBI and
   Cresswood files are cropped tight to their ink. So a shared CSS height rendered Lico's
   actual logo 40% smaller than the others no matter what number went in here, and raising
   the height just grew the empty space with it. The file is now cropped to its ink
   (2056x663), which is what makes these numbers mean what they say.
   Lico is the flagship and is set deliberately larger than the other three, not level with
   them. Re-measure in the browser if any logo file is ever replaced, and check the new file
   for padding before touching these heights. */
.brand-bar img[data-brand="lico"] { height: 4.5rem; }
.brand-bar img[data-brand="osi"] { height: 3.75rem; }
.brand-bar a:hover img { filter: none; }
/* On a phone the 64px column gap plus logos ranging 78px to 153px wide made the four
   brands wrap one, one, then two, which reads as a mistake rather than a layout. A fixed
   two-up grid is deterministic at every phone width and looks deliberate. */
@media (max-width: 47.9375rem) {
  .brand-bar__inner {
    display: grid; grid-template-columns: repeat(2, 1fr);
    gap: var(--s-6) var(--s-4); justify-items: center; align-items: center;
  }
  .brand-bar img { height: 2.5rem; max-width: 100%; }
  .brand-bar img[data-brand="lico"] { height: 3.375rem; }
  .brand-bar img[data-brand="osi"] { height: 2.875rem; }
  /* Scaling the logos to 40px left their links 40px tall, under the 44px touch minimum.
     The link keeps a 44px box regardless of how tall the artwork inside it is. */
  .brand-bar a { display: flex; align-items: center; justify-content: center; min-height: 44px; width: 100%; }
}

/* ===== cards ===== */
.card-grid { display: grid; gap: var(--s-6); grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); }
.pcard {
  display: flex; flex-direction: column; text-decoration: none; color: inherit;
  background: var(--white); border: 1px solid var(--steel-200); border-radius: var(--radius-lg);
  overflow: hidden; box-shadow: var(--shadow-card);
  transition: box-shadow 0.2s var(--ease), transform 0.2s var(--ease), border-color 0.2s var(--ease);
}
.pcard:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-3px); border-color: var(--steel-300); color: inherit; }
/* Ratio goes on the img, not the wrapper. height:100% against a wrapper whose own height
   comes from aspect-ratio is not a definite height, so it resolves to auto and the photo's
   intrinsic shape wins — near-square shots (900x906, 428x427) rendered 363px tall in a
   240px row and made the grid ragged. .gallery and .phead__img already do it this way. */
.pcard__img { aspect-ratio: 3 / 2; overflow: hidden; background: var(--steel-100); }
.pcard__img img { width: 100%; height: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; }
.pcard__body { padding: var(--s-6); display: flex; flex-direction: column; gap: var(--s-2); flex: 1; }
.pcard__brand {
  align-self: flex-start; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--navy-700);
  background: var(--steel-100); border: 1px solid var(--steel-200);
  padding: 2px var(--s-2); border-radius: 999px;
}
.pcard h3 { font-size: 1.4rem; text-transform: uppercase; }
.pcard__hook { color: var(--steel-600); font-size: var(--fs-small); }
.pcard__link {
  margin-top: auto; padding-top: var(--s-3);
  font-family: var(--font-display); font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--red-600); font-size: 1rem;
}
.pcard:hover .pcard__link { text-decoration: underline; text-underline-offset: 3px; }

/* ===== stat strip ===== */
.stat-strip { background: var(--navy-900); color: var(--white); }
.stat-strip__inner {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: var(--s-8); padding-block: var(--s-12); text-align: center;
}
.stat { border-left: 1px solid rgba(255, 255, 255, 0.15); }
.stat:first-child { border-left: 0; }
.stat__value {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2.4rem, 2rem + 1.6vw, 3.6rem); line-height: 1;
  font-variant-numeric: tabular-nums; color: var(--white);
}
.stat__unit { color: var(--blue-300); font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; letter-spacing: 0.08em; text-transform: uppercase; margin-top: var(--s-1); }
.stat__note { color: var(--steel-300); font-size: var(--fs-small); margin-top: var(--s-2); }
@media (max-width: 40rem) { .stat { border-left: 0; } }

/* ===== principal band =====
   The navy statement that replaced the homepage stat strip. It is deliberately NOT the
   copy-left / asset-right shape the coverage section already uses further down the page:
   the mark leads, the words follow, and a hairline does the dividing instead of a 50/50
   grid, so the two navy-adjacent moments on the page do not read as the same block twice.
   The logo sits on a white plate rather than straight on the navy because Lico's green is
   #10814B, which lands at 3.3:1 against --navy-900. That clears the 3:1 floor for a
   graphical object but reads muddy, and a manufacturer's mark should sit on its own field
   anyway. The plate is the only white shape in the band, which is what makes it the thing
   your eye goes to first. */
.principal { background: var(--navy-900); color: var(--white); }
.principal > .container { padding-block: var(--s-16); }
.principal__inner {
  display: grid; grid-template-columns: 1fr; gap: var(--s-8);
}
@media (min-width: 56rem) {
  .principal__inner {
    grid-template-columns: minmax(15rem, 20rem) 1fr;
    /* Centered, not top-aligned. The copy block runs about twice the height of the plate, so
       aligning to the start left a dead 200px of navy under the mark and the band read as
       unfinished rather than as deliberate space. */
    gap: var(--s-16); align-items: center;
  }
  /* The hairline belongs to the copy, not the mark, so it starts at the cap height of the
     heading rather than at the top of the logo plate. */
  .principal__body { border-left: 1px solid rgba(255, 255, 255, 0.16); padding-left: var(--s-12); }
}
.principal__mark {
  background: var(--white); border-radius: var(--radius-lg);
  padding: var(--s-6) var(--s-8);
  display: flex; align-items: center; justify-content: center;
  /* Cap the plate on phones so the mark does not span the full column and dwarf the copy. */
  width: 100%; max-width: 20rem;
  box-shadow: 0 12px 32px -16px rgba(0, 0, 0, 0.55);
}
.principal__mark img { display: block; width: 100%; height: auto; }
.principal h2 { color: var(--white); margin-bottom: var(--s-6); }
.principal p { color: var(--steel-200); max-width: 60ch; }
.principal p + p { margin-top: var(--s-4); }
/* One step up from body, not a pull quote. It carries the paragraph the client asked to be
   the emphasis of the section, and it has to stay readable at 320px. */
.principal__lead {
  font-size: clamp(1.125rem, 1.02rem + 0.5vw, 1.375rem);
  line-height: 1.55; color: var(--white);
}
/* .principal__stats is gone with the four figures it laid out. The client asked for that block
   deleted entirely from the Lico section, so there is no variant of it to style here. The .stat
   rules above stay because product pages still build a stat-strip from products.json, which is
   where those figures belong: next to the machine they describe, with the qualifier intact. */

/* ===== spec table ===== */
.spec-table { width: 100%; border-collapse: collapse; font-size: var(--fs-body); }
.spec-table caption { text-align: left; font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h3); text-transform: uppercase; color: var(--navy-900); padding-bottom: var(--s-4); }
.spec-table th, .spec-table td { text-align: left; padding: var(--s-3) var(--s-4); vertical-align: top; border-bottom: 1px solid var(--steel-200); }
.spec-table tbody tr:nth-child(odd) { background: var(--steel-100); }
.spec-table th { width: 34%; font-weight: 600; color: var(--navy-900); }
.spec-table td { font-variant-numeric: tabular-nums; }
/* The brand-hub model-family table. The base .spec-table is a two-column key/value list, so
   its 34% first column wrecks a real multi-column table. This variant hands column widths
   back to the browser and gives the header row its own treatment. The .spec-wrap parent is
   already overflow-x:auto, which is what keeps this off the mobile-overflow gate. */
.spec-table--cols th { width: auto; }
.spec-table--cols thead th {
  background: var(--navy-900); color: var(--white);
  font-family: var(--font-display); text-transform: uppercase;
  letter-spacing: 0.06em; font-size: var(--fs-small); white-space: nowrap;
}
.spec-table--cols tbody tr:nth-child(odd) { background: var(--steel-100); }
/* On a phone a three-column table can only side-scroll, which hides the third column behind
   a gesture nobody makes, and it puts cells past the viewport edge. Under 40rem each row
   becomes a block and every cell announces its own column via data-label, so the whole table
   is readable in one vertical scroll with no horizontal movement at all. */
@media (max-width: 40rem) {
  .spec-table--cols thead {
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  .spec-table--cols tr { display: block; padding: var(--s-3) 0; border-bottom: 2px solid var(--steel-200); }
  .spec-table--cols th, .spec-table--cols td { display: block; width: auto; border-bottom: 0; padding: var(--s-1) var(--s-4); }
  .spec-table--cols th[scope="row"] { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.04em; }
  .spec-table--cols td::before {
    content: attr(data-label) ": "; font-weight: 600; color: var(--navy-900);
  }
}
/* The brand name in a product page eyebrow links to that brand's hub. As plain inline text it
   measured 123x19, under the 44px minimum touch target. The padding grows the hit rectangle
   and the equal negative margin takes the layout back, so nothing moves on the page. */
.phead__series a {
  display: inline-block;
  padding-block: 0.8rem; margin-block: -0.8rem;
}
.spec-wrap { overflow-x: auto; }

/* ===== gallery ===== */
.gallery { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); }
.gallery figure { border-radius: var(--radius-lg); overflow: hidden; background: var(--steel-100); }
.gallery img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 0.3s var(--ease); }
.gallery figure:hover img { transform: scale(1.04); }

/* ===== video facade ===== */
.video-grid { display: grid; gap: var(--s-6); grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); }
.vfacade { position: relative; border-radius: var(--radius-lg); overflow: hidden; background: var(--navy-900); border: 0; padding: 0; cursor: pointer; display: block; width: 100%; text-align: left; }
.vfacade img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; opacity: 0.92; transition: opacity 0.2s var(--ease), transform 0.3s var(--ease); }
.vfacade:hover img { opacity: 1; transform: scale(1.03); }
.vfacade__play {
  position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none;
}
.vfacade__play::before {
  content: ""; width: 4rem; height: 4rem; border-radius: 999px;
  background: var(--red-600); opacity: 0.92;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
  transition: transform 0.2s var(--ease);
}
.vfacade__play::after {
  content: ""; position: absolute;
  border-style: solid; border-width: 0.55rem 0 0.55rem 0.95rem;
  border-color: transparent transparent transparent var(--white);
  margin-left: 0.2rem;
}
.vfacade:hover .vfacade__play::before { transform: scale(1.08); }
.vfacade__label {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: var(--s-6) var(--s-4) var(--s-3);
  background: linear-gradient(to top, rgba(11, 31, 58, 0.92), transparent);
  color: var(--white); font-weight: 500; font-size: var(--fs-small);
}
.video-item.playing .vfacade { display: none; }
.video-item iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: var(--radius-lg); }

/* video filters */
.filter-pills { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-block: var(--s-6); }
.filter-pills button {
  font-family: var(--font-display); font-weight: 600; font-size: 1rem;
  letter-spacing: 0.06em; text-transform: uppercase;
  border: 1.5px solid var(--steel-300); background: var(--white); color: var(--navy-900);
  padding: var(--s-2) var(--s-4); border-radius: 999px; cursor: pointer;
  transition: all 0.15s var(--ease);
}
.filter-pills button:hover { border-color: var(--navy-700); }
.filter-pills button[aria-pressed="true"] { background: var(--navy-900); border-color: var(--navy-900); color: var(--white); }

/* ===== rep-model block ===== */
.rep-block { display: grid; gap: var(--s-6); grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.rep-block article { background: var(--white); border-top: 3px solid var(--red-600); box-shadow: var(--shadow-card); border-radius: 0 0 var(--radius-lg) var(--radius-lg); padding: var(--s-6); }
.rep-block h3 { margin-bottom: var(--s-2); font-size: 1.3rem; text-transform: uppercase; }
.rep-block p { font-size: var(--fs-small); color: var(--steel-600); }

/* ===== FAQ ===== */
.faq { display: grid; gap: var(--s-3); max-width: 52rem; }
.faq details { background: var(--white); border: 1px solid var(--steel-200); border-radius: var(--radius-lg); }
.faq summary {
  cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: var(--s-4);
  padding: var(--s-4) var(--s-6);
  font-family: var(--font-display); font-weight: 600; font-size: 1.2rem; color: var(--navy-900);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.5rem; color: var(--red-600); flex-shrink: 0; transition: transform 0.2s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details > div { padding: 0 var(--s-6) var(--s-6); color: var(--steel-600); }

/* ===== CTA block ===== */
.cta-block { background: var(--navy-900); color: var(--white); }
.cta-block__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-8); padding-block: var(--s-16); }
.cta-block h2 { color: var(--white); max-width: 20ch; }
.cta-block p { color: var(--steel-300); margin-top: var(--s-3); }
.cta-block__actions { display: flex; flex-wrap: wrap; gap: var(--s-4); }
.cta-block__phone { font-family: var(--font-display); font-weight: 700; font-size: 1.9rem; color: var(--white); text-decoration: none; letter-spacing: 0.02em; }
.cta-block__phone:hover { color: var(--blue-300); }

/* ===== breadcrumbs ===== */
.crumbs { font-size: var(--fs-small); color: var(--steel-600); padding-block: var(--s-4); }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s-2); padding: 0; }
.crumbs li + li::before { content: "/"; margin-right: var(--s-2); color: var(--steel-300); }
.crumbs a { color: var(--steel-600); text-decoration: none; }
.crumbs a:hover { color: var(--red-600); }
.crumbs [aria-current] { color: var(--navy-900); font-weight: 500; }

/* ===== coverage ===== */
.coverage { display: grid; gap: var(--s-12); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 56rem) { .coverage { grid-template-columns: 1.1fr 1fr; } }
.coverage__map svg { width: 100%; height: auto; }
.coverage__key { margin-top: var(--s-4); font-size: var(--fs-small); color: var(--steel-600); max-width: 44ch; }
/* This line is content, not chrome. It is the sentence that stops a shaded state being read
   as an installation, so on a phone it goes up to full body size rather than staying at the
   15px the metadata classes use. The mobile audit fails the page otherwise, and rightly. */
@media (max-width: 47.9375rem) { .coverage__key { font-size: var(--fs-body); } }

/* ===== forms ===== */
.form-grid { display: grid; gap: var(--s-4); grid-template-columns: 1fr 1fr; }
.form-grid .full { grid-column: 1 / -1; }
@media (max-width: 40rem) { .form-grid { grid-template-columns: 1fr; } }
.field label { display: block; font-weight: 600; font-size: var(--fs-small); color: var(--navy-900); margin-bottom: var(--s-1); }
.field input, .field select, .field textarea {
  width: 100%; padding: 0.7rem var(--s-4);
  border: 1.5px solid var(--steel-300); border-radius: var(--radius);
  background: var(--white); color: var(--ink);
  transition: border-color 0.15s var(--ease);
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--blue-500); outline: none; box-shadow: 0 0 0 3px rgba(62, 109, 181, 0.18); }
.field textarea { min-height: 8rem; resize: vertical; }
.form-note { font-size: var(--fs-small); color: var(--steel-600); }
.hp-field { position: absolute; left: -9999px; height: 0; overflow: hidden; }

/* ===== footer ===== */
.site-footer { background: var(--navy-900); color: var(--steel-300); }
.site-footer__keyline { height: 4px; background: var(--keyline); }
.site-footer__inner { display: grid; gap: var(--s-12); padding-block: var(--s-16); grid-template-columns: 1fr; }
@media (min-width: 56rem) { .site-footer__inner { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.site-footer h4 { color: var(--white); font-size: 1.1rem; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: var(--s-4); }
.site-footer ul { list-style: none; padding: 0; display: grid; gap: var(--s-2); }
.site-footer a { color: var(--steel-300); text-decoration: none; }
.site-footer a:hover { color: var(--white); }
.site-footer__logo img { height: 3.5rem; width: auto; margin-bottom: var(--s-4); }
.site-footer__meta { border-top: 1px solid rgba(255, 255, 255, 0.1); padding-block: var(--s-6); font-size: var(--fs-small); display: flex; flex-wrap: wrap; gap: var(--s-4); justify-content: space-between; }
.site-footer__phone { font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; color: var(--white) !important; }

/* page-specific layouts */

/* product page header */
.phead { background: var(--steel-100); border-bottom: 1px solid var(--steel-200); }
.phead__inner { display: grid; gap: var(--s-8); padding-block: var(--s-12); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 56rem) { .phead__inner { grid-template-columns: 1.1fr 1fr; } }
.phead__series { color: var(--red-600); }
.phead p { margin-top: var(--s-4); font-size: 1.1rem; }
.phead__img { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-card); }
.phead__img img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.phead__actions { display: flex; flex-wrap: wrap; gap: var(--s-4); margin-top: var(--s-6); }

/* prose sections ("how it works") */
.prose { max-width: 68ch; }
.prose h2 { margin-block: var(--s-8) var(--s-4); }
.prose h3 { margin-block: var(--s-6) var(--s-3); }
.prose p + p { margin-top: var(--s-4); }
.prose ul { padding-left: 1.2rem; }
.prose li { margin-block: var(--s-2); }

/* two-column feature rows */
.split { display: grid; gap: var(--s-8); align-items: center; grid-template-columns: 1fr; }
@media (min-width: 56rem) {
  .split { grid-template-columns: 1fr 1fr; }
  .split--flip > :first-child { order: 2; }
}
.split__img { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-card); }
.split__img img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

/* downloads */
.dl-list { list-style: none; padding: 0; display: grid; gap: var(--s-3); max-width: 40rem; }
.dl-list a {
  display: flex; align-items: center; gap: var(--s-4);
  background: var(--white); border: 1px solid var(--steel-200); border-radius: var(--radius-lg);
  padding: var(--s-4) var(--s-6); text-decoration: none; color: var(--navy-900); font-weight: 500;
  transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
.dl-list a:hover { border-color: var(--red-600); box-shadow: var(--shadow-card); }
.dl-list .ico {
  flex-shrink: 0; width: 2.5rem; height: 2.5rem; border-radius: var(--radius);
  background: var(--red-600); color: var(--white); display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 700; font-size: 0.8rem; letter-spacing: 0.05em;
}
.dl-list .size { margin-left: auto; color: var(--steel-600); font-size: var(--fs-small); }

/* contact page */
.contact-grid { display: grid; gap: var(--s-12); grid-template-columns: 1fr; }
@media (min-width: 56rem) { .contact-grid { grid-template-columns: 1.2fr 1fr; } }
.contact-aside { background: var(--steel-100); border-radius: var(--radius-lg); padding: var(--s-8); align-self: start; }
.contact-aside h3 { margin-bottom: var(--s-3); }
.contact-aside ul { list-style: none; padding: 0; display: grid; gap: var(--s-4); }
.contact-aside .big { font-family: var(--font-display); font-weight: 700; font-size: 1.6rem; color: var(--navy-900); text-decoration: none; }
.contact-aside .big:hover { color: var(--red-600); }
.steps { counter-reset: step; list-style: none; padding: 0; display: grid; gap: var(--s-4); }
.steps li { display: flex; gap: var(--s-4); align-items: baseline; }
.steps li::before {
  counter-increment: step; content: counter(step);
  flex-shrink: 0; width: 2rem; height: 2rem; border-radius: 999px;
  background: var(--navy-900); color: var(--white); display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 700;
}

/* 404 */
.notfound { text-align: center; padding-block: var(--s-20); }
.notfound h1 { font-size: clamp(4rem, 10vw, 8rem); color: var(--steel-300); }

/* Mobile body copy.
   These two carry real content rather than metadata, so on a phone they take the full
   body size instead of the small size. This lives in pages.css because the CSS is
   concatenated tokens -> base -> components -> pages, and the original declarations are
   in components.css; an override earlier in that order loses on source order. */
@media (max-width: 47.9375rem) {
  .pcard__hook,
  .rep-block p { font-size: 1rem; line-height: 1.6; }
}