/* ============================================================
   ERGÖK — INNER PAGES  ("Cryo-Industrial")
   Loads LAST. See public/css/theme.css for the token contract and
   DESIGN.md §6 for the motion runtime API this markup codes against.

   Scope: products index + detail, references, catalog, contact,
   quote wizard, CMS pages, notice/error panels.

   Rules observed here:
   - Tokens are consumed, never redefined globally. The only local
     remaps are on decorative layers that sit on a permanently
     inverted (dark) surface — flagged inline where they happen.
   - Every override matches the original selector's specificity;
     this file loads last, so equal specificity already wins.
   - No `!important`.
   ============================================================ */

/* ------------------------------------------------------------
   1. SHARED PAGE HERO
   Opens every inner page: steel ground, engineering grid, ambient
   drift glow, grain, and a breadcrumb that reads as a component.
   ------------------------------------------------------------ */
.page-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(4.25rem, 7vw, 7rem) 0 clamp(3rem, 4.5vw, 4.5rem);
  background: var(--grad-steel);
  border-bottom: 0;
  color: var(--hero-ink);
}

/* Left precision rail — replaces the flat 4px accent bar. */
.page-hero::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  height: auto;
  z-index: 4;
  background: linear-gradient(180deg, var(--brand-500) 0%, rgba(0, 174, 239, 0) 72%);
}

/* Bottom gradient hairline. */
.page-hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  z-index: 4;
  background: var(--grad-hairline);
}

.page-hero-photo,
.page-hero-grid,
.page-hero-glow,
.page-hero-grain {
  position: absolute;
  inset: 0;
  display: block;
  pointer-events: none;
}

.page-hero-photo {
  z-index: 0;
}

/* The photo layer drifts with the scroll, so it needs slack above and
   below the hero box — at inset:0 the translate would expose its edge.
   Parallax is desktop-only (DESIGN.md §5), so the slack is too. */
@media (min-width: 768px) {
  .page-hero-photo[data-parallax] {
    inset: -15% 0;
  }
}

.page-hero-photo picture,
.page-hero-photo img {
  display: block;
  width: 100%;
  height: 100%;
}

.page-hero-photo img {
  object-fit: cover;
  object-position: center 40%;
  opacity: 0.5;
  filter: grayscale(0.3) contrast(1.05);
}

.page-hero-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--hero-scrim);
}

/* The grid layer sits on a permanently dark ground, so the hairline
   token is remapped locally to its inverted value. */
.page-hero-grid {
  --line-soft: rgba(255, 255, 255, 0.085);
  z-index: 1;
  opacity: 0.9;
}

.page-hero-glow {
  z-index: 1;
  background:
    radial-gradient(ellipse 46% 62% at 82% 8%, var(--edge-glow), transparent 66%),
    radial-gradient(ellipse 38% 54% at 6% 96%, rgba(0, 120, 170, 0.3), transparent 72%);
  filter: blur(8px);
}

.page-hero-grain {
  z-index: 2;
}

.page-hero-inner {
  position: relative;
  z-index: 3;
}

.page-hero h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  line-height: 0.98;
  font-weight: 800;
  letter-spacing: var(--track-display);
  text-transform: none;
  color: var(--hero-ink);
  max-width: 20ch;
}

.page-hero p {
  margin: 1rem 0 0;
  color: var(--hero-muted);
  max-width: 58ch;
  font-size: var(--fs-lead);
  line-height: 1.72;
}

.page-hero .eyebrow {
  margin: 0 0 0.9rem;
  color: var(--brand-500);
}

.page-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1.6rem;
}

.page-hero-metric {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.85rem;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.05);
  color: var(--hero-ink);
  font-family: var(--font-display);
  font-size: var(--fs-micro);
  font-weight: 800;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  line-height: 1;
}


/* Host for .anim-pulse-ring: the expanding ring is drawn from
   currentColor by motion.css, so the dot only has to be round,
   positioned and cyan. */
.page-hero-dot {
  position: relative;
  flex: none;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--brand-400);
  color: var(--brand-400);
}

/* Product hero carries the product photograph. */
.page-hero--product h1 {
  max-width: 16ch;
}

/* --- Breadcrumb as a precision component --- */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem;
  width: fit-content;
  max-width: 100%;
  margin: 0 0 1.5rem;
  padding: 0.5rem 0.85rem;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.05);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--hero-muted);
  font-family: var(--font-display);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  line-height: 1;
}

.breadcrumb a {
  color: var(--hero-muted);
  transition: color var(--dur-2) var(--ease-out);
}

.breadcrumb a:hover,
.breadcrumb a:focus-visible {
  color: var(--brand-500);
}

.breadcrumb-sep {
  flex: none;
  width: 5px;
  height: 5px;
  background: currentColor;
  opacity: 0.5;
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

.breadcrumb-current {
  color: var(--hero-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 26ch;
}

/* ------------------------------------------------------------
   2. FILTERS — precision segmented control
   Used by the products index and the reference sector tabs. The
   links keep their href/query behaviour untouched.
   ------------------------------------------------------------ */
.filter-bar {
  position: relative;
  margin: 0 0 clamp(1.75rem, 3vw, 2.5rem);
}

.filters,
.ref-tabs {
  display: inline-flex;
  flex-wrap: nowrap;
  gap: 0;
  max-width: 100%;
  margin: 0;
  padding: 5px;
  overflow-x: auto;
  overflow-y: hidden;
  background: var(--surface-sunken);
  border: 1px solid var(--line-soft);
  box-shadow: var(--shadow-inset-top);
  scrollbar-width: thin;
}

.filter-btn,
.ref-tab {
  position: relative;
  flex: 0 0 auto;
  padding: 0.7rem 1.15rem;
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 800;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  line-height: 1.1;
  white-space: nowrap;
  transition:
    color var(--dur-2) var(--ease-out),
    background var(--dur-2) var(--ease-out),
    box-shadow var(--dur-3) var(--ease-out);
}

.filter-btn:focus-visible,
.ref-tab:focus-visible {
  outline-offset: -3px;
}

/* Hover first, then the active pill, so a hovered active tab stays filled. */
.filter-btn:hover,
.ref-tab:hover {
  border-color: transparent;
  color: var(--text);
  background: var(--surface-raised);
}

.filter-btn.is-active,
.ref-tab.is-active {
  border-color: transparent;
  color: var(--steel-900);
  background: var(--grad-brand-deep);
  box-shadow: var(--shadow-sm2);
}

html[data-theme="dark"] .filter-btn:hover,
html[data-theme="dark"] .ref-tab:hover {
  color: var(--text);
}

html[data-theme="dark"] .filter-btn.is-active,
html[data-theme="dark"] .ref-tab.is-active {
  color: var(--steel-900);
}

/* ------------------------------------------------------------
   3. PRODUCTS — index card grid
   ------------------------------------------------------------ */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
  gap: clamp(1rem, 1.8vw, 1.6rem);
}

.product-card {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--surface-raised);
  border: 1px solid var(--line-soft);
  box-shadow: var(--shadow-sm2);
  transition:
    transform var(--dur-3) var(--ease-out),
    box-shadow var(--dur-3) var(--ease-out),
    border-color var(--dur-2) var(--ease-out);
}

.product-card:hover,
.product-card:focus-visible {
  transform: translateY(-6px);
  border-color: var(--edge-glow);
  box-shadow: var(--shadow-lg);
}

/* The shared cursor halo (motion.css `.anim-cursor-glow`) paints under
   the card content; these boxes are small, so the radius is pulled in. */
