@charset "UTF-8";
/* =============================================================================
   Good Rope — main stylesheet
   -----------------------------------------------------------------------------
   Import order follows the design export's goodrope.css: tokens → type and base → the band context →
   the design system's components → the pages' own styles → motion. A new partial is not picked up
   automatically — add it here. abstracts/ prints no CSS: each partial pulls it in with
   `@use '../abstracts' as *;`.
   ============================================================================= */
/* Barrel: every partial does `@use '../abstracts' as *;` to get tokens, functions and mixins. */
/* =============================================================================
   Design tokens — the design export's :root custom properties, each raw value once.
   Source: good-rope-website/assets/css/goodrope.css (the tokens block, generated from the design
   system's tokens.json). Names are unchanged: base/_root.scss prints them as CSS variables and
   components use only var(--…). This is the only SCSS file allowed to contain colour values
   (tools/check-tokens.mjs enforces it).
   ============================================================================= */
/* -- fluid range, kept for fluid() (the export sizes type with fixed steps, so it is unused today) ---- */
/* -- colour: every colour variable of the export, in its order ------------------------------------- */
/* -- shadows and focus rings, verbatim (unquoted strings: the alpha hexes print as written) ---------- */
/* -- spacing: the 4px scale ------------------------------------------------------------------------ */
/* -- motion ---------------------------------------------------------------------------------------- */
/* -- layout ---------------------------------------------------------------------------------------- */
/* -- type: the three stacks (Archivo at 78% width is the display face) ----------------------------- */
/* -- breakpoints: mq(lg) prints max-width: 1023px, as the export writes it ------------------------- */
/* Round to 4 decimals so the CSS stays readable: round4(1.8035714) → 1.8036 */
/* 24 or 24px → 24 */
/* px → rem on the 16px root: rem(24) → 1.5rem */
/* A size that grows with the window: $min px at 320px wide, $max px from 1440px up.
   fluid(34, 52) → clamp(2.125rem, 1.8036rem + 1.6071vw, 3.25rem) */
/* Breakpoint lookup: bp(md) → 1024px */
/* =============================================================================
   Mixins — media queries and interaction helpers.
   ============================================================================= */
/* -- media queries, desktop-first, exactly as the export writes them:
      mq(lg) → @media (max-width: 1023px); mq-up(lg) → @media (min-width: 1024px) ------------------ */
/* -- hover only where a pointer hovers, so a tap never leaves an element stuck ------------ */
/* Every token as a CSS variable on :root, in the export's order. Components read only these. */
:root {
  --rope-blue: #16599f;
  --rope-blue-light: #6fa9e6;
  --navy: #163051;
  --navy-deep: #0c1d33;
  --safety-yellow: #f3b700;
  --steel-50: #f6f8fa;
  --steel-100: #edf1f5;
  --steel-200: #dce2e9;
  --steel-300: #b9c3ce;
  --steel-400: #7b899a;
  --steel-500: #5e6c7d;
  --steel-600: #4a586a;
  --steel-700: #2e3a4a;
  --steel-800: #1a2636;
  --steel-900: #0e1b2c;
  --surface: #f6f8fa;
  --surface-raised: #ffffff;
  --surface-sunken: #edf1f5;
  --surface-tile: #edf1f5;
  --surface-band: #0c1d33;
  --surface-band-raised: #163051;
  --overlay: #0c1d33b8;
  --line: #dce2e9;
  --line-strong: #7b899a;
  --line-band: #24395a;
  --ink: #0e1b2c;
  --ink-muted: #4a586a;
  --ink-subtle: #5e6c7d;
  --ink-band: #eef3f9;
  --ink-band-muted: #a9b8ca;
  --brand: #16599f;
  --brand-strong: #0f4a87;
  --brand-soft: #e6eff8;
  --on-brand: #ffffff;
  --brand-band: #7fb4ea;
  --signal: #f3b700;
  --signal-strong: #ffc21a;
  --signal-soft: #fff5d6;
  --on-signal: #0e1b2c;
  --signal-ink: #8a5c00;
  --link: #16599f;
  --focus: #16599f;
  --focus-band: #f3b700;
  --success: #1e7a4c;
  --success-soft: #e4f3ea;
  --danger: #c0341d;
  --danger-soft: #fbe9e5;
  --draft: #16599f;
  --draft-faint: #c9d6e4;
  --draft-band: #7fb4ea;
  --draft-band-faint: #1a3150;
  --logo-ink: #16599f;
  --logo-ring: #ffffff;
  --white: #ffffff;
  --shadow-sm: 0 1px 2px #0e1b2c14;
  --shadow-md: 0 1px 2px #0e1b2c0d, 0 12px 24px -12px #0e1b2c40;
  --shadow-lg: 0 2px 6px #0e1b2c12, 0 28px 56px -18px #0e1b2c52;
  --focus-ring: 0 0 0 2px #ffffff, 0 0 0 4px #16599f;
  --focus-ring-band: 0 0 0 2px #0c1d33, 0 0 0 4px #f3b700;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-pill: 999px;
  --duration-micro: 120ms;
  --duration-fast: 180ms;
  --duration-base: 260ms;
  --duration-slow: 420ms;
  --duration-draw: 1200ms;
  --duration-loop: 1400ms;
  --duration-ambient: 16s;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.5, 0, 0.75, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-tension: cubic-bezier(0.34, 1.45, 0.64, 1);
  --container: 1280px;
  --container-prose: 720px;
  --header-height: 84px;
  --utility-height: 36px;
  --z-sticky: 20;
  --z-header: 40;
  --z-menu: 50;
  --z-overlay: 80;
  --z-drawer: 90;
  --font-display: Archivo, "Archivo Narrow", "Arial Narrow", sans-serif;
  --font-sans: Archivo, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Chivo Mono", ui-monospace, "SF Mono", Menlo, monospace;
  color-scheme: only light;
}

/* The export's root adjustments: the phone's safe areas, the scroll offset under the sticky header,
   and the smaller header on phones. */
:root {
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  scroll-padding-top: calc(var(--header-height) + 24px);
}

@media (max-width: 639px) {
  :root {
    --header-height: 72px;
  }
}
/* Archivo and Chivo Mono (SIL Open Font License), served from /fonts so the site works offline — the export's
   fonts.css with root-relative URLs. The two latin files are preloaded by layouts/base.njk. */
