/* ==========================================================================
   Global Rubber Industries: site styles
   Cinematic, mostly dark. Oversized variable-width type (Anybody), condensed
   uppercase labels, amber used like a sodium street lamp, lane-marker dashes,
   circular sidewall compositions and procedural tread bands.
   ========================================================================== */

html { background: var(--carbon); }
body {
  font-family: var(--font-body);
  font-size: 17.5px;
  line-height: 1.62;
  color: var(--text);
  background: var(--carbon);
  font-feature-settings: "kern", "liga";
  overflow-x: clip;
}
main { display: block; overflow-x: clip; }
img { background: var(--asphalt); }
::selection { background: var(--amber); color: var(--carbon); }

.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }

/* ---------- type ---------- */
.kicker {
  display: inline-flex; align-items: center; gap: 14px;
  font: 650 12.5px/1.2 var(--font-display); font-stretch: 72%;
  letter-spacing: .2em; text-transform: uppercase; color: var(--amber);
}
.kicker::before { content: ""; width: 34px; height: 2px; background: var(--dash); flex: none; }
.kicker--plain::before { display: none; }
.sec--bone .kicker { color: var(--ink); }
.sec--bone .kicker::before { background: repeating-linear-gradient(90deg, var(--ink) 0 12px, transparent 12px 20px); }

.display {
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  font-size: calc(clamp(46px, 10.4vw, 192px) * var(--fit, 1));
  line-height: .84; letter-spacing: -.012em; font-stretch: 100%;
  overflow: hidden; padding-bottom: .06em;
}
.display .ln { display: block; white-space: nowrap; will-change: font-stretch; }
.display .ln--wide { font-stretch: 128%; }
.display .ln--tall { font-stretch: 62%; }
.display .ln--thin { font-weight: 300; font-stretch: 112%; }
.display .ln--amber { color: var(--amber); }
.display .ln--indent { padding-left: .9em; }
.display--page { font-size: calc(clamp(42px, 8.6vw, 156px) * var(--fit, 1)); }

.h1, .h2, .h3, .h4 { font-family: var(--font-display); color: inherit; }
.h2 {
  font-size: clamp(32px, 4.5vw, 74px); line-height: .98; font-weight: 700; font-stretch: 86%;
  letter-spacing: -.018em; text-wrap: balance;
}
.h2--xl { font-size: clamp(38px, 6.2vw, 108px); font-stretch: 82%; }
.h3 { font-size: clamp(21px, 1.75vw, 28px); line-height: 1.1; font-weight: 650; font-stretch: 92%; letter-spacing: -.01em; }
.h4 { font: 650 14px/1.3 var(--font-display); font-stretch: 78%; letter-spacing: .14em; text-transform: uppercase; color: var(--amber); }
.sec--bone .h4 { color: var(--ink); }
.lead { font-size: clamp(18px, 1.42vw, 22px); line-height: 1.52; color: var(--text-dim); max-width: 46ch; }
.body, .prose p, .prose li { color: var(--text-dim); }
.muted { color: var(--concrete); }
.small { font-size: 14.5px; line-height: 1.55; }
.note { font-size: 13.5px; line-height: 1.55; color: var(--concrete); }
.prose { max-width: 64ch; }
.prose > * + * { margin-top: 1em; }
.prose ul { padding-left: 1.1em; }
.prose li + li { margin-top: .45em; }
.prose strong { color: var(--text); font-weight: 600; }
.prose a, .link { color: inherit; text-decoration: underline; text-decoration-color: var(--amber); text-underline-offset: .22em; text-decoration-thickness: 1px; }
.prose a:hover, .link:hover { color: var(--amber); }
.sec--bone .lead, .sec--bone .body, .sec--bone .prose p, .sec--bone .prose li { color: var(--ink-mute); }
.sec--bone .prose strong { color: var(--ink); }
.sec--bone .muted, .sec--bone .note { color: var(--ink-mute); }
.num { font-family: var(--font-display); font-stretch: 70%; font-weight: 600; letter-spacing: .06em; }
.tnum { font-variant-numeric: tabular-nums; }

/* sodium-lamp sweep: an amber streak passes over the heading as the page scrolls */
.sweep { position: relative; overflow: hidden; padding-bottom: .1em; margin-bottom: -.1em; }
.sweep::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 36%; pointer-events: none;
  background: linear-gradient(100deg, rgba(240, 162, 36, 0) 0%, rgba(240, 162, 36, .6) 34%, rgba(255, 190, 40, 1) 50%, rgba(240, 162, 36, .6) 66%, rgba(240, 162, 36, 0) 100%);
  transform: translate3d(calc(var(--sx, -120) * 1%), 0, 0) scaleX(var(--sw, 1));
  opacity: var(--so, .55); mix-blend-mode: darken; will-change: transform;
}
.sec--bone .sweep::after { mix-blend-mode: lighten; opacity: calc(var(--so, .55) * .95); background: linear-gradient(100deg, rgba(234, 150, 20, 0) 0%, rgba(234, 150, 20, .7) 34%, rgba(234, 160, 24, 1) 50%, rgba(234, 150, 20, .7) 66%, rgba(234, 150, 20, 0) 100%); }
html.reduced-motion .sweep::after { display: none; }

/* ---------- sections ---------- */
:root { --sec-bg: var(--carbon); }
.sec { position: relative; padding-block: clamp(92px, 12vw, 184px); }
.sec--tight { padding-block: clamp(64px, 8vw, 120px); }
.sec--flush-top { padding-top: 0; }
.sec--asphalt { background: var(--asphalt); --sec-bg: var(--asphalt); }
.sec--bone { background: var(--bone); color: var(--ink); --sec-bg: var(--bone); }
.sec--asphalt + .sec--asphalt { box-shadow: 0 -2px 0 var(--asphalt); }
.sec--bone + .sec--bone { box-shadow: 0 -2px 0 var(--bone); }
.sec-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 24px; align-items: end; margin-bottom: clamp(48px, 6vw, 96px); }
.sec-head > .kicker { grid-column: 1 / -1; margin-bottom: 28px; }
.sec-head > .h2 { grid-column: 1 / span 8; }
.sec-head > .lead, .sec-head > .body { grid-column: 9 / span 4; }
@media (max-width: 960px) {
  .sec-head > .h2, .sec-head > .lead, .sec-head > .body { grid-column: 1 / -1; }
  .sec-head > .lead, .sec-head > .body { margin-top: 22px; }
}

/* ---------- buttons and links ---------- */
.btn {
  position: relative; display: inline-flex; align-items: center; gap: 14px;
  min-height: 56px; padding: 0 22px 0 26px; border: 0; border-radius: 0;
  font: 700 14px/1 var(--font-display); font-stretch: 82%; letter-spacing: .12em; text-transform: uppercase;
  color: var(--carbon); background: var(--amber); text-decoration: none; overflow: hidden; isolation: isolate;
  transition: color .45s var(--ease);
}
.btn::before { /* a dark band rolls in from the left on hover */
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--bone);
  transform: translateX(-101%); transition: transform .6s var(--ease);
}
.btn:hover::before, .btn:focus-visible::before { transform: translateX(0); }
.btn .i { width: 22px; height: 22px; flex: none; transition: transform .8s var(--ease); }
.btn:hover .i-wheel, .btn:focus-visible .i-wheel { transform: translateX(6px) rotate(220deg); }
.btn:hover .i-arrow { transform: translateX(5px); }
.btn--ghost { background: transparent; color: var(--text); box-shadow: inset 0 0 0 1px var(--line-2); }
.btn--ghost::before { background: var(--amber); }
.btn--ghost:hover, .btn--ghost:focus-visible { color: var(--carbon); }
.sec--bone .btn--ghost { color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-ink-2); }
.sec--bone .btn { background: var(--carbon); color: var(--bone); }
.sec--bone .btn::before { background: var(--amber); }
.sec--bone .btn:hover { color: var(--carbon); }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 40px; }
.arrow-link {
  display: inline-flex; align-items: center; gap: 12px; padding-block: 8px;
  font: 700 13.5px/1 var(--font-display); font-stretch: 80%; letter-spacing: .14em; text-transform: uppercase;
  text-decoration: none; color: var(--text); position: relative;
}
.arrow-link::after { content: ""; position: absolute; left: 0; right: 34px; bottom: 0; height: 2px; background: var(--dash); transform-origin: left; transform: scaleX(.3); transition: transform .6s var(--ease); }
.arrow-link:hover::after, .arrow-link:focus-visible::after { transform: scaleX(1); }
.arrow-link .i { width: 20px; height: 20px; color: var(--amber); transition: transform .6s var(--ease); }
.arrow-link:hover .i { transform: translateX(5px); }
.sec--bone .arrow-link { color: var(--ink); }
.sec--bone .arrow-link .i { color: var(--ink); }
.sec--bone .arrow-link::after { background: repeating-linear-gradient(90deg, var(--ink) 0 12px, transparent 12px 20px); }

/* ---------- scroll progress: a lane line across the top ---------- */
.scroll-lane { position: fixed; left: 0; right: 0; top: 0; height: 2px; z-index: 900; pointer-events: none; }
.scroll-lane i { display: block; height: 100%; background: var(--dash); transform-origin: left; transform: scaleX(0); }