.product-card {
  --glow-size: 15rem;
  --glow-strength: 0.5;
}

.ref-card {
  --glow-size: 11rem;
  --glow-strength: 0.45;
}

.doc-card {
  --glow-size: 26rem;
  --glow-strength: 0.42;
}

.contact-card {
  --glow-size: 22rem;
  --glow-strength: 0.38;
}

/* Gradient edge that draws in on hover. */
.product-card::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  z-index: 3;
  height: 3px;
  background: var(--grad-brand);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-3) var(--ease-out);
}

.product-card:hover::after,
.product-card:focus-visible::after {
  transform: scaleX(1);
}

.product-card-media {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--surface-sunken);
}

.product-card-media picture {
  display: block;
  width: 100%;
  height: 100%;
}

.product-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--surface-sunken);
  transition: transform var(--dur-5) var(--ease-out);
}

.product-card:hover .product-card-media img,
.product-card:focus-visible .product-card-media img {
  transform: scale(1.08);
}

.product-card-media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(8, 14, 20, 0) 45%, rgba(8, 14, 20, 0.6) 100%);
  opacity: 0.8;
  transition: opacity var(--dur-3) var(--ease-out);
}

.product-card:hover .product-card-media::after {
  opacity: 0.35;
}

.product-card-tag {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 2;
  padding: 0.45rem 0.75rem;
  background: var(--surface-glass-strong);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--text);
  font-family: var(--font-display);
  font-size: var(--fs-micro);
  font-weight: 800;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  line-height: 1;
}

.product-card-body {
  flex: 1;
  display: grid;
  gap: 0.5rem;
  align-content: start;
  padding: 1.3rem 1.35rem 1.5rem;
  border-top: 1px solid var(--line-soft);
}

.product-card .model {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-micro);
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: var(--track-wide);
}

.product-card .model-key {
  color: var(--muted);
  font-weight: 700;
}

.product-card .model-value {
  color: var(--accent-ink);
  font-weight: 800;
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
}

.product-card h3 {
  margin: 0.1rem 0 0;
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  line-height: 1.18;
  font-weight: 800;
  letter-spacing: var(--track-tight);
  text-transform: none;
  color: var(--text);
}

.product-card p {
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-sm);
  line-height: 1.62;
}

.product-card .more {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 0.6rem;
  color: var(--accent-ink);
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
}

.product-card .more::after {
  content: "→";
  transition: transform var(--dur-3) var(--ease-spring);
}

.product-card:hover .more {
  color: var(--accent-ink);
}

.product-card:hover .more::after {
  transform: translateX(5px);
}

/* ------------------------------------------------------------
   4. PRODUCT DETAIL — split layout, sticky summary, spec table
   ------------------------------------------------------------ */
.product-detail {
  display: grid;
  grid-template-columns: minmax(0, 1.32fr) minmax(0, 0.88fr);
  gap: clamp(1.5rem, 3vw, 2.75rem);
  align-items: start;
}

.product-detail-main {
  display: grid;
  gap: clamp(1.75rem, 3vw, 2.75rem);
  min-width: 0;
}

.product-figure {
  position: relative;
  margin: 0;
  overflow: hidden;
  background: var(--surface-sunken);
  border: 1px solid var(--line-soft);
  box-shadow: var(--shadow-md);
}

.product-figure-inner {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  --scan-duration: 8.5s;
}

/* .anim-scan paints through ::after — keep the sweep above the photo. */
.product-figure-inner::after {
  z-index: 2;
}

.product-figure picture {
  display: block;
  width: 100%;
  height: 100%;
}

.product-figure img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-5) var(--ease-out);
}

.product-figure:hover img {
  transform: scale(1.1);
}

.product-figure-badge {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--line-soft);
  background: var(--surface-glass-strong);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--accent-ink);
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity var(--dur-3) var(--ease-out),
    transform var(--dur-3) var(--ease-out);
}

.product-figure:hover .product-figure-badge {
  opacity: 1;
  transform: none;
}

.product-figure-badge svg {
  width: 1.15rem;
  height: 1.15rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.spec-block {
  display: grid;
  gap: 1.1rem;
  min-width: 0;
}

.spec-heading {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  line-height: 1.28;
  font-weight: 650;
  letter-spacing: var(--track-tight);
  text-transform: none;
  color: var(--text);
}

.table-scroll {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.spec-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface-raised);
  border: 1px solid var(--line-soft);
  box-shadow: var(--shadow-sm2);
  font-size: var(--fs-sm);
}

.spec-table th,
.spec-table td {
  padding: 0.95rem 1.15rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--line-soft);
}

.spec-table tr:last-child th,
.spec-table tr:last-child td {
  border-bottom: 0;
}

.spec-table th {
  width: 32%;
  border-right: 1px solid var(--line-soft);
  color: var(--muted);
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  line-height: 1.35;
}

.spec-table td {
  color: var(--text);
  line-height: 1.6;
  font-variant-numeric: tabular-nums;
}

.spec-table tr {
  transition: background var(--dur-2) var(--ease-out);
}

.spec-table tr:hover {
  background: var(--accent-soft);
}

.spec-index {
  color: var(--accent-ink);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.08em;
}

/* --- Sticky summary panel --- */
.product-summary {
  align-self: start;
  min-width: 0;
}

.product-summary-panel {
  position: sticky;
  top: calc(var(--header-h) + 1.25rem);
  display: grid;
  gap: 0.85rem;
  align-content: start;
  max-height: calc(100vh - var(--header-h) - 2.5rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: clamp(1.5rem, 2.4vw, 2rem);
  background: var(--surface-raised);
  border: 1px solid var(--line-soft);
  box-shadow: var(--shadow-lg);
}

.product-summary-model {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-micro);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  line-height: 1;
}

.product-summary-model .model-key {
  color: var(--muted);
  font-weight: 700;
}

.product-summary-model .model-value {
  color: var(--accent-ink);
  font-weight: 800;
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
}

.product-summary-title {
  margin: 0.15rem 0 0;
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  line-height: 1.08;
  font-weight: 800;
  letter-spacing: var(--track-display);
  text-transform: none;
  color: var(--text);
}

.product-summary-text {
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-sm);
  line-height: 1.65;
}

.product-summary-panel .specs-title {
  margin: 0.9rem 0 0;
  font-family: var(--font-display);
  font-size: var(--fs-micro);
  font-weight: 800;
  letter-spacing: var(--track-wider);
  text-transform: uppercase;
  color: var(--accent-ink);
}

.product-summary-panel .specs {
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
  list-style: none;
  border-top: 1px solid var(--line-soft);
}

.product-summary-panel .specs li {
  position: relative;
  padding: 0.7rem 0 0.7rem 1.3rem;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--line-soft);
  color: var(--text);
  font-size: var(--fs-sm);
  line-height: 1.55;
}