/* latin-ext */
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("/fonts/archivo-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("/fonts/archivo-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: "Chivo Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/chivo-mono-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: "Chivo Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/chivo-mono-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: "Chivo Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/chivo-mono-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: "Chivo Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/chivo-mono-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* The type styles, as the export's tokens block defines them: classes in the markup (and the design
   system's names). Display styles are Archivo at 78% width (pages/_shell.scss sets font-stretch). */
.display-xl {
  font-family: var(--font-display);
  font-size: 72px;
  line-height: 72px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.display-lg {
  font-family: var(--font-display);
  font-size: 56px;
  line-height: 58px;
  font-weight: 600;
  letter-spacing: -0.015em;
}

.display-md {
  font-family: var(--font-display);
  font-size: 44px;
  line-height: 48px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.display-sm {
  font-family: var(--font-display);
  font-size: 32px;
  line-height: 36px;
  font-weight: 600;
  letter-spacing: -0.005em;
}

.numeral {
  font-family: var(--font-display);
  font-size: 56px;
  line-height: 56px;
  font-weight: 500;
  letter-spacing: -0.02em;
}

.heading-lg {
  font-family: var(--font-sans);
  font-size: 24px;
  line-height: 30px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.heading-md {
  font-family: var(--font-sans);
  font-size: 20px;
  line-height: 26px;
  font-weight: 600;
  letter-spacing: -0.005em;
}

.heading-sm {
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 24px;
  font-weight: 600;
}

.lead {
  font-family: var(--font-sans);
  font-size: 20px;
  line-height: 30px;
  font-weight: 400;
}

.body {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 26px;
  font-weight: 400;
}

.body-sm {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 22px;
  font-weight: 400;
}

.label {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
}

.action {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 20px;
  font-weight: 600;
}

.caption {
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  letter-spacing: 0.01em;
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.spec {
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
}

.spec-sm {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  letter-spacing: 0.02em;
}

[hidden] {
  display: none !important;
}

/* ===================================================================== base
   The design system's reset and body defaults (bundle.css). The type classes are in _type.scss, the
   tokens in _root.scss. */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 26px;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd {
  margin: 0;
}

::selection {
  background: var(--brand-soft);
  color: var(--ink);
}

.eyebrow {
  text-transform: uppercase;
}

.spec, .spec-sm {
  font-variant-numeric: tabular-nums;
}

/* responsive steps for the display and lead styles (tokens hold the desktop sizes) */
@media (max-width: 767px) {
  .display-xl {
    font-size: 44px;
    line-height: 46px;
  }
  .display-lg {
    font-size: 40px;
    line-height: 42px;
  }
  .display-md {
    font-size: 32px;
    line-height: 36px;
  }
  .display-sm {
    font-size: 26px;
    line-height: 30px;
  }
  .numeral {
    font-size: 44px;
    line-height: 44px;
  }
  .lead {
    font-size: 18px;
    line-height: 28px;
  }
}
/* ============================================================ band context */
/* Navy bands (hero, CTA, footer, utility bar). Components inside read the -band tokens through the usual names. */
.gr-band {
  background-color: var(--surface-band);
  color: var(--ink-band);
  --ink: var(--ink-band);
  --ink-muted: var(--ink-band-muted);
  --ink-subtle: var(--ink-band-muted);
  --line: var(--line-band);
  --line-strong: var(--ink-band-muted);
  --brand: var(--brand-band);
  --brand-strong: var(--ink-band);
  --brand-soft: var(--surface-band-raised);
  --on-brand: var(--surface-band);
  --link: var(--brand-band);
  --surface-raised: var(--surface-band-raised);
  --surface-sunken: var(--surface-band);
  --focus: var(--focus-band);
  --focus-ring: var(--focus-ring-band);
  --draft: var(--draft-band);
  --draft-faint: var(--draft-band-faint);
  --logo-ink: var(--ink-band);
  --logo-ring: transparent;
}

/* -- the design system (bundle.css), in its order -- */
/* ================================================================= layout
   Container, sections, stacks and grids, the blueprint ground, the eyebrow, prose. */
.gr-container {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--space-6));
  margin-inline: auto;
  padding-inline: var(--space-6);
}

.gr-section {
  padding-block: var(--space-24);
}

.gr-section--raised {
  background: var(--surface-raised);
}

.gr-section--sunken {
  background: var(--surface-sunken);
}

.gr-stack {
  display: grid;
  gap: var(--space-8);
}

.gr-grid {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.gr-grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

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

.gr-blueprint {
  background-image: linear-gradient(var(--draft-faint) 1px, transparent 1px), linear-gradient(90deg, var(--draft-faint) 1px, transparent 1px);
  background-size: 24px 24px;
  background-position: -1px -1px;
}

.gr-eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.gr-num {
  font-variant-numeric: tabular-nums lining-nums;
}

.gr-frac {
  font-feature-settings: "frac" 1;
}

.gr-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.gr-prose {
  max-width: var(--container-prose);
  color: var(--ink);
}

.gr-prose > * + * {
  margin-top: var(--space-4);
}

.gr-prose h2 {
  margin-top: var(--space-12);
  font-family: var(--font-display);
  font-size: 32px;
  line-height: 36px;
  font-weight: 600;
  letter-spacing: -0.005em;
}

.gr-prose h3 {
  margin-top: var(--space-8);
  font-size: 20px;
  line-height: 26px;
  font-weight: 600;
}

.gr-prose ul, .gr-prose ol {
  padding-left: 1.25em;
}

.gr-prose li + li {
  margin-top: var(--space-1);
}

.gr-prose li::marker {
  color: var(--brand);
}

.gr-prose a {
  color: var(--link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
  transition: text-decoration-color var(--duration-fast) var(--ease-standard);
}

.gr-prose a:hover {
  text-decoration-color: currentColor;
}

.gr-prose hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin-block: var(--space-10);
}

@media (max-width: 1279px) {
  .gr-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 1023px) {
  .gr-grid, .gr-grid--3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 767px) {
  .gr-section {
    padding-block: var(--space-16);
  }
}
@media (max-width: 639px) {
  .gr-container {
    padding-inline: var(--space-4);
  }
  .gr-grid, .gr-grid--3, .gr-grid--2 {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* -- refinements after review ------------------------------------------------------------------ */
/* true fractions stay legible at small sizes */
.gr-frac {
  font-size: 1.2em;
  line-height: 1;
}

/* phones: catalogue and market cards become compact rows (the rows themselves are in
   components/_category-card.scss and components/_market-card.scss) */
@media (max-width: 639px) {
  .gr-grid {
    gap: var(--space-3);
  }
}
/* ================================================================ reveals
   Scroll reveals: goodrope.js moves data-reveal from "pending" to "in" as an element reaches the viewport. */
[data-reveal=pending] {
  opacity: 0;
  transform: translate3d(0, 16px, 0);
}

[data-reveal=in] {
  opacity: 1;
  transform: none;
  transition: opacity var(--duration-slow) var(--ease-out), transform var(--duration-slow) var(--ease-out);
}

[data-reveal-group=pending] > * {
  opacity: 0;
  transform: translate3d(0, 10px, 0);
}

[data-reveal-group=in] > * {
  opacity: 1;
  transform: none;
  transition: opacity var(--duration-slow) var(--ease-out), transform var(--duration-slow) var(--ease-out);
  transition-delay: calc(var(--i, 0) * 30ms);
}

/* ================================================================== icons */
.gr-icon {
  display: inline-block;
  flex: none;
  vertical-align: middle;
}

/* ============================================================ strand mark
   The seven-wire strand mark (inline SVG): the logo's symbol, the button spinner, the assembling mark. */
.gr-strand {
  display: inline-block;
  flex: none;
  overflow: visible;
  vertical-align: middle;
}

.gr-strand__ring {
  fill: var(--logo-ring);
  stroke: var(--logo-ink);
  stroke-width: 1.1;
}

.gr-strand__fill {
  fill: var(--logo-ink);
}

.gr-strand__twist {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform var(--duration-slow) var(--ease-tension);
}

.gr-strand--twist:hover .gr-strand__twist, .gr-logo:hover .gr-strand--twist .gr-strand__twist, .gr-logo:focus-visible .gr-strand--twist .gr-strand__twist {
  transform: rotate(60deg);
}

.gr-strand__cell, .gr-strand__core {
  transform-box: fill-box;
  transform-origin: center;
}

.gr-strand--assemble .gr-strand__cell {
  opacity: 0;
  transform: translate(var(--dx), var(--dy)) scale(0.7);
}

.gr-strand--assemble .gr-strand__core {
  opacity: 0;
}

.gr-strand--assemble.is-in .gr-strand__cell {
  animation: gr-strand-in var(--duration-slow) var(--ease-out) both;
  animation-delay: calc(var(--i) * 70ms);
}

.gr-strand--assemble.is-in .gr-strand__core {
  animation: gr-fade-in var(--duration-slow) var(--ease-out) 460ms both;
}

.gr-strand--spin .gr-strand__twist {
  animation: gr-strand-twist var(--duration-loop) var(--ease-tension) infinite;
}

.gr-strand--spin .gr-strand__fill {
  animation: gr-strand-pulse var(--duration-loop) var(--ease-in-out) infinite;
  animation-delay: calc(var(--i, 0) * 90ms);
}

@keyframes gr-strand-in {
  from {
    opacity: 0;
    transform: translate(var(--dx), var(--dy)) scale(0.7);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes gr-strand-twist {
  0% {
    transform: rotate(0deg);
  }
  45%, 100% {
    transform: rotate(60deg);
  }
}
@keyframes gr-strand-pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
}
/* =================================================================== logo
   Strand mark + wordmark. --auto follows the band context, --color and --reversed force a version.
   The export writes #ffffff for the forced versions: var(--white) keeps them white inside a .gr-band,
   where every other white token is remapped. */
.gr-logo {
  display: inline-flex;
  align-items: center;
  flex: none;
  color: inherit;
  text-decoration: none;
  border-radius: var(--radius-sm);
}

.gr-logo:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.gr-logo--color {
  --logo-ink: var(--rope-blue);
  --logo-ring: var(--white);
}

.gr-logo--reversed {
  --logo-ink: var(--white);
  --logo-ring: transparent;
}

.gr-logo__wm {
  display: inline-block;
  aspect-ratio: 382/43;
}

.gr-logo__wm img {
  display: block;
  height: 100%;
  width: auto;
  -webkit-user-select: none;
          user-select: none;
}

.gr-logo__wm-rev {
  display: none !important;
}

.gr-band .gr-logo--auto .gr-logo__wm-color, .gr-logo--reversed .gr-logo__wm-color {
  display: none;
}

.gr-band .gr-logo--auto .gr-logo__wm-rev, .gr-logo--reversed .gr-logo__wm-rev {
  display: block !important;
}

/* ============================================================== rope helix
   The laid-rope line drawing that runs along the CTA band and the footer. The mask only uses the
   gradient's alpha, so any opaque token stands in for the export's #000. */
.gr-rope {
  display: block;
  color: var(--draft);
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, var(--ink) 6%, var(--ink) 94%, transparent);
}

.gr-rope__lay {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.25;
}

.gr-rope__shade {
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
  opacity: 0.32;
}

.gr-rope__edge {
  stroke: currentColor;
  stroke-width: 1.25;
}

.gr-rope--cable .gr-rope__lay {
  stroke-width: 1;
}

.gr-rope--cable .gr-rope__shade {
  display: none;
}

.gr-rope__track {
  animation: gr-rope-lay calc(var(--duration-ambient) / var(--rope-speed, 1)) linear infinite;
}

.gr-rope.is-paused .gr-rope__track {
  animation-play-state: paused;
}

@keyframes gr-rope-lay {
  to {
    transform: translateX(calc(var(--rope-pitch) * -8));
  }
}
/* ========================================================== cross-section
   The cable cross-section drawing (hero and page heads): wires pop in, the envelope draws, the dimension fades. */
.gr-xs {
  display: block;
  overflow: visible;
  max-width: 100%;
  height: auto;
  color: var(--draft);
}

.gr-xs__axis {
  fill: none;
  stroke: var(--draft-faint);
  stroke-width: 1;
  stroke-dasharray: 3 5;
  opacity: 0;
  transition: opacity var(--duration-slow) var(--ease-out) 200ms;
}

.gr-xs.is-in .gr-xs__axis {
  opacity: 1;
}

.gr-xs__wire {
  fill: color-mix(in srgb, var(--draft) 13%, transparent);
  stroke: var(--draft);
  stroke-width: 1;
  transform-box: fill-box;
  transform-origin: center;
}

.gr-xs:not(.is-in) .gr-xs__wire {
  opacity: 0;
  transform: scale(0.2);
}

.gr-xs.is-in .gr-xs__wire {
  animation: gr-pop var(--duration-slow) var(--ease-out) both;
  animation-delay: var(--d);
}

.gr-xs__strand-glow {
  fill: var(--signal);
  opacity: 0;
}

.gr-xs--highlight.is-in .gr-xs__strand--outer .gr-xs__strand-glow {
  animation: gr-xs-glow 7.2s var(--ease-in-out) infinite;
  animation-delay: calc(2.4s + var(--s) * 1.2s);
}

.gr-xs__envelope {
  fill: none;
  stroke: var(--draft);
  stroke-width: 1.25;
}

.gr-xs.is-in .gr-xs__envelope {
  animation: gr-draw var(--duration-draw) var(--ease-in-out) 800ms both;
}

.gr-xs.is-static .gr-xs__envelope {
  stroke-dashoffset: 0 !important;
}

.gr-xs__dim {
  opacity: 0;
}

.gr-xs.is-in .gr-xs__dim {
  animation: gr-fade-in var(--duration-slow) var(--ease-out) 1700ms both;
}

.gr-xs__dim-line, .gr-xs__dim-ext, .gr-xs__dim-arrow {
  fill: none;
  stroke: var(--draft);
  stroke-width: 1;
}

.gr-xs__dim-ext {
  stroke-dasharray: 2 3;
}

.gr-xs__dim-gap {
  fill: none;
}

.gr-xs__dim-label {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  fill: var(--ink);
  transform: translateY(-14px);
}

@keyframes gr-xs-glow {
  0%, 100% {
    opacity: 0;
  }
  8% {
    opacity: 0.3;
  }
  18% {
    opacity: 0;
  }
}
/* -- refinements after review ------------------------------------------------------------------ */
/* true fractions stay legible at small sizes */
.gr-xs__dim-label .gr-frac {
  font-size: 1.35em;
}

/* ========================================================= dimension line
   The design system's .gr-dim (an HTML dimension line that draws itself) is dropped: no export page uses
   it (a grep for gr-dim over every page of the export finds none, and the homepage's assembly figure
   draws its own dimension line with .asm__dim-* in pages/_home.scss). Its rules are in the export's
   goodrope.css, section "dimension line", should a page ever need them. This partial prints nothing. */
/* ================================================================ buttons */
.gr-btn {
  --btn-h: 44px;
  --btn-px: 18px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: var(--btn-h);
  padding: 0 var(--btn-px);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 20px;
  font-weight: 600;
  letter-spacing: 0;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  -webkit-user-select: none;
          user-select: none;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--duration-micro) var(--ease-standard), border-color var(--duration-micro) var(--ease-standard), color var(--duration-micro) var(--ease-standard), box-shadow var(--duration-micro) var(--ease-standard), transform var(--duration-micro) var(--ease-standard);
}

.gr-btn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.gr-btn:active:not(:disabled) {
  transform: translateY(1px);
}

.gr-btn--sm {
  --btn-h: 36px;
  --btn-px: 14px;
  font-size: 14px;
}

.gr-btn--lg {
  --btn-h: 52px;
  --btn-px: 24px;
  font-size: 16px;
}

.gr-btn--block {
  display: flex;
  width: 100%;
}

.gr-btn--icon {
  width: var(--btn-h);
  padding: 0;
}

.gr-btn--primary {
  background: var(--signal);
  color: var(--on-signal);
}

/* the hover shine: white at 42% (the export's rgb(255 255 255 / 0.42)); var(--white) keeps it white inside a band */
.gr-btn--primary::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 35%, color-mix(in srgb, var(--white) 42%, transparent) 50%, transparent 65%);
  transform: translateX(-120%);
  pointer-events: none;
}

.gr-btn--primary:hover {
  background: var(--signal-strong);
}

.gr-btn--primary:hover::after {
  transform: translateX(120%);
  transition: transform 700ms var(--ease-out);
}

.gr-btn--secondary {
  background: var(--brand);
  color: var(--on-brand);
}

.gr-btn--secondary:hover {
  background: var(--brand-strong);
}

.gr-btn--outline {
  background: transparent;
  color: var(--ink);
  border-color: var(--line-strong);
}

.gr-btn--outline:hover {
  border-color: var(--ink);
  background: color-mix(in srgb, var(--ink) 5%, transparent);
}

.gr-btn--ghost {
  background: transparent;
  color: var(--ink);
}

.gr-btn--ghost:hover {
  background: color-mix(in srgb, var(--ink) 7%, transparent);
}

.gr-btn:disabled, .gr-btn[aria-disabled=true] {
  opacity: 0.45;
  cursor: not-allowed;
}

.gr-btn__label {
  display: inline-block;
  transition: opacity var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard);
}

.gr-btn__icon {
  display: inline-flex;
  transition: transform var(--duration-fast) var(--ease-tension), opacity var(--duration-fast) var(--ease-standard);
}

.gr-btn:hover .gr-btn__icon--x {
  transform: translateX(3px);
}

.gr-btn:hover .gr-btn__icon--xl {
  transform: translateX(-3px);
}

.gr-btn:hover .gr-btn__icon--diag {
  transform: translate(2px, -2px);
}

.gr-btn:hover .gr-btn__icon--y {
  transform: translateY(2px);
}

.gr-btn:hover .gr-btn__icon--spin {
  transform: rotate(90deg);
}

.gr-btn:hover .gr-btn__icon--ring svg {
  animation: gr-ring 640ms var(--ease-in-out);
}

.gr-btn[aria-busy=true] {
  cursor: progress;
}

.gr-btn[aria-busy=true] .gr-btn__label, .gr-btn[aria-busy=true] .gr-btn__icon {
  opacity: 0;
  transform: translateY(-6px);
}

.gr-btn__spinner {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  --logo-ink: currentColor;
  --logo-ring: transparent;
  animation: gr-fade-in var(--duration-fast) var(--ease-out) both;
}

/* ================================================================== links */
.gr-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--link);
  text-decoration: none;
  cursor: pointer;
  border-radius: 2px;
}

.gr-link:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.gr-link__text {
  background-image: linear-gradient(currentColor, currentColor), linear-gradient(color-mix(in srgb, currentColor 32%, transparent), color-mix(in srgb, currentColor 32%, transparent));
  background-repeat: no-repeat;
  background-position: 0 100%, 0 100%;
  background-size: 0% 1px, 100% 1px;
  padding-bottom: 1px;
  transition: background-size var(--duration-base) var(--ease-standard);
}

.gr-link:hover .gr-link__text {
  background-size: 100% 1px, 100% 1px;
}

.gr-link--inline {
  display: inline;
}

.gr-link--inline .gr-link__icon {
  display: inline-flex;
  vertical-align: -2px;
  margin-left: 2px;
}

.gr-link--standalone {
  font-weight: 600;
  font-size: 15px;
  line-height: 22px;
  gap: 6px;
}

.gr-link--standalone .gr-link__text {
  background-size: 0% 1px, 0% 1px;
}

.gr-link--standalone:hover .gr-link__text {
  background-size: 100% 1px, 0% 1px;
}

.gr-link--quiet {
  color: var(--ink);
}

.gr-link--quiet .gr-link__text {
  background-size: 0% 1px, 0% 1px;
}

.gr-link--quiet:hover {
  color: var(--brand);
}

.gr-link__icon {
  display: inline-flex;
  transition: transform var(--duration-fast) var(--ease-tension);
}

.gr-link:hover .gr-link__icon--x {
  transform: translateX(3px);
}

.gr-link:hover .gr-link__icon--diag {
  transform: translate(2px, -2px);
}

.gr-link:hover .gr-link__icon--y {
  transform: translateY(2px);
}

/* ================================================================= badges */
.gr-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 22px;
  padding: 0 8px;
  border: 1px solid transparent;
  border-radius: var(--radius-xs);
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  white-space: nowrap;
}

.gr-badge--mono {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.gr-badge--soft.gr-badge--neutral {
  background: var(--surface-sunken);
  border-color: var(--line);
  color: var(--ink-muted);
}

.gr-badge--soft.gr-badge--brand {
  background: var(--brand-soft);
  color: var(--brand);
}

.gr-badge--soft.gr-badge--signal {
  background: var(--signal-soft);
  color: var(--signal-ink);
}

.gr-badge--soft.gr-badge--success {
  background: var(--success-soft);
  color: var(--success);
}

.gr-badge--soft.gr-badge--danger {
  background: var(--danger-soft);
  color: var(--danger);
}

.gr-badge--outline {
  background: transparent;
  border-color: var(--line-strong);
  color: var(--ink-muted);
}

.gr-badge--outline.gr-badge--brand {
  border-color: var(--brand);
  color: var(--brand);
}

.gr-badge--outline.gr-badge--signal {
  border-color: var(--signal-ink);
  color: var(--signal-ink);
}

.gr-badge--outline.gr-badge--success {
  border-color: var(--success);
  color: var(--success);
}

.gr-badge--outline.gr-badge--danger {
  border-color: var(--danger);
  color: var(--danger);
}

.gr-badge--solid.gr-badge--neutral {
  background: var(--ink);
  color: var(--surface-raised);
}

.gr-badge--solid.gr-badge--brand {
  background: var(--brand);
  color: var(--on-brand);
}

.gr-badge--solid.gr-badge--signal {
  background: var(--signal);
  color: var(--on-signal);
}

.gr-badge--solid.gr-badge--success {
  background: var(--success);
  color: var(--surface-raised);
}

.gr-badge--solid.gr-badge--danger {
  background: var(--danger);
  color: var(--surface-raised);
}

/* ================================================================= header
   Utility bar, sticky bar, nav with its sliding indicator, the Products/Markets mega menus and the
   mobile nav groups (inside the menu drawer). The page layer's header adjustments are in pages/_shell.scss. */
.gr-header {
  position: relative;
  z-index: var(--z-header);
}

.gr-header--sticky {
  position: sticky;
  top: calc(var(--utility-height) * -1);
}

.gr-header__utility {
  height: var(--utility-height);
}

.gr-header__utility-inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
}

.gr-header__utility .gr-eyebrow {
  font-size: 11px;
  color: var(--ink-subtle);
}

.gr-header__utility-links {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}

.gr-header__utility-links > * {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  line-height: 20px;
  color: var(--ink-muted);
  text-decoration: none;
}

.gr-header__utility-links svg {
  color: var(--draft);
}

.gr-header__utility-links a {
  color: var(--ink);
  font-weight: 600;
  transition: color var(--duration-micro) var(--ease-standard);
}

.gr-header__utility-links a:hover {
  color: var(--signal);
}

.gr-header__bar {
  position: relative;
  z-index: 2;
  background: color-mix(in srgb, var(--surface-raised) 90%, transparent);
  backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid var(--line);
  transition: box-shadow var(--duration-base) var(--ease-standard);
}

.gr-header.is-scrolled .gr-header__bar, .gr-header.is-menu-open .gr-header__bar {
  box-shadow: var(--shadow-sm);
}

.gr-header__inner {
  position: relative;
  height: var(--header-height);
  display: flex;
  align-items: center;
  gap: var(--space-6);
  transition: height var(--duration-base) var(--ease-standard);
}

.gr-header.is-scrolled .gr-header__inner {
  height: 60px;
}

.gr-header__nav {
  position: relative;
  align-self: stretch;
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: var(--space-4);
}

.gr-header__link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 40px;
  padding: 0 var(--space-3);
  border: 0;
  background: none;
  border-radius: var(--radius-sm);
  color: var(--ink-muted);
  font: inherit;
  font-size: 15px;
  line-height: 20px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: color var(--duration-micro) var(--ease-standard);
}

.gr-header__link:hover, .gr-header__link.is-current, .gr-header__link[aria-expanded=true] {
  color: var(--ink);
}

.gr-header__link:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.gr-header__chev {
  color: var(--ink-subtle);
  transition: transform var(--duration-base) var(--ease-standard), color var(--duration-base) var(--ease-standard);
}

.gr-header__link[aria-expanded=true] .gr-header__chev {
  transform: rotate(180deg);
  color: var(--brand);
}

.gr-header__indicator {
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 2px;
  background: var(--brand);
  opacity: 0;
  pointer-events: none;
}

