/* ==========================================================================
   AG Rubber Co - site.css
   LIGHT GLASS (owner's pick, 2026-10-27). White frosted glass panels over a
   pale, warm wash of a plant photograph; orange for actions and heat; near
   black boxes as the third colour. Clean and plain: no decorative motifs, the
   dovetail seam appears only where it is the product.

   Type is Mona Sans, one variable font for every width and weight the design
   uses, served by Google Fonts with display=swap (MASTER_SPEC section 2.2).
   The @font-face rule below is Google's own, copied here so pages do not wait
   on a render-blocking stylesheet from fonts.googleapis.com; the file still
   comes from fonts.gstatic.com and layout.js preloads it. Body and display
   share it; widths do the work.

   Colour rules, measured and asserted in build/qa.js:
   --orange (#FF5A1F) fills every action: buttons, selected chips, the sticky
     CTA. Text on it is --on-orange (#111111), 6.06:1. The orange itself never
     carries text on a light ground (3.12:1 on white), except the wordmark.
   --accent-text (#A8380A) is the orange for small text on light grounds:
     eyebrows, the Required marker, notices. 6.49:1 on white, and at least
     4.5:1 measured over the photo wash where the glass lets it through.
   Black boxes (the strip, the spec line, the live model, the reorder cards,
     the closing band, the footer) switch the text tokens to their dark values.
   ========================================================================== */

/* Mona Sans, Latin subset, exactly as Google Fonts serves it to current
   browsers (css2?family=Mona+Sans:wdth,wght@75..125,200..900). If Google
   moves to a new version, refresh this block and the preload in layout.js. */
@font-face {
  font-family: "Mona Sans";
  font-style: normal;
  font-weight: 200 900;
  font-stretch: 75% 125%;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/monasans/v4/o-0IIpQmx24alC5A4PNr5TRA.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;
}

/* ---------- tokens ---------- */
:root {
  --font: "Mona Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --d-wdth: 112%;
  --d-wght: 760;
  --d-track: -0.035em;

  --orange: #FF5A1F;
  --orange-hot: #FF7A33;
  --on-orange: #111111;
  --rubber: #C98B52;
  --rubber-dk: #6B3A16;

  --ground: #F4F3F1;
  --box: #111214;

  --ink: #141518;
  --muted: #55575C;
  --faint: #6F7176;
  --accent-text: #A8380A;
  --card: rgba(255, 255, 255, .64);
  --card-2: rgba(20, 21, 24, .06);
  --card-hover: rgba(255, 255, 255, .82);
  --plate: rgba(255, 255, 255, .6);
  --field: rgba(255, 255, 255, .9);
  --line: rgba(20, 21, 24, .1);
  --line-2: rgba(20, 21, 24, .2);
  --glass: blur(24px) saturate(170%);
  --edge: inset 0 0 0 1px rgba(255, 255, 255, .75), 0 18px 50px -32px rgba(20, 21, 24, .35);
  --sd-grey: #C2C1BD;
  --sd-cap: #141518;

  --r: 12px;
  --r-lg: 20px;
  --gutter: clamp(16px, 4vw, 48px);
  --ease: cubic-bezier(.2, .8, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  color-scheme: light;
}

/* Black boxes: the third colour. */
:is(.strip, .footer, .cta-band .wrap, .section--dark .card, .rfq-spec, .mobile-cta, .hero-stats) {
  --ink: #F2F2EF;
  --muted: #B4B1AB;
  --faint: #8A8781;
  --accent-text: #FF8A4C;
  --card-2: rgba(255, 255, 255, .1);
  --line: rgba(255, 255, 255, .12);
  --line-2: rgba(255, 255, 255, .24);
  color-scheme: dark;
  color: var(--ink);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 96px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, svg { max-width: 100%; }
img { height: auto; display: block; }
a { color: inherit; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
/* The focus ring takes the accent text orange, so it clears 3:1 on white
   (6.49:1) and switches to the light orange inside the black boxes. */
:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 3px; }
.vh, .hp { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 14px; border-radius: var(--r); background: var(--orange); color: var(--on-orange); font-weight: 700; text-decoration: none; }
.skip:focus { top: 12px; }
.wrap {
  width: 100%;
  max-width: 1280px;
  margin-inline: auto;
  padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
}
.wrap.narrow { max-width: 860px; }
.small { font-size: 14px; color: var(--muted); }
.center { text-align: center; }

/* One photograph behind the whole page, washed out to a pale warm ground.
   Decorative, so it lives here rather than in an <img> that needs alt text. */
.backdrop { position: fixed; inset: 0; z-index: -1; overflow: hidden; background: var(--ground); }
.backdrop::before { content: ""; position: absolute; inset: 0; background: url("/assets/img/plant-wide.webp") 50% 70% / cover no-repeat; opacity: .3; filter: blur(6px) saturate(.9) brightness(1.3); transform: scale(1.04); }
.backdrop::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(246, 245, 243, .5), rgba(246, 245, 243, .8)); } /* taste-skill-ignore: light scrim over the photo */