.product-summary-panel .specs li::before {
  content: "";
  position: absolute;
  left: 0.1rem;
  top: 1.15rem;
  width: 0.45rem;
  height: 0.45rem;
  background: var(--grad-brand);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

.product-summary-panel .specs strong {
  color: var(--text);
  font-weight: 700;
}

.product-summary-panel .section-actions {
  margin-top: 1.1rem;
  display: grid;
  gap: 0.6rem;
}

.product-summary-panel .section-actions .btn {
  text-align: center;
}

.product-summary-note {
  margin: 0.3rem 0 0;
  color: var(--muted);
  font-size: var(--fs-xs);
  line-height: 1.5;
}

/* --- Related products strip --- */
.related-strip {
  border-top: 1px solid var(--line-soft);
  background:
    linear-gradient(var(--line-soft) 1px, transparent 1px) 0 0 / 44px 44px,
    linear-gradient(90deg, var(--line-soft) 1px, transparent 1px) 0 0 / 44px 44px,
    var(--surface-2);
}

.related-head {
  margin-bottom: 2rem;
}

.related-title {
  margin: 0 0 0.5rem;
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  line-height: 1.08;
  font-weight: 800;
  letter-spacing: var(--track-display);
  text-transform: none;
  color: var(--text);
}

.product-grid--related {
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
}

/* ------------------------------------------------------------
   5. REFERENCES — logo tiles
   ------------------------------------------------------------ */
.ref-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
  gap: clamp(0.75rem, 1.4vw, 1.15rem);
}

.ref-grid .ref-card {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 0;
  align-items: stretch;
  padding: 0;
  overflow: hidden;
  background: var(--surface-raised);
  border: 1px solid var(--line-soft);
  box-shadow: var(--shadow-xs);
  transition:
    transform var(--dur-3) var(--ease-out),
    box-shadow var(--dur-3) var(--ease-out),
    border-color var(--dur-2) var(--ease-out);
}

.ref-grid .ref-card:hover {
  transform: translateY(-5px);
  border-color: var(--edge-glow);
  box-shadow: var(--shadow-md);
}

/* A fixed, optically padded plate so very wide and very tall logos
   both sit correctly. The plate stays light in both themes because
   the logos are supplied as dark-ink artwork. */
.ref-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 6.25rem;
  padding: 1rem 1.35rem;
  background: #ffffff;
  border-bottom: 1px solid var(--line-soft);
}

html[data-theme="dark"] .ref-logo {
  background: rgba(255, 255, 255, 0.88);
}

.ref-card img {
  flex: 0 0 auto;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.62;
  transition:
    filter var(--dur-3) var(--ease-out),
    opacity var(--dur-3) var(--ease-out),
    transform var(--dur-3) var(--ease-out);
}

.ref-grid .ref-card:hover img {
  filter: none;
  opacity: 1;
  transform: scale(1.05);
}

.ref-card .ref-mark {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  background: var(--brand-100);
  color: var(--brand-800);
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  clip-path: polygon(
    var(--chamfer-sm) 0,
    100% 0,
    100% calc(100% - var(--chamfer-sm)),
    calc(100% - var(--chamfer-sm)) 100%,
    0 100%,
    0 var(--chamfer-sm)
  );
}

html[data-theme="dark"] .ref-card .ref-mark {
  background: #0e2f3f;
  color: #8aeaff;
}

.ref-meta {
  display: grid;
  gap: 0.1rem;
  align-content: start;
  padding: 0.95rem 1.1rem 1.15rem;
}

.ref-card strong {
  display: block;
  color: var(--text);
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 800;
  line-height: 1.28;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.ref-card span {
  display: block;
  margin-top: 0.2rem;
  color: var(--muted);
  font-size: var(--fs-xs);
  line-height: 1.45;
}

.ref-card .ref-sector {
  margin-top: 0.5rem;
  color: var(--accent-ink);
  font-family: var(--font-display);
  font-size: var(--fs-micro);
  font-weight: 800;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
}

/* ------------------------------------------------------------
   6. CATALOG — document cards
   ------------------------------------------------------------ */
.catalog-box {
  display: grid;
  gap: clamp(2rem, 4vw, 3rem);
}

.doc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
  gap: clamp(1rem, 1.8vw, 1.5rem);
}

.doc-card {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.25rem 1.35rem;
  align-items: start;
  padding: clamp(1.4rem, 2.2vw, 1.9rem);
  background: var(--surface-raised);
  border: 1px solid var(--line-soft);
  box-shadow: var(--shadow-sm2);
  transition:
    transform var(--dur-3) var(--ease-out),
    box-shadow var(--dur-3) var(--ease-out),
    border-color var(--dur-2) var(--ease-out);
}

.doc-card:hover {
  transform: translateY(-4px);
  border-color: var(--edge-glow);
  box-shadow: var(--shadow-lg);
}

.doc-card::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  background: var(--grad-brand);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-3) var(--ease-out);
}

.doc-card:hover::after {
  transform: scaleX(1);
}

.doc-card-type {
  position: relative;
  display: grid;
  place-items: center;
  width: 3.75rem;
  height: 4.5rem;
  background: var(--brand-100);
  color: var(--brand-800);
}

html[data-theme="dark"] .doc-card-type {
  background: #0e2f3f;
  color: #8aeaff;
}

.doc-card-type svg {
  width: 1.75rem;
  height: 1.75rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.65;
}

.doc-card-ext {
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  padding: 0.2rem 0;
  background: var(--grad-brand-deep);
  color: var(--steel-900);
  font-family: var(--font-display);
  font-size: var(--fs-micro);
  font-weight: 800;
  letter-spacing: var(--track-wide);
  text-align: center;
  line-height: 1.2;
}

html[data-theme="dark"] .doc-card-ext {
  color: var(--steel-900);
}

.doc-card-body {
  display: grid;
  gap: 0.55rem;
  min-width: 0;
}

.doc-card-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: var(--track-tight);
  text-transform: none;
  color: var(--text);
}

.doc-card-text {
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-sm);
  line-height: 1.6;
}

.doc-card-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.5rem;
  margin: 0.25rem 0 0;
  padding: 0;
  list-style: none;
}

.doc-card-facts li {
  display: grid;
  gap: 0.15rem;
}

.doc-card-facts .label {
  color: var(--muted);
  font-family: var(--font-display);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
}

.doc-card-facts .value {
  color: var(--text);
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 800;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}

.doc-card-actions {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  padding-top: 0.35rem;
  border-top: 1px solid var(--line-soft);
  margin-top: 0.35rem;
}

.doc-card-actions .btn {
  margin-top: 0.75rem;
}

.doc-download {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}

.doc-download-icon {
  display: inline-grid;
  place-items: center;
  width: 1.05rem;
  height: 1.05rem;
}

.doc-download-icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform var(--dur-3) var(--ease-spring);
}

.doc-download:hover .doc-download-icon svg,
.doc-download:focus-visible .doc-download-icon svg {
  transform: translateY(3px);
}

.catalog-preview {
  display: grid;
  gap: 1rem;
}

.catalog-preview-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-micro);
  font-weight: 800;
  letter-spacing: var(--track-wider);
  text-transform: none;
  color: var(--accent-ink);
}

.catalog-frame-wrap {
  border: 1px solid var(--line-soft);
  background: var(--surface-raised);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

/* ------------------------------------------------------------
   7. FORMS — shared field skin (contact + quote wizard)
   ------------------------------------------------------------ */
.stack-form > label,
.field {
  gap: 0.45rem;
  color: var(--muted);
  font-family: var(--font-display);
  font-size: var(--fs-micro);
  font-weight: 800;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
}

/* `background-color`, never the shorthand — the select arrow in
   app.css is drawn with `background-image` and must survive. */
.stack-form input,
.stack-form select,
.stack-form textarea {
  padding: 0.85rem 1rem;
  border: 1px solid var(--line);
  border-bottom-width: 2px;
  background-color: var(--input-bg);
  color: var(--text);
  font-size: var(--fs-sm);
  box-shadow: var(--shadow-inset-top);
  transition:
    border-color var(--dur-2) var(--ease-out),
    box-shadow var(--dur-2) var(--ease-out);
}

.stack-form input:hover,
.stack-form select:hover,
.stack-form textarea:hover {
  border-color: var(--line-strong);
}

.stack-form input:focus,
.stack-form select:focus,
.stack-form textarea:focus {
  border-color: var(--brand-500);
  box-shadow: 0 0 0 3px var(--edge-glow), var(--shadow-inset-top);
}

.stack-form .check {
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--line-soft);
  background: var(--surface-2);
  transition:
    border-color var(--dur-2) var(--ease-out),
    background var(--dur-2) var(--ease-out);
}