.gr-header__indicator.is-on {
  opacity: 1;
}

.gr-header__indicator.is-ready {
  transition: transform var(--duration-base) var(--ease-out), width var(--duration-base) var(--ease-out), opacity var(--duration-fast) var(--ease-standard);
}

.gr-header__actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.gr-header__phone {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  height: 40px;
  padding: 0 var(--space-2);
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-size: 15px;
  line-height: 20px;
  font-weight: 600;
  text-decoration: none;
  font-variant-numeric: tabular-nums;
}

.gr-header__phone svg {
  color: var(--brand);
}

.gr-header__phone:hover svg {
  animation: gr-ring 640ms var(--ease-in-out);
}

.gr-header__phone:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.gr-header__burger {
  display: none;
}

.gr-mega {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 1;
  background: var(--surface-raised);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out), visibility 0s linear var(--duration-base);
}

.gr-mega.is-open {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}

.gr-mega__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: var(--space-8);
  padding-block: var(--space-6) var(--space-8);
}

.gr-mega__inner--markets {
  grid-template-columns: minmax(0, 1fr);
}

.gr-mega__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-1) var(--space-6);
  align-content: start;
}

.gr-mega__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  color: var(--ink);
  text-decoration: none;
  transition: background-color var(--duration-micro) var(--ease-standard);
}

.gr-mega__item:hover {
  background: var(--surface-sunken);
}

.gr-mega__item:focus-visible, .gr-mega__row:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.gr-mega__icon {
  flex: none;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-sm);
  background: var(--brand-soft);
  color: var(--brand);
  transition: background-color var(--duration-base) var(--ease-standard), color var(--duration-base) var(--ease-standard);
}

.gr-mega__icon--sm {
  width: 32px;
  height: 32px;
}

.gr-mega__item:hover .gr-mega__icon, .gr-mega__row:hover .gr-mega__icon {
  background: var(--brand);
  color: var(--on-brand);
}

.gr-mega__text {
  display: grid;
  gap: 2px;
}

.gr-mega__name {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  line-height: 22px;
  font-weight: 600;
}

.gr-mega__desc {
  font-size: 13px;
  line-height: 20px;
  color: var(--ink-muted);
}

.gr-mega__arrow {
  color: var(--brand);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-tension);
}

.gr-mega__item:hover .gr-mega__arrow, .gr-mega__row:hover .gr-mega__arrow {
  opacity: 1;
  transform: none;
}

.gr-mega__aside {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background-image: linear-gradient(var(--draft-faint) 1px, transparent 1px), linear-gradient(90deg, var(--draft-faint) 1px, transparent 1px);
  background-size: 24px 24px;
}

.gr-mega__aside-body {
  color: var(--ink-muted);
}

.gr-mega__aside-actions {
  margin-top: auto;
  display: grid;
  gap: var(--space-3);
  justify-items: start;
  padding-top: var(--space-4);
}

.gr-mega__phone {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
}

.gr-mega__phone:hover {
  color: var(--signal);
}

.gr-mega__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-1) var(--space-4);
}

.gr-mega__row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  color: var(--ink);
  text-decoration: none;
  transition: background-color var(--duration-micro) var(--ease-standard);
}

.gr-mega__row:hover {
  background: var(--surface-sunken);
}

.gr-mega__row .gr-mega__name {
  flex: 1;
  font-weight: 500;
}

.gr-mega__count {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 16px;
  color: var(--ink-subtle);
}

.gr-mega.is-open .gr-mega__item, .gr-mega.is-open .gr-mega__row, .gr-mega.is-open .gr-mega__aside {
  animation: gr-fade-up var(--duration-base) var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 22ms + 40ms);
}

.gr-mnav {
  display: grid;
}

.gr-mnav__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--space-4) 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: none;
  color: var(--ink);
  font: inherit;
  font-size: 18px;
  line-height: 26px;
  font-weight: 600;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.gr-mnav__trigger:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.gr-mnav__trigger svg {
  color: var(--ink-subtle);
  transition: transform var(--duration-base) var(--ease-standard);
}

.gr-mnav__group.is-open .gr-mnav__trigger svg {
  transform: rotate(180deg);
  color: var(--brand);
}

.gr-mnav__panel {
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
  transition: grid-template-rows var(--duration-slow) var(--ease-standard), visibility 0s linear var(--duration-slow);
}

.gr-mnav__group.is-open .gr-mnav__panel {
  grid-template-rows: 1fr;
  visibility: visible;
  transition-delay: 0s;
}

.gr-mnav__panel > div {
  overflow: hidden;
  display: grid;
}

.gr-mnav__sub {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-2);
  color: var(--ink-muted);
  font-size: 15px;
  line-height: 22px;
  text-decoration: none;
}

.gr-mnav__sub:first-child {
  margin-top: var(--space-2);
}

.gr-mnav__sub:last-child {
  margin-bottom: var(--space-3);
}

.gr-mnav__sub svg {
  color: var(--brand);
}

.gr-mnav__sub:hover {
  color: var(--ink);
}

@media (max-width: 1023px) {
  .gr-header--sticky {
    top: 0;
  }
  .gr-header__utility, .gr-header__nav, .gr-header__phone span, .gr-mega {
    display: none;
  }
  .gr-header__burger {
    display: inline-flex;
  }
}
@media (max-width: 479px) {
  .gr-header__cta {
    display: none;
  }
}
/* ================================================================= drawer
   The right-hand panel behind the menu and the quote form, with its scrim. */
.gr-drawer {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  visibility: hidden;
  transition: visibility 0s linear var(--duration-slow);
}

.gr-drawer.is-open {
  visibility: visible;
  transition-delay: 0s;
}

.gr-drawer__scrim {
  position: absolute;
  inset: 0;
  background: var(--overlay);
  opacity: 0;
  transition: opacity var(--duration-slow) var(--ease-standard);
}

.gr-drawer.is-open .gr-drawer__scrim {
  opacity: 1;
}

.gr-drawer__panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(var(--drawer-w, 440px), 100vw);
  display: flex;
  flex-direction: column;
  background: var(--surface-raised);
  box-shadow: var(--shadow-lg);
  transform: translateX(100%);
  transition: transform var(--duration-slow) var(--ease-in);
  outline: none;
}

.gr-drawer.is-open .gr-drawer__panel {
  transform: none;
  transition-timing-function: var(--ease-out);
}

.gr-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-4) var(--space-4) var(--space-6);
  border-bottom: 1px solid var(--line);
}

.gr-drawer__title {
  color: var(--ink);
}

.gr-drawer__body {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--space-4) var(--space-6) var(--space-6);
}

.gr-drawer__foot {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--line);
  background: var(--surface);
}

/* -- refinements after review ------------------------------------------------------------------ */
/* Drawers: let clicks pass through while the panel animates closed */
.gr-drawer:not(.is-open) {
  pointer-events: none;
}

/* ============================================================ breadcrumbs */
.gr-crumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.gr-crumbs li {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--ink-subtle);
}

.gr-crumbs a {
  color: var(--ink-muted);
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100%/0% 1px no-repeat;
  transition: background-size var(--duration-fast) var(--ease-standard), color var(--duration-micro) var(--ease-standard);
}

.gr-crumbs a:hover {
  color: var(--brand);
  background-size: 100% 1px;
}

.gr-crumbs a:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: 2px;
}

.gr-crumbs [aria-current] {
  color: var(--ink);
}

.gr-crumbs__sep {
  color: var(--line-strong);
}

/* =========================================================== category nav
   The sticky side list on the catalogue pages, a select below 1024px. The page layer's offsets are in
   pages/_catalogue.scss. */
.gr-catnav {
  position: sticky;
  top: calc(var(--header-height) + var(--space-6));
  display: grid;
  gap: var(--space-3);
}

.gr-catnav__title {
  color: var(--ink-muted);
}

.gr-catnav__list {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
  border-left: 1px solid var(--line);
}

.gr-catnav__bar {
  position: absolute;
  left: -1px;
  top: 0;
  width: 2px;
  background: var(--brand);
  opacity: 0;
}

.gr-catnav__bar.is-on {
  opacity: 1;
}

.gr-catnav__bar.is-ready {
  transition: transform var(--duration-base) var(--ease-out), height var(--duration-base) var(--ease-out), opacity var(--duration-fast) var(--ease-standard);
}

.gr-catnav__link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 9px var(--space-4);
  color: var(--ink-muted);
  font-size: 15px;
  line-height: 22px;
  font-weight: 500;
  text-decoration: none;
  transition: color var(--duration-micro) var(--ease-standard), background-color var(--duration-micro) var(--ease-standard);
}

.gr-catnav__link > span:first-of-type {
  flex: 1;
}

.gr-catnav__link svg {
  color: var(--ink-subtle);
  transition: color var(--duration-micro) var(--ease-standard);
}

.gr-catnav__link:hover {
  color: var(--ink);
}

.gr-catnav__link:hover svg, .gr-catnav__link.is-active svg {
  color: var(--brand);
}

.gr-catnav__link.is-active {
  color: var(--ink);
  font-weight: 600;
  background: linear-gradient(90deg, var(--brand-soft), transparent 85%);
}

.gr-catnav__link:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.gr-catnav__count {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 16px;
  color: var(--ink-subtle);
}

.gr-catnav__select {
  display: none;
  position: relative;
}

.gr-catnav__select select {
  width: 100%;
  height: 44px;
  padding: 0 40px 0 var(--space-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  color: var(--ink);
  font: inherit;
  font-size: 16px;
  appearance: none;
}

.gr-catnav__select select:focus {
  outline: none;
  border-color: var(--focus);
  box-shadow: 0 0 0 1px var(--focus);
}

.gr-catnav__select svg {
  position: absolute;
  right: 12px;
  top: 13px;
  pointer-events: none;
  color: var(--ink-muted);
}

@media (max-width: 1023px) {
  .gr-catnav {
    position: static;
  }
  .gr-catnav__list {
    display: none;
  }
  .gr-catnav__select {
    display: block;
  }
}
/* =================================================================== tabs
   Segmented and underline tabs with a sliding indicator (goodrope.js measures it). */
.gr-tabs {
  position: relative;
  display: inline-flex;
  align-items: center;
  max-width: 100%;
}

.gr-tabs--segmented {
  gap: 2px;
  padding: 3px;
  background: var(--surface-sunken);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}

.gr-tabs__tab {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 var(--space-4);
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--ink-muted);
  font: inherit;
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--duration-base) var(--ease-standard);
}

.gr-tabs__tab:hover, .gr-tabs__tab.is-active {
  color: var(--ink);
}

.gr-tabs__tab:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.gr-tabs--sm .gr-tabs__tab {
  height: 28px;
  padding: 0 var(--space-3);
  font-size: 13px;
}

.gr-tabs__ind {
  position: absolute;
  left: 0;
  top: 3px;
  bottom: 3px;
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  box-shadow: var(--shadow-sm), 0 0 0 1px var(--line);
  opacity: 0;
  pointer-events: none;
}

.gr-tabs__ind.is-ready {
  opacity: 1;
  transition: transform var(--duration-base) var(--ease-out), width var(--duration-base) var(--ease-out);
}

.gr-tabs--underline {
  gap: var(--space-6);
  border-bottom: 1px solid var(--line);
}

.gr-tabs--underline .gr-tabs__tab {
  height: 44px;
  padding: 0;
  border-radius: 0;
}

.gr-tabs--underline .gr-tabs__ind {
  top: auto;
  bottom: -1px;
  height: 2px;
  border-radius: 0;
  background: var(--brand);
  box-shadow: none;
}

.gr-tabs__count {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 16px;
  color: var(--ink-subtle);
}

/* ================================================================= footer
   The navy footer (a .gr-band) with the rope helix along its top edge. The page layer's two footer
   adjustments are in pages/_shell.scss. */
.gr-footer {
  position: relative;
  padding-top: var(--space-16);
}

.gr-footer__rope {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  opacity: 0.5;
}

.gr-footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr);
  gap: var(--space-16);
  padding-bottom: var(--space-12);
}

.gr-footer__brand {
  display: grid;
  gap: var(--space-5);
  align-content: start;
  justify-items: start;
}

.gr-footer__blurb {
  max-width: 380px;
  color: var(--ink-muted);
}

.gr-footer__contact {
  display: grid;
  gap: var(--space-3);
  font-style: normal;
  font-size: 14px;
  line-height: 22px;
  color: var(--ink-muted);
}

.gr-footer__phone {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--ink);
  font-size: 18px;
  line-height: 26px;
  font-weight: 600;
  text-decoration: none;
  font-variant-numeric: tabular-nums;
  transition: color var(--duration-micro) var(--ease-standard);
}

.gr-footer__phone:hover {
  color: var(--signal);
}

.gr-footer__cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-8);
}

.gr-footer__cols .gr-eyebrow {
  margin-bottom: var(--space-4);
  color: var(--ink-subtle);
}

.gr-footer__cols ul {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.gr-footer__cols a {
  color: var(--ink-muted);
  font-size: 14px;
  line-height: 22px;
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100%/0% 1px no-repeat;
  transition: color var(--duration-micro) var(--ease-standard), background-size var(--duration-base) var(--ease-standard);
}

.gr-footer__cols a:hover {
  color: var(--ink);
  background-size: 100% 1px;
}

.gr-footer a:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: 2px;
}

.gr-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-5);
  border-top: 1px solid var(--line);
  color: var(--ink-subtle);
  font-size: 13px;
  line-height: 20px;
}

.gr-footer__bottom a {
  color: var(--ink-muted);
}

.gr-footer__bottom a:hover {
  color: var(--ink);
}

@media (max-width: 1023px) {
  .gr-footer__top {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-10);
  }
}
@media (max-width: 639px) {
  .gr-footer__cols {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
/* =================================================================== hero
   The design system's hero: copy on the left, the cross-section drawing with callouts on the right, a
   blueprint grid fading in behind. The homepage's compact version is in pages/_home.scss. The grid's mask
   only uses the gradient's alpha, so var(--ink) stands in for the export's #000. */
.gr-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.gr-hero__grid {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: linear-gradient(var(--draft-faint) 1px, transparent 1px), linear-gradient(90deg, var(--draft-faint) 1px, transparent 1px);
  background-size: 24px 24px;
  background-position: center;
  mask-image: radial-gradient(ellipse 70% 90% at 74% 50%, var(--ink) 20%, transparent 78%);
  animation: gr-fade-in 1.2s var(--ease-out) both;
}

.gr-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: center;
  gap: var(--space-12);
  min-height: 620px;
  padding-block: var(--space-20);
}

.gr-hero__copy {
  display: grid;
  gap: var(--space-6);
  align-content: center;
}

.gr-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  animation: gr-fade-up var(--duration-slow) var(--ease-out) 60ms both;
}

.gr-hero__tick {
  flex: none;
  width: 10px;
  height: 11px;
  background: var(--signal);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}

.gr-hero__title {
  max-width: 12.5em;
  color: var(--ink);
  text-wrap: balance;
}

.gr-hero__lead {
  max-width: 34em;
  color: var(--ink-muted);
  text-wrap: pretty;
  animation: gr-fade-up var(--duration-slow) var(--ease-out) 420ms both;
}

.gr-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  animation: gr-fade-up var(--duration-slow) var(--ease-out) 520ms both;
}

.gr-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-6);
  margin: var(--space-2) 0 0;
  padding: var(--space-5) 0 0;
  list-style: none;
  border-top: 1px solid var(--line);
  color: var(--ink-muted);
  font-size: 14px;
  line-height: 20px;
  animation: gr-fade-up var(--duration-slow) var(--ease-out) 620ms both;
}

