/* ==========================================================================
   Innovative Manufacturing Services / CarrylineUSA
   Design system — industrial, editorial, photography-led.
   ========================================================================== */

/* ---------- Fonts ---------- */
@font-face { font-family: "Roboto"; src: url("../fonts/roboto-300.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Roboto"; src: url("../fonts/roboto-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Roboto"; src: url("../fonts/roboto-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Roboto"; src: url("../fonts/roboto-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Roboto"; src: url("../fonts/roboto-900.woff2") format("woff2"); font-weight: 900; font-style: normal; font-display: swap; }

/* ---------- Tokens ---------- */
:root {
  --blue:      #0000B8;
  --blue-600:  #0000A0;
  --blue-700:  #000086;
  --blue-tint: #F1F1FA;

  --ink:       #16181A;
  --ink-900:   #0C0E0F;
  --ink-800:   #252727;
  --ink-700:   #33383B;

  --gray-600:  #5F6669;
  --gray-500:  #84898C;
  --gray-400:  #ADB1B3;
  --gray-300:  #CFD1D2;
  --gray-200:  #E2E4E5;
  --gray-100:  #F0F0F0;
  --paper:     #F7F8F8;
  --white:     #FFFFFF;

  --shell:     1320px;
  --gut:       clamp(20px, 4vw, 56px);

  --hdr:       76px;
  --topbar:    38px;

  --ease:      cubic-bezier(.22,.61,.36,1);
  --shadow:    0 18px 50px rgba(12,14,15,.13);
  --shadow-sm: 0 2px 14px rgba(12,14,15,.09);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: "Roboto", "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink-800);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; line-height: 1.12; letter-spacing: -.015em; color: var(--ink); }
p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }
ul { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
::selection { background: var(--blue); color: #fff; }

.shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--gut); }
.skip {
  position: absolute; left: 0; top: -100px; z-index: 999;
  background: var(--blue); color: #fff; padding: 14px 22px; font-weight: 500;
  transition: top .18s var(--ease);
}
.skip:focus { top: 0; }

/* ---------- Typographic helpers ---------- */
.kicker {
  display: flex; align-items: center; gap: 12px;
  font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--blue); margin: 0 0 20px;
}
.kicker::before { content: ""; width: 28px; height: 2px; background: var(--blue); flex: none; }
.kicker--light { color: #fff; }
.kicker--light::before { background: #fff; }

.h-display { font-size: clamp(2.35rem, 5.2vw, 4.35rem); font-weight: 300; line-height: 1.03; letter-spacing: -.03em; }
.h-1 { font-size: clamp(2rem, 3.9vw, 3.15rem); font-weight: 300; letter-spacing: -.025em; }
.h-2 { font-size: clamp(1.65rem, 2.8vw, 2.4rem); font-weight: 300; letter-spacing: -.022em; }
.h-3 { font-size: clamp(1.2rem, 1.7vw, 1.5rem); font-weight: 500; letter-spacing: -.012em; }
.lede { font-size: clamp(1.05rem, 1.35vw, 1.28rem); font-weight: 300; line-height: 1.55; color: var(--gray-600); }
.muted { color: var(--gray-600); }
.prose > * + * { margin-top: 1.1em; }
.prose strong { font-weight: 500; color: var(--ink); }

/* ---------- Buttons & links ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 52px; padding: 0 30px;
  font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  background: var(--blue); color: #fff; border: 2px solid var(--blue);
  transition: background .22s var(--ease), border-color .22s var(--ease), color .22s var(--ease);
}
.btn:hover { background: var(--blue-700); border-color: var(--blue-700); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: #fff; }
.btn--onDark { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); }
.btn--onDark:hover { background: #fff; color: var(--ink); border-color: #fff; }
.btn--white { background: #fff; color: var(--blue); border-color: #fff; }
.btn--white:hover { background: transparent; color: #fff; border-color: #fff; }

.arrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--blue);
}
.arrow::after {
  content: ""; width: 22px; height: 8px; flex: none;
  background: currentColor;
  clip-path: polygon(0 3px, 15px 3px, 12px 0, 16px 0, 22px 4px, 16px 8px, 12px 8px, 15px 5px, 0 5px);
  transition: transform .24s var(--ease);
}
.arrow:hover::after { transform: translateX(6px); }
.arrow--light { color: #fff; }
.arrow--ink  { color: var(--ink); }

/* ==========================================================================
   Top utility bar
   ========================================================================== */
.topbar {
  background: var(--ink-900); color: var(--gray-400);
  font-size: 12px; letter-spacing: .07em; text-transform: uppercase; font-weight: 500;
}
.topbar__in { display: flex; align-items: center; justify-content: flex-end; gap: 28px; min-height: var(--topbar); }
.topbar a { transition: color .18s var(--ease); }
.topbar a:hover { color: #fff; }
.topbar__phone { margin-right: auto; color: #fff; display: inline-flex; align-items: center; gap: 9px; }
.topbar__phone svg { width: 13px; height: 13px; fill: var(--blue-tint); }
.topbar__sep { width: 1px; height: 14px; background: rgba(255,255,255,.16); }
@media (max-width: 900px) { .topbar { display: none; } }

/* ==========================================================================
   Header + mega menu
   ========================================================================== */
.hdr {
  position: sticky; top: 0; z-index: 100;
  background: #fff; border-bottom: 1px solid var(--gray-200);
  transition: box-shadow .25s var(--ease);
}
.hdr.is-stuck { box-shadow: 0 4px 22px rgba(12,14,15,.09); }
/* Positioning context for the mega panels: anchoring them to the header shell
   (rather than to each nav item) keeps a 1180px panel from overflowing the
   viewport when the trigger sits near the right edge. */
.hdr__in { position: relative; display: flex; align-items: center; gap: 24px; min-height: var(--hdr); }

/* <picture> must not create a box of its own — layout is driven by the <img>. */
picture { display: contents; }

.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* CarrylineUSA is the brand; IMS is the parent company, set beneath it. */
.brand { display: flex; flex-direction: column; justify-content: center; gap: 5px; flex: none; }
.brand__mark { height: 21px; width: auto; }
.brand__div {
  font-size: 8.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--gray-500); line-height: 1; white-space: nowrap;
}

.nav { margin-left: auto; height: var(--hdr); }
.nav__list { display: flex; height: 100%; }
.nav__item { position: static; display: flex; }
.nav__link {
  display: inline-flex; align-items: center; gap: 8px; height: 100%; padding: 0 15px;
  font-size: 12.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-800);
  white-space: nowrap;
  position: relative; transition: color .18s var(--ease);
}
.nav__link::after {
  content: ""; position: absolute; left: 15px; right: 15px; bottom: 0; height: 3px;
  background: var(--blue); transform: scaleX(0); transform-origin: left; transition: transform .26s var(--ease);
}
.nav__item:hover > .nav__link, .nav__item.is-open > .nav__link, .nav__link[aria-current="page"] { color: var(--blue); }
.nav__item:hover > .nav__link::after, .nav__item.is-open > .nav__link::after, .nav__link[aria-current="page"]::after { transform: scaleX(1); }
.nav__caret { width: 8px; height: 5px; background: currentColor; clip-path: polygon(0 0, 8px 0, 4px 5px); transition: transform .2s var(--ease); }
.nav__item.is-open .nav__caret { transform: rotate(180deg); }

.mega {
  position: absolute; top: 100%; left: 50%; transform: translate(-50%, 12px);
  width: min(1180px, calc(100vw - 40px));
  background: #fff; border: 1px solid var(--gray-200); border-top: 3px solid var(--blue);
  box-shadow: var(--shadow);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .2s var(--ease), transform .24s var(--ease), visibility .2s;
}
.nav__item.is-open .mega { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0); }
.mega__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) 300px; }
.mega__grid--wide { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mega__col { padding: 32px 30px; border-right: 1px solid var(--gray-100); }
.mega__col:last-child { border-right: 0; }
.mega__title {
  font-size: 11px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase;
  color: var(--gray-500); margin: 0 0 18px; padding-bottom: 12px; border-bottom: 1px solid var(--gray-200);
}
.mega__links li + li { margin-top: 3px; }
.mega__links a {
  display: block; padding: 7px 0; font-size: 15px; color: var(--ink-800);
  transition: color .16s var(--ease), transform .18s var(--ease);
}
.mega__links a:hover { color: var(--blue); transform: translateX(4px); }

.mega__promo { background: var(--paper); padding: 0; display: flex; flex-direction: column; }
.mega__promoCard { display: block; position: relative; flex: 1; min-height: 132px; overflow: hidden; }
.mega__promoCard + .mega__promoCard { border-top: 1px solid var(--gray-200); }
.mega__promoCard img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .55s var(--ease); }
.mega__promoCard::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(12,14,15,.86) 8%, rgba(12,14,15,.18) 78%); }
.mega__promoCard:hover img { transform: scale(1.06); }
.mega__promoLabel {
  position: absolute; left: 22px; right: 22px; bottom: 18px; z-index: 1;
  color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase;
  display: flex; align-items: center; gap: 10px;
}
.mega__promoLabel::after { content: ""; width: 18px; height: 7px; background: #fff; clip-path: polygon(0 2.5px, 12px 2.5px, 9px 0, 13px 0, 18px 3.5px, 13px 7px, 9px 7px, 12px 4.5px, 0 4.5px); }

.hdr__actions { display: flex; align-items: center; gap: 12px; flex: none; }
.hdr__cta {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 22px;
  background: var(--blue); color: #fff;
  font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  transition: background .2s var(--ease);
}
.hdr__cta:hover { background: var(--blue-700); }

.burger { display: none; width: 46px; height: 46px; align-items: center; justify-content: center; flex-direction: column; gap: 5px; }
.burger span { display: block; width: 24px; height: 2px; background: var(--ink); transition: transform .28s var(--ease), opacity .2s; }
.burger.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger.is-active span:nth-child(2) { opacity: 0; }
.burger.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Between the desktop breakpoint and ~1360px the full-width lockup, five nav
   items and the quote button are a tight fit. Compact them rather than wrap. */
@media (max-width: 1420px) {
  .hdr__in { gap: 16px; }
  .brand__mark { height: 19px; }
  .brand__div { font-size: 8px; letter-spacing: .1em; }
  .nav__link { padding: 0 12px; font-size: 12px; letter-spacing: .07em; }
  .nav__link::after { left: 12px; right: 12px; }
  .hdr__cta { padding: 0 16px; font-size: 11.5px; letter-spacing: .08em; }
}

@media (max-width: 1180px) {
  .nav, .hdr__actions .hdr__cta { display: none; }
  .burger { display: flex; margin-left: auto; }
}

/* The CarrylineUSA wordmark is a 14.5:1 mark — shrink it, and drop the division
   line, before it pushes the burger off a narrow viewport. */
@media (max-width: 620px) {
  .hdr__in { gap: 12px; }
  .brand__mark { height: 17px; }
  .brand__div { display: none; }
}

/* Keep the off-canvas drawer out of the layout entirely on desktop, so its
   translated width never registers as horizontal page overflow. */
@media (min-width: 1181px) { .drawer { display: none; } }

/* ---------- Mobile drawer ---------- */
.drawer {
  position: fixed; inset: 0; top: 0; z-index: 99;
  background: #fff; padding: calc(var(--hdr) + 16px) 0 60px;
  overflow-y: auto; transform: translateX(100%); transition: transform .34s var(--ease);
  visibility: hidden;
}
.drawer.is-open { transform: none; visibility: visible; }
.drawer__group { border-bottom: 1px solid var(--gray-200); }
.drawer__toggle {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  padding: 19px 0; font-size: 14px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; text-align: left;
}
.drawer__toggle span:last-child { width: 11px; height: 7px; background: var(--blue); clip-path: polygon(0 0, 11px 0, 5.5px 7px); transition: transform .22s var(--ease); }
.drawer__group.is-open .drawer__toggle span:last-child { transform: rotate(180deg); }
.drawer__panel { display: none; padding: 0 0 18px; }
.drawer__group.is-open .drawer__panel { display: block; }
.drawer__sub { font-size: 10.5px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: var(--gray-500); margin: 14px 0 8px; }
.drawer__panel a { display: block; padding: 9px 0 9px 16px; border-left: 2px solid var(--gray-200); color: var(--gray-600); }
.drawer__panel a:hover { color: var(--blue); border-left-color: var(--blue); }
.drawer__foot { margin-top: 28px; display: grid; gap: 12px; }

/* ==========================================================================
   Hero (home)
   ========================================================================== */
.hero { position: relative; min-height: min(760px, calc(100svh - var(--hdr))); display: flex; background: var(--ink-900); overflow: hidden; }
.hero__slide { position: absolute; inset: 0; opacity: 0; transition: opacity .9s var(--ease); }
.hero__slide.is-active { opacity: 1; }
.hero__slide img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: transform 7.5s linear; }
.hero__slide.is-active img { transform: scale(1); }
.hero__slide::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(105deg, rgba(8,10,11,.9) 0%, rgba(8,10,11,.66) 42%, rgba(8,10,11,.15) 78%);
}
.hero__body { position: relative; z-index: 2; align-self: center; width: 100%; padding: 92px 0 132px; }
.hero__copy { max-width: 720px; }
.hero__copy h1, .hero__copy h2 { color: #fff; }
.hero__text { color: rgba(255,255,255,.8); font-size: clamp(1.05rem, 1.35vw, 1.3rem); font-weight: 300; margin: 24px 0 36px; max-width: 560px; }
.hero__panel { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; border-top: 1px solid rgba(255,255,255,.16); }
.hero__tabs { display: flex; }
.hero__tab {
  flex: 1; padding: 22px 20px; text-align: left; position: relative;
  color: rgba(255,255,255,.62); font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  border-right: 1px solid rgba(255,255,255,.14); transition: color .2s var(--ease), background .2s var(--ease);
}
.hero__tab:last-child { border-right: 0; }
.hero__tab:hover { color: #fff; background: rgba(255,255,255,.06); }
.hero__tab.is-active { color: #fff; }
.hero__tab::after { content: ""; position: absolute; left: 0; top: -1px; height: 3px; width: 0; background: var(--blue); }
.hero__tab.is-active::after { width: 100%; transition: width 7s linear; }
@media (max-width: 900px) {
  .hero { min-height: 620px; }
  .hero__body { padding: 70px 0 96px; }
  .hero__panel { display: none; }
  .hero__slide::after { background: linear-gradient(180deg, rgba(8,10,11,.62) 0%, rgba(8,10,11,.88) 100%); }
}

/* ---------- Page hero (inner) ---------- */
.phero { position: relative; background: var(--ink-900); min-height: 420px; display: flex; align-items: flex-end; overflow: hidden; }
.phero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.phero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(8,10,11,.9) 0%, rgba(8,10,11,.6) 55%, rgba(8,10,11,.28) 100%); }
.phero__in { position: relative; z-index: 2; width: 100%; padding: 72px 0 56px; }
.phero h1 { color: #fff; max-width: 900px; }
.phero__text { color: rgba(255,255,255,.78); font-weight: 300; font-size: clamp(1rem, 1.2vw, 1.2rem); margin-top: 20px; max-width: 620px; }
.phero--slim { min-height: 320px; }
/* Portrait heroes. cover crops a 1.3-ratio portrait to about a quarter of its
   height at 420px, so the machine in the frame stops being legible - the exact
   complaint raised about the alpine page. Applied by the generator wherever the
   hero photograph is taller than it is wide. */
.phero--tall { min-height: 620px; }
@media (max-width: 700px) { .phero--tall { min-height: 500px; } }
/* Optional caption on a full-bleed hero. Added so the two photos the client
   actually pointed at - the bakery double spiral and the alpine hero - can be
   labelled in place; before this, only .split could carry a caption, which is
   how a caption ended up on the wrong photograph. Full-width scrim, text held
   to .shell so it lines up with the h1 above it. */
.phero__cap { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; padding: 34px 0 14px; background: linear-gradient(to top, rgba(8,10,11,.9), rgba(8,10,11,0)); }
.phero__cap p { margin: 0; max-width: 760px; font-size: 13.5px; line-height: 1.55; color: rgba(255,255,255,.9); }
.phero__cap strong { font-weight: 700; color: #fff; }
/* Keep the hero copy clear of the caption strip rather than letting them overlap. */
.phero--cap .phero__in { padding-bottom: 92px; }

.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.6); margin-bottom: 22px; }
.crumbs a:hover { color: #fff; }
.crumbs span { color: rgba(255,255,255,.34); }

/* ==========================================================================
   Sections
   ========================================================================== */
.sec { padding: clamp(64px, 8vw, 120px) 0; }
.sec--tight { padding: clamp(48px, 5vw, 76px) 0; }
.sec--paper { background: var(--paper); }
.sec--ink { background: var(--ink-900); color: var(--gray-300); }
.sec--ink h2, .sec--ink h3 { color: #fff; }
.sec__head { max-width: 760px; margin-bottom: clamp(40px, 5vw, 68px); }
.sec__head p { margin-top: 20px; }
.sec__head--center { margin-inline: auto; text-align: center; }
.sec__head--center .kicker { justify-content: center; }

/* ---------- Intro / statement ---------- */
.statement { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 6vw, 90px); align-items: start; }
.statement__lead { font-size: clamp(1.35rem, 2.2vw, 1.95rem); font-weight: 300; line-height: 1.35; letter-spacing: -.02em; color: var(--ink); }
@media (max-width: 900px) { .statement { grid-template-columns: 1fr; } }

/* ---------- Stat band ---------- */
.stats { background: var(--ink-900); color: #fff; }
.stats__grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.stats__item { padding: clamp(40px, 4vw, 62px) clamp(20px, 2.4vw, 38px); border-right: 1px solid rgba(255,255,255,.11); }
.stats__item:last-child { border-right: 0; }
.stats__val { font-size: clamp(2.2rem, 3.4vw, 3.2rem); font-weight: 300; line-height: 1; letter-spacing: -.03em; color: #fff; }
.stats__val em { font-style: normal; color: var(--gray-500); font-size: .5em; letter-spacing: 0; margin-left: 4px; }
.stats__lbl { margin-top: 14px; font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--blue-tint); }
.stats__txt { margin-top: 12px; font-size: 14px; line-height: 1.55; color: var(--gray-500); }
@media (max-width: 940px) { .stats__grid { grid-template-columns: repeat(2, 1fr); } .stats__item:nth-child(2n) { border-right: 0; } .stats__item:nth-child(-n+2) { border-bottom: 1px solid rgba(255,255,255,.11); } }
@media (max-width: 520px) { .stats__grid { grid-template-columns: 1fr; } .stats__item { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.11); } }

/* ---------- Cards ---------- */
/* Column count is a data attribute rather than an inline style, so the page
   needs no style-src 'unsafe-inline' in its Content-Security-Policy. */
.cards { display: grid; gap: 2px; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); }
.cards[data-cols="2"] { --cols: 2; }
.cards[data-cols="3"] { --cols: 3; }
.cards[data-cols="4"] { --cols: 4; }
.note { font-size: 14px; }
.card { position: relative; display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--gray-200); transition: border-color .25s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease); }
.card:hover { border-color: var(--gray-300); transform: translateY(-4px); box-shadow: var(--shadow); }
.card__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--gray-100); }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.card:hover .card__media img { transform: scale(1.05); }
.card__body { padding: 30px 28px 32px; display: flex; flex-direction: column; flex: 1; }
.card__title { font-size: 1.22rem; font-weight: 500; letter-spacing: -.012em; color: var(--ink); }
.card__text { margin-top: 14px; font-size: 15.5px; line-height: 1.62; color: var(--gray-600); flex: 1; }
.card__foot { margin-top: 26px; }
.card__link::after { content: ""; position: absolute; inset: 0; }
.card__tag { position: absolute; top: 0; left: 0; z-index: 1; background: var(--blue); color: #fff; font-size: 10.5px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; padding: 8px 14px; }
@media (max-width: 1000px) { .cards { --cols: 2 !important; } }
@media (max-width: 640px)  { .cards { --cols: 1 !important; } }

/* Compact index cards (industries) */
.tiles { display: grid; gap: 2px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.tile { position: relative; display: block; aspect-ratio: 5 / 4; overflow: hidden; background: var(--ink-900); }
.tile img { width: 100%; height: 100%; object-fit: cover; opacity: .72; transition: transform .6s var(--ease), opacity .35s var(--ease); }
.tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(8,10,11,.9) 6%, rgba(8,10,11,.1) 72%); }
.tile:hover img { transform: scale(1.06); opacity: .55; }
.tile__label { position: absolute; z-index: 1; left: 26px; right: 26px; bottom: 24px; color: #fff; }
.tile__label h3 { color: #fff; font-size: 1.14rem; font-weight: 500; }
.tile__label span { display: block; margin-top: 10px; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--blue-tint); opacity: 0; transform: translateY(6px); transition: opacity .3s var(--ease), transform .3s var(--ease); }
.tile:hover .tile__label span { opacity: 1; transform: none; }

/* ---------- Split feature ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 0; }
.split + .split { margin-top: 2px; }
.split__media { position: relative; min-height: 460px; background: var(--gray-100); }
.split__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.split__cap { position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; margin: 0; padding: 14px clamp(16px, 2.4vw, 26px); font-size: 13.5px; line-height: 1.55; color: #fff; background: linear-gradient(to top, rgba(8,10,11,.88), rgba(8,10,11,0)); }
.split__cap strong { font-weight: 700; }
.split__body { padding: clamp(40px, 5.5vw, 92px); }
.split__body .prose { margin-top: 22px; color: var(--gray-600); }
.split__body .arrow { margin-top: 30px; }
.split--rev .split__media { order: 2; }
.split--paper { background: var(--paper); }
.split--ink { background: var(--ink-900); }
.split--ink .split__body h2, .split--ink .split__body h3 { color: #fff; }
.split--ink .split__body .prose { color: var(--gray-400); }
@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; }
  .split--rev .split__media { order: 0; }
  .split__media { min-height: 300px; }
}

/* ---------- Feature list / bullets ---------- */
.ticks { display: grid; gap: 12px; margin-top: 26px; }
.ticks li { position: relative; padding-left: 30px; font-size: 15.5px; color: var(--gray-600); }
.ticks li::before {
  content: ""; position: absolute; left: 0; top: 9px; width: 13px; height: 8px;
  border-left: 2px solid var(--blue); border-bottom: 2px solid var(--blue); transform: rotate(-45deg);
}
.split--ink .ticks li { color: var(--gray-400); }
.split--ink .ticks li::before { border-color: var(--blue-tint); }

/* ---------- Spec grid ---------- */
.specs { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 2px; background: var(--gray-200); border: 1px solid var(--gray-200); }
.spec { background: #fff; padding: 30px 26px; }
.spec__k { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gray-500); }
.spec__v { margin-top: 12px; font-size: clamp(1.5rem, 2.1vw, 2rem); font-weight: 300; letter-spacing: -.025em; color: var(--ink); line-height: 1.1; }
.spec__n { margin-top: 8px; font-size: 14px; color: var(--gray-600); }

/* ---------- Data table ---------- */
.tablewrap { overflow-x: auto; border: 1px solid var(--gray-200); }
table.data { width: 100%; border-collapse: collapse; min-width: 540px; font-size: 15px; }
table.data th, table.data td { text-align: left; padding: 16px 22px; border-bottom: 1px solid var(--gray-200); }
table.data th { font-size: 11px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--gray-500); background: var(--paper); }
table.data td { color: var(--gray-600); }
table.data td:first-child { color: var(--ink); font-weight: 500; }
table.data tr:last-child td { border-bottom: 0; }