.stack-form .check:hover {
  border-color: var(--line-strong);
}

.form-actions {
  margin-top: 0.75rem;
}

/* ------------------------------------------------------------
   8. QUOTE WIZARD
   The JS hooks in js/site.js are load-bearing and untouched:
   #quote-form, .quote-step[data-step], hidden + .is-active,
   [data-step-btn] with .is-active/.is-done/aria-current,
   [data-next]/[data-prev], #door_category, #door_type, novalidate.
   ------------------------------------------------------------ */
.quote-wrap {
  max-width: 920px;
  margin-inline: auto;
}

.quote-shell {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(1.5rem, 3vw, 2.75rem);
  background: var(--surface-raised);
  border: 1px solid var(--line-soft);
  box-shadow: var(--shadow-lg);
}

.quote-shell-grid {
  position: absolute;
  inset: 0;
  z-index: -1;
  display: block;
  pointer-events: none;
  opacity: 0.75;
}

/* --- Stepper with a connecting progress rail --- */
.quote-steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.5rem;
  margin: 0 0 clamp(1.5rem, 2.6vw, 2.25rem);
  padding: 0 0 clamp(1.25rem, 2.2vw, 1.75rem);
  border-bottom: 1px solid var(--line-soft);
  list-style: none;
}

.step-btn {
  position: relative;
  overflow: visible;
  display: grid;
  gap: 0.7rem;
  justify-items: start;
  padding: 0;
  border: 0;
  background: none;
  color: var(--muted);
  text-align: left;
  cursor: pointer;
  font: inherit;
}

/* Rail track + fill. The last step has nothing to connect to. */
.step-btn::before,
.step-btn::after {
  content: "";
  position: absolute;
  left: 2.25rem;
  right: -0.5rem;
  top: 1.125rem;
  height: 2px;
  margin-top: -1px;
}

.step-btn::before {
  z-index: 0;
  background: var(--line);
}

.step-btn::after {
  z-index: 1;
  background: var(--grad-brand);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-4) var(--ease-out);
}

.quote-steps li:last-child .step-btn::before,
.quote-steps li:last-child .step-btn::after {
  display: none;
}

.step-btn.is-done::after {
  transform: scaleX(1);
}

.step-btn.is-active::after {
  transform: scaleX(0.45);
}

.step-btn .step-num {
  position: relative;
  z-index: 2;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid var(--line-strong);
  background: var(--surface-raised);
  color: var(--muted);
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 800;
  letter-spacing: 0;
  transition:
    background var(--dur-2) var(--ease-out),
    border-color var(--dur-2) var(--ease-out),
    color var(--dur-2) var(--ease-out),
    box-shadow var(--dur-3) var(--ease-out),
    transform var(--dur-2) var(--ease-out);
}

.step-btn .step-name {
  font-family: var(--font-display);
  font-size: var(--fs-micro);
  font-weight: 800;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  line-height: 1.35;
}

.step-btn:hover .step-num {
  border-color: var(--brand-500);
  color: var(--accent-ink);
}

.step-btn.is-active {
  color: var(--text);
}

.step-btn.is-active .step-num {
  background: var(--grad-brand-deep);
  border-color: transparent;
  color: var(--steel-900);
  box-shadow: var(--shadow-brand);
  transform: scale(1.06);
}

html[data-theme="dark"] .step-btn.is-active .step-num {
  color: var(--steel-900);
}

.step-btn.is-done .step-num {
  background: var(--accent-soft);
  border-color: var(--brand-500);
  color: var(--accent-ink);
}

/* --- Step panels --- */
@keyframes ergok-step-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.quote-step {
  display: grid;
  gap: 1.05rem;
}

.quote-step.is-active {
  animation: ergok-step-in var(--dur-3) var(--ease-out) both;
}

/* A <legend> is not a grid item: Chrome renders it in the fieldset's border
   area and lays the grid's first row out *behind* it, so the step counter
   collided with the step title. Floating the legend puts it back into normal
   flow, and the rows that follow clear it. */
.quote-step > legend {
  float: left;
  width: 100%;
  margin: 0;
  padding: 0;
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  line-height: 1.28;
  font-weight: 650;
  letter-spacing: var(--track-tight);
  text-transform: none;
  color: var(--text);
}

.step-counter {
  margin: 0;
  color: var(--accent-ink);
  font-family: var(--font-display);
  font-size: var(--fs-micro);
  font-weight: 800;
  letter-spacing: var(--track-wider);
  text-transform: uppercase;
}

.radio-group {
  display: grid;
  gap: 0.65rem;
  margin: 0;
  padding: 1.15rem 1.25rem 1.25rem;
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
}

.radio-group > legend {
  padding: 0;
  margin-left: 0;
  color: var(--accent-ink);
  font-family: var(--font-display);
  font-size: var(--fs-micro);
  font-weight: 800;
  letter-spacing: var(--track-wider);
  text-transform: uppercase;
}

.radio-group .check {
  background: var(--input-bg);
  border: 1px solid var(--line);
}

.radio-group .check:hover {
  border-color: var(--brand-500);
}

.radio-group .check:has(input:checked) {
  border-color: var(--brand-500);
  background: var(--accent-soft);
  box-shadow: var(--shadow-inset-top);
}

.quote-note {
  margin: 1.1rem 0 0;
  color: var(--muted);
  font-size: var(--fs-xs);
  line-height: 1.5;
}

/* ------------------------------------------------------------
   9. CONTACT
   ------------------------------------------------------------ */
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(1.25rem, 2.4vw, 2rem);
  align-items: start;
}

.contact-side {
  display: grid;
  gap: clamp(1rem, 1.8vw, 1.5rem);
  min-width: 0;
}

.contact-card {
  display: grid;
  gap: 1.1rem;
  padding: clamp(1.4rem, 2.4vw, 1.95rem);
  background: var(--surface-raised);
  border: 1px solid var(--line-soft);
  box-shadow: var(--shadow-md);
  font-style: normal;
}

.contact-card-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: var(--track-tight);
  text-transform: none;
  color: var(--text);
}

.contact-address {
  font-style: normal;
}