.gr-hero__meta li {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.gr-hero__meta svg {
  color: var(--draft);
}

.gr-hero__meta a {
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
  font-variant-numeric: tabular-nums;
}

.gr-hero__meta a:hover {
  color: var(--signal);
}

.gr-hero__art {
  position: relative;
  display: grid;
  place-items: center;
}

.gr-hero__art .gr-xs {
  width: 100%;
  max-width: 420px;
}

.gr-hero__callout {
  position: absolute;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  white-space: nowrap;
  animation: gr-fade-in var(--duration-slow) var(--ease-out) 2.1s both;
}

.gr-hero__callout-line {
  width: 56px;
  height: 1px;
  background: var(--draft);
  transform-origin: left center;
  animation: gr-scale-x var(--duration-base) var(--ease-out) 2s both;
}

.gr-hero__callout--a {
  top: 21%;
  right: calc(50% + 128px);
}

.gr-hero__callout--b {
  bottom: 31%;
  right: calc(50% + 150px);
}

.gr-word {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding: 0 0.04em 0.18em;
  margin: 0 -0.04em -0.18em;
}

.gr-word__in {
  display: inline-block;
  animation: gr-word-in var(--duration-slow) var(--ease-out) both;
  animation-delay: calc(140ms + var(--i) * 45ms);
}

@media (max-width: 1023px) {
  .gr-hero__inner {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
    padding-block: var(--space-16);
    gap: var(--space-10);
  }
  .gr-hero__art .gr-xs {
    max-width: 300px;
  }
  .gr-hero__callout {
    display: none;
  }
}
/* ========================================================= section header */
.gr-sh {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-8);
}

.gr-sh__text {
  display: grid;
  gap: var(--space-3);
  max-width: 760px;
}

.gr-sh__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.gr-sh__index {
  color: var(--brand);
}

.gr-sh__rule {
  width: 32px;
  height: 1px;
  background: currentColor;
  transform-origin: left center;
}

.gr-sh[data-reveal=pending] .gr-sh__rule {
  transform: scaleX(0);
}

.gr-sh[data-reveal=in] .gr-sh__rule {
  transform: none;
  transition: transform var(--duration-slow) var(--ease-out) 160ms;
}

.gr-sh__title {
  color: var(--ink);
  text-wrap: balance;
}

.gr-sh__lead {
  max-width: 640px;
  color: var(--ink-muted);
  text-wrap: pretty;
}

.gr-sh__action {
  flex: none;
}

.gr-sh--center {
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.gr-sh--center .gr-sh__text {
  justify-items: center;
}

@media (max-width: 767px) {
  .gr-sh {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-5);
  }
}
/* =============================================================== CTA band
   The quote band (a .gr-band) with the rope helix and a blueprint grid on its right. The grid's mask only
   uses the gradient's alpha, so var(--ink) stands in for the export's #000. */
.gr-cta {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding-block: var(--space-20);
}

.gr-cta__rope {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  opacity: 0.6;
}

.gr-cta__grid {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: linear-gradient(var(--draft-faint) 1px, transparent 1px), linear-gradient(90deg, var(--draft-faint) 1px, transparent 1px);
  background-size: 24px 24px;
  mask-image: linear-gradient(90deg, transparent 35%, var(--ink));
}

.gr-cta__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-10);
}

.gr-cta__copy {
  display: grid;
  gap: var(--space-3);
  max-width: 620px;
}

.gr-cta__title {
  color: var(--ink);
  text-wrap: balance;
}

.gr-cta__body {
  color: var(--ink-muted);
}

.gr-cta__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-6);
}

.gr-cta__phone {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--ink);
  text-decoration: none;
  border-radius: var(--radius-sm);
}

.gr-cta__phone:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.gr-cta__phone-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  color: var(--signal);
  transition: border-color var(--duration-base) var(--ease-standard), background-color var(--duration-base) var(--ease-standard);
}

.gr-cta__phone:hover .gr-cta__phone-icon {
  border-color: var(--signal);
}

.gr-cta__phone:hover .gr-cta__phone-icon svg {
  animation: gr-ring 640ms var(--ease-in-out);
}

.gr-cta__phone-label {
  display: block;
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.gr-cta__phone-num {
  display: block;
  font-family: var(--font-display);
  font-size: 28px;
  line-height: 32px;
  font-weight: 600;
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
}

/* ============================================================== key facts
   The numbers row: each value's characters rise in, a brand rule grows over each item. The homepage's
   rest-state overrides (.facts-band) are in pages/_home.scss. */
.gr-facts {
  display: grid;
  grid-template-columns: repeat(var(--n), minmax(0, 1fr));
  margin: 0;
  border-top: 1px solid var(--line);
}

.gr-facts__item {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-6) var(--space-6) 0 0;
}

.gr-facts__item + .gr-facts__item {
  padding-left: var(--space-6);
  border-left: 1px solid var(--line);
}

.gr-facts__item::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 40px;
  height: 2px;
  background: var(--brand);
  transform-origin: left center;
  transform: scaleX(0);
}

.gr-facts__item + .gr-facts__item::before {
  left: var(--space-6);
}

.gr-facts.is-in .gr-facts__item::before {
  transform: none;
  transition: transform var(--duration-slow) var(--ease-out);
  transition-delay: calc(var(--i) * 90ms + 200ms);
}

.gr-facts__value {
  order: -1;
  display: flex;
  margin: 0;
  color: var(--ink);
}

.gr-facts__label {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.gr-facts__detail {
  margin: 0;
  color: var(--ink-muted);
  font-size: 14px;
  line-height: 22px;
}

.gr-facts__char {
  display: inline-block;
  overflow: hidden;
  padding-bottom: 0.08em;
  margin-bottom: -0.08em;
}

.gr-facts__char > span {
  display: inline-block;
  transform: translateY(105%);
}

.gr-facts.is-in .gr-facts__char > span {
  transform: none;
  transition: transform var(--duration-slow) var(--ease-out);
  transition-delay: calc(var(--j) * 40ms);
}

@media (max-width: 767px) {
  .gr-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .gr-facts__item {
    padding-bottom: var(--space-6);
  }
  .gr-facts__item:nth-child(odd) {
    padding-left: 0;
    border-left: 0;
  }
  .gr-facts__item:nth-child(odd)::before {
    left: 0;
  }
  .gr-facts__item:nth-child(n+3) {
    border-top: 1px solid var(--line);
  }
}
/* =============================================================== timeline
   The company history: a drawn cable with hexagonal nodes, vertical on phones. The cable's mask only uses
   the gradient's alpha, so var(--ink) stands in for the export's #000. */
.gr-timeline {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--n), minmax(0, 1fr));
  gap: var(--space-8);
  margin: 0;
  padding: 48px 0 0;
  list-style: none;
}

.gr-timeline__cable {
  position: absolute;
  top: 9px;
  left: 12px;
  right: 0;
  height: 6px;
  border-top: 1px solid var(--draft);
  border-bottom: 1px solid var(--draft);
  background: repeating-linear-gradient(115deg, transparent 0 4px, var(--draft) 4px 5px);
  opacity: 0.85;
  transform-origin: left center;
  transform: scaleX(0);
  mask-image: linear-gradient(90deg, var(--ink) 85%, transparent);
}

.gr-timeline.is-in .gr-timeline__cable {
  transform: none;
  transition: transform var(--duration-draw) var(--ease-in-out);
}

.gr-timeline__item {
  position: relative;
  display: grid;
  gap: var(--space-2);
  align-content: start;
}

.gr-timeline__node {
  position: absolute;
  top: -48px;
  left: 0;
  display: block;
}

.gr-timeline__node svg {
  display: block;
}

.gr-timeline__node path {
  fill: var(--surface);
  stroke: var(--draft);
  stroke-width: 1.5;
}

.gr-timeline__item:last-child .gr-timeline__node path {
  fill: var(--signal);
  stroke: var(--signal);
}

.gr-timeline__node {
  opacity: 0;
  transform: scale(0.4);
  transition: opacity var(--duration-fast) var(--ease-out), transform var(--duration-base) var(--ease-tension);
}

.gr-timeline.is-in .gr-timeline__node {
  opacity: 1;
  transform: none;
  transition-delay: calc(var(--i) / max(var(--n) - 1, 1) * var(--duration-draw));
}

.gr-timeline__year {
  color: var(--ink);
}

.gr-timeline__title {
  color: var(--ink);
}

.gr-timeline__body {
  color: var(--ink-muted);
  max-width: 32em;
}

@media (max-width: 767px) {
  .gr-timeline {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-8);
    padding: 0 0 0 44px;
  }
  .gr-timeline__cable {
    top: 12px;
    bottom: 0;
    left: 9px;
    right: auto;
    width: 6px;
    height: auto;
    border: 0;
    border-left: 1px solid var(--draft);
    border-right: 1px solid var(--draft);
    background: repeating-linear-gradient(25deg, transparent 0 4px, var(--draft) 4px 5px);
    transform-origin: center top;
    transform: scaleY(0);
    mask-image: none;
  }
  .gr-timeline__node {
    top: 0;
    left: -44px;
  }
}
/* ============================================================= crop marks
   The four corner marks that appear over a card's picture on hover, and the hatched placeholder for an
   item without a photo. */
.gr-crop {
  position: absolute;
  inset: 10px;
  pointer-events: none;
}

.gr-crop i {
  position: absolute;
  width: 12px;
  height: 12px;
  border: 0 solid var(--rope-blue);
  opacity: 0;
  transition: opacity var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-tension);
}

.gr-crop i:nth-child(1) {
  top: 0;
  left: 0;
  border-top-width: 1.5px;
  border-left-width: 1.5px;
  transform: translate(-6px, -6px);
}

.gr-crop i:nth-child(2) {
  top: 0;
  right: 0;
  border-top-width: 1.5px;
  border-right-width: 1.5px;
  transform: translate(6px, -6px);
}

.gr-crop i:nth-child(3) {
  bottom: 0;
  left: 0;
  border-bottom-width: 1.5px;
  border-left-width: 1.5px;
  transform: translate(-6px, 6px);
}

.gr-crop i:nth-child(4) {
  bottom: 0;
  right: 0;
  border-bottom-width: 1.5px;
  border-right-width: 1.5px;
  transform: translate(6px, 6px);
}

.gr-cat:hover .gr-crop i, .gr-cat:focus-visible .gr-crop i, .gr-prod:hover .gr-crop i {
  opacity: 1;
  transform: none;
}

.gr-cat .gr-crop {
  inset: 12% 16%;
}

.gr-prod .gr-crop {
  inset: 9%;
}

.gr-placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--space-2);
  color: var(--steel-700);
  background-image: repeating-linear-gradient(135deg, transparent 0 9px, color-mix(in srgb, var(--rope-blue) 12%, transparent) 9px 10px);
}

.gr-placeholder .spec-sm {
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* ========================================================== category card
   A product family on the homepage and the products index. */
.gr-cat {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  color: inherit;
  text-decoration: none;
  transition: transform var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out), border-color var(--duration-base) var(--ease-out);
}

.gr-cat:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--line-strong);
}

.gr-cat:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.gr-cat__media {
  position: relative;
  display: block;
  aspect-ratio: 3/2;
  margin: var(--space-2) var(--space-2) 0;
  border-radius: var(--radius-sm);
  background: var(--surface-tile);
  overflow: hidden;
}

.gr-cat__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 5%;
  mix-blend-mode: multiply;
  transition: transform var(--duration-slow) var(--ease-out);
}

.gr-cat:hover .gr-cat__media img {
  transform: scale(1.045);
}

.gr-cat__index {
  position: absolute;
  top: 8px;
  left: 8px;
  padding: 2px 6px;
  border-radius: var(--radius-xs);
  background: var(--surface-raised);
  color: var(--ink-muted);
  letter-spacing: 0.08em;
}

.gr-cat__icon {
  position: absolute;
  top: 8px;
  right: 8px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  color: var(--brand);
}

.gr-cat__body {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-5) var(--space-5);
}

.gr-cat__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.gr-cat__title {
  color: var(--ink);
}

.gr-cat__arrow {
  flex: none;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  color: var(--ink);
  transition: background-color var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard), color var(--duration-base) var(--ease-standard);
}

.gr-cat__arrow svg {
  transition: transform var(--duration-fast) var(--ease-tension);
}

.gr-cat:hover .gr-cat__arrow {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--surface-raised);
}

.gr-cat:hover .gr-cat__arrow svg {
  transform: translateX(2px);
}

.gr-cat__summary {
  color: var(--ink-muted);
}

.gr-cat__count {
  color: var(--brand);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* -- refinements after review (in the export's order: the cascade between them matters) ---------- */
/* phones: catalogue cards become compact rows */
@media (max-width: 639px) {
  .gr-grid > .gr-cat {
    display: grid;
    grid-template-columns: 104px minmax(0, 1fr);
  }
  .gr-grid > .gr-cat .gr-cat__media {
    aspect-ratio: auto;
    min-height: 96px;
    margin: 8px 0 8px 8px;
  }
  .gr-grid > .gr-cat .gr-cat__media img {
    padding: 8%;
  }
  .gr-grid > .gr-cat .gr-crop {
    inset: 8%;
  }
  .gr-grid > .gr-cat .gr-cat__body {
    align-content: center;
    gap: 2px;
    padding: 12px 14px;
  }
  .gr-grid > .gr-cat .heading-md {
    font-size: 17px;
    line-height: 24px;
  }
  .gr-grid > .gr-cat .gr-cat__summary {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .gr-grid > .gr-cat .gr-cat__arrow {
    width: 28px;
    height: 28px;
  }
}
/* product family images: every family photo is composed on the same 3:2 white canvas (subject sized and
   centred, cables running off the right edge), so the tiles show them edge to edge at one consistent size.
   The same rule serves .cat-row__media img, .head-fig__tile img and .stock-fig__tile img in their partials. */
.gr-cat__media img {
  object-fit: cover;
  padding: 0;
}

@media (max-width: 639px) {
  .gr-grid > .gr-cat {
    grid-template-columns: 120px minmax(0, 1fr);
  }
  .gr-grid > .gr-cat .gr-cat__media {
    aspect-ratio: 3/2;
    min-height: 0;
    align-self: center;
  }
  .gr-grid > .gr-cat .gr-cat__media img {
    padding: 0;
  }
}
/* =========================================================== product card
   An item on a family page. The family pages' additions (:target highlight, the family label, the compact
   phone grid) are in pages/_catalogue.scss. */
.gr-prod {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  transition: border-color var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out);
}

.gr-prod:hover {
  border-color: var(--line-strong);
  box-shadow: var(--shadow-md);
}

.gr-prod__media {
  position: relative;
  aspect-ratio: 1;
  margin: var(--space-2) var(--space-2) 0;
  border-radius: var(--radius-sm);
  background: var(--surface-tile);
  overflow: hidden;
}

.gr-prod__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 7%;
  mix-blend-mode: multiply;
  transition: transform var(--duration-slow) var(--ease-out);
}

.gr-prod:hover .gr-prod__media img {
  transform: scale(1.05);
}

.gr-prod__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
}

.gr-prod__name {
  color: var(--ink);
}

.gr-prod__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.gr-prod__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: auto;
  padding-top: var(--space-3);
  border-top: 1px solid var(--line);
}

.gr-prod__spec {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--link);
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  text-decoration: none;
  border-radius: 2px;
}

