/* Nelson Wire Rope — page styles.
   Scoped by body[data-page]; rules shared by every product page are
   scoped to body[data-kind="product"]. base.css holds the site chrome. */


/* Nelson Wire Rope — page styles. Scoped by body[data-page]. Generated from the
   per-page stylesheets; base.css holds everything shared. */

/* ===== about.html ===== */
body[data-page="about"] .nav-search svg { position:absolute;right:12px;top:50%;transform:translateY(-50%);pointer-events:none;opacity:0.4;width:14px;height:14px;flex-shrink:0; }
body[data-kind="product"] .nav-item, body[data-page="about"] .nav-item, body[data-page="catalog"] .nav-item, body[data-page="catalog-search"] .nav-item, body[data-page="catalog-visual"] .nav-item, body[data-page="contact"] .nav-item, body[data-page="industries"] .nav-item, body[data-page="home"] .nav-item, body[data-page="p-sling-builder"] .nav-item, body[data-page="products"] .nav-item, body[data-page="services"] .nav-item, body[data-page="tools"] .nav-item { position:relative; }
body[data-page="about"] .page-hero { width:100%;min-height:460px;position:relative;display:flex;align-items:center;justify-content:flex-start;overflow:hidden; }
body[data-page="about"] .page-hero-left { padding:80px 52px;display:flex;flex-direction:column;justify-content:center;background:#111; }
body[data-page="about"] .page-hero-left-bg { position:absolute;inset:0;background-image:url('img/bg-02.jpg');background-size:cover;background-position:center;opacity:0.1; }
body[data-page="about"] .page-hero-content { position:relative; }
body[data-page="about"] .page-hero-caption { font-size:11px;letter-spacing:0.1em;text-transform:uppercase;color:rgba(255,255,255,0.35);margin-bottom:16px; }
body[data-page="about"] .page-hero h1 { font-family:'PosterGothic',sans-serif;font-size:clamp(32px,5vw,62px);font-weight:900;text-transform:uppercase;color:var(--white);letter-spacing:-0.02em;line-height:1.0;margin-bottom:20px; }
body[data-page="about"] .page-hero p { font-size:16.5px;color:rgba(255,255,255,0.5);line-height:1.85;max-width:44ch; }
body[data-page="about"] .page-hero-right { position:relative;overflow:hidden;border-left:1px solid var(--grey-mid); }
body[data-page="about"] .page-hero-right img { width:100%;height:100%;object-fit:cover;object-position:center top;display:block; }
body[data-page="about"] .page-hero-photo-caption { position:absolute;bottom:0;left:0;right:0;padding:16px 20px;background:linear-gradient(to top,rgba(0,0,0,0.85),transparent);font-size:11px;color:rgba(255,255,255,0.45);letter-spacing:0.08em;text-transform:uppercase; }
body[data-page="about"] .mission { background:var(--white);border-top:3px solid var(--black);padding:80px 52px;display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start; }
body[data-page="about"] .mission h2 { font-family:'PosterGothic',sans-serif;font-size:clamp(24px,3vw,36px);font-weight:900;text-transform:uppercase;color:var(--black);letter-spacing:-0.01em;line-height:1.1;margin-bottom:24px; }
body[data-page="about"] .mission p { font-size:16.5px;color:#555;line-height:1.9;margin-bottom:20px;max-width:46ch; }
body[data-page="about"] .mission-stats { display:flex;flex-direction:column;gap:2px; }
body[data-page="about"] .mission-stat { background:var(--black);padding:28px 32px; }
body[data-page="about"] .mission-stat-num { font-family:'PosterGothic',sans-serif;font-size:48px;font-weight:900;color:var(--white);letter-spacing:-0.03em;line-height:1; }
body[data-page="about"] .mission-stat-label { font-size:12px;color:var(--grey);margin-top:6px;letter-spacing:0.06em;text-transform:uppercase;line-height:1.5; }
body[data-page="about"] .history-section { background:var(--black);padding:72px 0 0; }
body[data-page="about"] .history-inner { max-width:1200px;margin:0 auto;padding:0 52px; }
body[data-page="about"] .history-section h2 { font-family:'PosterGothic',sans-serif;font-size:clamp(24px,3vw,36px);font-weight:900;text-transform:uppercase;color:var(--white);letter-spacing:-0.01em;margin-bottom:48px; }
body[data-page="about"] .history-body { display:grid;grid-template-columns:1fr 460px;gap:48px;align-items:start; }
body[data-page="about"] .history-text { padding-top:8px; }
body[data-page="about"] .history-text p { font-size:16.5px;color:var(--grey);line-height:1.9;max-width:48ch; }
body[data-page="about"] .history-text p+p { margin-top:20px; }
body[data-page="about"] .polaroid-spread { position:relative;height:640px; }
body[data-page="about"] .polaroid-spread img { position:absolute;object-fit:cover;border:7px solid #f0ede6;box-shadow:0 8px 28px rgba(0,0,0,0.65); }
body[data-page="about"] .polaroid-spread img.pol-1 { width:220px;height:270px;object-position:center center;transform:rotate(-5deg);top:0;left:40px;z-index:1; }
body[data-page="about"] .polaroid-spread img.pol-2 { width:220px;height:270px;object-position:center top;transform:rotate(4deg);top:30px;left:220px;z-index:2; }
body[data-page="about"] .polaroid-spread img.pol-3 { width:190px;height:230px;object-position:center top;transform:rotate(-3deg);top:280px;left:20px;z-index:3; }
body[data-page="about"] .polaroid-spread img.pol-4 { width:220px;height:270px;object-position:center 15%;transform:rotate(3deg);top:340px;left:190px;z-index:4; }
body[data-page="about"] .photo-strip { display:grid;grid-template-columns:1fr 1fr;gap:2px; }
body[data-page="about"] .photo-strip-img { height:460px;background-size:cover;background-position:center;position:relative; }
body[data-page="about"] .photo-strip-caption { position:absolute;bottom:0;left:0;right:0;padding:16px 20px;background:linear-gradient(to top,rgba(0,0,0,0.8),transparent);font-size:11px;color:rgba(255,255,255,0.5);letter-spacing:0.06em;text-transform:uppercase; }
body[data-page="about"] .gen-section { background:var(--white);border-top:3px solid var(--black);padding:80px 52px; }
body[data-page="about"] .gen-section h2 { font-family:'PosterGothic',sans-serif;font-size:clamp(24px,3vw,36px);font-weight:900;text-transform:uppercase;color:var(--black);letter-spacing:-0.01em;margin-bottom:48px; }
body[data-page="about"] .gen-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px; }
body[data-page="about"] .gen-card { background:var(--black);padding:36px 32px; }
body[data-page="about"] .gen-gen { font-size:10px;letter-spacing:0.14em;text-transform:uppercase;color:var(--grey);margin-bottom:6px; }
body[data-page="about"] .gen-name { font-family:'PosterGothic',sans-serif;font-size:20px;font-weight:900;text-transform:uppercase;color:var(--white);letter-spacing:-0.01em;margin-bottom:4px; }
body[data-page="about"] .gen-desc { font-size:14.5px;color:#555;line-height:1.75; }
body[data-page="about"] .quality { background:var(--black);padding:80px 52px;position:relative;overflow:hidden; }
body[data-page="about"] .quality-bg { position:absolute;inset:0;background-image:url('img/quality-bg.webp');background-size:cover;background-position:center 46%;opacity:0.26; }
body[data-page="about"] .quality-inner { position:relative;max-width:720px; }
body[data-page="about"] .quality-label { font-size:10px;letter-spacing:0.14em;text-transform:uppercase;color:var(--grey);margin-bottom:16px; }
body[data-page="about"] .quality blockquote { font-family:'PosterGothic',sans-serif;font-size:clamp(22px,3vw,36px);font-weight:900;text-transform:uppercase;color:var(--white);letter-spacing:-0.01em;line-height:1.15;margin-bottom:24px; }
body[data-page="about"] .quality p { font-size:16.5px;color:var(--grey);line-height:1.85;max-width:56ch; }
body[data-page="about"] .credentials { background:var(--white);border-top:3px solid var(--black);padding:64px 52px; }
body[data-page="about"] .credentials h2 { font-family:'PosterGothic',sans-serif;font-size:clamp(22px,2.5vw,30px);font-weight:900;text-transform:uppercase;color:var(--black);letter-spacing:-0.01em;margin-bottom:32px; }
body[data-page="about"] .cred-grid { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2px; }
body[data-page="about"] .cred-item { background:var(--black);padding:28px 24px; }
body[data-page="about"] .cred-name { font-size:15.5px;font-weight:700;color:var(--white);margin-bottom:6px; }
body[data-page="about"] .cred-desc { font-size:13px;color:var(--grey);line-height:1.6; }
body[data-page="about"] .nav-item { position:static; }
/* ===== catalog-search.html ===== */
body[data-page="catalog-search"] .nav-search svg { position:absolute;right:12px;top:50%;transform:translateY(-50%);pointer-events:none;opacity:0.4;width:14px;height:14px;flex-shrink:0; }
body[data-page="catalog-search"] .hero h1, body[data-page="tools"] .hero h1 { font-family:'PosterGothic',sans-serif;font-size:clamp(28px,4vw,48px);font-weight:900;text-transform:uppercase;color:var(--white);letter-spacing:-0.02em;line-height:1.05;margin-bottom:10px; }
body[data-page="catalog-search"] .hero p, body[data-page="tools"] .hero p { font-size:15.5px;color:var(--grey);max-width:52ch;margin-bottom:28px; }
body[data-page="catalog-search"] .search-wrap { position:relative;max-width:600px; }
body[data-page="catalog-search"] .search-input { width:100%;background:#111;border:1px solid #333;color:var(--white);font-family:'WorkSans',sans-serif;font-size:17px;padding:14px 48px 14px 20px;outline:none;border-radius:0; }
body[data-page="catalog-search"] .search-input:focus { border-color:var(--grey); }
body[data-page="catalog-search"] .search-input::placeholder { color:#444; }
body[data-page="catalog-search"] .search-clear { position:absolute;right:16px;top:50%;transform:translateY(-50%);background:none;border:none;color:#444;font-size:18px;cursor:pointer;display:none; }
body[data-page="catalog-search"] .search-clear.visible { display:block; }
body[data-page="catalog-search"] .search-count { font-size:13px;color:#444;margin-top:10px;letter-spacing:0.04em; }
body[data-page="catalog-search"] .results { max-width:1100px;margin:0 auto;padding:40px 52px 80px; }
body[data-page="catalog-search"] .section-group { margin-bottom:40px; }
body[data-page="catalog-search"] .section-heading { display:flex;align-items:center;gap:16px;margin-bottom:2px;padding-bottom:12px;border-bottom:1px solid #ddd; }
body[data-page="catalog-search"] .section-num { font-size:10px;letter-spacing:0.14em;text-transform:uppercase;color:var(--grey);background:var(--black);padding:4px 10px;border-radius:2px;flex-shrink:0; }
body[data-page="catalog-search"] .section-title { font-family:'PosterGothic',sans-serif;font-size:18px;font-weight:900;text-transform:uppercase;color:var(--black);letter-spacing:-0.01em; }
body[data-page="catalog-search"] .entry { display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:0.5px solid #eee;text-decoration:none;gap:16px;transition:background 0.1s; }
body[data-page="catalog-search"] .entry:hover { background:#f0ede8; }
body[data-page="catalog-search"] .entry-name { font-size:15.5px;color:var(--black);font-weight:400;flex:1; }
body[data-page="catalog-search"] .entry-name mark { background:#e8e4dc;color:var(--black);padding:0 2px;border-radius:1px; }
body[data-page="catalog-search"] .entry-page { font-size:13px;color:var(--grey);white-space:nowrap;letter-spacing:0.04em; }
body[data-page="catalog-search"] .entry-arrow { font-size:13px;color:var(--grey-light);flex-shrink:0; }
body[data-page="catalog-search"] .empty { padding:64px 0;text-align:center; }
body[data-page="catalog-search"] .empty-title { font-family:'PosterGothic',sans-serif;font-size:24px;font-weight:900;text-transform:uppercase;color:var(--black);margin-bottom:10px; }
body[data-page="catalog-search"] .empty-sub { font-size:15.5px;color:var(--grey); }
body[data-page="catalog-search"] .empty-phone { font-size:16.5px;font-weight:700;color:var(--black);margin-top:16px; }
/* ===== catalog-visual.html ===== */
body[data-page="catalog-visual"] .nav-search svg { position:absolute;right:12px;top:50%;transform:translateY(-50%);pointer-events:none;opacity:0.4;width:14px;height:14px;flex-shrink:0; }
/* ===== catalog.html ===== */
body[data-page="catalog"] .nav-search svg { position:absolute;right:12px;top:50%;transform:translateY(-50%);pointer-events:none;opacity:0.4;width:14px;height:14px;flex-shrink:0; }
body[data-page="catalog"] .cat-hero { background:var(--black);display:grid;grid-template-columns:1fr 380px;min-height:520px;border-bottom:1px solid var(--grey-mid); }
body[data-page="catalog"] .cat-hero-left { padding:72px 52px;display:flex;flex-direction:column;justify-content:center; }
body[data-page="catalog"] .cat-hero-eyebrow { font-size:10px;letter-spacing:0.14em;text-transform:uppercase;color:var(--grey);margin-bottom:16px; }
body[data-page="catalog"] .cat-hero-left h1 { font-family:'PosterGothic',sans-serif;font-size:clamp(32px,5vw,56px);font-weight:900;text-transform:uppercase;color:var(--white);letter-spacing:-0.02em;line-height:1.05;margin-bottom:20px; }
body[data-page="catalog"] .cat-hero-left p { font-size:16.5px;color:var(--grey);line-height:1.8;max-width:44ch;margin-bottom:36px; }
body[data-page="catalog"] .cat-dl-btn { display:inline-flex;align-items:center;gap:12px;background:var(--white);color:var(--black);font-size:12px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;padding:15px 36px;text-decoration:none; }
body[data-page="catalog"] .cat-dl-btn:hover { background:var(--grey-light); }
body[data-page="catalog"] .cat-hero-right { background:var(--grey-surface);display:flex;align-items:center;justify-content:center;padding:40px;border-left:1px solid var(--grey-mid); }
body[data-page="catalog"] .cat-cover-img { width:100%;max-width:260px;height:auto;display:block; }
body[data-page="catalog"] .contents { background:var(--white);border-top:3px solid var(--black);padding:72px 52px; }
body[data-page="catalog"] .contents h2 { font-family:'PosterGothic',sans-serif;font-size:clamp(22px,2.5vw,30px);font-weight:900;text-transform:uppercase;color:var(--black);letter-spacing:-0.01em;margin-bottom:8px; }
body[data-page="catalog"] .contents-sub { font-size:15.5px;color:var(--grey);margin-bottom:40px; }
body[data-page="catalog"] .contents-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px; }
body[data-page="catalog"] .contents-section { background:var(--black);padding:24px 26px; }
body[data-page="catalog"] .contents-section-num { font-size:10px;letter-spacing:0.14em;text-transform:uppercase;color:var(--grey);margin-bottom:8px; }
body[data-page="catalog"] .contents-section-title { font-size:15.5px;font-weight:700;color:var(--white);margin-bottom:12px; }
body[data-page="catalog"] .contents-items { list-style:none;display:flex;flex-direction:column;gap:5px; }
body[data-page="catalog"] .contents-items li { font-size:13px;color:#555;display:flex;justify-content:space-between;gap:8px;line-height:1.4; }
body[data-page="catalog"] .contents-items li span { color:#3a3a3a;flex-shrink:0; }
body[data-page="catalog"] .request-band { background:var(--black);padding:64px 52px;display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap;border-top:1px solid var(--grey-mid); }
body[data-page="catalog"] .request-band h2 { font-family:'PosterGothic',sans-serif;font-size:clamp(22px,3vw,34px);font-weight:900;text-transform:uppercase;color:var(--white);letter-spacing:-0.01em; }
body[data-page="catalog"] .request-band p { font-size:15.5px;color:var(--grey);margin-top:8px;max-width:44ch;line-height:1.7; }
body[data-page="catalog"] .request-btn { background:var(--white);color:var(--black);font-size:12px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;padding:14px 32px;text-decoration:none;white-space:nowrap;flex-shrink:0; }
body[data-page="catalog"] .request-btn:hover { background:var(--grey-light); }
/* ===== contact.html ===== */
body[data-page="contact"] .nav-search svg { position:absolute;right:12px;top:50%;transform:translateY(-50%);pointer-events:none;opacity:0.4;width:14px;height:14px;flex-shrink:0; }
/* The storefront itself is the banner here: someone on this page is working out
   how to reach us, and the sign and the customer service door answer that
   before the copy does. The photograph sits to the right, where the sign falls,
   and a scrim runs in from the left so the headline still has something to sit
   on. */
body[data-page="contact"] .contact-hero { background: var(--black);
  position: relative;
  overflow: hidden;
  min-height: 460px;
  display: flex; align-items: center; }
body[data-page="contact"] .contact-hero-bg { position: absolute; inset: 0;
  background-image: url('img/hatfield-building.webp');
  background-size: cover; background-position: 72% center; }
body[data-page="contact"] .contact-hero-bg::after { content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(20,20,20,.94) 0%, rgba(20,20,20,.86) 34%,
                                     rgba(20,20,20,.45) 62%, rgba(20,20,20,.15) 100%); }
body[data-page="contact"] .contact-hero-inner { position: relative;
  padding: 72px 52px 64px;
  max-width: 640px; }
body[data-page="contact"] .contact-hero-addr {
  margin-top: 22px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--grey-light); }
@media (max-width: 860px) {
  body[data-page="contact"] .contact-hero { min-height: 380px; }
  body[data-page="contact"] .contact-hero-bg { background-position: 68% 42%; }
  /* on a phone the text covers most of the frame, so the scrim goes vertical and
     stays lighter at the top where only the headline sits */
  body[data-page="contact"] .contact-hero-bg::after {
    background: linear-gradient(180deg, rgba(20,20,20,.55) 0%, rgba(20,20,20,.80) 38%,
                                        rgba(20,20,20,.88) 100%);
  }
}
body[data-page="contact"] .contact-hero h1 { font-family: 'PosterGothic', sans-serif;
  font-size: clamp(36px, 6vw, 72px);
  font-weight: 900;
  text-transform: uppercase;
  color: var(--white);
  letter-spacing: -0.02em;
  line-height: 1.0;
  margin-bottom: 20px; }
body[data-page="contact"] .contact-hero p { font-size:16.5px;
  color: var(--grey);
  line-height: 1.8;
  max-width: 44ch; }
body[data-page="contact"] .phone-band { background: var(--white);
  border-top: 3px solid var(--black);
  border-bottom: 3px solid var(--black);
  padding: 0 52px;
  display: flex;
  align-items: stretch;
  gap: 0; }
/* The brand's own Call lockup stands in for a set phone number and an icon:
   it is the mark customers already see on the trucks and the catalog. */
body[data-page="contact"] .phone-primary { display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 14px;
  padding: 36px 48px 36px 0;
  border-right: 1px solid #ddd;
  flex: 1; }
body[data-page="contact"] .phone-lockup { display:block; line-height:0; }
body[data-page="contact"] .phone-lockup img {
  width:clamp(210px,21vw,300px); height:auto; display:block;
  transition:opacity .16s;
}
body[data-page="contact"] .phone-lockup:hover img { opacity:.72; }
body[data-page="contact"] .phone-icon { width: 52px; height: 52px;
  background: var(--black);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; }
body[data-page="contact"] .phone-label { font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--grey);
  margin-bottom: 4px; }
body[data-page="contact"] .phone-number { font-family: 'PosterGothic', sans-serif;
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 900;
  color: var(--black);
  letter-spacing: -0.02em;
  line-height: 1;
  text-decoration: none; }
body[data-page="contact"] .phone-number:hover { color: var(--grey-dark); }
body[data-page="contact"] .phone-secondary { display: flex;
  align-items: center;
  gap: 24px;
  padding: 36px 0 36px 48px;
  flex: 1; }
body[data-page="contact"] .email-label { font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--grey);
  margin-bottom: 4px; }
body[data-page="contact"] .email-address { font-size: 18px;
  font-weight: 700;
  color: var(--black);
  text-decoration: none;
  letter-spacing: -0.01em; }
body[data-page="contact"] .email-address:hover { color: var(--grey-dark); }
body[data-page="contact"] .hours-note { font-size:13px;
  color: var(--grey);
  margin-top: 4px; }
body[data-page="contact"] .contact-body { display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 600px; }
body[data-page="contact"] .contact-info { background: var(--black);
  padding: 64px 52px;
  display: flex;
  flex-direction: column;
  gap: 48px; }
body[data-page="contact"] .info-block-label { font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--grey);
  margin-bottom: 8px; }
body[data-page="contact"] .info-block-value { font-size:16.5px;
  color: var(--white);
  line-height: 1.8; }
body[data-page="contact"] .info-block-value a { color: var(--grey-light);
  text-decoration: none; }
body[data-page="contact"] .info-block-value a:hover { color: var(--white); }
body[data-page="contact"] .info-divider { height: 1px; background: var(--grey-mid); }
body[data-page="contact"] .reason-list { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; }
body[data-page="contact"] .reason-item { display: flex; align-items: center; gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid #1e1e1e;
  font-size:14.5px;
  color: var(--grey); }
body[data-page="contact"] .reason-item:last-child { border-bottom: none; }
body[data-page="contact"] .reason-dot { width: 6px; height: 6px;
  background: var(--grey-mid);
  border-radius: 50%;
  flex-shrink: 0; }
body[data-page="contact"] .contact-form-wrap { background: var(--white);
  padding: 64px 52px;
  display: flex;
  flex-direction: column; }
body[data-page="contact"] .contact-form-wrap h2 { font-family: 'PosterGothic', sans-serif;
  font-size: 26px;
  font-weight: 900;
  text-transform: uppercase;
  color: var(--black);
  letter-spacing: -0.01em;
  margin-bottom: 32px; }
body[data-page="contact"] .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
body[data-page="contact"] .form-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
body[data-page="contact"] .form-group.full { grid-column: 1 / -1; }
body[data-page="contact"] label { font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grey-dark); }
body[data-page="contact"] input[type="text"] { font-family: 'WorkSans', sans-serif;
  font-size:15.5px;
  color: var(--black);
  background: var(--white);
  border: 1px solid #ccc;
  border-radius: 0;
  padding: 12px 14px;
  width: 100%;
  outline: none;
  transition: border-color 0.15s;
  appearance: none; }
body[data-page="contact"] input[type="email"] { font-family: 'WorkSans', sans-serif;
  font-size:15.5px;
  color: var(--black);
  background: var(--white);
  border: 1px solid #ccc;
  border-radius: 0;
  padding: 12px 14px;
  width: 100%;
  outline: none;
  transition: border-color 0.15s;
  appearance: none; }
body[data-page="contact"] input[type="tel"] { font-family: 'WorkSans', sans-serif;
  font-size:15.5px;
  color: var(--black);
  background: var(--white);
  border: 1px solid #ccc;
  border-radius: 0;
  padding: 12px 14px;
  width: 100%;
  outline: none;
  transition: border-color 0.15s;
  appearance: none; }
body[data-page="contact"] select { font-family: 'WorkSans', sans-serif;
  font-size:15.5px;
  color: var(--black);
  background: var(--white);
  border: 1px solid #ccc;
  border-radius: 0;
  padding: 12px 14px;
  width: 100%;
  outline: none;
  transition: border-color 0.15s;
  appearance: none; }
body[data-page="contact"] textarea { font-family: 'WorkSans', sans-serif;
  font-size:15.5px;
  color: var(--black);
  background: var(--white);
  border: 1px solid #ccc;
  border-radius: 0;
  padding: 12px 14px;
  width: 100%;
  outline: none;
  transition: border-color 0.15s;
  appearance: none; }
body[data-page="contact"] input:focus { border-color: var(--black); }
body[data-page="contact"] select:focus { border-color: var(--black); }
body[data-page="contact"] textarea:focus { border-color: var(--black); }
body[data-page="contact"] input::placeholder { color: #bbb; }
body[data-page="contact"] textarea::placeholder { color: #bbb; }
body[data-page="contact"] select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23818181' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
  cursor: pointer; }
body[data-page="contact"] textarea { resize: vertical; min-height: 120px; }
body[data-page="contact"] .form-submit { margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap; }
body[data-page="contact"] .submit-btn { background: var(--black);
  color: var(--white);
  font-family: 'WorkSans', sans-serif;
  font-size:13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 14px 36px;
  border: none;
  cursor: pointer;
  transition: background 0.15s; }
body[data-page="contact"] .submit-btn:hover { background: var(--grey-dark); }
body[data-page="contact"] .submit-note { font-size:13px;
  color: var(--grey);
  line-height: 1.5; }
body[data-page="contact"] .form-success { display: none;
  padding: 24px;
  background: #f0f0eb;
  border-left: 3px solid var(--black);
  margin-top: 16px; }
body[data-page="contact"] .form-success p { font-size:15.5px; color: var(--black); }
/* The counter is a real reason to drive over, and nothing on the site said so.
   Photograph on one side, the invitation on the other. */
body[data-page="contact"] .showroom {
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  background:var(--white); border-top:3px solid var(--black);
}
/* Two frames now: the room you walk into, and the shelves you walk to. Stacked
   so the pair still reads as one column beside the copy. */
/* Two frames rather than one, set in from the edges with air between them, so
   the pair reads as two photographs and not one picture with a seam. Explicit
   heights because at their own aspect they would run half again as tall as the
   copy beside them and leave a field of white. */
body[data-page="contact"] .showroom-photo {
  display:grid; gap:22px; align-content:center;
  background:var(--white); padding:34px 0 34px 34px;
}
body[data-page="contact"] .showroom-photo img {
  width:100%; height:clamp(170px,13.5vw,225px); object-fit:cover; display:block;
}

/* The counter block: the same shape as the showroom below it, flipped, so the
   two read as a pair rather than a repetition. */
body[data-page="contact"] .counter {
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  background:var(--white); border-bottom:3px solid var(--black);
}
body[data-page="contact"] .counter.reverse .counter-photo { order:2; }
body[data-page="contact"] .counter.reverse .counter-body { order:1; }
body[data-page="contact"] .counter-photo img {
  width:100%; height:100%; min-height:340px; object-fit:cover; display:block;
}
body[data-page="contact"] .counter-body { padding:56px 52px; align-self:center; }
body[data-page="contact"] .counter-label {
  font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent); margin-bottom:14px;
}
body[data-page="contact"] .counter-body h2 {
  font-family:'PosterGothic',sans-serif; font-size:clamp(26px,3.4vw,40px); font-weight:900;
  text-transform:uppercase; letter-spacing:-.01em; line-height:1.05; margin-bottom:18px;
}
body[data-page="contact"] .counter-body p {
  font-size:16px; line-height:1.75; color:#3d3d3d; max-width:52ch; margin-bottom:14px;
}
@media (max-width:900px) {
  body[data-page="contact"] .counter { grid-template-columns:1fr; }
  body[data-page="contact"] .counter.reverse .counter-photo { order:1; }
  body[data-page="contact"] .counter.reverse .counter-body { order:2; }
  body[data-page="contact"] .counter-photo img { min-height:240px; }
  body[data-page="contact"] .counter-body { padding:36px 24px; }
}
body[data-page="contact"] .showroom-body { padding:56px 52px; align-self:center; }
body[data-page="contact"] .showroom-label {
  font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent); margin-bottom:14px;
}
body[data-page="contact"] .showroom-body h2 {
  font-family:'PosterGothic',sans-serif; font-size:clamp(26px,3.4vw,40px); font-weight:900;
  text-transform:uppercase; letter-spacing:-.01em; line-height:1.05; margin-bottom:18px;
}
body[data-page="contact"] .showroom-body p {
  font-size:16px; line-height:1.75; color:#3d3d3d; max-width:52ch; margin-bottom:14px;
}
body[data-page="contact"] .showroom-hours {
  margin-top:20px; padding-top:16px; border-top:1px solid #ddd;
  font-size:12px; letter-spacing:.07em; text-transform:uppercase; color:var(--grey);
}
@media (max-width:900px) {
  body[data-page="contact"] .showroom { grid-template-columns:1fr; }
  body[data-page="contact"] .showroom-photo { padding:24px 24px 0; gap:16px; }
  body[data-page="contact"] .showroom-photo img { height:clamp(180px,34vw,240px); }
  body[data-page="contact"] .showroom-body { padding:36px 24px; }
}

body[data-page="contact"] .map-strip { background: var(--black);
  padding: 48px 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  border-top: 1px solid var(--grey-mid);
  flex-wrap: wrap; }
body[data-page="contact"] .map-address h3 { font-family: 'PosterGothic', sans-serif;
  font-size: 20px;
  font-weight: 900;
  text-transform: uppercase;
  color: var(--white);
  letter-spacing: -0.01em;
  margin-bottom: 8px; }
body[data-page="contact"] .map-address p { font-size:14.5px;
  color: var(--grey);
  line-height: 1.8; }
body[data-page="contact"] .map-link { display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--white);
  color: var(--black);
  font-size:13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 12px 28px;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0; }
body[data-page="contact"] .map-link:hover { background: var(--grey-light); }
/* ===== industries.html ===== */
body[data-page="industries"] .nav-search svg { position:absolute;right:12px;top:50%;transform:translateY(-50%);pointer-events:none;opacity:0.4;width:14px;height:14px;flex-shrink:0; }
body[data-page="industries"] .page-hero { background:var(--black);padding:56px 52px 48px;border-bottom:3px solid var(--white); }
body[data-page="industries"] .page-hero h1, body[data-page="products"] .page-hero h1, body[data-page="services"] .page-hero h1 { font-family:'PosterGothic',sans-serif;font-size:clamp(32px,5vw,56px);font-weight:900;text-transform:uppercase;color:var(--white);letter-spacing:-0.01em;line-height:1.05;margin-bottom:12px; }
body[data-page="industries"] .page-hero p, body[data-page="products"] .page-hero p, body[data-page="services"] .page-hero p { font-size:16.5px;color:var(--grey);max-width:52ch;line-height:1.7; }
body[data-page="industries"] .ind-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px;background:var(--black); }
body[data-page="industries"] .ind-card { display:grid;grid-template-columns:1fr 1fr;background:var(--white); }
body[data-page="industries"] .ind-card:nth-child(even) { direction:rtl; }
body[data-page="industries"] .ind-card:nth-child(even)>* { direction:ltr; }
body[data-page="industries"] .ind-card-img { height:320px;background-size:cover;background-position:center; }
body[data-page="industries"] .ind-card-body { padding:40px 36px;display:flex;flex-direction:column;justify-content:center;gap:16px; }
body[data-page="industries"] .ind-card-name { font-family:'PosterGothic',sans-serif;font-size:22px;font-weight:900;text-transform:uppercase;color:var(--black);letter-spacing:-0.01em;line-height:1.1; }
body[data-page="industries"] .ind-card-desc { font-size:14.5px;color:#555;line-height:1.8; }
body[data-page="industries"] .ind-card-tags { display:flex;flex-wrap:wrap;gap:6px; }
body[data-page="industries"] .ind-card-cta { font-size:12px;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;color:var(--black);text-decoration:none;border-bottom:1px solid var(--black);padding-bottom:1px;align-self:flex-start;margin-top:4px; }
body[data-page="industries"] .ind-card-cta:hover { color:var(--grey-dark); }
body[data-page="industries"] .cta-band { background:var(--black);padding:64px 52px;display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap;border-top:1px solid var(--grey-mid); }
body[data-page="industries"] .cta-band h2 { font-family:'PosterGothic',sans-serif;font-size:clamp(22px,3vw,36px);font-weight:900;text-transform:uppercase;color:var(--white);letter-spacing:-0.01em; }
body[data-page="industries"] .cta-band p, body[data-page="services"] .cta-band p { font-size:15.5px;color:var(--grey);margin-top:8px;max-width:44ch;line-height:1.7; }
body[data-page="industries"] .cta-btn { background:var(--white);color:var(--black);font-size:12px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;padding:14px 32px;text-decoration:none;white-space:nowrap;flex-shrink:0; }
body[data-page="industries"] .cta-btn:hover { background:var(--grey-light); }
/* ===== index.html (home) ===== */
body[data-page="home"] .nav-search svg { position:absolute;right:12px;top:50%;transform:translateY(-50%);pointer-events:none;opacity:0.4;width:14px;height:14px;flex-shrink:0; }
body[data-page="home"] .hero { position: relative;
  min-height: clamp(420px, 62vh, 620px);
  display: flex; align-items: flex-end; overflow: hidden;
  background: var(--black); }
/* Hero photograph.
   Two crops of the same frame — a wide band for landscape screens and a taller
   one for phones — each in two resolutions. image-set() lets the browser take
   the high-resolution file only on high-density displays, so the picture stays
   sharp on a Retina screen without sending those bytes to everyone else.
   The plain url() line first is the fallback for browsers without image-set. */
body[data-page="home"] .hero-bg { position: absolute; inset: 0;
  background-image: url('img/hero-wide-1600.jpg');
  background-image: -webkit-image-set(url('img/hero-wide-1600.jpg') 1x, url('img/hero-wide-3200.jpg') 2x);
  background-image: image-set(url('img/hero-wide-1600.jpg') 1x, url('img/hero-wide-3200.jpg') 2x);
  background-size: cover; background-position: center center;
  background-repeat: no-repeat; }

/* Tablet-width landscape: the 1100px crop is plenty at 1x. */
@media (min-width: 821px) and (max-width: 1200px) {
  body[data-page="home"] .hero-bg {
    background-image: url('img/hero-wide-1100.jpg');
    background-image: -webkit-image-set(url('img/hero-wide-1100.jpg') 1x, url('img/hero-wide-2560.jpg') 2x);
    background-image: image-set(url('img/hero-wide-1100.jpg') 1x, url('img/hero-wide-2560.jpg') 2x); }
}

/* Large monitors get the full-resolution file even at 1x, or it would upscale. */
@media (min-width: 1500px) {
  body[data-page="home"] .hero-bg {
    background-image: url('img/hero-wide-2560.jpg');
    background-image: -webkit-image-set(url('img/hero-wide-2560.jpg') 1x, url('img/hero-wide-3840.jpg') 2x);
    background-image: image-set(url('img/hero-wide-2560.jpg') 1x, url('img/hero-wide-3840.jpg') 2x); }
}

/* Phones: the wide band would crop down to a sliver, so use the tall crop. */
@media (max-width: 820px) {
  body[data-page="home"] .hero-bg {
    background-image: url('img/hero-tall-760.jpg');
    background-image: -webkit-image-set(url('img/hero-tall-760.jpg') 1x, url('img/hero-tall-1700.jpg') 2x);
    background-image: image-set(url('img/hero-tall-760.jpg') 1x, url('img/hero-tall-1700.jpg') 2x);
    background-position: center center; }
}

/* Two gradients: one up from the bottom, one in from the left, so the headline
   holds its contrast over the crew while the panel stays visible on the right. */
body[data-page="home"] .hero-overlay { position: absolute; inset: 0;
  background:
    linear-gradient(to right,
      rgba(24,24,24,0.90) 0%,
      rgba(24,24,24,0.68) 32%,
      rgba(24,24,24,0.22) 60%,
      rgba(24,24,24,0.00) 84%),
    linear-gradient(to top,
      rgba(24,24,24,0.58) 0%,
      rgba(24,24,24,0.24) 42%,
      rgba(24,24,24,0.06) 100%); }
@media (max-width: 820px) {
  body[data-page="home"] .hero-overlay {
    background: linear-gradient(to top,
      rgba(24,24,24,0.92) 0%,
      rgba(24,24,24,0.60) 50%,
      rgba(24,24,24,0.22) 100%); }
}
body[data-page="home"] .hero-content { position: relative; padding: 0 52px 56px; max-width: 760px; }
body[data-page="home"] .hero-rule { width: 36px; height: 2px; background: var(--grey); margin-bottom: 28px; }
body[data-page="home"] .hero h1 { font-family: 'PosterGothic', 'WorkSans', sans-serif;
  text-wrap: balance;
  font-size: clamp(28px, 4vw, 46px);
  font-weight: 900;
  color: var(--white);
  line-height: 1.06;
  letter-spacing: -0.01em;
  margin-bottom: 18px;
  max-width: 16em;
  text-transform: uppercase; }
body[data-page="home"] .hero-sub {
  font-size: clamp(15px, 1.4vw, 19px);
  font-weight: 700;
  color: var(--white);
  line-height: 1.5;
  margin-bottom: 14px; }
body[data-page="home"] .hero-script {
  font-family: 'Yellowtail', cursive;
  text-wrap: balance;   /* breaks after "Operated" rather than orphaning "1979" */
  font-size: clamp(28px, 3.4vw, 44px);
  font-weight: 400;
  color: var(--white);
  line-height: 1.15;
  margin-bottom: 30px;
  /* the script has a long descender tail — give it room so it isn't clipped */
  padding-bottom: 6px; }
body[data-page="home"] .hero-btn { display: inline-block;
  background: var(--white); color: var(--black);
  font-size:13px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 14px 36px; text-decoration: none; }
body[data-page="home"] .hero-btn:hover { background: var(--grey-light); }
/* ── ACCREDITATION ─────────────────────────────────────
   Text on the left, the AWRF seal and audit certificate on a blue card at
   right. The seal PNG has its background keyed out, so it sits directly on
   the card gradient — keep the gradient's top colour if you swap the image. */
body[data-page="home"] .accred { background: var(--white);
  border-top: 3px solid var(--black);
  padding: 60px 52px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
body[data-page="home"] .accred-left p { font-size:16.5px; color: #555; line-height: 1.85; max-width: 44ch; }
body[data-page="home"] .products { background: var(--black); padding: 72px 52px; }
body[data-page="home"] .section-header { display: flex; align-items: baseline;
  justify-content: space-between;
  border-bottom: 1px solid var(--grey-mid);
  padding-bottom: 20px; margin-bottom: 40px; }
body[data-page="home"] .section-header h2 { font-family: 'PosterGothic', sans-serif;
  font-size: clamp(22px, 3vw, 32px);
  font-weight: 900; text-transform: uppercase;
  color: var(--white); letter-spacing: -0.01em; }
body[data-page="home"] .section-header-sub { font-size:14.5px; color: var(--grey); max-width: 32ch; text-align: right; line-height: 1.5; }
body[data-page="home"] .prod-grid { display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 2px; }
body[data-page="home"] .prod-card { background: var(--grey-surface); cursor: pointer; text-decoration: none; display: block; }
body[data-page="home"] .prod-card-img { height: 200px;
  background-color: #141414;
  background-size: cover; background-position: center;
  display: flex; align-items: flex-end;
  position: relative; overflow: hidden; }
/* The card text sits below the image, so this is for tone, not legibility —
   keep it light enough that the photograph still reads. */
body[data-page="home"] .prod-card-img-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.22); transition: background .2s ease; }
body[data-page="home"] .prod-card:hover .prod-card-img-overlay { background: rgba(0,0,0,0.08); }
body[data-page="home"] .prod-card-body { padding: 20px 22px; background: #1a1a1a; border-top: 1px solid #262626; }
body[data-page="home"] .prod-card:hover .prod-card-body { background: #222; }
body[data-page="home"] .prod-card-name {
  font-size:16.5px; font-weight: 700; color: var(--white);
  text-transform: uppercase; letter-spacing: 0.05em;   /* caps need the extra tracking */
  margin-bottom: 8px;
}
body[data-page="home"] .prod-card-desc { font-size:14.5px; color: var(--grey); line-height: 1.6; margin-bottom: 14px; }
body[data-page="home"] .prod-card-link { font-size: 12px; color: var(--grey-light); letter-spacing: 0.06em; text-transform: uppercase; }
body[data-page="home"] .services { background: var(--white); padding: 80px 52px;
  border-top: 3px solid var(--black); }
body[data-page="home"] .services .section-header h2 { color: var(--black); }
body[data-page="home"] .services .section-header-sub { color: var(--grey); }
body[data-page="home"] .services .section-header { border-bottom-color: #ccc; }
/* Each service is a link to its own page. The photograph is a 4x6 standing
   beside the copy rather than a band across the top: six of these stacked as
   banners made the section taller than the page it was introducing. */
body[data-page="home"] .svc-list { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 2px; }
body[data-page="home"] .svc-item {
  display: flex; flex-direction: row; align-items: stretch; background: var(--black);
  text-decoration: none; overflow: hidden;
  border-bottom: 2px solid transparent; transition: border-color .16s;
}
body[data-page="home"] .svc-item:hover,
body[data-page="home"] .svc-item:focus-visible { border-bottom-color: var(--accent); }
/* landscape 7:5, big enough to read what is in it */
body[data-page="home"] .svc-photo {
  flex: none; width: 224px; aspect-ratio: 7/5; align-self: center;
  margin: 18px 0 18px 18px; overflow: hidden; background: #111;
}
body[data-page="home"] .svc-photo img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  opacity: .84; transition: transform .4s ease, opacity .16s;
}
body[data-page="home"] .svc-item:hover .svc-photo img,
body[data-page="home"] .svc-item:focus-visible .svc-photo img {
  transform: scale(1.05); opacity: 1;
}
body[data-page="home"] .svc-text {
  display: flex; align-items: flex-start; gap: 16px; padding: 22px 24px 22px 20px;
  min-width: 0;
}
body[data-page="home"] .svc-body { display: block; min-width: 0; }
body[data-page="home"] .svc-num { font-family: 'PosterGothic', sans-serif;
  font-size: 34px; font-weight: 900;
  color: #252525; line-height: 1;
  letter-spacing: -0.03em; flex-shrink: 0; width: 42px; }
body[data-page="home"] .svc-name {
  display: block; font-family: 'PosterGothic', sans-serif;
  font-size: 19px; font-weight: 900; letter-spacing: .02em;
  text-transform: uppercase; color: var(--white);
  margin-bottom: 8px; line-height: 1.15; transition: color .16s;
}
/* the arrow only appears on the link, so it never reads as decoration */
body[data-page="home"] .svc-name::after { content: ' \2197'; opacity: 0; transition: opacity .16s; }
body[data-page="home"] .svc-item:hover .svc-name,
body[data-page="home"] .svc-item:focus-visible .svc-name { color: var(--accent); }
body[data-page="home"] .svc-item:hover .svc-name::after,
body[data-page="home"] .svc-item:focus-visible .svc-name::after { opacity: 1; }
body[data-page="home"] .svc-desc { display: block; font-size:14px; color: var(--grey); line-height: 1.7; }
body[data-page="home"] .catalog { background: var(--black); padding: 88px 52px;
  display: grid; grid-template-columns: 1fr auto;
  gap: 64px; align-items: center;
  border-top: 1px solid var(--grey-mid); }
body[data-page="home"] .catalog-text h2 { font-family: 'PosterGothic', sans-serif;
  font-size: clamp(28px, 4vw, 52px);
  font-weight: 900; text-transform: uppercase;
  color: var(--white); letter-spacing: -0.02em;
  line-height: 1.05; margin-bottom: 16px; }
body[data-page="home"] .catalog-text p { font-size:16.5px; color: var(--grey); line-height: 1.8; max-width: 44ch; margin-bottom: 36px; }
body[data-page="home"] .catalog-btn { display: inline-flex; align-items: center; gap: 12px;
  background: var(--white); color: var(--black);
  font-size:13px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 15px 36px; text-decoration: none; }
body[data-page="home"] .catalog-btn:hover { background: var(--grey-light); }
/* ===== products.html ===== */
body[data-page="products"] .nav-search svg { position:absolute;right:12px;top:50%;transform:translateY(-50%);pointer-events:none;opacity:0.4;width:14px;height:14px;flex-shrink:0; }
body[data-page="products"] .page-hero, body[data-page="services"] .page-hero { background:var(--black);padding:56px 52px 48px;border-bottom:1px solid var(--grey-mid); }
body[data-page="products"] .cat-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px;background:var(--black); }
body[data-page="products"] .cat-card { position:relative;height:280px;overflow:hidden;cursor:pointer;text-decoration:none;display:block; }
body[data-page="products"] .cat-card-bg { position:absolute;inset:0;background-size:cover;background-position:center;transition:transform 0.4s ease; }
body[data-page="products"] .cat-card:hover .cat-card-bg { transform:scale(1.04); }
body[data-page="products"] .cat-card-overlay { position:absolute;inset:0;background:linear-gradient(to top,rgba(24,24,24,0.92) 0%,rgba(24,24,24,0.3) 60%,rgba(24,24,24,0.1) 100%); }
body[data-page="products"] .cat-card-body { position:absolute;bottom:0;left:0;right:0;padding:24px; }
body[data-page="products"] .cat-card-name { font-family:'PosterGothic',sans-serif;font-size:22px;font-weight:900;text-transform:uppercase;color:var(--white);letter-spacing:-0.01em;line-height:1.1;margin-bottom:6px; }
body[data-page="products"] .cat-card-sub { font-size:12px;color:var(--grey-light);letter-spacing:0.06em;text-transform:uppercase; }
body[data-page="products"] .section-divider { height:3px;background:var(--black); }
body[data-page="products"] .products-body { background:var(--white); }
body[data-page="products"] .cat-section { padding:64px 52px;border-bottom:1px solid #ddd; }
body[data-page="products"] .cat-section:last-child { border-bottom:none; }
body[data-page="products"] .cat-section-header { display:flex;align-items:baseline;justify-content:space-between;margin-bottom:32px;padding-bottom:16px;border-bottom:1px solid #ddd; }
body[data-page="products"] .cat-section-header h2 { font-family:'PosterGothic',sans-serif;font-size:28px;font-weight:900;text-transform:uppercase;color:var(--black);letter-spacing:-0.01em; }
body[data-page="products"] .cat-section-header p { font-size:14.5px;color:var(--grey);max-width:40ch;text-align:right;line-height:1.5; }
body[data-page="products"] .prod-list { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px; }
body[data-page="products"] .prod-item { background:#fff;border:0.5px solid #e0ddd8;border-radius:8px;overflow:hidden; }
body[data-page="products"] .prod-item-img { height:160px;background-size:cover;background-position:center;background-color:#1a1a1a; }
body[data-page="products"] .prod-item-body { padding:16px 18px; }
body[data-page="products"] .prod-item-name { font-size:15.5px;font-weight:700;color:var(--black);margin-bottom:4px; }
body[data-page="products"] .prod-item-spec { font-size:13px;color:var(--grey);line-height:1.6;margin-bottom:12px; }
body[data-page="products"] .prod-item-cta { font-size:12px;color:var(--black);font-weight:700;letter-spacing:0.06em;text-transform:uppercase;text-decoration:none;border-bottom:1px solid var(--black);padding-bottom:1px; }
body[data-page="products"] .quote-band { background:var(--black);padding:56px 52px;display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap; }
body[data-page="products"] .quote-band h2 { font-family:'PosterGothic',sans-serif;font-size:clamp(22px,3vw,36px);font-weight:900;text-transform:uppercase;color:var(--white);letter-spacing:-0.01em; }
body[data-page="products"] .quote-band p { font-size:15.5px;color:var(--grey);margin-top:6px;max-width:44ch; }
body[data-page="products"] .quote-btn { background:var(--white);color:var(--black);font-size:12px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;padding:14px 32px;text-decoration:none;white-space:nowrap;flex-shrink:0; }
body[data-page="products"] .quote-btn:hover { background:var(--grey-light); }
/* ===== products/chain-slings-double.html ===== */
body[data-page="p-chain-slings-double"] .nav-search svg { position:absolute;right:12px;top:50%;transform:translateY(-50%);pointer-events:none;opacity:0.4;width:14px;height:14px;flex-shrink:0; }
body[data-kind="product"] .prod-hero { background:var(--black);padding:52px 52px 44px;border-bottom:3px solid var(--white); }
body[data-kind="product"] .prod-breadcrumb { font-size:11px;color:#555;letter-spacing:0.06em;text-transform:uppercase;margin-bottom:16px; }
body[data-kind="product"] .prod-breadcrumb a { color:#555;text-decoration:none; }
body[data-kind="product"] .prod-breadcrumb a:hover { color:var(--grey-light); }
body[data-kind="product"] .prod-breadcrumb span { color:#333; }
body[data-kind="product"] .prod-hero h1 { font-family:'PosterGothic',sans-serif;font-size:clamp(28px,4vw,48px);font-weight:900;text-transform:uppercase;color:var(--white);letter-spacing:-0.01em;line-height:1.05;margin-bottom:12px; }
body[data-kind="product"] .prod-hero-sub { font-size:15.5px;color:var(--grey);max-width:60ch;line-height:1.75; }
body[data-kind="product"] .prod-nav { background:#111;border-bottom:1px solid var(--grey-mid);display:flex;overflow-x:auto;padding:0 52px;max-width:100%; }
body[data-kind="product"] .prod-nav-link { font-size:13px;letter-spacing:0.05em;color:#555;text-decoration:none;padding:14px 20px;white-space:nowrap;border-bottom:2px solid transparent;flex-shrink:0; }
body[data-kind="product"] .prod-nav-link:hover { color:var(--grey-light); }
body[data-kind="product"] .prod-nav-link.active { color:var(--white);border-bottom-color:var(--white); }
body[data-kind="product"] .prod-body { display:grid;grid-template-columns:240px 1fr;gap:0;min-height:60vh; }
body[data-kind="product"] .prod-sidebar { background:var(--lgrey);padding:40px 28px;border-right:1px solid #e0ddd8;position:sticky;top:var(--nav-h);height:fit-content; }
body[data-kind="product"] .prod-sidebar h3 { font-size:10px;letter-spacing:0.14em;text-transform:uppercase;color:var(--grey);margin-bottom:16px;margin-top:24px; }
body[data-kind="product"] .prod-sidebar h3:first-child { margin-top:0; }
body[data-kind="product"] .prod-sidebar ul { list-style:none; }
body[data-kind="product"] .prod-sidebar ul li { margin-bottom:8px; }
body[data-kind="product"] .prod-sidebar ul li a, body[data-kind="product"] .prod-sidebar ul li span { font-size:14.5px;color:#555;text-decoration:none; }
body[data-kind="product"] .prod-sidebar ul li a:hover { color:var(--black); }
body[data-kind="product"] .prod-sidebar .badge { display:inline-block;font-size:10px;background:var(--black);color:var(--white);padding:2px 8px;margin-left:6px;letter-spacing:0.04em; }
body[data-kind="product"] .prod-sidebar .cta-block { background:var(--black);padding:20px;margin-top:28px; }
body[data-kind="product"] .prod-sidebar .cta-block p { font-size:13px;color:#666;line-height:1.7;margin-bottom:12px; }
body[data-kind="product"] .prod-sidebar .cta-block a { display:block;background:var(--white);color:var(--black);font-size:11px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;padding:10px 16px;text-decoration:none;text-align:center; }
body[data-kind="product"] .prod-content { padding:48px 52px; }
/* the hand-built sling pages were written without a photograph; this is where
   one goes -- floated beside the opening copy so it does not push the specs
   down the page */
body[data-kind="product"] .prod-photo {
  float:right; width:min(300px,38%); height:360px; margin:0 0 22px 28px;
  background:#fff; border:1px solid #e2ded6; padding:14px;
  display:flex; align-items:center; justify-content:center;
}
/* a sling photographed end to end can be five times taller than it is wide, so
   the picture is fitted inside a fixed box rather than given the box's width */
body[data-kind="product"] .prod-photo img {
  max-width:100%; max-height:100%; width:auto; height:auto; display:block;
}
@media (max-width:860px) {
  body[data-kind="product"] .prod-photo { float:none; width:100%; height:300px; margin:0 0 20px; }
}
body[data-kind="product"] .prod-section { margin-bottom:56px; }
body[data-kind="product"] .prod-section h2 { font-family:'PosterGothic',sans-serif;font-size:22px;font-weight:900;text-transform:uppercase;color:var(--black);letter-spacing:-0.01em;margin-bottom:6px; }
body[data-kind="product"] .prod-section-sub { font-size:14.5px;color:var(--grey);margin-bottom:24px;line-height:1.7; }
body[data-kind="product"] .prod-features { display:grid;grid-template-columns:1fr 1fr;gap:6px 24px;margin-bottom:28px; }
body[data-kind="product"] .prod-feature { font-size:14.5px;color:#444;padding:4px 0;border-bottom:1px solid #eee;display:flex;align-items:baseline;gap:8px; }
body[data-kind="product"] .prod-feature::before { content:'—';color:var(--grey);flex-shrink:0;font-size:11px; }
body[data-kind="product"] .spec-table-wrap { overflow-x:auto;margin-top:16px; }
body[data-kind="product"] .spec-table { width:100%;border-collapse:collapse;font-size:13.5px; }
body[data-kind="product"] .spec-table th { background:var(--black);color:var(--white);font-size:10.5px;letter-spacing:0.08em;text-transform:uppercase;font-weight:700;padding:10px 12px;text-align:center;white-space:nowrap; }
body[data-kind="product"] .spec-table th.left { text-align:left; }
body[data-kind="product"] .spec-table td { padding:9px 12px;text-align:center;border-bottom:1px solid #e8e5e0;color:var(--black); }
body[data-kind="product"] .spec-table td.left { text-align:left;font-weight:700; }
body[data-kind="product"] .spec-table tr:nth-child(even) td { background:var(--lgrey); }
body[data-kind="product"] .spec-table tr:hover td { background:#e8e5e0; }
body[data-kind="product"] .spec-table .span-header { background:#333;color:var(--white);font-size:9px;letter-spacing:0.1em;text-transform:uppercase;padding:6px 12px;text-align:center; }
body[data-kind="product"] .spec-table .dash { color:#ccc; }
body[data-kind="product"] .table-note { font-size:11px;color:#888;margin-top:10px;line-height:1.7;padding:10px 14px;background:var(--lgrey);border-left:3px solid #ddd; }
body[data-kind="product"] .warning-bar { background:#181818;color:#faf8f6;font-size:11px;letter-spacing:0.06em;padding:10px 16px;margin-top:16px;line-height:1.6; }
body[data-kind="product"] .warning-bar strong { color:#c8b87a; }
body[data-kind="product"] .types-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:2px;background:var(--black);margin-top:16px; }
body[data-kind="product"] .type-item { background:var(--white);padding:16px 18px; }
body[data-kind="product"] .type-code { font-family:'PosterGothic',sans-serif;font-size:17px;font-weight:900;color:var(--black);letter-spacing:-0.01em; }
body[data-kind="product"] .type-desc { font-size:11px;color:#555;margin-top:4px;line-height:1.6; }
body[data-page="p-chain-slings-double"] .cfg-step, body[data-page="p-chain-slings-grabiq"] .cfg-step, body[data-page="p-chain-slings-quad"] .cfg-step, body[data-page="p-chain-slings-single"] .cfg-step, body[data-page="p-chain-slings-triple"] .cfg-step, body[data-page="p-wire-rope-slings"] .cfg-step { margin-bottom:32px; }
body[data-page="p-chain-slings-double"] .cfg-step-label, body[data-page="p-chain-slings-grabiq"] .cfg-step-label, body[data-page="p-chain-slings-quad"] .cfg-step-label, body[data-page="p-chain-slings-single"] .cfg-step-label, body[data-page="p-chain-slings-triple"] .cfg-step-label, body[data-page="p-wire-rope-slings"] .cfg-step-label { font-size:11px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--grey);margin-bottom:16px;display:flex;align-items:center;gap:10px; }
body[data-page="p-chain-slings-double"] .cfg-num, body[data-page="p-chain-slings-grabiq"] .cfg-num, body[data-page="p-chain-slings-quad"] .cfg-num, body[data-page="p-chain-slings-single"] .cfg-num, body[data-page="p-chain-slings-triple"] .cfg-num, body[data-page="p-wire-rope-slings"] .cfg-num { background:var(--black);color:var(--white);width:22px;height:22px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:11px;flex-shrink:0; }
body[data-page="p-chain-slings-double"] .sling-type-grid, body[data-page="p-chain-slings-grabiq"] .sling-type-grid, body[data-page="p-chain-slings-quad"] .sling-type-grid, body[data-page="p-chain-slings-single"] .sling-type-grid, body[data-page="p-chain-slings-triple"] .sling-type-grid, body[data-page="p-wire-rope-slings"] .sling-type-grid { display:grid;grid-template-columns:repeat(9,1fr);gap:1px;background:#e0ddd8; }
body[data-page="p-chain-slings-double"] .sling-type-card, body[data-page="p-chain-slings-grabiq"] .sling-type-card, body[data-page="p-chain-slings-quad"] .sling-type-card, body[data-page="p-chain-slings-single"] .sling-type-card, body[data-page="p-chain-slings-triple"] .sling-type-card, body[data-page="p-wire-rope-slings"] .sling-type-card { background:var(--lgrey);padding:12px 4px;text-align:center;cursor:pointer;display:flex;flex-direction:column;align-items:center;transition:background 0.15s; }
body[data-page="p-chain-slings-double"] .sling-type-card:hover, body[data-page="p-chain-slings-grabiq"] .sling-type-card:hover, body[data-page="p-chain-slings-quad"] .sling-type-card:hover, body[data-page="p-chain-slings-single"] .sling-type-card:hover, body[data-page="p-chain-slings-triple"] .sling-type-card:hover, body[data-page="p-wire-rope-slings"] .sling-type-card:hover { background:#e8e5e0; }
body[data-page="p-chain-slings-double"] .sling-type-card.selected, body[data-page="p-chain-slings-grabiq"] .sling-type-card.selected, body[data-page="p-chain-slings-quad"] .sling-type-card.selected, body[data-page="p-chain-slings-single"] .sling-type-card.selected, body[data-page="p-chain-slings-triple"] .sling-type-card.selected, body[data-page="p-wire-rope-slings"] .sling-type-card.selected { background:var(--black);outline:2px solid var(--black); }
body[data-page="p-chain-slings-double"] .sling-type-card.selected .stc-code, body[data-page="p-chain-slings-grabiq"] .sling-type-card.selected .stc-code, body[data-page="p-chain-slings-quad"] .sling-type-card.selected .stc-code, body[data-page="p-chain-slings-single"] .sling-type-card.selected .stc-code, body[data-page="p-chain-slings-triple"] .sling-type-card.selected .stc-code, body[data-page="p-wire-rope-slings"] .sling-type-card.selected .stc-code { color:var(--white); }
body[data-page="p-chain-slings-double"] .sling-type-card.selected .stc-desc, body[data-page="p-chain-slings-grabiq"] .sling-type-card.selected .stc-desc, body[data-page="p-chain-slings-quad"] .sling-type-card.selected .stc-desc, body[data-page="p-chain-slings-single"] .sling-type-card.selected .stc-desc, body[data-page="p-chain-slings-triple"] .sling-type-card.selected .stc-desc, body[data-page="p-wire-rope-slings"] .sling-type-card.selected .stc-desc { color:var(--grey-light); }
body[data-page="p-chain-slings-double"] .sling-type-card img, body[data-page="p-chain-slings-grabiq"] .sling-type-card img, body[data-page="p-chain-slings-quad"] .sling-type-card img, body[data-page="p-chain-slings-single"] .sling-type-card img, body[data-page="p-chain-slings-triple"] .sling-type-card img, body[data-page="p-wire-rope-slings"] .sling-type-card img { height:260px;width:100%;object-fit:contain;margin-bottom:10px; }
body[data-page="p-chain-slings-double"] .sling-type-card.selected img, body[data-page="p-chain-slings-grabiq"] .sling-type-card.selected img, body[data-page="p-chain-slings-quad"] .sling-type-card.selected img, body[data-page="p-chain-slings-single"] .sling-type-card.selected img, body[data-page="p-chain-slings-triple"] .sling-type-card.selected img, body[data-page="p-wire-rope-slings"] .sling-type-card.selected img { filter:invert(1); }
body[data-page="p-chain-slings-double"] .stc-code, body[data-page="p-chain-slings-grabiq"] .stc-code, body[data-page="p-chain-slings-quad"] .stc-code, body[data-page="p-chain-slings-single"] .stc-code, body[data-page="p-chain-slings-triple"] .stc-code, body[data-page="p-wire-rope-slings"] .stc-code { font-family:'PosterGothic',sans-serif;font-size:14.5px;font-weight:900;color:var(--black);letter-spacing:-0.01em; }
body[data-page="p-chain-slings-double"] .stc-desc, body[data-page="p-chain-slings-grabiq"] .stc-desc, body[data-page="p-chain-slings-quad"] .stc-desc, body[data-page="p-chain-slings-single"] .stc-desc, body[data-page="p-chain-slings-triple"] .stc-desc, body[data-page="p-wire-rope-slings"] .stc-desc { font-size:9px;color:#888;margin-top:3px;line-height:1.4; }
body[data-page="p-chain-slings-double"] .cfg-row, body[data-page="p-chain-slings-grabiq"] .cfg-row, body[data-page="p-chain-slings-quad"] .cfg-row, body[data-page="p-chain-slings-single"] .cfg-row, body[data-page="p-chain-slings-triple"] .cfg-row, body[data-page="p-wire-rope-slings"] .cfg-row { display:grid;grid-template-columns:1fr 1fr auto;gap:16px;align-items:end;margin-bottom:20px; }
body[data-page="p-chain-slings-double"] .cfg-field label, body[data-page="p-chain-slings-grabiq"] .cfg-field label, body[data-page="p-chain-slings-quad"] .cfg-field label, body[data-page="p-chain-slings-single"] .cfg-field label, body[data-page="p-chain-slings-triple"] .cfg-field label, body[data-page="p-wire-rope-slings"] .cfg-field label { display:block;font-size:11px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--grey);margin-bottom:7px; }
body[data-page="p-chain-slings-double"] .cfg-field input, body[data-page="p-chain-slings-grabiq"] .cfg-field input, body[data-page="p-chain-slings-quad"] .cfg-field input, body[data-page="p-chain-slings-single"] .cfg-field input, body[data-page="p-chain-slings-triple"] .cfg-field input, body[data-page="p-wire-rope-slings"] .cfg-field input { width:100%;background:#f5f3f0;border:1px solid #ddd;color:var(--black);font-family:'WorkSans',sans-serif;font-size:16.5px;padding:10px 14px;outline:none; }
body[data-page="p-chain-slings-double"] .cfg-field select, body[data-page="p-chain-slings-grabiq"] .cfg-field select, body[data-page="p-chain-slings-quad"] .cfg-field select, body[data-page="p-chain-slings-single"] .cfg-field select, body[data-page="p-chain-slings-triple"] .cfg-field select, body[data-page="p-wire-rope-slings"] .cfg-field select { width:100%;background:#f5f3f0;border:1px solid #ddd;color:var(--black);font-family:'WorkSans',sans-serif;font-size:16.5px;padding:10px 14px;outline:none; }
body[data-page="p-chain-slings-double"] .cfg-field input:focus, body[data-page="p-chain-slings-grabiq"] .cfg-field input:focus, body[data-page="p-chain-slings-quad"] .cfg-field input:focus, body[data-page="p-chain-slings-single"] .cfg-field input:focus, body[data-page="p-chain-slings-triple"] .cfg-field input:focus, body[data-page="p-wire-rope-slings"] .cfg-field input:focus { border-color:var(--black); }
body[data-page="p-chain-slings-double"] .cfg-field select:focus, body[data-page="p-chain-slings-grabiq"] .cfg-field select:focus, body[data-page="p-chain-slings-quad"] .cfg-field select:focus, body[data-page="p-chain-slings-single"] .cfg-field select:focus, body[data-page="p-chain-slings-triple"] .cfg-field select:focus, body[data-page="p-wire-rope-slings"] .cfg-field select:focus { border-color:var(--black); }
body[data-page="p-chain-slings-double"] .cfg-wll, body[data-page="p-chain-slings-grabiq"] .cfg-wll, body[data-page="p-chain-slings-quad"] .cfg-wll, body[data-page="p-chain-slings-single"] .cfg-wll, body[data-page="p-chain-slings-triple"] .cfg-wll, body[data-page="p-wire-rope-slings"] .cfg-wll { display:flex;gap:2px;margin-bottom:20px; }
body[data-page="p-chain-slings-double"] .cfg-wll-item, body[data-page="p-chain-slings-grabiq"] .cfg-wll-item, body[data-page="p-chain-slings-quad"] .cfg-wll-item, body[data-page="p-chain-slings-single"] .cfg-wll-item, body[data-page="p-chain-slings-triple"] .cfg-wll-item, body[data-page="p-wire-rope-slings"] .cfg-wll-item { flex:1;background:var(--black);padding:14px 16px;text-align:center; }
body[data-page="p-chain-slings-double"] .cfg-wll-label, body[data-page="p-chain-slings-grabiq"] .cfg-wll-label, body[data-page="p-chain-slings-quad"] .cfg-wll-label, body[data-page="p-chain-slings-single"] .cfg-wll-label, body[data-page="p-chain-slings-triple"] .cfg-wll-label, body[data-page="p-wire-rope-slings"] .cfg-wll-label { font-size:10px;letter-spacing:0.1em;text-transform:uppercase;color:var(--grey);margin-bottom:4px; }
body[data-page="p-chain-slings-double"] .cfg-wll-val, body[data-page="p-chain-slings-grabiq"] .cfg-wll-val, body[data-page="p-chain-slings-quad"] .cfg-wll-val, body[data-page="p-chain-slings-single"] .cfg-wll-val, body[data-page="p-chain-slings-triple"] .cfg-wll-val, body[data-page="p-wire-rope-slings"] .cfg-wll-val { font-family:'PosterGothic',sans-serif;font-size:28px;font-weight:900;color:var(--white);letter-spacing:-0.01em; }
body[data-page="p-chain-slings-double"] .cfg-wll-unit, body[data-page="p-chain-slings-grabiq"] .cfg-wll-unit, body[data-page="p-chain-slings-quad"] .cfg-wll-unit, body[data-page="p-chain-slings-single"] .cfg-wll-unit, body[data-page="p-chain-slings-triple"] .cfg-wll-unit, body[data-page="p-wire-rope-slings"] .cfg-wll-unit { font-size:11px;color:var(--grey);margin-top:2px; }
body[data-page="p-chain-slings-double"] .cfg-add-btn, body[data-page="p-chain-slings-grabiq"] .cfg-add-btn, body[data-page="p-chain-slings-quad"] .cfg-add-btn, body[data-page="p-chain-slings-single"] .cfg-add-btn, body[data-page="p-chain-slings-triple"] .cfg-add-btn, body[data-page="p-wire-rope-slings"] .cfg-add-btn { background:var(--black);color:var(--white);font-family:'WorkSans',sans-serif;font-size:12px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;padding:12px 28px;border:none;cursor:pointer; }
body[data-page="p-chain-slings-double"] .cfg-add-btn:disabled, body[data-page="p-chain-slings-grabiq"] .cfg-add-btn:disabled, body[data-page="p-chain-slings-quad"] .cfg-add-btn:disabled, body[data-page="p-chain-slings-single"] .cfg-add-btn:disabled, body[data-page="p-chain-slings-triple"] .cfg-add-btn:disabled, body[data-page="p-wire-rope-slings"] .cfg-add-btn:disabled { background:#ccc;cursor:not-allowed; }
body[data-page="p-chain-slings-double"] .cfg-add-btn:not(:disabled):hover, body[data-page="p-chain-slings-grabiq"] .cfg-add-btn:not(:disabled):hover, body[data-page="p-chain-slings-quad"] .cfg-add-btn:not(:disabled):hover, body[data-page="p-chain-slings-single"] .cfg-add-btn:not(:disabled):hover, body[data-page="p-chain-slings-triple"] .cfg-add-btn:not(:disabled):hover, body[data-page="p-wire-rope-slings"] .cfg-add-btn:not(:disabled):hover { background:#333; }
body[data-page="p-chain-slings-double"] .cfg-quote, body[data-page="p-chain-slings-grabiq"] .cfg-quote, body[data-page="p-chain-slings-quad"] .cfg-quote, body[data-page="p-chain-slings-single"] .cfg-quote, body[data-page="p-chain-slings-triple"] .cfg-quote, body[data-page="p-wire-rope-slings"] .cfg-quote { margin-top:32px;padding-top:32px;border-top:1px solid #e0ddd8; }
body[data-page="p-chain-slings-double"] .cfg-quote-item, body[data-page="p-chain-slings-grabiq"] .cfg-quote-item, body[data-page="p-chain-slings-quad"] .cfg-quote-item, body[data-page="p-chain-slings-single"] .cfg-quote-item, body[data-page="p-chain-slings-triple"] .cfg-quote-item, body[data-page="p-wire-rope-slings"] .cfg-quote-item { display:flex;align-items:center;justify-content:space-between;padding:14px 16px;background:var(--lgrey);margin-bottom:2px; }
body[data-page="p-chain-slings-double"] .cfg-qi-main, body[data-page="p-chain-slings-grabiq"] .cfg-qi-main, body[data-page="p-chain-slings-quad"] .cfg-qi-main, body[data-page="p-chain-slings-single"] .cfg-qi-main, body[data-page="p-chain-slings-triple"] .cfg-qi-main, body[data-page="p-wire-rope-slings"] .cfg-qi-main { display:flex;align-items:baseline;gap:16px;flex-wrap:wrap; }
body[data-page="p-chain-slings-double"] .cfg-qi-code, body[data-page="p-chain-slings-grabiq"] .cfg-qi-code, body[data-page="p-chain-slings-quad"] .cfg-qi-code, body[data-page="p-chain-slings-single"] .cfg-qi-code, body[data-page="p-chain-slings-triple"] .cfg-qi-code, body[data-page="p-wire-rope-slings"] .cfg-qi-code { font-family:'PosterGothic',sans-serif;font-size:17px;font-weight:900;color:var(--black); }
body[data-page="p-chain-slings-double"] .cfg-qi-spec, body[data-page="p-chain-slings-grabiq"] .cfg-qi-spec, body[data-page="p-chain-slings-quad"] .cfg-qi-spec, body[data-page="p-chain-slings-single"] .cfg-qi-spec, body[data-page="p-chain-slings-triple"] .cfg-qi-spec, body[data-page="p-wire-rope-slings"] .cfg-qi-spec { font-size:14.5px;color:#555; }
body[data-page="p-chain-slings-double"] .cfg-qi-wll, body[data-page="p-chain-slings-grabiq"] .cfg-qi-wll, body[data-page="p-chain-slings-quad"] .cfg-qi-wll, body[data-page="p-chain-slings-single"] .cfg-qi-wll, body[data-page="p-chain-slings-triple"] .cfg-qi-wll, body[data-page="p-wire-rope-slings"] .cfg-qi-wll { font-size:13px;color:var(--grey); }
body[data-page="p-chain-slings-double"] .cfg-qi-remove, body[data-page="p-chain-slings-grabiq"] .cfg-qi-remove, body[data-page="p-chain-slings-quad"] .cfg-qi-remove, body[data-page="p-chain-slings-single"] .cfg-qi-remove, body[data-page="p-chain-slings-triple"] .cfg-qi-remove, body[data-page="p-wire-rope-slings"] .cfg-qi-remove { background:none;border:none;font-size:17px;color:#bbb;cursor:pointer;padding:4px 8px; }
body[data-page="p-chain-slings-double"] .cfg-qi-remove:hover, body[data-page="p-chain-slings-grabiq"] .cfg-qi-remove:hover, body[data-page="p-chain-slings-quad"] .cfg-qi-remove:hover, body[data-page="p-chain-slings-single"] .cfg-qi-remove:hover, body[data-page="p-chain-slings-triple"] .cfg-qi-remove:hover, body[data-page="p-wire-rope-slings"] .cfg-qi-remove:hover { color:var(--black); }
body[data-page="p-chain-slings-double"] .cfg-quote-actions, body[data-page="p-chain-slings-grabiq"] .cfg-quote-actions, body[data-page="p-chain-slings-quad"] .cfg-quote-actions, body[data-page="p-chain-slings-single"] .cfg-quote-actions, body[data-page="p-chain-slings-triple"] .cfg-quote-actions, body[data-page="p-wire-rope-slings"] .cfg-quote-actions { display:flex;gap:12px;margin-top:16px;align-items:center; }
body[data-page="p-chain-slings-double"] .cfg-clear-btn, body[data-page="p-chain-slings-grabiq"] .cfg-clear-btn, body[data-page="p-chain-slings-quad"] .cfg-clear-btn, body[data-page="p-chain-slings-single"] .cfg-clear-btn, body[data-page="p-chain-slings-triple"] .cfg-clear-btn, body[data-page="p-wire-rope-slings"] .cfg-clear-btn { background:none;border:1px solid #ddd;color:var(--grey);font-family:'WorkSans',sans-serif;font-size:12px;letter-spacing:0.06em;text-transform:uppercase;padding:10px 20px;cursor:pointer; }
body[data-page="p-chain-slings-double"] .cfg-clear-btn:hover, body[data-page="p-chain-slings-grabiq"] .cfg-clear-btn:hover, body[data-page="p-chain-slings-quad"] .cfg-clear-btn:hover, body[data-page="p-chain-slings-single"] .cfg-clear-btn:hover, body[data-page="p-chain-slings-triple"] .cfg-clear-btn:hover, body[data-page="p-wire-rope-slings"] .cfg-clear-btn:hover { border-color:var(--black);color:var(--black); }
body[data-page="p-chain-slings-double"] .cfg-submit-btn, body[data-page="p-chain-slings-grabiq"] .cfg-submit-btn, body[data-page="p-chain-slings-quad"] .cfg-submit-btn, body[data-page="p-chain-slings-single"] .cfg-submit-btn, body[data-page="p-chain-slings-triple"] .cfg-submit-btn, body[data-page="p-wire-rope-slings"] .cfg-submit-btn { background:var(--black);color:var(--white);font-size:12px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;padding:12px 28px;text-decoration:none; }
body[data-page="p-chain-slings-double"] .cfg-submit-btn:hover, body[data-page="p-chain-slings-grabiq"] .cfg-submit-btn:hover, body[data-page="p-chain-slings-quad"] .cfg-submit-btn:hover, body[data-page="p-chain-slings-single"] .cfg-submit-btn:hover, body[data-page="p-chain-slings-triple"] .cfg-submit-btn:hover, body[data-page="p-wire-rope-slings"] .cfg-submit-btn:hover { background:#333; }
/* ===== products/chain-slings-grabiq.html ===== */
body[data-page="p-chain-slings-grabiq"] .nav-search svg { position:absolute;right:12px;top:50%;transform:translateY(-50%);pointer-events:none;opacity:0.4;width:14px;height:14px;flex-shrink:0; }
/* ===== products/chain-slings-quad.html ===== */
body[data-page="p-chain-slings-quad"] .nav-search svg { position:absolute;right:12px;top:50%;transform:translateY(-50%);pointer-events:none;opacity:0.4;width:14px;height:14px;flex-shrink:0; }
/* ===== products/chain-slings-single.html ===== */
body[data-page="p-chain-slings-single"] .nav-search svg { position:absolute;right:12px;top:50%;transform:translateY(-50%);pointer-events:none;opacity:0.4;width:14px;height:14px;flex-shrink:0; }
/* ===== products/chain-slings-triple.html ===== */
body[data-page="p-chain-slings-triple"] .nav-search svg { position:absolute;right:12px;top:50%;transform:translateY(-50%);pointer-events:none;opacity:0.4;width:14px;height:14px;flex-shrink:0; }
/* ===== products/sling-builder.html ===== */
body[data-page="p-sling-builder"] .nav-search svg { position:absolute;right:12px;top:50%;transform:translateY(-50%);pointer-events:none;opacity:0.4;width:14px;height:14px;flex-shrink:0; }
/* ===== products/wire-rope-grommets.html ===== */
body[data-page="p-wire-rope-grommets"] .nav-search svg { position:absolute;right:12px;top:50%;transform:translateY(-50%);pointer-events:none;opacity:0.4;width:14px;height:14px;flex-shrink:0; }
/* ===== products/wire-rope-multipart.html ===== */
body[data-page="p-wire-rope-multipart"] .nav-search svg { position:absolute;right:12px;top:50%;transform:translateY(-50%);pointer-events:none;opacity:0.4;width:14px;height:14px;flex-shrink:0; }
/* ===== products/wire-rope-slings-2leg.html ===== */
body[data-page="p-wire-rope-slings-2leg"] .nav-search svg { position:absolute;right:12px;top:50%;transform:translateY(-50%);pointer-events:none;opacity:0.4;width:14px;height:14px;flex-shrink:0; }
/* ===== products/wire-rope-slings-3leg.html ===== */
body[data-page="p-wire-rope-slings-3leg"] .nav-search svg { position:absolute;right:12px;top:50%;transform:translateY(-50%);pointer-events:none;opacity:0.4;width:14px;height:14px;flex-shrink:0; }
/* ===== products/wire-rope-slings-4leg.html ===== */
body[data-page="p-wire-rope-slings-4leg"] .nav-search svg { position:absolute;right:12px;top:50%;transform:translateY(-50%);pointer-events:none;opacity:0.4;width:14px;height:14px;flex-shrink:0; }
/* ===== products/wire-rope-slings.html ===== */
body[data-page="p-wire-rope-slings"] .nav-search svg { position:absolute;right:12px;top:50%;transform:translateY(-50%);pointer-events:none;opacity:0.4;width:14px;height:14px;flex-shrink:0; }
/* ===== services.html ===== */
body[data-page="services"] .nav-search svg { position:absolute;right:12px;top:50%;transform:translateY(-50%);pointer-events:none;opacity:0.4;width:14px;height:14px;flex-shrink:0; }
body[data-page="services"] .svc-entry { display:grid;grid-template-columns:1fr 1fr;min-height:420px; }
body[data-page="services"] .svc-entry.reverse { direction:rtl; }
body[data-page="services"] .svc-entry.reverse > * { direction:ltr; }
body[data-page="services"] .svc-entry-img { background-size:cover;background-position:center; }
body[data-page="services"] .svc-entry-body { padding:56px 52px;display:flex;flex-direction:column;justify-content:center;background:var(--white);border-bottom:1px solid #e0ddd8; }
body[data-page="services"] .svc-entry.dark .svc-entry-body { background:var(--black);border-bottom-color:var(--grey-mid); }
body[data-page="services"] .svc-num { font-family:'PosterGothic',sans-serif;font-size:72px;font-weight:900;color:#ece9e2;line-height:1;letter-spacing:-0.03em;margin-bottom:-8px; }
body[data-page="services"] .svc-entry.dark .svc-num { color:#222; }
body[data-page="services"] .svc-entry-body h2 { font-family:'PosterGothic',sans-serif;font-size:clamp(22px,2.5vw,30px);font-weight:900;text-transform:uppercase;color:var(--black);letter-spacing:-0.01em;line-height:1.1;margin-bottom:16px; }
body[data-page="services"] .svc-entry.dark .svc-entry-body h2 { color:var(--white); }
body[data-page="services"] .svc-entry-body p { font-size:16.5px;color:#555;line-height:1.85;margin-bottom:20px;max-width:44ch; }
body[data-page="services"] .svc-entry.dark .svc-entry-body p { color:var(--grey); }
body[data-page="services"] .svc-bullets { list-style:none;display:flex;flex-direction:column;gap:8px; }
body[data-page="services"] .svc-bullets li { font-size:14.5px;color:#444;display:flex;align-items:flex-start;gap:10px;line-height:1.5; }
body[data-page="services"] .svc-entry.dark .svc-bullets li { color:var(--grey); }
body[data-page="services"] .svc-bullets li::before { content:'';width:4px;height:4px;background:var(--grey);border-radius:50%;margin-top:7px;flex-shrink:0; }
body[data-page="services"] .svc-delivery { background:var(--black);padding:72px 52px;display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center; }
body[data-page="services"] .svc-delivery h2 { font-family:'PosterGothic',sans-serif;font-size:clamp(26px,3vw,40px);font-weight:900;text-transform:uppercase;color:var(--white);letter-spacing:-0.01em;line-height:1.1;margin-bottom:16px; }
body[data-page="services"] .svc-delivery p { font-size:16.5px;color:var(--grey);line-height:1.85;max-width:44ch; }
body[data-page="services"] .delivery-stats { display:grid;grid-template-columns:1fr 1fr;gap:2px; }
body[data-page="services"] .delivery-stat { background:var(--grey-surface);padding:28px 24px; }
body[data-page="services"] .delivery-stat-num { font-family:'PosterGothic',sans-serif;font-size:36px;font-weight:900;color:var(--white);letter-spacing:-0.02em;line-height:1; }
body[data-page="services"] .delivery-stat-label { font-size:12px;color:var(--grey);margin-top:6px;letter-spacing:0.06em;text-transform:uppercase; }
body[data-page="services"] .cta-band { background:var(--white);padding:72px 52px;border-top:3px solid var(--black);display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap; }
body[data-page="services"] .cta-band h2 { font-family:'PosterGothic',sans-serif;font-size:clamp(24px,3vw,38px);font-weight:900;text-transform:uppercase;color:var(--black);letter-spacing:-0.01em; }
body[data-page="services"] .cta-btn { background:var(--black);color:var(--white);font-size:12px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;padding:15px 36px;text-decoration:none;white-space:nowrap;flex-shrink:0; }
body[data-page="services"] .cta-btn:hover { background:var(--grey-dark); }
/* ===== tools.html ===== */
body[data-page="tools"] .nav-search svg { position:absolute;right:12px;top:50%;transform:translateY(-50%);pointer-events:none;opacity:0.4;width:14px;height:14px;flex-shrink:0; }
body[data-page="tools"] .hero h1 { font-family:'PosterGothic',sans-serif;font-size:clamp(28px,4vw,48px);font-weight:900;text-transform:uppercase;color:var(--white);letter-spacing:-0.01em;margin-bottom:8px;position:relative; }
body[data-page="tools"] .hero p { font-size:15.5px;color:var(--grey);max-width:56ch;position:relative; }
body[data-page="tools"] .hero { background:var(--black);padding:52px 52px 40px;border-bottom:3px solid var(--white); }
body[data-page="tools"] .hero-bg { position:absolute;inset:0;overflow:hidden;opacity:0.06; }
body[data-page="tools"] .hero-bg svg { width:100%;height:100%; }
body[data-page="tools"] .tool-tabs { display:flex;gap:0;border-bottom:1px solid #e0ddd8;background:var(--white);position:sticky;top:var(--nav-h);z-index:50; }
body[data-page="tools"] .tool-tab { padding:14px 28px;font-size:14.5px;font-weight:700;letter-spacing:0.04em;color:var(--grey);cursor:pointer;border-bottom:2px solid transparent;background:none;border-top:none;border-left:none;border-right:none;font-family:'WorkSans',sans-serif; }
body[data-page="tools"] .tool-tab:hover { color:var(--black); }
body[data-page="tools"] .tool-tab.active { color:var(--black);border-bottom-color:var(--black); }
body[data-page="tools"] .calc-wrap { display:none;padding:0; }
/* Stacked, not split: the diagram is the thing worth looking at, so it gets the
   full width in a band of its own, and the controls sit underneath in columns
   instead of a tall single file beside a mostly empty black panel. */
body[data-page="tools"] .calc-wrap.active { display:block; }
body[data-page="tools"] .calc-diagram {
  background:var(--black); display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  padding:26px 40px 30px; height:clamp(330px,50vh,470px);
}
body[data-page="tools"] .calc-diagram svg { width:100%;max-width:1000px;max-height:100%;flex:1;min-height:0; }
body[data-page="tools"] .calc-inputs {
  padding:34px 52px 48px; border-top:1px solid #e0ddd8;
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.05fr);
  gap:0 42px; align-items:start;
}
/* section label + the field rows under it form one column each; results last */
body[data-page="tools"] .calc-col { min-width:0; }
body[data-page="tools"] .calc-inputs .live-results { margin-top:0; border-top:none; padding-top:0; }
body[data-page="tools"] .calc-section-label { font-size:10px;letter-spacing:0.14em;text-transform:uppercase;color:var(--grey);margin-bottom:20px;margin-top:32px; }
body[data-page="tools"] .calc-section-label:first-child { margin-top:0; }
body[data-page="tools"] .field { margin-bottom:18px; }
body[data-page="tools"] .field label { display:block;font-size:11px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--grey);margin-bottom:7px; }
body[data-page="tools"] .field-row .field label { min-height:2.6em; } /* keeps inputs on one line when one label wraps */
body[data-page="tools"] .field input { width:100%;background:#f5f3f0;border:1px solid #ddd;color:var(--black);font-family:'WorkSans',sans-serif;font-size:17px;padding:11px 14px;outline:none;border-radius:0;-webkit-appearance:none; }
body[data-page="tools"] .field select { width:100%;background:#f5f3f0;border:1px solid #ddd;color:var(--black);font-family:'WorkSans',sans-serif;font-size:17px;padding:11px 14px;outline:none;border-radius:0;-webkit-appearance:none; }
body[data-page="tools"] .field input:focus { border-color:var(--black); }
body[data-page="tools"] .field select:focus { border-color:var(--black); }
body[data-page="tools"] .field-row { display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:start; }
body[data-page="tools"] .field-hint { font-size:11px;color:#999;margin-top:5px; }
body[data-page="tools"] .live-results { margin-top:32px;border-top:1px solid #e0ddd8;padding-top:28px; }
body[data-page="tools"] .result-row { display:flex;justify-content:space-between;align-items:baseline;padding:12px 0;border-bottom:1px solid #f0ede8; }
body[data-page="tools"] .result-row:last-child { border-bottom:none; }
body[data-page="tools"] .result-row-label { font-size:13px;color:var(--grey);letter-spacing:0.04em; }
body[data-page="tools"] .result-row-value { font-family:'PosterGothic',sans-serif;font-size:24px;font-weight:900;color:var(--black);letter-spacing:-0.01em; }
body[data-page="tools"] .result-row-unit { font-size:13px;color:var(--grey);margin-left:4px; }
body[data-page="tools"] .status-badge { display:inline-block;padding:8px 18px;font-size:11px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;margin-top:16px; }
body[data-page="tools"] .status-badge.ok { background:var(--ok-bg);color:var(--ok); }
body[data-page="tools"] .status-badge.warn { background:var(--warn-bg);color:var(--warn); }
body[data-page="tools"] .status-badge.danger { background:var(--danger-bg);color:var(--danger); }
body[data-page="tools"] .angle-display { font-family:'PosterGothic',sans-serif;font-size:44px;font-weight:900;color:var(--white);letter-spacing:-0.02em;text-align:center;margin-bottom:8px; }
body[data-page="tools"] .angle-label { font-size:11px;color:var(--grey);text-align:center;letter-spacing:0.1em;text-transform:uppercase;margin-bottom:14px; }
body[data-page="tools"] .disclaimer { font-size:11px;color:#999;background:#f5f3f0;padding:14px 18px;border-left:3px solid #ddd;margin-top:24px;line-height:1.7; }
body[data-page="tools"] .faq-wrap { padding:64px 52px;max-width:900px; }
body[data-page="tools"] .faq-wrap h2 { font-family:'PosterGothic',sans-serif;font-size:36px;font-weight:900;text-transform:uppercase;color:var(--black);letter-spacing:-0.01em;margin-bottom:40px; }
body[data-page="tools"] .faq-item { border-bottom:1px solid #e0ddd8; }
body[data-page="tools"] .faq-q { font-size:16.5px;font-weight:700;color:var(--black);padding:20px 0;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;border:none;background:none;width:100%;text-align:left;font-family:'WorkSans',sans-serif; }
body[data-page="tools"] .faq-q::after { content:'+';font-size:22px;font-weight:300;color:var(--grey);flex-shrink:0; }
body[data-page="tools"] .faq-item.open .faq-q::after { content:'−'; }
body[data-page="tools"] .faq-a { font-size:15.5px;color:#555;line-height:1.85;padding-bottom:20px;display:none; }
body[data-page="tools"] .faq-item.open .faq-a { display:block; }
body[data-page="tools"] .cta-band { background:var(--black);padding:56px 52px;display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap; }
body[data-page="tools"] .cta-band h2 { font-family:'PosterGothic',sans-serif;font-size:clamp(20px,3vw,32px);font-weight:900;text-transform:uppercase;color:var(--white); }
body[data-page="tools"] .cta-band p { font-size:15.5px;color:var(--grey);margin-top:8px;max-width:44ch; }
body[data-page="tools"] .cta-btn { background:var(--white);color:var(--black);font-size:12px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;padding:14px 32px;text-decoration:none;white-space:nowrap; }

@media(max-width:960px) {
  body[data-kind="product"] .nav-links a:not(.nav-cta), body[data-page="about"] .nav-links a:not(.nav-cta), body[data-page="catalog"] .nav-links a:not(.nav-cta), body[data-page="catalog-search"] .nav-links a:not(.nav-cta), body[data-page="catalog-visual"] .nav-links a:not(.nav-cta), body[data-page="contact"] .nav-links a:not(.nav-cta), body[data-page="industries"] .nav-links a:not(.nav-cta), body[data-page="home"] .nav-links a:not(.nav-cta), body[data-page="p-sling-builder"] .nav-links a:not(.nav-cta), body[data-page="products"] .nav-links a:not(.nav-cta), body[data-page="services"] .nav-links a:not(.nav-cta), body[data-page="tools"] .nav-links a:not(.nav-cta) { display:none; }
  body[data-page="about"] .page-hero { grid-template-columns:1fr;min-height:auto; }
  body[data-page="about"] .page-hero-left { padding:48px 24px; }
  body[data-page="about"] .mission { grid-template-columns:1fr;gap:40px;padding:56px 24px; }
  body[data-page="about"] .history-section { padding:56px 24px; }
  body[data-page="about"] .history-body { grid-template-columns:1fr; }
  body[data-page="about"] .polaroid-spread { display:none; }
  body[data-page="about"] .photo-strip { grid-template-columns:1fr; }
  body[data-page="about"] .photo-strip-img { height:260px; }
  body[data-page="about"] .gen-section { padding:56px 24px; }
  body[data-page="about"] .gen-grid { grid-template-columns:1fr; }
  body[data-page="about"] .quality { padding:56px 24px; }
  body[data-page="about"] .credentials { padding:56px 24px; }
  body[data-page="about"] .cred-grid { grid-template-columns:1fr 1fr; }
  body[data-page="contact"] .contact-hero-inner { padding: 48px 24px; }
  body[data-page="contact"] .phone-band { flex-direction: column; padding: 0 24px; }
  body[data-page="contact"] .phone-primary { border-right: none; border-bottom: 1px solid #ddd; padding: 28px 0; }
  body[data-page="contact"] .phone-secondary { padding: 28px 0; }
  body[data-page="contact"] .contact-body { grid-template-columns: 1fr; }
  body[data-page="contact"] .contact-info { padding: 48px 24px; }
  body[data-page="contact"] .contact-form-wrap { padding: 48px 24px; }
  body[data-page="contact"] .form-row { grid-template-columns: 1fr; }
  body[data-page="contact"] .map-strip { padding: 40px 24px; flex-direction: column; align-items: flex-start; }
  body[data-page="industries"] .page-hero, body[data-page="products"] .page-hero, body[data-page="services"] .page-hero { padding:40px 24px 36px; }
  body[data-page="industries"] .ind-grid { grid-template-columns:1fr; }
  body[data-page="industries"] .ind-card { grid-template-columns:1fr; }
  body[data-page="industries"] .ind-card:nth-child(even) { direction:ltr; }
  body[data-page="industries"] .ind-card-img { height:220px; }
  body[data-page="industries"] .ind-card-body { padding:28px 24px; }
  body[data-page="industries"] .cta-band { padding:48px 24px;flex-direction:column;align-items:flex-start; }
  body[data-page="products"] .cat-grid { grid-template-columns:1fr 1fr; }
  body[data-page="products"] .cat-section { padding:48px 24px; }
  body[data-page="products"] .prod-list { grid-template-columns:1fr 1fr; }
  body[data-page="products"] .quote-band { padding:48px 24px;flex-direction:column;align-items:flex-start; }
  body[data-page="products"] .cat-section-header { flex-direction:column;gap:8px; }
  body[data-page="products"] .cat-section-header p { text-align:left; }
  body[data-page="services"] .svc-entry { grid-template-columns:1fr; }
  body[data-page="services"] .svc-entry.reverse { direction:ltr; }
  body[data-page="services"] .svc-entry-img { height:260px; }
  body[data-page="services"] .svc-entry-body { padding:40px 24px; }
  body[data-page="services"] .svc-delivery { grid-template-columns:1fr;gap:40px;padding:56px 24px; }
  body[data-page="services"] .cta-band { padding:56px 24px;flex-direction:column;align-items:flex-start; }
}

@media(max-width:768px) {
  body[data-page="catalog-visual"] .grid-hero { padding:36px 24px 28px; }
  body[data-page="catalog-visual"] .section-grid { grid-template-columns:1fr 1fr; }
  body[data-page="catalog-visual"] .search-results { padding:24px 24px 48px; }
  body[data-page="catalog-visual"] .detail-hero-content { padding:24px 24px; }
  body[data-page="catalog-visual"] .detail-entries { padding:32px 24px 56px; }
  body[data-page="catalog-visual"] .section-nav { padding:20px 24px; }
}

@media(max-width:500px) {
  body[data-page="catalog-visual"] .section-grid { grid-template-columns:1fr; }
}

@media (max-width: 960px) {
  body[data-page="home"] .hero-content { padding: 0 24px 56px; }
  body[data-page="home"] .accred { grid-template-columns: 1fr; gap: 40px; padding: 56px 24px; }
    body[data-page="home"] .products { padding: 56px 24px; }
  body[data-page="home"] .prod-grid { grid-template-columns: 1fr 1fr; }
  body[data-page="home"] .services { padding: 56px 24px; }
  body[data-page="home"] .svc-list { grid-template-columns: 1fr; }
  body[data-page="home"] .svc-photo { width: 140px; margin: 14px 0 14px 14px; }
  body[data-page="home"] .svc-text { padding: 16px 16px 16px 14px; gap: 12px; }
  body[data-page="home"] .svc-num { font-size: 26px; width: 30px; }
  body[data-page="home"] .catalog { grid-template-columns: 1fr; padding: 64px 24px; }
    body[data-page="home"] .section-header { flex-direction: column; gap: 8px; }
  body[data-page="home"] .section-header-sub { text-align: left; }
}

@media (max-width: 580px) {
  body[data-page="home"] .prod-grid { grid-template-columns: 1fr; }
}

@media(max-width:580px) {
  body[data-page="products"] .cat-grid { grid-template-columns:1fr; }
  body[data-page="products"] .prod-list { grid-template-columns:1fr; }
}

@media (max-width:960px) {
  body[data-kind="product"] .prod-body { grid-template-columns:1fr; }
  body[data-kind="product"] .prod-sidebar { position:static; }
  body[data-kind="product"] .prod-content { padding:32px 24px; }
  body[data-kind="product"] .prod-hero { padding:40px 24px 36px; }
  body[data-kind="product"] .prod-nav { padding:0 24px; }
}

/* ── tools.html: calculator states added with the calculator scripts ── */
body[data-page="tools"] .sa-badge { margin-top: 14px; padding: 12px 14px; font-size:13.5px; line-height: 1.65; border-left: 3px solid var(--grey); background: #f1efec; color: #444; }
body[data-page="tools"] .sa-badge.ok   { border-left-color: #3f7a4f; }
body[data-page="tools"] .sa-badge.warn { border-left-color: #b08a2e; }
body[data-page="tools"] .sa-badge.bad  { border-left-color: #a33a2c; background: #f7ecea; color: #7a2a20; }
body[data-page="tools"] .faq-q { width: 100%; text-align: left; cursor: pointer; font-family: inherit; }
body[data-page="tools"] .faq-q::after { content: '+'; float: right; color: var(--grey); }
body[data-page="tools"] .faq-q.open::after { content: '\2212'; }

/* wide spec and capacity tables scroll inside their own box on small screens */
@media (max-width: 760px) {
  body[data-kind="product"] .spec-table-wrap,
  body[data-kind="product"] table,
  body[data-page="tools"] table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}


/* Mobile rules that had lost their @media wrapper in the original
   page stylesheets — restored here. */
@media (max-width: 960px) {
  body[data-page="catalog-search"] .results { padding:32px 24px 60px; }
  body[data-page="catalog"] .cat-hero { grid-template-columns:1fr; }
  body[data-page="catalog"] .cat-hero-left { padding:48px 24px; }
  body[data-page="catalog"] .cat-hero-right { display:none; }
  body[data-page="catalog"] .contents { padding:56px 24px; }
  body[data-page="catalog"] .contents-grid { grid-template-columns:1fr 1fr; }
  body[data-page="catalog"] .request-band { padding:56px 24px;flex-direction:column;align-items:flex-start; }
  body[data-page="tools"] .calc-diagram { height:clamp(260px,42vh,340px);padding:20px 20px 24px; }
  body[data-page="tools"] .calc-inputs { padding:28px 24px 36px;grid-template-columns:1fr;gap:0; }
  body[data-page="tools"] .calc-inputs .live-results { margin-top:26px;border-top:1px solid #e0ddd8;padding-top:24px; }
  body[data-page="tools"] .tool-tab { padding:12px 16px;font-size:13px; }
  body[data-page="tools"] .faq-wrap { padding:48px 24px; }
  body[data-page="tools"] .cta-band { padding:40px 24px;flex-direction:column; }
}

/* Grid tracks must be allowed to shrink below their content, or a wide table
   inside stretches the whole page on a phone. */
@media (max-width: 960px) {
  body[data-kind="product"] .prod-body { grid-template-columns: minmax(0, 1fr); }
  body[data-kind="product"] .prod-body > * { min-width: 0; }
  body[data-page="tools"] .calc-inputs { grid-template-columns: minmax(0, 1fr); }
  body[data-page="tools"] .calc-wrap.active > * { min-width: 0; }
  body[data-page="tools"] .field-row { grid-template-columns: 1fr; }
}

/* Horizontal tab strips scroll rather than pushing the page wide on a phone. */
body[data-page="tools"] .tool-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
body[data-page="tools"] .tool-tabs::-webkit-scrollbar { display: none; }
body[data-page="tools"] .tool-tab { flex-shrink: 0; white-space: nowrap; }
body[data-kind="product"] .prod-nav { scrollbar-width: none; }
body[data-kind="product"] .prod-nav::-webkit-scrollbar { display: none; }

/* The sling-type strip is nine columns on a wide screen; it reflows rather than
   forcing the page wide on narrower ones. */
body[data-kind="product"] .sling-type-grid { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 1px; background: #e0ddd8; }
body[data-kind="product"] .sling-type-grid img { height: 260px; width: 100%; object-fit: contain; }
@media (max-width: 1100px) { body[data-kind="product"] .sling-type-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (max-width: 760px)  { body[data-kind="product"] .sling-type-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
                             body[data-kind="product"] .sling-type-grid img { height: 170px; } }
@media (max-width: 420px)  { body[data-kind="product"] .sling-type-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ── NUMBERED PROCEDURE ─────────────────────────────────────────────────────
   A numbered step with its figure beside it. The figures are wide, thin line
   drawings of a rope with clips on it, so they sit to the right of the text at
   reading width rather than above it where they would stretch the page. */
body[data-kind="product"] .cat-prod-body .clip-steps {
  list-style:none; margin:14px 0 6px; padding:0;
}
body[data-kind="product"] .cat-prod-body .clip-steps > li {
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:28px; align-items:center;
  padding:20px 0; border-bottom:1px solid #eae7e0;
}
body[data-kind="product"] .cat-prod-body .clip-steps > li:last-child { border-bottom:none; }
body[data-kind="product"] .cat-prod-body .step-body {
  display:grid; grid-template-columns:34px minmax(0,1fr); gap:12px; align-items:start;
}
body[data-kind="product"] .cat-prod-body .step-n {
  font-family:'PosterGothic',sans-serif; font-size:19px; font-weight:900;
  color:var(--white); background:var(--black); border-radius:50%;
  width:30px; height:30px; display:flex; align-items:center;
  justify-content:center; line-height:1;
}
body[data-kind="product"] .cat-prod-body .step-body p {
  font-size:15.5px; color:#3d3d3d; line-height:1.7; margin:2px 0 0;
}
body[data-kind="product"] .cat-prod-body .step-fig { margin:0; }
body[data-kind="product"] .cat-prod-body .step-fig img {
  width:100%; height:auto; display:block;
}
body[data-kind="product"] .cat-prod-body .step-fig figcaption {
  font-size:12px; color:var(--grey); margin-top:8px; text-align:center;
  letter-spacing:.03em; text-transform:uppercase;
}
@media (max-width:760px) {
  body[data-kind="product"] .cat-prod-body .clip-steps > li {
    grid-template-columns:minmax(0,1fr); gap:14px;
  }
}

/* ── CONFIGURATION CARDS ────────────────────────────────────────────────────
   A row of cards, one per configuration, each with the drawing above its code
   and a line of description. This is the layout the sling builder uses and the
   one to match: nine slings side by side can be compared at a glance, where the
   same nine stacked as image-beside-text rows have to be scrolled through and
   held in your head.

   The column count comes from --n on the grid, set to however many cards there
   are, so a two-configuration bridle page does not stretch two cards across the
   full width. Below the breakpoints the count is ignored and the cards wrap. */
body[data-kind="product"] .cat-prod-body .cfg-grid {
  display:grid; grid-template-columns:repeat(var(--n,9), minmax(0,1fr));
  gap:1px; margin:6px 0 4px;
}
/* The rules live on the cards, not as a background showing through a 1px gap.
   With six cards wrapping to five and one, the gap-background version filled
   the whole empty half of the last row with a grey block. An outline on each
   card meets its neighbour's in the gap and reads as one line, and an empty
   cell is just page. */
body[data-kind="product"] .cat-prod-body .cfg-card {
  background:var(--lgrey,#f5f3f0); padding:18px 8px 16px; text-align:center;
  display:flex; flex-direction:column; align-items:center;
  outline:1px solid #e0ddd8;
}
body[data-kind="product"] .cat-prod-body .cfg-card img {
  height:250px; width:100%; object-fit:contain; margin-bottom:12px;
}
body[data-kind="product"] .cat-prod-body .cfg-code {
  font-family:'PosterGothic',sans-serif; font-size:15px; font-weight:900;
  color:var(--black); letter-spacing:-.01em;
}
body[data-kind="product"] .cat-prod-body .cfg-desc {
  font-size:11.5px; color:#6f6a63; margin-top:5px; line-height:1.45;
  max-width:19ch;
}
@media (max-width:1180px) {
  body[data-kind="product"] .cat-prod-body .cfg-grid {
    grid-template-columns:repeat(auto-fit, minmax(128px, 1fr));
  }
}
@media (max-width:760px) {
  body[data-kind="product"] .cat-prod-body .cfg-grid {
    grid-template-columns:repeat(auto-fit, minmax(108px, 1fr));
  }
  body[data-kind="product"] .cat-prod-body .cfg-card { padding:14px 6px 12px; }
  body[data-kind="product"] .cat-prod-body .cfg-card img { height:170px; margin-bottom:9px; }
  body[data-kind="product"] .cat-prod-body .cfg-code { font-size:13px; }
  body[data-kind="product"] .cat-prod-body .cfg-desc { font-size:10.5px; }
}
@media (max-width: 760px)  { body[data-page="p-sling-builder"] .type-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } }
@media (max-width: 420px)  { body[data-page="p-sling-builder"] .type-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }

/* Wide capacity tables scroll inside their column instead of stretching the page. */
.table-scroll { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
body[data-kind="product"] .prod-body { grid-template-columns: 240px minmax(0, 1fr); }
body[data-kind="product"] .prod-content,
body[data-kind="product"] .prod-sidebar { min-width: 0; }
body[data-page="tools"] .calc-wrap.active > * { min-width: 0; }

/* Narrow screens: anything inside a product page's content column goes single
   column, and nothing is allowed to force the column wider than the viewport.
   !important is needed because several of these grids are inline styles. */
@media (max-width: 760px) {
  body[data-kind="product"] .prod-content [style*="grid-template-columns"]:not(.sling-type-grid),
  body[data-kind="product"] .prod-features,
  body[data-kind="product"] .prod-content .types-grid { grid-template-columns: minmax(0, 1fr) !important; }
  body[data-kind="product"] .prod-content > *,
  body[data-kind="product"] .prod-content [class] { min-width: 0; }
  body[data-kind="product"] .prod-content { overflow-x: clip; }
}

/* Final word on the product layout: two columns on desktop, one on mobile.
   This must come last — earlier root-level rules would otherwise win at every width. */
@media (max-width: 960px) {
  body[data-kind="product"] .prod-body { grid-template-columns: minmax(0, 1fr); }
  body[data-kind="product"] .prod-sidebar { position: static; border-right: 0; border-bottom: 1px solid #e0ddd8; padding: 28px 24px; }
  body[data-kind="product"] .prod-content { padding: 32px 24px; }
}

/* ===== products/sling-builder.html — configurator =====
   Recovered from Steve's working copy of the page; these rules were missing
   from the version in the site folder, which is why the page rendered bare. */
body[data-page="p-sling-builder"] .nav-back { font-size:13px;color:var(--grey);text-decoration:none;letter-spacing:0.06em;display:flex;align-items:center;gap:8px; }
body[data-page="p-sling-builder"] .nav-back:hover { color:var(--white); }
body[data-page="p-sling-builder"] .nav-title { font-family:'PosterGothic',sans-serif;font-size:16px;font-weight:900;text-transform:uppercase;color:var(--white);letter-spacing:-0.01em; }
body[data-page="p-sling-builder"] .builder { display:grid;grid-template-columns:1fr 380px;flex:1;min-height:0; }
body[data-page="p-sling-builder"] .builder-main { padding:40px 48px;overflow-y:auto;border-right:1px solid #ddd;background:var(--white);color:var(--black); }
body[data-page="p-sling-builder"] .builder-sidebar { padding:32px 28px;background:#111;display:flex;flex-direction:column;gap:0;overflow-y:auto; }
body[data-page="p-sling-builder"] .step { margin-bottom:40px; }
body[data-page="p-sling-builder"] .step-label { font-size:10px;letter-spacing:0.14em;text-transform:uppercase;color:#888;margin-bottom:16px;display:flex;align-items:center;gap:10px; }
body[data-page="p-sling-builder"] .step-num { background:#ccc;color:var(--black);width:22px;height:22px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:11px;flex-shrink:0;transition:background 0.2s; }
body[data-page="p-sling-builder"] .step-num.done { background:var(--black);color:var(--white); }
body[data-page="p-sling-builder"] .leg-grid { display:grid;grid-template-columns:repeat(4,1fr);gap:2px;background:#ddd;margin-bottom:0; }
body[data-page="p-sling-builder"] .leg-card { background:#f0efec;padding:28px 16px;text-align:center;cursor:pointer;transition:background 0.15s;border:2px solid transparent; }
body[data-page="p-sling-builder"] .leg-card:hover { background:#e0ddd8; }
body[data-page="p-sling-builder"] .leg-card.selected { background:var(--black);border-color:var(--black); }
body[data-page="p-sling-builder"] .leg-card.selected .lc-num { color:var(--white); }
body[data-page="p-sling-builder"] .leg-card.selected .lc-label { color:#aaa; }
body[data-page="p-sling-builder"] .lc-num { font-family:'PosterGothic',sans-serif;font-size:48px;font-weight:900;color:var(--black);line-height:1; }
body[data-page="p-sling-builder"] .lc-label { font-size:11px;color:#888;letter-spacing:0.06em;text-transform:uppercase;margin-top:8px; }
body[data-page="p-sling-builder"] .type-grid { display:none;grid-template-columns:repeat(9,1fr);gap:1px;background:#ddd; }
body[data-page="p-sling-builder"] .type-card { background:#f5f3f0;padding:12px 4px;text-align:center;cursor:pointer;display:flex;flex-direction:column;align-items:center;transition:background 0.15s; }
body[data-page="p-sling-builder"] .type-card:hover { background:#e8e5e0; }
body[data-page="p-sling-builder"] .type-card.selected { background:var(--black);outline:2px solid var(--white); }
body[data-page="p-sling-builder"] .type-card.selected .tc-code { color:var(--white); }
body[data-page="p-sling-builder"] .type-card.selected .tc-desc { color:#aaa; }
body[data-page="p-sling-builder"] .type-card img { height:220px;width:100%;object-fit:contain;margin-bottom:8px;pointer-events:none; }
body[data-page="p-sling-builder"] .type-card.selected img { filter:none; }
body[data-page="p-sling-builder"] .tc-code { font-family:'PosterGothic',sans-serif;font-size:13px;font-weight:900;color:var(--black);letter-spacing:-0.01em; }
body[data-page="p-sling-builder"] .tc-desc { font-size:9px;color:#999;margin-top:3px;line-height:1.4; }
body[data-page="p-sling-builder"] .field-row { display:grid;grid-template-columns:1fr 1fr 100px;gap:14px;align-items:end; }
body[data-page="p-sling-builder"] .field label { display:block;font-size:10px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:#888;margin-bottom:8px; }
body[data-page="p-sling-builder"] .field input, body[data-page="p-sling-builder"] .field select { width:100%;background:#f5f3f0;border:1px solid #ddd;color:var(--black);font-family:'WorkSans',sans-serif;font-size:17px;padding:13px 16px;outline:none;height:52px;-webkit-appearance:none;appearance:none; }
body[data-page="p-sling-builder"] .field input:focus, body[data-page="p-sling-builder"] .field select:focus { border-color:var(--black); }
body[data-page="p-sling-builder"] .field select option { background:#1a1a1a; }
body[data-page="p-sling-builder"] .wll-strip { display:grid;grid-template-columns:1fr 1fr 1fr;gap:1px;background:var(--grey-mid);margin:20px 0; }
body[data-page="p-sling-builder"] .wll-cell { background:#1a1a1a;padding:14px;text-align:center; }
body[data-page="p-sling-builder"] .wll-cell-label { font-size:9px;letter-spacing:0.12em;text-transform:uppercase;color:var(--grey);margin-bottom:4px; }
body[data-page="p-sling-builder"] .wll-cell-val { font-family:'PosterGothic',sans-serif;font-size:26px;font-weight:900;color:var(--white); }
body[data-page="p-sling-builder"] .wll-cell-unit { font-size:10px;color:#555;margin-top:2px; }
body[data-page="p-sling-builder"] .add-btn:disabled { background:#2a2a2a;color:#555;cursor:not-allowed; }
body[data-page="p-sling-builder"] .add-btn:not(:disabled):hover { background:var(--grey-light); }
body[data-page="p-sling-builder"] .sidebar-title { font-family:'PosterGothic',sans-serif;font-size:18px;font-weight:900;text-transform:uppercase;color:var(--white);letter-spacing:-0.01em;margin-bottom:4px; }
body[data-page="p-sling-builder"] .sidebar-sub { font-size:13px;color:#555;margin-bottom:24px; }
body[data-page="p-sling-builder"] .quote-empty { font-size:14.5px;color:#333;padding:32px 0;text-align:center;border:1px dashed #2a2a2a; }
body[data-page="p-sling-builder"] .quote-item { padding:14px 0;border-bottom:1px solid #1a1a1a;display:flex;justify-content:space-between;align-items:start;gap:8px; }
body[data-page="p-sling-builder"] .qi-headline { font-family:'PosterGothic',sans-serif;font-size:17px;font-weight:900;color:var(--white);letter-spacing:-0.01em;margin-bottom:2px; }
body[data-page="p-sling-builder"] .qi-line2 { font-size:14.5px;color:var(--grey-light);margin-bottom:1px; }
body[data-page="p-sling-builder"] .qi-line3 { font-size:13px;color:#666;margin-bottom:4px; }
body[data-page="p-sling-builder"] .qi-qty-row { display:flex;align-items:center;gap:8px;font-size:13px;color:var(--grey-light);margin-top:4px; }
body[data-page="p-sling-builder"] .qi-qty-input { width:52px;background:#1a1a1a;border:1px solid #333;color:var(--white);font-family:'WorkSans',sans-serif;font-size:14.5px;padding:3px 7px;text-align:center;outline:none; }
body[data-page="p-sling-builder"] .qi-qty-input:focus { border-color:var(--grey); }
body[data-page="p-sling-builder"] .qi-code { font-size:13px;color:var(--grey-light); }
body[data-page="p-sling-builder"] .qi-detail { font-size:13px;color:#666;margin-top:3px; }
body[data-page="p-sling-builder"] .qi-hook { display:inline-block;font-size:11px;font-weight:700;letter-spacing:0.07em;text-transform:uppercase;color:var(--black);background:var(--white);padding:2px 8px;margin:4px 0; }
body[data-page="p-sling-builder"] .qi-wll { font-size:11px;color:#444;margin-top:4px; }
body[data-page="p-sling-builder"] .qi-remove { background:none;border:none;color:#444;cursor:pointer;font-size:15.5px;padding:2px 6px;flex-shrink:0; }
body[data-page="p-sling-builder"] .qi-remove:hover { color:var(--white); }
body[data-page="p-sling-builder"] .quote-total { font-size:11px;color:#444;padding:12px 0;margin-bottom:20px; }
body[data-page="p-sling-builder"] .submit-btn:hover { background:var(--grey-light); }
body[data-page="p-sling-builder"] .clear-btn:hover { border-color:#555;color:var(--grey); }
body[data-page="p-sling-builder"] .phone-cta { font-size:11px;color:#333;text-align:center;margin-top:12px;line-height:1.6; }
body[data-page="p-sling-builder"] .phone-cta a { color:#555;text-decoration:none; }
@media(max-width:900px) {
  body[data-page="p-sling-builder"] .builder { grid-template-columns:1fr; }
  /* Configurator first on a phone — the quote panel is a summary of work the
     visitor has not done yet, so leading with an empty box buries the controls. */
  body[data-page="p-sling-builder"] .builder-sidebar { order:1;border-top:1px solid var(--grey-mid); }
  body[data-page="p-sling-builder"] .builder-main { order:0; }
  body[data-page="p-sling-builder"] .builder-main { padding:28px 20px; }
  body[data-page="p-sling-builder"] .type-grid { grid-template-columns:repeat(5,1fr); }
  body[data-page="p-sling-builder"] .field-row { grid-template-columns:1fr 1fr; }
}

/* sling-builder rules that the first extraction pass dropped by mistake */
body[data-page="p-sling-builder"] .add-btn { background:var(--white);color:var(--black);font-family:'WorkSans',sans-serif;font-size:12px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;padding:13px 32px;border:none;cursor:pointer;width:100%; }
body[data-page="p-sling-builder"] .submit-btn { display:block;background:var(--white);color:var(--black);font-size:12px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;padding:14px;text-align:center;text-decoration:none;width:100%;margin-bottom:8px; }
body[data-page="p-sling-builder"] .clear-btn { display:block;background:none;border:1px solid #2a2a2a;color:#555;font-family:'WorkSans',sans-serif;font-size:11px;letter-spacing:0.06em;text-transform:uppercase;padding:10px;text-align:center;cursor:pointer;width:100%; }

/* Sling-type picker.
   Each grid has its own column count (nine for single leg, fewer for the
   bridles). minmax(0,…) keeps a wide row from pushing the page sideways, and
   the grid no longer paints its own background — the 1px gaps are drawn as
   outlines on the cards instead, so grids with only two or three types don't
   leave a block of empty grey to the right. */
body[data-page="p-sling-builder"] .type-grid { background: none; gap: 1px; }
body[data-page="p-sling-builder"] .type-card { box-shadow: 0 0 0 1px #e0ddd8; }
body[data-page="p-sling-builder"] .type-card.selected { box-shadow: 0 0 0 1px var(--black); }
@media (max-width: 1100px) { body[data-page="p-sling-builder"] .type-grid { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; } }
@media (max-width: 760px)  { body[data-page="p-sling-builder"] .type-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } }
@media (max-width: 420px)  { body[data-page="p-sling-builder"] .type-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }



@media (max-width: 960px) {
      }
/* Break the headline after "Certified." the way the layout was drawn. */
@media (max-width: 960px) {
  }

/* ── ACCREDITATION ─────────────────────────────────────
   Text left, the audit certificate right. The certificate already carries the
   AWRF seal, so the section doesn't repeat it — that alone took ~285px of
   height out of the block. */
body[data-page="home"] .accred {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 64px; padding: 60px 52px;
}
body[data-page="home"] .accred-left h2 {
  font-family: 'PosterGothic', 'WorkSans', sans-serif;
  font-size: clamp(26px, 3vw, 38px); font-weight: 900;
  text-transform: uppercase; color: var(--black);
  line-height: 1.1; letter-spacing: -0.01em; margin-bottom: 20px;
}
body[data-page="home"] .accred-lead {
  font-size:17px; color: #4a4a4a; line-height: 1.75; max-width: 52ch; margin-bottom: 30px;
}

body[data-page="home"] .accred-standards { border-top: 1px solid #ddd9d2; padding-top: 22px; }
body[data-page="home"] .accred-standards h3 {
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--grey); font-weight: 600; margin-bottom: 16px;
}
body[data-page="home"] .accred-standards ul {
  list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px;
}
body[data-page="home"] .accred-standards li { display: flex; flex-direction: column; gap: 5px; }
body[data-page="home"] .accred-standards li strong {
  font-family: 'PosterGothic', sans-serif; font-size: 20px; font-weight: 900;
  color: var(--black); letter-spacing: .01em; line-height: 1;
}
body[data-page="home"] .accred-standards li span {
  font-size: 11.5px; color: #6a6a6a; line-height: 1.45;
}

body[data-page="home"] .accred-card {
  background: linear-gradient(180deg, #6b8cbd 0%, #3c68ab 100%);
  border-radius: 16px; padding: 24px 24px 18px;
  max-width: 540px;                      /* keeps the block from getting tall on wide screens */
  margin: 0 0 0 auto;                    /* sits flush with the right edge */
  display: flex; flex-direction: column; gap: 14px;
}
body[data-page="home"] .accred-cert {
  display: block; border-radius: 4px; overflow: hidden;
  box-shadow: 0 10px 26px rgba(0,0,0,.28);
  transition: transform .2s ease, box-shadow .2s ease;
}
body[data-page="home"] .accred-cert:hover {
  transform: translateY(-2px); box-shadow: 0 14px 32px rgba(0,0,0,.36);
}
body[data-page="home"] .accred-cert img { width: 100%; height: auto; display: block; }
body[data-page="home"] .accred-card figcaption {
  font-size: 11.5px; color: rgba(255,255,255,.72); text-align: center; letter-spacing: .02em;
}
body[data-page="home"] .accred-card figcaption a { color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.4); }
body[data-page="home"] .accred-card figcaption a:hover { border-bottom-color: #fff; }

@media (max-width: 960px) {
  body[data-page="home"] .accred { grid-template-columns: 1fr; gap: 36px; padding: 48px 24px; }
  body[data-page="home"] .accred-standards ul { grid-template-columns: 1fr 1fr; gap: 18px; }
  body[data-page="home"] .accred-card { padding: 18px 18px 14px; }
}
@media (max-width: 460px) {
  body[data-page="home"] .accred-standards ul { grid-template-columns: 1fr; gap: 14px; }
}

/* ── WHY NELSON ────────────────────────────────────────
   Replaces the old quote band. Dark section over a desaturated shop photo,
   with four outlined cards. The orange (--accent in base.css) is spent in one
   place — the script eyebrow — plus the card outlines. Card headings are white
   so they read as headings and hold contrast over whatever photo sits behind. */
body[data-page="home"] .why {
  position: relative; overflow: hidden;
  background: var(--black);
  padding: 60px 52px 66px;
  border-top: 1px solid var(--grey-mid);
}
body[data-page="home"] .why-bg {
  position: absolute; inset: 0;
  background-image: url('img/why-bg.jpg');
  background-size: cover; background-position: center;
  filter: contrast(1.05);          /* the file is already greyscale — smaller that way */
  opacity: .40;
}
/* keeps the photo from competing with the text at the top of the block */
body[data-page="home"] .why::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(18,18,18,.80) 0%, rgba(18,18,18,.42) 40%, rgba(18,18,18,.68) 100%);
}
body[data-page="home"] .why-inner { position: relative; z-index: 1; max-width: 1180px; margin: 0 auto; }

body[data-page="home"] .why-eyebrow {
  font-family: 'Yellowtail', cursive;
  font-size: clamp(26px, 3vw, 38px);
  color: var(--accent); line-height: 1.1;
  margin-bottom: 6px; padding-bottom: 4px;
}
body[data-page="home"] .why h2 {
  font-family: 'PosterGothic', 'WorkSans', sans-serif;
  font-size: clamp(24px, 3.2vw, 40px); font-weight: 900;
  text-transform: uppercase; color: var(--white);
  line-height: 1.08; letter-spacing: -0.01em; margin-bottom: 12px;
}
body[data-page="home"] .why-sub {
  font-size:16.5px; color: var(--grey-light); line-height: 1.7;
  max-width: 78ch; margin-bottom: 32px;
}

body[data-page="home"] .why-grid {
  list-style: none;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
body[data-page="home"] .why-card {
  border: 1px solid rgba(197,115,45,.55);
  border-radius: 14px;
  padding: 30px 32px 32px;
  background: rgba(18,18,18,.42);
  backdrop-filter: blur(2px);
  text-align: center;
  display: flex; flex-direction: column; justify-content: center;
  transition: border-color .2s ease, background .2s ease;
}
body[data-page="home"] .why-card:hover {
  border-color: var(--accent); background: rgba(18,18,18,.58);
}
body[data-page="home"] .why-card h3 {
  font-family: 'PosterGothic', 'WorkSans', sans-serif;
  font-size: clamp(17px, 1.5vw, 21px); font-weight: 900;
  text-transform: uppercase; color: var(--white);
  letter-spacing: .01em; line-height: 1.1; margin-bottom: 12px;
}
body[data-page="home"] .why-card p {
  font-size:16px; color: var(--white); line-height: 1.65; max-width: 44ch; margin: 0 auto;
}
body[data-page="home"] .why-note {
  font-size:13px !important; font-style: italic;
  color: var(--grey-light) !important; margin-top: 10px !important;
}

@media (max-width: 860px) {
  body[data-page="home"] .why-bg { background-image: url('img/why-bg-900.jpg'); }
  body[data-page="home"] .why { padding: 48px 24px 52px; }
  body[data-page="home"] .why-grid { grid-template-columns: 1fr; gap: 14px; }
  body[data-page="home"] .why-card { padding: 24px 22px; }
  body[data-page="home"] .why-sub { margin-bottom: 26px; }
}

/* Catalog cover — the real 2026 front, rendered from the print PDF. */
body[data-page="home"] .catalog-cover {
  display: block; width: clamp(190px, 20vw, 250px); flex-shrink: 0;
  text-decoration: none; text-align: center;
  transition: transform .2s ease;
}
body[data-page="home"] .catalog-cover:hover { transform: translateY(-4px); }
body[data-page="home"] .catalog-cover img {
  width: 100%; height: auto; display: block;
  box-shadow: 0 16px 38px rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.08);
}
body[data-page="home"] .catalog-cover-year {
  display: block; margin-top: 14px;
  font-family: 'PosterGothic', sans-serif; font-size:13px; font-weight: 900;
  color: var(--grey); letter-spacing: .1em; text-transform: uppercase;
}
@media (max-width: 960px) {
  /* the cover is worth showing on a phone now that it is the real thing */
  body[data-page="home"] .catalog { justify-items: start; gap: 40px; }
  body[data-page="home"] .catalog-cover { width: 180px; text-align: left; }
  body[data-page="home"] .catalog-cover-year { margin-top: 12px; }
}

/* ═══════════════════════════════════════════════════════════════════
   DOC PAGES — sling-guide.html, employment.html, forms.html
   A shared reading layout for long-form reference pages: numbered
   sections down a left rail, content in a measured column.
   ═══════════════════════════════════════════════════════════════════ */
body[data-page="sling-guide"] .nav-search svg,
body[data-page="employment"] .nav-search svg,
body[data-page="forms"] .nav-search svg ,
body[data-page="transparency-in-coverage"] .nav-search svg {
  position:absolute; right:12px; top:50%; transform:translateY(-50%);
  pointer-events:none; opacity:.4; width:14px; height:14px; flex-shrink:0;
}

body[data-page="sling-guide"] .page-hero,
body[data-page="employment"] .page-hero,
body[data-page="forms"] .page-hero ,
body[data-page="transparency-in-coverage"] .page-hero {
  background: var(--black); padding: 56px 52px 52px; border-bottom: 1px solid var(--grey-mid);
}
body[data-page="sling-guide"] .doc-eyebrow,
body[data-page="employment"] .doc-eyebrow,
body[data-page="forms"] .doc-eyebrow ,
body[data-page="transparency-in-coverage"] .doc-eyebrow {
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 14px;
}
body[data-page="sling-guide"] .page-hero h1,
body[data-page="employment"] .page-hero h1,
body[data-page="forms"] .page-hero h1 ,
body[data-page="transparency-in-coverage"] .page-hero h1 {
  font-family:'PosterGothic',sans-serif; font-size:clamp(32px,5vw,54px); font-weight:900;
  text-transform:uppercase; color:var(--white); letter-spacing:-.02em; line-height:1.05; margin-bottom:16px;
}
body[data-page="sling-guide"] .page-hero p,
body[data-page="employment"] .page-hero p,
body[data-page="forms"] .page-hero p ,
body[data-page="transparency-in-coverage"] .page-hero p {
  font-size:17px; color:var(--grey); line-height:1.8; max-width:56ch;
}

/* sticky in-page nav — only the sling guide is long enough to need one */
body[data-page="sling-guide"] .doc-toc {
  position: sticky; top: var(--nav-h); z-index: 40;
  background: #111; border-bottom: 1px solid var(--grey-mid);
  display: flex; gap: 4px; padding: 0 52px; overflow-x: auto;
}
body[data-page="sling-guide"] .doc-toc a {
  font-size:13px; letter-spacing: .05em; color: #6a6a6a; text-decoration: none;
  padding: 14px 18px; white-space: nowrap; border-bottom: 2px solid transparent;
}
body[data-page="sling-guide"] .doc-toc a:hover { color: var(--white); border-bottom-color: var(--accent); }

body[data-page="sling-guide"] .doc-body,
body[data-page="employment"] .doc-body,
body[data-page="forms"] .doc-body ,
body[data-page="transparency-in-coverage"] .doc-body { background: var(--white); }

body[data-page="sling-guide"] .doc-section,
body[data-page="employment"] .doc-section,
body[data-page="forms"] .doc-section ,
body[data-page="transparency-in-coverage"] .doc-section {
  display: grid; grid-template-columns: 96px minmax(0, 1fr);
  gap: 0 32px; padding: 64px 52px; border-bottom: 1px solid #ddd; align-items: start;
}
body[data-page="sling-guide"] .doc-section:last-child,
body[data-page="employment"] .doc-section:last-child,
body[data-page="forms"] .doc-section:last-child ,
body[data-page="transparency-in-coverage"] .doc-section:last-child { border-bottom: none; }

body[data-page="sling-guide"] .doc-num,
body[data-page="employment"] .doc-num,
body[data-page="forms"] .doc-num ,
body[data-page="transparency-in-coverage"] .doc-num {
  font-family:'PosterGothic',sans-serif; font-size:52px; font-weight:900;
  color:#dedad3; line-height:.9; letter-spacing:-.03em;
}
body[data-page="sling-guide"] .doc-content,
body[data-page="employment"] .doc-content,
body[data-page="forms"] .doc-content ,
body[data-page="transparency-in-coverage"] .doc-content { max-width: 74ch; min-width: 0; }

body[data-page="sling-guide"] .doc-content h2,
body[data-page="employment"] .doc-content h2,
body[data-page="forms"] .doc-content h2 ,
body[data-page="transparency-in-coverage"] .doc-content h2 {
  font-family:'PosterGothic',sans-serif; font-size:clamp(24px,3vw,34px); font-weight:900;
  text-transform:uppercase; color:var(--black); letter-spacing:-.01em; line-height:1.1; margin-bottom:16px;
}
body[data-page="sling-guide"] .doc-content h3,
body[data-page="employment"] .doc-content h3,
body[data-page="forms"] .doc-content h3 ,
body[data-page="transparency-in-coverage"] .doc-content h3 {
  font-size:17px; font-weight:700; color:var(--black); margin:36px 0 12px;
}
body[data-page="sling-guide"] .doc-content h4,
body[data-page="employment"] .doc-content h4,
body[data-page="forms"] .doc-content h4 ,
body[data-page="transparency-in-coverage"] .doc-content h4 { font-size:16.5px; font-weight:700; color:var(--black); margin-bottom:8px; }

body[data-page="sling-guide"] .doc-content p,
body[data-page="employment"] .doc-content p,
body[data-page="forms"] .doc-content p ,
body[data-page="transparency-in-coverage"] .doc-content p {
  font-size:16.5px; color:#3d3d3d; line-height:1.85; margin-bottom:16px;
}
body[data-page="sling-guide"] .doc-lead,
body[data-page="employment"] .doc-lead,
body[data-page="forms"] .doc-lead ,
body[data-page="transparency-in-coverage"] .doc-lead { font-size:17.5px !important; color:#2a2a2a !important; margin-bottom:24px !important; }
body[data-page="sling-guide"] .doc-content a,
body[data-page="employment"] .doc-content a,
body[data-page="forms"] .doc-content a ,
body[data-page="transparency-in-coverage"] .doc-content a { color:var(--black); text-decoration:underline; text-underline-offset:3px; }
body[data-page="sling-guide"] .doc-content a:hover,
body[data-page="employment"] .doc-content a:hover,
body[data-page="forms"] .doc-content a:hover ,
body[data-page="transparency-in-coverage"] .doc-content a:hover { color:var(--accent); }

body[data-page="sling-guide"] .doc-list,
body[data-page="employment"] .doc-list,
body[data-page="forms"] .doc-list ,
body[data-page="transparency-in-coverage"] .doc-list { list-style:none; margin-bottom:20px; }
body[data-page="sling-guide"] .doc-list li,
body[data-page="employment"] .doc-list li,
body[data-page="forms"] .doc-list li ,
body[data-page="transparency-in-coverage"] .doc-list li {
  font-size:16.5px; color:#3d3d3d; line-height:1.8; padding-left:20px; position:relative; margin-bottom:9px;
}
body[data-page="sling-guide"] .doc-list li::before,
body[data-page="employment"] .doc-list li::before,
body[data-page="forms"] .doc-list li::before ,
body[data-page="transparency-in-coverage"] .doc-list li::before {
  content:''; position:absolute; left:0; top:12px; width:7px; height:1px; background:var(--accent);
}

body[data-page="sling-guide"] .doc-note,
body[data-page="employment"] .doc-note,
body[data-page="forms"] .doc-note ,
body[data-page="transparency-in-coverage"] .doc-note { font-size:15.5px !important; color:var(--grey) !important; }
body[data-page="sling-guide"] .doc-source,
body[data-page="employment"] .doc-source,
body[data-page="forms"] .doc-source ,
body[data-page="transparency-in-coverage"] .doc-source {
  font-size:13.5px !important; color:var(--grey) !important; line-height:1.7 !important;
  border-top:1px solid #ddd; padding-top:18px; margin-top:36px !important;
}

/* callout */
body[data-page="sling-guide"] .doc-callout,
body[data-page="employment"] .doc-callout,
body[data-page="forms"] .doc-callout ,
body[data-page="transparency-in-coverage"] .doc-callout {
  background:#f2efe9; border-left:3px solid var(--accent);
  padding:20px 24px; margin:28px 0; font-size:16.5px; color:#2a2a2a; line-height:1.8;
}
body[data-page="sling-guide"] .doc-callout.warn { border-left-color:var(--black); background:#ecE8e1; }

/* CTA block */
body[data-page="sling-guide"] .doc-cta,
body[data-page="employment"] .doc-cta,
body[data-page="forms"] .doc-cta ,
body[data-page="transparency-in-coverage"] .doc-cta {
  background:var(--black); padding:32px 34px; margin-top:40px;
  display:flex; align-items:center; justify-content:space-between; gap:28px; flex-wrap:wrap;
}
body[data-page="sling-guide"] .doc-cta h3,
body[data-page="employment"] .doc-cta h3,
body[data-page="forms"] .doc-cta h3 ,
body[data-page="transparency-in-coverage"] .doc-cta h3 {
  font-family:'PosterGothic',sans-serif; font-size:22px; font-weight:900; text-transform:uppercase;
  color:var(--white) !important; letter-spacing:-.01em; margin:0 0 8px !important;
}
body[data-page="sling-guide"] .doc-cta p,
body[data-page="employment"] .doc-cta p,
body[data-page="forms"] .doc-cta p ,
body[data-page="transparency-in-coverage"] .doc-cta p { color:var(--grey) !important; margin:0 !important; font-size:15.5px !important; }
body[data-page="sling-guide"] .doc-cta-btn,
body[data-page="employment"] .doc-cta-btn,
body[data-page="forms"] .doc-cta-btn ,
body[data-page="transparency-in-coverage"] .doc-cta-btn {
  background:var(--white); color:var(--black) !important; font-size:13px; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; padding:14px 32px;
  text-decoration:none !important; white-space:nowrap; flex-shrink:0;
}
body[data-page="sling-guide"] .doc-cta-btn:hover,
body[data-page="employment"] .doc-cta-btn:hover,
body[data-page="forms"] .doc-cta-btn:hover ,
body[data-page="transparency-in-coverage"] .doc-cta-btn:hover { background:var(--grey-light); color:var(--black) !important; }

/* ── tables ── */
body[data-page="sling-guide"] .table-wrap { overflow-x:auto; margin:22px 0 28px; }
body[data-page="sling-guide"] .doc-table { width:100%; border-collapse:collapse; min-width:520px; }
body[data-page="sling-guide"] .doc-table caption {
  text-align:left; font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--grey); padding-bottom:10px;
}
body[data-page="sling-guide"] .doc-table th,
body[data-page="sling-guide"] .doc-table td {
  text-align:left; padding:13px 16px; font-size:15.5px; border-bottom:1px solid #ddd; vertical-align:top;
}
body[data-page="sling-guide"] .doc-table thead th {
  font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--white);
  background:var(--black); border-bottom:none; font-weight:600;
}
body[data-page="sling-guide"] .doc-table tbody th { font-weight:700; color:var(--black); white-space:nowrap; }
body[data-page="sling-guide"] .doc-table tbody td { color:#3d3d3d; line-height:1.7; }
body[data-page="sling-guide"] .doc-table .row-warn { background:#f2efe9; }
body[data-page="sling-guide"] .doc-table .row-warn td,
body[data-page="sling-guide"] .doc-table .row-warn th { color:var(--black); font-weight:700; }
body[data-page="sling-guide"] .crit-table { min-width:620px; }
body[data-page="sling-guide"] .crit-table tbody th { width:150px; }

/* ── hitch cards ── */
body[data-page="sling-guide"] .hitch-grid {
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:2px; background:#ddd; margin:22px 0 8px;
}
body[data-page="sling-guide"] .hitch-card { background:var(--white); padding:24px 22px; }
body[data-page="sling-guide"] .hitch-factor {
  font-family:'PosterGothic',sans-serif; font-size:34px; font-weight:900;
  color:var(--accent); line-height:1; letter-spacing:-.02em; margin-bottom:10px;
}
body[data-page="sling-guide"] .hitch-name {
  font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--black); margin-bottom:10px;
}
body[data-page="sling-guide"] .hitch-card p { font-size:15px !important; line-height:1.7 !important; margin:0 !important; }

/* ── selection cards ── */
body[data-page="sling-guide"] .sel-grid {
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:2px; background:#ddd; margin:22px 0;
}
body[data-page="sling-guide"] .sel-card { background:var(--white); padding:26px 24px; }
body[data-page="sling-guide"] .sel-card h3 { margin:0 0 4px !important; font-size:18px; }
body[data-page="sling-guide"] .sel-for {
  font-size:11.5px !important; letter-spacing:.08em; text-transform:uppercase;
  color:var(--accent) !important; margin-bottom:14px !important; font-weight:700;
}
body[data-page="sling-guide"] .sel-card ul { list-style:none; margin-bottom:14px; }
body[data-page="sling-guide"] .sel-card ul li {
  font-size:15.5px; color:#3d3d3d; line-height:1.7; padding-left:18px; position:relative; margin-bottom:7px;
}
body[data-page="sling-guide"] .sel-card ul li::before {
  content:''; position:absolute; left:0; top:11px; width:6px; height:1px; background:var(--grey-light);
}
body[data-page="sling-guide"] .sel-against {
  font-size:15px !important; color:#3d3d3d !important; line-height:1.7 !important;
  border-top:1px solid #e4e0d9; padding-top:12px; margin:0 !important;
}
body[data-page="sling-guide"] .sel-against span { font-weight:700; color:var(--black); }

/* ── inspection levels ── */
body[data-page="sling-guide"] .insp-levels {
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:2px; background:#ddd; margin:22px 0 8px;
}
body[data-page="sling-guide"] .insp-level { background:var(--white); padding:22px 20px; }
body[data-page="sling-guide"] .insp-when {
  font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--accent);
  margin-bottom:8px; font-weight:700;
}
body[data-page="sling-guide"] .insp-level h4 { margin-bottom:8px !important; }
body[data-page="sling-guide"] .insp-level p { font-size:15px !important; line-height:1.7 !important; margin:0 !important; }

/* ── employment: role cards + openings ── */
body[data-page="employment"] .role-grid {
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:2px; background:#ddd; margin:22px 0;
}
body[data-page="employment"] .role-card { background:var(--white); padding:26px 24px; }
body[data-page="employment"] .role-card h3 { margin:0 0 10px !important; font-size:17px; }
body[data-page="employment"] .role-card p { font-size:15.5px !important; line-height:1.75 !important; margin:0 !important; }

body[data-page="employment"] .openings-none {
  border:1px dashed #cfcac2; padding:28px 26px; margin-top:8px; background:#f7f5f1;
}
body[data-page="employment"] .openings-none p:last-child { margin-bottom:0 !important; }
body[data-page="employment"] .opening {
  border:1px solid #ddd; border-left:3px solid var(--accent); padding:26px 26px; margin-bottom:16px;
}
body[data-page="employment"] .opening-meta {
  font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--grey); margin-bottom:8px;
}
body[data-page="employment"] .opening h3 { margin:0 0 10px !important; font-size:19px; }
body[data-page="employment"] .opening ul { list-style:none; margin:12px 0 18px; }
body[data-page="employment"] .opening ul li {
  font-size:15.5px; color:#3d3d3d; line-height:1.75; padding-left:18px; position:relative; margin-bottom:6px;
}
body[data-page="employment"] .opening ul li::before {
  content:''; position:absolute; left:0; top:11px; width:6px; height:1px; background:var(--accent);
}
body[data-page="employment"] .opening-btn {
  display:inline-block; background:var(--black); color:var(--white) !important;
  font-size:11.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  padding:12px 26px; text-decoration:none !important;
}
body[data-page="employment"] .opening-btn:hover { background:var(--grey-dark); color:var(--white) !important; }

/* ── forms: cards + Q&A ── */
body[data-page="forms"] .form-grid {
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:2px; background:#ddd; margin:22px 0;
}
body[data-page="forms"] .form-card {
  background:var(--white); padding:26px 24px; display:flex; flex-direction:column;
}
body[data-page="forms"] .form-kind {
  font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--accent);
  margin-bottom:10px; font-weight:700;
}
body[data-page="forms"] .form-card h3 { margin:0 0 10px !important; font-size:17px; }
body[data-page="forms"] .form-card p { font-size:15.5px !important; line-height:1.75 !important; margin:0 0 20px !important; flex:1; }
body[data-page="forms"] .form-btn {
  display:inline-block; align-self:flex-start; border:1px solid var(--black);
  color:var(--black) !important; font-size:11.5px; font-weight:700; letter-spacing:.09em;
  text-transform:uppercase; padding:11px 22px; text-decoration:none !important;
}
body[data-page="forms"] .form-btn:hover { background:var(--black); color:var(--white) !important; }
body[data-page="forms"] .form-btn.dl { background:var(--black); color:var(--white) !important; }
body[data-page="forms"] .form-btn.dl:hover { background:var(--grey-dark); }

body[data-page="forms"] .qa { margin:20px 0 0; }
body[data-page="forms"] .qa dt {
  font-size:16.5px; font-weight:700; color:var(--black); margin-top:22px; padding-top:18px; border-top:1px solid #ddd;
}
body[data-page="forms"] .qa dt:first-child { margin-top:0; padding-top:0; border-top:none; }
body[data-page="forms"] .qa dd { font-size:16px; color:#3d3d3d; line-height:1.8; margin-top:8px; }

/* ── responsive ── */
@media (max-width: 960px) {
  body[data-page="sling-guide"] .page-hero,
  body[data-page="employment"] .page-hero,
  body[data-page="forms"] .page-hero { padding: 44px 24px 40px; }
  body[data-page="sling-guide"] .doc-toc { padding: 0 24px; }
  body[data-page="sling-guide"] .doc-section,
  body[data-page="employment"] .doc-section,
  body[data-page="forms"] .doc-section {
    /* minmax(0,1fr), not 1fr — a bare 1fr track refuses to shrink below its
       content, so the wide tables pushed the whole page sideways. */
    grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 44px 24px;
  }
  body[data-page="sling-guide"] .doc-num,
  body[data-page="employment"] .doc-num,
  body[data-page="forms"] .doc-num { font-size: 34px; }
  body[data-page="sling-guide"] .hitch-grid,
  body[data-page="sling-guide"] .sel-grid,
  body[data-page="sling-guide"] .insp-levels,
  body[data-page="employment"] .role-grid,
  body[data-page="forms"] .form-grid { grid-template-columns: 1fr; }
  body[data-page="sling-guide"] .doc-cta,
  body[data-page="employment"] .doc-cta,
  body[data-page="forms"] .doc-cta { padding: 26px 22px; }
  body[data-page="sling-guide"] .doc-cta-btn,
  body[data-page="employment"] .doc-cta-btn,
  body[data-page="forms"] .doc-cta-btn { width: 100%; text-align: center; }
}

/* nested list inside a doc-list item (the temperature limits breakdown) */
body[data-page="sling-guide"] .sub-list { list-style:none; margin:10px 0 4px 0; }
body[data-page="sling-guide"] .sub-list li {
  font-size:15.5px; color:#3d3d3d; line-height:1.75; padding-left:18px;
  position:relative; margin-bottom:6px;
}
body[data-page="sling-guide"] .sub-list li::before {
  content:''; position:absolute; left:0; top:11px; width:6px; height:1px; background:var(--grey-light);
}

/* ═══════════════════════════════════════════════════════════════════
   CATALOG PRODUCT PAGES — spec tables with per-SKU add-to-quote
   ═══════════════════════════════════════════════════════════════════ */
body[data-kind="product"] .prod-brand {
  font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent); font-weight:700; margin-bottom:10px;
}
body[data-kind="product"] .cat-prod-body { background:var(--white); display:block; }
body[data-kind="product"] .cat-prod-body .prod-block {
  padding:52px 52px; border-bottom:1px solid #ddd; max-width:100%;
}
body[data-kind="product"] .cat-prod-body .prod-block:last-of-type { border-bottom:none; }
body[data-kind="product"] .cat-prod-body .prod-block h2 {
  font-family:'PosterGothic',sans-serif; font-size:clamp(20px,2.4vw,28px); font-weight:900;
  text-transform:uppercase; color:var(--black); letter-spacing:-.01em; margin-bottom:10px;
}
body[data-kind="product"] .cat-prod-body .prod-block h3 { font-size:17px; font-weight:700; color:var(--black); margin:28px 0 10px; }
body[data-kind="product"] .cat-prod-body .prod-block p { font-size:16px; color:#3d3d3d; line-height:1.8; margin-bottom:14px; max-width:74ch; }
body[data-kind="product"] .cat-prod-body .prod-block-note { font-size:15px !important; color:var(--grey) !important; margin-bottom:20px !important; }
body[data-kind="product"] .cat-prod-body .spec-src {
  font-size:13.5px !important; color:var(--grey) !important; margin-top:16px !important;
  border-top:1px solid #ddd; padding-top:14px;
}
body[data-kind="product"] .cat-prod-body .prod-features { list-style:none; margin-bottom:8px; }
body[data-kind="product"] .cat-prod-body .prod-features li {
  font-size:16px; color:#3d3d3d; line-height:1.75; padding-left:20px; position:relative; margin-bottom:8px;
}
body[data-kind="product"] .cat-prod-body .prod-features li::before {
  content:''; position:absolute; left:0; top:12px; width:7px; height:1px; background:var(--accent);
}

/* the spec table scrolls sideways on its own rather than pushing the page */
body[data-kind="product"] .cat-prod-body .spec-scroll {
  overflow-x:auto; border:1px solid #ddd; background:#fff;
  -webkit-overflow-scrolling:touch;
}
body[data-kind="product"] .cat-prod-body .spec-table { border-collapse:collapse; width:100%; font-size:13.5px; }
body[data-kind="product"] .cat-prod-body .spec-table thead th {
  background:var(--black); color:var(--white); font-size:10.5px; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase; padding:9px 10px;
  text-align:center; white-space:nowrap; border-left:1px solid #2e2e2e; position:sticky; top:0;
}
/* the first column is just another cell — no grey plate, no sticky rail */
body[data-kind="product"] .cat-prod-body .spec-table tbody th {
  font-weight:600; color:var(--black); padding:9px 10px;
  border-bottom:1px solid #eee; white-space:nowrap; background:transparent;
}
body[data-kind="product"] .cat-prod-body .spec-table td { padding:9px 10px; border-bottom:1px solid #eee; color:#3d3d3d; white-space:nowrap; }
body[data-kind="product"] .cat-prod-body .spec-table tbody tr:nth-child(even) td,
body[data-kind="product"] .cat-prod-body .spec-table tbody tr:nth-child(even) th { background:#faf9f6; }
body[data-kind="product"] .cat-prod-body .spec-table tbody tr:hover td,
body[data-kind="product"] .cat-prod-body .spec-table tbody tr:hover th { background:#f2efe9; }
body[data-kind="product"] .cat-prod-body .spec-table .num { text-align:center; font-variant-numeric:tabular-nums; }
body[data-kind="product"] .cat-prod-body .spec-table .sku {
  text-align:center; font-variant-numeric:tabular-nums; color:var(--black); font-weight:600;
}
/* The Add column pins itself to the right edge of the scroller, so a wide
   capacity table can scroll sideways without the quote buttons disappearing.
   Each cell carries its own background, otherwise the row stripes show through. */
body[data-kind="product"] .cat-prod-body .spec-table .add-cell {
  text-align:right; white-space:nowrap; padding:6px 10px;
  position:sticky; right:0; background:#fff;
  box-shadow:-8px 0 8px -8px rgba(0,0,0,0.25);
}
body[data-kind="product"] .cat-prod-body .spec-table tbody tr:nth-child(even) td.add-cell { background:#faf9f6; }
body[data-kind="product"] .cat-prod-body .spec-table tbody tr:hover td.add-cell { background:#f2efe9; }
body[data-kind="product"] .cat-prod-body .spec-table thead th.add-head {
  position:sticky; right:0; z-index:3; background:var(--black); text-align:right;
}

/* add-to-quote button, one per stock number */
.add-q {
  font-family:'WorkSans',sans-serif; font-size:10.5px; font-weight:700;
  letter-spacing:.07em; text-transform:uppercase;
  background:#fff; color:var(--black); border:1px solid var(--black);
  padding:6px 12px; margin-left:6px; cursor:pointer; border-radius:var(--pill);
  transition:background .12s, color .12s;
}
.add-q:hover { background:var(--black); color:#fff; }
.add-q.is-added { background:var(--accent); border-color:var(--accent); color:#fff; }

body[data-kind="product"] .cat-prod-body .cat-page-link { display:block; max-width:760px; margin-bottom:14px; }
body[data-kind="product"] .cat-prod-body .cat-page-link img {
  width:100%; height:auto; display:block; border:1px solid #ddd; background:#fff;
}
body[data-kind="product"] .cat-prod-body .prod-cta {
  background:var(--black); padding:32px 52px; display:flex; align-items:center;
  justify-content:space-between; gap:28px; flex-wrap:wrap;
}
body[data-kind="product"] .cat-prod-body .prod-cta h3 {
  font-family:'PosterGothic',sans-serif; font-size:22px; font-weight:900; text-transform:uppercase;
  color:var(--white); letter-spacing:-.01em; margin:0 0 6px;
}
body[data-kind="product"] .cat-prod-body .prod-cta p { color:var(--grey); margin:0; font-size:15.5px; max-width:52ch; }
body[data-kind="product"] .cat-prod-body .prod-cta-btn {
  background:var(--white); color:var(--black); font-size:14.5px; font-weight:700;
  letter-spacing:.08em; padding:14px 30px; text-decoration:none; white-space:nowrap; flex-shrink:0;
}
body[data-kind="product"] .cat-prod-body .prod-cta-btn:hover { background:var(--grey-light); }

@media (max-width:960px) {
  body[data-kind="product"] .cat-prod-body .prod-block { padding:36px 24px; }
  body[data-kind="product"] .cat-prod-body .prod-cta { padding:26px 24px; }
  body[data-kind="product"] .cat-prod-body .prod-cta-btn { width:100%; text-align:center; }
}

/* ── quote basket ────────────────────────────────────────────────── */
.qb-fab {
  position:fixed; right:20px; bottom:20px; z-index:900;
  font-family:'WorkSans',sans-serif; font-size:13px; font-weight:700;
  letter-spacing:.07em; text-transform:uppercase;
  background:var(--accent); color:#fff; border:none; border-radius:var(--pill);
  padding:14px 22px; cursor:pointer; box-shadow:0 8px 28px rgba(0,0,0,.4);
  display:flex; align-items:center; gap:9px;
}
.qb-fab[hidden] { display:none; }
.qb-fab:hover { filter:brightness(1.08); }
.qb-fab-n {
  background:#fff; color:var(--accent); border-radius:var(--pill);
  min-width:22px; height:22px; display:inline-flex; align-items:center; justify-content:center;
  font-size:13px; padding:0 6px;
}
.qb-panel {
  position:fixed; right:20px; bottom:76px; z-index:901; width:min(400px, calc(100vw - 40px));
  max-height:min(560px, calc(100vh - 120px)); overflow:auto;
  background:#fff; border:1px solid #ddd; box-shadow:0 20px 60px rgba(0,0,0,.45);
}
.qb-panel[hidden] { display:none; }
.qb-head {
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 18px; border-bottom:1px solid #ddd; background:var(--black);
  position:sticky; top:0;
}
.qb-head h2 {
  font-family:'PosterGothic',sans-serif; font-size:16.5px; font-weight:900;
  text-transform:uppercase; color:var(--white); letter-spacing:.04em; margin:0;
}
.qb-close { background:none; border:none; color:var(--grey); font-size:22px; line-height:1; cursor:pointer; padding:0 4px; }
.qb-close:hover { color:var(--white); }
.qb-list { list-style:none; margin:0; padding:0; }
.qb-row { display:flex; align-items:flex-start; gap:10px; padding:14px 18px; border-bottom:1px solid #eee; }
.qb-row-main { flex:1; min-width:0; }
.qb-row-name { font-size:15px; font-weight:700; color:var(--black); line-height:1.4; }
.qb-row-sku { font-size:11.5px; color:var(--grey); margin-top:3px; font-variant-numeric:tabular-nums; }
.qb-row-spec { font-size:13px; color:#3d3d3d; margin-top:3px; }
.qb-qty { display:flex; align-items:center; gap:2px; flex-shrink:0; }
.qb-qty button {
  width:24px; height:24px; border:1px solid #ccc; background:#fff; cursor:pointer;
  font-size:15.5px; line-height:1; color:var(--black); border-radius:3px;
}
.qb-qty button:hover { background:#f0ede8; }
.qb-qty span { min-width:24px; text-align:center; font-size:14.5px; font-variant-numeric:tabular-nums; }
.qb-x { background:none; border:none; color:#bbb; font-size:17px; cursor:pointer; padding:0 2px; line-height:1; }
.qb-x:hover { color:var(--black); }
.qb-foot { padding:16px 18px; }
.qb-send {
  display:block; text-align:center; background:var(--black); color:#fff !important;
  font-size:12px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  padding:14px; text-decoration:none !important; border-radius:var(--pill);
}
.qb-send:hover { background:var(--grey-dark); }
.qb-clear {
  display:block; width:100%; margin-top:10px; background:none; border:none;
  color:var(--grey); font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; cursor:pointer; padding:8px;
}
.qb-clear:hover { color:var(--black); }
.qb-note { font-size:11.5px; color:var(--grey); line-height:1.6; margin-top:12px; }
.qb-empty { padding:28px 18px; font-size:15px; color:var(--grey); line-height:1.7; }
@media (max-width:560px) {
  .qb-fab { right:12px; bottom:12px; padding:12px 18px; font-size:11px; }
  .qb-panel { right:12px; left:12px; width:auto; bottom:64px; }
}

/* ── products.html index, rebuilt around the 2026 catalog ─────────────── */
body[data-page="products"] .prod-jump {
  position:sticky; top:var(--nav-h); z-index:40; background:#111;
  border-bottom:1px solid var(--grey-mid); display:flex; gap:2px;
  padding:0 52px; overflow-x:auto;
}
/* twelve sections no longer fit on one line, and a section hidden off the right
   edge may as well not exist: wrap on anything wide enough to show two rows */
@media (min-width: 861px) {
  body[data-page="products"] .prod-jump { flex-wrap:wrap; overflow-x:visible; padding-top:2px; }
  body[data-page="products"] .prod-jump a { padding:11px 16px; }
}
body[data-page="products"] .prod-jump a {
  font-size:13px; letter-spacing:.05em; color:#6a6a6a; text-decoration:none;
  padding:14px 18px; white-space:nowrap; border-bottom:2px solid transparent;
}
body[data-page="products"] .prod-jump a:hover { color:var(--white); border-bottom-color:var(--accent); }

body[data-page="products"] .prod-index { background:var(--white); }
body[data-page="products"] .prod-cat { border-bottom:1px solid #ddd; }
body[data-page="products"] .prod-cat:last-child { border-bottom:none; }
body[data-page="products"] .prod-cat-head {
  display:grid; grid-template-columns:220px minmax(0,1fr); gap:0; align-items:stretch; background:var(--black);
}
body[data-page="products"] .prod-cat-img { background-size:cover; background-position:center; min-height:150px; }
body[data-page="products"] .prod-cat-title { padding:30px 44px; display:flex; flex-direction:column; justify-content:center; }
body[data-page="products"] .prod-cat-title h2 {
  font-family:'PosterGothic',sans-serif; font-size:clamp(22px,2.8vw,32px); font-weight:900;
  text-transform:uppercase; color:var(--white); letter-spacing:-.01em; margin-bottom:8px;
}
body[data-page="products"] .prod-cat-title p { font-size:15.5px; color:var(--grey); line-height:1.7; max-width:60ch; }
body[data-page="products"] .prod-cat-count {
  font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); margin-top:10px; font-weight:700;
}
/* The sub-categories tile across the page rather than each taking a full row of
   its own. A group carries --n, the number of pages in it, and asks for that
   much width; a one-page group is one card wide and the next group sits beside
   it. Flex rather than grid, because whatever width is left at the end of a row
   gets handed back to the groups on it, so there is no dead paper on the right
   -- the cards there just run a little larger. */
body[data-page="products"] .pl-stack {
  padding:34px 52px 46px;
  display:flex; flex-wrap:wrap; align-items:flex-start; gap:30px 22px;
}
body[data-page="products"] .pl-group {
  flex:var(--n,1) 1 calc(var(--n,1) * 150px);
  min-width:140px; max-width:calc(var(--n,1) * 240px);
}

/* One card per product page: the picture does the work a list of part
   numbers cannot, which is telling you at a glance what the thing is. */
body[data-page="products"] .pc-grid {
  display:grid; grid-template-columns:repeat(var(--n,1),minmax(0,1fr)); gap:14px;
}
body[data-page="products"] .pc {
  display:flex; flex-direction:column; text-decoration:none; background:var(--white);
  border:1px solid #e2ded6; transition:border-color .14s, box-shadow .14s;
}
body[data-page="products"] .pc:hover {
  border-color:var(--black); box-shadow:0 2px 14px rgba(0,0,0,.08);
}
body[data-page="products"] .pc-img {
  display:block; aspect-ratio:4/3; background:#fff; border-bottom:1px solid #eee;
  padding:9px; overflow:hidden;
}
body[data-page="products"] .pc-img img {
  width:100%; height:100%; object-fit:contain; display:block;
}
body[data-page="products"] .pc-img-none { background:repeating-linear-gradient(135deg,#f5f3ef,#f5f3ef 8px,#efece6 8px,#efece6 16px); }
body[data-page="products"] .pc-t {
  display:block; padding:10px 11px 0; font-size:13.5px; line-height:1.3;
  color:var(--black); font-weight:600;
}
body[data-page="products"] .pc:hover .pc-t { color:var(--accent); }
body[data-page="products"] .pc-n {
  display:block; padding:4px 11px 11px; margin-top:auto;
  font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--grey);
  font-variant-numeric:tabular-nums;
}
@media (max-width:860px) {
  body[data-page="products"] .pl-stack { padding:26px 24px 32px; gap:24px 14px; }
  /* a phone packs the groups too, two small cards to a row, rather than giving
     each sub-category a row of its own with half of it empty */
  body[data-page="products"] .pl-group { flex:var(--n,1) 1 calc(var(--n,1) * 130px); min-width:128px; }
  body[data-page="products"] .pc-grid { grid-template-columns:repeat(auto-fill,minmax(128px,1fr)); gap:12px; }
  body[data-page="products"] .pc-t { font-size:13px; padding:9px 10px 0; }
}
body[data-page="products"] .pl-group h3 {
  font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--grey);
  margin-bottom:12px; padding-bottom:8px; border-bottom:1px solid #ddd;
  /* two lines' worth whether or not the name needs them, so the cards in
     neighbouring groups start on the same line */
  min-height:2.6em; display:flex; align-items:flex-end;
}
@media (max-width:860px) { body[data-page="products"] .pl-group h3 { min-height:0; display:block; } }
/* on a narrow window there are too few groups per row for the cap to help, so
   let them take the whole width rather than stranding it */
@media (max-width:1100px) { body[data-page="products"] .pl-group { max-width:none; } }
body[data-page="products"] .pl-group ul { list-style:none; }
body[data-page="products"] .pl-group li { margin-bottom:9px; }
body[data-page="products"] .pl-group li a {
  font-size:15.5px; color:var(--black); text-decoration:none; line-height:1.45;
  display:flex; align-items:baseline; justify-content:space-between; gap:10px;
}
body[data-page="products"] .pl-group li a:hover { color:var(--accent); }
body[data-page="products"] .pl-n {
  font-size:10.5px; color:var(--grey); border:1px solid #ddd; border-radius:var(--pill);
  padding:1px 8px; flex-shrink:0; font-variant-numeric:tabular-nums;
}

/* previous / next product, foot of each catalog page */
body[data-kind="product"] .cat-prod-body .prod-sibs {
  display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap;
  padding:26px 52px; border-top:1px solid #ddd; background:#f7f5f1;
}
body[data-kind="product"] .cat-prod-body .prod-sibs a {
  font-size:14.5px; color:var(--black); text-decoration:none; font-weight:600; max-width:44%;
}
body[data-kind="product"] .cat-prod-body .prod-sibs a:hover { color:var(--accent); }

@media (max-width:860px) {
  body[data-page="products"] .prod-jump { padding:0 24px; }
  body[data-page="products"] .prod-cat-head { grid-template-columns:1fr; }
  body[data-page="products"] .prod-cat-img { min-height:120px; }
  body[data-page="products"] .prod-cat-title { padding:24px; }
  body[data-kind="product"] .cat-prod-body .prod-sibs { padding:22px 24px; }
  body[data-kind="product"] .cat-prod-body .prod-sibs a { max-width:100%; }
}

/* ═══ catalog product page — laid out like the printed page ═══ */
body[data-kind="product"] .cat-prod-body .pp-top {
  display:grid; grid-template-columns:minmax(0,340px) minmax(0,1fr);
  gap:44px; align-items:start; padding:44px 52px; border-bottom:1px solid #ddd;
}
body[data-kind="product"] .cat-prod-body .pp-hero-img {
  background:#fff; border:1px solid #e4e0d9; padding:18px;
  display:flex; align-items:center; justify-content:center; min-height:180px;
}
body[data-kind="product"] .cat-prod-body .pp-hero-img img {
  width:100%; height:auto; max-height:360px; object-fit:contain; display:block;
}
body[data-kind="product"] .cat-prod-body .pp-features h2 {
  font-family:'PosterGothic',sans-serif; font-size:clamp(18px,2.2vw,24px); font-weight:900;
  text-transform:uppercase; color:var(--black); letter-spacing:-.01em; margin-bottom:16px;
}
body[data-kind="product"] .cat-prod-body .pp-features ul { list-style:none; }
body[data-kind="product"] .cat-prod-body .pp-features li {
  font-size:16px; color:#3d3d3d; line-height:1.7; padding-left:20px;
  position:relative; margin-bottom:9px;
}
body[data-kind="product"] .cat-prod-body .pp-features li::before {
  content:''; position:absolute; left:0; top:11px; width:7px; height:1px; background:var(--accent);
}

body[data-kind="product"] .cat-prod-body .pp-spec {
  display:grid; grid-template-columns:minmax(0,230px) minmax(0,1fr);
  gap:40px; align-items:start; padding:44px 52px;
}
body[data-kind="product"] .cat-prod-body .pp-spec:only-child,
body[data-kind="product"] .cat-prod-body .pp-spec.no-figs { grid-template-columns:minmax(0,1fr); }
body[data-kind="product"] .cat-prod-body .pp-figs { position:sticky; top:calc(var(--nav-h) + 16px); }
body[data-kind="product"] .cat-prod-body .pp-figs img {
  width:100%; height:auto; display:block; background:#fff;
  border:1px solid #e4e0d9; padding:12px; margin-bottom:12px;
}
body[data-kind="product"] .cat-prod-body .pp-spec-main { min-width:0; }
body[data-kind="product"] .cat-prod-body .pp-spec-main h2 {
  font-family:'PosterGothic',sans-serif; font-size:clamp(20px,2.4vw,28px); font-weight:900;
  text-transform:uppercase; color:var(--black); letter-spacing:-.01em; margin-bottom:6px;
}
body[data-kind="product"] .cat-prod-body .pp-hint {
  font-size:14.5px; color:var(--grey); margin-bottom:18px;
}
body[data-kind="product"] .cat-prod-body .pp-spec-main .spec-scroll { margin-bottom:22px; }
body[data-kind="product"] .cat-prod-body .pp-tablecrop { margin:0 0 22px; }
body[data-kind="product"] .cat-prod-body .pp-tablecrop img {
  width:100%; height:auto; display:block; border:1px solid #ddd; background:#fff;
}

@media (max-width:900px) {
  body[data-kind="product"] .cat-prod-body .pp-top,
  body[data-kind="product"] .cat-prod-body .pp-spec {
    grid-template-columns:minmax(0,1fr); gap:26px; padding:30px 24px;
  }
  /* side-by-side on small screens: a grid so the figures actually share the row
     (flex + width:100% each made the second one overhang the page) */
  body[data-kind="product"] .cat-prod-body .pp-figs {
    position:static; display:grid; grid-template-columns:repeat(auto-fit,minmax(0,1fr)); gap:12px;
  }
  body[data-kind="product"] .cat-prod-body .pp-figs img { margin-bottom:0; max-width:100%; }
  body[data-kind="product"] .cat-prod-body .pp-hero-img { max-width:320px; }
}
body[data-kind="product"] .cat-prod-body .pp-top.no-feat {
  grid-template-columns:minmax(0,340px); padding-bottom:36px;
}

/* ── service detail pages: reuse the doc layout ────────────────────── */
body[data-kind="service"] .nav-search svg {
  position:absolute; right:12px; top:50%; transform:translateY(-50%);
  pointer-events:none; opacity:.4; width:14px; height:14px; flex-shrink:0;
}
body[data-kind="service"] .page-hero { background:var(--black); padding:56px 52px 52px; border-bottom:1px solid var(--grey-mid); }
body[data-kind="service"] .doc-eyebrow { font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); margin-bottom:14px; }
body[data-kind="service"] .page-hero h1 {
  font-family:'PosterGothic',sans-serif; font-size:clamp(32px,5vw,54px); font-weight:900;
  text-transform:uppercase; color:var(--white); letter-spacing:-.02em; line-height:1.05; margin-bottom:16px;
}
body[data-kind="service"] .page-hero p { font-size:17px; color:var(--grey); line-height:1.8; max-width:62ch; }
body[data-kind="service"] .doc-toc {
  position:sticky; top:var(--nav-h); z-index:40; background:#111;
  border-bottom:1px solid var(--grey-mid); display:flex; gap:4px; padding:0 52px; overflow-x:auto;
}
body[data-kind="service"] .doc-toc a {
  font-size:13px; letter-spacing:.05em; color:#6a6a6a; text-decoration:none;
  padding:14px 18px; white-space:nowrap; border-bottom:2px solid transparent;
}
body[data-kind="service"] .doc-toc a:hover { color:var(--white); border-bottom-color:var(--accent); }
body[data-kind="service"] .doc-body { background:var(--white); }
body[data-kind="service"] .doc-section {
  display:grid; grid-template-columns:96px minmax(0,1fr); gap:0 32px;
  padding:64px 52px; border-bottom:1px solid #ddd; align-items:start;
}
body[data-kind="service"] .doc-section:last-child { border-bottom:none; }
body[data-kind="service"] .doc-num {
  font-family:'PosterGothic',sans-serif; font-size:52px; font-weight:900;
  color:#dedad3; line-height:.9; letter-spacing:-.03em;
}
body[data-kind="service"] .doc-content { max-width:74ch; min-width:0; }
body[data-kind="service"] .doc-content h2 {
  font-family:'PosterGothic',sans-serif; font-size:clamp(24px,3vw,34px); font-weight:900;
  text-transform:uppercase; color:var(--black); letter-spacing:-.01em; line-height:1.1; margin-bottom:16px;
}
body[data-kind="service"] .doc-content h3 { font-size:17px; font-weight:700; color:var(--black); margin:32px 0 12px; }
body[data-kind="service"] .doc-content h4 { font-size:16.5px; font-weight:700; color:var(--black); margin-bottom:8px; }
body[data-kind="service"] .doc-content p { font-size:16.5px; color:#3d3d3d; line-height:1.85; margin-bottom:16px; }
body[data-kind="service"] .doc-lead { font-size:17.5px !important; color:#2a2a2a !important; margin-bottom:22px !important; }
body[data-kind="service"] .doc-content a { color:var(--black); text-decoration:underline; text-underline-offset:3px; }
body[data-kind="service"] .doc-content a:hover { color:var(--accent); }
body[data-kind="service"] .doc-list { list-style:none; margin-bottom:20px; }
body[data-kind="service"] .doc-list li {
  font-size:16.5px; color:#3d3d3d; line-height:1.8; padding-left:20px; position:relative; margin-bottom:10px;
}
body[data-kind="service"] .doc-list li::before {
  content:''; position:absolute; left:0; top:12px; width:7px; height:1px; background:var(--accent);
}
body[data-kind="service"] .doc-note { font-size:15.5px !important; color:var(--grey) !important; }
body[data-kind="service"] .doc-source {
  font-size:13.5px !important; color:var(--grey) !important; line-height:1.7 !important;
  border-top:1px solid #ddd; padding-top:18px; margin-top:32px !important;
}
body[data-kind="service"] .doc-callout {
  background:#f2efe9; border-left:3px solid var(--accent);
  padding:20px 24px; margin:26px 0; font-size:16.5px; color:#2a2a2a; line-height:1.8;
}
body[data-kind="service"] .doc-callout.warn { border-left-color:var(--black); background:#ece8e1; }
body[data-kind="service"] .insp-levels {
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:2px; background:#ddd; margin:22px 0 8px;
}
body[data-kind="service"] .insp-level { background:var(--white); padding:22px 20px; }
body[data-kind="service"] .insp-when {
  font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--accent);
  margin-bottom:8px; font-weight:700;
}
body[data-kind="service"] .insp-level p { font-size:15px !important; line-height:1.7 !important; margin:0 !important; }
body[data-kind="service"] .doc-cta {
  background:var(--black); padding:32px 34px; margin-top:36px;
  display:flex; align-items:center; justify-content:space-between; gap:28px; flex-wrap:wrap;
}
body[data-kind="service"] .doc-cta h3 {
  font-family:'PosterGothic',sans-serif; font-size:22px; font-weight:900; text-transform:uppercase;
  color:var(--white) !important; letter-spacing:-.01em; margin:0 0 8px !important;
}
body[data-kind="service"] .doc-cta p { color:var(--grey) !important; margin:0 !important; font-size:15.5px !important; }
body[data-kind="service"] .doc-cta-btn {
  background:var(--white); color:var(--black) !important; font-size:13px; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; padding:14px 32px;
  text-decoration:none !important; white-space:nowrap; flex-shrink:0;
}
body[data-kind="service"] .doc-cta-btn:hover { background:var(--grey-light); color:var(--black) !important; }

/* the "needs your input" block — deliberately loud so it can't be published by accident */
.needs-input {
  border:2px dashed var(--accent); background:#fdf6ef; padding:22px 24px; margin:26px 0;
}
.needs-input h4 {
  font-size:12px !important; letter-spacing:.1em; text-transform:uppercase;
  color:var(--accent) !important; margin-bottom:14px !important;
}
.needs-input ul { list-style:none; }
.needs-input li { font-size:16px; color:#3d3d3d; line-height:1.7; margin-bottom:9px; padding-left:18px; position:relative; }
.needs-input li::before { content:'?'; position:absolute; left:0; color:var(--accent); font-weight:700; }

@media (max-width:960px) {
  body[data-kind="service"] .page-hero { padding:44px 24px 40px; }
  body[data-kind="service"] .doc-toc { padding:0 24px; }
  body[data-kind="service"] .doc-section { grid-template-columns:minmax(0,1fr); gap:12px; padding:44px 24px; }
  body[data-kind="service"] .doc-num { font-size:34px; }
  body[data-kind="service"] .insp-levels { grid-template-columns:1fr; }
  body[data-kind="service"] .doc-cta { padding:26px 22px; }
  body[data-kind="service"] .doc-cta-btn { width:100%; text-align:center; }
}
/* the portrait shot of a session in progress, floated beside the copy about who
   runs them rather than stretched across the column */
body[data-page="svc-training"] .who-photo {
  float:right; width:min(300px,40%); margin:4px 0 22px 30px;
  background:#fff; border:1px solid #e2ded6; padding:12px;
}
body[data-page="svc-training"] .who-photo img { width:100%; height:auto; display:block; }
body[data-page="svc-training"] .who-photo figcaption {
  font-size:12.5px; color:var(--grey); line-height:1.55; margin-top:10px;
}
@media (max-width:860px) {
  body[data-page="svc-training"] .who-photo { float:none; width:100%; margin:0 0 22px; }
}

body[data-page="services"] .svc-more { margin-top:14px; }
body[data-page="services"] .svc-more a {
  font-size:14.5px; font-weight:700; color:var(--accent); text-decoration:none;
  border-bottom:1px solid currentColor; padding-bottom:1px;
}
body[data-page="services"] h2 a { color:inherit; text-decoration:none; }
body[data-page="services"] h2 a:hover { color:var(--accent); }
body[data-kind="service"] .rate-grid {
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:2px; background:#ddd; margin:24px 0 8px;
}
body[data-kind="service"] .rate-cell { background:var(--white); padding:22px 18px; text-align:center; }
body[data-kind="service"] .rate-n {
  font-family:'PosterGothic',sans-serif; font-size:clamp(22px,2.6vw,30px); font-weight:900;
  color:var(--accent); line-height:1; letter-spacing:-.01em; margin-bottom:8px;
}
body[data-kind="service"] .rate-l {
  font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--grey); line-height:1.5;
}
@media (max-width:860px) {
  body[data-kind="service"] .rate-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

/* ── photography on the service pages ─────────────────────────────── */
body[data-kind="service"] .page-hero.has-photo { position:relative; overflow:hidden; padding:0; }
body[data-page="svc-inspection"] .hero-photo {
  position:absolute; inset:0;
  background:url('svc/insp-powerplant.webp') center 42%/cover no-repeat;
}
body[data-page="svc-training"] .hero-photo {
  position:absolute; inset:0;
  /* pulled up so the instructor at the right stays whole under the nav, and the
     slide reads through the scrim rather than sitting behind the headline */
  background:url('svc/train-crowd.webp') center 42%/cover no-repeat;
}
/* a full room rather than one figure, so the scrim lifts across the width */
body[data-page="svc-training"] .hero-photo::after {
  background:linear-gradient(100deg, rgba(24,24,24,.93) 0%, rgba(24,24,24,.82) 40%,
                                     rgba(24,24,24,.48) 75%, rgba(24,24,24,.30) 100%);
}
body[data-page="svc-socket"] .hero-photo {
  position:absolute; inset:0;
  background:url('svc/socket-dock.webp') center 54%/cover no-repeat;
}
body[data-page="svc-loadtest"] .hero-photo {
  position:absolute; inset:0;
  background:url('svc/test-bed.webp') center 58%/cover no-repeat;
}
body[data-kind="service"] .hero-photo::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(100deg, rgba(24,24,24,.94) 0%, rgba(24,24,24,.88) 42%, rgba(24,24,24,.55) 100%);
}
body[data-kind="service"] .hero-inner {
  position:relative; z-index:1; padding:64px 52px 60px; max-width:760px;
}
body[data-kind="service"] .svc-fig,
body[data-page="employment"] .svc-fig { margin:26px 0; }
body[data-kind="service"] .svc-fig img,
body[data-page="employment"] .svc-fig img {
  width:100%; height:auto; display:block; border:1px solid #ddd;
}
body[data-kind="service"] .svc-fig figcaption,
body[data-page="employment"] .svc-fig figcaption,
body[data-kind="service"] .svc-pair figcaption {
  font-size:13.5px; color:var(--grey); line-height:1.6; margin-top:10px; max-width:60ch;
}
body[data-kind="service"] .svc-pair {
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; margin:26px 0;
}
body[data-kind="service"] .svc-pair img {
  width:100%; height:340px; object-fit:cover; display:block; border:1px solid #ddd;
}
/* ── SOCKET POURING: THE NRS CHECKLIST ─────────────────────
   The maritime pours run under a separate entity, and the sheet they fill out
   is the most convincing thing on the page: it is the process, itemised. */
body[data-page="svc-socket"] .nrs-note {
  display:flex; align-items:center; gap:28px; flex-wrap:wrap;
  background:var(--white); border:1px solid #e0ddd6; border-left:3px solid var(--black);
  padding:24px 28px; margin:26px 0 34px;
}
body[data-page="svc-socket"] .nrs-note img {
  width:190px; height:auto; display:block; flex:none;
}
body[data-page="svc-socket"] .nrs-note p {
  font-size:15px; line-height:1.75; color:#3d3d3d; margin:0; min-width:260px; flex:1;
}
body[data-page="svc-socket"] .chk-grid {
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:2px;
  background:#e0ddd6; border:1px solid #e0ddd6; margin:22px 0 26px;
}
body[data-page="svc-socket"] .chk-stage { background:var(--white); padding:26px 26px 24px; }
body[data-page="svc-socket"] .chk-n {
  font-family:'PosterGothic',sans-serif; font-size:13px; font-weight:900;
  letter-spacing:.1em; color:var(--accent); margin-bottom:8px;
}
body[data-page="svc-socket"] .chk-stage h4 {
  font-family:'PosterGothic',sans-serif; font-size:19px; font-weight:900;
  text-transform:uppercase; letter-spacing:.01em; color:var(--black);
  margin:0 0 8px; line-height:1.15;
}
body[data-page="svc-socket"] .chk-stage > p {
  font-size:14px; line-height:1.7; color:var(--grey); margin:0 0 14px;
}
body[data-page="svc-socket"] .chk-stage ul {
  list-style:none; margin:0; padding:0; border-top:1px solid #eae7e0;
}
body[data-page="svc-socket"] .chk-stage li {
  font-size:14.5px; line-height:1.6; color:#3d3d3d;
  padding:9px 0 9px 22px; border-bottom:1px solid #eae7e0; position:relative;
}
body[data-page="svc-socket"] .chk-stage li:last-child { border-bottom:none; }
body[data-page="svc-socket"] .chk-stage li::before {
  content:'\2713'; position:absolute; left:0; top:9px;
  font-size:12px; color:var(--accent);
}
/* The sheet shown rather than described: three pages side by side, printed size
   in miniature, so it reads as a real document and not a claim about one. */
body[data-page="svc-socket"] .chk-sheets { margin:30px 0 0; }
body[data-page="svc-socket"] .chk-sheet-row {
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px;
  background:#eeebe4; padding:22px; border:1px solid #e0ddd6;
}
body[data-page="svc-socket"] .chk-sheet-row img {
  width:100%; height:auto; display:block; background:var(--white);
  border:1px solid #d6d2c9; box-shadow:0 1px 4px rgba(0,0,0,.10);
}
body[data-page="svc-socket"] .chk-sheets figcaption {
  font-size:13.5px; color:var(--grey); line-height:1.6; margin-top:10px; max-width:60ch;
}
@media (max-width:720px) {
  body[data-page="svc-socket"] .chk-sheet-row { gap:12px; padding:14px; }
  body[data-page="svc-socket"] .chk-grid { grid-template-columns:1fr; }
  body[data-page="svc-socket"] .nrs-note { gap:18px; padding:20px; }
  body[data-page="svc-socket"] .nrs-note img { width:150px; }
}

/* A standing photograph, capped so a portrait frame does not run the height of
   the screen the way a landscape one at the same width does. */
body[data-kind="service"] .svc-fig.portrait img { max-width:420px; }
/* A landscape and a portrait of the same machine, held to one height so the
   pair reads as one band instead of two mismatched pictures. */
body[data-kind="service"] .svc-duo { margin:0; }
body[data-kind="service"] .svc-duo-row {
  display:grid; grid-template-columns:minmax(0,1.9fr) minmax(0,1fr); gap:20px; align-items:start;
}
body[data-kind="service"] .svc-duo img {
  width:100%; height:clamp(320px,34vw,520px); object-fit:cover; display:block;
}
body[data-kind="service"] .svc-duo figcaption {
  font-size:13.5px; color:var(--grey); line-height:1.6; margin-top:10px; max-width:60ch;
}
@media (max-width:860px) {
  body[data-kind="service"] .svc-duo-row { grid-template-columns:1fr; gap:24px; }
  body[data-kind="service"] .svc-duo img { height:clamp(240px,52vw,360px); }
}

/* The sample certificate: shown at a size where the plot and the numbers on it
   are legible, since being able to read it is the entire point. */
body[data-page="svc-loadtest"] .cert-sample { margin:28px 0; }
body[data-page="svc-loadtest"] .cert-sample img {
  width:100%; max-width:620px; height:auto; display:block;
  border:1px solid #d6d2c9; box-shadow:0 2px 10px rgba(0,0,0,.10); background:#fff;
}
body[data-page="svc-loadtest"] .cert-sample figcaption {
  font-size:13.5px; color:var(--grey); line-height:1.65; margin-top:12px; max-width:62ch;
}

body[data-kind="service"] .svc-wide { padding-top:44px; padding-bottom:44px; }
body[data-kind="service"] .svc-wide .doc-content { max-width:none; }
body[data-kind="service"] .svc-fig.wide img,
body[data-page="employment"] .svc-fig.wide img { border:none; }

@media (max-width:960px) {
  body[data-kind="service"] .hero-inner { padding:44px 24px 40px; }
  body[data-kind="service"] .hero-photo::after {
    background:linear-gradient(180deg, rgba(24,24,24,.93) 0%, rgba(24,24,24,.86) 60%, rgba(24,24,24,.9) 100%);
  }
  body[data-kind="service"] .svc-pair { grid-template-columns:1fr; gap:16px; }
  body[data-kind="service"] .svc-pair img { height:260px; }
}

/* ── PRODUCTS HERO PHOTO ───────────────────────────────── */
/* The 2019 shop still life: the reel, a hook, a shackle, a turnbuckle, a hoist,
   a wire rope sling and a web sling in one frame. The shelving above it is dark
   enough to carry the headline without a heavy scrim. */
body[data-page="products"] .page-hero.has-photo { position:relative; overflow:hidden; padding:0; }
body[data-page="products"] .page-hero.has-photo { min-height:360px; display:flex; align-items:center; }
body[data-page="products"] .hero-photo {
  position:absolute; inset:0;
  background:url('img/products-hero.webp') center 46%/cover no-repeat;
}
/* left-weighted so the headline holds, but the hoist and shackle on the right stay visible */
body[data-page="products"] .hero-photo::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(100deg, rgba(20,20,20,.92) 0%, rgba(20,20,20,.72) 38%, rgba(20,20,20,.18) 72%, rgba(20,20,20,.05) 100%);
}
body[data-page="products"] .page-hero.has-photo .hero-inner {
  position:relative; z-index:1; padding:56px 52px; max-width:620px;
}
@media (max-width: 860px) {
  body[data-page="products"] .page-hero.has-photo .hero-inner { padding:44px 24px 40px; }
  /* narrow screens put the copy right across the photo, so the scrim goes flat */
  body[data-page="products"] .hero-photo::after {
    background:linear-gradient(180deg, rgba(20,20,20,.86) 0%, rgba(20,20,20,.80) 60%, rgba(20,20,20,.74) 100%);
  }
}

body[data-page="home"] .prod-grid-more { padding:0 52px 56px; margin-top:-8px; }
body[data-page="home"] .prod-grid-more a {
  font-size:12px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--grey-light); text-decoration:none;
  border-bottom:1px solid #3a3a3a; padding-bottom:3px;
}
body[data-page="home"] .prod-grid-more a:hover { color:var(--white); border-bottom-color:var(--accent); }
@media (max-width:860px) { body[data-page="home"] .prod-grid-more { padding:0 24px 40px; } }

/* ── PRODUCTS: VENDOR LOGO STRIP ───────────────────────── */
/* Thirty-six marks at every conceivable aspect ratio. They are normalised to a
   common cap height at build time, so the CSS only has to space them and move
   them. The row is duplicated in the markup and the track slides exactly half
   its width, which loops with no seam and no JavaScript. */
body[data-page="products"] .vendors {
  background:#fff; border-top:1px solid #ddd; padding:52px 0 56px; overflow:hidden;
}
body[data-page="products"] .vendors-head { padding:0 52px; margin-bottom:34px; max-width:720px; }
body[data-page="products"] .vendors-head h2 {
  font-family:'PosterGothic',sans-serif; font-size:clamp(22px,2.6vw,32px); font-weight:900;
  text-transform:uppercase; letter-spacing:-.01em; line-height:1.1; margin-bottom:12px;
}
body[data-page="products"] .vendors-head p {
  font-size:15.5px; line-height:1.7; color:var(--grey);
}
body[data-page="products"] .vmarquee {
  position:relative;
  /* the strip fades out at both ends instead of being chopped by the viewport */
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 90px, #000 calc(100% - 90px), transparent 100%);
          mask-image:linear-gradient(90deg, transparent 0, #000 90px, #000 calc(100% - 90px), transparent 100%);
}
body[data-page="products"] .vtrack {
  display:flex; align-items:center; width:max-content;
  animation:vscroll 90s linear infinite;
}
body[data-page="products"] .vdupe { display:flex; align-items:center; }
body[data-page="products"] .vmarquee:hover .vtrack { animation-play-state:paused; }
body[data-page="products"] .vlogo {
  flex:none; display:flex; align-items:center; justify-content:center;
  height:60px; padding:0 30px;
}
body[data-page="products"] .vlogo img {
  max-height:60px; width:auto; height:auto; display:block;
}
@keyframes vscroll { from { transform:translateX(0); } to { transform:translateX(-50%); } }

@media (max-width:860px) {
  body[data-page="products"] .vendors { padding:38px 0 42px; }
  body[data-page="products"] .vendors-head { padding:0 24px; margin-bottom:24px; }
  body[data-page="products"] .vlogo { height:46px; padding:0 20px; }
  body[data-page="products"] .vlogo img { max-height:46px; }
}

/* Someone who has asked for less motion gets the same logos standing still, in
   a wrapped grid, with the duplicate row dropped so nothing appears twice. */
@media (prefers-reduced-motion: reduce) {
  body[data-page="products"] .vtrack {
    animation:none; width:auto; flex-wrap:wrap; justify-content:center;
    row-gap:26px; padding:0 52px;
  }
  body[data-page="products"] .vdupe { display:none; }
  body[data-page="products"] .vmarquee { -webkit-mask-image:none; mask-image:none; }
}

/* ── PRODUCTS: SECTION TILES ───────────────────────────── */
/* The twelve catalog sections as pictures. A buyer recognises a shackle
   faster than they read the word, which a page of lists never let them do. */
body[data-page="products"] .cat-tiles {
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px;
  background:#ddd9d2; padding:1px; border-bottom:1px solid #ddd9d2;
}
body[data-page="products"] .ct {
  position:relative; display:block; aspect-ratio:4/3; overflow:hidden;
  text-decoration:none; background:#fff;
}
body[data-page="products"] .ct-img {
  position:absolute; inset:0; background-size:cover; background-position:center;
  transition:transform .35s ease;
}
body[data-page="products"] .ct:hover .ct-img { transform:scale(1.04); }
body[data-page="products"] .ct-name {
  position:absolute; left:16px; top:14px; right:16px; z-index:2;
  font-family:'PosterGothic',sans-serif; font-size:17px; font-weight:900;
  text-transform:uppercase; letter-spacing:.02em; color:var(--black); line-height:1.1;
}
body[data-page="products"] .ct-n {
  position:absolute; left:16px; bottom:13px; z-index:2;
  font-size:10px; letter-spacing:.11em; text-transform:uppercase; color:#8a857d;
}
/* the products were photographed on white, so the tiles are white too: no
   cut-out, no scrim, nothing to halo. The label reads as ink on paper.
   Both ends are veiled, not just the top. The label text is a fixed pixel size
   while the picture scales with the column, so on a phone it takes up a much
   larger share of the tile than the artwork was composed for — a sling leg
   that clears "14 pages" on a desktop runs straight through it at 194px. */
body[data-page="products"] .ct::after {
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,.55) 16%,
                                     rgba(255,255,255,0) 30%),
             linear-gradient(0deg, rgba(255,255,255,.94) 0%, rgba(255,255,255,.62) 10%,
                                   rgba(255,255,255,0) 22%);
}
body[data-page="products"] .ct:hover .ct-name { color:var(--accent); }
@media (max-width:1100px) { body[data-page="products"] .cat-tiles { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:640px)  {
  body[data-page="products"] .cat-tiles { grid-template-columns:repeat(2,minmax(0,1fr)); }
  body[data-page="products"] .ct-name { font-size:14px; left:11px; top:10px; right:11px; }
  body[data-page="products"] .ct-n { left:11px; bottom:9px; }
}

/* ── TOOLS: ANGLE BANDING ──────────────────────────────────
   The colour is the message: 60° and up is green, 45° amber, 30° and below
   red. It tracks the same bands the badge text uses, so the diagram reads
   before anyone gets to the numbers. */
body[data-page="tools"] .angle-display.ok   { color:#5fb87a; }
body[data-page="tools"] .angle-display.warn { color:#e0b04a; }
body[data-page="tools"] .angle-display.bad  { color:#e3705f; }
body[data-page="tools"] .sa-legend {
  display:flex; gap:20px; justify-content:center; margin-top:14px;
  font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:#8a8a8a;
}
body[data-page="tools"] .sa-legend span { display:flex; align-items:center; gap:7px; }
body[data-page="tools"] .sa-legend i {
  width:9px; height:9px; border-radius:50%; display:block; font-style:normal;
}
body[data-page="tools"] .sa-legend .k-ok   { background:#5fb87a; }
body[data-page="tools"] .sa-legend .k-warn { background:#e0b04a; }
body[data-page="tools"] .sa-legend .k-bad  { background:#e3705f; }
body[data-page="tools"] .cw-wll-note { font-size:12.5px;color:var(--grey);line-height:1.6;margin-top:10px; }

/* The band runs the full width, so give it something to do with that width:
   the read-out on the left, the diagram filling the rest. */
body[data-page="tools"] .calc-diagram.diag-row {
  flex-direction:row; align-items:center; justify-content:center; gap:56px;
  padding:24px 52px 26px;
}
body[data-page="tools"] .calc-diagram.diag-row .diag-side {
  flex:0 0 auto; width:clamp(200px,22%,300px); text-align:left;
}
body[data-page="tools"] .calc-diagram.diag-row .angle-display { text-align:left; font-size:clamp(52px,6vw,88px); margin-bottom:2px; }
body[data-page="tools"] .calc-diagram.diag-row .angle-label { text-align:left; margin-bottom:20px; }
body[data-page="tools"] .calc-diagram.diag-row .sa-legend {
  flex-direction:column; align-items:flex-start; gap:9px; justify-content:flex-start; margin-top:0;
}
body[data-page="tools"] .calc-diagram.diag-row svg { flex:1 1 auto; height:100%; max-width:none; }
@media(max-width:860px) {
  body[data-page="tools"] .calc-diagram.diag-row { flex-direction:column; gap:10px; padding:18px 20px 22px; }
  body[data-page="tools"] .calc-diagram.diag-row .diag-side { width:100%; text-align:center; }
  body[data-page="tools"] .calc-diagram.diag-row .angle-display { text-align:center; font-size:46px; }
  body[data-page="tools"] .calc-diagram.diag-row .angle-label { text-align:center; margin-bottom:8px; }
  body[data-page="tools"] .calc-diagram.diag-row .sa-legend { flex-direction:row; justify-content:center; gap:16px; }
}

/* A wide dimensional drawing does not fit the 230px figure column: at that size
   the lettered callouts are unreadable. Give it the full width above the table. */
body[data-kind="product"] .cat-prod-body .pp-figwide { margin:0 0 26px; }
body[data-kind="product"] .cat-prod-body .pp-figwide img {
  width:100%; max-width:860px; height:auto; display:block; background:#fff;
  border:1px solid #e4e0d9; padding:14px;
}

/* Some catalog pages carry two or three products under one heading; each table
   gets its own sub-heading so the rows are not read as one list. */
body[data-kind="product"] .cat-prod-body .pp-subspec {
  font-family:'PosterGothic',sans-serif; font-size:16px; font-weight:900;
  text-transform:uppercase; letter-spacing:.02em; color:var(--black);
  margin:30px 0 12px; padding-bottom:8px; border-bottom:1px solid #e4e0d9;
}
body[data-kind="product"] .cat-prod-body .pp-subspec:first-of-type { margin-top:6px; }
body[data-kind="product"] .cat-prod-body .pp-note-sm {
  font-size:13.5px; color:var(--grey); line-height:1.6; margin-top:14px;
}

/* A swage socket assembly is a long thin thing: drawn upright it would run the
   height of the screen, so it lies down the way the catalogs draw it. */
body[data-kind="product"] .cat-prod-body .pp-hero-img.wide { max-width:none; grid-column:1 / -1; }
body[data-kind="product"] .cat-prod-body .pp-hero-img.wide img { width:100%; height:auto; }
body[data-kind="product"] .cat-prod-body .pp-configs { margin:0 0 30px; }
body[data-kind="product"] .cat-prod-body .pp-config {
  display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:24px;
  align-items:center; padding:14px 0; border-bottom:1px solid #eae7e0;
}
body[data-kind="product"] .cat-prod-body .pp-config:last-child { border-bottom:none; }
body[data-kind="product"] .cat-prod-body .pp-config img { width:100%; height:auto; display:block; }
body[data-kind="product"] .cat-prod-body .pp-config-t strong {
  display:block; font-size:15px; color:var(--black); font-weight:700; margin-bottom:4px;
}
body[data-kind="product"] .cat-prod-body .pp-config-t span {
  display:block; font-size:14px; color:var(--grey); line-height:1.6;
}
/* The cargo control fittings are close-up detail shots of a hook, not pictures
   of a product. At the configuration row's default 1.35fr they came out bigger
   than the hero photo and pushed their own caption off to one side, so they get
   a fixed column that keeps them at reading size however wide the page gets. */
body[data-kind="product"] .cat-prod-body .pp-config.fitting {
  grid-template-columns:260px minmax(0,1fr); gap:30px; padding:20px 0;
}
body[data-kind="product"] .cat-prod-body .pp-config.fitting img { max-width:260px; }
/* A single leg sling is drawn the way it hangs — 480px wide and 1580 tall. At
   the configuration row's normal width one diagram would run most of a screen,
   so the sling variant caps the drawing's height and lets it find its own width
   inside a narrow column. */
body[data-kind="product"] .cat-prod-body .pp-config.sling {
  grid-template-columns:150px minmax(0,1fr); gap:28px; padding:18px 0;
  align-items:center;
}
body[data-kind="product"] .cat-prod-body .pp-config.sling img {
  width:auto; max-width:150px; max-height:230px; margin:0 auto;
}
@media (max-width:760px) {
  body[data-kind="product"] .cat-prod-body .pp-config { grid-template-columns:1fr; gap:10px; }
  body[data-kind="product"] .cat-prod-body .pp-config.fitting { grid-template-columns:1fr; gap:12px; }
  body[data-kind="product"] .cat-prod-body .pp-config.sling { grid-template-columns:110px minmax(0,1fr); gap:16px; }
  body[data-kind="product"] .cat-prod-body .pp-config.sling img { max-width:110px; max-height:180px; }
}

/* Standard model cards carry the drawing of the configuration they name: the
   three-letter code means nothing until you can see which fittings it puts on
   which end. */
body[data-kind="product"] .types-grid .type-item {
  display:grid; grid-template-columns:62px minmax(0,1fr);
  grid-template-areas:'img code' 'img desc'; gap:2px 14px; align-content:start;
}
body[data-kind="product"] .types-grid .type-img  { grid-area:img; align-self:start; }
body[data-kind="product"] .types-grid .type-code { grid-area:code; }
body[data-kind="product"] .types-grid .type-desc { grid-area:desc; }
body[data-kind="product"] .types-grid .type-img {
  flex:0 0 auto; width:62px; background:#fff; padding:6px 4px; border:1px solid #e8e4dd;
}
body[data-kind="product"] .types-grid .type-img img { width:100%; height:auto; display:block; }
body[data-kind="product"] .types-grid .type-item > .type-code { margin-top:0; }
@media (max-width:640px) {
  body[data-kind="product"] .types-grid .type-item { grid-template-columns:48px minmax(0,1fr); }
  body[data-kind="product"] .types-grid .type-img { width:48px; }
}

/* ── CHAIN SLING MODEL BAND ────────────────────────────────
   Same shape as the wire rope Sling Types band: one grey field, every
   configuration at the same height, code and description beneath. The
   drawings are transparent so the tile colour runs behind them. */
body[data-kind="product"] .sling-type-grid.st-7 { grid-template-columns:repeat(7,minmax(0,1fr)); }
body[data-kind="product"] .sling-type-grid.st-5 { grid-template-columns:repeat(5,minmax(0,1fr)); }
body[data-kind="product"] .sling-type-grid.st-3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
body[data-kind="product"] .sling-type-grid .st-tile {
  background:var(--lgrey); padding:18px 8px 16px; text-align:center;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
}
body[data-kind="product"] .sling-type-grid .st-tile img {
  height:300px; width:100%; object-fit:contain; margin-bottom:12px;
}
body[data-kind="product"] .sling-type-grid .st-code {
  font-family:'PosterGothic',sans-serif; font-size:14px; font-weight:900;
  color:var(--black); letter-spacing:-.01em;
}
body[data-kind="product"] .sling-type-grid .st-desc {
  font-size:10px; color:#8a857d; margin-top:4px; line-height:1.45; max-width:22ch;
}
body[data-kind="product"] .st-more {
  font-size:13.5px; color:var(--grey); line-height:1.65; margin:16px 0 0;
}
@media (max-width:1100px) {
  body[data-kind="product"] .sling-type-grid.st-7 { grid-template-columns:repeat(4,minmax(0,1fr)); }
  body[data-kind="product"] .sling-type-grid.st-5 { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:760px) {
  body[data-kind="product"] .sling-type-grid.st-7,
  body[data-kind="product"] .sling-type-grid.st-5,
  body[data-kind="product"] .sling-type-grid.st-3 { grid-template-columns:repeat(2,minmax(0,1fr)); }
  body[data-kind="product"] .sling-type-grid .st-tile img { height:210px; }
}

/* ── SLING BUILDER: MATERIAL STEP AND LOAD FILTER ──────────── */
body[data-page="p-sling-builder"] .mat-grid {
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:2px;
}
body[data-page="p-sling-builder"] .mat-card {
  background:var(--lgrey); border:2px solid transparent; padding:20px 18px;
  cursor:pointer; transition:border-color .14s, background .14s;
}
body[data-page="p-sling-builder"] .mat-card:hover { background:#e6e2da; }
body[data-page="p-sling-builder"] .mat-card.selected { border-color:var(--black); background:#fff; }
body[data-page="p-sling-builder"] .mc-name {
  font-family:'PosterGothic',sans-serif; font-size:17px; font-weight:900;
  text-transform:uppercase; color:var(--black); letter-spacing:.01em;
}
body[data-page="p-sling-builder"] .mc-sub { font-size:12px; color:var(--grey); margin-top:5px; line-height:1.5; }
body[data-page="p-sling-builder"] .load-row {
  display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,.8fr) minmax(0,1.2fr); gap:14px;
}
body[data-page="p-sling-builder"] .step-opt { background:var(--grey); font-size:9px; }
body[data-page="p-sling-builder"] .step-note {
  font-size:11.5px; color:var(--grey); font-weight:400; letter-spacing:0; text-transform:none; margin-left:8px;
}
body[data-page="p-sling-builder"] .load-note { font-size:13px; line-height:1.6; margin-top:12px; min-height:1px; }
body[data-page="p-sling-builder"] .load-note.ok  { color:#3f7a4f; }
body[data-page="p-sling-builder"] .load-note.bad { color:#a33a2c; }
body[data-page="p-sling-builder"] .type-card img { max-height:150px; object-fit:contain; }
@media (max-width:760px) {
  body[data-page="p-sling-builder"] .mat-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  body[data-page="p-sling-builder"] .load-row { grid-template-columns:1fr; }
}

/* ── wire rope cross-sections ──────────────────────────────────────────
   A rope's core is the thing the customer is actually choosing between, and
   you cannot describe it in a sentence as well as the drawing shows it. So
   IWRC and fiber core sit side by side under their own labels, the way the
   catalog prints them, rather than one hero photo standing for both. */
body[data-kind="product"] .cat-prod-body .pp-xsec {
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:2px;
  background:#ddd; border:1px solid #ddd; margin:0 0 6px;
}
body[data-kind="product"] .cat-prod-body .pp-xsec-cell { background:var(--white); }
body[data-kind="product"] .cat-prod-body .pp-xsec-cell figcaption {
  background:var(--lgrey); text-align:center; padding:10px 8px;
  font-family:'PosterGothic',sans-serif; font-size:13px; font-weight:900;
  text-transform:uppercase; letter-spacing:.04em; color:var(--black);
}
body[data-kind="product"] .cat-prod-body .pp-xsec-cell img {
  width:100%; max-width:300px; height:auto; display:block; margin:0 auto; padding:20px 16px;
}
body[data-kind="product"] .cat-prod-body .pp-xsec-note {
  font-size:13.5px; color:var(--grey); line-height:1.6; margin:0 0 6px;
}
@media (max-width:620px) {
  body[data-kind="product"] .cat-prod-body .pp-xsec { grid-template-columns:minmax(0,1fr); }
}

/* Features and Options are two short lists, not one long one — the catalog
   prints them side by side and so does the page, so neither reads as a
   continuation of the other. */
body[data-kind="product"] .cat-prod-body .pp-lede {
  font-size:16px; color:#3d3d3d; line-height:1.75; margin-bottom:22px;
}
body[data-kind="product"] .cat-prod-body .pp-lede + .pp-lede { margin-top:-10px; }
/* Prose on a product page can link to a sibling product or to a service, and
   nothing had ever styled those — they came out as default browser blue, which
   is the one colour that appears nowhere else on the site. Same treatment the
   service and forms pages already give body links. */
body[data-kind="product"] .cat-prod-body .pp-lede a,
body[data-kind="product"] .cat-prod-body .pp-note-sm a,
body[data-kind="product"] .cat-prod-body .pp-defs a,
body[data-kind="product"] .cat-prod-body .pp-config-t a {
  color:var(--black); text-decoration:underline; text-underline-offset:3px;
}
body[data-kind="product"] .cat-prod-body .pp-lede a:visited,
body[data-kind="product"] .cat-prod-body .pp-note-sm a:visited,
body[data-kind="product"] .cat-prod-body .pp-defs a:visited,
body[data-kind="product"] .cat-prod-body .pp-config-t a:visited { color:var(--black); }
body[data-kind="product"] .cat-prod-body .pp-lede a:hover,
body[data-kind="product"] .cat-prod-body .pp-note-sm a:hover,
body[data-kind="product"] .cat-prod-body .pp-defs a:hover,
body[data-kind="product"] .cat-prod-body .pp-config-t a:hover { color:var(--accent); }
body[data-kind="product"] .cat-prod-body .pp-feat-two {
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px; align-items:start;
}
body[data-kind="product"] .cat-prod-body .pp-feat-two h2 {
  font-size:clamp(16px,1.8vw,19px); margin-bottom:12px;
}
/* The two-column feature list was only ever used inside the hero block, where
   .pp-features gives it its heading style and its rule-dash markers. Used lower
   down the page — the removal-from-service lists on the cargo control pages —
   it inherited neither and came out as body text under plain discs. */
body[data-kind="product"] .cat-prod-body .pp-spec-main .pp-feat-two h2 {
  font-family:'PosterGothic',sans-serif; font-weight:900;
  text-transform:uppercase; color:var(--black); letter-spacing:-.01em;
}
body[data-kind="product"] .cat-prod-body .pp-spec-main .pp-feat-two ul { list-style:none; }
body[data-kind="product"] .cat-prod-body .pp-spec-main .pp-feat-two li {
  font-size:15.5px; color:#3d3d3d; line-height:1.65; padding-left:20px;
  position:relative; margin-bottom:8px;
}
body[data-kind="product"] .cat-prod-body .pp-spec-main .pp-feat-two li::before {
  content:''; position:absolute; left:0; top:11px; width:7px; height:1px; background:var(--accent);
}
@media (max-width:620px) {
  body[data-kind="product"] .cat-prod-body .pp-feat-two { grid-template-columns:minmax(0,1fr); gap:18px; }
}
/* In the hero slot the two cross-sections stack instead of sitting side by
   side, so the column stays the same width as every other product page's
   hero photo. */
body[data-kind="product"] .cat-prod-body .pp-xsec.stack { grid-template-columns:minmax(0,1fr); }
body[data-kind="product"] .cat-prod-body .pp-xsec.stack img { padding:14px 12px; max-width:240px; }

/* The drawings are line art with a transparent ground, so they sit on the page
   tone rather than on a brighter white plate that reads as a box around them. */
/* Line art sits on the page tone rather than on a white plate that reads as a
   box around it — and without the plate the border has nothing to enclose, so
   that goes too. A tall drawing like a sling also needs more height than the
   360px a photograph is capped at, or it is squeezed into a stripe. */
body[data-kind="product"] .cat-prod-body .pp-hero-img.line {
  background:transparent; border:none; padding:0; min-height:0;
}
body[data-kind="product"] .cat-prod-body .pp-hero-img.line img {
  max-height:420px; width:auto; max-width:100%;
}

/* Construction names — Seale, Filler Wire, Warrington — are the part customers
   ask about on the phone, so they get a term/definition list rather than another
   run of bullets they would skim past. */
body[data-kind="product"] .cat-prod-body .pp-defs {
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px 34px; margin:24px 0 4px;
}
body[data-kind="product"] .cat-prod-body .pp-defs dt {
  font-family:'PosterGothic',sans-serif; font-size:14px; font-weight:900;
  text-transform:uppercase; letter-spacing:.03em; color:var(--black); margin-bottom:5px;
}
body[data-kind="product"] .cat-prod-body .pp-defs dd {
  font-size:14.5px; color:#3d3d3d; line-height:1.65;
}
body[data-kind="product"] .cat-prod-body .spec-table td.wide {
  white-space:normal; min-width:280px; text-align:left;
}
@media (max-width:760px) {
  body[data-kind="product"] .cat-prod-body .pp-defs { grid-template-columns:minmax(0,1fr); gap:16px; }
}
body[data-kind="product"] .cat-prod-body .spec-table tbody th.name { text-align:left; }
/* Row headers are uppercased site-wide, which suits a short label like "Flat
   Hook" and not a row header that is a whole condition ("5 ft or shorter and
   1,100 lb or lighter"). Those get sentence case and are allowed to wrap. */
body[data-kind="product"] .cat-prod-body .spec-table tbody th.sentence,
body[data-kind="product"] .cat-prod-body .spec-table tbody td.sentence {
  text-transform:none; white-space:normal; text-align:left;
  letter-spacing:0; font-size:14.5px; line-height:1.5; min-width:260px;
}
body[data-kind="product"] .cat-prod-body .spec-table thead th.wide { text-align:left; }

/* A figure that carries its own explanation, rather than a bare spec drawing. */
body[data-kind="product"] .cat-prod-body .pp-figwide { max-width:620px; }
body[data-kind="product"] .cat-prod-body .pp-figwide img {
  max-width:620px; background:transparent; border:none; padding:0;
}
body[data-kind="product"] .cat-prod-body .pp-figwide figcaption {
  font-size:13.5px; color:var(--grey); line-height:1.6; margin-top:10px;
}

/* Who actually makes the rope. These four are vendor products, and the mark is
   attribution sitting under the spec bullets, not a picture of the goods — so
   it is small, greyed and ruled off rather than presented as a figure. */
body[data-kind="product"] .cat-prod-body .pp-brandmark {
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  margin-top:26px; padding-top:18px; border-top:1px solid #e4e0d9;
}
body[data-kind="product"] .cat-prod-body .pp-brandmark img {
  height:26px; width:auto; display:block; flex:none;
}
body[data-kind="product"] .cat-prod-body .pp-brandmark span {
  font-size:13.5px; color:var(--grey); line-height:1.5;
}

/* Three fittings have no usable drawing in the catalog, so their page leads
   with the copy rather than an empty frame. */
body[data-kind="product"] .cat-prod-body .pp-top.no-img { grid-template-columns:minmax(0,1fr); }

/* The honeypot has to be reachable by a bot parsing the HTML but invisible and
   unfocusable for a person, so it is moved off-screen rather than display:none
   — some bots skip hidden fields. */
body[data-page="contact"] .form-hp {
  position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;
}
body[data-page="contact"] .form-error {
  margin-top:14px; padding:12px 14px; border-left:3px solid #b4432c;
  background:#faf0ed; color:#7d2f1e; font-size:14.5px; line-height:1.6;
}

/* a plain list inside the spec column — the approvals under Wirelock. Takes the
   features list's dash marker rather than a browser bullet, which was the only
   round bullet anywhere on the site. */
body[data-kind="product"] .cat-prod-body .pp-plain {
  list-style:none; margin:4px 0 20px;
}
body[data-kind="product"] .cat-prod-body .pp-plain li {
  font-size:15.5px; color:#3d3d3d; line-height:1.7; padding-left:20px;
  position:relative; margin-bottom:6px;
}
body[data-kind="product"] .cat-prod-body .pp-plain li::before {
  content:''; position:absolute; left:0; top:11px; width:7px; height:1px;
  background:var(--accent);
}