.contact-info-list {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.contact-info-list li {
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
  padding: 0.95rem 0;
  border-top: 1px solid var(--line-soft);
  color: var(--text);
  font-size: var(--fs-sm);
  line-height: 1.6;
}

.contact-info-list li:first-child {
  padding-top: 0;
  border-top: 0;
}

.contact-info-list svg {
  flex: none;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0.5rem;
  background: var(--brand-100);
  color: var(--brand-800);
  stroke: currentColor;
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

html[data-theme="dark"] .contact-info-list svg {
  background: #0e2f3f;
  color: #8aeaff;
}

.contact-info-list .label {
  display: block;
  margin-bottom: 0.2rem;
  color: var(--muted);
  font-family: var(--font-display);
  font-size: var(--fs-micro);
  font-weight: 800;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
}

/* Buttons carry their own colour from theme.css; this ambient link colour must
   not bleed into one, or the label goes cyan-on-cyan. */
.contact-card a:not(.btn) {
  color: var(--accent-ink);
  font-weight: 700;
}

.contact-card .btn {
  justify-self: start;
  margin-top: 0.2rem;
}

.map-wrap {
  overflow: hidden;
  background: var(--surface-raised);
  border: 1px solid var(--line-soft);
  box-shadow: var(--shadow-md);
}

.map-title {
  margin: 0;
  padding: 1.15rem 1.35rem 0.95rem;
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: 800;
  letter-spacing: var(--track-tight);
  text-transform: none;
  color: var(--text);
}

.map-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 11;
  min-height: 260px;
  background: var(--surface-sunken);
  border-top: 1px solid var(--line-soft);
}

.map-frame iframe {
  filter: grayscale(0.45) contrast(1.04);
  transition: filter var(--dur-4) var(--ease-out);
}

.map-wrap:hover .map-frame iframe {
  filter: none;
}

html[data-theme="dark"] .map-frame iframe {
  filter: grayscale(0.5) contrast(1.02) brightness(0.82);
}

html[data-theme="dark"] .map-wrap:hover .map-frame iframe {
  filter: brightness(0.95);
}

.map-open {
  padding: 0.9rem 1.35rem 1.1rem;
  color: var(--accent-ink);
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
}

.contact-form-col {
  min-width: 0;
}

.contact-form {
  position: relative;
  display: grid;
  gap: 1.05rem;
  padding: clamp(1.6rem, 2.8vw, 2.35rem);
  background: var(--surface-raised);
  border: 1px solid var(--line-soft);
  box-shadow: var(--shadow-lg);
}

.contact-form::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  background: var(--grad-brand);
}

.contact-form-head {
  display: grid;
  gap: 0.4rem;
  margin-bottom: 0.25rem;
}

.contact-form h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  line-height: 1.08;
  font-weight: 800;
  letter-spacing: var(--track-display);
  text-transform: none;
  color: var(--text);
}

.contact-form-lead {
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-sm);
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  line-height: 1.6;
}

.contact-form-note {
  margin: 0.25rem 0 0;
  color: var(--muted);
  font-size: var(--fs-xs);
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  line-height: 1.5;
}

/* ------------------------------------------------------------
   10. CMS PAGE — prose treatment
   The body is admin-entered raw HTML, so descendants are styled
   directly rather than through added classes.
   ------------------------------------------------------------ */
.prose {
  max-width: 68ch;
  margin-inline: auto;
  color: var(--text);
  font-size: var(--fs-lead);
  line-height: 1.85;
}

.prose > :first-child {
  margin-top: 0;
}

.prose > p:first-of-type {
  color: var(--text);
  font-size: calc(var(--fs-lead) * 1.1);
  line-height: 1.7;
}

.prose p {
  margin: 0 0 1.25rem;
}

.prose h2 {
  position: relative;
  margin: 2.85rem 0 1rem;
  padding-top: 1.35rem;
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: var(--track-display);
  text-transform: uppercase;
  color: var(--text);
}

.prose h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 2.75rem;
  height: var(--rule-w);
  background: var(--grad-brand);
}

.prose h3 {
  margin: 2.1rem 0 0.6rem;
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  line-height: 1.25;
  font-weight: 800;
  letter-spacing: var(--track-tight);
  text-transform: none;
  color: var(--text);
}

.prose h4 {
  margin: 1.7rem 0 0.5rem;
  font-size: var(--fs-body);
  letter-spacing: var(--track-wide);
  text-transform: none;
  color: var(--accent-ink);
}

.prose ul,
.prose ol {
  margin: 0 0 1.35rem;
  padding-left: 0;
  list-style: none;
}

.prose li {
  margin-bottom: 0.55rem;
}

.prose ul li {
  position: relative;
  padding-left: 1.6rem;
}

.prose ul li::before {
  content: "";
  position: absolute;
  left: 0.2rem;
  top: 0.72em;
  width: 0.45rem;
  height: 0.45rem;
  background: var(--grad-brand);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

.prose ol {
  counter-reset: ergok-prose-ol;
}

.prose ol li {
  position: relative;
  padding-left: 2.4rem;
  counter-increment: ergok-prose-ol;
}

.prose ol li::before {
  content: counter(ergok-prose-ol, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0.05em;
  color: var(--accent-ink);
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 800;
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
}

.prose blockquote {
  margin: 2.1rem 0;
  padding: 1.35rem 1.6rem;
  border: 0;
  border-left: var(--rule-w) solid var(--brand-500);
  background: var(--surface-2);
  color: var(--text);
  font-size: var(--fs-lead);
  line-height: 1.7;
}

.prose blockquote p:last-child {
  margin-bottom: 0;
}

/* `display: block` turns the table itself into its own scroll
   container, so a wide admin-entered table never scrolls the page. */
.prose table {
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 0 0 1.75rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-collapse: collapse;
  font-size: var(--fs-sm);
  line-height: 1.55;
}

.prose th,
.prose td {
  padding: 0.8rem 1rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--line-soft);
}

.prose th {
  background: var(--surface-2);
  color: var(--text);
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  white-space: nowrap;
}

.prose img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 1.85rem 0;
  box-shadow: var(--shadow-md);
}

.prose figure {
  margin: 1.85rem 0;
}

.prose figcaption {
  margin-top: 0.6rem;
  color: var(--muted);
  font-size: var(--fs-xs);
  line-height: 1.5;
}

.prose hr {
  height: 1px;
  margin: 2.5rem 0;
  border: 0;
  background: var(--grad-hairline);
}

.prose code {
  padding: 0.15em 0.4em;
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
  font-size: 0.92em;
  font-variant-numeric: tabular-nums;
}

.prose pre {
  margin: 0 0 1.5rem;
  padding: 1.1rem 1.25rem;
  overflow-x: auto;
  background: var(--surface-sunken);
  border: 1px solid var(--line-soft);
  font-size: var(--fs-sm);
  line-height: 1.6;
}

.prose pre code {
  padding: 0;
  background: none;
  border: 0;
}

.prose a {
  border-bottom-color: var(--edge-glow);
  transition: border-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out);
}

/* --- Stats band on CMS pages (the homepage uses `.trust-bar`) --- */
.page-stats {
  background: var(--surface-raised);
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}

.page-stats .stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}

.page-stats .stat {
  padding: clamp(1.5rem, 2.6vw, 2.25rem) 1.5rem;
  border-right: 1px solid var(--line-soft);
}

.page-stats .stat:last-child {
  border-right: 0;
}

.page-stats .stat strong {
  display: block;
  margin-bottom: 0.35rem;
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.4vw, 2.85rem);
  line-height: 1;
  font-weight: 800;
  letter-spacing: var(--track-display);
  font-variant-numeric: tabular-nums;
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.page-stats .stat span {
  color: var(--muted);
  font-family: var(--font-display);
  font-size: var(--fs-micro);
  font-weight: 800;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
}

/* ------------------------------------------------------------
   11. NOTICE PANEL — 404, 500, expired session, quote success
   ------------------------------------------------------------ */
.notice-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(4rem, 8vw, 7.5rem) 0;
}

.notice-glow {
  position: absolute;
  inset: -12% -6%;
  z-index: -1;
  display: block;
  pointer-events: none;
  background: radial-gradient(ellipse 42% 46% at 50% 28%, var(--mesh-1), transparent 70%);
}