/* ---------- header ---------- */
.site-header { position: fixed; inset: 0 0 auto 0; z-index: 800; height: var(--header-h); color: var(--bone); transition: transform .6s var(--ease); }
.site-header::before { content: ""; position: absolute; inset: 0; background: var(--asphalt); opacity: 0; transition: opacity .45s; box-shadow: 0 1px 0 var(--line); }
.site-header::after { content: ""; position: absolute; inset: 0 0 -60px 0; background: linear-gradient(to bottom, rgba(11, 11, 12, .55), rgba(11, 11, 12, 0)); pointer-events: none; transition: opacity .45s; z-index: -1; }
.site-header.is-scrolled::before { opacity: 1; }
.site-header.is-scrolled::after { opacity: 0; }
.site-header.is-hidden { transform: translateY(-101%); }
.site-header__inner { position: relative; height: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); display: flex; align-items: center; gap: 28px; }
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; margin-right: auto; }
.logo-mark { width: 40px; height: 40px; flex: none; }
.logo-mark__tire { fill: currentColor; }
.logo-mark__tread { stroke: var(--carbon); }
.site-header:not(.is-scrolled) .logo-mark__tread { stroke: rgba(11, 11, 12, .85); }
.logo-mark__patch { fill: var(--amber); }
.brand__name { display: flex; flex-direction: column; line-height: 1; }
.brand__l1 { font: 800 17px/1 var(--font-display); font-stretch: 112%; letter-spacing: .01em; text-transform: uppercase; }
.brand__l2 { margin-top: 4px; font: 600 10px/1 var(--font-display); font-stretch: 70%; letter-spacing: .42em; text-transform: uppercase; color: var(--concrete); }
.site-nav { position: relative; }
.site-nav ul { display: flex; gap: clamp(14px, 1.9vw, 34px); }
.site-nav a {
  display: block; padding: 12px 0; text-decoration: none;
  font: 650 14px/1 var(--font-display); font-stretch: 66%; letter-spacing: .17em; text-transform: uppercase;
  color: rgba(236, 233, 226, .78); transition: color .3s;
}
.site-nav a:hover, .site-nav a:focus-visible, .site-nav a[aria-current="page"] { color: var(--bone); }
.site-nav .lane { position: absolute; left: 0; bottom: 2px; height: 2px; width: 0; background: var(--dash); opacity: 0; transition: opacity .3s; pointer-events: none; }
.site-nav .lane.is-on { opacity: 1; }
.header-cta {
  display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 16px 0 18px; text-decoration: none;
  font: 700 13px/1 var(--font-display); font-stretch: 72%; letter-spacing: .16em; text-transform: uppercase;
  color: var(--carbon); background: var(--amber); transition: background .3s;
}
.header-cta .i { width: 18px; height: 18px; transition: transform .8s var(--ease); }
.header-cta:hover { background: var(--amber-hot); }
.header-cta:hover .i { transform: rotate(200deg); }
.header-cta[aria-current="page"] { background: var(--bone); }
.menu-toggle { display: none; position: relative; width: 48px; height: 48px; border: 0; background: transparent; color: inherit; padding: 0; }
.menu-toggle__bars i { position: absolute; left: 11px; right: 11px; height: 2px; background: currentColor; transition: transform .55s var(--ease), opacity .3s, top .55s var(--ease); }
.menu-toggle__bars i:nth-child(1) { top: 16px; }
.menu-toggle__bars i:nth-child(2) { top: 23px; right: 19px; background: var(--amber); }
.menu-toggle__bars i:nth-child(3) { top: 30px; }
.menu-open .menu-toggle__bars i:nth-child(1) { top: 23px; transform: rotate(45deg); }
.menu-open .menu-toggle__bars i:nth-child(2) { opacity: 0; transform: translateX(-12px); }
.menu-open .menu-toggle__bars i:nth-child(3) { top: 23px; transform: rotate(-45deg); }
@media (max-width: 1120px) {
  .site-nav, .header-cta { display: none; }
  .menu-toggle { display: block; }
}
.menu-open .site-header { transform: none; }
.menu-open .site-header::before { opacity: 0; }

.mobile-menu {
  position: fixed; inset: 0; z-index: 790; background: var(--carbon); color: var(--bone);
  padding: calc(var(--header-h) + 24px) var(--gutter) 28px; display: flex; flex-direction: column; justify-content: space-between;
  clip-path: inset(0 0 0 100%); visibility: hidden; transition: clip-path .75s var(--ease-io), visibility 0s .75s;
  overflow-y: auto;
}
.menu-open .mobile-menu { clip-path: inset(0 0 0 0); visibility: visible; transition: clip-path .75s var(--ease-io), visibility 0s; }
.mobile-menu__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.mobile-menu__list a {
  display: flex; align-items: baseline; gap: 16px; padding: 7px 0; text-decoration: none;
  font: 800 clamp(30px, 8.6vw, 54px)/1.02 var(--font-display); font-stretch: 74%; text-transform: uppercase; letter-spacing: -.005em;
  opacity: 0; transform: translateX(-36px); transition: opacity .5s, transform .8s var(--ease), font-stretch .5s var(--ease);
}
.mobile-menu__list a span { font: 600 12px/1 var(--font-display); font-stretch: 70%; letter-spacing: .16em; color: var(--amber); min-width: 2.2em; }
@media (hover: hover) { .mobile-menu__list a:hover { font-stretch: 108%; } }
.mobile-menu__list a:focus-visible { font-stretch: 108%; outline-offset: 2px; }
.menu-open .mobile-menu__list a { opacity: 1; transform: none; }
.menu-open .mobile-menu__list li:nth-child(1) a { transition-delay: .16s; } .menu-open .mobile-menu__list li:nth-child(2) a { transition-delay: .2s; }
.menu-open .mobile-menu__list li:nth-child(3) a { transition-delay: .24s; } .menu-open .mobile-menu__list li:nth-child(4) a { transition-delay: .28s; }
.menu-open .mobile-menu__list li:nth-child(5) a { transition-delay: .32s; } .menu-open .mobile-menu__list li:nth-child(6) a { transition-delay: .36s; }
.menu-open .mobile-menu__list li:nth-child(7) a { transition-delay: .4s; } .menu-open .mobile-menu__list li:nth-child(8) a { transition-delay: .44s; }
.mobile-menu__list a[aria-current="page"] { color: var(--amber); }
.mobile-menu__foot { margin-top: 28px; display: grid; gap: 18px; }
.tread-strip--menu { height: 40px; margin-inline: calc(var(--gutter) * -1); }
.mobile-menu__mail { color: var(--amber); font-size: 16px; text-decoration: none; overflow-wrap: anywhere; }

/* ---------- cursor: a small rolling tire ---------- */
.cursor__dot { position: absolute; width: 6px; height: 6px; margin: -3px 0 0 -3px; background: var(--amber); transition: transform .3s var(--ease), opacity .3s; }
.cursor__ring { position: absolute; width: 44px; height: 44px; margin: -22px 0 0 -22px; transition: transform .5s var(--ease), opacity .3s; }
.cursor__ring svg { width: 100%; height: 100%; overflow: visible; }
.ct-tire { fill: none; stroke: rgba(236, 233, 226, .5); stroke-width: 1.2; }
.ct-tread { fill: none; stroke: rgba(236, 233, 226, .55); stroke-width: 3.5; stroke-dasharray: 2.4 4.1; transition: stroke .3s; }
.ct-rim { fill: none; stroke: rgba(236, 233, 226, .35); stroke-width: 1; }
.ct-spoke { stroke: rgba(236, 233, 226, .3); stroke-width: 1; }
.cursor.is-link .cursor__ring { transform: scale(1.5); }
.cursor.is-link .ct-tread { stroke: var(--amber); }
.cursor.is-down .cursor__ring { transform: scale(1.18, .86); }
.cursor.is-link.is-down .cursor__ring { transform: scale(1.7, 1.25); }
.cursor__label {
  position: absolute; left: 30px; top: 16px; white-space: nowrap; padding: 8px 10px;
  font: 700 11px/1 var(--font-display); font-stretch: 74%; letter-spacing: .16em; text-transform: uppercase;
  color: var(--carbon); background: var(--amber); opacity: 0; transform: translateX(-6px); transition: opacity .3s, transform .4s var(--ease);
}
.cursor.has-label .cursor__label { opacity: 1; transform: none; }
.cursor.has-label .cursor__dot { opacity: 0; }
body.cursor-on-bone .ct-tire, body.cursor-on-bone .ct-tread, body.cursor-on-bone .ct-rim, body.cursor-on-bone .ct-spoke { stroke: rgba(11, 11, 12, .55); }
body.cursor-on-bone .cursor.is-link .ct-tread { stroke: var(--carbon); }
body.cursor-on-bone .cursor__label { background: var(--carbon); color: var(--bone); }

/* ---------- page transition: tread wipe ---------- */
.pt__cover { position: absolute; inset: 0; background: var(--carbon); display: grid; place-items: center; }
.pt__mark { width: 64px; height: 64px; color: var(--bone); opacity: .9; }
.pt__mark .logo-mark { width: 100%; height: 100%; }
.pt__mark .logo-mark__tread { stroke: var(--carbon); }
.pt__band { position: absolute; top: -4vh; bottom: -4vh; left: 0; width: clamp(220px, 34vw, 560px); transform: translateX(110vw); background: #0e0e0f; box-shadow: 0 0 0 1px rgba(0, 0, 0, .6), 0 0 80px 30px rgba(0, 0, 0, .55); }
.pt__tread { position: absolute; inset: 0; background-repeat: repeat-y; background-position: 0 0; }
.pt__tread::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0, 0, 0, .6), rgba(0, 0, 0, 0) 18%, rgba(255, 255, 255, .04) 50%, rgba(0, 0, 0, 0) 82%, rgba(0, 0, 0, .6)); }
.pt__edge { position: absolute; top: 0; bottom: 0; left: -3px; width: 3px; background: var(--amber); box-shadow: 0 0 28px 6px rgba(240, 162, 2, .55); }