/* ---------- type ---------- */
h1, h2, h3, h4 { margin: 0 0 .5em; font-family: var(--font); color: var(--ink); text-wrap: balance; }
h1, h2 { font-stretch: var(--d-wdth); font-weight: var(--d-wght); letter-spacing: var(--d-track); line-height: 1.02; }
h1 { font-size: clamp(36px, 4.6vw, 62px); }
h2 { font-size: clamp(30px, 3.4vw, 46px); }
h3 { font-size: clamp(19px, 1.5vw, 22px); font-stretch: 104%; font-weight: 680; letter-spacing: -0.012em; line-height: 1.2; }
h4 { font-size: 17px; font-weight: 680; line-height: 1.25; }
.lede { font-size: clamp(18px, 1.4vw, 20px); line-height: 1.55; color: var(--muted); max-width: 62ch; }
.eyebrow { margin: 0 0 12px; font-stretch: 88%; font-weight: 650; font-size: 15px; color: var(--accent-text); }
.wrap.narrow > h2 { margin-top: 1.4em; }
.wrap.narrow > h2:first-child { margin-top: 0; }
.wrap.narrow > h3 { margin-top: 1.6em; }
.wrap.narrow > p, .wrap.narrow li { color: var(--muted); max-width: 70ch; }
.wrap.narrow > p strong, .wrap.narrow li strong { color: var(--ink); }
.wrap.narrow ul { padding-left: 1.2em; margin: 0 0 1em; }
.wrap.narrow li { margin-bottom: .5em; }
.wrap.narrow li::marker { color: var(--accent-text); }
main a:not(.btn):not(.card):not(.index-row):not(.app-row) { color: var(--ink); text-decoration-color: var(--orange); text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
.spec-num { font-weight: 650; color: var(--ink); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  min-height: 48px;
  padding: 0 22px;
  border: 0;
  border-radius: 999px;
  background: var(--orange);
  color: var(--on-orange);
  font: 700 16px/1.15 var(--font);
  font-stretch: 104%;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: transform .16s var(--ease), background-color .2s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: scale(.97); }
.btn-lg { min-height: 56px; padding: 0 28px; font-size: 17px; }
.btn-sm { min-height: 44px; padding: 0 16px; font-size: 14.5px; }
.btn-block { width: 100%; }
.btn-secondary { background: var(--card-2); color: var(--ink); }
@media (hover: hover) {
  .btn:hover { background: var(--orange-hot); }
  .btn-secondary:hover { background: var(--line-2); }
}
.hero-tel { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 6px; text-decoration-thickness: 1.5px; }
@media (max-width: 520px) { .btn { white-space: normal; text-align: center; } .hero-tel { margin: 14px 0 0 !important; } }

/* ---------- strip + nav ---------- */
.strip { background: var(--box); font-size: 13px; }
.strip .wrap { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 2px 14px; padding-block: 8px; text-align: center; }
.strip .sep { color: var(--faint); }
.usa { display: inline-flex; align-items: center; gap: 6px; }
.flag { border-radius: 1px; flex: none; }
@media (max-width: 600px) { .strip .sep { display: none; } .strip .wrap { gap: 0 12px; } }

.nav {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 50;
  background: rgba(250, 250, 248, .72);
  box-shadow: inset 0 -1px 0 rgba(20, 21, 24, .06);
  -webkit-backdrop-filter: blur(16px) saturate(140%); /* taste-skill-ignore: the one sticky bar */
  backdrop-filter: blur(16px) saturate(140%); /* taste-skill-ignore: the one sticky bar */
}
.nav .wrap { display: flex; align-items: center; gap: 24px; min-height: 68px; }
.wordmark { display: inline-flex; align-items: baseline; gap: .3em; text-decoration: none; font-stretch: 125%; font-weight: 880; font-size: 20px; letter-spacing: -0.01em; white-space: nowrap; color: var(--ink); }
.wordmark .ag { color: var(--orange); }
.nav .wordmark { padding-block: 6px; } /* a 44px tap target */
.nav-links { display: flex; align-items: center; gap: 22px; margin-left: auto; }
.nav-links a:not(.btn) { color: #4A4C51; text-decoration: none; font-size: 15px; font-weight: 560; white-space: nowrap; transition: color .2s; }
.nav-links a:not(.btn):hover, .nav-links a:not(.btn)[aria-current="page"] { color: var(--ink); }
.nav-links .nav-tel { color: var(--ink); font-weight: 650; }
.nav-links .nav-quote { color: var(--on-orange); margin-left: 4px; }
.nav-toggle { display: none; margin-left: auto; min-height: 44px; padding: 0 16px; border: 0; border-radius: 999px; background: rgba(20, 21, 24, .07); color: var(--ink); font: 600 14px var(--font); cursor: pointer; }
@media (max-width: 1100px) {
  .nav-toggle { display: inline-flex; align-items: center; }
  .nav-links { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 2px; padding: 8px max(var(--gutter), env(safe-area-inset-right, 0px)) 18px max(var(--gutter), env(safe-area-inset-left, 0px)); background: rgba(250, 250, 248, .97); }
  .nav-links.is-open { display: flex; }
  .nav-links a:not(.btn) { padding: 12px 0; font-size: 18px; color: var(--ink); }
  .nav-links .nav-quote { margin: 8px 0 0; }
}

/* ---------- breadcrumbs ---------- */
.crumbs ol { display: flex; flex-wrap: wrap; gap: 4px 8px; margin: 0; padding: 12px 0 0; list-style: none; font-size: 14px; color: var(--faint); }
.crumbs li + li::before { content: "/"; margin-right: 8px; color: #B9B7B2; }
.crumbs a { color: #4A4C51; text-decoration: none; }
.crumbs a:hover, .crumbs [aria-current] { color: var(--ink); }

/* ---------- sections ---------- */
.section { position: relative; padding-block: clamp(64px, 8vw, 112px); }
.section--pad-sm { padding-block: clamp(40px, 5vw, 72px) clamp(56px, 6vw, 88px); }
.section--tint { background: rgba(255, 255, 255, .42); }
.section--pickup { background: transparent; }
.section-head { max-width: 760px; margin-bottom: clamp(32px, 4vw, 52px); }
.section-head > p:not(.eyebrow) { color: var(--muted); }

/* ---------- glass cards ---------- */
.card, .index-row, .fit-card, .seam, .faq details, .rfq-panel, .hero-copy, .catalog-scroll, .map-frame {
  background: var(--card);
  -webkit-backdrop-filter: var(--glass); /* taste-skill-ignore: Light Glass panels, the owner's chosen look */
  backdrop-filter: var(--glass); /* taste-skill-ignore: Light Glass panels */
  box-shadow: var(--edge); /* taste-skill-ignore: the glass edge */
  border-radius: var(--r-lg);
}

/* ---------- home hero ---------- */
.hero { position: relative; isolation: isolate; overflow: hidden; }
.hero-bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 50% 72%; filter: saturate(.85) brightness(1.08); }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(246, 245, 243, .9), rgba(246, 245, 243, .55) 58%, rgba(246, 245, 243, .25)), linear-gradient(0deg, rgba(244, 243, 241, 1), rgba(244, 243, 241, 0) 40%); } /* taste-skill-ignore: light scrim over the photo */
.hero .hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  grid-template-areas: "copy form" "stage form";
  grid-template-rows: auto 1fr;
  gap: 24px clamp(24px, 3.4vw, 48px);
  align-items: start;
  padding-block: clamp(40px, 5vw, 72px) clamp(56px, 6vw, 88px);
}
.hero-copy { grid-area: copy; padding: clamp(24px, 3vw, 40px); }
.hero-form { grid-area: form; }
.hero-stage { grid-area: stage; }
.hero h1 { font-size: clamp(36px, 4.4vw, 60px); margin-bottom: 18px; }
.hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin: 26px 0 28px; }
.hero-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); justify-content: stretch; gap: 12px 40px; margin-bottom: 22px; padding: 14px 18px; border-radius: 14px; background: var(--box); }
.hero-stats .n { font-stretch: 112%; font-weight: 780; font-size: clamp(24px, 2.2vw, 32px); letter-spacing: -0.02em; line-height: 1.05; }
.hero-stats .l { font-size: 13.5px; color: var(--muted); }
.trust-row { display: flex; flex-wrap: wrap; gap: 6px 0; margin: 0; font-size: 14px; color: var(--muted); }
.trust-row > span { display: inline-flex; align-items: center; gap: 6px; }
.trust-row > span + span::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--orange); margin: 0 12px 0 6px; }
@media (max-width: 1000px) {
  .hero .hero-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "copy" "stage" "form"; grid-template-rows: auto; }
}
@media (max-width: 560px) {
  .hero-copy { padding: 22px 18px; }
  .hero-stats { gap: 10px 14px; }
  .hero-stats .n { font-size: 22px; }
  .hero-stats .l { font-size: 13px; }
  .trust-row { flex-direction: column; gap: 4px; }
  .trust-row > span + span::before { display: none; }
}