/* ---------- Quotes ---------- */
.quotes { position: relative; }
.quote { display: none; }
.quote.is-active { display: block; animation: fade .5s var(--ease); }
@keyframes fade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.quote__text { font-size: clamp(1.25rem, 2.1vw, 1.85rem); font-weight: 300; line-height: 1.45; letter-spacing: -.018em; color: var(--ink); }
.sec--ink .quote__text { color: #fff; }
.quote__mark { font-size: 76px; line-height: .8; color: var(--blue); font-weight: 700; margin-bottom: 18px; }
.quote__by { margin-top: 30px; display: flex; align-items: center; gap: 16px; }
.quote__by strong { font-weight: 500; color: var(--ink); }
.sec--ink .quote__by strong { color: #fff; }
.quote__by span { font-size: 14px; color: var(--gray-500); }
.quotes__nav { display: flex; gap: 10px; margin-top: 44px; }
.quotes__dot { width: 40px; height: 3px; background: var(--gray-300); transition: background .22s var(--ease); }
.quotes__dot.is-active { background: var(--blue); }
.sec--ink .quotes__dot { background: rgba(255,255,255,.25); }
.sec--ink .quotes__dot.is-active { background: #fff; }

/* ---------- CTA band ---------- */
.cta {
  background: var(--blue); color: #fff;
  display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: center;
  padding: clamp(44px, 5vw, 72px) clamp(28px, 5vw, 76px);
}
.cta h2 { color: #fff; }
.cta p { margin-top: 14px; color: rgba(255,255,255,.82); max-width: 620px; }
.cta__actions { display: flex; gap: 14px; flex-wrap: wrap; }
@media (max-width: 860px) { .cta { grid-template-columns: 1fr; } }

/* ---------- Logo row ---------- */
.logos { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 2px; background: var(--gray-200); border: 1px solid var(--gray-200); }
.logos__cell { background: #fff; display: flex; align-items: center; justify-content: center; padding: 34px 26px; min-height: 130px; }
.logos__cell img { max-height: 54px; width: auto; filter: grayscale(1); opacity: .62; transition: filter .25s, opacity .25s; }
.logos__cell:hover img { filter: none; opacity: 1; }

/* ---------- Distributor cards ---------- */
.dist { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2px; background: var(--gray-200); border: 1px solid var(--gray-200); }
.dist__card { background: #fff; padding: 34px 30px; }
.dist__logo { height: 46px; margin-bottom: 24px; display: flex; align-items: center; }
.dist__logo img { max-height: 100%; width: auto; max-width: 100%; object-fit: contain; object-position: left center; }
/* Stand-in for a partner whose logo file we do not hold. Reads as a wordmark
   rather than as a heading, so the row still scans as a row of brands. */
.dist__wordmark {
  font-size: 1.35rem; font-weight: 700; letter-spacing: -.02em; color: var(--ink);
}
.dist__name { font-size: 1.1rem; font-weight: 500; color: var(--ink); }
.dist__loc + .dist__loc { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--gray-100); }
.dist__loc h4 { font-size: 11px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--gray-500); margin-bottom: 8px; }
.dist__loc p { font-size: 15px; color: var(--gray-600); line-height: 1.55; }
.dist__loc a { color: var(--blue); font-weight: 500; }

/* ---------- Downloads ---------- */
.dl { border: 1px solid var(--gray-200); }
.dl__row { display: flex; align-items: center; gap: 20px; padding: 18px 24px; border-bottom: 1px solid var(--gray-200); transition: background .18s var(--ease); }
.dl__row:last-child { border-bottom: 0; }
.dl__row:hover { background: var(--paper); }
.dl__ico { flex: none; width: 38px; height: 38px; display: grid; place-items: center; background: var(--blue-tint); color: var(--blue); font-size: 9.5px; font-weight: 700; letter-spacing: .04em; }
.dl__name { flex: 1; font-size: 15.5px; color: var(--ink); font-weight: 500; }
.dl__meta { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--gray-500); }
.dl__go { color: var(--blue); font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }

/* ---------- Contact ---------- */
.contact { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(40px, 6vw, 88px); }
@media (max-width: 900px) { .contact { grid-template-columns: 1fr; } }
.field { margin-bottom: 22px; }
.field label { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--gray-500); margin-bottom: 9px; }
.field input, .field select, .field textarea {
  width: 100%; padding: 15px 16px; font: inherit; font-size: 16px; color: var(--ink);
  background: #fff; border: 1px solid var(--gray-300); border-radius: 0;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.field textarea { min-height: 152px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(0,0,184,.1); }
.field__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 22px; }
@media (max-width: 620px) { .field__grid { grid-template-columns: 1fr; } }

.infoblock { border-top: 3px solid var(--blue); background: var(--paper); padding: 38px 34px; }
.infoblock + .infoblock { margin-top: 2px; }
.infoblock h3 { font-size: 1.05rem; font-weight: 500; margin-bottom: 18px; }
.infoblock dl { margin: 0; display: grid; gap: 16px; }
.infoblock dt { font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gray-500); margin-bottom: 4px; }
.infoblock dd { margin: 0; font-size: 16px; color: var(--ink); line-height: 1.55; }
.infoblock a { color: var(--blue); font-weight: 500; }

/* ==========================================================================
   Footer
   ========================================================================== */
.ftr { background: var(--ink-900); color: var(--gray-500); padding-top: clamp(56px, 6vw, 88px); }
.ftr__top { display: grid; grid-template-columns: 300px 1fr; gap: clamp(40px, 5vw, 80px); padding-bottom: 56px; border-bottom: 1px solid rgba(255,255,255,.11); }
.ftr__brand img { height: 26px; width: auto; }
.ftr__div { margin: 12px 0 22px; font-size: 9.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gray-500); }
.ftr__tag { font-size: 15px; line-height: 1.6; color: var(--gray-500); max-width: 300px; }
.ftr__social { display: flex; gap: 10px; margin-top: 28px; }
.ftr__social a { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.18); transition: background .2s var(--ease), border-color .2s var(--ease); }
.ftr__social a:hover { background: var(--blue); border-color: var(--blue); }
.ftr__social svg { width: 17px; height: 17px; fill: #fff; }
.ftr__cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.ftr__col h4 { font-size: 11px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: #fff; margin-bottom: 20px; }
.ftr__col li + li { margin-top: 11px; }
.ftr__col a { font-size: 14.5px; color: var(--gray-500); transition: color .16s var(--ease); }
.ftr__col a:hover { color: #fff; }
.ftr__mid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; padding: 44px 0; border-bottom: 1px solid rgba(255,255,255,.11); }
.ftr__mid dt { font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gray-500); margin-bottom: 8px; }
.ftr__mid dd { margin: 0; color: #fff; font-size: 15.5px; line-height: 1.6; }
.ftr__mid a:hover { color: var(--blue-tint); }
.ftr__bot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; padding: 26px 0 34px; font-size: 13px; }
.ftr__legal { display: flex; flex-wrap: wrap; gap: 22px; }
.ftr__legal a:hover { color: #fff; }
@media (max-width: 1000px) { .ftr__top { grid-template-columns: 1fr; } .ftr__cols { grid-template-columns: repeat(2, 1fr); } .ftr__mid { grid-template-columns: 1fr; gap: 24px; } }
@media (max-width: 520px) { .ftr__cols { grid-template-columns: 1fr; } }

/* ==========================================================================
   Motion
   ========================================================================== */
[data-reveal] { opacity: 0; transform: translateY(22px); }
[data-reveal].is-in { opacity: 1; transform: none; transition: opacity .7s var(--ease), transform .7s var(--ease); }
[data-reveal][data-d="1"].is-in { transition-delay: .09s; }
[data-reveal][data-d="2"].is-in { transition-delay: .18s; }
[data-reveal][data-d="3"].is-in { transition-delay: .27s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  [data-reveal] { opacity: 1; transform: none; }
  .hero__slide img { transform: none; }
}

/* ==========================================================================
   Interactive catalog
   ========================================================================== */
.cat { display: grid; grid-template-columns: 272px 1fr; gap: clamp(28px, 3.5vw, 56px); align-items: start; }
@media (max-width: 900px) { .cat { grid-template-columns: 1fr; } }

/* Four facets over 20 series and 12 categories can outgrow the viewport, and a
   sticky column taller than the screen strands its lower half off-page. Cap it
   and let it scroll internally instead. `overflow-anchor: none` stops the
   browser from compensating for the chip list changing height on every click —
   that compensation is what used to fling the chip you clicked to the top. */
.cat__side {
  position: sticky; top: calc(var(--hdr) + 20px); display: grid; gap: 26px;
  max-height: calc(100vh - var(--hdr) - 40px); overflow-y: auto;
  overflow-anchor: none; scrollbar-width: thin; padding-right: 4px;
}
.cat__grid, .cat__facets { overflow-anchor: none; }
@media (max-width: 900px) {
  .cat__side { position: static; max-height: none; overflow: visible; }
}

.cat__search input {
  width: 100%; padding: 14px 16px; font: inherit; font-size: 15px;
  border: 1px solid var(--gray-300); border-radius: 0; background: #fff;
}
.cat__search input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(0,0,184,.1); }

.cat__facet { border: 0; padding: 0; margin: 0; }
.cat__facet legend {
  font-size: 10.5px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase;
  color: var(--gray-500); padding: 0 0 12px; margin-bottom: 12px; width: 100%; border-bottom: 1px solid var(--gray-200);
}
/* Rides on the legend, so it inherits the uppercase tracking; deliberately
   quieter and not shouted, since it is an affordance note and not a label. */
.cat__hint { float: right; font-weight: 400; letter-spacing: .04em; text-transform: none; opacity: .8; }
.cat__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.chip span {
  display: inline-block; padding: 8px 14px; font-size: 13px; line-height: 1.2;
  border: 1px solid var(--gray-300); color: var(--gray-600); cursor: pointer;
  transition: border-color .16s var(--ease), background .16s var(--ease), color .16s var(--ease);
}
.chip span:hover { border-color: var(--gray-500); color: var(--ink); }
.chip input:checked + span { background: var(--blue); border-color: var(--blue); color: #fff; }
.chip input:focus-visible + span { outline: 3px solid var(--blue); outline-offset: 2px; }

.cat__reset {
  justify-self: start; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--blue); border-bottom: 1px solid currentColor; padding-bottom: 2px;
}
.linkish { color: var(--blue); font: inherit; border-bottom: 1px solid currentColor; }

.cat__count { font-size: 12px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--gray-500); margin-bottom: 20px; }
.cat__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 2px; background: var(--gray-200); border: 1px solid var(--gray-200); }
.cat__card { background: #fff; padding: 26px 24px 22px; display: flex; flex-direction: column; }
.cat__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.cat__series { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--blue); }
.cat__cat { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--gray-500); }
.cat__card h3 { font-size: 1.08rem; font-weight: 500; letter-spacing: -.01em; }
/* Availability. The dot carries the status and the words repeat it, so this
   still reads correctly in monochrome and to a screen reader — colour is never
   the only signal. Amber rather than red: made-to-order is a lead time, not a
   failure, and a red badge on half the catalog would read as "unavailable".

   Three states, not two. IMS separates "made to order" (we manufacture it when
   you order) from "non-stock" (we buy it in when you order) — different lead
   times from different places, so they cannot share a badge. Grey rather than a
   third hue: it is the most neutral of the three, and inventing a second warm
   colour next to the amber would imply a severity ranking that does not exist.
   Slate #5a6572 holds 5.9:1 on the card's white, the highest of the three
   (green 5.0, amber 5.1) — measured, not assumed. */