/* ---------- tread strips (rolling bands) ---------- */
.tread-strip { position: relative; height: 56px; overflow: hidden; background: #0a0a0b; }
.tread-strip__roll { position: absolute; top: 0; bottom: 0; left: 0; background-repeat: repeat-x; background-position: 0 0; will-change: transform; }
.tread-divider { position: relative; }
.tread-divider .tread-strip { height: clamp(40px, 4.4vw, 64px); box-shadow: 0 -1px 0 rgba(236, 233, 226, .06), 0 1px 0 rgba(0, 0, 0, .8); }
.tread-divider__tag {
  position: absolute; right: var(--gutter); top: 50%; transform: translateY(-50%); z-index: 2;
  padding: 7px 10px; background: var(--carbon); color: var(--bone);
  font: 650 11px/1 var(--font-display); font-stretch: 72%; letter-spacing: .18em; text-transform: uppercase; box-shadow: inset 2px 0 0 var(--amber);
}

/* ---------- rubber press cards ---------- */
[data-rubber] { will-change: transform; }
.patch { position: absolute; left: 12%; right: 12%; bottom: 0; height: 3px; background: var(--amber); transform: scaleX(.25); transform-origin: 50% 50%; pointer-events: none; z-index: 3; }

/* ---------- media ---------- */
.frame { position: relative; overflow: hidden; }
.frame img { width: 100%; height: 100%; object-fit: cover; }
.cap { margin-top: 14px; display: flex; justify-content: space-between; gap: 18px; font: 600 11.5px/1.4 var(--font-display); font-stretch: 76%; letter-spacing: .16em; text-transform: uppercase; color: var(--concrete); }
.cap span:first-child { color: var(--amber); white-space: nowrap; }
.sec--bone .cap { color: var(--ink-mute); }
.sec--bone .cap span:first-child { color: var(--ink); }
.r-45 { aspect-ratio: 4 / 5; } .r-32 { aspect-ratio: 3 / 2; } .r-169 { aspect-ratio: 16 / 9; } .r-11 { aspect-ratio: 1 / 1; } .r-cine { aspect-ratio: 2.35 / 1; } .r-21 { aspect-ratio: 2 / 1; } .r-34 { aspect-ratio: 3 / 4; }
.r-45 > img, .r-32 > img, .r-169 > img, .r-11 > img, .r-cine > img, .r-21 > img, .r-34 > img { width: 100%; height: 100%; object-fit: cover; }

/* ==========================================================================
   Home hero
   ========================================================================== */
.hero { position: relative; min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; background: var(--carbon); }
.hero__media { position: absolute; inset: 0; overflow: hidden; }
.hero__media img { width: 100%; height: 116%; object-fit: cover; object-position: 50% 40%; filter: saturate(.9) contrast(1.05); }
.hero__shade { position: absolute; inset: 0; background:
  linear-gradient(180deg, rgba(11, 11, 12, .72) 0%, rgba(11, 11, 12, .38) 32%, rgba(11, 11, 12, .58) 64%, var(--carbon) 100%),
  linear-gradient(90deg, rgba(11, 11, 12, .7) 0%, rgba(11, 11, 12, 0) 70%); }
.hero__grid { position: relative; z-index: 2; padding-top: calc(var(--header-h) + 40px); padding-bottom: clamp(28px, 4vh, 48px); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 24px; align-items: end; }
.hero__grid > .kicker { grid-column: 1 / -1; margin-bottom: clamp(18px, 3vh, 34px); }
.hero__title { grid-column: 1 / -1; font-size: calc(clamp(32px, min(9.5vw, 16.5vh), 172px) * var(--fit, 1)); }
.hero__title .ln--thin { font-weight: 300; color: var(--amber); }
.hero__lead { grid-column: 1 / span 6; margin-top: clamp(18px, 3vh, 34px); }
.hero__lead .lead { color: rgba(236, 233, 226, .86); }
.hero__actions { grid-column: 8 / span 5; justify-self: end; align-self: end; margin-top: 24px; }
.hero__actions .btn-row { margin-top: 0; justify-content: flex-end; }
.hero__tread { position: relative; z-index: 2; height: clamp(84px, 15vh, 156px); background: #0a0a0b; box-shadow: 0 -1px 0 rgba(236, 233, 226, .08); }
.hero__tread canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__tread .tread-strip { position: absolute; inset: 0; height: auto; opacity: 0; }
.hero__tread.is-fallback .tread-strip { opacity: 1; }
.hero__tread.is-fallback canvas { display: none; }
.hero__patch { position: absolute; top: 10px; bottom: 10px; left: 58%; width: clamp(110px, 13vw, 210px); pointer-events: none; }
.hero__patch::before { content: ""; position: absolute; inset: 0; border: 2px solid var(--amber); clip-path: polygon(0 0, 22% 0, 22% 3px, 3px 3px, 3px 22%, 0 22%, 0 0, 100% 0, 100% 22%, calc(100% - 3px) 22%, calc(100% - 3px) 3px, 78% 3px, 78% 0, 100% 0, 100% 100%, 78% 100%, 78% calc(100% - 3px), calc(100% - 3px) calc(100% - 3px), calc(100% - 3px) 78%, 100% 78%, 100% 100%, 0 100%, 0 78%, 3px 78%, 3px calc(100% - 3px), 22% calc(100% - 3px), 22% 100%, 0 100%); }
.hero__patch span { position: absolute; left: 8px; top: 8px; padding: 5px 7px; background: rgba(11, 11, 12, .82); white-space: nowrap; font: 650 11px/1 var(--font-display); font-stretch: 72%; letter-spacing: .2em; text-transform: uppercase; color: var(--amber); }
@media (max-width: 960px) {
  .hero__lead, .hero__actions { grid-column: 1 / -1; justify-self: start; }
  .hero__actions .btn-row { justify-content: flex-start; }
}
@media (max-width: 600px) { .hero__patch { left: 54%; } }

/* ---------- inner page hero ---------- */
.page-hero { position: relative; overflow: clip; padding-top: calc(var(--header-h) + clamp(56px, 9vw, 132px)); padding-bottom: clamp(40px, 5vw, 72px); }
.page-hero__ring { position: absolute; right: -11vw; top: calc(var(--header-h) + 2vw); width: min(36vw, 540px); pointer-events: none; opacity: .8; }
.page-hero__ring .ring__tire { fill: #101012; }
.page-hero > .wrap, .page-hero > figure { position: relative; }
@media (max-width: 760px) { .page-hero__ring { display: none; } }
.page-hero > .wrap > .kicker { margin-bottom: clamp(20px, 2.6vw, 36px); }
.page-hero__row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; align-items: end; margin-top: clamp(26px, 3vw, 44px); }
.page-hero__row .lead { grid-column: 1 / span 6; }
.page-hero__row .page-hero__aside { grid-column: 8 / span 5; justify-self: end; text-align: right; }
.page-hero__media { margin-top: clamp(44px, 6vw, 88px); }
.page-hero__media .frame { aspect-ratio: 2.35 / 1; }
@media (max-width: 960px) { .page-hero__row .lead, .page-hero__row .page-hero__aside { grid-column: 1 / -1; justify-self: start; text-align: left; } }
@media (max-width: 600px) { .page-hero__media .frame { aspect-ratio: 4 / 3; } }

/* ---------- chips, lists, checklist ---------- */
.chips { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chips li { padding: 7px 11px; font: 600 12px/1 var(--font-display); font-stretch: 78%; letter-spacing: .1em; text-transform: uppercase; color: var(--text-dim); box-shadow: inset 0 0 0 1px var(--line-2); }
.sec--bone .chips li { color: var(--ink-mute); box-shadow: inset 0 0 0 1px var(--line-ink-2); }
.checklist { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; }
.checklist li { display: grid; grid-template-columns: 26px 1fr; gap: 14px; padding: 14px 0; border-top: 1px solid var(--line); color: var(--text-dim); }
.checklist li:last-child { border-bottom: 1px solid var(--line); }
.checklist .i { width: 20px; height: 20px; color: var(--amber); margin-top: 3px; }
.checklist strong { color: var(--text); font-weight: 600; }
.sec--bone .checklist li { border-color: var(--line-ink); color: var(--ink-mute); }
.sec--bone .checklist .i { color: var(--ink); }
.sec--bone .checklist strong { color: var(--ink); }
.cols-2 { columns: 2; column-gap: 48px; }
.cols-2 li { break-inside: avoid; }
@media (max-width: 760px) { .cols-2 { columns: 1; } }

/* ---------- statement + contact patch visual ---------- */
.patchsec__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 24px; align-items: center; }
.patchsec__copy { grid-column: 1 / span 6; }
.patchsec__copy .h2 { margin: 26px 0 24px; }
.patchsec__visual { grid-column: 8 / span 5; }
.pv { position: relative; aspect-ratio: 1 / 1.08; background: radial-gradient(circle at 50% 46%, #232427 0%, var(--carbon-2) 70%); box-shadow: inset 0 0 0 1px var(--line); }
.pv svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.pv-grid { stroke: rgba(236, 233, 226, .06); stroke-width: 1; }
.pv-outline { fill: none; stroke: var(--amber); stroke-width: 2; }
.pv-len { stroke: var(--concrete); stroke-width: 1; stroke-dasharray: 3 5; }
.pv-label { font: 650 13px var(--font-display); font-stretch: 72%; letter-spacing: .16em; text-transform: uppercase; fill: var(--concrete); }
.pv-label--amber { fill: var(--amber); }
.seg-btns { display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; margin-top: 30px; box-shadow: inset 0 0 0 1px var(--line-2); }
.seg-btns button { min-height: 48px; padding: 0 18px; border: 0; background: transparent; color: var(--text-dim); font: 700 12.5px/1 var(--font-display); font-stretch: 76%; letter-spacing: .14em; text-transform: uppercase; transition: color .3s, background .3s; }
.seg-btns button + button { box-shadow: inset 1px 0 0 var(--line-2); }
.seg-btns button[aria-pressed="true"] { background: var(--amber); color: var(--carbon); }
.readout { margin-top: 18px; min-height: 5.4em; color: var(--text); max-width: 46ch; }
.patchsec__figure { margin-top: clamp(64px, 8vw, 120px); }
.patchsec__figure .frame { aspect-ratio: 2.35 / 1; }
@media (max-width: 960px) {
  .patchsec__copy, .patchsec__visual { grid-column: 1 / -1; }
  .patchsec__visual { margin-top: 48px; }
  .patchsec__figure .frame { aspect-ratio: 16 / 10; }
}

/* ---------- program lanes (home) ---------- */
.lanes__list { border-top: 2px solid transparent; border-image: var(--dash) 1; }
.lane-row { position: relative; display: grid; grid-template-columns: 84px minmax(0, 1fr) clamp(180px, 22vw, 300px); gap: 0 clamp(20px, 3vw, 48px); align-items: center; padding: clamp(28px, 3.4vw, 44px) 0; text-decoration: none; color: inherit; border-bottom: 1px solid var(--line); }
.lane-row__no { align-self: start; padding-top: 10px; font-size: 15px; color: var(--amber); }
.lane-row__title { font: 800 clamp(30px, 4.4vw, 70px)/.95 var(--font-display); font-stretch: 84%; text-transform: uppercase; letter-spacing: -.01em; transition: font-stretch .7s var(--ease), color .4s; }
.lane-row:hover .lane-row__title, .lane-row:focus-visible .lane-row__title { font-stretch: 104%; color: var(--amber); }
.lane-row__copy p { margin-top: 16px; color: var(--text-dim); max-width: 58ch; }
.lane-row__copy .chips { margin-top: 18px; }
.lane-row__wheel { justify-self: end; width: 100%; }
.lane-row .patch { left: 84px; right: auto; width: 240px; bottom: -1px; transform-origin: 0 50%; }
@media (max-width: 760px) {
  .lane-row { grid-template-columns: 1fr; }
  .lane-row__no { padding-top: 0; margin-bottom: 10px; }
  .lane-row__wheel { justify-self: start; width: 62%; margin-top: 26px; order: 3; }
  .lane-row .patch { left: 0; }
}

/* ---------- construction cutaway ---------- */
.cutaway { padding: 0; }
.cutaway__pin { min-height: 100vh; display: flex; align-items: center; padding-block: calc(var(--header-h) + 12px) 32px; background: var(--carbon); }
.cutaway__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 24px; align-items: center; }
.cutaway__head { grid-column: 1 / span 4; grid-row: 1; align-self: center; }
.cutaway__head .h2 { margin: 18px 0 16px; font-size: clamp(30px, 3.3vw, 54px); }
.cutaway__head .body { max-width: 40ch; font-size: 16px; }
.cutaway__now { margin-top: 16px; display: inline-flex; flex-wrap: wrap; gap: 6px 12px; align-items: baseline; font: 650 12px/1.3 var(--font-display); font-stretch: 72%; letter-spacing: .18em; text-transform: uppercase; color: var(--concrete); }
.cutaway__now strong { color: var(--amber); font-weight: 700; }
.cutaway__stage { grid-column: 5 / span 5; grid-row: 1; align-self: center; }
.cutaway__svg { width: 100%; height: auto; max-height: 78vh; overflow: visible; }
.cutaway .layers { grid-column: 10 / span 3; grid-row: 1; align-self: center; list-style: none; margin: 0; padding: 0; }
.layers li { border-top: 1px solid var(--line); }
.layers li:last-child { border-bottom: 1px solid var(--line); }
.layers button { display: grid; grid-template-columns: 40px 1fr; gap: 0 10px; width: 100%; padding: 13px 0; border: 0; background: transparent; color: var(--text-dim); text-align: left; }
.layers .num { color: var(--concrete); font-size: 13px; padding-top: 4px; transition: color .3s; }
.layers h3 { font: 700 18px/1.15 var(--font-display); font-stretch: 84%; text-transform: uppercase; letter-spacing: .01em; color: var(--text-dim); transition: color .3s, font-stretch .5s var(--ease); }
.layers p { grid-column: 2; font-size: 14.5px; line-height: 1.5; max-height: 0; opacity: 0; overflow: hidden; transition: max-height .6s var(--ease), opacity .4s, margin .4s; }
.layers li.is-active h3 { color: var(--bone); font-stretch: 100%; }
.layers li.is-active .num, .layers li.is-done .num { color: var(--amber); }
.layers li.is-active p { max-height: 8em; opacity: 1; margin-top: 6px; }
.is-static .layers p { max-height: none; opacity: 1; margin-top: 6px; }
.is-static .cutaway__now, html.reduced-motion .motion-only { display: none; }
/* svg styling */
.cw-ground { stroke: var(--line-2); stroke-width: 2; stroke-dasharray: 14 10; fill: none; }
.cw-rim path:not(.cw-ground) { stroke: rgba(236, 233, 226, .3); stroke-width: 6; fill: none; stroke-linecap: square; }
.cw-fill { stroke: rgba(236, 233, 226, .14); stroke-width: 1.2; }
.cw-tread { fill: url(#cw-rubber); }
.cw-stroke { fill: none; stroke-linecap: round; }
.cw-cap { stroke: #c9c6bf; stroke-width: 7; stroke-dasharray: 2 4; }
.cw-belt { stroke: #9a9892; stroke-width: 8; }
.cw-belt--b { stroke: #7d7b76; }
.cw-ply { stroke: #d4cfc3; stroke-width: 5; stroke-dasharray: 1 5; }
.cw-liner { stroke: #55565a; stroke-width: 9; }
.cw-apex { fill: #3a3b3f; stroke: rgba(236, 233, 226, .2); }
.cw-bead { fill: #222326; stroke: rgba(236, 233, 226, .3); }
.cw-wire circle { fill: #8c8a85; }
.cw-marker { transition: opacity .5s; }
.cutaway:not(.is-open) .cw-marker { opacity: 0; }
.is-static .cw-marker { opacity: 1; }
.cw-marker circle { fill: var(--carbon); stroke: var(--concrete); stroke-width: 1.5; transition: fill .3s, stroke .3s; }
.cw-marker text { font: 700 16px var(--font-display); font-stretch: 80%; fill: var(--concrete); text-anchor: middle; }
.cw-layer { transition: opacity .4s; }
.cw-layer.is-active .cw-marker circle { fill: var(--amber); stroke: var(--amber); }
.cw-layer.is-active .cw-marker text { fill: var(--carbon); }
.cw-layer.is-active .cw-fill, .cw-layer.is-active .cw-stroke { filter: drop-shadow(0 0 10px rgba(240, 162, 2, .5)); }
.cw-layer.is-active .cw-tread, .cw-layer.is-active .cw-side { stroke: var(--amber); stroke-width: 2; }
.cw-layer.is-active .cw-cap, .cw-layer.is-active .cw-belt, .cw-layer.is-active .cw-ply, .cw-layer.is-active .cw-liner { stroke: var(--amber); }
.cw-layer.is-active .cw-bead { stroke: var(--amber); }
@media (max-width: 999px) {
  .cutaway { padding-block: clamp(80px, 12vw, 140px); }
  .cutaway__pin { min-height: 0; padding: 0; display: block; }
  .cutaway__head, .cutaway__stage, .cutaway .layers { grid-column: 1 / -1; grid-row: auto; }
  .cutaway__head .h2 { font-size: clamp(32px, 4.5vw, 74px); }
  .cutaway__stage { margin: 30px 0 20px; }
  .cutaway__svg { max-height: none; }
}

/* ---------- build line (home teaser) ---------- */
.build { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 24px; align-items: start; }
.build__media { grid-column: 1 / span 4; }
.build__copy { grid-column: 6 / span 7; }
.build__copy .h2 { margin: 24px 0 22px; }
.buildline { list-style: none; margin: 48px 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 16px; position: relative; }
.buildline::before { content: ""; position: absolute; left: 0; right: 0; top: 27px; height: 2px; background: var(--dash); opacity: .7; }
.buildline li { position: relative; padding-top: 0; }
.buildline .node { position: relative; z-index: 1; width: 56px; height: 56px; display: grid; place-items: center; background: var(--sec-bg); box-shadow: inset 0 0 0 1px var(--line-2); color: var(--bone); transition: box-shadow .4s, color .4s; }
.buildline .node .i { width: 30px; height: 30px; }
.buildline li:hover .node { box-shadow: inset 0 0 0 2px var(--amber); color: var(--amber); }
.buildline h3 { margin-top: 18px; font: 700 16px/1.15 var(--font-display); font-stretch: 82%; text-transform: uppercase; letter-spacing: .06em; }
.buildline p { margin-top: 8px; font-size: 14.5px; line-height: 1.5; color: var(--text-dim); }
.buildline .num { display: block; margin-top: 16px; font-size: 12px; color: var(--amber); }
@media (max-width: 1100px) { .build__media, .build__copy { grid-column: 1 / -1; } .build__copy { margin-top: 48px; } }
.sec--bone .buildline::before { background: repeating-linear-gradient(90deg, var(--ink) 0 12px, transparent 12px 20px); opacity: .45; }
.sec--bone .buildline .node { color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-ink-2); }
.sec--bone .buildline li:hover .node { color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); }
.sec--bone .buildline p { color: var(--ink-mute); }
.sec--bone .buildline .num { color: var(--ink); }
@media (max-width: 760px) {
  .sec--bone .buildline::before { background: repeating-linear-gradient(180deg, var(--ink) 0 12px, transparent 12px 20px); }
  .buildline { grid-template-columns: 1fr; gap: 22px; }
  .buildline::before { left: 27px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; background: repeating-linear-gradient(180deg, var(--amber) 0 12px, transparent 12px 20px); }
  .buildline li { display: grid; grid-template-columns: 56px 1fr; gap: 0 18px; }
  .buildline li > :not(.node) { grid-column: 2; }
  .buildline .num { margin-top: 0; grid-row: 1; }
  .buildline .node { grid-row: 1 / span 3; }
  .buildline h3 { margin-top: 4px; }
}

/* ---------- expanding partner panels (home) ---------- */
.panels { display: flex; gap: 12px; height: clamp(460px, 64vh, 660px); }
.panel { position: relative; flex: 1 1 0; min-width: 0; overflow: hidden; text-decoration: none; color: var(--bone); background: var(--asphalt); transition: flex-grow .9s var(--ease); isolation: isolate; }
.panels:hover .panel, .panels:focus-within .panel { flex-grow: .78; }
.panels .panel:hover, .panels .panel:focus-visible { flex-grow: 1.9; }
.panel__img { position: absolute; inset: 0; z-index: -1; }
.panel__img img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: transform 1.4s var(--ease), filter .8s; filter: brightness(.62) saturate(.8); }
.panel:hover .panel__img img { transform: scale(1); filter: brightness(.78) saturate(1); }
.panel__img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11, 11, 12, .1) 30%, rgba(11, 11, 12, .92) 100%); }
.panel__body { position: absolute; left: 0; right: 0; bottom: 0; padding: clamp(22px, 2.4vw, 36px); }
.panel__body .num { font-size: 13px; color: var(--amber); }
.panel__body h3 { margin-top: 10px; font: 800 clamp(26px, 2.6vw, 42px)/.98 var(--font-display); font-stretch: 80%; text-transform: uppercase; }
.panel__body p { margin-top: 14px; max-width: 40ch; color: rgba(236, 233, 226, .82); font-size: 15.5px; }
.panel__body .arrow-link { margin-top: 16px; }
@media (hover: hover) and (min-width: 961px) {
  .panel__body p, .panel__body .arrow-link { opacity: 0; transform: translateY(10px); transition: opacity .5s, transform .7s var(--ease); }
  .panel:hover .panel__body p, .panel:hover .panel__body .arrow-link, .panel:focus-visible .panel__body p, .panel:focus-visible .panel__body .arrow-link { opacity: 1; transform: none; transition-delay: .15s; }
}
html.reduced-motion .panel__body p, html.reduced-motion .panel__body .arrow-link { opacity: 1 !important; transform: none !important; }
@media (max-width: 960px) {
  .panels { flex-direction: column; height: auto; }
  .panel { flex: none; height: 420px; }
  .panels:hover .panel, .panels .panel:hover { flex-grow: 0; }
}

/* ---------- CTA band ---------- */
.cta { overflow: hidden; }
.cta__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 24px; align-items: center; }
.cta__copy { grid-column: 1 / span 7; position: relative; z-index: 1; }
.cta__copy .display { font-size: calc(clamp(40px, 8.4vw, 150px) * var(--fit, 1)); margin: 22px 0 28px; }
.cta__copy .lead { max-width: 40ch; }
.cta__mail { display: inline-flex; align-items: center; gap: 12px; margin-top: 26px; font: 600 clamp(17px, 1.6vw, 24px)/1.2 var(--font-display); font-stretch: 86%; color: var(--amber); text-decoration: none; overflow-wrap: anywhere; border-bottom: 2px solid transparent; border-image: var(--dash) 1; padding-bottom: 6px; }
.cta__mail .i { width: 24px; height: 24px; flex: none; }
.cta__ring { grid-column: 8 / span 5; position: relative; }
@media (max-width: 960px) { .cta__copy, .cta__ring { grid-column: 1 / -1; } .cta__ring { width: min(100%, 460px); margin: 56px auto 0; } }

/* ---------- sidewall ring (generated by JS from data-ring-text) ---------- */
.ring { position: relative; aspect-ratio: 1 / 1; width: 100%; }
.ring > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ring__photo { position: absolute; inset: 16%; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 1px var(--line-2); }
.ring__photo img { width: 100%; height: 100%; object-fit: cover; }
.ring__type { transform-box: view-box; transform-origin: 50% 50%; }
.ring__tire { fill: #121214; stroke: rgba(236, 233, 226, .08); }
.ring__text { font: 700 15px var(--font-display); font-stretch: 78%; letter-spacing: .26em; fill: rgba(236, 233, 226, .78); text-transform: uppercase; }
.ring__tick { stroke: rgba(236, 233, 226, .22); stroke-width: 1.3; }
.ring__tick--a { stroke: var(--amber); stroke-width: 2.4; }
.ring__notch { fill: var(--amber); }

/* ==========================================================================
   Inner page building blocks
   ========================================================================== */
.subnav { position: sticky; top: 0; transition: top .6s var(--ease); z-index: 60; background: rgba(11, 11, 12, .94); border-bottom: 1px solid var(--line); backdrop-filter: none; }
.subnav ul { position: relative; display: flex; overflow-x: auto; scrollbar-width: none; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.subnav ul::-webkit-scrollbar { display: none; }
.subnav a { display: block; padding: 20px 22px 18px 0; margin-right: 22px; white-space: nowrap; text-decoration: none; font: 650 13px/1 var(--font-display); font-stretch: 70%; letter-spacing: .16em; text-transform: uppercase; color: var(--concrete); transition: color .3s; }
.subnav a span { color: var(--amber); margin-right: 8px; }
.subnav a:hover, .subnav a.is-active { color: var(--bone); }
body:has(.site-header.is-scrolled:not(.is-hidden)) .subnav { top: var(--header-h); }
.subnav__lane { position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: var(--dash); pointer-events: none; }

/* program articles (tires page) */
.program { padding-block: clamp(84px, 10vw, 160px); scroll-margin-top: 40px; border-top: 1px solid var(--line); }
.program:first-of-type { border-top: 0; }
.program__head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 24px; align-items: end; }
.program__no { grid-column: 1 / span 2; font: 800 clamp(64px, 9vw, 150px)/.8 var(--font-display); font-stretch: 58%; color: transparent; -webkit-text-stroke: 1.5px var(--amber); }
.program__head .h2 { grid-column: 3 / span 6; }
.program__head .lead { grid-column: 9 / span 4; }
.program__media { margin-top: clamp(40px, 5vw, 72px); }
.program__media .frame { aspect-ratio: 2.35 / 1; }
.program__cols { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 48px 24px; margin-top: clamp(48px, 6vw, 88px); }
.program__cols > .col-apps { grid-column: 1 / span 4; }
.program__cols > .col-tread { grid-column: 5 / span 8; }
.program__cols > .col-cons { grid-column: 1 / span 6; }
.program__cols > .col-quote { grid-column: 7 / span 6; }
.program__cols .h4 { margin-bottom: 18px; }
@media (max-width: 960px) {
  .program__no, .program__head .h2, .program__head .lead { grid-column: 1 / -1; }
  .program__head .h2 { margin-top: 18px; }
  .program__head .lead { margin-top: 20px; }
  .program__cols > * { grid-column: 1 / -1 !important; }
  .program__media .frame { aspect-ratio: 16 / 10; }
}
.tread-types { display: grid; gap: 0; }
.tread-type { display: grid; grid-template-columns: minmax(120px, 210px) minmax(0, 1fr); gap: 0 24px; align-items: center; padding: 18px 0; border-top: 1px solid var(--line); }
.tread-type:last-child { border-bottom: 1px solid var(--line); }
.tread-type .tread-strip { height: 70px; box-shadow: inset 0 0 0 1px rgba(236, 233, 226, .06); }
.tread-type h4 { font: 700 18px/1.15 var(--font-display); font-stretch: 86%; text-transform: uppercase; letter-spacing: .03em; }
.tread-type h4 span { color: var(--amber); margin-right: 8px; }
.tread-type p { margin-top: 6px; font-size: 15px; line-height: 1.55; color: var(--text-dim); }
@media (max-width: 600px) { .tread-type { grid-template-columns: 1fr; gap: 14px; } .tread-type .tread-strip { height: 56px; } }
.quote-card { padding: clamp(24px, 3vw, 40px); background: var(--asphalt); box-shadow: inset 3px 0 0 var(--amber); }
.quote-card .h4 { color: var(--bone); }
.codes { width: 100%; border-collapse: collapse; font-size: 15px; }
.codes th, .codes td { text-align: left; vertical-align: top; padding: 12px 14px 12px 0; border-bottom: 1px solid var(--line); }
.codes th { font: 700 15px/1.2 var(--font-display); font-stretch: 80%; letter-spacing: .06em; color: var(--amber); white-space: nowrap; }
.codes td { color: var(--text-dim); }
.codes thead th { font: 650 11.5px/1.2 var(--font-display); font-stretch: 72%; letter-spacing: .18em; text-transform: uppercase; color: var(--concrete); }

/* split media/copy */
.split { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 24px; align-items: center; }
.split__media { grid-column: 1 / span 6; }
.split__copy { grid-column: 8 / span 5; }
.split--flip .split__media { grid-column: 7 / span 6; order: 2; }
.split--flip .split__copy { grid-column: 1 / span 5; order: 1; }
.split__copy .h2 { margin: 24px 0 24px; }
@media (max-width: 960px) {
  .split__media, .split__copy, .split--flip .split__media, .split--flip .split__copy { grid-column: 1 / -1; order: 0; }
  .split__copy { margin-top: 44px; }
}

/* material cards (engineering) */
.materials { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.material { position: relative; padding: clamp(24px, 2.6vw, 36px); background: var(--asphalt); min-height: 300px; display: flex; flex-direction: column; overflow: hidden; }
.material .i-mat { width: 54px; height: 54px; color: var(--amber); }
.material h3 { margin-top: auto; padding-top: 34px; font: 800 clamp(22px, 2vw, 30px)/1 var(--font-display); font-stretch: 84%; text-transform: uppercase; }
.material p { margin-top: 12px; font-size: 15.5px; color: var(--text-dim); }
.material .num { position: absolute; right: 22px; top: 22px; font-size: 12px; color: var(--concrete); }
@media (max-width: 1100px) { .materials { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .materials { grid-template-columns: 1fr; } .material { min-height: 0; } }

/* composition ring chart (engineering) */
.comp { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 24px; align-items: center; }
.comp__chart { grid-column: 1 / span 5; position: relative; }
.comp__chart svg { width: 100%; height: auto; overflow: visible; }
.comp__copy { grid-column: 7 / span 6; }
.comp__copy .h2, .tin__copy .h2 { margin: 24px 0 22px; }
.comp-legend { list-style: none; margin: 28px 0 0; padding: 0; }
.comp-legend li { display: grid; grid-template-columns: 18px 1fr auto; gap: 14px; align-items: baseline; padding: 12px 0; border-top: 1px solid var(--line); color: var(--text-dim); }
.comp-legend li:last-child { border-bottom: 1px solid var(--line); }
.comp-legend i { width: 12px; height: 12px; display: inline-block; }
.comp-legend b { font: 700 18px/1 var(--font-display); font-stretch: 80%; color: var(--bone); }
.arc-label { font: 700 13px var(--font-display); font-stretch: 76%; letter-spacing: .12em; fill: var(--bone); text-transform: uppercase; }
@media (max-width: 960px) { .comp__chart, .comp__copy { grid-column: 1 / -1; } .comp__chart { width: min(100%, 440px); margin: 0 auto 40px; } }

/* tread anatomy (engineering) */
.anatomy { position: relative; }
.anatomy svg { width: 100%; height: auto; display: block; }
@media (max-width: 760px) {
  .anatomy { overflow-x: auto; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scrollbar-width: thin; }
  .anatomy svg { width: 760px; max-width: none; }
  .anatomy::after { content: "Swipe to see the labels"; display: block; margin-top: 10px; font: 650 11px/1 var(--font-display); font-stretch: 72%; letter-spacing: .16em; text-transform: uppercase; color: var(--concrete); }
}
.an-block { fill: #2c2d31; stroke: rgba(236, 233, 226, .14); stroke-width: 1; transition: fill .3s; }
.an-groove { fill: #0a0a0b; }
.an-sipe { stroke: #070708; stroke-width: 2.4; fill: none; }
.an-twi { fill: #4a4b50; }
.an-call { stroke: var(--amber); stroke-width: 1.4; fill: none; }
.an-dot { fill: var(--amber); }
.an-text { font: 700 14px var(--font-display); font-stretch: 78%; letter-spacing: .14em; text-transform: uppercase; fill: var(--bone); }
.an-terms { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 32px; margin-top: 40px; }
.an-terms div { padding: 18px 0; border-top: 1px solid var(--line); }
.an-terms dt { font: 700 16px/1.2 var(--font-display); font-stretch: 84%; text-transform: uppercase; letter-spacing: .05em; color: var(--bone); }
.an-terms dd { margin: 6px 0 0; font-size: 15px; color: var(--text-dim); }
@media (max-width: 900px) { .an-terms { grid-template-columns: 1fr; } }

/* radial vs bias */
.rvb { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.rvb__card { background: var(--asphalt); padding: clamp(24px, 3vw, 44px); }
.rvb__card svg { width: 100%; height: auto; margin-bottom: 28px; }
.rvb__card h3 { font: 800 clamp(26px, 2.6vw, 40px)/1 var(--font-display); font-stretch: 82%; text-transform: uppercase; }
.rvb__card p { margin-top: 14px; color: var(--text-dim); }
.rv-cord { stroke: #d4cfc3; stroke-width: 2; }
.rv-belt { stroke: var(--amber); stroke-width: 2.4; }
.rv-edge { fill: none; stroke: rgba(236, 233, 226, .3); stroke-width: 1.5; }
.rv-band { fill: #1a1b1e; }
.rv-label { font: 650 12px var(--font-display); font-stretch: 74%; letter-spacing: .16em; text-transform: uppercase; fill: var(--concrete); }
.table-wrap { overflow-x: auto; margin-top: clamp(40px, 5vw, 64px); box-shadow: inset 0 0 0 1px var(--line); }
.compare { width: 100%; min-width: 680px; border-collapse: collapse; font-size: 15.5px; }
.compare th, .compare td { text-align: left; vertical-align: top; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.compare thead th { font: 650 12px/1.2 var(--font-display); font-stretch: 72%; letter-spacing: .18em; text-transform: uppercase; color: var(--concrete); background: var(--asphalt); }
.compare tbody th { font: 700 16px/1.25 var(--font-display); font-stretch: 84%; color: var(--bone); width: 24%; }
.compare td { color: var(--text-dim); }
.compare tbody tr:last-child th, .compare tbody tr:last-child td { border-bottom: 0; }
@media (max-width: 760px) { .rvb { grid-template-columns: 1fr; } }

/* horizontal pinned timeline */
.hs { position: relative; overflow: hidden; }
@media (min-width: 1000px) and (prefers-reduced-motion: no-preference) { .hs { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; } }
.hs__head { padding-top: clamp(84px, 10vw, 150px); }
.hs__frame { position: relative; }
.hs__track { display: flex; gap: 0; width: max-content; padding: clamp(40px, 5vw, 64px) var(--gutter) clamp(56px, 6vw, 88px); }
.hs__panel { position: relative; width: min(78vw, 1020px); flex: none; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 0 clamp(24px, 3vw, 56px); align-items: center; padding-right: clamp(48px, 6vw, 110px); }
.hs__art { aspect-ratio: 1 / 1; background: var(--asphalt); position: relative; display: grid; place-items: center; overflow: hidden; }
.hs__art svg { width: 82%; height: 82%; overflow: visible; }
.hs__step { font: 800 clamp(80px, 10vw, 170px)/.8 var(--font-display); font-stretch: 56%; color: transparent; -webkit-text-stroke: 1.5px var(--amber); }
.hs__panel h3 { margin-top: 18px; font: 800 clamp(30px, 3.4vw, 56px)/.96 var(--font-display); font-stretch: 82%; text-transform: uppercase; }
.hs__panel p { margin-top: 16px; color: var(--text-dim); }
.hs__panel ul { margin-top: 16px; padding-left: 1.1em; color: var(--text-dim); font-size: 15.5px; }
.hs__panel li + li { margin-top: 6px; }
.hs__progress { position: absolute; left: var(--gutter); right: var(--gutter); bottom: clamp(24px, 3vw, 40px); height: 2px; background: var(--line); }
.hs__progress i { position: absolute; inset: 0; background: var(--dash); transform-origin: left; transform: scaleX(0); }
.ill { fill: none; stroke: var(--bone); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ill--amber { stroke: var(--amber); }
.ill--fill { fill: #2a2b2f; }
.ill--dim { stroke: rgba(236, 233, 226, .35); }
@media (max-width: 999px), (prefers-reduced-motion: reduce) {
  .hs__track { flex-direction: column; width: auto; gap: 56px; }
  .hs__panel { width: 100%; padding-right: 0; grid-template-columns: 1fr; gap: 26px; }
  .hs__art { max-width: 520px; }
  .hs__progress { display: none; }
}
html.reduced-motion .hs { min-height: 0; display: block; }
html.reduced-motion .hs__track { flex-direction: column; width: auto; gap: 56px; }
html.reduced-motion .hs__panel { width: 100%; padding-right: 0; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 0 48px; }
html.reduced-motion .hs__progress { display: none; }
@media (max-width: 999px) { html.reduced-motion .hs__panel { grid-template-columns: 1fr; gap: 26px; } }

/* compliance cards + grades (quality) */
.std-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.std { background: var(--asphalt); padding: clamp(24px, 3vw, 44px); position: relative; overflow: hidden; }
.std__tag { font: 800 clamp(44px, 5.4vw, 88px)/.9 var(--font-display); font-stretch: 60%; color: var(--amber); }
.std__tag small { display: block; margin-top: 10px; font: 650 12px/1.2 var(--font-display); font-stretch: 72%; letter-spacing: .18em; text-transform: uppercase; color: var(--concrete); }
.std h3 { margin-top: 22px; }
.std p, .std li { color: var(--text-dim); font-size: 15.5px; }
.std p { margin-top: 12px; }
.std ul { margin: 12px 0 0; padding-left: 1.1em; }
.std li + li { margin-top: 6px; }
.std--wide { grid-column: 1 / -1; }
@media (max-width: 860px) { .std-grid { grid-template-columns: 1fr; } }
.tin { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 24px; align-items: start; }
.tin__copy { grid-column: 1 / span 5; }
.tin__tool { grid-column: 7 / span 6; }
.tin-code { display: flex; flex-wrap: wrap; gap: 8px; align-items: stretch; margin-bottom: 26px; }
.tin-code > div { padding: 14px 14px 12px; background: var(--carbon); box-shadow: inset 0 0 0 1px var(--line-2); min-width: 0; }
.tin-code b { display: block; font: 800 clamp(22px, 2.4vw, 36px)/1 var(--font-display); font-stretch: 70%; letter-spacing: .06em; color: var(--bone); }
.tin-code small { display: block; margin-top: 8px; font: 650 10.5px/1.2 var(--font-display); font-stretch: 72%; letter-spacing: .14em; text-transform: uppercase; color: var(--concrete); }
.tin-code .is-date { box-shadow: inset 0 0 0 2px var(--amber); }
.tin-code .is-date b { color: var(--amber); display: flex; gap: 2px; }
.tin-code .is-date b span { display: inline-block; }
.tool-form { display: flex; gap: 10px; flex-wrap: wrap; }
.tool-form label { flex: 1 1 220px; display: grid; gap: 8px; }
.tool-form label > span { font: 650 12px/1.2 var(--font-display); font-stretch: 72%; letter-spacing: .16em; text-transform: uppercase; color: var(--concrete); }
.tool-form input { min-height: 56px; padding: 12px 16px; border: 0; border-radius: 0; background: var(--carbon); box-shadow: inset 0 0 0 1px var(--line-2); color: var(--bone); font: 700 22px/1 var(--font-display); font-stretch: 80%; letter-spacing: .08em; text-transform: uppercase; }
.tool-form input:focus { outline: none; box-shadow: inset 0 0 0 2px var(--amber); }
.tool-form .btn { align-self: end; }
.tool-out { margin-top: 18px; padding: 16px 18px; background: var(--carbon); box-shadow: inset 3px 0 0 var(--amber); color: var(--bone); min-height: 3.4em; }
.tool-out.is-error { box-shadow: inset 3px 0 0 #e0564a; color: var(--text-dim); }
@media (max-width: 960px) { .tin__copy, .tin__tool { grid-column: 1 / -1; } .tin__tool { margin-top: 40px; } }
.grades { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.grade { background: var(--carbon); padding: clamp(22px, 2.6vw, 36px); box-shadow: inset 0 0 0 1px var(--line); }
.grade__scale { display: flex; gap: 6px; margin: 4px 0 22px; }
.grade__scale span { flex: 1; text-align: center; padding: 12px 0; font: 800 20px/1 var(--font-display); font-stretch: 76%; background: var(--asphalt); color: var(--concrete); }
.grade__scale span.is-top { background: var(--amber); color: var(--carbon); }
.grade h3 { font: 800 26px/1 var(--font-display); font-stretch: 82%; text-transform: uppercase; }
.grade p { margin-top: 10px; font-size: 15px; color: var(--text-dim); }
.grade blockquote { margin: 14px 0 0; padding-left: 14px; box-shadow: inset 2px 0 0 var(--amber); font-size: 14.5px; color: var(--bone); }
@media (max-width: 960px) { .grades { grid-template-columns: 1fr; } }
.principles { counter-reset: p; }
.principle { counter-increment: p; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 24px; padding: clamp(26px, 3vw, 40px) 0; border-top: 1px solid var(--line-ink); align-items: baseline; }
.principle:last-child { border-bottom: 1px solid var(--line-ink); }
.principle::before { content: counter(p, decimal-leading-zero); grid-column: 1 / span 1; font: 700 14px/1 var(--font-display); font-stretch: 72%; letter-spacing: .1em; color: var(--ink); }
.principle h3 { grid-column: 2 / span 5; }
.principle p { grid-column: 7 / span 6; color: var(--ink-mute); }
.sec:not(.sec--bone) .principle { border-color: var(--line); }
.sec:not(.sec--bone) .principle::before { color: var(--amber); }
.sec:not(.sec--bone) .principle p { color: var(--text-dim); }
@media (max-width: 860px) { .principle::before, .principle h3, .principle p { grid-column: 1 / -1; } .principle h3 { margin-top: 10px; } .principle p { margin-top: 10px; } }
.qlist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 48px; counter-reset: q; }
.qlist li { counter-increment: q; padding: 22px 0 24px; border-top: 1px solid var(--line); display: grid; grid-template-columns: 44px 1fr; gap: 0 10px; }
.qlist li::before { content: counter(q, decimal-leading-zero); font: 700 13px/1.6 var(--font-display); font-stretch: 72%; color: var(--amber); }
.qlist h3 { font: 700 19px/1.25 var(--font-display); font-stretch: 88%; }
.qlist p { grid-column: 2; margin-top: 8px; font-size: 15px; color: var(--text-dim); }
@media (max-width: 860px) { .qlist { grid-template-columns: 1fr; } }

/* sidewall decoder */
.decoder { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 24px; align-items: start; }
.decoder__stage { grid-column: 1 / span 6; position: sticky; top: calc(var(--header-h) + 20px); }
.decoder__svg { width: 100%; height: auto; display: block; overflow: visible; }
.decoder__panel { grid-column: 8 / span 5; }
.decoder__presets { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.decoder__presets button { padding: 10px 12px; border: 0; background: var(--asphalt); color: var(--text-dim); font: 700 12.5px/1 var(--font-display); font-stretch: 80%; letter-spacing: .08em; transition: background .3s, color .3s; }
.decoder__presets button:hover { color: var(--bone); }
.decoder__presets button[aria-pressed="true"] { background: var(--amber); color: var(--carbon); }
.decoder__error { margin-top: 14px; padding: 14px 16px; box-shadow: inset 3px 0 0 #e0564a; background: var(--asphalt); color: var(--bone); }
.decoder__list { list-style: none; margin: 28px 0 0; padding: 0; }
.decoder__list li { border-top: 1px solid var(--line); }
.decoder__list li:last-child { border-bottom: 1px solid var(--line); }
.dec-row { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 0 12px; width: 100%; padding: 14px 0; border: 0; background: transparent; color: inherit; text-align: left; }
.dec-row__no { font: 700 12px/1.6 var(--font-display); font-stretch: 72%; color: var(--concrete); }
.dec-row__label { font: 700 15px/1.4 var(--font-display); font-stretch: 80%; letter-spacing: .1em; text-transform: uppercase; color: var(--text-dim); }
.dec-row__val { font: 800 18px/1.3 var(--font-display); font-stretch: 84%; color: var(--bone); text-align: right; }
.dec-row__body { grid-column: 2 / -1; max-height: 0; opacity: 0; overflow: hidden; font-size: 15px; line-height: 1.55; color: var(--text-dim); transition: max-height .5s var(--ease), opacity .35s, margin .35s; }
.dec-row.is-on .dec-row__no, .dec-row.is-on .dec-row__val { color: var(--amber); }
.dec-row.is-on .dec-row__label { color: var(--bone); }
.dec-row.is-on .dec-row__body { max-height: 10em; opacity: 1; margin-top: 8px; }
.decoder__notes { margin-top: 20px; display: grid; gap: 10px; }
.decoder__notes p { font-size: 14.5px; color: var(--text-dim); padding-left: 14px; box-shadow: inset 2px 0 0 var(--line-2); }
.decoder__dims { margin-top: 26px; padding: 22px 24px; background: var(--asphalt); }
.decoder__dims dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 24px; margin: 14px 0 0; }
.decoder__dims dt { font: 650 11.5px/1.2 var(--font-display); font-stretch: 72%; letter-spacing: .16em; text-transform: uppercase; color: var(--concrete); }
.decoder__dims dd { margin: 6px 0 0; }
.decoder__dims dd strong { font: 800 22px/1 var(--font-display); font-stretch: 80%; color: var(--bone); }
.decoder__dims dd span { color: var(--concrete); font-size: 14px; }
.dec-tire { fill: #141416; }
.dec-side { fill: #1b1c1f; stroke: rgba(236, 233, 226, .07); }
.dec-block { fill: #26272b; stroke: rgba(0, 0, 0, .6); }
.dec-block--b { fill: #2e2f33; }
.dec-rim { fill: #0e0e0f; stroke: rgba(236, 233, 226, .14); stroke-width: 2; }
.dec-hub { fill: none; stroke: rgba(236, 233, 226, .12); stroke-width: 1.5; }
.dec-size { font: 800 64px var(--font-display); font-stretch: 78%; letter-spacing: .04em; fill: rgba(236, 233, 226, .5); }
.dec-seg.is-part { cursor: pointer; transition: fill .3s; }
.dec-seg.is-on { fill: var(--amber); }
.dec-lower, .dec-upper { font: 700 16px var(--font-display); font-stretch: 76%; letter-spacing: .22em; fill: rgba(236, 233, 226, .4); }
.dec-upper { fill: var(--amber); opacity: .8; }
.dec-pointer { fill: var(--amber); }
.dec-center__label { font: 650 15px var(--font-display); font-stretch: 72%; letter-spacing: .2em; text-transform: uppercase; fill: var(--concrete); text-anchor: middle; }
.dec-center__val { font: 800 74px var(--font-display); font-stretch: 74%; fill: var(--bone); text-anchor: middle; }
.dec-center__sub { font: 600 17px var(--font-body); fill: var(--amber); text-anchor: middle; }
@media (max-width: 960px) {
  .decoder__stage { position: relative; top: 0; grid-column: 1 / -1; width: min(100%, 560px); margin: 0 auto; }
  .decoder__panel { grid-column: 1 / -1; margin-top: 36px; }
}

/* reference tables (tire guide) */
.ref-tables { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 20px; align-items: start; }
.ref { width: 100%; border-collapse: collapse; font-size: 14.5px; font-variant-numeric: tabular-nums; }
.ref th, .ref td { padding: 7px 8px; text-align: right; border-bottom: 1px solid var(--line-ink); }
.ref th:first-child, .ref td:first-child { text-align: left; }
.ref thead th { font: 650 11px/1.2 var(--font-display); font-stretch: 72%; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-mute); border-bottom: 2px solid var(--ink); }
.ref tbody td:first-child { font: 800 15px/1.2 var(--font-display); font-stretch: 80%; color: var(--ink); }
.ref tbody tr:hover td { background: rgba(240, 162, 2, .18); }
.sec:not(.sec--bone) .ref th, .sec:not(.sec--bone) .ref td { border-color: var(--line); }
.sec:not(.sec--bone) .ref thead th { color: var(--concrete); border-color: var(--bone); }
.sec:not(.sec--bone) .ref tbody td:first-child { color: var(--amber); }
@media (max-width: 1100px) { .ref-tables { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .ref-tables { grid-template-columns: 1fr; } }
.speed-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.speed-table th, .speed-table td { padding: 12px 10px; text-align: left; border-bottom: 1px solid var(--line-ink); }
.speed-table thead th { font: 650 11px/1.2 var(--font-display); font-stretch: 72%; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-mute); border-bottom: 2px solid var(--ink); }
.speed-table tbody td:first-child { font: 800 22px/1 var(--font-display); font-stretch: 76%; color: var(--ink); width: 18%; }
.speed-table .bar { display: block; height: 6px; background: var(--ink); transform-origin: left; }
.speed-table td.bar-cell { width: 40%; }
.acc details { border-top: 1px solid var(--line-ink); }
.acc details:last-child { border-bottom: 1px solid var(--line-ink); }
.acc summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 20px 0; font: 700 clamp(18px, 1.5vw, 22px)/1.25 var(--font-display); font-stretch: 86%; text-transform: uppercase; letter-spacing: .02em; }
.acc summary::-webkit-details-marker { display: none; }
.acc summary .i { width: 22px; height: 22px; flex: none; transition: transform .5s var(--ease); }
.acc details[open] summary .i { transform: rotate(45deg); }
.acc__body { padding: 0 0 26px; overflow: hidden; }
.sec:not(.sec--bone) .acc details { border-color: var(--line); }

/* guide blocks */
.guide { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 24px; align-items: start; }
.guide__media { grid-column: 1 / span 5; }
.guide__copy { grid-column: 7 / span 6; }
.guide--flip .guide__media { grid-column: 8 / span 5; order: 2; }
.guide--flip .guide__copy { grid-column: 1 / span 6; order: 1; }
.guide__copy .h2 { margin: 22px 0 22px; }
.callout { margin-top: 28px; padding: 22px 24px; background: var(--asphalt); box-shadow: inset 3px 0 0 var(--amber); }
.callout p { color: var(--text-dim); }
.callout p + p { margin-top: 10px; }
.callout strong { color: var(--bone); }
.sec--bone .callout { background: var(--bone-2); box-shadow: inset 3px 0 0 var(--ink); }
.sec--bone .callout p { color: var(--ink-mute); }
.sec--bone .callout strong { color: var(--ink); }
@media (max-width: 960px) {
  .guide__media, .guide__copy, .guide--flip .guide__media, .guide--flip .guide__copy { grid-column: 1 / -1; order: 0; }
  .guide__copy { margin-top: 40px; }
}
.penny { width: 100%; height: auto; display: block; }
.pn-rubber { fill: #232427; }
.pn-groove { fill: #0b0b0c; }
.pn-coin { fill: #a8652f; }
.pn-coin-edge { fill: none; stroke: #6f3f1b; stroke-width: 3; }
.pn-head { fill: #7a4521; }
.pn-line { stroke: var(--amber); stroke-width: 2; stroke-dasharray: 6 5; }
.pn-text { font: 700 14px var(--font-display); font-stretch: 76%; letter-spacing: .14em; text-transform: uppercase; fill: var(--bone); }
.rot-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-top: 40px; }
.rot { background: var(--carbon); padding: 20px 18px 22px; box-shadow: inset 0 0 0 1px var(--line); }
.rot svg { width: 100%; height: auto; display: block; }
.rot h3 { margin-top: 16px; font: 700 16px/1.2 var(--font-display); font-stretch: 84%; text-transform: uppercase; letter-spacing: .04em; }
.rot p { margin-top: 6px; font-size: 14px; line-height: 1.5; color: var(--text-dim); }
.rt-car { fill: none; stroke: rgba(236, 233, 226, .25); stroke-width: 1.5; }
.rt-tire { fill: #2c2d31; stroke: rgba(236, 233, 226, .4); stroke-width: 1.2; }
.rt-arrow { fill: none; stroke: var(--amber); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rt-label { font: 700 9px var(--font-display); letter-spacing: .1em; fill: var(--concrete); text-anchor: middle; }
@media (max-width: 1100px) { .rot-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .rot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* partners */
.partner { padding-block: clamp(84px, 10vw, 150px); border-top: 1px solid var(--line); scroll-margin-top: 40px; }
.partner:first-of-type { border-top: 0; }
.partner__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 24px; align-items: start; }
.partner__media { grid-column: 1 / span 5; position: sticky; top: calc(var(--header-h) + 24px); }
.partner__copy { grid-column: 7 / span 6; }
.partner--flip .partner__media { grid-column: 8 / span 5; order: 2; }
.partner--flip .partner__copy { grid-column: 1 / span 6; order: 1; }
.partner__copy .h2 { margin: 22px 0 20px; }
.partner__copy .h4 { margin: 36px 0 14px; }
@media (max-width: 960px) {
  .partner__media, .partner__copy, .partner--flip .partner__media, .partner--flip .partner__copy { grid-column: 1 / -1; order: 0; position: relative; top: 0; }
  .partner__copy { margin-top: 40px; }
}
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; counter-reset: s; }
.step { counter-increment: s; position: relative; padding: 26px 22px 30px; background: var(--carbon); box-shadow: inset 0 0 0 1px var(--line); min-height: 260px; display: flex; flex-direction: column; }
.step::before { content: counter(s, decimal-leading-zero); font: 800 54px/.8 var(--font-display); font-stretch: 58%; color: transparent; -webkit-text-stroke: 1.2px var(--amber); }
.step h3 { margin-top: auto; padding-top: 24px; font: 800 20px/1.1 var(--font-display); font-stretch: 84%; text-transform: uppercase; }
.step p { margin-top: 10px; font-size: 14.5px; line-height: 1.5; color: var(--text-dim); }
@media (max-width: 1100px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .steps { grid-template-columns: 1fr; } .step { min-height: 0; } }

/* about */
.about-ring { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 24px; align-items: center; }
.about-ring__ring { grid-column: 1 / span 5; }
.about-ring__copy { grid-column: 7 / span 6; }
.about-ring__copy .h2 { margin: 22px 0 24px; }
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 24px; margin-top: 40px; }
.facts div { padding-top: 16px; border-top: 2px solid transparent; border-image: var(--dash) 1; }
.facts dt { font: 650 11.5px/1.2 var(--font-display); font-stretch: 72%; letter-spacing: .18em; text-transform: uppercase; color: var(--concrete); }
.facts dd { margin: 8px 0 0; font: 700 19px/1.25 var(--font-display); font-stretch: 86%; color: var(--bone); }
@media (max-width: 960px) { .about-ring__ring, .about-ring__copy { grid-column: 1 / -1; } .about-ring__ring { width: min(100%, 460px); margin: 0 auto 48px; } }
@media (max-width: 560px) { .facts { grid-template-columns: 1fr; gap: 18px; } }
.filmstrip { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 12px; }
.filmstrip .frame { aspect-ratio: 4 / 3; }
.filmstrip .frame:first-child { grid-row: span 2; aspect-ratio: auto; }
@media (max-width: 760px) { .filmstrip { grid-template-columns: 1fr 1fr; } .filmstrip .frame:first-child { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 16 / 10; } }

/* contact */
.contact-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 24px; align-items: start; }
.contact-aside { grid-column: 1 / span 4; }
.contact-form { grid-column: 6 / span 7; }
.mail-big { display: inline-block; margin: 22px 0 16px; font: 700 clamp(17px, 1.5vw, 24px)/1.2 var(--font-display); font-stretch: 84%; color: var(--amber); text-decoration: none; overflow-wrap: anywhere; }
.copy-btn { display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 16px; border: 0; background: var(--asphalt); color: var(--bone); font: 700 12px/1 var(--font-display); font-stretch: 76%; letter-spacing: .14em; text-transform: uppercase; }
.copy-btn .i { width: 16px; height: 16px; }
.copy-btn.is-copied { background: var(--amber); color: var(--carbon); }
.field { display: grid; gap: 9px; margin-bottom: 22px; }
.field > span, .field legend { font: 650 12px/1.2 var(--font-display); font-stretch: 72%; letter-spacing: .16em; text-transform: uppercase; color: var(--concrete); padding: 0; }
fieldset.field { border: 0; margin: 0 0 22px; padding: 0; min-width: 0; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.contact-form input[type="text"], .contact-form input[type="email"], .contact-form select, .contact-form textarea {
  width: 100%; min-height: 54px; padding: 12px 14px; border: 0; border-radius: 0; background: var(--asphalt);
  box-shadow: inset 0 -2px 0 var(--line-2); color: var(--bone); font: 500 16px/1.4 var(--font-body); transition: box-shadow .3s;
}
.contact-form select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--amber) 50%), linear-gradient(135deg, var(--amber) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 40px; }
.contact-form textarea { min-height: 160px; resize: vertical; }
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus { outline: none; box-shadow: inset 0 -2px 0 var(--amber), inset 0 0 0 1px rgba(240, 162, 2, .5); }
.checks { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.check { position: relative; display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 10px 14px; background: var(--asphalt); cursor: pointer; font-size: 15.5px; color: var(--text-dim); transition: color .3s, box-shadow .3s; }
.check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.check i { width: 18px; height: 18px; flex: none; box-shadow: inset 0 0 0 1.5px var(--concrete); position: relative; }
.check input:checked + i { background: var(--amber); box-shadow: none; }
.check input:checked + i::after { content: ""; position: absolute; left: 5px; top: 2px; width: 5px; height: 10px; border: solid var(--carbon); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.check:has(input:checked) { color: var(--bone); box-shadow: inset 0 0 0 1px rgba(240, 162, 2, .5); }
.check:has(input:focus-visible) { outline: 2px solid var(--amber); outline-offset: 2px; }
.form-status { margin-top: 20px; padding: 16px 18px; background: var(--asphalt); box-shadow: inset 3px 0 0 var(--amber); font-size: 15px; }
@media (max-width: 960px) { .contact-aside, .contact-form { grid-column: 1 / -1; } .contact-form { margin-top: 56px; } }
@media (max-width: 560px) { .field-row, .checks { grid-template-columns: 1fr; } }

/* legal */
.legal { max-width: 74ch; }
.legal h2 { font: 800 clamp(22px, 2vw, 28px)/1.15 var(--font-display); font-stretch: 84%; text-transform: uppercase; margin: 48px 0 14px; }
.legal p, .legal li { color: var(--text-dim); }
.legal ul { padding-left: 20px; }
.legal li + li { margin-top: 8px; }
.legal p + p { margin-top: 1em; }

/* 404 */
.lost { position: relative; min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; }
.lost__img { position: absolute; inset: 0; }
.lost__img img { width: 100%; height: 100%; object-fit: cover; opacity: .5; }
.lost__img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, var(--carbon) 10%, rgba(11, 11, 12, .3) 70%); }
.lost .wrap { position: relative; padding-bottom: clamp(40px, 6vw, 80px); }
.lost .tread-strip { position: relative; height: 72px; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer { position: relative; background: var(--carbon-2); color: var(--bone); overflow: hidden; }
.tread-strip--footer { height: clamp(48px, 5vw, 72px); }
.site-footer__main { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 40px 24px; padding-top: clamp(64px, 8vw, 110px); padding-bottom: 56px; }
.site-footer__lead { grid-column: 1 / span 5; }
.site-footer__statement { margin-top: 18px; font: 800 clamp(28px, 2.8vw, 44px)/1 var(--font-display); font-stretch: 84%; text-transform: uppercase; max-width: 14ch; }
.site-footer__note { margin-top: 18px; color: var(--concrete); max-width: 42ch; font-size: 15.5px; }
.footer-mail { display: inline-flex; align-items: center; gap: 10px; margin-top: 26px; color: var(--amber); text-decoration: none; font-size: 16.5px; overflow-wrap: anywhere; }
.footer-mail .i { width: 20px; height: 20px; flex: none; }
.footer-mail:hover span { text-decoration: underline; text-underline-offset: .2em; }
.site-footer__cols { grid-column: 7 / span 6; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.site-footer__cols ul { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 11px; }
.site-footer__cols a { color: var(--text-dim); text-decoration: none; font-size: 15px; transition: color .3s; }
.site-footer__cols a:hover { color: var(--amber); }
.footer-word { position: relative; padding: 0 var(--gutter); line-height: .8; white-space: nowrap; user-select: none; overflow: hidden; }
.footer-word__text { display: inline-block; font: 900 100px/.82 var(--font-display); text-transform: uppercase; letter-spacing: -.01em; color: var(--bone); padding-bottom: .04em; }
.fw-c { display: inline-block; font-stretch: 100%; }
.footer-word__text .fw-c:nth-child(odd) { color: var(--bone); }
.site-footer__bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 14px 24px; padding-top: 24px; padding-bottom: 32px; border-top: 1px solid var(--line); margin-top: clamp(16px, 2vw, 28px); font-size: 13.5px; color: var(--concrete); }
.site-footer__bottom ul { list-style: none; display: flex; gap: 24px; padding: 0; margin: 0; }
.site-footer__bottom a { color: var(--concrete); text-decoration: none; }
.site-footer__bottom a:hover { color: var(--bone); }
@media (max-width: 960px) { .site-footer__lead, .site-footer__cols { grid-column: 1 / -1; } }
@media (max-width: 560px) { .site-footer__cols { grid-template-columns: 1fr 1fr; } }

@media print {
  .site-header, .mobile-menu, .pt, .cursor, .scroll-lane, .tread-strip, .hero__tread { display: none !important; }
  body, .sec, .sec--asphalt { background: #fff !important; color: #000 !important; }
}