.notice-panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  max-width: 720px;
  margin-inline: auto;
  padding: 0;
  background: var(--grad-ice);
  border: 1px solid var(--line-soft);
  border-top: 0;
  box-shadow: var(--shadow-xl);
  text-align: center;
}

.notice-panel::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  z-index: 3;
  height: 3px;
  background: var(--grad-brand);
}

.notice-grid {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  pointer-events: none;
  opacity: 0.85;
}

.notice-inner {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: center;
  padding: clamp(2.75rem, 5.5vw, 4.25rem) clamp(1.35rem, 4vw, 3rem);
}

.notice-eyebrow {
  margin: 0 0 1rem;
}

.notice-panel h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  line-height: 1.02;
  font-weight: 800;
  letter-spacing: var(--track-display);
  text-transform: none;
  color: var(--text);
  max-width: 20ch;
}

.notice-code {
  margin: 0 0 0.5rem;
  font-family: var(--font-display);
  font-size: var(--fs-display);
  line-height: 0.88;
  font-weight: 900;
  letter-spacing: var(--track-display);
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.notice-icon {
  display: grid;
  place-items: center;
  width: 3.75rem;
  height: 3.75rem;
  margin: 0 auto 1.35rem;
  border-radius: 0;
  background: var(--grad-brand-deep);
  box-shadow: var(--shadow-brand);
  clip-path: polygon(
    var(--chamfer-sm) 0,
    100% 0,
    100% calc(100% - var(--chamfer-sm)),
    calc(100% - var(--chamfer-sm)) 100%,
    0 100%,
    0 var(--chamfer-sm)
  );
}

.notice-icon svg {
  width: 1.6rem;
  height: 1.6rem;
  fill: none;
  stroke: var(--steel-900);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

html[data-theme="dark"] .notice-icon svg {
  stroke: var(--steel-900);
}

.notice-text {
  margin: 1rem auto 0;
  max-width: 50ch;
  color: var(--muted);
  font-size: var(--fs-lead);
  line-height: 1.72;
}

.notice-ref {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  margin: 1.4rem 0 0;
  padding: 0.6rem 1rem;
  border: 1px solid var(--line-soft);
  background: var(--surface-glass);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  font-family: var(--font-display);
  font-size: var(--fs-micro);
  font-weight: 800;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--muted);
}

.notice-ref strong {
  margin-left: 0;
  color: var(--accent-ink);
  font-size: var(--fs-sm);
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
}

.notice-panel .section-actions {
  justify-content: center;
  margin-top: 2rem;
}

/* ------------------------------------------------------------
   12. EMPTY STATE
   ------------------------------------------------------------ */
.empty-state {
  padding: clamp(3rem, 6vw, 4.5rem) 1.5rem;
  background: var(--surface-raised);
  border: 1px dashed var(--line-strong);
  box-shadow: var(--shadow-xs);
}

.empty-state strong {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text);
}

.empty-state svg {
  width: 2.5rem;
  height: 2.5rem;
  stroke: var(--accent-ink);
}

/* ------------------------------------------------------------
   13. RESPONSIVE — same breakpoint system as app.css / styles.css
   ------------------------------------------------------------ */
@media (max-width: 1180px) {
  .product-detail {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.95fr);
  }
}

@media (max-width: 980px) {
  .page-hero {
    padding: clamp(3.25rem, 8vw, 4.5rem) 0 clamp(2.25rem, 5vw, 3.25rem);
  }

  .page-hero h1,
  .page-hero--product h1 {
    max-width: none;
  }

  .page-hero::before {
    width: 2px;
  }

  .product-detail,
  .contact-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .product-summary-panel {
    position: static;
    max-height: none;
    overflow: visible;
  }

  .quote-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.15rem 0.75rem;
  }

  /* Two columns means every second step ends a row — no rail across
     the gap, and the rail on the first column stays. */
  .quote-steps li:nth-child(2n) .step-btn::before,
  .quote-steps li:nth-child(2n) .step-btn::after {
    display: none;
  }

  .page-stats .stat {
    border-right: 0;
    border-bottom: 1px solid var(--line-soft);
  }

  .page-stats .stat:last-child {
    border-bottom: 0;
  }
}

@media (max-width: 780px) {
  .product-grid,
  .product-grid--related {
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  }

  .ref-grid {
    grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr));
  }

  .ref-logo {
    height: 5.25rem;
    padding: 0.85rem 1rem;
  }
}

@media (max-width: 640px) {
  .page-hero {
    padding: 2.75rem 0 2.25rem;
  }

  .breadcrumb {
    font-size: 0.66rem;
    padding: 0.45rem 0.7rem;
  }

  .breadcrumb-current {
    max-width: 16ch;
  }

  .product-grid,
  .product-grid--related,
  .doc-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .ref-grid {
    grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
  }

  .doc-card {
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
  }

  .doc-card-actions .btn {
    flex: 1 1 auto;
    text-align: center;
  }

  /* Stack the spec table instead of scrolling it sideways. */
  .spec-table th,
  .spec-table td {
    display: block;
    width: auto;
    border-right: 0;
  }

  .spec-table th {
    padding-bottom: 0.25rem;
    border-bottom: 0;
    color: var(--accent-ink);
  }

  .spec-table td {
    padding-top: 0.25rem;
  }

  .quote-shell {
    padding: 1.35rem 1.15rem 1.6rem;
  }

  .quote-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .step-btn .step-name {
    font-size: 0.66rem;
  }

  .step-btn::before,
  .step-btn::after {
    left: 2rem;
  }

  .notice-inner {
    padding: 2.25rem 1.25rem 2.25rem;
  }

  .prose {
    font-size: var(--fs-body);
  }
}

/* ------------------------------------------------------------
   14. REDUCED MOTION
   Nothing above may move when the visitor asks for stillness.
   styles.css already clamps durations globally; these rules remove
   the transforms themselves so no state reads as "mid-animation".
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .page-hero-photo[data-parallax] {
    inset: 0;
  }

  .product-figure-inner::after {
    opacity: 0;
  }

  .product-card:hover,
  .product-card:focus-visible,
  .doc-card:hover,
  .ref-grid .ref-card:hover {
    transform: none;
  }

  .product-card:hover .product-card-media img,
  .product-card:focus-visible .product-card-media img,
  .ref-grid .ref-card:hover img,
  .product-figure:hover img {
    transform: none;
  }

  .product-card:hover .more::after,
  .doc-download:hover .doc-download-icon svg,
  .doc-download:focus-visible .doc-download-icon svg {
    transform: none;
  }

  .product-card::after,
  .doc-card::after {
    transform: scaleX(1);
    opacity: 0;
  }

  .product-card:hover::after,
  .product-card:focus-visible::after,
  .doc-card:hover::after {
    opacity: 1;
  }

  .product-figure-badge {
    transform: none;
  }

  .step-btn.is-active .step-num {
    transform: none;
  }

  .quote-step.is-active {
    animation: none;
  }

  .page-hero-glow {
    filter: none;
  }
}

/* ============================================================
   Quote form — searchable country / province pickers
   The native <select> stays in the DOM for submission; it is visually
   replaced by .geo-select, which quote-form.js builds around it.
   ============================================================ */

.geo-select {
  position: relative;
  display: block;
}