.cat__stock {
  display: flex; align-items: center; gap: 7px; margin-top: 8px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.cat__stock-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.cat__stock--stock { color: #1a7f4b; }
.cat__stock--nonstock { color: #5a6572; }
.cat__stock--order { color: #9a6300; }
/* Specs are now the manufacturer's own lines — a mix of "Weight: 1450 g/m" and
   whole sentences — so they stack as text instead of sitting in chips. */
/* Render and dimensioned drawing share the row, as they do in the book. The
   fixed height keeps a grid of cards on a common baseline whether a part has
   two figures, one, or none; `contain` letterboxes rather than crops, because a
   cropped dimension line is a wrong drawing. */
.cat__figs { display: flex; gap: 10px; margin-top: 14px; }
.cat__fig {
  flex: 1; min-width: 0; height: 132px; object-fit: contain; object-position: center;
  background: var(--gray-100); padding: 8px; mix-blend-mode: multiply;
}
@media (max-width: 560px) { .cat__fig { height: 104px; } }

.cat__specs { margin-top: 14px; flex: 1; display: grid; gap: 4px; align-content: start; }
.cat__specs li { font-size: 13px; line-height: 1.5; color: var(--gray-600); }
/* IMS's own version of a CarryLine part. Ruled off rather than folded into
   .cat__specs, because those are the figures CarryLine print for THIS part
   number and this sentence is about a different one — see
   build/catalog-art-overrides/overrides.json. */
.cat__alt {
  margin-top: 10px; padding-left: 10px; border-left: 2px solid var(--gray-300);
  font-size: 13px; line-height: 1.5; color: var(--gray-600);
}
.cat__meta { margin-top: 14px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--gray-500); }
.cat__docs { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--gray-200); }
.cat__doc { font-size: 12px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--blue); }
.cat__doc:hover { text-decoration: underline; text-underline-offset: 4px; }
.cat__doc--none { color: var(--gray-400); font-weight: 500; }
.cat__empty { padding: 48px 0; font-size: 16px; color: var(--gray-600); }

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq__item { border-bottom: 1px solid var(--gray-200); }
.faq__item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 24px 0; cursor: pointer; list-style: none;
  font-size: clamp(1.02rem, 1.3vw, 1.2rem); font-weight: 500; color: var(--ink);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: ""; flex: none; width: 14px; height: 14px; position: relative;
  background:
    linear-gradient(var(--blue), var(--blue)) center/14px 2px no-repeat,
    linear-gradient(var(--blue), var(--blue)) center/2px 14px no-repeat;
  transition: transform .25s var(--ease);
}
.faq__item[open] summary::after { transform: rotate(45deg); background-size: 14px 2px, 0 0; }
.faq__item summary:hover { color: var(--blue); }
.faq__a { padding: 0 0 28px; color: var(--gray-600); max-width: 62ch; }

