/* ============================================================
   Showcase layout — shared by pistols.html and the shotgun product pages
   (prefix: py-). Tokens come from design-system.css.
   ============================================================ */
/* ============================================================
   PISTOL SHOWROOM — page-scoped styles (prefix: py-)
   Dark stage tokens derived from the nav/footer canvas (#080c17)
   ============================================================ */
:root {
  --dk-bg: #080c17;
  --dk-surface: #0d1117;
  --dk-raised: #131a26;
  --dk-fg: #e6edf3;
  --dk-muted: #94a3b8;
  --dk-border: rgba(230, 237, 243, 0.10);
  --dk-grid: rgba(0, 185, 241, 0.07);
}
body { padding-top: var(--nav-height); }
/* design-system.css only styles .nav-mobile inside its mobile breakpoints;
   without this it renders as a plain link list under the fixed nav on desktop */
.nav-mobile { display: none; }
.py-wrap { width: 100%; max-width: 1440px; margin: 0 auto; padding: 0 50px; }
.py-section { padding: 96px 0; }
.py-dark { background: var(--dk-bg); color: var(--dk-fg); }
.py-dark .kicker { color: var(--accent); }
.py-dark .body-small, .py-dark .body { color: var(--dk-muted); }
.py-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin-bottom: 48px; }
.py-head-copy { display: flex; flex-direction: column; gap: 12px; max-width: 640px; }
.py-index {
  font: 500 12px/1 var(--font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
  padding-bottom: 6px;
}
.py-dark .py-index { color: var(--dk-muted); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ---------- HERO ---------- */
.py-hero {
  position: relative;
  min-height: calc(100vh - var(--nav-height));
  display: flex;
  align-items: center;
  overflow: hidden;
  background: transparent; /* page canvas shows through — no dark stage, no grid */
  border-bottom: 1px solid var(--border);
  isolation: isolate;
}
/* Line-art backdrop — clean SVG curves in the accent blue.
   Each line draws itself in on load, then drifts gently at its own pace;
   one line carries a travelling highlight pulse. Masked lighter behind the copy. */
.py-hero-lines {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.55) 38%, #000 62%);
  mask-image: linear-gradient(90deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.55) 38%, #000 62%);
}
.py-lines-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.py-line {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.5;
  stroke-linecap: round;
  opacity: var(--o, 0.3);
  stroke-dasharray: 2600;
  stroke-dashoffset: 2600;
  animation:
    py-draw 2.4s cubic-bezier(0.65, 0, 0.35, 1) var(--delay, 0s) forwards,
    py-float var(--dur, 14s) ease-in-out infinite alternate;
}
.py-line.is-fine { stroke-width: 0.75; }
.py-line-pulse {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 160 2440;
  stroke-dashoffset: 2600;
  opacity: 0.95;
  animation: py-pulse 8s cubic-bezier(0.4, 0, 0.6, 1) 2.6s infinite, py-float 16s ease-in-out infinite alternate;
}
@keyframes py-draw  { to { stroke-dashoffset: 0; } }
@keyframes py-pulse { to { stroke-dashoffset: 0; } }
@keyframes py-float { from { transform: translateY(-9px); } to { transform: translateY(11px); } }
.py-hero-watermark { z-index: 1; }
.py-hero-watermark {
  position: absolute;
  right: -0.04em; top: 50%;
  transform: translateY(-52%);
  font: 800 clamp(200px, 30vw, 460px)/1 var(--font-display);
  letter-spacing: -0.04em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(15, 23, 42, 0.10);
  user-select: none;
  pointer-events: none;
  transition: opacity 0.4s ease;
}
.py-hero-grid {
  position: relative; z-index: 2;
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 48px;
  align-items: center;
  padding: 64px 0 56px;
}
.py-hero-copy { display: flex; flex-direction: column; gap: 28px; }
/* Kinetic title: letters rise in on load; the active model is filled,
   the other is an outline, and the fill wipes letter-by-letter on switch */
.py-hero-title {
  font: 700 clamp(80px, 11vw, 176px)/0.88 var(--font-display);
  letter-spacing: -0.035em;
  text-transform: uppercase;
  color: var(--fg);
  display: flex; flex-direction: column; align-items: flex-start;
  margin-left: -0.02em;
}
.py-title-line {
  display: inline-flex; align-items: baseline;
  overflow: hidden;
  padding: 0.04em 0.06em 0.06em 0.02em;
  margin: -0.04em 0 -0.06em;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.py-title-line:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 2px; }
.py-title-amp {
  font-weight: 300;
  font-size: 0.62em;
  color: var(--accent);
  margin-right: 0.14em;
  transform: translateY(0.06em);
  transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
  animation: py-fade 0.6s ease 0.45s both;
}
.py-hero[data-model="cp9"] .py-title-amp { transform: translateY(0.06em) rotate(-12deg); }
.py-ch {
  display: inline-block;
  color: transparent;
  -webkit-text-stroke: 2px var(--fg);
  /* the negative letter-spacing shrinks each letter box below its glyph; pad the box on the right
     (and pull it back with a negative margin) so the fill covers wide glyphs like A / Z / R completely */
  padding: 0.06em 0.12em 0.06em 0;
  margin: -0.06em -0.12em -0.06em 0;
  background: linear-gradient(var(--fg), var(--fg)) left center / 0% 100% no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  transform: translateY(115%);
  animation: py-rise 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
  animation-delay: calc(var(--i) * 70ms + 120ms);
  transition: background-size 0.45s cubic-bezier(0.4, 0, 0.2, 1) calc(var(--i) * 55ms),
              -webkit-text-stroke-color 0.3s ease;
}
.py-hero[data-model="cr9"] .py-title-line[data-model="cr9"] .py-ch,
.py-hero[data-model="cp9"] .py-title-line[data-model="cp9"] .py-ch,
.py-title-line.is-on .py-ch { background-size: 100% 100%; }
.py-title-line:hover .py-ch { -webkit-text-stroke-color: var(--accent); }
.py-hero[data-model="cr9"] .py-title-line[data-model="cr9"]:hover .py-ch,
.py-hero[data-model="cp9"] .py-title-line[data-model="cp9"]:hover .py-ch { -webkit-text-stroke-color: var(--fg); }
@keyframes py-rise { to { transform: translateY(0); } }
.py-hero-sub {
  font: 500 clamp(20px, 1.8vw, 26px)/1.25 var(--font-display);
  letter-spacing: -0.005em;
  color: var(--fg);
  max-width: 480px;
}
.py-hero-desc { max-width: 460px; }

/* Model selector — two product cards with a silhouette thumbnail, index and
   frame label. Active card inverts to the dark ink colour with a white
   silhouette; an accent rule slides in along its bottom edge. */
.py-switch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  width: 100%;
  max-width: 520px;
}
.py-switch button, .py-switch .py-sw-link {
  position: relative;
  display: grid;
  grid-template-columns: 64px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 12px 16px 12px 12px;
  min-height: 76px;
  text-align: left;
  color: var(--muted);
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: background var(--transition), border-color var(--transition), color var(--transition),
              transform var(--transition), box-shadow var(--transition);
}
.py-switch button::after, .py-switch .py-sw-link::after {
  /* accent rule along the bottom edge — draws in on activation */
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 3px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.45s cubic-bezier(0.23, 1, 0.32, 1);
}
.py-sw-thumb {
  display: block;
  width: 64px; height: 44px;
  border-radius: 3px;
  background: var(--bg);
  overflow: hidden;
  transition: background var(--transition);
}
.py-sw-thumb img {
  width: 100%; height: 100%;
  object-fit: contain;
  transform: scale(1.35) translateY(2%);
  transition: filter var(--transition), transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}
.py-sw-text { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.py-switch button strong, .py-switch .py-sw-link strong {
  font: 700 24px/1 var(--font-display);
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--fg);
  transition: color var(--transition);
}
.py-switch button span.py-sw-label, .py-switch .py-sw-link span.py-sw-label {
  font: 500 10px/1.2 var(--font-body);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}