/* Kept in the DOM (it is what submits) but never shown once upgraded. */
.geo-select-native {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.geo-select-button {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  padding: 0.85rem 2.6rem 0.85rem 0.95rem;
  background: var(--input-bg);
  border: 1px solid var(--line);
  border-radius: 2px;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition:
    border-color var(--dur-2) var(--ease-out),
    box-shadow var(--dur-2) var(--ease-out);
}

.geo-select-button:hover {
  border-color: var(--line-strong);
}

.geo-select.is-open .geo-select-button,
.geo-select-button:focus-visible {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
  outline: none;
}

.geo-select-value {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.geo-select-value.is-placeholder {
  color: var(--muted);
}

.geo-select-caret {
  position: absolute;
  right: 0.95rem;
  top: 50%;
  width: 0.5rem;
  height: 0.5rem;
  margin-top: -0.35rem;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(45deg);
  transition: transform var(--dur-2) var(--ease-out);
}

.geo-select.is-open .geo-select-caret {
  transform: rotate(-135deg);
  margin-top: -0.1rem;
  border-color: var(--accent);
}

.geo-select-panel {
  position: absolute;
  z-index: 30;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  padding: 0.6rem;
  background: var(--surface-raised);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
  animation: geo-pop var(--dur-2) var(--ease-out) both;
}

@keyframes geo-pop {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
}

.geo-select-search {
  width: 100%;
  padding: 0.6rem 0.7rem;
  margin-bottom: 0.5rem;
  background: var(--input-bg);
  border: 1px solid var(--line);
  border-radius: 2px;
  color: var(--text);
  font: inherit;
}

.geo-select-search:focus-visible {
  border-color: var(--accent);
  outline: none;
}

.geo-select-list {
  max-height: 16rem;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  list-style: none;
  overscroll-behavior: contain;
}

.geo-select-option {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.55rem 0.7rem;
  border-radius: 2px;
  cursor: pointer;
  line-height: 1.35;
}

/* A class selector outranks the UA's `[hidden] { display: none }`, so the
   search filter needs this to actually take rows out of the list. */
.geo-select-option[hidden] {
  display: none;
}

.geo-select-option.is-active {
  background: var(--accent-soft);
}

.geo-select-option.is-selected {
  color: var(--accent-ink);
  font-weight: 700;
}

.geo-select-flag {
  flex: none;
  font-size: 1.05em;
  line-height: 1;
}

.geo-select-text {
  flex: 1 1 auto;
  min-width: 0;
}

.geo-select-empty {
  margin: 0;
  padding: 0.9rem 0.7rem;
  color: var(--muted);
  font-size: var(--fs-sm);
  text-align: center;
}

/* ---------- Phone field ---------- */

.phone-control {
  display: grid;
  grid-template-columns: minmax(8.5rem, 11rem) 1fr;
  gap: 0.5rem;
  align-items: start;
}

.phone-control .geo-select-panel {
  /* The dial-code list is far wider than its 9rem trigger. */
  min-width: 20rem;
}

.phone-control input[type="tel"] {
  width: 100%;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}

.phone-control.is-invalid input[type="tel"] {
  border-color: #d5453b;
}

.field-hint {
  display: block;
  margin-top: 0.4rem;
  color: var(--muted);
  font-size: var(--fs-xs);
  line-height: 1.45;
}

.field-hint.is-error {
  color: #d5453b;
  font-weight: 600;
}

html[data-theme="dark"] .phone-control.is-invalid input[type="tel"],
html[data-theme="dark"] .field-hint.is-error {
  border-color: #ff6f63;
  color: #ff8d82;
}

html[data-theme="dark"] .phone-control.is-invalid input[type="tel"] {
  color: var(--text);
}

@media (max-width: 560px) {
  .phone-control {
    grid-template-columns: 1fr;
  }

  .phone-control .geo-select-panel {
    min-width: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .geo-select-panel {
    animation: none;
  }

  .geo-select-button,
  .geo-select-caret {
    transition: none;
  }
}

/* ------------------------------------------------------------
   PAGE PHOTOGRAPHY  (about)
   The about page ran as one unbroken column of body copy. The hero
   now stands on a real photograph and a three-up plate sits between
   the stats and the prose, so the page has something to look at
   before it asks to be read. Both are opt-in from the controller —
   the legal pages share this view and stay text-only.
   ------------------------------------------------------------ */
.page-hero--media {
  isolation: isolate;
}

.page-hero-photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  overflow: hidden;
  pointer-events: none;
}

.page-hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 30% 38%;
  transform: scale(1.06);
  filter: saturate(0.92) contrast(1.06);
}

.page-hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  pointer-events: none;
  background:
    linear-gradient(
      96deg,
      rgba(15, 23, 42, 0.95) 0%,
      rgba(15, 23, 42, 0.82) 38%,
      rgba(15, 23, 42, 0.5) 72%,
      rgba(15, 23, 42, 0.78) 100%
    ),
    linear-gradient(0deg, rgba(11, 18, 32, 0.92) 0%, transparent 62%);
}

.page-media {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, transparent 0%, var(--surface-sunken) 48%, transparent 100%);
}

html[data-theme="dark"] .page-media {
  background: linear-gradient(180deg, transparent 0%, rgba(13, 21, 28, 0.55) 48%, transparent 100%);
}

.page-media-head {
  position: relative;
  z-index: 1;
  max-width: 52rem;
}

.page-media-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  grid-auto-rows: minmax(0, auto);
  gap: clamp(1rem, 2vw, 1.75rem);
  align-items: start;
}

.page-media-item {
  margin: 0;
}

/* The wide plate spans both rows of the right-hand column. */
.page-media-item--wide {
  grid-row: span 2;
}

.page-media-frame {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--steel-900);
  box-shadow: var(--shadow-lg);
}

.page-media-frame::after {
  content: "";
  position: absolute;
  inset: 12px;
  pointer-events: none;
  border: 1px solid rgba(255, 255, 255, 0.2);
  opacity: 0;
  transition: opacity var(--dur-3) var(--ease-out);
}

.page-media-item:hover .page-media-frame::after {
  opacity: 1;
}

.page-media-frame img {
  display: block;
  width: 100%;
  height: clamp(200px, 21vw, 290px);
  object-fit: cover;
  transform: scale(1.02);
  transition: transform var(--dur-6) var(--ease-out-soft);
}

.page-media-item--wide .page-media-frame img {
  height: clamp(320px, 45vw, 620px);
  object-position: 30% center;
}

.page-media-item:hover .page-media-frame img {
  transform: scale(1.07);
}

.page-media-item figcaption {
  margin-top: 0.85rem;
  max-width: 44ch;
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--muted);
}

@media (max-width: 860px) {
  .page-media-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .page-media-item--wide {
    grid-row: auto;
  }

  .page-media-item--wide .page-media-frame img {
    height: clamp(240px, 48vw, 360px);
  }
}

/* ------------------------------------------------------------
   CATALOG READER
   Replaces the summary card + bare plugin pairing. The browser
   renders the PDF's own chrome inside the iframe and we cannot
   restyle that, so the shell around it does the work: a real
   document toolbar carrying the title, size and both actions, a
   generous stage, and a footer hint. One object on the page
   instead of a small card floating above a big grey box.
   ------------------------------------------------------------ */
.catalog-reader {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto 1fr auto;
  background: var(--surface-raised);
  border: 1px solid var(--line-soft);
  box-shadow: var(--shadow-lg);
  clip-path: polygon(
    var(--chamfer) 0,
    100% 0,
    100% calc(100% - var(--chamfer)),
    calc(100% - var(--chamfer)) 100%,
    0 100%,
    0 var(--chamfer)
  );
}