/* ==========================================================================
   Article
   ========================================================================== */
.article { font-size: 17.5px; line-height: 1.72; color: var(--gray-600); }
.article > * + * { margin-top: 1.15em; }
.article h2 { margin-top: 1.8em; color: var(--ink); }
.article h2 + p { margin-top: .7em; }
.article strong { color: var(--ink); font-weight: 500; }
.article .ticks { margin-top: 1.2em; }

.card__meta { font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gray-500); margin-bottom: 12px; }

.postmeta { display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center; font-size: 13px; color: rgba(255,255,255,.72); margin-top: 22px; }
.postmeta span { display: inline-flex; align-items: center; gap: 8px; }
.postmeta span::before { content: ""; width: 4px; height: 4px; background: var(--blue-tint); }

/* ==========================================================================
   Form messaging
   ========================================================================== */
.formnote {
  padding: 16px 18px; font-size: 15px; margin-bottom: 22px; line-height: 1.55;
  background: var(--blue-tint); border-left: 3px solid var(--blue); color: var(--ink-800);
}
.formnote[data-tone="ok"]  { background: #EAF6EE; border-left-color: #2E7D46; }
.formnote[data-tone="err"] { background: #FDECEE; border-left-color: #C0263C; }
.formfine { margin-top: 18px; font-size: 13px; color: var(--gray-500); }
.btn:disabled { opacity: .6; cursor: progress; }

/* ---------- Utilities ---------- */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 64px); }
@media (max-width: 820px) { .grid-2 { grid-template-columns: 1fr; } }
.mt-l { margin-top: clamp(36px, 4vw, 56px); }
.mt-m { margin-top: 28px; }
.center { text-align: center; }
.narrow { max-width: 820px; margin-inline: auto; }
.rule { height: 1px; background: var(--gray-200); border: 0; margin: 0; }