.py-sw-idx {
  align-self: start;
  font: 500 11px/1 var(--font-body);
  letter-spacing: 0.12em;
  color: var(--muted);
  transition: color var(--transition);
}
.py-switch button:hover, .py-switch .py-sw-link:hover {
  border-color: var(--accent);
  color: var(--fg);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(15,23,42,0.10);
}
.py-switch button:hover .py-sw-thumb img, .py-switch .py-sw-link:hover .py-sw-thumb img { transform: scale(1.42) translateY(2%); }
.py-switch button.active, .py-switch .py-sw-link.active {
  background: var(--fg);
  border-color: var(--fg);
  color: rgba(255,255,255,0.72);
  transform: none;
  box-shadow: 0 14px 30px rgba(15,23,42,0.22);
  cursor: default;
}
.py-switch button.active strong, .py-switch .py-sw-link.active strong { color: #fff; }
.py-switch button.active .py-sw-idx, .py-switch .py-sw-link.active .py-sw-idx { color: var(--accent); }
.py-switch button.active .py-sw-thumb, .py-switch .py-sw-link.active .py-sw-thumb { background: rgba(255,255,255,0.08); }
.py-switch button.active .py-sw-thumb img, .py-switch .py-sw-link.active .py-sw-thumb img { filter: invert(1) brightness(1.6); }
.py-switch button.active::after, .py-switch .py-sw-link.active::after { transform: scaleX(1); }

.py-hero-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--border);
  padding-top: 24px;
  gap: 16px;
  max-width: 560px;
}
.py-stat { display: flex; flex-direction: column; gap: 6px; }
.py-stat-label {
  font: 500 10px/1 var(--font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.py-stat-value {
  font: 700 clamp(22px, 2vw, 30px)/1 var(--font-display);
  letter-spacing: -0.01em;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
  transition: opacity 0.25s ease;
}
.py-hero-actions { display: flex; align-items: center; gap: 28px; }
.py-textlink {
  font: 600 12px/1 var(--font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg);
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 0;
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition), color var(--transition);
}
.py-textlink:hover { color: var(--accent); border-color: var(--accent); }
.py-textlink svg { width: 14px; height: 14px; }

/* Product stage */
.py-stage {
  position: relative;
  aspect-ratio: 5/4;
  display: flex; align-items: center; justify-content: center;
}
.py-stage-light {
  position: absolute;
  inset: 10% 6%;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.5) 38%, transparent 68%);
  filter: blur(6px);
  pointer-events: none;
}
.py-stage-ring {
  position: absolute;
  inset: 4%;
  border: 1px solid rgba(0,185,241,0.28);
  border-radius: 50%;
  pointer-events: none;
}
.py-stage-ring::before, .py-stage-ring::after {
  content: '';
  position: absolute;
  left: 50%; top: -1px;
  width: 1px; height: 18px;
  background: var(--accent);
  transform: translateX(-50%);
}
.py-stage-ring::after { top: auto; bottom: -1px; }
.py-stage img {
  position: absolute;
  width: 101%; /* 84% × 1.2 — pistol fills the stage */
  height: auto;
  left: -0.5%;
  top: 50%;
  transform: translateY(-50%) scale(0.96);
  opacity: 0;
  filter: drop-shadow(0 30px 40px rgba(15,23,42,0.28));
  transition: opacity 0.45s ease, transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
  pointer-events: none;
}
.py-stage img.active { opacity: 1; transform: translateY(-50%) scale(1); }
.py-stage-tag {
  position: absolute;
  right: 6%; bottom: 8%;
  display: flex; flex-direction: column; gap: 4px;
  padding: 10px 14px;
  background: rgba(255,255,255,0.9);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  backdrop-filter: blur(8px);
}
.py-stage-tag span { font: 500 10px/1 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.py-stage-tag strong { font: 600 15px/1 var(--font-display); letter-spacing: 0.02em; text-transform: uppercase; color: var(--fg); }

/* Hero typography — mirrors index.html: title stays Barlow Condensed,
   everything else in the hero uses the site body family (Inter via --font-body) */
.py-hero-sub { font: 500 clamp(17px, 1.3vw, 20px)/1.4 var(--font-body); letter-spacing: 0; }
.py-hero-desc { font: 500 14px/1.6 var(--font-body); }
.py-stat-label { font: 500 10px/1 var(--font-body); letter-spacing: 0.1em; }
.py-stat-value { font: 600 clamp(18px, 1.5vw, 22px)/1 var(--font-body); letter-spacing: 0; }
.py-hero .py-textlink { font: 600 12px/1 var(--font-body); letter-spacing: 0.04em; }
.py-stage-tag span { font: 500 10px/1 var(--font-body); letter-spacing: 0.1em; }
.py-stage-tag strong { font: 600 14px/1 var(--font-body); letter-spacing: 0; text-transform: none; }

/* ---------- SUBNAV ---------- */
.py-subnav {
  position: sticky;
  top: var(--nav-height);
  z-index: 49;
  background: rgba(231,236,239,0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.py-subnav-inner {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  height: 56px;
}
.py-subnav-brand {
  font: 600 13px/1 'Quicksand', sans-serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.py-subnav-brand span { color: var(--muted); font-weight: 500; margin-left: 8px; }
.py-chips { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.py-chips::-webkit-scrollbar { display: none; }
.py-chip {
  flex-shrink: 0;
  padding: 10px 16px;
  min-height: 40px;
  font: 500 13px/1 'Quicksand', var(--font-display);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px solid transparent;
  border-radius: var(--radius);
  transition: all var(--transition);
  white-space: nowrap;
}
.py-chip:hover { color: var(--fg); border-color: var(--border); }
.py-chip.active { color: var(--accent); border-color: var(--accent); background: var(--accent-dim); }

/* ---------- MODELS ---------- */
.py-models { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.py-model {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}
.py-model:hover { border-color: var(--accent); box-shadow: 0 24px 60px rgba(15,23,42,0.12); transform: translateY(-4px); }
.py-model-visual {
  position: relative;
  aspect-ratio: 16/10;
  background: radial-gradient(ellipse 70% 60% at 50% 55%, #ffffff 0%, var(--surface) 55%, var(--bg) 100%);
  overflow: hidden;
}
.py-model-visual img {
  position: absolute; inset: 6%;
  width: 88%; height: 88%;
  object-fit: contain;
  transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}
.py-model:hover .py-model-visual img { transform: scale(1.04) translateX(1.5%); }
.py-model-visual .product-card-grid, .py-model-visual .product-card-brackets { z-index: 2; }
.py-model:hover .product-card-grid, .py-model:hover .product-card-brackets { opacity: 1; }
.py-model-no {
  position: absolute; top: 20px; left: 24px;
  font: 700 clamp(64px, 6vw, 96px)/1 var(--font-display);
  letter-spacing: -0.03em;
  color: var(--fg);
  opacity: 0.06;
  pointer-events: none;
}
.py-model-badge {
  position: absolute; top: 16px; right: 16px; z-index: 3;
  font: 600 10px/1 var(--font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
  background: var(--fg);
  padding: 7px 10px;
  border-radius: 2px;
}
.py-model-body { padding: 28px 28px 32px; display: flex; flex-direction: column; gap: 18px; flex: 1; }
.py-model-title { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.py-model-title h3 { font: 700 clamp(36px, 3.4vw, 48px)/1 var(--font-display); letter-spacing: -0.02em; text-transform: uppercase; }
.py-model-title .tag {
  font: 500 11px/1 var(--font-mono); letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--secondary); border: 1px solid var(--border); padding: 6px 10px; border-radius: 2px; white-space: nowrap;
}
.py-model-body p { color: var(--muted); font: 400 16px/1.6 var(--font-body); flex: 1; }
.py-specs {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden;
}
.py-spec {
  padding: 12px 14px; display: flex; flex-direction: column; gap: 4px;
  border-right: 1px solid var(--border); border-bottom: 1px solid var(--border);
  background: var(--surface-raised);
}
.py-spec:nth-child(4n) { border-right: 0; }
.py-spec:nth-last-child(-n+4) { border-bottom: 0; }
.py-spec-label { font: 500 10px/1 var(--font-mono); letter-spacing: 0.10em; text-transform: uppercase; color: var(--secondary); }
.py-spec-value { font: 600 17px/1.2 var(--font-display); font-variant-numeric: tabular-nums; }
.py-spec.is-diff .py-spec-value { color: var(--accent); }
/* pistols.html model cards: the 8-cell spec grid sits flat on the card — no box, no rules */
.py-model .py-specs:not(.is-two) { border: 0; border-radius: 0; background: transparent; overflow: visible; column-gap: 12px; row-gap: 14px; }
.py-model .py-specs:not(.is-two) .py-spec { border: 0; background: transparent; padding: 0; }
.py-model-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 4px; }
.py-model-foot .link { font: 600 13px/1 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); display: inline-flex; align-items: center; gap: 8px; padding: 12px 0; }
.py-model-foot .link:hover { color: var(--secondary); }
.py-model-foot .link svg { width: 14px; height: 14px; transition: transform var(--transition); }
.py-model-foot .link:hover svg { transform: translateX(4px); }
.py-model-foot .note { font: 400 12px/1.4 var(--font-mono); color: var(--muted); }

/* ---------- ENGINEERING ---------- */
.py-eng { position: relative; overflow: hidden; }
.py-eng::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--dk-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--dk-grid) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(90deg, transparent 0%, #000 50%, #000 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 50%, #000 100%);
  pointer-events: none;
}
.py-eng-grid { position: relative; display: grid; grid-template-columns: 7fr 5fr; gap: 56px; align-items: center; }
.py-eng-visual { position: relative; aspect-ratio: 4/3; display: flex; align-items: center; }
.py-eng-visual img {
  width: 100%; height: auto;
  filter: drop-shadow(0 40px 50px rgba(0,0,0,0.6));
  transform: translateX(-4%);
}
.py-callout {
  position: absolute;
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px 8px 8px;
  background: rgba(13,17,23,0.88);
  border: 1px solid var(--dk-border);
  border-radius: var(--radius);
  backdrop-filter: blur(8px);
  font: 500 11px/1 var(--font-mono);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--dk-fg);
  white-space: nowrap;
}
.py-callout::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px rgba(0,185,241,0.2); }
/* pinned beside features, never over the pistol body */
.py-callout-slide { top: 2%; left: 34%; }
.py-callout-frame { bottom: 4%; left: 40%; }
.py-callout-trigger { top: 62%; left: 44%; }
.py-eng-copy { display: flex; flex-direction: column; gap: 32px; }
.py-facts { display: flex; flex-direction: column; border-top: 1px solid var(--dk-border); }
.py-fact {
  display: grid; grid-template-columns: 56px 1fr; gap: 20px;
  padding: 22px 0;
  border-bottom: 1px solid var(--dk-border);
}
.py-fact-num { font: 500 12px/1 var(--font-mono); letter-spacing: 0.14em; color: var(--accent); padding-top: 6px; }
.py-fact h4 { font: 700 clamp(22px, 1.8vw, 28px)/1.1 var(--font-display); letter-spacing: -0.01em; text-transform: uppercase; color: var(--dk-fg); margin-bottom: 6px; }
.py-fact p { font: 400 15px/1.6 var(--font-body); color: var(--dk-muted); }

/* ---------- DIMENSIONS ---------- */
.py-tabs { display: inline-flex; gap: 4px; padding: 4px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.py-tab {
  padding: 10px 22px; min-height: 44px;
  font: 600 13px/1 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--muted); border-radius: 2px; transition: all var(--transition);
}
.py-tab:hover { color: var(--fg); }
.py-tab.active { background: var(--fg); color: #fff; }
.py-dim-viewer {
  position: relative;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(15,23,42,0.08);
}
.py-dim-panel { display: none; padding: 32px; }
.py-dim-panel.active { display: block; animation: py-fade 0.4s ease; }
.py-dim-panel img { width: 100%; height: auto; }
.py-dim-corner { position: absolute; width: 22px; height: 22px; border-color: var(--accent); border-style: solid; border-width: 0; pointer-events: none; }
.py-dim-corner.tl { top: 12px; left: 12px; border-top-width: 1px; border-left-width: 1px; }
.py-dim-corner.tr { top: 12px; right: 12px; border-top-width: 1px; border-right-width: 1px; }
.py-dim-corner.bl { bottom: 12px; left: 12px; border-bottom-width: 1px; border-left-width: 1px; }
.py-dim-corner.br { bottom: 12px; right: 12px; border-bottom-width: 1px; border-right-width: 1px; }
@keyframes py-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------- FINISHES ---------- */
.py-filter { display: inline-flex; gap: 4px; }
.py-filter button {
  padding: 10px 16px; min-height: 40px;
  font: 600 12px/1 var(--font-mono); letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--muted); border: 1px solid transparent; border-radius: var(--radius); transition: all var(--transition);
}
.py-filter button:hover { color: var(--fg); border-color: var(--border); }
.py-filter button.active { color: var(--accent); border-color: var(--accent); background: var(--accent-dim); }
.py-finishes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.py-finish { display: flex; }
.py-finish.is-hidden { display: none; }
.py-finish .product-card { width: 100%; animation: py-fade 0.4s ease; }
.py-finish .product-card-image { aspect-ratio: 16/9; background: radial-gradient(ellipse 70% 60% at 50% 55%, #ffffff 0%, var(--surface) 60%, var(--bg) 100%); }
.py-finish .product-card-image img { transform: scale(0.92); }
.py-finish .product-card:hover .product-card-image img { transform: scale(0.97); }
.py-swatch {
  position: absolute; top: 12px; left: 12px; z-index: 3;
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px 6px 6px;
  background: rgba(255,255,255,0.92);
  border: 1px solid var(--border);
  border-radius: 2px;
  font: 600 9px/1 var(--font-mono); letter-spacing: 0.10em; text-transform: uppercase; color: var(--fg);
}
.py-swatch i { width: 14px; height: 14px; border-radius: 2px; display: block; border: 1px solid rgba(15,23,42,0.15); }
.py-swatch i + i { margin-left: -6px; }
.py-finish .product-card-body { padding: 20px 22px 22px; gap: 8px; }
.py-finish .product-card-body .model { font-size: 22px; }
.py-finish .product-card-body .desc { font-size: 15px; }
.py-finish .product-card-body .link { display: inline-flex; align-items: center; gap: 8px; padding-top: 6px; }
.py-finish .product-card-body .link:hover { color: var(--secondary); }
.py-finish .product-card-body .link svg { width: 12px; height: 12px; }
/* physical finish swatches (content, not UI palette) */
.sw-black { background: oklch(22% 0.005 260); }
.sw-olive { background: oklch(46% 0.06 120); }
.sw-gold { background: oklch(74% 0.12 85); }
.sw-tungsten { background: oklch(58% 0.01 260); }
.sw-bronze { background: oklch(50% 0.07 55); }

/* ---------- BENCHMARK ---------- */
.py-bench {
  background: var(--dk-surface);
  border: 1px solid rgba(0,185,241,0.14);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,0.4);
}
.py-bench table { width: 100%; border-collapse: collapse; }
.py-bench thead th {
  padding: 22px 18px;
  text-align: left;
  font: 600 13px/1.2 var(--font-body);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--dk-fg);
  border-bottom: 1px solid rgba(0,185,241,0.16);
  vertical-align: top;
}
.py-bench thead th:first-child { width: 26%; padding-left: 28px; }
.py-bench thead th small { display: block; font: 500 10px/1 var(--font-mono); letter-spacing: 0.12em; color: var(--dk-muted); margin-top: 6px; text-transform: uppercase; }
.py-bench thead th.ours { color: var(--accent); background: rgba(0,185,241,0.08); }
.py-bench thead th.ours small { color: rgba(0,185,241,0.7); }
.py-bench tr.cat td {
  padding: 20px 18px 8px 28px;
  font: 600 11px/1 var(--font-mono); letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--dk-muted);
}
.py-bench tr.row td {
  padding: 13px 18px;
  font: 400 15px/1.3 var(--font-body);
  color: var(--dk-fg);
  border-bottom: 1px solid var(--dk-border);
  font-variant-numeric: tabular-nums;
}
.py-bench tr.row td:first-child { padding-left: 28px; color: var(--dk-muted); }
.py-bench tr.row td.ours { background: rgba(0,185,241,0.05); }
.py-bench tr.row:hover td { background: rgba(230,237,243,0.03); }
.py-bench tr.row:hover td.ours { background: rgba(0,185,241,0.10); }
.py-bench td.win { color: var(--accent); font-weight: 600; }
.py-bench td.win::after { content: ' ★'; font-size: 10px; opacity: 0.8; }
.py-bench-score {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 32px;
}
.py-score {
  padding: 20px 22px;
  background: var(--dk-surface);
  border: 1px solid var(--dk-border);
  border-radius: var(--radius);
  display: flex; flex-direction: column; gap: 8px;
}
.py-score.lead { border-color: rgba(0,185,241,0.4); }
.py-score span { font: 500 10px/1 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--dk-muted); }
.py-score strong { font: 700 clamp(28px, 2.4vw, 36px)/1 var(--font-display); letter-spacing: -0.01em; color: var(--dk-fg); }
.py-score.lead strong { color: var(--accent); }
.py-score em { font: 400 13px/1.4 var(--font-body); font-style: normal; color: var(--dk-muted); }
.py-cmp-switch { display: none; gap: 4px; margin-bottom: 20px; }
.py-cmp-switch button {
  padding: 10px 16px; min-height: 44px;
  font: 600 12px/1 var(--font-mono); letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--dk-muted); border: 1px solid var(--dk-border); border-radius: var(--radius);
}
.py-cmp-switch button.active { color: var(--accent); border-color: var(--accent); background: rgba(0,185,241,0.10); }