/* ---------- live boot model: a black box ---------- */
.boot-stage { display: grid; grid-template-rows: auto 1fr auto; overflow: hidden; border-radius: var(--r-lg); background: var(--box); color: #F2F2EF; }
.stage-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; padding: 14px 16px 0; }
.stage-k { font-stretch: 88%; font-weight: 650; font-size: 14px; color: #B4B1AB; }
.seg { display: inline-flex; border-radius: 999px; background: rgba(255, 255, 255, .08); }
.seg button { min-height: 44px; padding: 0 15px; border: 0; border-radius: 999px; background: transparent; color: #B4B1AB; font: 600 13px var(--font); cursor: pointer; transition: background-color .2s var(--ease), color .2s var(--ease); }
.seg button[aria-pressed="true"] { background: #F2F2EF; color: #111111; }
.seg button:focus-visible { outline-color: #FF8A4C; }
.boot-model { position: relative; min-height: clamp(300px, 30vw, 420px); display: grid; place-items: center; }
.boot-model > svg { width: min(78%, 320px); height: auto; }
.boot-model .bm-label { color: #F2F2EF; font-variant-numeric: normal; }
.stage-foot { margin: 0; padding: 0 16px 14px; font-size: 13.5px; color: #8A8781; }
.size-visual { display: grid; gap: 12px; }
.size-visual .boot-model { min-height: clamp(300px, 28vw, 380px); }

/* ---------- RFQ panel ---------- */
.rfq-panel { padding: clamp(20px, 2.4vw, 32px); background: rgba(255, 255, 255, .74); }
.rfq-head { margin-bottom: 20px; }
.rfq-head h2 { font-size: clamp(26px, 2.4vw, 34px); margin-bottom: 4px; }
.rfq-head p { color: var(--muted); margin: 0; }
.rfq-body { display: grid; gap: 18px; }
.rfq-field { display: grid; gap: 7px; min-width: 0; border: 0; margin: 0; padding: 0; }
.rfq-field > label, .rfq-legend { display: flex; align-items: baseline; gap: 10px; padding: 0; font-size: 14.5px; font-weight: 600; color: var(--ink); }
.req { font-stretch: 85%; font-size: 12.5px; font-weight: 650; color: var(--accent-text); }
.rfq-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.input {
  width: 100%;
  min-height: 50px;
  padding: 11px 14px;
  border-radius: 10px;
  border: 1px solid var(--line-2); /* taste-skill-ignore: a form field keeps its edge */
  background: var(--field);
  color: var(--ink);
  font: 500 16px var(--font); /* 16px stops iOS zooming into the field */
  transition: border-color .15s, box-shadow .15s;
}
.input::placeholder { color: var(--faint); }
.input:focus { outline: none; border-color: var(--orange); box-shadow: 0 0 0 3px rgba(255, 90, 31, .25); } /* taste-skill-ignore: focus ring on a form field */
textarea.input { min-height: 88px; resize: vertical; }
select.input { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23999' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: calc(100% - 16px) 50%; background-size: 12px 8px; padding-right: 40px; }
input[type="date"].input::-webkit-calendar-picker-indicator { opacity: .7; }
.rfq-note { margin: 0; font-size: 13.5px; color: var(--muted); line-height: 1.5; }
.rfq-note a { color: var(--ink); text-decoration-color: var(--orange); text-underline-offset: 3px; }
.rfq-note-orange { margin: 0; font-size: 14px; color: var(--accent-text); font-weight: 560; }
.rfq-note-bulk { margin: 0; font-size: 14.5px; font-weight: 600; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; }
.chip input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.chip span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 15px; border-radius: 999px; background: var(--card-2); font-weight: 600; font-size: 15px; transition: background-color .15s var(--ease), color .15s var(--ease), transform .12s var(--ease); }
.chip input:checked + span { background: var(--orange); color: var(--on-orange); }
.chip input:focus-visible + span { outline: 2px solid var(--accent-text); outline-offset: 2px; }
.chip input:active + span { transform: scale(.97); }
.rfq-spec { display: grid; gap: 3px; margin: 0; padding: 14px 16px; border-radius: 12px; background: var(--box); }
.rfq-spec .k { font-stretch: 88%; font-weight: 650; font-size: 13.5px; color: var(--accent-text); }
#spec-line { font-stretch: 104%; font-weight: 650; font-size: 17px; line-height: 1.35; }
.rfq-sub, .rfq-usa { margin: 0; text-align: center; font-size: 14px; color: var(--muted); }
.rfq-usa { display: flex; justify-content: center; align-items: center; gap: 8px; }
/* Shown only if the Formspree endpoint is still the placeholder (rfq.js). */
.rfq-error { margin: 0; padding: 12px 14px; border-radius: 10px; background: rgba(255, 90, 31, .12); box-shadow: inset 3px 0 0 var(--orange); color: var(--ink); font-size: 14.5px; font-weight: 600; }
@media (max-width: 520px) { .rfq-row { grid-template-columns: minmax(0, 1fr); } }

/* ---------- inner page heroes ---------- */
main > .section:first-child { padding-top: clamp(28px, 3vw, 40px); }
main > .section:first-child .hero-grid, .hero-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
main > .section:first-child h1 { max-width: 20ch; }
main > .section:first-child .lede + p, main > .section:first-child .lede + .lede { margin-top: 1em; }
@media (max-width: 900px) { .hero-grid, main > .section:first-child .hero-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- photo slots ---------- */
.slot { position: relative; overflow: hidden; border-radius: var(--r-lg); background: var(--card-2); max-width: 100%; }
.slot-3x2 { aspect-ratio: 3 / 2; }
.slot-4x3 { aspect-ratio: 4 / 3; }
.slot-ph { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 10px; color: var(--muted); font-size: 14px; font-weight: 560; }
.slot-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease-out); }
.slot-img[hidden] { display: none; }

/* ---------- why hot vulcanized ---------- */
.seam-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px); margin-bottom: clamp(40px, 5vw, 64px); }
.seam { padding: clamp(20px, 2.4vw, 30px); }
.seam .seam-svg { display: block; width: 100%; height: auto; margin-bottom: 14px; }
.seam p { color: var(--muted); }
.seam-bad h3 { color: var(--muted); }
.sd-grey { fill: var(--sd-grey); }
.sd-glue { fill: none; stroke: var(--orange); stroke-width: 2.5; stroke-dasharray: 5 4; stroke-linecap: round; }
.sd-tear { fill: none; stroke: var(--orange); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sd-rubber { fill: var(--rubber); }
.sd-seam { fill: none; stroke: var(--rubber-dk); stroke-width: 1.8; stroke-linejoin: round; }
.sd-glow { fill: none; stroke: var(--orange); stroke-width: 6; stroke-opacity: .35; stroke-linejoin: round; }
.sd-tape { fill: #9E5A26; fill-opacity: .55; }
.sd-tape-edge { fill: none; stroke: var(--rubber-dk); stroke-width: 1.2; stroke-opacity: .7; }
.sd-cap { fill: var(--sd-cap); font: 600 13px var(--font); }
.process { margin-bottom: clamp(36px, 4vw, 52px); }
.process-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 8px 32px; margin-bottom: 24px; }
.process-head h3 { font-size: clamp(24px, 2.2vw, 32px); font-stretch: var(--d-wdth); font-weight: var(--d-wght); letter-spacing: var(--d-track); margin: 0; }
.process-head p { margin: 0; color: var(--muted); max-width: 52ch; }
/* The process film: the boot anatomy loop beside its five steps. The film's
   own ground is #FBFBFA, so the frame matches it and the edges disappear. */
.film-wrap { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: clamp(18px, 2.6vw, 36px); align-items: center; }
.film { position: relative; margin: 0; overflow: hidden; border-radius: var(--r-lg); background: #FBFBFA; box-shadow: var(--edge); }
.film-video { display: block; width: 100%; height: auto; aspect-ratio: 1360 / 1040; background: #FBFBFA; }
.film-toggle { position: absolute; right: 12px; bottom: 12px; min-height: 44px; padding: 0 18px; border: 0; border-radius: 999px; background: rgba(17, 18, 20, .78); color: #F2F2EF; font: 600 14px var(--font); cursor: pointer; }
.film-toggle:focus-visible { outline-color: #FF8A4C; }
.film-steps { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; counter-reset: fstep; }
.film-steps li { counter-increment: fstep; display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: 14px; align-items: start; padding: 12px 14px; border-radius: var(--r); transition: background-color .3s var(--ease); }
.film-steps li::before { content: counter(fstep); grid-row: 1 / span 2; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--card-2); color: var(--ink); font-weight: 750; font-size: 14px; transition: background-color .3s var(--ease), color .3s var(--ease); }
.film-steps h3, .film-steps h4 { margin: 3px 0 2px; font-size: 17px; font-stretch: 104%; font-weight: 680; letter-spacing: -0.01em; line-height: 1.25; }
.film-steps p { margin: 0; font-size: 14.5px; color: var(--muted); line-height: 1.5; }
.film-steps li[aria-current="step"] { background: var(--plate); box-shadow: var(--edge); }
.film-steps li[aria-current="step"]::before { background: var(--orange); color: var(--on-orange); }
.process-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin: clamp(24px, 3vw, 36px) 0 0; }
.process-more { font-weight: 650; }
.process + .process-cta { margin-top: 0; }
.process-steps-head { font-size: clamp(24px, 2.2vw, 32px); margin: clamp(8px, 1.5vw, 20px) 0 clamp(18px, 2vw, 28px); }
.process-intro { max-width: 860px; }
/* Long step text (the process page): the film sits at the top and stays in
   view while the steps scroll past it. */
.film-wrap--long { align-items: start; }
@media (min-width: 901px) { .film-wrap--long .film { position: sticky; top: 92px; } }
@media (max-width: 900px) { .film-wrap { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) { .seam-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- industries ---------- */
.index-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 22px); }
.index-row { display: grid; grid-template-rows: auto 1fr auto; gap: 14px; padding: 12px 12px 20px; text-decoration: none; color: var(--ink); transition: background-color .2s var(--ease); }
.index-row > div:first-child .slot { border-radius: 12px; }
.index-row h3 { margin: 4px 8px 6px; }
.index-row p { margin: 0 8px; font-size: 15.5px; color: var(--muted); line-height: 1.5; }
.go, .card-link { display: inline-flex; align-items: center; gap: 6px; margin: 0 8px; font-weight: 650; font-size: 14.5px; color: var(--ink); }
@media (hover: hover) {
  .index-row:hover, a.card:hover { background: var(--card-hover); }
  .index-row:hover .slot-img, a.card:hover .slot-img, .app-row:hover .slot-img { transform: scale(1.04); }
}
@media (max-width: 1080px) { .index-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .index-list { grid-template-columns: minmax(0, 1fr); } }

/* ---------- size catalog ---------- */
.catalog-scroll { overflow-x: auto; padding: 6px 20px 4px; }
.sizes { width: 100%; border-collapse: collapse; }
.sizes th { padding: 14px 12px; text-align: left; font-stretch: 88%; font-weight: 650; font-size: 14px; color: var(--muted); border-bottom: 1px solid var(--line-2); }
.sizes td { padding: 14px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.sizes .render { width: 92px; padding-left: 0; }
.sizes .render svg { width: 76px; height: 84px; display: block; }
.sizes .sz { font-stretch: 112%; font-weight: 760; font-size: clamp(22px, 2vw, 28px); letter-spacing: -0.02em; white-space: nowrap; }
.sizes .sz a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.sizes .sz a:hover { color: var(--accent-text); }
.sizes .use { color: var(--muted); }
.sizes .spec-num { white-space: nowrap; }
.sizes td:last-child { text-align: right; padding-right: 0; white-space: nowrap; }
@media (max-width: 760px) {
  .sizes thead { display: none; }
  .sizes, .sizes tbody { display: block; }
  .sizes tr { display: grid; grid-template-columns: 80px minmax(0, 1fr); column-gap: 14px; row-gap: 4px; padding: 16px 0; border-bottom: 1px solid var(--line); }
  .sizes td { padding: 0; border: 0; }
  .sizes .render { grid-row: 1 / span 5; width: auto; }
  .sizes td:last-child { text-align: left; padding-top: 8px; }
  .sizes .spec-num { display: inline; }
}

/* ---------- fit cards ---------- */
.fit-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 22px); }
.fit-card { position: relative; padding: 20px 22px 24px; }
.fit-card .n { position: absolute; top: 14px; left: 16px; z-index: 1; font-stretch: 112%; font-weight: 800; font-size: 26px; color: var(--accent-text); }
.fit-img { width: calc(100% + 20px); margin: -8px -10px 14px; border-radius: 12px; }
.fit-card p { color: var(--muted); font-size: 15.5px; }
.grid .fit-card p strong { color: var(--ink); }
@media (max-width: 900px) { .fit-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- application rows ---------- */
.app-list { display: grid; gap: clamp(28px, 4vw, 56px); }
.app-row { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(20px, 3.4vw, 56px); align-items: center; text-decoration: none; color: var(--ink); }
.app-row:nth-child(even) > div:first-child { order: 2; }
.app-row h3 { font-size: clamp(22px, 2vw, 28px); font-stretch: 108%; font-weight: 720; letter-spacing: -0.02em; }
.app-row p { color: var(--muted); }
.tag { display: inline-block; margin-bottom: 10px; font-stretch: 88%; font-weight: 650; font-size: 14.5px; color: var(--accent-text); }
.app-row .go { margin: 0; }
@media (max-width: 800px) { .app-row { grid-template-columns: minmax(0, 1fr); gap: 16px; } .app-row:nth-child(even) > div:first-child { order: 0; } }

/* ---------- generic grids and cards ---------- */
.grid { display: grid; gap: clamp(14px, 1.6vw, 22px); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.card { display: grid; grid-template-rows: auto 1fr; overflow: hidden; text-decoration: none; color: var(--ink); transition: background-color .2s var(--ease); }
.card-media .slot { border-radius: 0; }
.card-body { display: grid; gap: 8px; align-content: start; padding: 20px 22px 24px; }
.card-body h3 { margin: 0; }
.card-body p { margin: 0; color: var(--muted); font-size: 15.5px; }
.card-link { margin: 6px 0 0; }
@media (max-width: 1000px) { .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0, 1fr); } }

/* ---------- FAQ ---------- */
.faq { display: grid; gap: 10px; max-width: 920px; }
.faq details { overflow: hidden; transition: background-color .2s var(--ease); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 18px 22px; cursor: pointer; list-style: none; font-stretch: 104%; font-weight: 660; font-size: clamp(17px, 1.4vw, 20px); line-height: 1.3; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--card-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'%3E%3Cpath d='M8 13h10M13 8v10' stroke='%23999' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / 26px no-repeat; transition: transform .25s var(--ease), background-color .2s; }
.faq details[open] summary::after { transform: rotate(45deg); background-color: var(--orange); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'%3E%3Cpath d='M8 13h10M13 8v10' stroke='%23111' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); }
.faq .answer { padding: 0 64px 20px 22px; color: var(--muted); }

/* ---------- black boxes in the content: reorder cards, closing band ---------- */
.section--dark .card { background: var(--box); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; }
.cta-band { padding-block: clamp(48px, 6vw, 80px); }
.cta-band .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 20px 40px; padding-block: clamp(28px, 3vw, 40px); border-radius: var(--r-lg); background: var(--box); }
.cta-band h2 { margin: 0 0 6px; font-size: clamp(26px, 2.6vw, 36px); max-width: 28ch; }
.cta-band p { margin: 0; color: var(--muted); }

/* ---------- pickup and map ---------- */
.map-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px clamp(32px, 5vw, 80px); align-items: center; }
.addr { font-style: normal; line-height: 1.65; margin-bottom: 1em; }
.addr a { color: var(--ink); }
.map-grid p:not(.eyebrow) { color: var(--muted); }
.map-grid p strong { color: var(--ink); }
.map-frame { overflow: hidden; line-height: 0; }
.map-frame iframe { display: block; width: 100%; height: 340px; border: 0; }
@media (max-width: 860px) { .map-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- footer ---------- */
.footer { padding-block: clamp(56px, 7vw, 88px) 28px; background: var(--box); font-size: 15px; }
.footer-grid { display: grid; grid-template-columns: 1.3fr repeat(3, minmax(0, .8fr)) 1.3fr; gap: 32px; }
.footer .wordmark { margin-bottom: 12px; }
.footer h3 { margin: 0 0 12px; font-stretch: 88%; font-size: 14px; font-weight: 650; color: var(--faint); }
.footer ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.footer a { color: var(--ink); text-decoration: none; }
.footer a:hover { color: var(--orange-hot); }
.footer a.btn { color: var(--on-orange); }
.footer address { font-style: normal; line-height: 1.7; margin: 12px 0; }
.promise { color: var(--ink); font-stretch: 108%; font-weight: 650; font-size: 18px; line-height: 1.35; }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; margin-top: 56px; font-size: 13px; color: var(--faint); }
@media (max-width: 1080px) { .footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .footer-brand, .footer-promise { grid-column: span 3; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .footer-brand, .footer-promise { grid-column: span 2; } }

/* ---------- sticky mobile CTA ---------- */
.mobile-cta { display: none; }
@media (max-width: 768px) {
  .mobile-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 10px max(12px, env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px)); background: rgba(17, 18, 20, .96); transition: transform .3s var(--ease); }
  .mobile-cta a { display: grid; place-items: center; min-height: 48px; border-radius: 999px; font-weight: 700; text-decoration: none; }
  .mobile-cta .q { background: var(--orange); color: var(--on-orange); }
  .mobile-cta .c { background: rgba(255, 255, 255, .1); color: var(--ink); }
  .mobile-cta.is-down { transform: translateY(110%); }
  body { padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px)); }
}

/* ---------- not found page ---------- */
main > .section:first-child ul { color: var(--muted); }

/* ---------- entrances: transform only, complete at rest ---------- */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .index-row, .fit-card, .app-row, .grid > .card, .grid > .fit-card, .seam { animation: rise linear both; animation-timeline: view(); animation-range: entry 0% entry 70%; }
  }
}
@keyframes rise { from { transform: translateY(28px); } to { transform: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}