/* Catalog facets: Series, Material and Category eliminate each other, so every
   chip carries the number of parts it would leave. A value that no longer
   exists is not greyed out, it is gone — the list is rebuilt from the data on
   every change, so nothing on screen can return zero. */
.chip__n {
  margin-left: 7px; font-size: 10.5px; font-weight: 700; opacity: .55;
  font-variant-numeric: tabular-nums;
}
.chip input:checked + span .chip__n { opacity: .8; }

/* The part number is the identifier people actually order by, so it leads. */
.cat__part {
  font-size: 12px; font-weight: 700; letter-spacing: .08em;
  color: var(--blue); font-variant-numeric: tabular-nums;
}
.cat__vars {
  margin-top: 12px; font-size: 12.5px; line-height: 1.6; color: var(--gray-600);
}
.cat__vars span {
  font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  font-size: 11px; color: var(--gray-500);
}
/* A part catalogued under six series carries six tags rather than six cards. */
.cat__meta { display: flex; flex-wrap: wrap; gap: 6px; text-transform: none; }
.cat__tag {
  font-size: 11px; letter-spacing: .04em; color: var(--ink-800);
  background: var(--gray-100); padding: 4px 8px;
}
.cat__tag--mat { background: rgba(0,0,184,.07); color: var(--blue); }
.cat__tag--w { background: transparent; border: 1px solid var(--gray-200); color: var(--gray-600); }

/* Once a filter is on, the listing that matched is the answer and the part's
   other listings are context. Solid brand blue for the match, faded for the
   rest — and the matched one sorts first, so the eye lands on it without
   reading the row. Only applied while a filter is active; with none on,
   nothing is "matched" and every tag stays neutral. */