.gr-prod__spec:hover {
  color: var(--brand-strong);
}

.gr-prod__spec:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.gr-prod__spec-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 16px;
  letter-spacing: 0.06em;
  color: var(--ink-subtle);
}

/* ============================================================ market card
   A market on the homepage and the markets index. The design system draws it dark; the refinements after
   review (below, in the export's order) turn it light, framed like the product cards. */
.gr-market {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--surface-band);
  color: var(--ink-band);
  text-decoration: none;
  transition: transform var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out);
}

.gr-market:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.gr-market:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.gr-market__media {
  position: relative;
  display: block;
  aspect-ratio: 3/2;
  overflow: hidden;
  background: var(--surface-band-raised);
}

.gr-market__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.08);
  transition: filter var(--duration-slow) var(--ease-out), transform var(--duration-slow) var(--ease-out);
}

.gr-market__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--surface-band);
  mix-blend-mode: multiply;
  opacity: 0.62;
  transition: opacity var(--duration-slow) var(--ease-out);
}

.gr-market:hover .gr-market__media img {
  filter: grayscale(0) contrast(1);
  transform: scale(1.05);
}

.gr-market:hover .gr-market__media::after {
  opacity: 0.12;
}

.gr-market__shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, transparent 55%, var(--surface-band) 100%);
}

.gr-market__body {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: -22px;
  padding: 0 var(--space-5) var(--space-5);
}

.gr-market__icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-bottom: var(--space-1);
  border: 1px solid var(--line-band);
  border-radius: var(--radius-sm);
  background: var(--surface-band);
  color: var(--brand-band);
  transition: background-color var(--duration-base) var(--ease-standard), color var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard);
}

.gr-market:hover .gr-market__icon {
  background: var(--signal);
  border-color: var(--signal);
  color: var(--on-signal);
}

.gr-market__title {
  color: var(--ink-band);
}

.gr-market__summary {
  color: var(--ink-band-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.gr-market__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: var(--space-3);
  border-top: 1px solid var(--line-band);
  color: var(--ink-band-muted);
}

.gr-market__foot .spec-sm {
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.gr-market__arrow {
  display: inline-flex;
  color: var(--ink-band);
  transition: transform var(--duration-fast) var(--ease-tension), color var(--duration-base) var(--ease-standard);
}

.gr-market:hover .gr-market__arrow {
  transform: translateX(3px);
  color: var(--signal);
}

/* -- refinements after review (in the export's order: the cascade between them matters) ---------- */
/* phones: market cards become compact rows */
@media (max-width: 639px) {
  .gr-grid > .gr-market {
    flex-direction: row;
  }
  .gr-grid > .gr-market .gr-market__media {
    flex: none;
    width: 108px;
    aspect-ratio: auto;
  }
  .gr-grid > .gr-market .gr-market__shade {
    display: none;
  }
  .gr-grid > .gr-market .gr-market__body {
    margin-top: 0;
    gap: 2px;
    padding: 12px 14px;
  }
  .gr-grid > .gr-market .heading-md {
    font-size: 17px;
    line-height: 24px;
  }
  .gr-grid > .gr-market .gr-market__foot {
    padding-top: var(--space-2);
  }
}
/* market cards, light: framed like the product cards. Market photos (cards,
   "Other markets" and the market page figure) show in natural colour, slightly
   calm at rest; on hover they warm up (more saturation and contrast) and zoom.
   (The figure's and the minis' photo rules are in pages/_markets.scss.) */
.gr-market {
  border: 1px solid var(--line);
  background: var(--surface-raised);
  color: var(--ink);
  transition: transform var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out), border-color var(--duration-base) var(--ease-out);
}

.gr-market:hover {
  border-color: var(--line-strong);
}

.gr-market__media {
  margin: var(--space-2) var(--space-2) 0;
  border-radius: var(--radius-sm);
  background: var(--surface-tile);
}

.gr-market__media img {
  filter: saturate(0.9);
}

.gr-market__media::after {
  content: none;
}

.gr-market:hover .gr-market__media img {
  filter: saturate(1.15) contrast(1.06);
}

.gr-market__shade {
  display: none;
}

.gr-market__body {
  margin-top: 0;
  padding: var(--space-4) var(--space-5) var(--space-5);
}

.gr-market__title {
  color: var(--ink);
}

.gr-market__summary {
  color: var(--ink-muted);
}

.gr-market__foot {
  border-top-color: var(--line);
  color: var(--ink-muted);
}

.gr-market__arrow {
  color: var(--ink);
}

.gr-market:hover .gr-market__arrow {
  color: var(--brand);
}

@media (max-width: 639px) {
  .gr-grid > .gr-market .gr-market__media {
    margin: 8px 0 8px 8px;
    min-height: 96px;
  }
}
/* ======================================================= application list
   The applications of a market, in columns. */
.gr-apps {
  display: grid;
  grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr));
  gap: 0 var(--space-6);
  margin: 0;
  padding: 0;
  list-style: none;
}

.gr-apps__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  font-size: 16px;
  line-height: 24px;
}

.gr-apps__mark {
  display: inline-flex;
  color: var(--brand);
}

@media (max-width: 1023px) {
  .gr-apps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 639px) {
  .gr-apps {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* ========================================================= supplier card
   A national brand on the company page. The company page's grid of them is in pages/_company.scss. */
.gr-supplier {
  display: grid;
  grid-template-columns: 148px minmax(0, 1fr);
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  color: inherit;
  text-decoration: none;
  transition: border-color var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out);
}

a.gr-supplier:hover {
  border-color: var(--line-strong);
  box-shadow: var(--shadow-md);
}

a.gr-supplier:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.gr-supplier__logo {
  display: grid;
  place-items: center;
  height: 92px;
  border-radius: var(--radius-sm);
  background: var(--surface-tile);
  overflow: hidden;
  color: var(--steel-700);
}

.gr-supplier__logo img {
  max-width: 86%;
  max-height: 74%;
  mix-blend-mode: multiply;
}

.gr-supplier__body {
  display: grid;
  gap: var(--space-1);
  color: var(--ink);
}

.gr-supplier__desc {
  color: var(--ink-muted);
}

.gr-supplier__link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: var(--space-2);
  color: var(--link);
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
}

.gr-supplier__link svg {
  transition: transform var(--duration-fast) var(--ease-tension);
}

a.gr-supplier:hover .gr-supplier__link svg {
  transform: translate(2px, -2px);
}

@media (max-width: 479px) {
  .gr-supplier {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* ================================================================ notice */
.gr-notice {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
}

.gr-notice__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
}

.gr-notice--info .gr-notice__icon {
  background: var(--brand-soft);
  color: var(--brand);
}

.gr-notice--warning .gr-notice__icon {
  background: var(--signal-soft);
  color: var(--signal-ink);
}

.gr-notice--success .gr-notice__icon {
  background: var(--success-soft);
  color: var(--success);
}

.gr-notice--danger .gr-notice__icon {
  background: var(--danger-soft);
  color: var(--danger);
}

.gr-notice--danger {
  border-color: var(--danger);
}

.gr-notice__body {
  flex: 1;
  display: grid;
  gap: 2px;
  padding-top: 6px;
}

.gr-notice__title {
  color: var(--ink);
  font-size: 15px;
  line-height: 22px;
  font-weight: 600;
}

.gr-notice__text {
  color: var(--ink-muted);
  font-size: 14px;
  line-height: 22px;
}

.gr-notice__action {
  flex: none;
  align-self: center;
}

@media (max-width: 639px) {
  .gr-notice {
    flex-wrap: wrap;
  }
  .gr-notice__action {
    width: 100%;
  }
}
/* ============================================================= accordion
   The company page's FAQ. Its no-JS fallback and scroll offset are in pages/_company.scss. */
.gr-acc {
  border-top: 1px solid var(--line);
}

.gr-acc__item {
  border-bottom: 1px solid var(--line);
}

.gr-acc__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  width: 100%;
  padding: var(--space-5) 0;
  border: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.gr-acc__trigger .heading-md {
  transition: color var(--duration-micro) var(--ease-standard);
}

.gr-acc__trigger:hover .heading-md {
  color: var(--brand);
}

.gr-acc__trigger:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm);
}

.gr-acc__sign {
  position: relative;
  flex: none;
  width: 30px;
  height: 30px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  color: var(--ink);
  transition: background-color var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard), color var(--duration-base) var(--ease-standard);
}

.gr-acc__sign i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 1.5px;
  margin: -0.75px 0 0 -6px;
  background: currentColor;
  transition: transform var(--duration-base) var(--ease-standard);
}

.gr-acc__sign i:last-child {
  transform: rotate(90deg);
}

.gr-acc__item.is-open .gr-acc__sign {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--surface-raised);
}

.gr-acc__item.is-open .gr-acc__sign i:last-child {
  transform: rotate(0deg);
}

.gr-acc__panel {
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
  transition: grid-template-rows var(--duration-slow) var(--ease-standard), visibility 0s linear var(--duration-slow);
}

.gr-acc__item.is-open .gr-acc__panel {
  grid-template-rows: 1fr;
  visibility: visible;
  transition-delay: 0s;
}

.gr-acc__inner {
  overflow: hidden;
}

.gr-acc__content {
  max-width: var(--container-prose);
  padding-bottom: var(--space-6);
  color: var(--ink-muted);
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity var(--duration-base) var(--ease-standard), transform var(--duration-base) var(--ease-standard);
}

.gr-acc__content > * + * {
  margin-top: var(--space-3);
}

.gr-acc__item.is-open .gr-acc__content {
  opacity: 1;
  transform: none;
  transition-delay: 80ms;
}

/* ========================================================== location card
   The contact page's map card: a drawn map with axes and a dropping pin. The contact page's rest state
   and the Google Map snapshot/embed are in pages/_contact.scss. */
.gr-loc {
  display: grid;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  overflow: hidden;
}

.gr-loc__map {
  position: relative;
  height: 188px;
  border-bottom: 1px solid var(--line);
  background-color: var(--surface-sunken);
  background-image: linear-gradient(var(--draft-faint) 1px, transparent 1px), linear-gradient(90deg, var(--draft-faint) 1px, transparent 1px);
  background-size: 20px 20px;
  background-position: center;
  overflow: hidden;
}

.gr-loc__axis {
  position: absolute;
  background: var(--draft);
  opacity: 0.5;
}

.gr-loc__axis--x {
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  transform: scaleX(0);
}

.gr-loc__axis--y {
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  transform: scaleY(0);
}

.gr-loc.is-in .gr-loc__axis {
  transform: none;
  transition: transform var(--duration-draw) var(--ease-in-out);
}

.gr-loc__pin {
  position: absolute;
  left: 50%;
  top: 50%;
  color: var(--brand);
  opacity: 0;
  transform: translate(-50%, -160%);
}

.gr-loc__pin svg {
  display: block;
}

.gr-loc.is-in .gr-loc__pin {
  animation: gr-pin-drop var(--duration-slow) var(--ease-tension) 600ms both;
}

.gr-loc__pulse {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 72px;
  height: 72px;
  margin: -36px 0 0 -36px;
  border: 1.5px solid var(--brand);
  border-radius: var(--radius-pill);
  opacity: 0;
}

.gr-loc.is-in .gr-loc__pulse {
  animation: gr-pulse 1800ms var(--ease-out) 1000ms 3;
}

.gr-loc__label {
  position: absolute;
  left: calc(50% + 16px);
  top: calc(50% + 10px);
  color: var(--ink-muted);
  letter-spacing: 0.1em;
  opacity: 0;
}

.gr-loc.is-in .gr-loc__label {
  animation: gr-fade-in var(--duration-slow) var(--ease-out) 1100ms both;
}

.gr-loc__body {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-5);
  color: var(--ink);
}

.gr-loc__addr {
  font-style: normal;
  color: var(--ink-muted);
}

.gr-loc__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-6);
  margin-top: var(--space-2);
}

.gr-loc__phone {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
  font-variant-numeric: tabular-nums;
  border-radius: 2px;
}

.gr-loc__phone svg {
  color: var(--brand);
}

.gr-loc__phone:hover {
  color: var(--brand);
}

.gr-loc__phone:hover svg {
  animation: gr-ring 640ms var(--ease-in-out);
}

.gr-loc__phone:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* ============================================================== team list */
.gr-team {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

.gr-team__item {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--line);
}

.gr-team__mono {
  flex: none;
  display: grid;
  place-items: center;
  width: 42px;
  height: 48px;
  background: var(--brand-soft);
  color: var(--brand);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 16px;
  font-weight: 500;
  letter-spacing: 0.06em;
}

.gr-team__text {
  flex: 1;
  display: grid;
  color: var(--ink);
}

.gr-team__role {
  color: var(--ink-muted);
}

.gr-team__links {
  display: flex;
  gap: var(--space-1);
}

.gr-team__links a {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-pill);
  color: var(--brand);
}

.gr-team__links a:hover {
  background: var(--brand-soft);
}

/* ================================================================== forms
   Fields, controls and the quote form (the contact page and the quote drawer). The site's quote form
   states (.quote-sent, the spinner strand) are in pages/_contact.scss. */
.gr-field {
  display: grid;
  gap: var(--space-2);
  align-content: start;
}

.gr-field__label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  color: var(--ink);
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
}

.gr-field__opt {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 16px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-subtle);
}

.gr-control {
  position: relative;
}

.gr-input {
  display: block;
  width: 100%;
  height: 44px;
  margin: 0;
  padding: 0 var(--space-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 24px;
  box-shadow: var(--shadow-sm);
  appearance: none;
  -webkit-appearance: none;
  transition: border-color var(--duration-micro) var(--ease-standard), box-shadow var(--duration-micro) var(--ease-standard);
}

.gr-input::placeholder {
  color: var(--ink-subtle);
}

.gr-input:hover {
  border-color: var(--ink-muted);
}

.gr-input:focus {
  outline: none;
  border-color: var(--focus);
  box-shadow: 0 0 0 1px var(--focus), 0 0 0 5px color-mix(in srgb, var(--focus) 16%, transparent);
}

.gr-control--icon .gr-input {
  padding-left: 40px;
}

.gr-control__icon {
  position: absolute;
  left: 12px;
  top: 13px;
  color: var(--ink-subtle);
  pointer-events: none;
  transition: color var(--duration-micro) var(--ease-standard);
}

.gr-control--icon:focus-within .gr-control__icon {
  color: var(--brand);
}

.gr-textarea {
  height: auto;
  min-height: 128px;
  padding: 10px var(--space-3) var(--space-6);
  resize: vertical;
}

.gr-textarea__count {
  position: absolute;
  right: 10px;
  bottom: 6px;
  color: var(--ink-subtle);
  pointer-events: none;
}

.gr-select {
  padding-right: 40px;
  cursor: pointer;
}

.gr-select__chev {
  position: absolute;
  right: 12px;
  top: 13px;
  color: var(--ink-muted);
  pointer-events: none;
  transition: transform var(--duration-base) var(--ease-standard), color var(--duration-micro) var(--ease-standard);
}

.gr-control--select:focus-within .gr-select__chev {
  color: var(--brand);
}

.gr-field__hint {
  color: var(--ink-subtle);
  font-size: 13px;
  line-height: 20px;
}

.gr-field__error {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--danger);
  font-size: 13px;
  line-height: 20px;
  font-weight: 500;
  animation: gr-fade-up var(--duration-base) var(--ease-out) both;
}

.gr-field.is-invalid .gr-input {
  border-color: var(--danger);
}