/* ---------- CTA ---------- */
/* Closing band: ink panel with the model name traced behind the actions. */
.py-cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 48px; align-items: center;
  padding: 64px 72px;
  background: var(--dk-bg);
  color: var(--dk-fg);
  border-radius: 6px;
}
.py-cta::after {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(ellipse 40% 120% at 88% 50%, rgba(0,185,241,0.16), transparent 70%),
    linear-gradient(var(--dk-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--dk-grid) 1px, transparent 1px);
  background-size: auto, 48px 48px, 48px 48px;
  pointer-events: none;
}
.py-cta-wm {
  position: absolute; right: 28px; bottom: -0.16em; z-index: -1;
  font: 800 clamp(120px, 15vw, 220px)/1 var(--font-display);
  letter-spacing: -0.04em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(230, 237, 243, 0.10);
  pointer-events: none; user-select: none;
}
.py-cta .py-head-copy { gap: 14px; max-width: 640px; }
.py-cta .kicker { color: var(--accent); }
.py-cta .heading-2, .py-cta .heading-3 { color: #fff; }
.py-cta .body { color: var(--dk-muted); font-size: 16px; }
.py-cta-actions { display: flex; align-items: center; gap: 28px; position: relative; z-index: 1; flex-wrap: wrap; }
.py-cta .py-textlink { color: #fff; }
.py-cta .py-textlink:hover { color: var(--accent); }
.py-cta .btn-outline { color: #fff; border-color: rgba(255,255,255,0.32); }
.py-cta .btn-outline:hover { color: var(--accent); border-color: var(--accent); }
/* ---------- RESPONSIVE ---------- */
@media (max-width: 1100px) {
  .py-hero-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .py-eng-grid { gap: 40px; }
  .py-finishes { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .py-wrap { padding: 0 24px; }
  .py-section { padding: 72px 0; }
  .py-hero { min-height: 0; }
  .py-hero-grid { grid-template-columns: 1fr; padding: 48px 0 40px; }
  .py-stage { order: -1; aspect-ratio: 4/3; }
  .py-hero-watermark { display: none; }
  .py-hero-stats { grid-template-columns: repeat(2, 1fr); }
  .py-switch { max-width: none; }
  .py-switch button { grid-template-columns: 56px 1fr auto; padding: 10px 12px 10px 10px; min-height: 68px; }
  .py-sw-thumb { width: 56px; height: 40px; }
  .py-head { flex-direction: column; align-items: flex-start; gap: 20px; margin-bottom: 32px; }
  .py-subnav-brand { display: none; }
  .py-models { grid-template-columns: 1fr; }
  .py-specs { grid-template-columns: repeat(2, 1fr); }
  .py-spec:nth-child(4n) { border-right: 1px solid var(--border); }
  .py-spec:nth-child(2n) { border-right: 0; }
  .py-spec:nth-last-child(-n+4) { border-bottom: 1px solid var(--border); }
  .py-spec:nth-last-child(-n+2) { border-bottom: 0; }
  .py-eng-grid { grid-template-columns: 1fr; }
  .py-callout { display: none; }
  .py-dim-panel { padding: 16px; }
  .py-finishes { grid-template-columns: 1fr; }
  .py-bench-score { grid-template-columns: 1fr; }
  .py-cmp-switch { display: flex; }
  .py-bench thead th:first-child { width: 36%; padding-left: 18px; }
  .py-bench tr.row td:first-child, .py-bench tr.cat td { padding-left: 18px; }
  .py-bench th.c0, .py-bench td.c0, .py-bench th.c1, .py-bench td.c1 { display: none; }
  .py-bench.show-0 th.c0, .py-bench.show-0 td.c0 { display: table-cell; }
  .py-bench.show-1 th.c1, .py-bench.show-1 td.c1 { display: table-cell; }
  .py-cta { grid-template-columns: 1fr; padding: 36px 28px; gap: 28px; }
  .py-cta-wm { font-size: 96px; right: 12px; }
  .py-cta-actions { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  .py-stage img, .py-switch button, .py-switch button::after, .py-model, .py-dim-panel.active, .py-finish .product-card { transition: none; animation: none; }
  .py-ch { animation: none; transform: none; transition: none; }
  .py-title-amp { transition: none; }
  .py-line { animation: none; stroke-dashoffset: 0; }
  .py-line-pulse { display: none; }
  .py-wm-run { animation: none; opacity: 0; }
}
@media (max-width: 900px) {
  /* copy sits below the stage on mobile: fade the lines downward instead of leftward */
  .py-hero-lines {
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 42%, rgba(0,0,0,0.35) 100%);
    mask-image: linear-gradient(180deg, #000 0%, #000 42%, rgba(0,0,0,0.35) 100%);
  }
}

/* ============================================================
   PRODUCT PAGE ADDITIONS (products/*.html)
   ============================================================ */
/* product titles: model on the first line, category on the second — each line never wraps;
   --tvw is sized per page from the longest line so long names simply get smaller */
.py-hero-title.is-product { font-size: clamp(40px, calc(var(--tvw, 11vw) * 0.75), 132px); } /* 25% smaller than the per-page fit */
.py-hero-title.is-product .py-title-line { white-space: nowrap; }
/* category line (second row) 30% smaller than the model line */
.py-hero-title.is-product .py-title-line:nth-child(2) { font-size: 0.7em; }
.py-title-line.is-static { cursor: default; }
.py-title-cat .py-ch { -webkit-text-stroke-width: 1.5px; }
.py-switch.is-series { grid-template-columns: repeat(3, 1fr); max-width: 640px; }
.py-switch.is-series .py-sw-link { grid-template-columns: 56px 1fr; gap: 12px; padding: 10px 12px; min-height: 68px; }
.py-switch.is-series .py-sw-thumb { width: 56px; height: 40px; }
.py-switch.is-series strong { font-size: 18px; line-height: 1; }
.py-switch.is-series .py-sw-text strong { white-space: normal; }
.py-sw-link { text-decoration: none; }
.py-switch.is-variants { max-width: 560px; }
.py-switch.is-variants.has-3 { grid-template-columns: repeat(3, 1fr); max-width: 640px; }
.py-switch.is-variants.has-many { grid-template-columns: repeat(2, 1fr); max-width: 560px; }
.py-switch.has-3 button, .py-switch.has-many button { grid-template-columns: 52px 1fr; gap: 10px; padding: 10px 12px; min-height: 64px; }
.py-switch.has-3 .py-sw-thumb, .py-switch.has-many .py-sw-thumb { width: 52px; height: 36px; }
.py-switch.has-3 strong, .py-switch.has-many strong { font-size: 18px; }
.py-switch.has-3 .py-sw-idx, .py-switch.has-many .py-sw-idx { display: none; }
.py-selector-label { font: 500 10px/1 var(--font-body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-bottom: -18px; }

.py-switch .py-sw-text strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* long guns: content in a single column on top; the product image is an absolutely
   positioned layer centred in the hero grid — above the line-art, below the copy.
   Finishes/series cards and the stat grid sit side by side. Hero ends 10px under the CTA row. */
.py-hero.is-shotgun { min-height: 0; }
/* hero content aligns with the navbar chrome: left edge on the logo, right edge on the Catalogue button
   (.nav-inner runs full width with 18px side padding on these pages) */
main:has(.py-hero.is-shotgun) .py-wrap, main:has(.py-hero.is-catalog) .py-wrap { max-width: none; padding: 0 18px; }
.py-hero.is-shotgun .py-hero-grid { grid-template-columns: 1fr; gap: 0; padding: 24px 0 10px; }
/* copy is a 2-column grid: title + finishes hug the left edge, lede + key specs hug the right edge
   (mirroring the container's left inset), so the centred product image stays clear in between */
.py-hero.is-shotgun .py-hero-copy {
  position: relative; z-index: 3; padding-right: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 48px;
  row-gap: 20px;
  align-items: start;
}
.py-hero.is-shotgun .py-hero-title { grid-column: 1; }
.py-hero.is-shotgun .py-hero-lede { grid-column: 2; justify-self: end; text-align: right; padding-top: 14px; }
/* vertical clearance between the title/lede band and the finishes/specs band — the centred image lives here */
.py-hero.is-shotgun .py-hero-row { grid-column: 1 / -1; margin-top: clamp(180px, 20.8vw, 320px); }
.py-hero.is-shotgun .py-hero-actions { grid-column: 1; }
.py-hero.is-shotgun .py-hero-sub { max-width: 460px; }
.py-hero.is-shotgun .py-hero-desc { max-width: 440px; }
.py-hero-row { display: grid; grid-template-columns: minmax(0, 560px) minmax(0, 520px); gap: 32px; align-items: start; margin-top: 8px; }
.py-hero-finishes { display: flex; flex-direction: column; gap: 10px; }
.py-hero-finishes .py-selector-label { margin-bottom: 0; }
.py-hero.is-shotgun .py-hero-actions { margin-top: 4px; }
.py-hero.is-shotgun .py-stage {
  position: absolute;
  left: 50%; top: var(--stage-top, calc(50% - 32px)); /* js/product.js sets --stage-top to the middle of the image band */
  width: min(82.5%, 1225px); /* +25% */
  height: 44%;
  aspect-ratio: auto;
  transform: translate(-50%, -50%);
  z-index: 1;
  pointer-events: none;
}
.py-hero.is-shotgun .py-stage img { width: 100%; height: 100%; left: 0; max-width: none; object-fit: contain; }
.py-hero.is-shotgun .py-stage-light { inset: 12% 0; }
.py-hero.is-shotgun .py-stage-ring { inset: 4% 8%; }
.py-hero.is-shotgun .py-stage-tag { right: auto; left: 50%; bottom: auto; top: 50%; transform: translate(-50%, 112px); }
/* lede: plain text block — the centred product image stays fully visible behind it */
.py-hero.is-shotgun .py-hero-lede { display: flex; flex-direction: column; gap: 18px; max-width: 480px; }
.py-hero.is-shotgun .py-hero-lede .py-hero-sub,
.py-hero.is-shotgun .py-hero-lede .py-hero-desc { max-width: none; }
/* hero row: finishes and key specs share one card language — same grid, gap, card size */
.py-hero-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); max-width: none; column-gap: 48px; }
.py-hero-finishes { max-width: 560px; }
.py-hero-specs { justify-self: end; width: 100%; max-width: 520px; }
.py-hero-specs { display: flex; flex-direction: column; gap: 10px; }
.py-hero-specs .py-selector-label { margin-bottom: 0; }
.py-hero.is-shotgun .py-switch { max-width: none; }
.py-hero.is-shotgun .py-switch button, .py-hero.is-shotgun .py-switch .py-sw-link { min-height: 68px; padding: 10px 14px 10px 10px; }
/* key specifications: flat label / value pairs, same language as the lineup-card spec lists — no cards, no borders, no fill */
.py-hero.is-shotgun .py-hero-stats {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 16px;
  row-gap: 14px;
  border: 0;
  padding: 0;
  max-width: none;
  background: none;
}
.py-hero.is-shotgun .py-stat {
  justify-content: flex-start;
  gap: 6px;
  min-height: 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}
.py-hero.is-shotgun .py-stat:nth-child(2n) { border-right: 0; }
.py-hero.is-shotgun .py-stat:nth-last-child(-n+2) { border-bottom: 0; }
.py-hero.is-shotgun .py-stat-label { color: var(--secondary); }
.py-hero.is-shotgun .py-stat-value {
  font: 600 clamp(19px, 1.5vw, 23px)/1.1 var(--font-display);
  letter-spacing: -0.005em;
  overflow-wrap: anywhere;
}
/* with 108px thumbnails, three cards per row are too narrow — wrap 3-card selectors to two columns */
.py-hero.is-shotgun .py-switch.is-series, .py-hero.is-shotgun .py-switch.is-variants.has-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: none; }
/* wider thumbnails so long guns show in full inside the finish cards */
.py-hero.is-shotgun .py-switch button, .py-hero.is-shotgun .py-switch .py-sw-link { grid-template-columns: 108px 1fr auto; gap: 12px; }
.py-hero.is-shotgun .py-sw-thumb { width: 108px; height: 44px; }
.py-hero.is-shotgun .py-sw-thumb img { transform: none; object-fit: contain; padding: 3px; }
.py-hero.is-shotgun .py-switch button:hover .py-sw-thumb img, .py-hero.is-shotgun .py-switch .py-sw-link:hover .py-sw-thumb img { transform: scale(1.06); }

/* lede rows mirror the two title lines: subtitle centred on the model line, description bottom-aligned with the category line */
.py-hero.is-shotgun .py-hero-lede { align-self: stretch; display: grid; grid-template-rows: 1fr 0.7fr; gap: 0; padding-top: 0; }
.py-hero.is-shotgun .py-hero-lede .py-hero-sub { align-self: center; margin: 0; }
.py-hero.is-shotgun .py-hero-lede .py-hero-desc { align-self: end; margin: 0; }
/* traced watermark: a short accent dash loops around the outline of each letter */
.py-hero-watermark.is-traced { color: transparent; -webkit-text-stroke: 0; }
.py-wm { position: absolute; left: 0; top: 0; width: 1px; height: 1px; overflow: visible; font: inherit; letter-spacing: inherit; }
.py-wm text { font: inherit; letter-spacing: inherit; fill: none; }
.py-wm-base { stroke: rgba(15, 23, 42, 0.10); stroke-width: 1; }
.py-wm-run {
  stroke: var(--accent);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 110 1500;
  stroke-dashoffset: 0;
  opacity: 0.8;
  animation: py-wm-run 8s linear infinite;
}
@keyframes py-wm-run { to { stroke-dashoffset: -1610; } }
.py-hero.is-shotgun .py-hero-watermark { transform: translateY(-52%); width: 1px; height: 1em; }
/* rifles.html: three model cards in a row */
.py-models-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.py-models-3 .py-model-title h3 { font-size: clamp(30px, 2.6vw, 40px); }
.py-models-3 .py-specs.is-two .py-spec { padding: 11px 14px; }
.py-models-3 .py-specs.is-two .py-spec-value { font-size: 16px; }
.py-models-3 .py-model-foot { flex-direction: column; align-items: flex-start; gap: 6px; }
.py-hero.is-rifles .py-stat-value { transition: opacity 0.25s ease; }
@media (max-width: 1100px) { .py-models-3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 900px) { .py-models-3 { grid-template-columns: 1fr; } }
/* pistols.html: only the active model name is shown — the outgoing letters drop, the incoming ones rise */
.py-hero-title.is-swap { display: grid; }
.py-hero-title.is-swap .py-title-line { grid-area: 1 / 1; cursor: default; }
.py-hero-title.is-swap .py-title-line.is-out, .py-hero-title.is-swap .py-title-line.is-hidden { pointer-events: none; }
.py-hero-title.is-swap .py-title-line.is-hidden .py-ch { animation: none; transform: translateY(115%); }
.py-hero-title.is-swap .py-title-line.is-out .py-ch { animation: py-drop 0.5s cubic-bezier(0.4, 0, 0.6, 1) forwards; animation-delay: calc(var(--j, 0) * 45ms); }
.py-hero-title.is-swap .py-title-line.is-in .py-ch { animation: py-rise 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; animation-delay: calc(var(--j, 0) * 70ms + 140ms); }
@keyframes py-drop { from { transform: translateY(0); } to { transform: translateY(115%); } }
@media (prefers-reduced-motion: reduce) {
  .py-hero-title.is-swap .py-title-line.is-out .py-ch { animation: none; transform: translateY(115%); }
  .py-hero-title.is-swap .py-title-line.is-in .py-ch { animation: none; transform: none; }
}
/* ============================================================
   shotguns.html — series accordion. Seven series stacked as rows;
   exactly one is open and the whole thing fits the first viewport.
   Open row = compact showroom: copy | stage + key specs | model cards.
   ============================================================ */
.ac-page .nav-mobile { display: none; }
main:has(.ac-list) .py-wrap { max-width: none; padding: 0 18px; }
/* rows — the accordion fills the first viewport exactly (nav + 7 rows = 100vh);
   the open row takes the remaining height, so the CTA/footer only appear on scroll */
.ac-list { display: flex; flex-direction: column; height: calc(100vh - var(--nav-height)); min-height: 720px; }
.ac-item { flex: 0 0 auto; display: flex; flex-direction: column; min-height: 0; border-top: 1px solid var(--border); transition: flex-grow 0.55s cubic-bezier(0.2, 0.8, 0.2, 1); }
.ac-item.is-open { flex-grow: 1; }
.ac-item:last-child { border-bottom: 1px solid var(--border); }
.ac-heading { margin: 0; font: inherit; }
.ac-bar {
  width: 100%;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto auto 34px;
  align-items: center;
  gap: 24px;
  min-height: 54px;
  padding: 0 2px;
  background: none; border: 0; cursor: pointer; text-align: left;
  color: var(--fg);
  font-family: inherit;
  transition: color var(--transition), grid-template-columns 0.45s cubic-bezier(0.2, 0.8, 0.2, 1), min-height 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.ac-idx { font: 500 11px/1 var(--font-body); letter-spacing: 0.12em; color: var(--muted); overflow: hidden; transition: color var(--transition), opacity 0.3s ease, width 0.45s cubic-bezier(0.2, 0.8, 0.2, 1), margin 0.45s cubic-bezier(0.2, 0.8, 0.2, 1); }
.ac-name {
  font: 700 clamp(24px, 2vw, 30px)/1 var(--font-display);
  letter-spacing: -0.01em;
  text-transform: uppercase;
  transition: color var(--transition), transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
  transform-origin: left center;
}
.ac-meta { font: 500 11px/1 var(--font-body); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
/* collapsed rows preview their models as small silhouettes */
.ac-thumbs { display: flex; gap: 6px; transition: opacity 0.3s ease; }
.ac-thumbs span { width: 68px; height: 30px; border: 1px solid var(--border); border-radius: 4px; background: var(--surface-raised); overflow: hidden; display: grid; place-items: center; }
.ac-thumbs img { width: 100%; height: 100%; object-fit: contain; padding: 3px; }
.ac-thumbs .ac-more { width: auto; padding: 0 10px; font: 500 11px/1 var(--font-body); color: var(--muted); }
.ac-toggle { width: 34px; height: 34px; border: 1px solid var(--border); border-radius: 50%; display: grid; place-items: center; color: var(--fg); transition: background var(--transition), border-color var(--transition), color var(--transition), transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1); }
.ac-toggle svg { width: 16px; height: 16px; }
.ac-bar:hover .ac-name { color: var(--accent); }
.ac-bar:hover .ac-toggle { border-color: var(--accent); color: var(--accent); }
.ac-item.is-open .ac-bar { cursor: default; }
/* open row: the number column collapses, the bar grows and the series name becomes a large kinetic title on the content edge */
.ac-item.is-open .ac-bar { grid-template-columns: 0px minmax(0, 1fr) auto auto 34px; min-height: 96px; }
.ac-item.is-open .ac-idx { opacity: 0; }
.ac-name { display: inline-flex; overflow: hidden; padding: 0.1em 0.12em 0.12em 0.02em; margin: -0.1em 0 -0.12em -0.02em; transition: color var(--transition), font-size 0.45s cubic-bezier(0.2, 0.8, 0.2, 1), margin-left 0.45s cubic-bezier(0.2, 0.8, 0.2, 1); }
.ac-item.is-open .ac-name { font-size: clamp(57px, 5.2vw, 75px); margin-left: calc(-24px - 0.02em); color: var(--fg); }
.ac-name .py-ch { color: var(--fg); -webkit-text-stroke: 0; background-size: 0% 100%; transform: none; animation: none; transition: color var(--transition); }
.ac-bar:hover .ac-name .py-ch { color: var(--accent); }
.ac-item.is-open .ac-name.is-anim .py-ch { color: transparent; -webkit-text-stroke: 1.5px var(--fg); background-size: 100% 100%; transform: translateY(115%); animation: py-rise 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; animation-delay: calc(var(--i) * 60ms + 60ms); transition: background-size 0.45s cubic-bezier(0.4, 0, 0.2, 1) calc(var(--i) * 55ms + 300ms); }
.ac-item.is-open .ac-bar:hover .ac-name .py-ch { color: transparent; }
.ac-item.is-open .ac-thumbs { opacity: 0; pointer-events: none; }
.ac-item.is-open .ac-toggle { background: var(--fg); border-color: var(--fg); color: #fff; transform: rotate(45deg); }
/* open / close: grid-row 0fr → 1fr keeps the height transition CSS-only */
/* open / close: grid-row 0fr → 1fr keeps the height transition CSS-only; the open panel fills the row */
.ac-panel { flex: 1 1 auto; min-height: 0; display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.55s cubic-bezier(0.2, 0.8, 0.2, 1); }
.ac-item.is-open .ac-panel { grid-template-rows: 1fr; }
.ac-body { position: relative; height: 100%; min-height: 0; overflow: hidden; isolation: isolate; }
.ac-item.is-open .ac-body { overflow: visible; } /* the lifted image may reach into the bar; clipping only matters while collapsing */
.ac-body .py-hero-lines { opacity: 0.7; }
.ac-grid {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2.1fr) minmax(0, 1fr); /* symmetric: the stage column is centred on the page */
  gap: 28px;
  align-items: stretch;
  height: 100%; box-sizing: border-box;
  padding: 8px 0 22px;
  opacity: 0; transform: translateY(10px);
  transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.ac-item.is-open .ac-grid { opacity: 1; transform: none; transition-delay: 0.15s; }
/* left: copy */
.ac-copy { display: flex; flex-direction: column; justify-content: flex-end; gap: 12px; padding-top: 6px; } /* description + button sit at the bottom, aligned with the stat row */
.ac-sub { font: 500 16px/1.45 var(--font-body); color: var(--fg); margin: 0 -56px 0 0; position: relative; z-index: 2; } /* runs a little past its column so it wraps to fewer lines */
.ac-desc { font: 500 13px/1.6 var(--font-body); color: var(--muted); margin: 0; transition: opacity 0.25s ease; position: relative; z-index: 2; }
.ac-desc strong { color: var(--fg); font-weight: 600; }
.ac-actions { display: flex; align-items: center; gap: 20px; margin-top: 4px; padding-top: 12px; white-space: nowrap; }
.ac-actions .btn { flex: 1 1 100%; width: 100%; min-width: 0; justify-content: center; text-align: center; white-space: nowrap; } /* the Details button spans the whole actions row */
.ac-actions .py-textlink { font: 600 12px/1 var(--font-body); letter-spacing: 0.04em; }
/* centre: stage + key specs */
.ac-center { display: flex; flex-direction: column; gap: 12px; min-width: 0; position: relative; z-index: 0; }
.ac-stage { position: relative; flex: 1; min-height: 120px; }
.ac-stage::before { content: ''; position: absolute; inset: 10% 6%; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(255,255,255,0.9), rgba(255,255,255,0) 70%); }
.ac-stage img {
  position: absolute; left: -16.5%; top: -50px; width: 133%; max-width: none; height: 100%; /* lifted 50px into the free space under the bar */ /* much wider than its column (global img max-width cap lifted); anchored to the top of the band, above the low-sitting copy / model blocks */
  object-position: 50% 32%; /* a touch above the centre of the stage band */
  object-fit: contain;
  opacity: 0; transform: scale(0.96);
  filter: drop-shadow(0 24px 30px rgba(15,23,42,0.22));
  transition: opacity 0.45s ease, transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
  pointer-events: none;
}
.ac-stage img.active { opacity: 1; transform: scale(1); }
.ac-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.ac-stats .py-stat { justify-content: center; gap: 5px; min-height: 58px; padding: 9px 14px; background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--radius); }
.ac-stats .py-stat-label { font: 500 10px/1 var(--font-body); letter-spacing: 0.1em; color: var(--secondary); }
.ac-stats .py-stat-value { font: 600 clamp(17px, 1.3vw, 21px)/1.1 var(--font-display); letter-spacing: -0.005em; overflow-wrap: anywhere; }
/* right: model cards (two columns so nine pump models still fit) */
.ac-models { display: flex; flex-direction: column; gap: 8px; min-width: 0; align-self: end; position: relative; z-index: 2; } /* model cards bottom-align with the key-spec row */
.ac-models .py-selector-label { margin-bottom: 0; }
 /* selected-model note: one line right under the series title; the copy block stays at the bottom */
.ac-switch { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; max-width: none; }
.ac-switch button { grid-template-columns: 50px minmax(0, 1fr); gap: 8px; padding: 6px 8px 6px 6px; min-height: 48px; }
.ac-switch button .py-sw-label { display: block; overflow: hidden; text-overflow: ellipsis; font-size: 9.5px; letter-spacing: 0.04em; }
.ac-switch .py-sw-thumb { width: 50px; height: 30px; }
.ac-switch .py-sw-thumb img { transform: none; padding: 3px; }
.ac-switch button:hover .py-sw-thumb img { transform: scale(1.06); }
.ac-switch button strong { font-size: 17px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ac-switch button .py-sw-text { gap: 4px; }
.ac-switch button::after { height: 2px; }
/* the CTA band sits right under the accordion */
main:has(.ac-list) .py-section[data-od-id="cta"] { padding-top: 40px !important; }
@media (max-width: 1100px) {
  .ac-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ac-center { grid-column: 1 / -1; order: -1; }
  .ac-thumbs { display: none; }
}
@media (max-width: 900px) {
  .ac-list { height: auto; min-height: 0; }
  .ac-item.is-open { flex-grow: 0; }
  .ac-body { height: auto; }
  .ac-grid { height: auto; }
  .ac-bar { grid-template-columns: 32px minmax(0, 1fr) auto 34px; gap: 14px; }
  .ac-item.is-open .ac-name { transform: scale(1.15); }
  .ac-grid { grid-template-columns: 1fr; gap: 20px; }
  .ac-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ac-switch { grid-template-columns: 1fr 1fr; }
}
/* subnav: breadcrumb + product jump */
.py-subnav-brand a { color: var(--fg); transition: color var(--transition); }
.py-subnav-brand a:hover { color: var(--accent); }
.py-subnav-tools { display: flex; align-items: center; gap: 16px; }
.py-jump {
  appearance: none; -webkit-appearance: none;
  min-height: 40px; padding: 0 36px 0 14px;
  font: 600 12px/1 'Quicksand', sans-serif; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--fg); background: var(--surface-raised);
  border: 1px solid var(--border); border-radius: var(--radius);
  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='%2300b9f1' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 12px;
  cursor: pointer; transition: border-color var(--transition);
}
.py-jump:hover { border-color: var(--accent); }

/* spec sheet */
.py-sheet { display: grid; grid-template-columns: 5fr 7fr; gap: 40px; align-items: stretch; }
.py-sheet > div { display: flex; flex-direction: column; }
.py-sheet .py-specs { flex: 1; }
/* product viewer: fills the row height; image sits 10px inside the frame */
.py-sheet .py-model-visual { aspect-ratio: auto; height: 100%; min-height: 360px; }
.py-sheet .py-model-visual img { inset: 10px; width: calc(100% - 20px); height: calc(100% - 20px); object-fit: contain; }
.py-sheet .py-specs.is-two .py-spec { background: var(--surface); }
.py-sheet .py-model { cursor: default; }
.py-sheet .py-model:hover { transform: none; }
.py-specs.is-two { grid-template-columns: repeat(2, 1fr); }
.py-specs.is-two .py-spec:nth-child(4n) { border-right: 1px solid var(--border); }
.py-specs.is-two .py-spec:nth-child(2n) { border-right: 0; }
.py-specs.is-two .py-spec:nth-last-child(-n+4) { border-bottom: 1px solid var(--border); }
.py-specs.is-two .py-spec:nth-last-child(-n+2) { border-bottom: 0; }
.py-specs.is-two .py-spec { padding: 14px 18px; }
.py-specs.is-two .py-spec-value { font-size: 19px; }
/* product spec sheet: flat label / value pairs like the rifles.html lineup cards — the 5fr / 7fr grid, the viewer height
   and the two-column rhythm stay exactly as they are; only the frame, cell borders and fills go */
.py-sheet .py-specs.is-two { border: 0; border-radius: 0; background: transparent; overflow: visible; column-gap: 16px; row-gap: 14px; }
.py-sheet .py-specs.is-two .py-spec:nth-child(n) { border: 0; background: transparent; padding: 0 0 0 4px; }
.py-sheet .py-specs.is-two .py-spec-value { font-size: 17px; }
.py-sheet-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 20px; }
.py-sheet-foot .py-index { padding: 0; }

/* features visual (no callouts on product pages) */
.py-eng-visual.is-product { aspect-ratio: 4/3; }
.py-eng-visual.is-product img { transform: none; max-height: 100%; object-fit: contain; }

/* series cards */
/* series cards: the product fills the image box edge to edge */
.py-series-grid .product-card-image { aspect-ratio: 16/9; padding: 0; }
.py-series-grid .product-card-image img { transform: none; padding: 3% 4%; }
.py-series-grid .product-card:hover .product-card-image img { transform: scale(1.04); }
.py-series-grid .product-card-body .spec { margin-top: 2px; }
/* cards carry an inline SVG arrow — suppress the design-system's text arrow so it isn't doubled */
.py-series-grid .product-card-body .link::after { content: none; }
.py-finish .product-card-body .link::after { content: none; } /* finish cards carry an inline SVG arrow too */
.py-series-grid .product-card-body .link svg { width: 12px; height: 12px; transition: transform var(--transition); }
.py-series-grid .product-card-body .link:hover svg { transform: translateX(4px); }

@media (max-width: 1100px) {
  .py-sheet { grid-template-columns: 1fr 1fr; gap: 28px; }
}
@media (max-width: 900px) {
  .py-sheet { grid-template-columns: 1fr; }
  .py-hero.is-shotgun .py-hero-grid { grid-template-columns: 1fr; }
  .py-hero.is-shotgun .py-hero-copy { padding-right: 0; }
  .py-hero.is-shotgun .py-stage { position: static; transform: none; width: 100%; height: auto; aspect-ratio: 16/9; pointer-events: auto; }
  .py-hero.is-shotgun .py-stage-tag { right: 6%; left: auto; top: auto; bottom: 8%; transform: none; }
  .py-hero.is-shotgun .py-hero-row { margin-top: 0; }
  .py-hero-row { grid-template-columns: 1fr; gap: 20px; }
  .py-hero.is-shotgun .py-hero-copy { grid-template-columns: 1fr; row-gap: 20px; }
  .py-hero.is-shotgun .py-hero-lede { grid-column: 1; justify-self: start; text-align: left; padding-top: 0; }
  .py-hero-finishes { max-width: none; }
  .py-hero-specs { justify-self: start; max-width: none; }
  .py-hero.is-shotgun .py-stage img { width: 100%; left: 0; }
  .py-hero.is-shotgun .py-hero-stats { max-width: none; }
  .py-switch.is-series, .py-switch.is-variants.has-3, .py-switch.is-variants.has-many { grid-template-columns: 1fr 1fr; max-width: none; }
  .py-subnav-tools { width: 100%; justify-content: space-between; }
  .py-jump { min-height: 44px; }
  .py-subnav-inner { height: auto; padding: 8px 0; flex-wrap: wrap; gap: 8px; }
}

/* ============================================================
   corporate.html — one-screen company profile in the showcase language.
   nav + this screen = 100vh; the footer is the only thing below the fold.
   Rows: title + lead | video + story | mission / vision cards.
   ============================================================ */
main:has(.co-hero) .py-wrap { max-width: none; padding: 0 18px; }
.co-page .nav-mobile { display: none; }
.co-hero { min-height: 0; display: block; padding: 0; border-bottom: 0; }
main:has(.co-hero) .py-wrap.co-screen {
  position: relative; z-index: 2;
  height: calc(100vh - var(--nav-height)); min-height: 760px;
  box-sizing: border-box; padding: 22px 18px 22px;
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 20px;
}
/* row 1: kinetic title left, lead right */
.co-top { display: grid; grid-template-columns: 1fr; align-items: end; }
.co-hero-copy { display: flex; flex-direction: column; gap: 10px; }
.co-title { font-size: clamp(52px, 6.2vw, 92px); line-height: 0.88; }
.co-story .kicker { margin-bottom: 2px; }
.co-story .py-hero-sub { font: 500 14px/1.6 var(--font-body); color: var(--fg); max-width: none; margin: 0 0 6px; } /* lead paragraph, then the story label and the rest */
/* row 2: framed video fills the row; story columns beside it */
.co-mid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 28px; min-height: 0; }
.co-video { position: relative; min-height: 0; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius); background: var(--dk-bg, #0b1220); }
.co-video video { width: 100%; height: 100%; object-fit: cover; display: block; }
.co-video .py-dim-corner { z-index: 2; }
.co-story { display: flex; flex-direction: column; justify-content: center; gap: 12px; min-height: 0; padding: 4px 0; }
.co-story .py-selector-label { margin-bottom: 2px; }
.co-story p { margin: 0; color: var(--muted); font: 400 13.5px/1.55 var(--font-body); }
/* row 3: mission / vision cards */
.co-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.co-card { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 20px 26px 22px; background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--radius); }
.co-card .heading-3 { margin: 0; font-size: clamp(22px, 1.8vw, 28px); }
.co-card p { margin: 0; color: var(--muted); font: 400 14px/1.55 var(--font-body); }
.co-card-no { position: absolute; top: 20px; right: 22px; font: 500 11px/1 var(--font-body); letter-spacing: 0.12em; color: var(--muted); }
@media (max-width: 900px) {
  main:has(.co-hero) .py-wrap.co-screen { height: auto; min-height: 0; padding: 20px 18px 28px; gap: 20px; }
  .co-top, .co-mid, .co-cards { grid-template-columns: 1fr; gap: 16px; }
 .co-video { aspect-ratio: 16 / 9; }
  .co-card { padding: 20px; }
}
/* ============================================================
   contact.html — one-screen contact in the showcase language.
   nav + this screen = 100vh; the footer is the only thing below the fold.
   Left: intro, contact details, socials, framed map. Right: inquiry form card.
   ============================================================ */
main:has(.ct-hero) .py-wrap { max-width: none; padding: 0 18px; }
.ct-page .nav-mobile { display: none; }
.ct-hero { min-height: 0; display: block; padding: 0; border-bottom: 0; }
main:has(.ct-hero) .py-wrap.ct-screen {
  position: relative; z-index: 2;
  height: calc(100vh - var(--nav-height)); min-height: 760px;
  box-sizing: border-box; padding: 22px 18px 22px;
  display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 20px;
}
.ct-top { display: flex; flex-direction: column; gap: 10px; }
.ct-title { font-size: clamp(52px, 6.2vw, 92px); line-height: 0.88; }
.ct-mid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: 28px; min-height: 0; }
/* left column */
.ct-info { display: flex; flex-direction: column; gap: 14px; min-height: 0; }
.ct-intro { margin: 0; font: 500 15px/1.55 var(--font-body); color: var(--fg); max-width: 520px; }
.ct-rows { display: flex; flex-direction: column; }
.ct-row { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 16px; align-items: baseline; padding: 11px 0; border-top: 1px solid var(--border); }
.ct-row:last-child { border-bottom: 1px solid var(--border); }
.ct-row-label { font: 500 10px/1.4 var(--font-body); letter-spacing: 0.12em; text-transform: uppercase; color: var(--secondary); }
.ct-row-value { font: 500 14px/1.5 var(--font-body); color: var(--fg); display: flex; flex-direction: column; gap: 2px; }
.ct-row-value a { color: var(--fg); text-decoration: none; transition: color var(--transition); }
.ct-row-value a:hover { color: var(--accent); }
.ct-meta { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.ct-social { display: flex; gap: 8px; }
.ct-social a { width: 38px; height: 38px; border: 1px solid var(--border); border-radius: 50%; display: grid; place-items: center; color: var(--fg); background: var(--surface-raised); transition: border-color var(--transition), color var(--transition), transform var(--transition); }
.ct-social a svg { width: 15px; height: 15px; fill: currentColor; }
.ct-social a:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-2px); }
.ct-social a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ct-meta .py-textlink { font: 600 12px/1 var(--font-body); letter-spacing: 0.04em; }
.ct-map { position: relative; flex: 1; min-height: 160px; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.ct-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.ct-map .py-dim-corner { z-index: 2; }
/* right column: form card */
.ct-form { display: flex; flex-direction: column; gap: 14px; min-height: 0; padding: 24px 28px 26px; background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--radius); }
.ct-form-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.ct-form-head .heading-3 { margin: 0; font-size: clamp(24px, 2vw, 30px); }
.ct-form form { display: flex; flex-direction: column; gap: 14px; flex: 1; min-height: 0; }
.ct-form .ct-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ct-form .form-group { display: flex; flex-direction: column; gap: 6px; }
.ct-form .form-label { font: 500 10px/1.4 var(--font-body); letter-spacing: 0.12em; text-transform: uppercase; color: var(--secondary); }
.ct-form .form-input, .ct-form .form-textarea { width: 100%; box-sizing: border-box; font: 400 15px/1.4 var(--font-body); color: var(--fg); background: var(--surface); border: 1px solid var(--border); border-radius: 4px; padding: 12px 14px; transition: border-color var(--transition), box-shadow var(--transition); }
.ct-form .form-input::placeholder, .ct-form .form-textarea::placeholder { color: var(--muted); }
.ct-form .form-input:focus, .ct-form .form-textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(0,185,241,0.18); }
.ct-form .ct-message { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.ct-form .form-textarea { flex: 1; min-height: 96px; resize: vertical; }
.ct-form .form-checkbox { display: flex; align-items: flex-start; gap: 10px; font: 400 13px/1.5 var(--font-body); color: var(--muted); cursor: pointer; }
.ct-form .form-checkbox input { margin-top: 3px; accent-color: var(--accent); }
.ct-form .ct-actions { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.ct-form .ct-note { font: 400 12px/1.4 var(--font-body); color: var(--muted); }
@media (max-width: 900px) {
  main:has(.ct-hero) .py-wrap.ct-screen { height: auto; min-height: 0; padding: 20px 18px 28px; }
  .ct-mid { grid-template-columns: 1fr; gap: 20px; }
  .ct-map { aspect-ratio: 16 / 9; flex: none; }
  .ct-form { padding: 20px; }
  .ct-form .ct-grid { grid-template-columns: 1fr; }
}
/* ============================================================
   index.html — home in the showcase language. Flow kept from the
   original: hero (CR9 finish cycle) → ticker → product lines →
   brand story → in action → IWA gallery → distributor updates (ink band).
   ============================================================ */
main:has(.hm-hero) .py-wrap { max-width: none; padding: 0 18px; }
.hm-page .nav-mobile { display: none; }
/* hero */
.hm-hero { min-height: 0; border-bottom: 0; } /* compact: the Product Lines head shows inside the first viewport */
.hm-hero .py-hero-grid { grid-template-columns: 5fr 7fr; padding: 22px 0 26px; }
.hm-hero .py-hero-copy { gap: 16px; position: relative; z-index: 3; }
.hm-title { font-size: clamp(40px, 4.3vw, 64px); line-height: 0.92; letter-spacing: -0.03em; }
.hm-title .py-title-line { cursor: default; }
.hm-title .is-accent .py-ch { -webkit-text-stroke-color: var(--accent); background-image: linear-gradient(var(--accent), var(--accent)); }
.hm-hero .py-hero-sub { max-width: 560px; }
.hm-hero .py-hero-stats { max-width: 600px; }
.hm-hero .py-hero-grid { grid-template-columns: minmax(0, 46%) 1fr; }
/* finish belt: the nine CR9 finishes glide from the right edge of the screen towards the centre,
   fading (and blurring) out as they reach the middle; the far right edge softens the same way */
.hm-belt { position: absolute; left: calc(50% - 100px); right: 0; top: -10%; bottom: -10%; z-index: 1; overflow: hidden; pointer-events: none; /* starts 100px left of centre; never pauses */
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 26%, #000 88%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 26%, #000 88%, transparent 100%); }
.hm-belt::before, .hm-belt::after { content: ''; position: absolute; top: 0; bottom: 0; width: 26%; z-index: 2; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.hm-belt::before { left: 0; -webkit-mask-image: linear-gradient(90deg, #000 20%, transparent 100%); mask-image: linear-gradient(90deg, #000 20%, transparent 100%); }
.hm-belt::after { right: 0; width: 14%; -webkit-mask-image: linear-gradient(270deg, #000 10%, transparent 100%); mask-image: linear-gradient(270deg, #000 10%, transparent 100%); }
.hm-belt-track { position: absolute; top: 50%; left: 0; display: flex; align-items: center; gap: clamp(32px, 4vw, 64px); width: max-content; transform: translateY(-50%); animation: hm-belt 70s linear infinite; will-change: transform; }
.hm-belt-item { flex: 0 0 auto; height: clamp(358px, 55vh, 618px); display: flex; align-items: center; } /* +30% then +25% */
.hm-belt-item img { height: 100%; width: auto; max-width: none; display: block; filter: drop-shadow(0 30px 40px rgba(15,23,42,0.28)); }
@keyframes hm-belt { from { transform: translate(0, -50%); } to { transform: translate(-50%, -50%); } }
@media (prefers-reduced-motion: reduce) { .hm-belt-track { animation: none; } }
/* ticker */
.hm-ticker { overflow: hidden; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--surface); }
.hm-ticker-track { display: flex; gap: 0; width: max-content; animation: hm-ticker 48s linear infinite; }
.hm-ticker-item { display: inline-flex; align-items: center; gap: 18px; padding: 12px 24px; font: 500 12px/1 var(--font-body); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.hm-ticker-item::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
@keyframes hm-ticker { to { transform: translateX(-50%); } }
.hm-ticker:hover .hm-ticker-track { animation-play-state: paused; }
/* product lines — two category tabs (shotguns / rifles): monochrome at rest, colour on hover */
main:has(.hm-hero) #products.py-section { padding-top: 26px; padding-bottom: 40px; }
/* first screen = nav + hero + product cards + ticker; the ticker is pinned to the bottom edge of the viewport */
.hm-first { display: flex; flex-direction: column; min-height: calc(100vh - var(--nav-height)); }
.hm-first .hm-ticker { margin-top: auto; }
.hm-first #products.py-section { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; } /* cards float centred between hero and ticker */
.hm-lines { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.hm-line { position: relative; display: grid; grid-template-columns: minmax(200px, 52%) minmax(0, 1fr); /* both category tabs share the same stage : info ratio */ background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; text-decoration: none; color: var(--muted); min-height: 200px; transition: border-color var(--transition), color var(--transition), transform var(--transition), box-shadow var(--transition); }
.hm-line:hover { color: var(--fg); border-color: var(--accent); transform: translateY(-3px); box-shadow: 0 18px 40px rgba(15,23,42,0.12); }
.hm-line:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.hm-line-visual { position: relative; background: var(--surface); overflow: hidden; border-right: 1px solid var(--border); transition: background var(--transition); }
.hm-line:hover .hm-line-visual { background: radial-gradient(ellipse 70% 60% at 50% 55%, #ffffff 0%, var(--surface) 60%, var(--bg) 100%); }
.hm-line-visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 1% 2%; filter: grayscale(1); opacity: 0.55; transition: filter 0.45s ease, opacity 0.45s ease, transform 0.6s cubic-bezier(0.23, 1, 0.32, 1); }
.hm-line:hover .hm-line-visual img { filter: none; opacity: 1; transform: scale(1.06); }
.hm-line-no { position: absolute; top: 12px; left: 14px; font: 500 10px/1 var(--font-body); letter-spacing: 0.12em; color: var(--muted); }
.hm-line-body { display: flex; flex-direction: column; gap: 8px; padding: 22px 26px 22px; min-width: 0; }
.hm-line-body .kicker { font-size: 10px; letter-spacing: 0.12em; color: var(--muted); transition: color var(--transition); }
.hm-line:hover .hm-line-body .kicker { color: var(--accent); }
.hm-line-body h3 { margin: 0; font: 700 clamp(30px, 2.6vw, 40px)/1 var(--font-display); letter-spacing: -0.01em; text-transform: uppercase; color: var(--muted); transition: color var(--transition); }
.hm-line:hover .hm-line-body h3 { color: var(--fg); }
.hm-line-body p { margin: 0; color: var(--muted); font: 400 14px/1.55 var(--font-body); }
.hm-line-cta { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 10px; font: 600 11px/1 var(--font-body); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); transition: color var(--transition); }
.hm-line:hover .hm-line-cta { color: var(--accent); }
.hm-line-cta svg { width: 12px; height: 12px; transition: transform var(--transition); }
.hm-line:hover .hm-line-cta svg { transform: translateX(4px); }/* brand story */
.hm-story { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 40px; align-items: stretch; }
.hm-story-video { position: relative; min-height: 360px; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius); background: var(--dk-bg); }
.hm-story-video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hm-story-video .py-dim-corner { z-index: 2; }
.hm-story-copy { display: flex; flex-direction: column; gap: 14px; justify-content: center; }
.hm-story-copy p { margin: 0; color: var(--muted); font: 400 15px/1.65 var(--font-body); }
.hm-story-copy p:first-of-type { color: var(--fg); font-weight: 500; }
/* in action: youtube cards */
.hm-videos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.hm-yt { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius); background: var(--dk-bg) center / cover no-repeat; cursor: pointer; }
.hm-yt::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,18,32,0) 40%, rgba(11,18,32,0.55) 100%); transition: opacity var(--transition); }
.hm-yt:hover::after { opacity: 0.6; }
.hm-yt-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2; width: 72px; height: 72px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.7); background: rgba(11,18,32,0.45); display: grid; place-items: center; color: #fff; transition: background var(--transition), border-color var(--transition), transform var(--transition); }
.hm-yt:hover .hm-yt-play { background: var(--accent); border-color: var(--accent); transform: translate(-50%, -50%) scale(1.06); }
.hm-yt-play svg { width: 26px; height: 26px; margin-left: 3px; }
.hm-yt-label { position: absolute; left: 18px; bottom: 16px; z-index: 2; font: 500 11px/1 var(--font-body); letter-spacing: 0.12em; text-transform: uppercase; color: #fff; }
.hm-yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 3; }
.hm-yt .py-dim-corner { z-index: 2; }
/* IWA gallery */
.hm-gallery { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 4fr); gap: 16px; } /* 3:4 split — the 4×3 wall of 4:3 thumbs fills the viewer height exactly; extra rows scroll */
.hm-gallery-main { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius); background: var(--dk-bg); }
.hm-gallery-main img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; image-orientation: from-image; transition: opacity 0.25s ease; } /* the two landscape shots letterbox on the ink surface */
.hm-gallery-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--border); background: rgba(255,255,255,0.92); color: var(--fg); display: grid; place-items: center; cursor: pointer; transition: background var(--transition), color var(--transition), border-color var(--transition); }
.hm-gallery-arrow:hover { background: var(--fg); color: #fff; border-color: var(--fg); }
.hm-gallery-arrow:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.hm-gallery-arrow svg { width: 18px; height: 18px; }
.hm-gallery-arrow.prev { left: 16px; }
.hm-gallery-arrow.next { right: 16px; }
.hm-gallery-counter { position: absolute; right: 16px; top: 14px; z-index: 2; padding: 8px 12px; background: rgba(255,255,255,0.92); border: 1px solid var(--border); border-radius: var(--radius); font: 500 11px/1 var(--font-body); letter-spacing: 0.1em; color: var(--fg); }
.hm-gallery-side { position: relative; min-height: 0; } /* takes its height from the main image; thumbs scroll inside (two rows visible) */
.hm-gallery-thumbs { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: calc((100% - 16px) / 3); align-content: start; gap: 8px; overflow-y: auto; scrollbar-width: thin; scrollbar-gutter: stable; }
.hm-thumb { position: relative; min-height: 0; border: 1px solid var(--border); border-radius: 4px; overflow: hidden; background: var(--surface); cursor: pointer; padding: 0; transition: border-color var(--transition); }
.hm-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0.8; transition: opacity var(--transition), transform 0.5s cubic-bezier(0.23, 1, 0.32, 1); }
.hm-thumb:hover img, .hm-thumb.active img { opacity: 1; }
.hm-thumb.active { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.hm-thumb:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* distributor updates — the ink band carries the newsletter form */
.hm-nl { display: flex; gap: 8px; align-items: stretch; flex-wrap: wrap; }
.hm-nl input { min-width: 280px; padding: 0 16px; min-height: 48px; font: 400 15px/1 var(--font-body); color: #fff; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.22); border-radius: 4px; transition: border-color var(--transition), box-shadow var(--transition); }
.hm-nl input::placeholder { color: rgba(230,237,243,0.5); }
.hm-nl input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(0,185,241,0.22); }
.hm-nl-note { display: block; margin-top: 12px; font: 400 12px/1.4 var(--font-body); color: var(--dk-muted); }
@media (max-width: 1100px) {
  .hm-gallery { grid-template-columns: 1fr; }
  .hm-gallery-side { height: 72px; }
  .hm-gallery-thumbs { grid-template-columns: repeat(7, minmax(0, 1fr)); grid-auto-rows: 100%; overflow: hidden; }
}
@media (max-width: 900px) {
  .hm-hero { min-height: 0; }
  .hm-hero .py-hero-grid { grid-template-columns: 1fr; padding: 16px 0 28px; }
  .hm-belt { position: relative; left: 0; height: 240px; margin-top: 8px; }
  .hm-belt-item { height: 200px; }
  .hm-lines, .hm-story, .hm-videos { grid-template-columns: 1fr; }
  .hm-story-video { min-height: 0; aspect-ratio: 16 / 9; }
  .hm-gallery-side { height: 64px; }
  .hm-gallery-thumbs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .hm-nl input { min-width: 0; flex: 1; }
}

/* rifles.html lineup cards: same flat spec grid as the pistols cards — no box, no rules, two columns */
.py-models-3 .py-specs.is-two { border: 0; border-radius: 0; background: transparent; overflow: visible; column-gap: 16px; row-gap: 14px; }
.py-models-3 .py-specs.is-two .py-spec { border: 0; background: transparent; padding: 0; }
.py-models-3 .py-specs.is-two .py-spec-value { font-size: 17px; }