.catalog-reader-bar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(0.9rem, 2vw, 1.5rem);
  padding: clamp(1rem, 2vw, 1.4rem) clamp(1.1rem, 2.2vw, 1.75rem);
  background: var(--grad-steel);
  color: #f2f6fa;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.catalog-reader-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.5rem 0.7rem;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.2);
  font-family: var(--font-display);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: var(--track-wide);
  line-height: 1;
  color: var(--brand-500);
}

.catalog-reader-badge svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.catalog-reader-meta {
  min-width: 0;
}

.catalog-reader-title {
  margin: 0;
  font-size: var(--fs-h4);
  font-weight: 650;
  letter-spacing: var(--track-tight);
  line-height: 1.3;
  text-transform: none;
  color: #f2f6fa;
}

.catalog-reader-sub {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem;
  margin: 0.3rem 0 0;
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: rgba(226, 236, 244, 0.68);
}

.catalog-reader-dot {
  width: 3px;
  height: 3px;
  flex: none;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.6;
}

.catalog-reader-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.catalog-reader-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.catalog-reader-btn svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.catalog-reader .btn-outline {
  color: #f2f6fa;
  border-color: rgba(255, 255, 255, 0.32);
}

.catalog-reader .btn-outline:hover,
.catalog-reader .btn-outline:focus-visible {
  color: var(--steel-900);
  border-color: transparent;
}

/* The plugin paints its own grey; matching it keeps the seam invisible. */
.catalog-reader-stage {
  position: relative;
  background: var(--surface-sunken);
  padding: 0;
}

.catalog-reader .catalog-frame {
  display: block;
  width: 100%;
  height: clamp(560px, 82vh, 1000px);
  border: 0;
  background: var(--surface-sunken);
}

.catalog-reader-foot {
  padding: clamp(0.85rem, 1.6vw, 1.1rem) clamp(1.1rem, 2.2vw, 1.75rem);
  background: var(--surface-2);
  border-top: 1px solid var(--line-soft);
}

.catalog-reader-foot p {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--muted);
}

@media (max-width: 760px) {
  .catalog-reader-bar {
    grid-template-columns: auto minmax(0, 1fr);
    row-gap: 1rem;
  }

  .catalog-reader-actions {
    grid-column: 1 / -1;
  }

  .catalog-reader-actions .btn {
    flex: 1 1 10rem;
    justify-content: center;
  }

  .catalog-reader .catalog-frame {
    height: clamp(420px, 70vh, 640px);
  }
}

/* ------------------------------------------------------------
   CONTACT — one card
   Address, phone, fax, e-mail and the map all describe the same
   place, so they are one object now instead of two stacked cards
   with two borders and two shadows between them. The card edge is
   flush: the map bleeds to it, and the "open in Maps" link is the
   card's own footer.
   ------------------------------------------------------------ */
.contact-card {
  overflow: hidden;
  padding: 0;
  gap: 0;
  align-content: start;
}

.contact-card > .contact-card-title {
  padding: clamp(1.4rem, 2.4vw, 1.95rem) clamp(1.4rem, 2.4vw, 1.95rem) 0;
}

.contact-card > .contact-address {
  padding: 0 clamp(1.4rem, 2.4vw, 1.95rem);
  margin-top: 1.1rem;
}

.contact-card > .contact-card-cta {
  margin: 1.25rem clamp(1.4rem, 2.4vw, 1.95rem) clamp(1.4rem, 2.4vw, 1.95rem);
}

.contact-card-map {
  display: grid;
  border-top: 1px solid var(--line-soft);
  background: var(--surface-2);
}

.contact-card-subtitle {
  margin: 0;
  padding: clamp(1.1rem, 2vw, 1.35rem) clamp(1.4rem, 2.4vw, 1.95rem) 0.9rem;
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: var(--track-wider);
  text-transform: uppercase;
  line-height: 1;
  color: var(--accent-ink);
}

.contact-card-map .map-frame {
  aspect-ratio: 16 / 10;
  min-height: 240px;
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}

.contact-card-map:hover .map-frame iframe {
  filter: none;
}

html[data-theme="dark"] .contact-card-map:hover .map-frame iframe {
  filter: brightness(0.95);
}

.contact-card-map .map-open {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: clamp(0.85rem, 1.6vw, 1.1rem) clamp(1.4rem, 2.4vw, 1.95rem);
  transition: gap var(--dur-2) var(--ease-out);
}

.contact-card-map .map-open:hover,
.contact-card-map .map-open:focus-visible {
  gap: 0.8rem;
}

/* ------------------------------------------------------------
   PRODUCT CARD — hover choreography
   The card already lifted and zoomed its photo. What was missing
   was the instrument feel: an engineering frame that draws itself
   in over the image, brand corner ticks, and a single light sweep
   across the photo. Every layer is decorative, pointer-events
   none, and inert under reduced motion (bottom of this file).
   ------------------------------------------------------------ */
.product-card-frame {
  position: absolute;
  inset: 12px;
  z-index: 2;
  display: block;
  pointer-events: none;
  border: 1px solid rgba(255, 255, 255, 0.55);
  opacity: 0;
  transform: scale(1.035);
  transition:
    opacity var(--dur-3) var(--ease-out),
    transform var(--dur-4) var(--ease-emphasis);
}

/* Brand ticks on the diagonal corners, matching the hero frame. */
.product-card-frame::before,
.product-card-frame::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  border: 0 solid var(--brand-500);
}

.product-card-frame::before {
  top: -1px;
  left: -1px;
  border-top-width: 2px;
  border-left-width: 2px;
}

.product-card-frame::after {
  right: -1px;
  bottom: -1px;
  border-right-width: 2px;
  border-bottom-width: 2px;
}

.product-card:hover .product-card-frame,
.product-card:focus-visible .product-card-frame {
  opacity: 1;
  transform: scale(1);
}

/* One pass, not a shimmer — the sweep only runs on hover. */
.product-card-sheen {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  pointer-events: none;
  background: var(--grad-sheen);
  opacity: 0.45;
  transform: translateX(-130%) skewX(-16deg);
}

.product-card:hover .product-card-sheen,
.product-card:focus-visible .product-card-sheen {
  animation: product-sheen 1.05s var(--ease-out) both;
}

@keyframes product-sheen {
  from {
    transform: translateX(-130%) skewX(-16deg);
  }
  to {
    transform: translateX(130%) skewX(-16deg);
  }
}

/* The tag slides up out of the image edge as the card comes alive. */
.product-card-tag {
  transform: translateY(0);
  transition:
    transform var(--dur-3) var(--ease-out),
    background var(--dur-3) var(--ease-out),
    color var(--dur-3) var(--ease-out);
}

.product-card:hover .product-card-tag,
.product-card:focus-visible .product-card-tag {
  background: var(--grad-brand);
  color: var(--steel-900);
}

/* Model line and title pick up the brand as the card lifts. */
.product-card .model-value,
.product-card h3 {
  transition: color var(--dur-2) var(--ease-out);
}

.product-card:hover h3,
.product-card:focus-visible h3 {
  color: var(--accent-ink);
}

.product-card:hover,
.product-card:focus-visible {
  transform: translateY(-8px);
}

@media (prefers-reduced-motion: reduce) {
  .product-card-sheen {
    display: none;
  }

  .product-card-frame {
    transition: none;
    transform: none;
  }

  .product-card:hover,
  .product-card:focus-visible {
    transform: none;
  }

  .product-card:hover .product-card-media img,
  .product-card:focus-visible .product-card-media img {
    transform: none;
  }
}