.gr-field.is-invalid .gr-input:focus {
  box-shadow: 0 0 0 1px var(--danger), 0 0 0 5px color-mix(in srgb, var(--danger) 16%, transparent);
}

.gr-field.is-invalid .gr-control {
  animation: gr-shake 340ms var(--ease-standard);
}

.gr-quote {
  display: grid;
  gap: var(--space-6);
}

.gr-quote__head {
  display: grid;
  gap: var(--space-2);
  color: var(--ink);
}

.gr-quote__intro {
  color: var(--ink-muted);
}

.gr-quote__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5) var(--space-4);
}

.gr-quote--cols-1 .gr-quote__grid {
  grid-template-columns: minmax(0, 1fr);
}

.gr-quote__wide {
  grid-column: 1/-1;
}

.gr-quote__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-top: var(--space-5);
  border-top: 1px solid var(--line);
}

.gr-quote__min {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ink-muted);
}

.gr-quote--sent {
  justify-items: start;
  gap: var(--space-4);
  padding-block: var(--space-6);
  color: var(--ink);
}

.gr-quote__check {
  display: block;
}

.gr-quote__check-hex {
  fill: var(--success-soft);
  stroke: var(--success);
  stroke-width: 1.5;
  stroke-dasharray: 170;
  stroke-dashoffset: 170;
  animation: gr-draw 700ms var(--ease-in-out) forwards;
}

.gr-quote__check-mark {
  fill: none;
  stroke: var(--success);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 36;
  stroke-dashoffset: 36;
  animation: gr-draw var(--duration-slow) var(--ease-out) 560ms forwards;
}

.gr-quote__sent-text {
  max-width: 520px;
  color: var(--ink-muted);
}

@media (max-width: 639px) {
  .gr-quote__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* ============================================================== keyframes
   The design system's keyframes. The page layer's own (gr-rise, gr-char-up, gr-scale-y, gr-node-in,
   asm-draw, asm-part) are in pages/_motion.scss, where the export keeps them. */
@keyframes gr-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes gr-fade-up {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes gr-word-in {
  from {
    transform: translateY(110%);
  }
  to {
    transform: none;
  }
}
@keyframes gr-scale-x {
  from {
    transform: scaleX(0);
  }
  to {
    transform: none;
  }
}
@keyframes gr-pop {
  from {
    opacity: 0;
    transform: scale(0.2);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes gr-draw {
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes gr-roll {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes gr-ring {
  0%, 100% {
    transform: rotate(0);
  }
  15% {
    transform: rotate(-14deg);
  }
  30% {
    transform: rotate(12deg);
  }
  45% {
    transform: rotate(-8deg);
  }
  60% {
    transform: rotate(6deg);
  }
  75% {
    transform: rotate(-2deg);
  }
}
@keyframes gr-shake {
  0%, 100% {
    transform: none;
  }
  20% {
    transform: translateX(-4px);
  }
  40% {
    transform: translateX(3px);
  }
  60% {
    transform: translateX(-2px);
  }
  80% {
    transform: translateX(1px);
  }
}
@keyframes gr-pulse {
  0% {
    opacity: 0.7;
    transform: scale(0.2);
  }
  100% {
    opacity: 0;
    transform: scale(1.6);
  }
}
@keyframes gr-pin-drop {
  from {
    opacity: 0;
    transform: translate(-50%, -160%);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -88%);
  }
}
@keyframes gr-drop {
  0% {
    transform: none;
    opacity: 1;
  }
  40% {
    transform: translateY(5px);
    opacity: 0;
  }
  41% {
    transform: translateY(-8px);
    opacity: 0;
  }
  100% {
    transform: none;
    opacity: 1;
  }
}
@keyframes gr-tray {
  0%, 100% {
    transform: none;
  }
  35% {
    transform: translateY(1.5px);
  }
}
/* ========================================================= reduced motion
   The design system's reduced-motion rules: every animation and transition collapses to 1ms, the ambient
   loops stop, and the reveals rest in their finished state. The page layer's motion (pages/_motion.scss)
   is wrapped in prefers-reduced-motion: no-preference instead. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
  .gr-rope__track, .gr-strand--spin .gr-strand__twist, .gr-xs__strand-glow, .gr-btn--primary::after {
    animation: none !important;
  }
  .gr-strand--spin .gr-strand__fill {
    animation-duration: var(--duration-loop) !important;
    animation-iteration-count: infinite !important;
  }
  [data-reveal=pending], [data-reveal-group=pending] > * {
    opacity: 1;
    transform: none;
  }
}
/* -- the pages (the export's page styles and "refinements after review") -- */
/* ==========================================================================
   Good Rope website: page layer — the shell. The export's page-level "base", "header", "sections" and
   "footer" styles, which sit on the design system's partials above this one in main.scss. The page layer's
   :root rules (the phone's safe areas, the scroll offset, the 84px header and 72px on phones) are printed
   by base/_root.scss and are not repeated here.
   ========================================================================== */
/* ---------------------------------------------------------------- base */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}
html {
  background: var(--surface);
}

body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 26px;
}

body::before {
  content: "";
  position: fixed;
  inset: 0 0 auto;
  height: env(safe-area-inset-top, 0px);
  z-index: 60;
  background: var(--surface-raised);
  pointer-events: none;
}

img {
  max-width: 100%;
}

html.is-locked {
  overflow: hidden;
}

main {
  display: block;
}

.gr-skip {
  position: absolute;
  left: 12px;
  top: -64px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  background: var(--signal);
  color: var(--on-signal);
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  transition: top var(--duration-fast) var(--ease-out);
}

.gr-skip:focus {
  top: 12px;
  outline: none;
  box-shadow: var(--focus-ring);
}

/* The display face is Archivo at 78% width (the system's Archivo Condensed). */
.display-xl, .display-lg, .display-md, .display-sm, .numeral, .gr-prose h2, .gr-cta__phone-num {
  font-stretch: 78%;
}

.display-xl, .display-lg, .display-md, .display-sm {
  text-wrap: balance;
}

/* Gutters that also clear a phone's side system bar. */
.gr-container {
  padding-left: max(var(--space-6), env(safe-area-inset-left, 0px));
  padding-right: max(var(--space-6), env(safe-area-inset-right, 0px));
}

@media (max-width: 639px) {
  .gr-container {
    padding-left: max(var(--space-4), env(safe-area-inset-left, 0px));
    padding-right: max(var(--space-4), env(safe-area-inset-right, 0px));
  }
}
.mono-caps {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.fig-cap {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 16px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-subtle);
}

.gr-band .fig-cap {
  color: var(--ink-band-muted);
}

/* ---------------------------------------------------------------- header */
.gr-header--sticky {
  top: calc(env(safe-area-inset-top, 0px) - var(--utility-height));
}

/* Header logo, sized from one value: --logo-h is the wordmark height and the strand mark is
   1.62 times that. 34px on desktop (55px mark). Smaller screens scale it down only as far as
   needed to keep the logo, phone icon, quote button and menu button on one line. */
.gr-logo--header {
  --logo-h: 34px;
  gap: 14px;
}

.gr-logo--header .gr-strand {
  width: auto;
  height: calc(var(--logo-h) * 1.62);
}

.gr-logo--header .gr-logo__wm {
  height: var(--logo-h);
}

@media (max-width: 1023px) {
  .gr-logo--header {
    --logo-h: clamp(28px, calc((100vw - 330px) / 10.6), 34px);
  }
}
@media (max-width: 639px) {
  .gr-logo--header {
    --logo-h: clamp(14px, calc(9.4vw - 15.5px), 30px);
    gap: 10px;
  }
  /* no room for the yellow button on phones; it's in the hero, the menu and every page's quote band */
  .gr-header__cta {
    display: none;
  }
}
/* The header keeps one height at every scroll position. It used to shrink once the page
   scrolled, but a sticky header that changes height moves the page under the reader, and the
   browser's scroll anchoring pushed back, so the header flickered between sizes. Scrolling now
   only adds the shadow. The bar is solid (no backdrop blur), which also avoids GPU repaint
   flicker on some Windows machines. */
.gr-header__inner, .gr-header.is-scrolled .gr-header__inner {
  height: var(--header-height);
  transition: none;
}

.gr-header__bar {
  background: var(--surface-raised);
  backdrop-filter: none;
}

/* :root { --header-height: 84px; } is the token's value, and the 72px of phones is in base/_root.scss. */
/* Desktop shows the phone number in the dark bar above the header, so the header's own phone
   link is hidden there. Tablets and phones have no bar above, so they keep the tap-to-call icon. */
@media (min-width: 1024px) {
  .gr-header__phone {
    display: none;
  }
}
.gr-logo--footer {
  gap: 12px;
}

.gr-logo--footer .gr-strand {
  width: auto;
  height: 40px;
}

.gr-logo--footer .gr-logo__wm {
  height: 24px;
}

@media (max-width: 1023px) {
  .gr-header--sticky {
    top: env(safe-area-inset-top, 0px);
  }
}
.gr-mega__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  grid-column: 1/-1;
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
}

.gr-mega__foot .body-sm {
  color: var(--ink-muted);
}

/* a quiet arrow leads each menu entry; on hover or focus it hands over to the blue arrow on the right */
.gr-mega__lead {
  flex: none;
  color: var(--ink-subtle);
  transition: opacity var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-tension);
}

.gr-mega__item .gr-mega__lead {
  margin-top: 4px;
}

.gr-mega__item:hover .gr-mega__lead, .gr-mega__row:hover .gr-mega__lead,
.gr-mega__item:focus-visible .gr-mega__lead, .gr-mega__row:focus-visible .gr-mega__lead {
  opacity: 0;
  transform: translateX(6px);
}

.gr-mega__item:focus-visible .gr-mega__arrow, .gr-mega__row:focus-visible .gr-mega__arrow {
  opacity: 1;
  transform: none;
}

.gr-mnav__all {
  color: var(--brand);
  font-weight: 600;
}

.gr-mnav__all svg {
  color: var(--brand);
}

.drawer-alt {
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
  color: var(--ink-muted);
}

.gr-drawer__body .gr-quote__head {
  margin-bottom: var(--space-1);
}

/* ---------------------------------------------------------------- sections */
/* Section rhythm, tightened: 72px above and below each section (was 96), 48px on phones
   (was 64). The call-to-action band and the page heads are trimmed to match. */
.gr-section {
  padding-block: 72px;
}

.gr-section--raised {
  border-block: 1px solid var(--line);
}

.gr-section--tight {
  padding-block: var(--space-12);
}

.gr-cta {
  padding-block: var(--space-16);
}

@media (max-width: 767px) {
  .gr-section {
    padding-block: var(--space-12);
  }
  .gr-section--tight {
    padding-block: var(--space-10);
  }
  .gr-cta {
    padding-block: var(--space-12);
  }
}
.section-split {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--space-16);
  align-items: center;
}

@media (max-width: 1023px) {
  .section-split {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-10);
  }
}
/* ---------------------------------------------------------------- footer */
.gr-footer__bottom {
  align-items: center;
}

.gr-footer__cols a {
  display: inline-block;
  padding-block: 2px;
}

/* ==========================================================================
   Homepage: the compact hero, the key facts band, the custom assemblies drawing and the national brands.
   ========================================================================== */
/* ---------------------------------------------------------------- hero
   Compact hero, about 27% shorter than the design-system default: tighter spacing, a
   slightly smaller headline and drawing, and no contact row (phone and location sit in
   the bar right above it, and the lead already mentions shipping). */
.gr-hero__inner {
  min-height: 0;
  padding-block: 56px;
  gap: var(--space-10);
}

.gr-hero__copy {
  gap: var(--space-5);
}

.gr-hero__title {
  max-width: 11.5em;
  font-size: clamp(44px, 4.3vw, 62px);
  line-height: 1.02;
}

.gr-hero__lead {
  font-size: 18px;
  line-height: 28px;
}

.gr-hero__art {
  gap: var(--space-3);
}

.gr-hero__art .fig-cap {
  text-align: center;
}

@media (max-width: 1023px) {
  .gr-hero__inner {
    padding-block: var(--space-10);
    gap: var(--space-8);
  }
  .gr-hero__art {
    justify-items: start;
  }
  .gr-hero__art .fig-cap {
    text-align: left;
  }
}
@media (max-width: 639px) {
  .gr-hero__inner {
    padding-block: var(--space-8) var(--space-10);
    gap: var(--space-6);
  }
  .gr-hero__copy {
    gap: var(--space-4);
  }
  .gr-hero__title {
    font-size: 38px;
    line-height: 40px;
  }
  .gr-hero__lead {
    font-size: 17px;
    line-height: 26px;
  }
}
/* ---------------------------------------------------------------- key facts band */
.facts-band {
  background: var(--surface-raised);
  border-bottom: 1px solid var(--line);
  padding-block: var(--space-8) var(--space-10);
}

.gr-facts .gr-facts__char > span {
  transform: none;
}

.gr-facts .gr-facts__item::before {
  transform: none;
}

.gr-facts__value {
  font-stretch: 78%;
}

/* ---------------------------------------------------------------- home: custom assemblies */
.asm-copy {
  display: grid;
  gap: var(--space-5);
  align-content: start;
}

.asm-copy .gr-sh {
  margin-bottom: var(--space-1);
}

.asm-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4) var(--space-6);
  margin-top: var(--space-2);
}

.asm-panel {
  --grid-line: color-mix(in srgb, var(--draft-faint) 55%, transparent);
  position: relative;
  margin: 0;
  padding: var(--space-8) var(--space-6) var(--space-5);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background-color: var(--surface-raised);
  background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 24px 24px;
  background-position: -1px -1px;
}

.asm-panel::after {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  pointer-events: none;
}

.asm-panel figcaption {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-2) var(--space-6);
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-2) 0;
  border-top: 1px solid var(--line);
  background: var(--surface-raised);
}

.asm {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  color: var(--draft);
}

.asm__axis {
  stroke: currentColor;
  stroke-width: 0.75;
  stroke-dasharray: 16 4 2 4;
  opacity: 0.45;
  fill: none;
}

.asm__edge, .asm__body, .asm__crimp line, .asm__thread line, .asm__ext, .asm__dim-line, .asm__arrow, .asm__callout line, .asm__hole {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.asm__body {
  fill: color-mix(in srgb, currentColor 9%, var(--surface-raised));
}

.asm__body--thread {
  fill: color-mix(in srgb, currentColor 5%, var(--surface-raised));
}

.asm__hole {
  fill: var(--surface-raised);
}

.asm__lay-line {
  stroke: currentColor;
  stroke-width: 0.9;
  opacity: 0.75;
  fill: none;
}

.asm__case {
  fill: none;
  stroke: currentColor;
  stroke-width: 8;
}

.asm__case-in {
  fill: none;
  stroke: var(--surface-raised);
  stroke-width: 5.5;
}

.asm__crimp line, .asm__thread line {
  stroke-width: 1;
}

.asm__ext {
  stroke-width: 1;
  stroke-dasharray: 2 3;
}

.asm__dim-line {
  stroke-width: 1;
}

.asm__gap {
  fill: var(--surface-raised);
}

.asm__dim-label {
  fill: var(--ink);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
}

.asm__callout circle {
  fill: currentColor;
  stroke: none;
}

.asm__callout line {
  stroke-width: 1;
}

.asm__callout text {
  fill: var(--ink-muted);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
}

.asm-legend {
  display: none;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-4);
  margin: var(--space-3) 0 0;
  padding: 0;
  list-style: none;
  color: var(--ink-muted);
}

