:root {
  --ink: #07090a;
  --ink-soft: #0c1011;
  --panel: rgba(15, 18, 19, .9);
  --paper: #f3f1ed;
  --muted: #aeb5b7;
  --line: rgba(226, 232, 232, .16);
  --orange: #db6524;
  --orange-hot: #f36a21;
  --green: #57765b;
  --max: 1480px;
  --page-progress: 0;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--ink); }
body {
  margin: 0;
  overflow-x: hidden;
  background: var(--ink);
  color: var(--paper);
  font-family: Inter, Arial, Helvetica, sans-serif;
}
button, input, select, textarea { font: inherit; }
a { color: inherit; }

.page-progress {
  position: fixed;
  z-index: 100;
  inset: 0 auto auto 0;
  width: calc(var(--page-progress) * 100%);
  height: 3px;
  background: linear-gradient(90deg, #a94b20, var(--orange-hot));
  box-shadow: 0 0 16px rgba(243, 106, 33, .42);
  pointer-events: none;
}

.brand-corner {
  position: fixed;
  z-index: 70;
  top: 24px;
  left: clamp(20px, 4vw, 64px);
  color: var(--paper);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .18em;
  text-decoration: none;
  text-transform: uppercase;
  text-shadow: 0 4px 18px rgba(0, 0, 0, .75);
}
.brand-corner b {
  display: inline-grid;
  width: 24px;
  height: 24px;
  margin: 0 3px;
  place-items: center;
  background: var(--orange-hot);
  color: #080a0b;
  font-style: italic;
  box-shadow: 4px 5px 0 rgba(70, 28, 10, .72);
  transform: skew(-5deg);
}

.slide-label {
  position: absolute;
  z-index: 8;
  top: 28px;
  right: clamp(20px, 4vw, 64px);
  padding: 9px 11px;
  border: 1px solid var(--line);
  background: rgba(4, 7, 8, .45);
  color: #c0c6c7;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  backdrop-filter: blur(12px);
}
.slide-label b { margin-right: 7px; color: var(--orange-hot); }

.subpage-hero {
  position: relative;
  height: 150svh;
}
.subpage-hero__sticky {
  position: sticky;
  top: 0;
  min-height: 100svh;
  overflow: hidden;
  display: grid;
  place-items: center;
  isolation: isolate;
}
.subpage-hero__visual,
.subpage-hero__shade,
.subpage-hero__fog {
  position: absolute;
  inset: -5%;
}
.subpage-hero__visual {
  z-index: -4;
  background-position: center;
  background-size: cover;
  transform: translate3d(0, calc(var(--hero-progress, 0) * -2.4vh), 0) scale(calc(1.05 + var(--hero-progress, 0) * .045));
  animation: subpage-drift 18s ease-in-out infinite alternate;
  will-change: transform, background-position;
}
.process-hero .subpage-hero__visual {
  background-image: url("assets/homepage-v2/forest-intro-v2.jpg");
}
.pricing-hero .subpage-hero__visual {
  background-image: url("assets/homepage-v2/option-3-suv-camper-clean-hitch-v4.png");
  background-position: 52% center;
}
.subpage-hero__shade {
  z-index: -3;
  background:
    radial-gradient(circle at 50% 48%, rgba(5, 8, 9, .03) 0 20%, rgba(4, 6, 7, .72) 92%),
    linear-gradient(0deg, rgba(3, 5, 6, .88), rgba(3, 5, 6, .14) 50%, rgba(3, 5, 6, .58));
}
.subpage-hero__fog {
  z-index: -2;
  inset: -18%;
  background:
    radial-gradient(ellipse at 38% 52%, rgba(222, 232, 229, .13), transparent 46%),
    radial-gradient(ellipse at 72% 45%, rgba(222, 232, 229, .08), transparent 42%);
  filter: blur(32px);
  mix-blend-mode: screen;
  opacity: calc(.38 - var(--hero-progress, 0) * .2);
  animation: fog-drift 12s ease-in-out infinite alternate;
}
@keyframes subpage-drift {
  from { background-position: 48% 50%; }
  to { background-position: 53% 47%; }
}
@keyframes fog-drift {
  from { transform: translate3d(-3%, 1%, 0) scale(1.03); }
  to { transform: translate3d(4%, -2%, 0) scale(1.09); }
}

.subpage-hero__content {
  width: min(1460px, 92vw);
  padding: 110px 0 92px;
  text-align: center;
  opacity: calc(1 - var(--hero-progress, 0) * 1.1);
  transform: translateY(calc(var(--hero-progress, 0) * -42px));
}
.eyebrow {
  display: block;
  margin-bottom: 20px;
  color: var(--orange-hot);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .24em;
  text-transform: uppercase;
}
.subpage-hero h1 {
  margin: 0;
  font-size: clamp(62px, 10.8vw, 174px);
  font-weight: 950;
  letter-spacing: -.075em;
  line-height: .82;
  text-transform: uppercase;
}
.subpage-hero h1 .texture {
  display: block;
  color: transparent;
  background:
    linear-gradient(115deg, rgba(31, 78, 43, .22), rgba(91, 122, 77, .08)),
    url("assets/homepage-v2/intro-aerial-forest-v4.png") center / 126% auto;
  background-blend-mode: soft-light, normal;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-stroke: 1.4px rgba(220, 228, 222, .48);
  filter:
    brightness(1.02)
    saturate(.92)
    drop-shadow(3px 3px 0 #171c19)
    drop-shadow(7px 8px 0 #0a0e0c)
    drop-shadow(13px 16px 12px rgba(0, 0, 0, .62));
}
.subpage-hero h1 .accent {
  color: var(--orange-hot);
  -webkit-text-fill-color: var(--orange-hot);
}
.process-page .subpage-hero h1 .accent {
  display: block;
  text-shadow:
    3px 3px 0 #6e2b0e,
    7px 8px 0 #291108,
    13px 16px 12px rgba(0, 0, 0, .62);
}
.pricing-page .subpage-hero h1 .accent { display: block; }
.hero-lead {
  width: min(700px, 86vw);
  margin: 28px auto 0;
  color: #d1d5d5;
  font-size: clamp(15px, 1.45vw, 21px);
  line-height: 1.65;
}
.scroll-cue {
  position: absolute;
  z-index: 5;
  bottom: 28px;
  left: 50%;
  color: #c8cdce;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .2em;
  text-transform: uppercase;
  transform: translateX(-50%);
}
.scroll-cue::after {
  content: "";
  display: block;
  width: 1px;
  height: 32px;
  margin: 9px auto 0;
  background: linear-gradient(var(--orange-hot), transparent);
  animation: cue 1.6s ease-in-out infinite;
}
@keyframes cue { 50% { transform: translateY(8px); opacity: .45; } }

.story-bridge {
  position: relative;
  height: 76svh;
  background: var(--ink);
}
.story-bridge__sticky {
  position: sticky;
  top: 0;
  min-height: 100svh;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 50%, rgba(219, 101, 36, .17), transparent 34%),
    linear-gradient(112deg, #080b0c, #10100f 50%, #080b0c);
}
.story-bridge__sticky::before {
  content: "";
  position: absolute;
  width: 65vw;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--orange-hot), transparent);
  box-shadow: 0 0 30px rgba(243, 106, 33, .55);
  transform: scaleX(calc(.15 + var(--bridge-progress, 0) * .85));
}
.story-bridge p {
  max-width: 760px;
  margin: 0;
  padding: 24px;
  color: #e8e7e3;
  font-size: clamp(28px, 4.2vw, 68px);
  font-weight: 900;
  letter-spacing: -.045em;
  line-height: .98;
  text-align: center;
  text-transform: uppercase;
  transform: translateY(calc((.5 - var(--bridge-progress, 0)) * 44px));
}
.story-bridge p em { color: var(--orange-hot); font-style: normal; }

.content-section {
  position: relative;
  padding: clamp(80px, 9vw, 150px) clamp(22px, 5vw, 78px);
  background:
    linear-gradient(180deg, rgba(14, 18, 19, .98), rgba(6, 8, 9, 1)),
    url("assets/homepage-v2/intro-aerial-forest-v4.png") center / cover fixed;
  isolation: isolate;
}
.content-section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(7, 9, 10, .98), rgba(7, 9, 10, .79), rgba(7, 9, 10, .98));
}
.section-inner { width: min(var(--max), 100%); margin: 0 auto; }
.section-heading {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr);
  gap: 52px;
  align-items: end;
  margin-bottom: clamp(52px, 7vw, 98px);
}
.section-heading h2 {
  margin: 0;
  font-size: clamp(48px, 7.2vw, 110px);
  font-weight: 950;
  letter-spacing: -.068em;
  line-height: .84;
  text-transform: uppercase;
}
.section-heading h2 span { color: var(--orange-hot); }
.section-heading p {
  margin: 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.7;
}