.cat__tag--hit { background: var(--blue); color: #fff; font-weight: 500; }
.cat__tag--dim { background: var(--gray-100); color: var(--gray-400); }
.cat__doc--hit { text-decoration: underline; text-underline-offset: 4px; }
.cat__more { margin-top: 28px; text-align: center; }

/* ---------- Troubleshooting wizard (/support/troubleshoot) ----------
   Sized for a phone held in one hand at a running machine: single column,
   large tap targets, and no step that needs a horizontal scroll. Everything
   is rendered by troubleshoot.js, so these are the only styles it has. */
.ts { max-width: 720px; margin: 0 auto; }
.ts__panel { background: #fff; border: 1px solid var(--gray-200); padding: 28px 26px 30px; }
.ts__panel--good { border-color: var(--blue); box-shadow: inset 4px 0 0 var(--blue); }
.ts__panel .h-1 { margin: 6px 0 0; }
.ts__panel .lede { margin-top: 12px; }

.ts__who {
  background: var(--blue-tint); border: 1px solid rgba(0,0,184,.14);
  padding: 18px 20px; margin-bottom: 14px;
}
.ts__whoname { font-size: 1.15rem; font-weight: 700; margin: 2px 0 12px; }
.ts__who dl { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 20px; margin: 0; }
.ts__who dt { font-size: 11px; letter-spacing: .09em; text-transform: uppercase; color: var(--gray-600); }
.ts__who dd { margin: 2px 0 0; font-size: 14px; font-weight: 500; color: var(--ink); }

/* Buttons and links share one look: from the customer's side "pick a symptom"
   and "pick a machine" are the same gesture, and only one of them can be an <a>. */
.ts__choices { display: grid; gap: 10px; margin-top: 20px; }
.ts__choice {
  display: block; width: 100%; text-align: left; cursor: pointer;
  background: #fff; border: 1px solid var(--gray-300); padding: 16px 18px;
  font: inherit; color: var(--ink); transition: border-color .16s var(--ease), background .16s var(--ease);
}
.ts__choice:hover, .ts__choice:focus-visible { border-color: var(--blue); background: var(--blue-tint); }
.ts__choice b { display: block; font-size: 1.02rem; font-weight: 700; }
.ts__choice span { display: block; margin-top: 3px; font-size: 13.5px; color: var(--gray-600); }

.ts__first {
  margin: 14px 0 0; padding: 12px 16px; font-size: 14px; line-height: 1.55;
  background: var(--gray-100); border-left: 4px solid var(--gray-400);
}
.ts__first b { display: block; }
.ts__action {
  margin: 18px 0 0; padding: 16px 18px; font-size: 15px; line-height: 1.6;
  background: var(--blue-tint); border-left: 4px solid var(--blue);
}
.ts__action b {
  display: block; margin-bottom: 4px; font-size: 11px; letter-spacing: .09em;
  text-transform: uppercase; color: var(--blue);
}
.ts__note { margin: 14px 0 0; font-size: 13.5px; line-height: 1.6; color: var(--gray-600); }
.ts__note a { color: var(--blue); font-weight: 500; }

/* Placeholder until CarryLine has clips to hand. Deliberately looks like an
   empty slot rather than a broken player, so nobody reports it as a bug. */
.ts__video { display: flex; gap: 16px; align-items: center; margin: 20px 0 0; }
.ts__videoframe {
  flex: none; width: 108px; height: 68px; display: grid; place-items: center;
  background: var(--ink); border-radius: 4px;
}
.ts__videoframe svg { width: 26px; height: 26px; fill: #fff; opacity: .85; }
.ts__video figcaption b { display: block; font-size: 14px; font-weight: 700; }
.ts__video figcaption span { display: block; margin-top: 3px; font-size: 12.5px; color: var(--gray-500); line-height: 1.5; }
.ts__video code { font-size: 12px; background: var(--gray-100); padding: 1px 5px; }

.ts__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.ts__foot { margin: 18px 0 0; padding-top: 16px; border-top: 1px solid var(--gray-200); font-size: 13px; color: var(--gray-600); }
.ts__foot a, .ts__foot .linkish { color: var(--blue); }

.ts__recap { margin-top: 20px; border: 1px solid var(--gray-200); padding: 16px 18px; }
.ts__recap b { font-size: 1.02rem; }
.ts__recap > span { display: block; margin-top: 2px; font-size: 13px; color: var(--gray-600); }
.ts__recap pre {
  margin: 14px 0 0; padding: 14px 16px; background: var(--gray-100);
  font-size: 12.5px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere;
}
/* Was the embedded GHL form IFRAME, sized like one (min-height, no border).
   Since the 2026-09-09 GHL scrub the report step is a real <form> posting to
   /api/lead, so it lays its children out instead. Matches .clq__form. */
.ts__form { display: flex; flex-direction: column; gap: 12px; margin-top: 20px; }
.ts__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ts__grid label, .ts__full { display: flex; flex-direction: column; gap: 6px;
  font-size: .85rem; font-weight: 600; color: var(--gray-600); }
.ts__grid input, .ts__full textarea { width: 100%; padding: 10px 12px;
  border: 1px solid var(--gray-300); border-radius: 6px; font: inherit;
  font-size: .95rem; font-weight: 400; color: var(--ink); }
.ts__full textarea { resize: vertical; }
.ts__grid input:focus, .ts__full textarea:focus { outline: 2px solid var(--blue);
  outline-offset: -1px; border-color: var(--blue); }
/* Off-screen rather than display:none — some bots skip hidden fields but fill
   positioned ones. Never focusable: tabindex="-1" is set on the input too. */
.ts__hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.ts__err { margin: 0; padding: 10px 12px; border-radius: 6px; background: #FEF3F2;
  color: #B42318; font-size: .85rem; line-height: 1.5; }
.ts__err[hidden] { display: none; }
.ts__submit { align-self: flex-start; }
.ts__submit:disabled { background: var(--gray-300); border-color: var(--gray-300);
  cursor: default; }

@media (max-width: 560px) {
  .ts__panel { padding: 22px 18px 24px; }
  .ts__grid { grid-template-columns: 1fr; }
  .ts__submit { align-self: stretch; }
  .ts__who dl { grid-template-columns: 1fr; }
  .ts__video { flex-direction: column; align-items: flex-start; gap: 12px; }
  .ts__actions .btn { width: 100%; text-align: center; }
}


/* ===== Parts Basket ==========================================================
   The catalog's add button, the basket drawer and the checkout modal.

   ⚠️ These rules are the SAME DESIGN as the GHL /products-list storefront, whose
   copy lives in `ghl/store/build_store_view.py` (EXTRA_CSS + BASKET_CSS). That
   block ships its own stylesheet because it is injected into a GHL page that
   links a different, hosted site.css. The two are intentionally duplicated
   rather than shared -- there is no build step that could join them -- so a
   visual change here should be mirrored there.

   They were missing here entirely until 2026-08-31: basket.js has been appending
   an unstyled drawer to /support/catalog since it shipped.

   NOT included: `.hdr__cart`. The header cart is styled inline in
   build/build.mjs, because the GHL port links ONE hosted stylesheet shared by 66
   pages and a rule here would not reach it. Leave it inline.
   ========================================================================== */

/* --- the add button on a catalog card --- */
.cat__buy { display: flex; align-items: center; justify-content: flex-end; gap: 12px;
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--gray-200); }
.cat__btn { display: inline-block; padding: 9px 16px; border-radius: 6px; border: 0;
  background: var(--blue); color: #fff; text-decoration: none; cursor: pointer;
  font: inherit; font-size: .9rem; font-weight: 600; line-height: 1; white-space: nowrap; }
.cat__btn:hover, .cat__btn:focus { background: var(--blue-700); color: #fff; }
/* Already in the basket: reads as "done", so it stops competing for attention
   with the cards that have not been picked yet. */
.cat__btn[data-in] { background: var(--blue-tint); color: var(--blue);
  box-shadow: inset 0 0 0 1px var(--blue); }
.cat__btn[data-in]:hover, .cat__btn[data-in]:focus { background: #E6E6F5; color: var(--blue); }
.cat__btn--flash { animation: clqflash .5s var(--ease); }
@keyframes clqflash { 0% { transform: scale(1); } 40% { transform: scale(1.07); } 100% { transform: scale(1); } }

/* --- the container basket.js appends to <body> ---
   It only holds fixed-position children, so it must take no space and impose no
   stacking context of its own; without this it is a stray empty block at the
   very bottom of every page. */
.clq { display: contents; }

/* --- floating button (catalog page only) --- */
.clq__fab { position: fixed; right: 20px; bottom: 20px; z-index: 9998; display: none;
  align-items: center; gap: 10px; padding: 13px 20px; border: 0; border-radius: 999px;
  background: var(--blue); color: #fff; cursor: pointer; font: inherit;
  font-size: .95rem; font-weight: 600; box-shadow: 0 10px 30px rgba(12,14,15,.25); }
.clq--has .clq__fab { display: flex; }
.clq__fab:hover, .clq__fab:focus { background: var(--blue-700); }
.clq__n { display: inline-flex; align-items: center; justify-content: center;
  min-width: 24px; height: 24px; padding: 0 7px; border-radius: 999px;
  background: #fff; color: var(--blue); font-size: .85rem; font-weight: 700; }

/* --- drawer --- */
.clq__drawer { position: fixed; right: 0; top: 0; bottom: 0; z-index: 9999;
  width: min(420px, 100vw); display: flex; flex-direction: column; background: #fff;
  color: var(--ink); box-shadow: -18px 0 50px rgba(12,14,15,.18); font-size: 15px; }
/* `display:flex` outguns the UA's [hidden]{display:none}, so the drawer would
   sit open on every page load. Restate it. */
.clq__drawer[hidden] { display: none; }
.clq__head { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 18px 20px; border-bottom: 1px solid var(--gray-200); }
.clq__head h3 { margin: 0; font-size: 1.15rem; font-weight: 600; }
.clq__x { border: 0; background: none; cursor: pointer; font-size: 26px; line-height: 1;
  padding: 0 4px; color: var(--gray-500); }
.clq__x:hover { color: var(--ink); }
.clq__lines { flex: 1; overflow: auto; padding: 8px 20px; }
.clq__line { display: flex; align-items: center; gap: 12px; padding: 12px 0;
  border-bottom: 1px solid var(--gray-100); }
.clq__id { flex: 1; min-width: 0; }
.clq__id b { display: block; font-size: .95rem; font-weight: 600; }
.clq__id span { display: block; color: var(--gray-600); font-size: .85rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clq__qty { display: flex; align-items: center; border: 1px solid var(--gray-300);
  border-radius: 6px; overflow: hidden; }
.clq__qty button { width: 30px; height: 30px; border: 0; background: var(--gray-100);
  cursor: pointer; font: inherit; font-size: 16px; line-height: 1; color: var(--ink); }
.clq__qty button:hover { background: var(--gray-200); }
.clq__qty input { width: 44px; height: 30px; border: 0; text-align: center; font: inherit;
  font-size: .9rem; -moz-appearance: textfield; color: var(--ink); }
.clq__qty input::-webkit-outer-spin-button,
.clq__qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.clq__rm { border: 0; background: none; cursor: pointer; font-size: 20px; line-height: 1;
  color: var(--gray-400); padding: 0 2px; }
.clq__rm:hover { color: #B42318; }
.clq__empty { color: var(--gray-600); font-size: .92rem; line-height: 1.6; padding: 14px 0; }
.clq__foot { padding: 16px 20px; border-top: 1px solid var(--gray-200);
  display: flex; flex-direction: column; gap: 10px; }
.clq__go { padding: 13px 18px; border: 0; border-radius: 6px; background: var(--blue);
  color: #fff; cursor: pointer; font: inherit; font-size: .98rem; font-weight: 600; }
.clq__go:hover:enabled { background: var(--blue-700); }
.clq__go:disabled { background: var(--gray-300); cursor: default; }
/* A real button, not the underlined 12px text link this was. It sits directly
   under "Check out" as the second thing you can do to a full basket, so it
   needs the same tap target — an emptied basket is the normal end of a
   successful order and people were not finding it. Outlined rather than solid
   so it still reads as secondary to Check out. */
.clq__clear { width: 100%; padding: 12px 18px; border: 1px solid var(--gray-300);
  border-radius: 6px; background: #fff; cursor: pointer; font: inherit;
  font-size: .95rem; font-weight: 600; color: var(--ink-700); }
.clq__clear:hover, .clq__clear:focus { border-color: var(--ink-700); background: var(--gray-100); }
.clq__note { margin: 0; color: var(--gray-600); font-size: .82rem; line-height: 1.5; }

/* --- checkout modal --- */
.clq__modal { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center;
  justify-content: center; padding: 24px; background: rgba(12,14,15,.55); color: var(--ink); }
.clq__panel { position: relative; width: min(560px, 100%); max-height: 92vh; overflow: auto;
  background: #fff; border-radius: 12px; padding: 26px 26px 20px; font-size: 15px; }
.clq__x--modal { position: absolute; top: 10px; right: 14px; }
.clq__kicker { margin: 0; font-size: .72rem; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--blue); }
.clq__panel h3 { margin: 6px 0 10px; font-size: 1.3rem; font-weight: 500; }
.clq__lede { margin: 0; font-size: 14px; line-height: 1.6; color: var(--gray-600); }
.clq__link { border: 0; background: none; padding: 0; cursor: pointer; font: inherit;
  font-size: 13px; color: var(--blue); text-decoration: underline; }

/* ⚠️ DIVERGES from build_store_view.py on purpose. Over there `.clq__form` is
   the embedded GHL form IFRAME and is sized like one (min-height, no border).
   Here checkout is a real <form> that collects an optional note before handing
   off to the visitor's mail client, so it lays its children out instead. */
.clq__form { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }
.clq__full { display: flex; flex-direction: column; gap: 6px; font-size: .85rem;
  font-weight: 600; color: var(--gray-600); }
.clq__full textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--gray-300);
  border-radius: 6px; font: inherit; font-size: .95rem; font-weight: 400; color: var(--ink);
  resize: vertical; }
.clq__full textarea:focus { outline: 2px solid var(--blue); outline-offset: -1px;
  border-color: var(--blue); }
.clq__list { border: 1px solid var(--gray-200); border-radius: 6px; padding: 10px 12px;
  font-size: .85rem; color: var(--gray-600); }
.clq__list summary { cursor: pointer; font-weight: 600; }
.clq__list pre, .clq__sentlist { margin: 10px 0 0; max-height: 30vh; overflow: auto;
  background: var(--gray-100); border-radius: 6px; padding: 10px 12px;
  font-size: .8rem; line-height: 1.5; white-space: pre-wrap; word-break: break-word;
  color: var(--ink); }
.clq__sentlist { margin: 14px 0; }
.clq__err { margin: 0; padding: 10px 12px; border-radius: 6px; background: #FEF3F2;
  color: #B42318; font-size: .85rem; line-height: 1.5; }
.clq__err[hidden] { display: none; }
.clq__submit { padding: 13px 18px; border: 0; border-radius: 6px; background: var(--blue);
  color: #fff; cursor: pointer; font: inherit; font-size: .98rem; font-weight: 600; }
.clq__submit:hover:enabled { background: var(--blue-700); }
.clq__submit:disabled { background: var(--gray-300); cursor: default; }

@media (max-width: 520px) {
  .clq__fab { right: 12px; bottom: 12px; }
  .clq__panel { padding: 22px 18px 16px; }
}

/* ===================================================================
   Part picker  (.pa)  — build.mjs `partsAdd`, driven by parts-add.js
   ===================================================================
   The add-to-basket control for pages that are NOT /support/catalog.
   The basket is global; before this, the only thing that could fill it
   was the catalog grid, so /spare-parts and friends showed a cart with
   no way to put a part in it.

   Deliberately quieter than .cat__card: this is a utility on a page
   about something else, not the page's subject. It borrows .cat__btn's
   exact button treatment on purpose — the same action should not look
   like two different things in two places. If .cat__btn changes, change
   .pa__btn with it.

   NOT duplicated into build_store_view.py's EXTRA_CSS: the GHL store
   view has the catalog grid itself, so it has never needed a picker. */
.pa { max-width: 760px; }
.pa__search { margin-bottom: 14px; }
.pa__q {
  width: 100%; padding: 14px 16px; font: inherit; font-size: 15px;
  border: 1px solid var(--gray-300); border-radius: 0; background: #fff;
}
.pa__q:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(0,0,184,.1); }

.pa__status { margin: 0 0 14px; color: var(--gray-600); font-size: .9rem; line-height: 1.55; }
.pa__status a { color: var(--blue); }

.pa__list { list-style: none; margin: 0; padding: 0; }
/* Grid, not flex: the part number and the button are fixed columns so the
   numbers line up down the list and the buttons share one right edge. */
.pa__row {
  display: grid; gap: 4px 14px; align-items: center;
  grid-template-columns: 8.5em minmax(0, 1fr) auto;
  padding: 12px 0; border-bottom: 1px solid var(--gray-200);
}
.pa__row:first-child { border-top: 1px solid var(--gray-200); }
.pa__id { color: var(--blue); font-weight: 700; font-size: .95rem; }
.pa__name { color: var(--ink); font-size: .95rem; min-width: 0; }
.pa__series {
  grid-column: 2; font-size: 11px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--gray-500);
}
.pa__btn {
  grid-column: 3; grid-row: 1 / span 2; justify-self: end;
  display: inline-block; padding: 9px 16px; border-radius: 6px; border: 0;
  background: var(--blue); color: #fff; cursor: pointer;
  font: inherit; font-size: .9rem; font-weight: 600; line-height: 1; white-space: nowrap;
}
.pa__btn:hover, .pa__btn:focus { background: var(--blue-700); color: #fff; }
.pa__btn[data-in] { background: var(--blue-tint); color: var(--blue);
  box-shadow: inset 0 0 0 1px var(--blue); }
.pa__btn[data-in]:hover, .pa__btn[data-in]:focus { background: #E6E6F5; color: var(--blue); }
/* No .pa__btn--flash: basket.js's flash() applies `cat__btn--flash` to whatever
   button was clicked, and that rule is a bare class selector, so it already
   animates these. A .pa__ copy would be a rule that never fires. */

/* Under ~520px three columns cannot hold the part number, the name and a
   44px tap target. Stack, and let the button span the full width so it is
   still a comfortable target rather than a squeezed one. */
@media (max-width: 520px) {
  .pa__row { grid-template-columns: 1fr; gap: 6px; padding: 14px 0; }
  .pa__series, .pa__btn { grid-column: 1; }
  .pa__btn { grid-row: auto; justify-self: stretch; text-align: center; padding: 12px 16px; }
}

/* --- checkout modal: the two exits after the mail is handed off ---
   compose() cannot know whether the draft opened, so it offers both and
   commits to neither: Copy the list (it did not open) and empty the basket
   (it did). Equal width because we genuinely do not know which one applies. */
.clq__done { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 14px 0 12px; }
.clq__done .clq__submit { width: 100%; }
.clq__done-clear { padding: 13px 18px; border: 1px solid var(--gray-300); border-radius: 6px;
  background: #fff; cursor: pointer; font: inherit; font-size: .95rem; font-weight: 600;
  color: var(--ink-700); }
.clq__done-clear:hover, .clq__done-clear:focus { border-color: var(--ink-700); background: var(--gray-100); }
@media (max-width: 520px) {
  .clq__done { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Site search
   ==========================================================================
   The trigger lives in .hdr__actions and, unlike .hdr__cta, deliberately
   survives the 1180px rule that hides the CTA: on a phone in a plant, search
   is worth more than the button beside it. 44px square, matching .hdr__cart.

   ⚠️ These rules are in site.css, NOT inline the way .hdr__cart is. The cart
   is inline because the GHL port links ONE hosted stylesheet shared by 66
   pages that a rule here cannot reach. That trade is right for one 40-byte
   button and wrong for a 90-line overlay. Production (carrylineusa.pages.dev)
   currently serves this static build, which ships this stylesheet fingerprinted
   alongside the pages, so search is styled there. The GHL mirror that used
   to share that hosted stylesheet was retired on 2026-09-10, so this is now
   the only stylesheet and there is no second target to keep in step. */
.hdr__search {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; min-height: 44px; flex: none;
  color: var(--ink); transition: color .18s var(--ease), background .18s var(--ease);
}
.hdr__search:hover, .hdr__search:focus-visible { color: var(--blue); background: var(--gray-100); }

/* Sits above the mobile drawer (99) and the sticky header (100) but below the
   basket drawer (9999) and its checkout modal (10000) — the basket is the one
   thing that should still be able to open over the top of this. */
.srch { position: fixed; inset: 0; z-index: 200; display: block; }
/* The UA's [hidden] rule loses to the `display` above, so restate it — the
   same trap that .clq__drawer documents. Without this the panel is open on
   every page load. */
.srch[hidden] { display: none; }

.srch__scrim { position: absolute; inset: 0; background: rgba(12,14,15,.55); }

.srch__panel {
  position: absolute; inset: 0 0 auto 0;
  max-height: 100%; overflow-y: auto;
  background: #fff; border-bottom: 3px solid var(--blue);
  padding: clamp(18px, 3vw, 30px) 0 clamp(20px, 3vw, 34px);
  box-shadow: var(--shadow);
}

.srch__form {
  display: flex; align-items: center; gap: 12px;
  border-bottom: 2px solid var(--ink); padding-bottom: 10px;
}
.srch__icon { width: 22px; height: 22px; flex: none; color: var(--gray-500); }
.srch__q {
  flex: 1 1 auto; min-width: 0;
  padding: 8px 0; border: 0; background: none; border-radius: 0;
  font: inherit; font-size: clamp(1.1rem, 2.4vw, 1.6rem); font-weight: 300; color: var(--ink);
}
.srch__q:focus { outline: none; }
.srch__q::placeholder { color: var(--gray-400); }
/* WebKit paints its own clear button inside type=search, next to ours. */
.srch__q::-webkit-search-cancel-button { display: none; }
.srch__x {
  width: 40px; height: 40px; flex: none; display: inline-flex;
  align-items: center; justify-content: center;
  background: none; border: 0; cursor: pointer; color: var(--gray-600);
}
.srch__x:hover, .srch__x:focus-visible { color: var(--ink); }

.srch__status { margin: 14px 0 0; color: var(--gray-600); font-size: .92rem; line-height: 1.55; }
.srch__status a { color: var(--blue); font-weight: 500; }

.srch__results { margin-top: 18px; display: grid; gap: 26px; }
.srch__gh {
  font-size: 10.5px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--gray-500); margin-bottom: 6px;
}
.srch__list { list-style: none; margin: 0; padding: 0; }

.srch__hit {
  display: grid; gap: 2px 14px; align-items: baseline;
  grid-template-columns: 8.5em minmax(0, 1fr) auto;
  padding: 11px 0; border-bottom: 1px solid var(--gray-200);
}
.srch__hit:first-child { border-top: 1px solid var(--gray-200); }
.srch__hit:hover { background: var(--blue-tint); }
/* Focus is how the arrow keys move through this list, so it has to read
   differently from hover rather than relying on the default ring. */
.srch__hit:focus-visible {
  outline: none; background: var(--blue-tint); box-shadow: inset 3px 0 0 var(--blue);
}

.srch__id { color: var(--blue); font-weight: 700; font-size: .95rem; }
.srch__name { color: var(--ink); font-size: .95rem; min-width: 0; }
.srch__meta { color: var(--gray-500); font-size: 12px; letter-spacing: .04em; }

/* A page result has no part number, so it runs full width in one column. */
.srch__hit--page { grid-template-columns: minmax(0, 1fr) auto; }
.srch__title { color: var(--ink); font-size: 1.02rem; font-weight: 500; }
.srch__snip { grid-column: 1 / -1; color: var(--gray-600); font-size: .88rem; line-height: 1.5; }
.srch__snip mark { background: #FFF0A8; color: inherit; }

.srch__all {
  display: inline-block; margin-top: 12px;
  color: var(--blue); font-size: .9rem; font-weight: 500;
}
.srch__all--flat { color: var(--gray-500); font-weight: 400; }

@media (max-width: 620px) {
  /* Three columns cannot hold a part number, a name and a series under 620px.
     Stack, and let the whole row stay one comfortable tap target. */
  .srch__hit, .srch__hit--page { grid-template-columns: 1fr; gap: 3px; padding: 13px 0; }
  /* Full height rather than a band at the top: on a phone the results are the
     screen, and a scrim showing three lines of the page behind is noise. */
  .srch__panel { inset: 0; padding-top: 14px; }
}

/* ---------- Parts desk line ----------
   Rendered by the `partsdesk` section on the three ordering pages only.
   Borrows .infoblock's treatment — blue top rule on paper — rather than
   inventing a fourth way to present a contact detail, but runs as one line
   instead of a stacked <dl> because it carries a single fact.
   The address itself is set at ~1.25rem: it is the thing on the page a
   line-down caller is looking for, and the footer's 16px sales@ is what it
   has to out-shout. */
.deskline {
  border-top: 3px solid var(--blue); background: var(--paper);
  padding: 26px clamp(20px, 3vw, 34px);
}
.deskline__k {
  font-size: 10.5px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--gray-500); margin-bottom: 8px;
}
.deskline__v {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 14px;
  font-size: clamp(1.05rem, 1.7vw, 1.25rem); line-height: 1.3;
}
.deskline__v a { color: var(--blue); font-weight: 500; }
/* The separator is a dot drawn in CSS, not a character in the markup: it is
   decoration between two links and must not land in a screen reader's
   announcement or in the search index built from the rendered page. */
.deskline__sep {
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--gray-400); align-self: center; flex: none;
}
.deskline__note { margin-top: 12px; font-size: .92rem; color: var(--gray-600); line-height: 1.55; }

/* Below ~430px "parts@carrylineusa.com · 270-629-4674" cannot share a line
   without either wrapping mid-address or shrinking under a comfortable read.
   Stack, and drop the dot with it — a separator between two stacked items is
   just a stray mark. */
@media (max-width: 430px) {
  .deskline__v { display: block; }
  .deskline__v a { display: block; }
  .deskline__v a + a { margin-top: 8px; }
  .deskline__sep { display: none; }
}