.asm-legend li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.asm-legend li::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--draft);
}

/* the assembly drawing: below 560px its callouts give way to the legend */
@media (max-width: 559px) {
  .asm__callouts {
    display: none;
  }
  .asm-legend {
    display: flex;
  }
  .asm-panel {
    padding: var(--space-4) var(--space-3) var(--space-4);
  }
}
/* ---------------------------------------------------------------- home: national brands */
.brands {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: var(--space-10);
  align-items: center;
}

.brands__copy {
  display: grid;
  gap: var(--space-3);
}

.brands__copy .heading-lg {
  color: var(--ink);
}

.brands__copy p:last-child {
  color: var(--ink-muted);
}

.brands__logos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.brand-tile {
  position: relative;
  display: grid;
  place-items: center;
  height: 96px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface-tile);
  color: inherit;
  text-decoration: none;
  transition: border-color var(--duration-base) var(--ease-standard), box-shadow var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out);
}

.brand-tile img {
  max-width: 66%;
  max-height: 58%;
  width: auto;
  height: auto;
  mix-blend-mode: multiply;
}

.brand-tile:hover {
  border-color: var(--line-strong);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.brand-tile:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

@media (max-width: 767px) {
  .brands {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-6);
  }
  .brand-tile {
    height: 80px;
  }
}
/* the brand logos: one column on the narrowest phones */
@media (max-width: 399px) {
  .brands__logos {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* ---------------------------------------------------------------- refinements after review */
/* hero drawing: callouts point at the outer strands of the drawn cable */
.hero-xs {
  position: relative;
  width: 100%;
  max-width: 312px;
}

.hero-xs .gr-xs {
  width: 100%;
  max-width: none;
}

.hero-xs .gr-hero__callout {
  right: 84.5%;
  bottom: auto;
}

.hero-xs .gr-hero__callout--a {
  top: calc(31.05% - 8px);
}

.hero-xs .gr-hero__callout--b {
  top: calc(57.95% - 8px);
}

.hero-xs .gr-hero__callout-line {
  width: 44px;
  transform-origin: right center;
}

.gr-hero__lead {
  max-width: 30em;
}

/* the hero callouts: no room for them below 1140px */
@media (max-width: 1139px) {
  .hero-xs .gr-hero__callout {
    display: none;
  }
}
@media (max-width: 1023px) {
  .hero-xs {
    max-width: 230px;
  }
}
@media (max-width: 639px) {
  .hero-xs {
    max-width: 170px;
  }
}
.brand-tile img {
  max-width: 74%;
  max-height: 74%;
}

/* custom assemblies: copy sits level with the drawing */
.asm-copy {
  align-self: center;
}

/* ---------------------------------------------------------------- page head (inner pages)
   Title, lead and actions on the left, a figure (cross-section, family photo, market photo, stocked
   families) on the right, over a blueprint grid. The grid's masks only use the gradient's alpha, so
   var(--ink) stands in for the export's #000. */
.page-head {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--surface-raised);
  border-bottom: 1px solid var(--line);
}

.page-head::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: linear-gradient(var(--draft-faint) 1px, transparent 1px), linear-gradient(90deg, var(--draft-faint) 1px, transparent 1px);
  background-size: 24px 24px;
  background-position: -1px -1px;
  opacity: 0.75;
  mask-image: linear-gradient(90deg, transparent 38%, var(--ink) 88%);
}

.page-head--plain::before {
  mask-image: linear-gradient(90deg, transparent 55%, var(--ink) 100%);
  opacity: 0.5;
}

.page-head__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
  align-items: center;
  gap: var(--space-12);
  padding-block: var(--space-10) var(--space-12);
}

.page-head--plain .page-head__inner {
  grid-template-columns: minmax(0, 1fr);
}

.page-head__copy {
  display: grid;
  gap: var(--space-4);
  align-content: start;
  min-width: 0;
}

.page-head__title {
  color: var(--ink);
}

.page-head__lead {
  max-width: 680px;
  color: var(--ink-muted);
  text-wrap: pretty;
}

.page-head__kicker {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--ink-muted);
}

.page-head__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

.page-head__art {
  display: grid;
  justify-items: center;
  gap: var(--space-3);
  min-width: 0;
}

.page-head__art .gr-xs {
  width: 100%;
  max-width: 320px;
}

@media (max-width: 1023px) {
  .page-head__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-8);
    padding-block: var(--space-8) var(--space-10);
  }
  .page-head__art {
    justify-items: start;
  }
  .page-head::before {
    mask-image: linear-gradient(180deg, transparent 45%, var(--ink) 100%);
  }
}
@media (max-width: 639px) {
  .page-head__art .gr-xs {
    max-width: 240px;
  }
}
.head-fig {
  display: grid;
  gap: var(--space-3);
  width: 100%;
  max-width: 420px;
  margin: 0;
}

.head-fig__tile {
  position: relative;
  aspect-ratio: 16/10;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface-tile);
  overflow: hidden;
}

.head-fig__tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 7%;
  mix-blend-mode: multiply;
}

.head-fig__tile .gr-crop {
  inset: 6%;
}

.head-fig__tile .gr-crop i {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: no-preference) {
  .anim-load > * {
    animation: gr-fade-up var(--duration-slow) var(--ease-out) both;
  }
  .anim-load > :nth-child(1) {
    animation-delay: 40ms;
  }
  .anim-load > :nth-child(2) {
    animation-delay: 110ms;
  }
  .anim-load > :nth-child(3) {
    animation-delay: 180ms;
  }
  .anim-load > :nth-child(4) {
    animation-delay: 250ms;
  }
  .anim-load > :nth-child(5) {
    animation-delay: 320ms;
  }
  .anim-load > :nth-child(6) {
    animation-delay: 390ms;
  }
  .anim-load-late {
    animation: gr-fade-in var(--duration-slow) var(--ease-out) 300ms both;
  }
}
/* -- refinements after review ------------------------------------------------------------------ */
/* product family images: every family photo is composed on the same 3:2 white canvas, so the tile shows it
   edge to edge (the same rule serves .gr-cat__media img, .cat-row__media img and .stock-fig__tile img). */
.head-fig__tile img {
  object-fit: cover;
  padding: 0;
}

/* ---------------------------------------------------------------- catalogue layout
   The products index (family rows with their item lists) and the family pages (product grid), both beside
   the sticky category nav. The export's spec table rules for the family pages (.family__spec*, .gr-spec__*)
   are dropped: no page has a spec table. */
.layout-cat {
  display: grid;
  grid-template-columns: 236px minmax(0, 1fr);
  gap: var(--space-12);
  align-items: start;
}

@media (max-width: 1023px) {
  .layout-cat {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-8);
  }
}
.gr-catnav {
  top: calc(env(safe-area-inset-top, 0px) + var(--header-height) + var(--space-6));
}

.gr-catnav__list > li {
  list-style: none;
}

.gr-catnav__bar {
  list-style: none;
}

/* products index rows */
.cat-row {
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: var(--space-8);
  padding-block: var(--space-10);
  border-top: 1px solid var(--line);
  scroll-margin-top: calc(var(--header-height) + 20px);
}

.cat-row:first-child {
  padding-top: 0;
  border-top: 0;
}

.cat-row__media {
  position: relative;
  display: block;
  align-self: start;
  aspect-ratio: 3/2;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface-tile);
  overflow: hidden;
}

.cat-row__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 6%;
  mix-blend-mode: multiply;
  transition: transform var(--duration-slow) var(--ease-out);
}

.cat-row__media .gr-crop {
  inset: 10% 12%;
}

.cat-row__media:hover img {
  transform: scale(1.04);
}

.cat-row__media:hover .gr-crop i, .cat-row__media:focus-visible .gr-crop i {
  opacity: 1;
  transform: none;
}

.cat-row__media:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.cat-row__body {
  display: grid;
  gap: var(--space-3);
  align-content: start;
  min-width: 0;
}

.cat-row__kicker {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--brand);
}

.cat-row__title a {
  color: var(--ink);
  text-decoration: none;
  transition: color var(--duration-micro) var(--ease-standard);
}

.cat-row__title a:hover {
  color: var(--brand);
}

.cat-row__desc {
  max-width: 640px;
  color: var(--ink-muted);
}

.cat-row__items {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--space-6);
  margin: var(--space-2) 0 var(--space-1);
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

.cat-row__items a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: 44px;
  padding-block: 10px;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  font-size: 15px;
  line-height: 22px;
  text-decoration: none;
  transition: color var(--duration-micro) var(--ease-standard);
}

.cat-row__items a svg {
  flex: none;
  color: var(--ink-subtle);
  transition: transform var(--duration-fast) var(--ease-tension), color var(--duration-micro) var(--ease-standard);
}

.cat-row__items a:hover {
  color: var(--brand);
}

.cat-row__items a:hover svg {
  color: var(--brand);
  transform: translateX(3px);
}

.cat-row__items a:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: 2px;
}

@media (max-width: 767px) {
  .cat-row {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-5);
    padding-block: var(--space-8);
  }
  .cat-row__items {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* family pages */
.family {
  display: grid;
  gap: var(--space-12);
  min-width: 0;
}

.family__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--line);
}

.family__bar h2 {
  color: var(--ink);
}

.family__bar .spec-sm {
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.prod-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(228px, 1fr));
  gap: var(--space-6);
  margin-top: calc(var(--space-6) * -1);
}

.gr-prod {
  scroll-margin-top: calc(var(--header-height) + 24px);
}

.gr-prod:target {
  border-color: var(--brand);
  box-shadow: 0 0 0 1px var(--brand);
}

.gr-prod__family {
  min-width: 0;
  color: var(--ink-subtle);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* -- refinements after review ------------------------------------------------------------------ */
/* phones: the product grid becomes two compact columns */
@media (max-width: 639px) {
  .prod-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
  }
  .prod-grid .gr-prod__body {
    padding: var(--space-3);
    gap: var(--space-2);
  }
}
/* product family images: every family photo is composed on the same 3:2 white canvas, so the tile shows it
   edge to edge (the same rule serves .gr-cat__media img, .head-fig__tile img and .stock-fig__tile img). */
.cat-row__media img {
  object-fit: cover;
  padding: 0;
}

/* ---------------------------------------------------------------- markets
   The market page's photo figure and its "Other markets" minis. The export's application index (.idx*)
   is dropped: no page has one. The market cards themselves are components/_market-card.scss. */
.market-fig {
  display: grid;
  gap: var(--space-3);
  width: 100%;
  max-width: 440px;
  margin: 0;
}

.market-fig__media {
  position: relative;
  display: block;
  aspect-ratio: 3/2;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface-band-raised);
}

.market-fig__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: filter var(--duration-slow) var(--ease-out), transform var(--duration-slow) var(--ease-out);
}

.market-fig__media:hover img {
  transform: scale(1.03);
}

/* market pages: other markets as compact photo cards, plus an "All markets" tile to close the grid */
.mkt-minis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.mkt-minis > li {
  display: flex;
}

.mkt-mini {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-height: 82px;
  padding: var(--space-2) var(--space-4) var(--space-2) var(--space-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  color: var(--ink);
  text-decoration: none;
  transition: border-color var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out);
}

.mkt-mini:hover {
  border-color: var(--line-strong);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.mkt-mini:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.mkt-mini__media {
  position: relative;
  flex: none;
  width: 96px;
  aspect-ratio: 3/2;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--surface-tile);
}

.mkt-mini__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: filter var(--duration-slow) var(--ease-out), transform var(--duration-slow) var(--ease-out);
}

.mkt-mini:hover .mkt-mini__media img {
  transform: scale(1.06);
}

.mkt-mini__text {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 4px;
}

/* overflow-wrap is not in the export: "Sporting/Outdoor Goods" cannot break at the slash, and between 600 and 639px its card
   pushed past the page edge (2–7px of sideways scroll on the market pages where it sits in the second column). */
.mkt-mini__name {
  font-size: 16px;
  line-height: 22px;
  font-weight: 600;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.mkt-mini__count {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 16px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-subtle);
}

.mkt-mini__arrow {
  flex: none;
  color: var(--ink-subtle);
  transition: transform var(--duration-fast) var(--ease-tension), color var(--duration-base) var(--ease-standard);
}

.mkt-mini:hover .mkt-mini__arrow {
  color: var(--brand);
  transform: translateX(3px);
}

.mkt-mini--all {
  padding-left: var(--space-5);
  background: var(--surface-sunken);
  border-style: dashed;
}

.mkt-mini--all .mkt-mini__name {
  color: var(--brand);
}

/* the "Other markets" minis: four, three, two, then one across */
@media (max-width: 1199px) {
  .mkt-minis {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 899px) {
  .mkt-minis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 599px) {
  .mkt-minis {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* -- refinements after review ------------------------------------------------------------------ */
/* Market photos ("Other markets" and the market page figure; the cards are in components/_market-card.scss)
   show in natural colour, slightly calm at rest; on hover they warm up (more saturation and contrast) and zoom. */
.market-fig__media img, .mkt-mini__media img {
  filter: saturate(0.9);
}

.market-fig__media::after, .mkt-mini__media::after {
  content: none;
}

.market-fig__media:hover img, .mkt-mini:hover .mkt-mini__media img {
  filter: saturate(1.15) contrast(1.06);
}

.market-fig__media {
  background: var(--surface-tile);
}

/* ---------------------------------------------------------------- company
   The story beside the "at a glance" panel, the stocked-families figure in the page head, the supplier
   grid and the accordion's no-JS fallback. */
.story {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--space-16);
  align-items: start;
}

.story .gr-prose p {
  color: var(--ink-muted);
  font-size: 18px;
  line-height: 30px;
}

.story .gr-prose p:first-child {
  color: var(--ink);
  font-size: 20px;
  line-height: 32px;
}

.glance {
  margin: 0;
  padding: var(--space-6);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
}

.glance__title {
  margin-bottom: var(--space-3);
  color: var(--ink-muted);
}

.glance dl {
  display: grid;
  margin: 0;
  border-top: 1px solid var(--line);
}

.glance dl > div {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: var(--space-4);
  padding-block: 11px;
  border-bottom: 1px solid var(--line);
}

.glance dt {
  padding-top: 3px;
  color: var(--ink-muted);
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 16px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.glance dd {
  margin: 0;
  color: var(--ink);
  font-size: 15px;
  line-height: 22px;
}

.glance dd a {
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
}

.glance dd a:hover {
  color: var(--brand);
}

@media (max-width: 1023px) {
  .story {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-10);
  }
}
@media (max-width: 479px) {
  .glance dl > div {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }
}
/* company page head: a 2 × 2 of stocked product families on catalogue tiles */
.stock-fig {
  display: grid;
  gap: var(--space-3);
  width: 100%;
  max-width: 440px;
  margin: 0;
}

.stock-fig__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
  margin: 0;
  padding: var(--space-2);
  list-style: none;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
}

.stock-fig__tile {
  position: relative;
  aspect-ratio: 4/3;
  border-radius: var(--radius-sm);
  background: var(--surface-tile);
  overflow: hidden;
}

.stock-fig__tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 8%;
  mix-blend-mode: multiply;
}

@media (max-width: 1023px) {
  .stock-fig {
    max-width: 380px;
  }
}
.supplier-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-6);
}

.supplier-grid .gr-supplier {
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
}

.supplier-grid .gr-supplier__logo {
  height: 108px;
}