.process-list { border-top: 1px solid var(--line); }
.process-step {
  position: relative;
  min-height: 68svh;
  display: grid;
  grid-template-columns: minmax(150px, .42fr) minmax(0, 1fr);
  gap: clamp(28px, 7vw, 110px);
  align-items: center;
  padding: 70px 0;
  border-bottom: 1px solid var(--line);
}
.step-number {
  color: transparent;
  font-size: clamp(110px, 18vw, 270px);
  font-weight: 950;
  letter-spacing: -.1em;
  line-height: .7;
  -webkit-text-stroke: 1px rgba(230, 234, 232, .2);
  opacity: .72;
}
.step-copy { max-width: 800px; }
.step-copy h3 {
  margin: 0 0 22px;
  font-size: clamp(36px, 5vw, 76px);
  font-weight: 950;
  letter-spacing: -.055em;
  line-height: .9;
  text-transform: uppercase;
}
.step-copy p {
  margin: 0;
  color: #bbc1c1;
  font-size: clamp(16px, 1.6vw, 22px);
  line-height: 1.65;
}
.step-copy strong { color: var(--paper); }

.process-page .subpage-hero { height: 112svh; }
.process-page .cta { min-height: 72svh; }
.process-page .rust-feature { min-height: 78svh; }

.interactive-process {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  background: #07090a;
  isolation: isolate;
}
.process-backgrounds,
.process-background,
.interactive-process__shade {
  position: absolute;
  inset: 0;
}
.process-backgrounds { z-index: -4; }
.process-background {
  background-position: center;
  background-size: cover;
  opacity: 0;
  transform: scale(1.055) translate3d(1.5%, 0, 0);
  transition: opacity .7s ease, transform 1.1s cubic-bezier(.2, .7, .2, 1);
  will-change: opacity, transform;
}
.process-background.is-active {
  opacity: 1;
  transform: scale(1.015) translate3d(0, 0, 0);
}
.interactive-process__shade {
  z-index: -3;
  background:
    linear-gradient(90deg, rgba(5, 7, 8, .96) 0 33%, rgba(5, 7, 8, .7) 62%, rgba(5, 7, 8, .5)),
    linear-gradient(0deg, rgba(5, 7, 8, .92), transparent 55%, rgba(5, 7, 8, .58));
}
.interactive-process__inner {
  width: min(var(--max), calc(100% - clamp(44px, 10vw, 156px)));
  min-height: 100svh;
  margin: 0 auto;
  display: grid;
  grid-template-rows: auto 1fr;
  align-items: center;
  gap: clamp(28px, 5vw, 68px);
  padding: clamp(70px, 8vw, 116px) 0 clamp(54px, 6vw, 88px);
}
.interactive-process__heading {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(260px, .55fr);
  gap: 42px;
  align-items: end;
}
.interactive-process__heading h2 {
  margin: 0;
  font-size: clamp(48px, 6vw, 94px);
  font-weight: 950;
  letter-spacing: -.066em;
  line-height: .84;
  text-transform: uppercase;
}
.interactive-process__heading h2 span {
  color: var(--orange-hot);
  -webkit-text-fill-color: var(--orange-hot);
}
.interactive-process__heading p {
  margin: 0;
  color: #b8bfc0;
  line-height: 1.65;
}
.process-interface {
  display: grid;
  grid-template-columns: minmax(230px, .56fr) minmax(0, 1.44fr);
  gap: clamp(18px, 3vw, 46px);
  align-items: stretch;
}
.process-tabs {
  display: grid;
  align-content: center;
  border-top: 1px solid var(--line);
}
.process-tab {
  position: relative;
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 14px;
  align-items: center;
  min-height: 62px;
  padding: 13px 16px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: rgba(9, 12, 13, .62);
  color: #aab1b2;
  cursor: pointer;
  text-align: left;
  transition: color .25s ease, background .25s ease, transform .25s ease;
}
.process-tab::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--orange-hot);
  transform: scaleY(0);
  transition: transform .25s ease;
}
.process-tab span {
  color: #686f70;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .14em;
}
.process-tab b {
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.process-tab:hover { color: var(--paper); background: rgba(17, 21, 22, .86); }
.process-tab:focus-visible { outline: 2px solid var(--orange); outline-offset: -2px; }
.process-tab.is-active {
  color: var(--paper);
  background: linear-gradient(90deg, rgba(219, 101, 36, .18), rgba(13, 16, 17, .86));
  transform: translateX(8px);
}
.process-tab.is-active::before { transform: scaleY(1); }
.process-tab.is-active span { color: var(--orange-hot); }
.process-panel {
  min-height: 440px;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: clamp(26px, 4vw, 54px);
  border: 1px solid rgba(229, 232, 230, .19);
  background: linear-gradient(145deg, rgba(16, 20, 21, .92), rgba(6, 8, 9, .79));
  box-shadow: 0 34px 100px rgba(0, 0, 0, .45);
  backdrop-filter: blur(18px);
}
.process-panel__meta {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
  color: #9ca4a5;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.process-panel__meta b { color: var(--orange-hot); }
.process-copy-stack { position: relative; min-height: 250px; }
.process-copy {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: center;
  opacity: 0;
  visibility: hidden;
  transform: translate3d(24px, 0, 0);
  transition: opacity .38s ease, transform .5s cubic-bezier(.2, .7, .2, 1), visibility .38s;
}
.process-copy.is-active { opacity: 1; visibility: visible; transform: none; }
.process-copy .eyebrow { margin-bottom: 15px; }
.process-copy h3 {
  max-width: 820px;
  margin: 0 0 22px;
  font-size: clamp(40px, 5vw, 76px);
  font-weight: 950;
  letter-spacing: -.058em;
  line-height: .88;
  text-transform: uppercase;
}
.process-copy p {
  max-width: 790px;
  margin: 0;
  color: #c0c6c6;
  font-size: clamp(15px, 1.35vw, 20px);
  line-height: 1.62;
}
.process-copy strong { color: var(--paper); }
.process-controls {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 20px;
  align-items: center;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.process-controls button {
  padding: 10px 0;
  border: 0;
  background: transparent;
  color: #d9dddd;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .15em;
  cursor: pointer;
  text-transform: uppercase;
}
.process-controls button:hover { color: var(--orange-hot); }
.process-controls button:disabled { color: #515859; cursor: default; }
.process-dots { display: flex; justify-content: center; gap: 7px; }
.process-dots i {
  width: 22px;
  height: 2px;
  background: rgba(227, 231, 230, .2);
  transition: background .25s ease, transform .25s ease;
}
.process-dots i.is-active { background: var(--orange-hot); transform: scaleX(1.25); }

.rust-feature {
  position: relative;
  min-height: 90svh;
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  align-items: center;
  gap: clamp(36px, 7vw, 100px);
  padding: clamp(80px, 10vw, 160px) clamp(22px, 5vw, 78px);
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(5, 7, 8, .98) 0 36%, rgba(5, 7, 8, .66) 66%, rgba(5, 7, 8, .9)),
    url("assets/homepage-v2/service-suv-front-v2.png") center / cover;
}
.rust-copy { max-width: 690px; }
.rust-copy h2 {
  margin: 0;
  font-size: clamp(54px, 7.4vw, 116px);
  font-weight: 950;
  letter-spacing: -.07em;
  line-height: .82;
  text-transform: uppercase;
}
.rust-copy h2 span { color: var(--orange-hot); }
.rust-copy p { color: var(--muted); font-size: 17px; line-height: 1.7; }
.rust-visual {
  position: relative;
  min-height: 520px;
  border: 1px solid var(--line);
  overflow: hidden;
  background:
    linear-gradient(105deg, transparent 0 49.6%, rgba(241, 240, 235, .7) 50%, transparent 50.4%),
    linear-gradient(90deg, rgba(119, 49, 20, .74) 0 50%, rgba(19, 27, 23, .76) 50%),
    radial-gradient(circle at 18% 38%, #a34b22 0 2%, transparent 10%),
    repeating-linear-gradient(20deg, #282b2a 0 7px, #111413 8px 18px);
  box-shadow: 0 40px 90px rgba(0, 0, 0, .46);
}
.rust-visual::before {
  content: "";
  position: absolute;
  inset: 0 50% 0 0;
  background:
    radial-gradient(circle at 20% 24%, rgba(230, 107, 43, .78), transparent 17%),
    radial-gradient(circle at 76% 62%, rgba(151, 58, 24, .88), transparent 24%),
    repeating-radial-gradient(circle at 40% 40%, rgba(219, 101, 36, .26) 0 3px, transparent 4px 13px);
  mix-blend-mode: screen;
}
.rust-visual::after {
  content: "PROTECTIVE FILM APPLIED";
  position: absolute;
  right: 24px;
  bottom: 24px;
  color: #cad3ca;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .18em;
}
.rust-labels {
  position: absolute;
  inset: 22px 22px auto;
  display: flex;
  justify-content: space-between;
  color: #f0ece6;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.optional-note {
  display: inline-block;
  margin-top: 28px;
  padding: 12px 14px;
  border-left: 3px solid var(--orange-hot);
  background: rgba(219, 101, 36, .08);
  color: #d7dad7;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.pricing-grid,
.discount-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.price-card,
.discount-card {
  min-height: 300px;
  padding: 34px;
  border: 1px solid var(--line);
  background: linear-gradient(145deg, rgba(23, 27, 28, .9), rgba(10, 12, 13, .94));
  box-shadow: 0 26px 70px rgba(0, 0, 0, .2);
}
.price-card.featured {
  background: linear-gradient(145deg, rgba(23, 27, 28, .9), rgba(10, 12, 13, .94));
  border-color: var(--line);
}
.card-kicker {
  color: var(--orange-hot);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.price-card h3,
.discount-card h3 {
  margin: 40px 0 18px;
  font-size: clamp(28px, 3vw, 46px);
  font-weight: 950;
  letter-spacing: -.045em;
  line-height: .92;
  text-transform: uppercase;
}
.price-card .rate { color: var(--orange-hot); font-size: clamp(48px, 5.2vw, 82px); }
.price-card p,
.discount-card p { margin: 0; color: var(--muted); line-height: 1.65; }
.discount-card { min-height: 230px; }
.discount-card h3 { margin-top: 34px; }

.terms-list { border-top: 1px solid var(--line); }
.terms-list details { border-bottom: 1px solid var(--line); }
.terms-list summary {
  position: relative;
  padding: 30px 70px 30px 0;
  cursor: pointer;
  font-size: clamp(22px, 2.8vw, 42px);
  font-weight: 900;
  letter-spacing: -.03em;
  list-style: none;
  text-transform: uppercase;
}
.terms-list summary::-webkit-details-marker { display: none; }
.terms-list summary::after {
  content: "+";
  position: absolute;
  right: 8px;
  top: 50%;
  color: var(--orange-hot);
  font-size: 34px;
  transform: translateY(-50%);
}
.terms-list details[open] summary::after { content: "−"; }
.terms-list p {
  max-width: 980px;
  margin: -8px 0 36px;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.75;
}

.cta {
  position: relative;
  min-height: 88svh;
  display: grid;
  place-items: center;
  padding: 90px 24px;
  text-align: center;
  overflow: hidden;
  background:
    linear-gradient(rgba(4, 7, 8, .74), rgba(4, 7, 8, .92)),
    url("assets/homepage-v2/forest-intro-v2.jpg") center / cover;
}
.cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle, rgba(219, 101, 36, .14), transparent 36%);
}
.cta-content { position: relative; max-width: 1100px; }
.cta h2 {
  margin: 0;
  font-size: clamp(58px, 9vw, 144px);
  font-weight: 950;
  letter-spacing: -.075em;
  line-height: .82;
  text-transform: uppercase;
}
.cta h2 span { color: var(--orange-hot); }
.cta p { max-width: 650px; margin: 28px auto; color: #c8cdcd; font-size: 17px; line-height: 1.65; }
.cta-button {
  display: inline-block;
  margin-top: 10px;
  padding: 18px 26px;
  border: 1px solid var(--orange-hot);
  background: var(--orange-hot);
  color: #07090a;
  font-size: 10px;
  font-weight: 950;
  letter-spacing: .18em;
  text-decoration: none;
  text-transform: uppercase;
  transition: transform .25s ease, box-shadow .25s ease;
}
.cta-button:hover,
.cta-button:focus-visible { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(243, 106, 33, .25); }

.site-footer {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding: 28px clamp(22px, 5vw, 78px);
  border-top: 1px solid var(--line);
  background: #050707;
  color: #8e9697;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.reveal {
  opacity: var(--visible, 0);
  transform: translateY(calc((1 - var(--visible, 0)) * 34px));
  transition: opacity .8s ease, transform .8s cubic-bezier(.2, .7, .2, 1);
}

.quick-menu {
  position: fixed;
  z-index: 100;
  right: 22px;
  bottom: 20px;
}
.quick-toggle {
  position: relative;
  display: grid;
  width: 148px;
  height: 76px;
  padding: 4px;
  border: 0;
  border-radius: 0;
  place-items: center;
  background: transparent;
  color: var(--paper);
  cursor: pointer;
  filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .48));
  transition: transform .25s ease, filter .25s ease;
}
.quick-toggle:hover {
  filter:
    drop-shadow(0 8px 12px rgba(0, 0, 0, .5))
    drop-shadow(0 0 10px rgba(243, 106, 33, .54));
  transform: translateY(-2px);
}
.quick-toggle:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 3px;
}
.hitch-mark {
  width: 140px;
  height: auto;
  overflow: visible;
  fill: url(#shared-hitch-metal);
  stroke: #c9733d;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.15;
  filter: none;
  transform: perspective(180px) rotateX(5deg) rotateY(-5deg);
  transform-origin: 50% 50%;
  transition: filter .28s ease, transform .28s ease;
}
.quick-menu.open .hitch-mark { transform: perspective(180px) rotateX(3deg) rotateY(-2deg) translateY(-2px); }
.hitch-mark .hole { fill: #030404; stroke: #a6532a; stroke-width: 1.65; }
.hitch-mark .detail { fill: none; stroke: rgba(226, 137, 82, .72); stroke-width: 1.2; }
.hitch-mark .receiver { fill: #020303; stroke: #cf7138; stroke-width: 1.8; }
.hitch-mark .highlight { fill: none; stroke: rgba(255, 207, 171, .58); stroke-width: 1.15; }
.hitch-mark .bevel { fill: none; stroke: rgba(119, 53, 25, .86); stroke-width: 2.4; }
.quick-popover {
  position: absolute;
  right: 0;
  bottom: calc(100% + 12px);
  width: 250px;
  padding: 14px;
  border: 1px solid var(--line);
  background: rgba(7, 9, 10, .96);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .42);
  backdrop-filter: blur(16px);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity .25s ease, transform .25s ease, visibility .25s;
}
.quick-menu.open .quick-popover { opacity: 1; visibility: visible; transform: none; }
.quick-popover a {
  display: block;
  padding: 13px 10px;
  border-bottom: 1px solid var(--line);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .1em;
  text-decoration: none;
  text-transform: uppercase;
}
.quick-popover a:last-child { border: 0; }
.quick-popover a:hover { color: var(--orange-hot); }

@media (max-width: 900px) {
  .section-heading,
  .rust-feature { grid-template-columns: 1fr; }
  .pricing-grid,
  .discount-grid { grid-template-columns: 1fr 1fr; }
  .process-step { grid-template-columns: 110px minmax(0, 1fr); }
  .rust-visual { min-height: 420px; }
  .interactive-process__heading { grid-template-columns: 1fr; gap: 22px; }
  .process-interface { grid-template-columns: 210px minmax(0, 1fr); }
}

@media (max-width: 620px) {
  .brand-corner { top: 18px; left: 18px; font-size: 10px; }
  .brand-corner b { width: 20px; height: 20px; }
  .slide-label { top: 16px; right: 16px; font-size: 7px; }
  .subpage-hero { height: 125svh; }
  .subpage-hero h1 { font-size: clamp(52px, 18vw, 88px); line-height: .86; }
  .subpage-hero__content { padding-inline: 18px; }
  .story-bridge { height: 56svh; }
  .story-bridge__sticky { min-height: 88svh; }
  .section-heading { gap: 24px; }
  .section-heading h2 { font-size: clamp(46px, 15vw, 72px); }
  .process-step {
    min-height: auto;
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 64px 0;
  }
  .step-number { font-size: 100px; }
  .pricing-grid,
  .discount-grid { grid-template-columns: 1fr; }
  .price-card,
  .discount-card { min-height: 230px; padding: 26px; }
  .rust-feature { min-height: auto; }
  .rust-visual { min-height: 340px; }
  .site-footer { flex-direction: column; }
  .quick-menu { right: 12px; bottom: 12px; }
  .quick-toggle { width: 112px; height: 58px; }
  .hitch-mark { width: 110px; }
  .quick-popover { width: min(250px, calc(100vw - 24px)); }
  .process-page .subpage-hero { height: 100svh; }
  .interactive-process__inner { width: calc(100% - 36px); padding-block: 78px 46px; }
  .interactive-process__heading h2 { font-size: clamp(42px, 13vw, 66px); }
  .process-interface { grid-template-columns: 1fr; }
  .process-tabs {
    display: flex;
    overflow-x: auto;
    border: 1px solid var(--line);
    scrollbar-width: none;
  }
  .process-tabs::-webkit-scrollbar { display: none; }
  .process-tab {
    min-width: 142px;
    min-height: 58px;
    grid-template-columns: 28px 1fr;
    border-right: 1px solid var(--line);
    border-bottom: 0;
  }
  .process-tab.is-active { transform: none; }
  .process-tab::before { inset: auto 0 0; width: auto; height: 3px; transform: scaleX(0); }
  .process-tab.is-active::before { transform: scaleX(1); }
  .process-panel { min-height: 480px; padding: 24px; }
  .process-panel__meta { align-items: flex-start; }
  .process-copy-stack { min-height: 310px; }
  .process-copy h3 { font-size: clamp(36px, 11vw, 54px); }
  .process-dots i { width: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
  .subpage-hero__visual { transform: scale(1.05); }
}