@media (max-width: 1023px) {
  .supplier-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .supplier-grid .gr-supplier {
    grid-template-columns: 148px minmax(0, 1fr);
  }
}
@media (max-width: 479px) {
  .supplier-grid .gr-supplier {
    grid-template-columns: minmax(0, 1fr);
  }
}
html:not(.js) .gr-acc__panel {
  visibility: visible;
  grid-template-rows: 1fr;
}

html:not(.js) .gr-acc__content {
  opacity: 1;
  transform: none;
}

.gr-acc__item {
  scroll-margin-top: calc(var(--header-height) + 24px);
}

/* -- refinements after review ------------------------------------------------------------------ */
/* product family images: every family photo is composed on the same 3:2 white canvas, so the tile shows it
   edge to edge (the same rule serves .gr-cat__media img, .cat-row__media img and .head-fig__tile img). */
.stock-fig__tile img {
  object-fit: cover;
  padding: 0;
}

/* ---------------------------------------------------------------- contact
   The form panel beside the location card, the location card's rest state, the quote form's states
   (shared with the quote drawer, as the export keeps them here) and the Google Map. */
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: var(--space-12);
  align-items: start;
}

.form-panel {
  padding: var(--space-8);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
  scroll-margin-top: calc(var(--header-height) + 24px);
}

.contact-aside {
  display: grid;
  gap: var(--space-6);
}

.contact-aside .gr-eyebrow {
  margin-bottom: var(--space-3);
}

@media (max-width: 1023px) {
  .contact-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 639px) {
  .form-panel {
    padding: var(--space-5) var(--space-4);
  }
}
.gr-loc .gr-loc__pin {
  opacity: 1;
  transform: translate(-50%, -88%);
}

.gr-loc .gr-loc__axis {
  transform: none;
}

.gr-loc .gr-loc__label {
  opacity: 1;
}

/* quote form states */
.gr-quote[hidden] {
  display: none;
}

.quote-sent {
  display: grid;
  justify-items: start;
  gap: var(--space-4);
  padding-block: var(--space-4);
  color: var(--ink);
}

.quote-sent[hidden] {
  display: none;
}

.quote-sent__note {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius-xs);
  background: var(--surface-sunken);
  color: var(--ink-muted);
}

.gr-btn__spinner .gr-strand {
  width: auto;
  height: 20px;
}

.gr-btn__spinner .gr-strand__ring {
  stroke: currentColor;
}

.gr-btn__spinner .gr-strand__fill {
  fill: currentColor;
}

/* -- refinements after review ------------------------------------------------------------------ */
/* contact: Google Map. A snapshot shows first; the live map fades in over it once loaded. */
.gr-loc__map {
  height: auto;
  aspect-ratio: 1046/560;
  max-height: 340px;
  background: var(--surface-tile);
}

.gr-loc__static {
  position: absolute;
  inset: 0;
  display: block;
}

.gr-loc__static img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 100%;
}

.gr-loc__static:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 3px var(--focus);
}

.gr-loc__embed {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  opacity: 0;
  transition: opacity var(--duration-slow) var(--ease-out);
}

.gr-loc__map.is-map-loaded .gr-loc__embed {
  opacity: 1;
}

/* ---------------------------------------------------------------- motion: build-on-arrival
   The site's motion model: every element rests in its finished state; .is-anim (set in markup for
   page-load moments, or by goodrope.js as an element reaches the viewport) replays its build once.
   Nothing here runs under prefers-reduced-motion: reduce. */
@media (prefers-reduced-motion: no-preference) {
  .gr-sh.is-anim {
    animation: gr-rise var(--duration-slow) var(--ease-out) both;
  }
  .gr-sh.is-anim .gr-sh__rule {
    animation: gr-scale-x var(--duration-slow) var(--ease-out) 160ms both;
  }
  .anim-group.is-anim > * {
    animation: gr-rise var(--duration-slow) var(--ease-out) both;
    animation-delay: calc(var(--i, 0) * 45ms);
  }
  .gr-apps.anim-group.is-anim > * {
    animation-delay: calc(var(--i, 0) * 28ms);
  }
  .anim-rise.is-anim, .gr-cta__inner.is-anim {
    animation: gr-rise var(--duration-slow) var(--ease-out) both;
  }
  .gr-facts.is-anim .gr-facts__char > span {
    animation: gr-char-up var(--duration-slow) var(--ease-out) both;
    animation-delay: calc(var(--facts-delay, 0ms) + var(--j) * 40ms);
  }
  .gr-facts.is-anim .gr-facts__item::before {
    animation: gr-scale-x var(--duration-slow) var(--ease-out) both;
    animation-delay: calc(var(--facts-delay, 0ms) + var(--i) * 90ms + 200ms);
  }
  .gr-timeline.is-anim .gr-timeline__cable {
    animation: gr-scale-x var(--duration-draw) var(--ease-in-out) both;
  }
  .gr-timeline.is-anim .gr-timeline__node {
    animation: gr-node-in var(--duration-base) var(--ease-tension) both;
    animation-delay: calc(var(--i) / max(var(--n) - 1, 1) * var(--duration-draw));
  }
  .gr-timeline.is-anim .gr-timeline__item > p {
    animation: gr-fade-up var(--duration-slow) var(--ease-out) both;
    animation-delay: calc(var(--i) / max(var(--n) - 1, 1) * var(--duration-draw) + 120ms);
  }
  .gr-loc.is-anim .gr-loc__axis--x {
    animation: gr-scale-x var(--duration-draw) var(--ease-in-out) both;
  }
  .gr-loc.is-anim .gr-loc__axis--y {
    animation: gr-scale-y var(--duration-draw) var(--ease-in-out) both;
  }
  .gr-loc.is-anim .gr-loc__pin {
    animation: gr-pin-drop var(--duration-slow) var(--ease-tension) 600ms both;
  }
  .gr-loc.is-anim .gr-loc__pulse {
    animation: gr-pulse 1800ms var(--ease-out) 1000ms 3;
  }
  .gr-loc.is-anim .gr-loc__label {
    animation: gr-fade-in var(--duration-slow) var(--ease-out) 1100ms both;
  }
  .gr-strand--assemble.is-anim .gr-strand__cell {
    animation: gr-strand-in var(--duration-slow) var(--ease-out) both;
    animation-delay: calc(240ms + var(--i) * 80ms);
  }
  .gr-strand--assemble.is-anim .gr-strand__core {
    animation: gr-fade-in var(--duration-slow) var(--ease-out) 760ms both;
  }
  .asm.is-anim .asm__axis {
    animation: gr-fade-in 600ms var(--ease-out) both;
  }
  .asm.is-anim .asm__edge {
    stroke-dasharray: 1;
    animation: asm-draw 900ms var(--ease-in-out) 120ms both;
  }
  .asm.is-anim .asm__lay {
    animation: gr-fade-in 500ms var(--ease-out) 700ms both;
  }
  .asm.is-anim .asm__case, .asm.is-anim .asm__case-in {
    stroke-dasharray: 1;
    animation: asm-draw 800ms var(--ease-in-out) 260ms both;
  }
  .asm.is-anim .asm__part {
    animation: asm-part var(--duration-slow) var(--ease-out) both;
  }
  .asm.is-anim .asm__part--thimble {
    animation-delay: 760ms;
  }
  .asm.is-anim .asm__part--sleeve {
    animation-delay: 880ms;
  }
  .asm.is-anim .asm__part--stud {
    animation-delay: 1000ms;
  }
  .asm.is-anim .asm__dim-line {
    stroke-dasharray: 1;
    animation: asm-draw var(--duration-draw) var(--ease-in-out) 1150ms both;
  }
  .asm.is-anim .asm__ext, .asm.is-anim .asm__arrow, .asm.is-anim .asm__gap, .asm.is-anim .asm__dim-label {
    animation: gr-fade-in 300ms linear 1250ms both;
  }
  .asm.is-anim .asm__arrow {
    animation-delay: 2150ms;
  }
  .asm.is-anim .asm__callout {
    animation: gr-fade-in var(--duration-slow) var(--ease-out) both;
    animation-delay: calc(1700ms + var(--k) * 140ms);
  }
}
@keyframes gr-rise {
  from {
    opacity: 0;
    transform: translate3d(0, 16px, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes gr-char-up {
  from {
    transform: translateY(105%);
  }
  to {
    transform: none;
  }
}
@keyframes gr-scale-y {
  from {
    transform: scaleY(0);
  }
  to {
    transform: none;
  }
}
@keyframes gr-node-in {
  from {
    opacity: 0;
    transform: scale(0.4);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes asm-draw {
  from {
    stroke-dashoffset: 1;
  }
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes asm-part {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.gr-timeline__cable, .gr-loc__axis--x {
  transform-origin: left center;
}

.gr-loc__axis--y {
  transform-origin: center top;
}

.asm__part {
  transform-box: fill-box;
  transform-origin: center;
}

@media (max-width: 767px) {
  .gr-timeline .gr-timeline__cable {
    transform: none;
    transform-origin: center top;
  }
  .gr-timeline.is-anim .gr-timeline__cable {
    animation-name: gr-scale-y;
  }
}
.gr-timeline .gr-timeline__cable {
  transform: none;
}

.gr-timeline .gr-timeline__node {
  opacity: 1;
  transform: none;
}

.gr-timeline__cable {
  list-style: none;
}

/* ---------------------------------------------------------------- styleguide
   The styleguide's own layout (pages/styleguide.njk — the static build only, not a page of the PHP site):
   the specimen frame, the colour swatches, the token bars, tiles and shadow cards, the font and type rows
   and the icon grid. Classes are prefixed sg-; every colour is a token, as everywhere. The components shown
   keep their own styles: nothing here reaches into a gr- class. */
/* -- the specimen frame: a hairline box, its data-sg id printed small in mono above it ------------------- */
.sg-specimen {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
}

.sg-specimen__id {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 16px;
  letter-spacing: 0.04em;
  color: var(--ink-subtle);
}

.sg-specimen__id code {
  font: inherit;
}

.sg-specimen__body {
  min-width: 0;
  padding: var(--space-6);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}

.sg-specimen__body > .prod-grid {
  margin-top: 0;
} /* the family page's grid pulls itself up under its bar */
/* a full-width band (the page head, the CTA band): no box, the label in a container */
.sg-specimen--bleed {
  gap: var(--space-3);
}

.sg-specimen--bleed .sg-specimen__id {
  padding-top: var(--space-3);
}

.sg-specimen--bleed .sg-specimen__body {
  padding: 0;
  border: 0;
  border-radius: 0;
}

.gr-section > .sg-specimen--bleed {
  margin-top: var(--space-8);
}

/* a card that lives in a side column on its page (glance, team, location, the error field) */
.sg-specimen--narrow .sg-specimen__body > * {
  max-width: 520px;
}

/* the category nav: the sidebar's width; the select it becomes below 1024px gets a little more */
.sg-specimen--side .sg-specimen__body > * {
  max-width: 236px;
}

@media (max-width: 1023px) {
  .sg-specimen--side .sg-specimen__body > * {
    max-width: 360px;
  }
}
/* -- rows and stacks inside a frame --------------------------------------------------------------------- */
.sg-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-4);
}

.sg-row > * {
  min-width: 0;
  max-width: 100%;
} /* a specimen never widens the page: below 340px the footer lockup scrolls inside its band */
.sg-stack {
  display: grid;
  gap: var(--space-5);
}

.sg-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-4) var(--space-8);
}

.sg-band {
  padding: var(--space-6);
  border-radius: var(--radius-md);
  overflow: auto;
}

.sg-band--tight {
  display: inline-flex;
  padding: var(--space-3);
}

/* -- colour --------------------------------------------------------------------------------------------- */
.sg-swatches {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.sg-swatch {
  display: grid;
  gap: var(--space-1);
  min-width: 0;
}

.sg-swatch__chip {
  display: block;
  aspect-ratio: 1;
  margin-bottom: var(--space-1);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}

.sg-swatch__name {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 16px;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.sg-swatch__value {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 16px;
  color: var(--ink-subtle);
}

/* -- spacing: a bar as wide as the token ----------------------------------------------------------------- */
.sg-bars {
  display: grid;
  gap: var(--space-2);
}

.sg-bar {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  align-items: center;
  gap: var(--space-4);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 16px;
}

.sg-bar__name {
  color: var(--ink);
}

.sg-bar__track {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}

.sg-bar__fill {
  flex: none;
  height: 12px;
  border-radius: var(--radius-xs);
  background: var(--brand);
}

.sg-bar__value {
  color: var(--ink-subtle);
}

/* -- radii: tiles ---------------------------------------------------------------------------------------- */
.sg-tiles {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
}

.sg-tile {
  display: grid;
  justify-items: center;
  gap: var(--space-1);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 16px;
  color: var(--ink);
}

.sg-tile__shape {
  display: block;
  width: 72px;
  height: 72px;
  margin-bottom: var(--space-1);
  border: 1px solid var(--brand);
  background: var(--brand-soft);
}

.sg-tile__value {
  color: var(--ink-subtle);
}

/* -- shadows: cards -------------------------------------------------------------------------------------- */
.sg-shadows {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-8);
  padding-bottom: var(--space-4);
}

.sg-shadow {
  display: grid;
  align-content: end;
  gap: var(--space-1);
  min-height: 120px;
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 16px;
  color: var(--ink);
}

.sg-shadow__value {
  color: var(--ink-subtle);
  font-size: 11px;
  overflow-wrap: anywhere;
}

/* -- motion: a name / value list ------------------------------------------------------------------------- */
.sg-list {
  display: grid;
  margin: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 16px;
}

.sg-list > div {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-1) var(--space-4);
  padding-block: 6px;
  border-bottom: 1px solid var(--line);
}

.sg-list dt {
  color: var(--ink);
}

.sg-list dd {
  margin: 0;
  color: var(--ink-subtle);
  overflow-wrap: anywhere;
}

/* -- type: the font stacks, then one row per class ------------------------------------------------------- */
.sg-fonts {
  display: grid;
  gap: var(--space-4);
}

.sg-font {
  display: grid;
  gap: var(--space-1);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--line);
}

.sg-font:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.sg-font__sample {
  font-size: 28px;
  line-height: 34px;
  font-weight: 500;
  color: var(--ink);
}

.sg-font__sample--display {
  font-stretch: 78%;
  font-weight: 600;
}

.sg-font__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-4);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 16px;
  color: var(--ink-subtle);
  overflow-wrap: anywhere;
}

.sg-font__meta code {
  color: var(--ink);
}

.sg-types {
  display: grid;
}

.sg-type {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: var(--space-6);
  align-items: baseline;
  padding-block: var(--space-4);
  border-top: 1px solid var(--line);
}

.sg-type:last-child {
  border-bottom: 1px solid var(--line);
}

.sg-type__name {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 16px;
  color: var(--ink-subtle);
}

.sg-type__sample {
  min-width: 0;
  color: var(--ink);
  overflow-wrap: anywhere;
}

@media (max-width: 639px) {
  .sg-type {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-1);
  }
  .sg-font__sample {
    font-size: 22px;
    line-height: 28px;
  }
}
/* -- icons ----------------------------------------------------------------------------------------------- */
.sg-icons {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.sg-icon {
  display: grid;
  justify-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  color: var(--ink);
}

.sg-icon code {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 16px;
  color: var(--ink-subtle);
  text-align: center;
  overflow-wrap: anywhere;
}

@media (max-width: 639px) {
  .sg-specimen__body {
    padding: var(--space-4);
  }
  .sg-bar {
    grid-template-columns: 96px minmax(0, 1fr);
    gap: var(--space-3);
  }
}