*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--bg-deep);
  
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
html.has-lenis { scroll-behavior: auto; }

body::before {
  content: '';
  position: fixed; inset: 0; z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(46% 38% at 14% 6%, color-mix(in srgb, var(--accent-money) 9%, transparent), transparent 70%),
    radial-gradient(40% 34% at 88% 34%, color-mix(in srgb, var(--accent-vapes) 6%, transparent), transparent 72%),
    radial-gradient(50% 40% at 50% 104%, color-mix(in srgb, var(--accent-accessories) 8%, transparent), transparent 74%);
}
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  body::before { display: none; }
}

@media (prefers-contrast: more) {
  body::before { display: none; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  
  position: relative;
  font-family: var(--font-ui);
  font-size: var(--fs-body);
  font-weight: var(--wt-regular);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-variant-numeric: tabular-nums;
  overflow-x: hidden;              
}

img, picture, video, canvas, svg { display: block; max-width: 100%; }
img, video { height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
p, h1, h2, h3, h4, h5, h6, figure, blockquote, dl, dd { margin: 0; }
ul[class], ol[class] { list-style: none; margin: 0; padding: 0; }
:where(a) { color: var(--vertical-accent); }
hr { border: 0; height: 1px; background: var(--line); margin: var(--sp-7) 0; }
::selection { background: var(--accent-quiet); color: var(--ink); }

:focus-visible {
  outline: var(--focus-width) solid var(--vertical-accent);
  outline-offset: var(--focus-offset);
  border-radius: var(--r-xs);
}

.skip-link {
  position: absolute; left: var(--sp-4); top: var(--sp-4);
  transform: translateY(-200%);
  background: var(--surface-2); color: var(--ink);
  padding: var(--sp-3) var(--sp-4); border-radius: var(--r-sm);
  border: 1px solid var(--line-strong);
  z-index: var(--z-modal);
  transition: transform var(--dur-fast) var(--ease-entrance);
}
.skip-link:focus { transform: translateY(0); }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--pad); }
.container--narrow { max-width: 60rem; }
.container--prose { max-width: var(--measure); }

.section { padding-block: clamp(var(--sp-7), 8vw, var(--sp-10)); }
.section--tight { padding-block: var(--sp-7); }
.section + .section { border-top: 1px solid var(--line); }

.stack > * + * { margin-top: var(--sp-4); }
.stack-lg > * + * { margin-top: var(--sp-6); }

.grid { display: grid; gap: var(--sp-5); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }

.split { display: grid; gap: var(--sp-6); grid-template-columns: 1fr; }
@media (min-width: 60rem) {
  .split { grid-template-columns: 1.15fr 0.85fr; align-items: end; }
  .split--offset > :last-child { transform: translateY(var(--sp-6)); }
}

.display-1, .display-2, .display-3, .display-4 {
  font-family: var(--font-display); font-weight: var(--wt-display);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  font-optical-sizing: none;
  text-wrap: balance;
}
.display-1 { font-size: var(--fs-display-1); line-height: var(--lh-tight); }
.display-2 { font-size: var(--fs-display-2); }
.display-3 { font-size: var(--fs-display-3); }

.display-4 { font-size: clamp(var(--fs-display-floor), 3vw, 2.5rem); }

h1, .h1 { font-size: var(--fs-h1); }
h2, .h2 { font-size: var(--fs-h2); }
h3, .h3 { font-size: var(--fs-h3); }
h4, .h4 { font-size: var(--fs-h4); }

h1, h2, h3, h4, .h1, .h2, .h3, .h4 {
  font-family: var(--font-ui);
  font-weight: var(--wt-semibold);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  text-wrap: balance;
}

.serif {
  font-family: var(--font-display); font-weight: var(--wt-display); font-optical-sizing: none;
  letter-spacing: var(--ls-display);
  font-size: max(var(--fs-display-floor), 1em);
}

.eyebrow {
  font-size: var(--fs-micro);
  font-weight: var(--wt-semibold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--vertical-accent);
  display: flex; align-items: center; gap: var(--sp-3);
}
.eyebrow::after {
  content: ''; flex: 1 1 auto; height: 1px; max-width: 6rem;
  background: var(--gradient-metal-hairline); opacity: 0.7;
}

.lede {
  font-size: var(--fs-body-lg);
  max-width: var(--measure);
  color: var(--ink-2);
  text-wrap: pretty;
}
.muted { color: var(--ink-dim); }
.faint { color: var(--ink-faint); }
.small { font-size: var(--fs-sm); }
.xs { font-size: var(--fs-xs); }
.mono { font-family: var(--font-mono); letter-spacing: var(--ls-mono); font-size: 0.92em; }
.prose { max-width: var(--measure); }
.prose > * + * { margin-top: var(--sp-4); }
.prose h2, .prose h3 { margin-top: var(--sp-6); }

.metal-text {
  color: var(--metal-text);
  background: var(--gradient-metal);
  -webkit-background-clip: text;
  background-clip: text;
}
@supports (-webkit-background-clip: text) or (background-clip: text) {
  .metal-text { -webkit-text-fill-color: transparent; }
  
  [data-theme='light'] .metal-text {
    background: none; -webkit-text-fill-color: currentColor; color: var(--metal-text);
  }
}

.link {
  color: var(--vertical-accent);
  text-decoration: none;
  position: relative;
  padding-bottom: 2px;
}
.link::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: currentColor;
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-base) var(--ease-entrance);
}
.link:hover::after, .link:focus-visible::after { transform: scaleX(1); }

@media (hover: none) { .link::after { transform: scaleX(1); opacity: 0.5; } }

.btn {
  --btn-bg: var(--gradient-metal);
  --btn-ink: var(--accent-ink);
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-5);
  min-height: 2.75rem;                      
  border-radius: var(--r-sm);
  background: var(--btn-bg);
  color: var(--btn-ink);
  font-size: var(--fs-sm);
  font-weight: var(--wt-semibold);
  letter-spacing: 0.01em;
  text-decoration: none;
  overflow: hidden;
  isolation: isolate;
  transition: transform var(--dur-fast) var(--ease-standard),
              box-shadow var(--dur-base) var(--ease-standard),
              filter var(--dur-fast) var(--ease-standard);
}
.btn:hover { transform: translateY(var(--lift-hover)); box-shadow: var(--shadow-metal); filter: brightness(1.06); }
.btn:active { transform: translateY(var(--lift-press)); filter: brightness(0.97); }

.btn::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: var(--gradient-metal-sweep);
  transform: translateX(-120%);
  transition: transform var(--dur-slower) var(--ease-standard);
}
.btn:hover::after, .btn:focus-visible::after { transform: translateX(120%); }
@media (prefers-reduced-motion: reduce) { .btn::after { display: none; } }

.btn--ghost { --btn-bg: transparent; --btn-ink: var(--vertical-accent); border: 1px solid var(--accent-line); }
.btn--ghost:hover { background: var(--accent-quiet); box-shadow: none; filter: none; }
.btn--quiet { --btn-bg: var(--surface-2); --btn-ink: var(--ink); border: 1px solid var(--line); }
.btn--quiet:hover { border-color: var(--line-strong); box-shadow: var(--shadow-sm); filter: none; }
.btn--lg { padding: var(--sp-4) var(--sp-6); font-size: var(--fs-body); min-height: 3.25rem; }
.btn--sm { padding: var(--sp-2) var(--sp-4); font-size: var(--fs-xs); min-height: 2.25rem; }
.btn--block { width: 100%; }
.btn[disabled], .btn[aria-disabled='true'] { opacity: 0.45; pointer-events: none; }

.magnetic { transform: translate(var(--mx, 0), calc(var(--my, 0) + var(--lift, 0px))); }

.field { display: grid; gap: var(--sp-2); }
.field__label { font-size: var(--fs-xs); font-weight: var(--wt-medium); color: var(--ink-2); letter-spacing: 0.02em; }
.field__hint { font-size: var(--fs-xs); color: var(--ink-faint); }
.field__error { font-size: var(--fs-xs); color: var(--danger); }

.input, .select, .textarea {
  width: 100%;
  padding: var(--sp-3) var(--sp-4);
  min-height: 2.75rem;
  background: var(--surface-inset);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  transition: border-color var(--dur-fast) var(--ease-standard),
              box-shadow var(--dur-fast) var(--ease-standard);
}
.input::placeholder, .textarea::placeholder { color: var(--ink-faint); }
.input:hover, .select:hover, .textarea:hover { border-color: var(--line-strong); }
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--vertical-accent);
  box-shadow: 0 0 0 3px var(--accent-quiet);
}
.textarea { min-height: 7rem; resize: vertical; line-height: var(--lh-body); }
.select {
  appearance: none;
  
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 1.15rem) 55%, calc(100% - 0.8rem) 55%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: var(--sp-8);
}
.input[aria-invalid='true'], .textarea[aria-invalid='true'] { border-color: var(--danger); }

.check { display: flex; align-items: flex-start; gap: var(--sp-3); cursor: pointer; }
.check input { appearance: none; flex: 0 0 auto; width: 1.15rem; height: 1.15rem; margin-top: 0.2rem;
  border: 1px solid var(--line-strong); border-radius: var(--r-xs); background: var(--surface-inset);
  transition: background var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard); }
.check input[type='radio'] { border-radius: var(--r-full); }
.check input:checked { background: var(--gradient-metal); border-color: var(--metal-3); }

.check input[type='checkbox']:checked::after {
  content: ''; position: absolute;
  width: 0.55rem; height: 0.3rem;
  border-left: 2px solid var(--accent-ink);
  border-bottom: 2px solid var(--accent-ink);
  transform: translate(0.22rem, 0.28rem) rotate(-45deg);
}
.check input[type='radio']:checked::after {
  content: ''; position: absolute;
  width: 0.42rem; height: 0.42rem; border-radius: var(--r-full);
  background: var(--accent-ink);
  transform: translate(0.32rem, 0.32rem);
}
.check input { position: relative; }
.check__text { font-size: var(--fs-sm); color: var(--ink-2); }

.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.badge {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: 0.2rem var(--sp-3);
  border-radius: var(--r-full);
  font-size: var(--fs-micro);
  font-weight: var(--wt-semibold);
  letter-spacing: 0.1em; text-transform: uppercase;
  border: 1px solid currentColor;
}
.badge::before { content: ''; width: 5px; height: 5px; border-radius: var(--r-full); background: currentColor; }
.badge--in-stock { color: var(--ok); }
.badge--low-stock { color: var(--warn); }
.badge--out-of-stock { color: var(--ink-faint); }
.badge--new { color: var(--vertical-accent); }
.badge--sale { color: var(--danger); }
.badge--metal { color: var(--metal-text); border-color: var(--accent-line); background: var(--accent-quiet); }

.ok { color: var(--ok); }
.warn { color: var(--warn); }
.danger { color: var(--danger); }

.card {
  position: relative;
  padding: var(--sp-5);
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  transition: border-color var(--dur-base) var(--ease-standard),
              transform var(--dur-base) var(--ease-standard),
              box-shadow var(--dur-base) var(--ease-standard);
}
.card--link { text-decoration: none; color: inherit; display: block; }
.card--link:hover { border-color: var(--accent-line); transform: translateY(var(--lift-hover)); box-shadow: var(--shadow-md); }

.card--hairline::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 1px;
  background: var(--gradient-metal-hairline);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-slow) var(--ease-entrance);
}
.card--link.card--hairline:hover::before { transform: scaleX(1); }

.card__media { aspect-ratio: 4 / 3; background: var(--surface-2); border-radius: var(--r-sm); overflow: hidden; margin-bottom: var(--sp-4); }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slower) var(--ease-standard); }
.card--link:hover .card__media img { transform: scale(1.04); }

.card__title { display: block; margin-bottom: var(--sp-2); font-size: var(--fs-h4); font-weight: var(--wt-semibold); }
.card__meta { font-size: var(--fs-xs); color: var(--ink-dim); }
.card__price { font-family: var(--font-mono); font-size: var(--fs-body-lg); color: var(--metal-text); }
.card__price s { color: var(--ink-faint); font-size: var(--fs-sm); margin-right: var(--sp-2); }

.teaser__go {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  color: var(--vertical-accent); font-size: var(--fs-sm); font-weight: var(--wt-medium);
}
.teaser__go .icon { transition: transform var(--dur-base) var(--ease-entrance); }
.card--link:hover .teaser__go .icon { transform: translateX(4px); }

.hero { position: relative; padding-block: clamp(var(--sp-8), 12vw, var(--sp-11)) var(--sp-8); }
.hero > * + * { margin-top: var(--sp-5); }
.hero__title { max-width: 26ch; }

@supports (container-type: inline-size) {
  .scene-overlay { container-type: inline-size; }
  .scene-overlay .display-1 { font-size: min(var(--fs-display-1), 19cqi); }
}
.hero__lede { max-width: var(--measure); }
.hero__actions { display: flex; gap: var(--sp-3); flex-wrap: wrap; margin-top: var(--sp-6); }

.hero::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--gradient-metal-hairline); opacity: 0.5;
}

.hero--main::before, .hero--vapes::before, .hero--accessories::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60% 70% at 78% 8%, color-mix(in srgb, var(--vertical-accent) 12%, transparent), transparent 70%),
    radial-gradient(50% 60% at 4% 92%, color-mix(in srgb, var(--vertical-accent) 7%, transparent), transparent 72%);
}
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .hero--main::before, .hero--vapes::before, .hero--accessories::before { display: none; }
}
.hero--404 { text-align: left; min-height: 46vh; display: grid; align-content: center; }
.hero--admin::after { opacity: 0.3; }

.scene-track { position: relative; }
.scene-track--hero { height: 260vh; }

.scene-stage {
  position: sticky; top: 0;
  height: 100vh; height: 100svh;      
  display: grid; place-items: center;
  overflow: hidden;
  
  contain: paint;
}

.scene-stage canvas {
  position: absolute; inset: 0;
  z-index: 1;                     
  display: block;
  width: 100%; height: 100%;
  
  pointer-events: none;
}

.scene-stage::before {
  content: ''; position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(38% 38% at 50% 46%, color-mix(in srgb, var(--metal-4) 26%, transparent), transparent 70%),
    radial-gradient(70% 60% at 50% 120%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 70%);
}
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .scene-stage::before { background: radial-gradient(38% 38% at 50% 46%, var(--surface-2), transparent 70%); }
}

.scene-stage::after {
  content: ''; position: absolute; inset: 0; z-index: 2;
  pointer-events: none;
  background: radial-gradient(58% 46% at 50% 44%,
    color-mix(in srgb, var(--bg) 88%, transparent) 0%,
    color-mix(in srgb, var(--bg) 66%, transparent) 45%,
    transparent 78%);
}
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  
  .scene-stage::after {
    background: radial-gradient(58% 46% at 50% 44%, rgba(8, 9, 11, 0.88) 0%, rgba(8, 9, 11, 0.66) 45%, transparent 78%);
  }
}
:root[data-theme='light'] .scene-stage::after {
  background: radial-gradient(58% 46% at 50% 44%,
    color-mix(in srgb, var(--bg) 90%, transparent) 0%,
    color-mix(in srgb, var(--bg) 70%, transparent) 45%,
    transparent 78%);
}

.scene-overlay {
  position: relative; z-index: 3;
  width: 100%; max-width: var(--container);
  margin-inline: auto; padding-inline: var(--pad);
  text-align: center;
  pointer-events: none;                
}
.scene-overlay > * { pointer-events: auto; }
.scene-overlay > * + * { margin-top: var(--sp-5); }
.scene-overlay .hero__actions { justify-content: center; }
.hero__title--centred { max-width: 22ch; margin-inline: auto; }

.scroll-cue {
  display: flex; align-items: center; justify-content: center;
  gap: var(--sp-3);
  font-size: var(--fs-xs); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-dim);
}
.scroll-cue__line {
  width: clamp(2rem, 8vw, 5rem); height: 1px;
  background: var(--gradient-metal-hairline);
}

.scene-track--vertical { height: 190vh; }

.scene-stage--split { justify-items: start; }

.scene-overlay--left {
  max-width: 46rem;
  margin-inline: 0;                 
  text-align: left;
}
.scene-overlay--left .hero__actions { justify-content: flex-start; }
.vertical__title { max-width: 20ch; }

[data-vertical='vapes'] { --vertical-accent: var(--accent-vapes); }
[data-vertical='accessories'] { --vertical-accent: var(--accent-accessories); }

.scene-art {
  position: absolute; z-index: 1;
  pointer-events: none;
  color: var(--vertical-accent);
  opacity: 0.5;
}
.scene-art svg { display: block; width: 100%; height: 100%; }

.scene-art--vapes {
  right: clamp(1rem, 7vw, 8rem);
  top: 50%; translate: 0 -50%;
  width: clamp(7rem, 15vw, 13rem);
  aspect-ratio: 240 / 560;
}
.scene-art--accessories {
  right: clamp(1rem, 4vw, 6rem);
  top: 50%; translate: 0 -50%;
  width: clamp(15rem, 34vw, 30rem);
  aspect-ratio: 520 / 400;
}

@media (max-width: 820px) {
  .scene-art { opacity: 0.16; }
  .scene-art--vapes { right: -1rem; width: clamp(9rem, 42vw, 15rem); }
  .scene-art--accessories { right: -3rem; width: clamp(18rem, 82vw, 26rem); }
}

:root[data-theme='light'] .scene-art { opacity: 0.34; }
@media (max-width: 820px) {
  :root[data-theme='light'] .scene-art { opacity: 0.12; }
}

.vertical__points { list-style: none; max-width: var(--measure); }
.vertical__points > li {
  position: relative; padding-left: var(--sp-5);
  margin-top: var(--sp-3); color: var(--ink-2); font-size: var(--fs-sm);
}

.vertical__points > li::before {
  content: ''; position: absolute; left: 0; top: 0.7em;
  width: var(--sp-3); height: 1px; background: var(--vertical-accent);
}

.marquee {
  overflow: hidden;
  border-block: 1px solid var(--line);
  padding-block: var(--sp-4);
  
  contain: paint;
}
.marquee__track {
  display: flex; width: max-content;
  animation: marquee-slide var(--marquee-speed, 38s) linear infinite;
}
.marquee__run { display: flex; align-items: center; flex: none; }
.marquee__item {
  font-family: var(--font-display); font-weight: var(--wt-display); font-optical-sizing: none;
  font-size: clamp(1.25rem, 3vw, 2.25rem);
  color: var(--ink-2); white-space: nowrap;
}
.marquee__item.is-accent { color: var(--vertical-accent); }
.marquee__sep { color: var(--ink-faint); padding-inline: var(--sp-5); }

@keyframes marquee-slide {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

.marquee[data-paused] .marquee__track { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
  .marquee__run:nth-child(2) { display: none; }   
}

.agegate {
  position: fixed; inset: 0; z-index: var(--z-preloader);
  display: grid; place-items: center;
  padding: var(--pad);
  background: var(--bg);
  overflow-y: auto;
}

.agegate::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(50% 40% at 50% 0%, color-mix(in srgb, var(--accent-vapes) 14%, transparent), transparent 70%),
    radial-gradient(60% 50% at 50% 110%, color-mix(in srgb, var(--accent-vapes) 8%, transparent), transparent 72%);
}
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .agegate::before { display: none; }
}

.agegate__panel {
  position: relative;
  width: 100%; max-width: 34rem;
  text-align: center;
}
.agegate__panel > * + * { margin-top: var(--sp-5); }
.agegate__title { max-width: none; }
.agegate__body { max-width: var(--measure); margin-inline: auto; }

.agegate__actions {
  display: flex; flex-wrap: wrap; gap: var(--sp-3); justify-content: center;
  margin-top: var(--sp-6);
}

.agegate__actions .btn { flex: 0 1 auto; }

.hscroll__intro { margin-bottom: var(--sp-7); }

.hscroll__viewport { position: relative; }

.hscroll__track {
  display: flex; gap: var(--sp-5);
  list-style: none;
  
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-inline: var(--pad);
  padding-bottom: var(--sp-4);          
  scrollbar-width: thin;
}
.hscroll__track:focus-visible {
  outline: var(--focus-width, 2px) solid var(--vertical-accent);
  outline-offset: 4px;
}

.hscroll__panel {
  flex: 0 0 min(88vw, 26rem);
  scroll-snap-align: center;
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
}
.hscroll__num {
  font-family: var(--font-mono); font-size: var(--fs-micro);
  letter-spacing: 0.18em; color: var(--vertical-accent);
}

.hscroll[data-hscroll-active] { padding-block-end: 0; }
.hscroll[data-hscroll-active] .hscroll__viewport {
  position: sticky; top: 0;
  height: 100vh; height: 100svh;
  display: flex; align-items: center;
  overflow: hidden;
  contain: paint;
}
.hscroll[data-hscroll-active] .hscroll__track {
  overflow: visible;                    
  scroll-snap-type: none;
  padding-bottom: 0;
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  
  .hscroll[data-hscroll-active] .hscroll__viewport {
    position: static; height: auto; overflow: visible;
  }
  .hscroll[data-hscroll-active] .hscroll__track {
    overflow-x: auto; scroll-snap-type: x mandatory; transform: none !important;
  }
}

[data-parallax] {
  transform: translate3d(0, var(--parallax-y, 0px), 0);
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  [data-parallax] { transform: none; }
}

.rule-draw {
  display: block; height: 1px; width: clamp(3rem, 8vw, 5.5rem);
  background: var(--gradient-metal-hairline);
  transform: scaleX(0); transform-origin: left center;
}
.js-on .rule-draw[data-revealed] {
  transform: scaleX(1);
  
  transition: transform var(--dur-slower) var(--ease-entrance);
}
.js-on .rule-draw[data-revealed='instant'] { transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  .rule-draw { transform: scaleX(1); }
}

.vertical__cats { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.chip {
  display: inline-block;
  padding: 0.3rem var(--sp-3);
  border: 1px solid var(--line-strong); border-radius: var(--r-full);
  font-size: var(--fs-micro); letter-spacing: 0.04em;
  color: var(--ink-dim); white-space: nowrap;
}

@media (max-width: 820px) {
  .scene-overlay--left { max-width: none; }
  .scene-track--vertical { height: 170vh; }
}

.scene-track:has(> .scene-stage[data-scene-state='skipped']),
.scene-track:has(> .scene-stage[data-scene-state='failed']) { height: auto; }
.scene-stage[data-scene-state='skipped'],
.scene-stage[data-scene-state='failed'] { position: relative; height: auto; min-height: 78vh; }

@supports not selector(:has(*)) {
  
  .scene-track--hero { height: 200vh; }
}

@media (prefers-reduced-motion: reduce) {
  .scene-track--hero { height: auto; }
  .scene-stage { position: relative; height: auto; min-height: 78vh; }
}

.callout {
  max-width: var(--measure);
  border-left: 2px solid var(--line-strong);
  padding: var(--sp-2) 0 var(--sp-2) var(--sp-4);
  font-size: var(--fs-sm); color: var(--ink-dim);
}
.callout--accent { border-left-color: var(--accent-line); }
.callout--warn { border-left-color: var(--warn); color: var(--ink-2); }

.scope-list { max-width: var(--measure); margin-top: var(--sp-4); list-style: none; }
.scope-list > li {
  position: relative; padding-left: var(--sp-6);
  margin-top: var(--sp-3); color: var(--ink-2);
}
.scope-list > li::before {
  position: absolute; left: 0; top: 0.05em;
  font-size: 1.05em; line-height: inherit;
}
.scope-list__yes::before { content: '\2713'; color: var(--ok); }
.scope-list__no::before  { content: '\2717'; color: var(--ink-dim); }

.board { position: relative; width: 100%; overflow-x: auto; }
.rate-table { width: 100%; border-collapse: collapse; min-width: 34rem; }
.rate-table th, .rate-table td { padding: var(--sp-3) var(--sp-4); text-align: left; border-bottom: 1px solid var(--line); }
.rate-table thead th {
  font-size: var(--fs-micro); letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase; color: var(--ink-dim); font-weight: var(--wt-semibold);
  border-bottom-color: var(--line-strong);
}
.rate-table tbody tr { transition: background var(--dur-fast) var(--ease-standard); }
.rate-table tbody tr:hover { background: var(--surface-1); }
.rate-table .num { font-family: var(--font-mono); text-align: right; font-variant-numeric: tabular-nums; }
.rate-table .ccy { display: inline-flex; align-items: center; gap: var(--sp-3); }
.rate-table .ccy__code { font-family: var(--font-mono); color: var(--metal-text); font-size: var(--fs-sm); }
.rate-pending { color: var(--ink-faint); font-style: italic; font-size: var(--fs-sm); }

.freshness { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-xs); }
.freshness::before { content: ''; width: 6px; height: 6px; border-radius: var(--r-full); background: currentColor; }
.freshness--fresh { color: var(--ok); }
.freshness--stale { color: var(--warn); }
.freshness--manual { color: var(--metal-text); }
.freshness--cached { color: var(--ink-dim); }

.converter { container-type: inline-size; }
.converter__grid { display: grid; gap: var(--sp-4); grid-template-columns: 1fr; }
@media (min-width: 34rem) {
  .converter__grid { grid-template-columns: 1fr 1fr; }
  .converter__grid > :last-child { grid-column: 1 / -1; }
}

.converter__input { position: relative; display: flex; align-items: center; }
.converter__prefix {
  position: absolute; left: var(--sp-4);
  color: var(--ink-dim); font-family: var(--font-mono); font-size: var(--fs-sm);
  pointer-events: none;
}
.converter__input .input { padding-left: var(--sp-8); }

.converter__result {
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line);
}
.converter__out { display: flex; align-items: baseline; gap: var(--sp-3); flex-wrap: wrap; }
.converter__value {
  font-family: var(--font-display); font-weight: var(--wt-display); font-optical-sizing: none;
  font-size: clamp(2rem, 7vw, 3.25rem);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  color: var(--metal-text);
  font-variant-numeric: tabular-nums;
}
.converter__code {
  font-family: var(--font-mono); font-size: var(--fs-sm);
  letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--ink-dim);
}

.spark {
  width: 100%; height: 6rem; display: block;
  color: var(--vertical-accent); opacity: 0.85;
}

.map-embed {
  border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden;
  background: var(--surface-2); line-height: 0;
}
.map-embed iframe { display: block; width: 100%; }

[data-theme='dark'] .map-embed iframe { filter: invert(0.9) hue-rotate(180deg) saturate(0.7) contrast(0.95); }

.accordion { border-top: 1px solid var(--line); }
.accordion__item { border-bottom: 1px solid var(--line); }
.accordion__trigger {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  padding: var(--sp-4) 0; text-align: left;
  font-size: var(--fs-h4); font-weight: var(--wt-medium); color: var(--ink);
}
.accordion__trigger:hover { color: var(--vertical-accent); }
.accordion__icon { flex: 0 0 auto; width: 1rem; height: 1rem; position: relative; }
.accordion__icon::before, .accordion__icon::after {
  content: ''; position: absolute; inset: 50% 0 auto 0; height: 1px; background: currentColor;
  transition: transform var(--dur-base) var(--ease-physical);
}
.accordion__icon::after { transform: rotate(90deg); }
.accordion__trigger[aria-expanded='true'] .accordion__icon::after { transform: rotate(0deg); }

.accordion__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-slow) var(--ease-physical); }
.accordion__trigger[aria-expanded='true'] + .accordion__panel { grid-template-rows: 1fr; }
.accordion__inner { overflow: hidden; }
.accordion__inner > * { padding-bottom: var(--sp-5); color: var(--ink-2); max-width: var(--measure); }

.tabs { display: flex; gap: var(--sp-1); border-bottom: 1px solid var(--line); overflow-x: auto; }
.tab {
  padding: var(--sp-3) var(--sp-4); font-size: var(--fs-sm); color: var(--ink-dim);
  border-bottom: 2px solid transparent; white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard);
}
.tab:hover { color: var(--ink); }
.tab[aria-selected='true'] { color: var(--vertical-accent); border-bottom-color: var(--vertical-accent); }

.toast-region { position: fixed; inset: auto var(--sp-4) var(--sp-4) auto; z-index: var(--z-toast); display: grid; gap: var(--sp-3); max-width: min(26rem, calc(100vw - var(--sp-8))); }
.toast {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  padding: var(--sp-4);
  background: var(--surface-2); border: 1px solid var(--line-strong);
  border-left: 2px solid var(--vertical-accent);
  border-radius: var(--r-sm); box-shadow: var(--shadow-lg);
  font-size: var(--fs-sm);
  animation: toast-in var(--dur-slow) var(--ease-entrance) both;
}
.toast--ok { border-left-color: var(--ok); }
.toast--error { border-left-color: var(--danger); }
.toast[data-leaving='true'] { animation: toast-out var(--dur-base) var(--ease-exit) both; }
@keyframes toast-in { from { opacity: 0; transform: translateY(var(--sp-4)) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes toast-out { to { opacity: 0; transform: translateX(var(--sp-4)); } }

.breadcrumb { display: flex; flex-wrap: wrap; gap: var(--sp-2); font-size: var(--fs-xs); color: var(--ink-dim); }
.breadcrumb li { display: flex; align-items: center; gap: var(--sp-2); }
.breadcrumb li + li::before { content: '/'; color: var(--ink-faint); }

.breadcrumb a {
  display: inline-flex; align-items: center;
  min-height: 24px;
  color: var(--ink-dim); text-decoration: none;
}
.breadcrumb a:hover { color: var(--vertical-accent); }

.pagination { display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; }
.pagination a, .pagination span {
  min-width: 2.5rem; min-height: 2.5rem; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: var(--r-sm); text-decoration: none;
  font-size: var(--fs-sm); color: var(--ink-2);
}
.pagination a:hover { border-color: var(--accent-line); color: var(--vertical-accent); }
.pagination [aria-current='page'] { background: var(--accent-quiet); border-color: var(--accent-line); color: var(--metal-text); }

.quote { position: relative; padding-left: var(--sp-6); max-width: var(--measure); }
.quote::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: var(--gradient-metal); opacity: 0.8;
}
.quote__text { font-family: var(--font-display); font-weight: var(--wt-display); font-optical-sizing: none; font-size: max(var(--fs-display-floor), var(--fs-h3)); line-height: var(--lh-heading); letter-spacing: var(--ls-heading); }
.quote__cite { display: block; margin-top: var(--sp-3); font-size: var(--fs-xs); color: var(--ink-dim); font-style: normal; letter-spacing: 0.06em; text-transform: uppercase; }

.stat { display: grid; gap: var(--sp-1); }
.stat__value { font-family: var(--font-display); font-weight: var(--wt-display); font-optical-sizing: none; font-size: var(--fs-display-3); line-height: var(--lh-tight); letter-spacing: var(--ls-display); color: var(--metal-text); font-variant-numeric: tabular-nums; }
.stat__label { font-size: var(--fs-xs); color: var(--ink-dim); letter-spacing: 0.06em; text-transform: uppercase; }

.hairline { height: 1px; background: var(--gradient-metal-hairline); opacity: 0.55; }
.surface { background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--sp-5); }
.surface--inset { background: var(--surface-inset); }

.swatch { border-radius: var(--r-sm); border: 1px solid var(--line); min-height: 4.5rem; display: flex; align-items: flex-end; padding: var(--sp-2); }
.swatch__name { font-family: var(--font-mono); font-size: var(--fs-micro); background: var(--scrim); color: #fff; padding: 0.1rem 0.3rem; border-radius: var(--r-xs); }

.icon { width: 1.25em; height: 1.25em; flex: 0 0 auto; stroke: currentColor; stroke-width: 1.5; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.icon--lg { width: 2rem; height: 2rem; }

.theme-toggle {
  position: relative; display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3); min-height: 2.25rem;
  border: 1px solid var(--line); border-radius: var(--r-full);
  color: var(--ink-2); font-size: var(--fs-xs);
  transition: border-color var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);
}
.theme-toggle:hover { border-color: var(--accent-line); color: var(--vertical-accent); }
.theme-toggle__icon { position: relative; width: 1rem; height: 1rem; }

.theme-toggle .icon-sun, .theme-toggle .icon-moon { position: absolute; inset: 0; transition: opacity var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-expressive); }
[data-theme='dark'] .theme-toggle .icon-sun { opacity: 0; transform: rotate(-90deg) scale(0.6); }
[data-theme='dark'] .theme-toggle .icon-moon { opacity: 1; transform: none; }
[data-theme='light'] .theme-toggle .icon-sun { opacity: 1; transform: none; }
[data-theme='light'] .theme-toggle .icon-moon { opacity: 0; transform: rotate(90deg) scale(0.6); }

.preloader {
  position: fixed; inset: 0; z-index: var(--z-preloader);
  display: grid; place-items: center;
  background: var(--bg-deep);
  transition: opacity var(--dur-slow) var(--ease-exit), visibility var(--dur-slow) linear;
}
.preloader[hidden] { display: none; }
.preloader[data-done='true'] { opacity: 0; visibility: hidden; pointer-events: none; }
.preloader__mark {
  
  display: grid; place-items: center;
  color: var(--metal-text);
}

.preloader__mark svg { display: block; width: clamp(3rem, 7vw, 4.5rem); height: clamp(3rem, 7vw, 4.5rem); }
.preloader__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--line); overflow: hidden; }
.preloader__bar span { display: block; height: 100%; width: 0; background: var(--gradient-metal); transition: width var(--dur-base) var(--ease-standard); }

.js-on .js-reveal { opacity: 0; transform: translateY(1.25rem); }
.js-on .js-reveal-line { display: block; overflow: hidden; }
.js-on .js-reveal-line > span { display: block; transform: translateY(110%); }

.js-on .js-reveal[data-revealed] {
  opacity: 1; transform: none;
  transition: opacity var(--dur-slow) var(--ease-entrance), transform var(--dur-slow) var(--ease-entrance);
}
.js-on .js-reveal-line[data-revealed] > span {
  transform: none;
  transition: transform var(--dur-slower) var(--ease-entrance);
  transition-delay: var(--reveal-delay, 0ms);
}

.js-on .js-reveal[data-revealed='instant'],
.js-on .js-reveal-line[data-revealed='instant'] > span {
  transition: none !important;
}
@media (prefers-reduced-motion: reduce) {
  .js-on .js-reveal, .js-on .js-reveal-line > span { opacity: 1; transform: none; }
}

.curtain { position: fixed; inset: 0; z-index: var(--z-overlay); background: var(--bg-deep); transform: translateY(100%); pointer-events: none; }
.curtain[data-state='in'] { transform: translateY(0); transition: transform var(--dur-slow) var(--ease-exit); }
.curtain[data-state='out'] { transform: translateY(-100%); transition: transform var(--dur-slow) var(--ease-entrance); }

.announce {
  background: var(--gradient-metal);
  color: var(--accent-ink);
  padding: var(--sp-2) var(--pad);
  font-size: var(--fs-xs);
  font-weight: var(--wt-semibold);
  text-align: center;
  letter-spacing: 0.01em;
}

.masthead {
  position: sticky; top: 0; z-index: var(--z-header);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(14px) saturate(120%);
  border-bottom: 1px solid var(--line);
}

@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .masthead { background: var(--bg); }
}

.masthead__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4) var(--sp-6); flex-wrap: wrap;
  padding-block: var(--sp-3);
}

.brand { display: inline-flex; align-items: baseline; gap: var(--sp-3); text-decoration: none; color: var(--ink); }
.brand__mark {
  
  display: grid; place-items: center;
  border: 1px solid var(--accent-line); color: var(--metal-text);
  padding: 0.32rem; border-radius: var(--r-xs);
  transition: border-color var(--dur-base) var(--ease-standard);
}
.brand__mark svg { display: block; width: 1.375rem; height: 1.375rem; }

.brand { align-items: center; }
.brand:hover .brand__mark { border-color: var(--metal-3); }
.brand__name { font-weight: var(--wt-semibold); letter-spacing: -0.012em; }
.brand__vertical {
  font-size: var(--fs-micro); letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase; color: var(--vertical-accent);
}

.sites { display: flex; gap: var(--sp-5); flex-wrap: wrap; font-size: var(--fs-sm); }
.sites a { color: var(--ink-dim); text-decoration: none; position: relative; padding-block: var(--sp-1); }
.sites a:hover { color: var(--ink); }
.sites a[aria-current='page'] { color: var(--vertical-accent); }
.sites a[aria-current='page']::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px;
  background: var(--gradient-metal-hairline);
}

.masthead__actions { display: flex; align-items: center; gap: var(--sp-3); }

.mainnav__list { display: flex; align-items: center; gap: var(--sp-5); list-style: none; }
.mainnav__item { position: relative; }
.mainnav__link {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  color: var(--ink-2); text-decoration: none;
  font-size: var(--fs-sm); font-weight: var(--wt-medium);
  padding-block: var(--sp-3);          
  transition: color var(--dur-fast) var(--ease-standard);
}
.mainnav__link:hover { color: var(--ink); }
.mainnav__link[aria-current='page'] { color: var(--ink); }
.icon--chev { width: 0.7em; height: 0.7em; opacity: 0.6; }

.submenu {
  position: absolute; top: 100%; left: calc(var(--sp-4) * -1);
  min-width: 14rem; list-style: none;
  background: var(--surface-2);
  border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  padding: var(--sp-2);
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.7);
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity var(--dur-fast) var(--ease-standard),
              transform var(--dur-fast) var(--ease-standard),
              visibility var(--dur-fast);
}
.mainnav__item:hover > .submenu,
.mainnav__item:focus-within > .submenu { opacity: 1; visibility: visible; transform: none; }

.submenu a {
  display: block; padding: var(--sp-2) var(--sp-3);
  color: var(--ink-2); text-decoration: none; font-size: var(--fs-sm);
  border-radius: var(--r-xs);
}
.submenu a:hover, .submenu a:focus-visible { background: var(--surface-3); color: var(--ink); }

.navtoggle {
  display: none;                        
  width: 2.75rem; height: 2.75rem;      
  align-items: center; justify-content: center;
  flex-direction: column; gap: 5px;
  background: none; border: 1px solid var(--line-strong); border-radius: var(--r-xs);
  cursor: pointer;
}
.navtoggle__bar {
  display: block; width: 1.1rem; height: 1.5px; background: var(--ink-2);
  transition: transform var(--dur-fast) var(--ease-standard),
              opacity var(--dur-fast) var(--ease-standard);
}
.navtoggle[aria-expanded='true'] .navtoggle__bar:first-child { transform: translateY(3.25px) rotate(45deg); }
.navtoggle[aria-expanded='true'] .navtoggle__bar:last-child { transform: translateY(-3.25px) rotate(-45deg); }

.mobilenav {
  position: fixed; inset: 0; z-index: var(--z-modal, 80);
  background: color-mix(in srgb, var(--bg) 94%, transparent);
  backdrop-filter: blur(18px);
  overflow-y: auto;
  padding: calc(var(--sp-9) + var(--sp-6)) var(--pad) var(--sp-8);
}
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .mobilenav { background: var(--bg); }
}
.mobilenav[hidden] { display: none; }

:root[data-nav-open] body { overflow: hidden; padding-right: var(--scrollbar-gap, 0); }

.mobilenav__panel { max-width: 34rem; }
.mobilenav__list { list-style: none; }
.mobilenav__list > li + li { margin-top: var(--sp-5); border-top: 1px solid var(--line); padding-top: var(--sp-5); }
.mobilenav__link {
  display: block; font-family: var(--font-display); font-weight: var(--wt-display); font-optical-sizing: none;
  font-size: var(--fs-h3); color: var(--ink); text-decoration: none;
}
.mobilenav__sub { list-style: none; margin-top: var(--sp-3); }
.mobilenav__sub a {
  display: block; padding: var(--sp-2) 0;
  color: var(--ink-dim); text-decoration: none; font-size: var(--fs-sm);
}
.mobilenav__sub a:hover { color: var(--ink); }
.mobilenav__sites {
  display: flex; flex-wrap: wrap; gap: var(--sp-4);
  margin-top: var(--sp-7); padding-top: var(--sp-5); border-top: 1px solid var(--line-strong);
  font-size: var(--fs-sm);
}
.mobilenav__sites a { color: var(--metal-text); text-decoration: none; }

@media (max-width: 900px) {
  .mainnav { display: none; }
  .navtoggle { display: inline-flex; }
  .masthead__wa { display: none; }      
  .sites { display: none; }
}
@media (min-width: 901px) {
  .mobilenav { display: none !important; }
}

.footer { border-top: 1px solid var(--line); background: var(--surface-1); margin-top: var(--sp-9); }
.footer__inner {
  display: grid; gap: var(--sp-6);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  padding-block: var(--sp-7) var(--sp-8);
}
.footer__col > * + * { margin-top: var(--sp-2); }

.footer--admin { margin-top: var(--sp-8); }
.footer--admin .footer__base { padding-block: var(--sp-5); }
.footer__biz { font-weight: var(--wt-semibold); color: var(--ink); }
.footer .icon { display: inline-block; vertical-align: -0.2em; width: 1em; height: 1em; }

.footer__heading {
  font-size: var(--fs-micro); letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase; color: var(--ink-dim);
}
.footer__links ul { list-style: none; margin-top: var(--sp-3); }
.footer__links li + li { margin-top: var(--sp-2); }
.footer__links a {
  color: var(--ink-2); text-decoration: none; font-size: var(--fs-sm);
  transition: color var(--dur-fast) var(--ease-standard);
}
.footer__links a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 0.2em; }

.footer__links a,
.sites a,
.mobile-nav a,
.footer__base a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding-block: var(--sp-1);
}

.footer__links li + li { margin-top: 0; }

.footer__base {
  border-top: 1px solid var(--line);
  padding-block: var(--sp-5) var(--sp-6);
  display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-6);
  justify-content: space-between;
}

.todo {
  color: var(--warn);
  border-bottom: 1px dotted currentColor;
  cursor: help;
}

.devbar {
  position: fixed; inset: auto 0 0 0; z-index: var(--z-sticky);
  background: color-mix(in srgb, var(--bg-deep) 88%, transparent);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--line);
  padding: var(--sp-2) var(--pad);
  font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--ink-dim);
}
.devbar strong { color: var(--vertical-accent); margin-right: var(--sp-2); }
body:has(.devbar) .footer__inner { padding-bottom: var(--sp-9); }

.cat-grid {
  display: grid; gap: var(--sp-4); list-style: none;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
}

.cat-grid:has(.cat-card__shot) {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}
.cat-card {
  display: grid; grid-template-columns: 1fr auto; align-items: center;
  gap: var(--sp-2) var(--sp-4); height: 100%;
  padding: var(--sp-5);
  background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--r-md);
  text-decoration: none; color: inherit;
  transition: border-color var(--dur-fast) var(--ease-standard),
              background var(--dur-fast) var(--ease-standard),
              transform var(--dur-fast) var(--ease-standard);
}
.cat-card:hover, .cat-card:focus-visible {
  background: var(--surface-2); border-color: var(--accent-line);
  transform: translateY(var(--lift-hover));
}
.cat-card__name {
  font-family: var(--font-display); font-weight: var(--wt-display);
  font-optical-sizing: none;
  font-size: var(--fs-h4); line-height: var(--lh-tight);
}
.cat-card__count {
  grid-column: 1; font-family: var(--font-mono);
  font-size: var(--fs-micro); color: var(--ink-dim);
}

.cat-card__go {
  grid-column: 2; grid-row: 1 / span 2;
  color: var(--vertical-accent);
  transition: transform var(--dur-fast) var(--ease-standard);
}
.cat-card:hover .cat-card__go { transform: translateX(0.25rem); }

.prod-grid {
  display: grid; gap: var(--sp-4); list-style: none;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
}
.prod-card {
  display: flex; flex-direction: column; gap: var(--sp-3);
  padding: var(--sp-5);
  background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--r-md);
  transition: border-color var(--dur-fast) var(--ease-standard),
              background var(--dur-fast) var(--ease-standard);
}
.prod-card:hover { background: var(--surface-2); border-color: var(--line-strong); }

.prod-card:focus-within { border-color: var(--accent-line); }
.prod-card__link {
  display: grid; gap: var(--sp-2);
  text-decoration: none; color: inherit;
}

.prod-card__shot {
  display: block;
  aspect-ratio: 1 / 1;
  background: var(--surface-inset);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  overflow: hidden;
  padding: var(--sp-3);
}
.prod-card__shot img {
  display: block; width: 100%; height: 100%;
  object-fit: contain;
  
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.45));
  transition: transform var(--dur-slow) var(--ease-physical);
}
.prod-card:hover .prod-card__shot img { transform: scale(1.04) translateY(-2px); }
@media (prefers-reduced-motion: reduce) {
  .prod-card:hover .prod-card__shot img { transform: none; }
}
.prod-card__link:focus-visible { outline: none; }
.prod-card__cat {
  font-size: var(--fs-micro); letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase; color: var(--vertical-accent);
}
.prod-card__name {
  font-family: var(--font-display); font-weight: var(--wt-display);
  font-optical-sizing: none;
  font-size: var(--fs-body-lg); line-height: var(--lh-tight); color: var(--ink);
}
.prod-card__desc { font-size: var(--fs-sm); color: var(--ink-dim); }

.prod-card__foot {
  margin-top: auto; display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--sp-3); justify-content: space-between;
}
.prod-card__price {
  font-family: var(--font-mono); font-size: var(--fs-body);
  font-variant-numeric: tabular-nums; color: var(--metal-text);
}
.prod-card__add .btn { width: 100%; }

.product { display: grid; gap: var(--sp-7); align-items: start; }
@media (min-width: 900px) {
  .product { grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); gap: var(--sp-8); }
  
  .product__art { position: sticky; top: calc(var(--header-h) + var(--sp-6)); }
}
.product__art {
  display: grid; place-items: center;
  padding: var(--sp-6);
  background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--r-lg);
  
  color: var(--vertical-accent);
}

.product__art--photo { padding: var(--sp-5); }
.product__art--photo img {
  display: block; width: 100%; height: auto;
  max-height: 30rem; object-fit: contain;
  filter: drop-shadow(0 18px 34px rgba(0, 0, 0, 0.5));
}
.product__art svg { display: block; width: 100%; height: auto; }
[data-vertical='vapes'] .product__art svg { max-width: min(100%, 10rem); }
[data-vertical='accessories'] .product__art svg { max-width: min(100%, 20rem); }
.product__body > * + * { margin-top: var(--sp-4); }
.product__price {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4);
  font-family: var(--font-mono); font-size: var(--fs-h4);
  font-variant-numeric: tabular-nums;
}
.product__reserve { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--sp-4); }
.field--qty { max-width: 7rem; }

.basket .num { white-space: nowrap; }
.basket__qty { display: flex; align-items: center; gap: var(--sp-2); }
.input--qty { width: 4.5rem; text-align: center; }

.input--num { width: 6.5rem; text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.basket tfoot th, .basket tfoot td {
  border-bottom: none; border-top: 1px solid var(--line-strong);
  font-size: var(--fs-body);
}

.btn--link {
  --btn-bg: transparent; --btn-ink: var(--ink-dim);
  border: none; box-shadow: none; padding-inline: 0;
  text-decoration: underline; text-underline-offset: 0.2em;
}
.btn--link:hover { --btn-ink: var(--danger); transform: none; box-shadow: none; filter: none; }
.btn--link::after { display: none; }

.chip--link {
  text-decoration: none;
  transition: border-color var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard),
              background var(--dur-fast) var(--ease-standard);
}
.chip--link:hover, .chip--link:focus-visible {
  color: var(--ink); border-color: var(--accent-line); background: var(--accent-quiet);
}

.flow-tight { --measure: var(--measure-tight); }
.text-center { text-align: center; }
.nowrap { white-space: nowrap; }
.mt-0 { margin-top: 0; }
.mt-2 { margin-top: var(--sp-2); }
.mt-3 { margin-top: var(--sp-3); }
.mt-4 { margin-top: var(--sp-4); }
.mt-5 { margin-top: var(--sp-5); }
.mt-6 { margin-top: var(--sp-6); }
.mt-7 { margin-top: var(--sp-7); }
.mt-8 { margin-top: var(--sp-8); }
.flex { display: flex; gap: var(--sp-3); flex-wrap: wrap; align-items: center; }
.between { justify-content: space-between; }
.scroll-x { overflow-x: auto; }

.inline { display: inline; }

.badge--warn { color: var(--warn); }

.admin-bar {
  position: sticky; top: 0; z-index: var(--z-sticky);
  padding-block: var(--sp-3);
  background: var(--surface-1);
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-sm);
}
.admin-bar ul { list-style: none; margin: 0; padding: 0; }
.admin-bar a { color: var(--ink-2); text-decoration: none; padding: var(--sp-1) 0; }
.admin-bar a:hover { color: var(--ink); }

.admin-bar a[aria-current='page'] {
  color: var(--vertical-accent);
  border-bottom: 2px solid var(--vertical-accent);
}

.gateway { padding-block: clamp(var(--sp-8), 10vw, var(--sp-10)); }
.gateway__accent { color: var(--vertical-accent); }

.gateway__viewport { position: relative; }

.gateway__track {
  display: grid;
  gap: var(--sp-6);
  margin-top: var(--sp-8);
  padding-inline: var(--pad);
}

.counter {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-5);
  align-items: start;
  padding: var(--sp-6) 0;
  
  border-top: 1px solid var(--line);
  min-height: 20rem;
}

.counter__index {
  font-family: var(--font-display);
  font-weight: var(--wt-display);
  font-size: clamp(3.5rem, 7vw, 7rem);
  line-height: 0.8;
  color: var(--ink-faint);
  
  font-variant-numeric: tabular-nums;
}

.counter__body { max-width: 34ch; }
.counter__eyebrow { color: var(--vertical-accent); }

.counter__name {
  font-family: var(--font-display);
  font-weight: var(--wt-display);
  font-size: clamp(2rem, 4vw, 3.25rem);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  margin-top: var(--sp-2);
}

.counter__rule {
  display: block;
  width: 3.5rem;
  height: 3px;
  margin-block: var(--sp-4);
  background: var(--vertical-accent);
}

.counter__line { color: var(--ink-2); }
.counter__stat {
  margin-top: var(--sp-3);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--ink-faint);
}

.counter__art {
  grid-column: 1 / -1;
  margin-top: var(--sp-4);
  
  color: var(--vertical-accent);
  opacity: 0.85;
}

.counter__art svg {
  display: block;
  
  height: clamp(9rem, 15vw, 13rem);
  width: auto;
  max-width: min(100%, 30rem);
  margin-inline: auto;
}

@media (min-width: 64rem) {
  .counter {
    grid-template-columns: auto minmax(0, 26rem) minmax(0, 1fr);
    align-items: center;
    min-height: 26rem;
  }
  .counter__art { grid-column: auto; margin-top: 0; justify-self: end; }
  .counter__art svg {
    
    height: clamp(11rem, 15vw, 16rem);
    max-width: 26rem;
    margin-inline-start: auto;
    margin-inline-end: 0;
  }
}

@media (min-width: 64rem) {
  
  .js-on .gateway[data-gateway-active] .gateway__viewport {
    position: sticky; top: 0;
    height: 100vh; height: 100svh;
    display: flex; align-items: center;
    overflow: hidden;
    contain: paint;
  }
  .js-on .gateway[data-gateway-active] .gateway__track {
    display: flex;
    gap: clamp(var(--sp-7), 6vw, var(--sp-9));
    width: max-content;
    padding-inline: max(var(--pad), 8vw);
  }
  .js-on .gateway[data-gateway-active] .counter {
    width: min(78vw, 60rem);
    border-top: 0;
    
    padding-top: var(--sp-7);
  }
  .js-on .gateway[data-gateway-active] .counter::before {
    content: '';
    position: absolute;
    inset-inline: 0;
    top: 0;
    height: 1px;
    background: linear-gradient(90deg, var(--vertical-accent), transparent 62%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .js-on .gateway[data-gateway-active] .gateway__track { display: grid; width: auto; }
}

.scene-track--morph { height: 220vh; }

.scene-stage--morph::before,
.scene-stage--morph::after { display: none; }

.scene-stage--morph { align-items: end; }
.morph__overlay {
  max-width: min(46rem, 92vw);
  padding-bottom: clamp(3rem, 9vh, 7rem);
}

.morph__captions { display: grid; }
.morph__caption {
  grid-area: 1 / 1;
  margin: 0;
  transition: opacity 420ms var(--ease-out), transform 420ms var(--ease-out);
}

.morph__caption { opacity: 0; transform: translateY(0.5rem); }
.morph__caption:last-child { opacity: 1; transform: none; }

.morph__captions:has(.is-current) .morph__caption:last-child:not(.is-current) {
  opacity: 0; transform: translateY(0.5rem);
}
.morph__caption.is-current { opacity: 1; transform: none; }

.morph__lede { margin-top: var(--sp-5); color: var(--ink-faint); }

@media (prefers-reduced-motion: reduce) {
  .morph__caption { transition: none; }
}

@media (max-width: 47.99rem) {
  
  .scene-track--morph { height: 260vh; }
}

.odo { position: relative; display: inline-block; }
.odo__g { display: inline-block; will-change: transform, opacity; }
.odo__g--out { position: absolute; inset: 0; }

.basket-link {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  position: relative;
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--accent-line); border-radius: var(--r-pill);
  color: var(--ink-dim); text-decoration: none;
  font-size: var(--fs-sm);
  transition: color var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard);
}
.basket-link:hover,
.basket-link:focus-visible { color: var(--ink); border-color: var(--metal-3); }
.basket-link[aria-current='page'] { color: var(--vertical-accent); border-color: var(--vertical-accent); }

.basket-link__count {
  display: grid; place-items: center;
  min-width: 1.35em; padding-inline: 0.28em;
  border-radius: var(--r-pill);
  
  background: var(--surface-3);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--vertical-accent);
  font-family: var(--font-mono); font-size: var(--fs-micro); font-weight: var(--wt-bold);
  line-height: 1.5;
}

@media (max-width: 56.24rem) {
  .basket-link__label { display: none; }
  .basket-link { padding: var(--sp-2); }
}

.admin-rates td, .admin-rates th { vertical-align: top; padding-block: var(--sp-4); }
.admin-rates .check { display: flex; align-items: center; gap: var(--sp-2); white-space: nowrap; }

.admin-actions {
  position: sticky; bottom: 0; z-index: 5;
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4);
  margin-top: var(--sp-6);
  padding: var(--sp-4) var(--sp-5);
  background: color-mix(in srgb, var(--surface-1) 92%, transparent);
  backdrop-filter: blur(10px);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
}
.admin-actions__note { margin: 0; margin-left: auto; }

body:has(.devbar) .admin-actions { bottom: var(--sp-8); }

@media (prefers-reduced-motion: reduce) {
  .admin-actions { position: static; backdrop-filter: none; }
}

.admin-rates--wide { table-layout: fixed; min-width: 74rem; }
.admin-rates--wide th:nth-child(1), .admin-rates--wide td:nth-child(1) { width: auto; }

.admin-rates--wide th:nth-child(2), .admin-rates--wide td:nth-child(2) { width: 14rem; }
.admin-rates--wide th:nth-child(3), .admin-rates--wide td:nth-child(3),
.admin-rates--wide th:nth-child(4), .admin-rates--wide td:nth-child(4) { width: 6.75rem; }
.admin-rates--wide th:nth-child(5), .admin-rates--wide td:nth-child(5) { width: 10rem; }
.admin-rates--wide th:nth-child(6), .admin-rates--wide td:nth-child(6) { width: 5.75rem; }
.admin-rates--wide th:nth-child(7), .admin-rates--wide td:nth-child(7) { width: 9.5rem; }

.admin-rates--wide .select { padding-right: 2.25rem; text-overflow: ellipsis; }

.admin-rates--wide .input--num {
  width: 100%;
  
  padding-inline: var(--sp-2);
}

.admin-rates tr[data-manual] th[scope='row'] { box-shadow: inset 3px 0 0 var(--warn); }

.seo-row { border-left: 2px solid var(--line); padding-left: var(--sp-5); }
.seo-row:focus-within { border-left-color: var(--accent-line); }
.seo-row__path { margin: 0 0 var(--sp-3); font-size: var(--fs-sm); }
.seo-row__path code { font-family: var(--font-mono); color: var(--metal-text); }

.setup-link {
  display: block;
  padding: var(--sp-3);
  background: var(--surface-2);
  border: 1px solid var(--accent-line);
  border-radius: var(--r-xs);
  font-family: var(--font-mono); font-size: var(--fs-sm);
  color: var(--ink);
  word-break: break-all;
  user-select: all;
}

.scene-stage--ambient {
  position: absolute; inset: 0;
  height: auto;
  z-index: 0;
  overflow: hidden;
  border-radius: inherit;
  
  pointer-events: none;
  
  contain: paint;
}

.converter { position: relative; }
.converter > *:not(.scene-stage--ambient) { position: relative; z-index: 1; }

.notes { list-style: none; margin: 0; padding: 0; }
.notes__item + .notes__item { margin-top: var(--sp-6); padding-top: var(--sp-6); border-top: 1px solid var(--line); }
.notes--compact .notes__item + .notes__item { margin-top: var(--sp-4); padding-top: var(--sp-4); }
.notes__meta { margin: 0; font-size: var(--fs-sm); color: var(--ink-dim); }
.notes__link { color: inherit; text-decoration: none; }
.notes__link:hover, .notes__link:focus-visible { color: var(--vertical-accent); text-decoration: underline; text-underline-offset: 0.14em; }

.media-grid { display: grid; gap: var(--sp-5); grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); }
.media-card { margin: 0; border: 1px solid var(--line); border-radius: var(--r-xs); overflow: hidden; background: var(--surface-1); }

.media-card__img { display: block; width: 100%; height: 9rem; object-fit: cover; background: var(--surface-2); }
.media-card__meta { display: grid; gap: var(--sp-1); padding: var(--sp-3); }

.atmos {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  contain: strict;
}

.masthead,
main,
.footer,
.devbar { position: relative; z-index: 1; }

.atmos__orb {
  position: absolute;
  border-radius: 50%;
  will-change: transform;
  
  transform: translate3d(0, 0, 0);
}

.atmos__orb--a {
  width: 62vmax; height: 62vmax; top: -22vmax; right: -14vmax;
  background: radial-gradient(circle at 50% 50%,
    color-mix(in srgb, var(--vertical-accent) 30%, transparent) 0%,
    color-mix(in srgb, var(--vertical-accent) 10%, transparent) 45%,
    transparent 72%);
  filter: blur(6vmax);
  opacity: 0.5;
}

.atmos__orb--b {
  width: 48vmax; height: 48vmax; bottom: -16vmax; left: -12vmax;
  background: radial-gradient(circle at 50% 50%,
    color-mix(in srgb, var(--metal-3) 26%, transparent) 0%,
    color-mix(in srgb, var(--metal-3) 8%, transparent) 48%,
    transparent 74%);
  filter: blur(7vmax);
  opacity: 0.42;
}

.atmos__orb--c {
  width: 40vmax; height: 40vmax; top: 38%; left: 46%;
  background: radial-gradient(circle at 50% 50%,
    color-mix(in srgb, var(--vertical-accent) 18%, transparent) 0%,
    transparent 66%);
  filter: blur(8vmax);
  opacity: 0.3;
}

.atmos__grain {
  position: absolute;
  inset: -50%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.42'/%3E%3C/svg%3E");
  opacity: 0.055;
}

[data-theme='light'] .atmos__grain { opacity: 0.035; }
[data-theme='light'] .atmos__orb--a { opacity: 0.34; }
[data-theme='light'] .atmos__orb--b { opacity: 0.3; }
[data-theme='light'] .atmos__orb--c { opacity: 0.2; }

@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .atmos__orb { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .atmos__orb { transform: none !important; transition: none; }
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .surface,
  .card,
  .prod-card,
  .cat-card,
  .board {
    background: color-mix(in srgb, var(--surface-1) 78%, transparent);
    -webkit-backdrop-filter: blur(14px) saturate(1.2);
    backdrop-filter: blur(14px) saturate(1.2);
  }

  .surface,
  .card,
  .prod-card,
  .cat-card {
    box-shadow:
      inset 0 1px 0 color-mix(in srgb, var(--metal-5) 22%, transparent),
      var(--shadow-sm, 0 1px 2px rgb(0 0 0 / 0.16));
  }

  .board { background: color-mix(in srgb, var(--surface-1) 88%, transparent); }
}

.tilt {
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  --sheen: 0;
  transition: transform var(--dur-slow) var(--ease-physical);
  position: relative;
  
}

.tilt,
.js-on .js-reveal[data-revealed].tilt,
.js-on .js-reveal-line[data-revealed].tilt {
  transform: perspective(900px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
}

.tilt[data-tilting] { transition: none; }

.tilt::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: var(--sheen);
  transition: opacity var(--dur-slow) var(--ease-standard);
  background: radial-gradient(
    36% 46% at var(--sheen-x, 50%) var(--sheen-y, 0%),
    color-mix(in srgb, var(--metal-5) 34%, transparent),
    transparent 70%
  );
}

@media (prefers-reduced-motion: reduce) {
  .tilt { transform: none; transition: none; }
  .tilt::after { display: none; }
}

[data-site='vapes'] {
  
  --neon: color-mix(in srgb, var(--vertical-accent) 72%, transparent);
  --neon-soft: color-mix(in srgb, var(--vertical-accent) 26%, transparent);
}

[data-site='vapes'][data-theme='dark'] .eyebrow,
[data-site='vapes']:not([data-theme='light']) .eyebrow {
  text-shadow: 0 0 18px var(--neon-soft);
}

[data-site='vapes'][data-theme='dark'] .hero::after,
[data-site='vapes']:not([data-theme='light']) .hero::after {
  box-shadow: 0 0 22px 2px var(--neon-soft);
  opacity: 0.85;
}

[data-site='vapes'][data-theme='dark'] .card--link:hover,
[data-site='vapes'][data-theme='dark'] .prod-card:hover,
[data-site='vapes'][data-theme='dark'] .cat-card:hover,
[data-site='vapes']:not([data-theme='light']) .card--link:hover,
[data-site='vapes']:not([data-theme='light']) .prod-card:hover,
[data-site='vapes']:not([data-theme='light']) .cat-card:hover {
  border-color: var(--neon);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--metal-5) 22%, transparent),
    0 0 0 1px var(--neon-soft),
    0 14px 46px -12px var(--neon-soft);
}

[data-site='vapes'][data-theme='dark'] .atmos__orb--a,
[data-site='vapes']:not([data-theme='light']) .atmos__orb--a { opacity: 0.62; }
[data-site='vapes'][data-theme='dark'] .atmos__orb--c,
[data-site='vapes']:not([data-theme='light']) .atmos__orb--c { opacity: 0.44; }

.scene-track--devices { position: relative; }

.scene-stage--devices {
  min-height: min(78vh, 40rem);
  display: grid;
  align-content: end;
  padding-block-end: var(--sp-8);
}

.scene-stage__copy { position: relative; z-index: 1; text-align: center; }

.devices-caption {
  margin-top: var(--sp-2);
  min-height: 1.15em;
  color: var(--metal-text-strong);
  transition: opacity var(--dur-slow) var(--ease-standard);
}

@media (prefers-reduced-motion: reduce) {
  .devices-caption { transition: none; }
}

.scene-stage--devices {
  border-radius: var(--r-lg, 1.25rem);
  overflow: hidden;
  background:
    radial-gradient(72% 60% at 50% 42%,
      color-mix(in srgb, var(--vertical-accent) 12%, transparent),
      transparent 68%),
    
    linear-gradient(180deg, #171f34 0%, #0b1120 100%);
}

.scene-stage--devices .devices-caption { color: #eff3fb; }
.scene-stage--devices .eyebrow { color: color-mix(in srgb, var(--vertical-accent) 72%, #ffffff); }

@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .scene-stage--devices { background: #121a2c; }
  .scene-stage--devices .eyebrow { color: #c3cde4; }
}

.scene-stage--devices::after {
  background: linear-gradient(180deg, transparent 52%, rgba(9, 10, 12, 0.72) 82%, rgba(9, 10, 12, 0.92) 100%);
}

.scene-stage--devices::before {
  background: radial-gradient(46% 42% at 50% 40%,
    color-mix(in srgb, var(--vertical-accent) 16%, transparent), transparent 72%);
}

@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .scene-stage--devices::before { background: none; }
}

:root[data-theme='light'] .scene-stage--devices::after {
  
  background: linear-gradient(180deg, transparent 52%, rgba(9, 10, 12, 0.72) 82%, rgba(9, 10, 12, 0.92) 100%);
}

.scene-stage--devices .scene-stage__copy { z-index: 3; }

@view-transition { navigation: auto; }

.masthead { view-transition-name: masthead; }
.footer { view-transition-name: site-footer; }

::view-transition-old(root) {
  animation: vt-out var(--dur-base) var(--ease-exit) both;
}
::view-transition-new(root) {
  animation: vt-in var(--dur-slow) var(--ease-physical) both;
}

@keyframes vt-out {
  to { opacity: 0; transform: translateY(-8px); }
}
@keyframes vt-in {
  from { opacity: 0; transform: translateY(12px); }
}

::view-transition-old(masthead),
::view-transition-new(masthead),
::view-transition-old(site-footer),
::view-transition-new(site-footer) {
  animation: none;
  mix-blend-mode: normal;
}

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none; }
}

.prod-photo-cell { display: flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-2); }
.prod-photo-cell__thumb {
  
  width: 34px; height: 34px; object-fit: contain;
  background: var(--surface-inset); border: 1px solid var(--line); border-radius: var(--r-xs);
  padding: 2px;
}

.admin-shot {
  margin: 0; padding: var(--sp-5);
  background: var(--surface-inset); border: 1px solid var(--line); border-radius: var(--r-md);
}
.admin-shot img { display: block; width: 100%; height: auto; max-height: 22rem; object-fit: contain; }

.counter__art--photo {
  display: grid; place-items: center;
  perspective: 900px;
}
.counter__art--photo img {
  display: block;
  
  height: clamp(8rem, 16vh, 13rem);
  width: auto; max-width: 100%;
  object-fit: contain;
  filter: drop-shadow(0 16px 28px rgba(0, 0, 0, 0.45));
  transform: translateZ(0);
}

.prod-card.tilt::after,
.cat-card.tilt::after { display: none; }

.product__gallery { display: block; }

.product__shot {
  position: relative;
  display: grid; place-items: center;
  width: 100%;
  font: inherit; color: inherit; text-align: inherit;
  cursor: zoom-in;
  overflow: hidden;
}
.product__shot img { transition: transform var(--dur-slow) var(--ease-physical); }
.product__shot:hover img { transform: scale(1.03); }

.product__zoom {
  position: absolute; right: var(--sp-4); bottom: var(--sp-4);
  display: grid; place-items: center;
  width: 2.4rem; height: 2.4rem;
  border-radius: var(--r-full);
  background: color-mix(in srgb, var(--surface-3) 82%, transparent);
  border: 1px solid var(--line-strong);
  color: var(--ink);
  opacity: 0; transform: translateY(6px);
  transition: opacity var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-physical);
}
.product__shot:hover .product__zoom,
.product__shot:focus-visible .product__zoom { opacity: 1; transform: translateY(0); }

.product__thumbs {
  display: flex; flex-wrap: wrap; gap: var(--sp-3);
  margin-top: var(--sp-4); padding: 0; list-style: none;
}
.product__thumb {
  display: block; width: 4.5rem; height: 4.5rem; padding: var(--sp-2);
  background: var(--surface-inset);
  border: 1px solid var(--line); border-radius: var(--r-sm);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-standard);
}
.product__thumb img { width: 100%; height: 100%; object-fit: contain; }
.product__thumb:hover { transform: translateY(-2px); border-color: var(--line-strong); }
.product__thumb.is-current { border-color: var(--vertical-accent); }

.viewer {
  width: min(96vw, 1100px);
  max-width: none;
  max-height: 92vh;
  padding: var(--sp-5);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface-1);
  color: var(--ink);
  overflow: visible;

  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--sp-4);

  opacity: 0;
  transform: scale(0.97) translateY(8px);
  transition: opacity var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-physical);
}
.viewer[data-open] { opacity: 1; transform: none; }
.viewer::backdrop {
  background: var(--scrim);
  backdrop-filter: blur(6px);
}

.viewer__frame { grid-column: 2; margin: 0; text-align: center; }
.viewer__img {
  display: block;
  max-width: 100%; max-height: 74vh;
  margin: 0 auto;
  object-fit: contain;
  filter: drop-shadow(0 24px 48px rgba(0, 0, 0, 0.5));
  
  cursor: zoom-out;
}
.viewer__caption { margin-top: var(--sp-4); font-size: var(--fs-sm); color: var(--ink-dim); }
.viewer__count {
  grid-column: 1 / -1; margin: 0; text-align: center;
  font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--ink-faint);
}

.viewer__nav, .viewer__close {
  display: grid; place-items: center;
  width: 2.75rem; height: 2.75rem;              
  border-radius: var(--r-full);
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--ink);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard),
              transform var(--dur-fast) var(--ease-physical);
}
.viewer__nav:hover, .viewer__close:hover {
  background: var(--surface-3); border-color: var(--line-strong); transform: scale(1.06);
}
.viewer__nav--prev { grid-column: 1; }
.viewer__nav--next { grid-column: 3; }
.viewer__close { position: absolute; top: calc(var(--sp-5) * -1 - 1.4rem); right: 0; }

@media (max-width: 40rem) {
  
  .viewer { grid-template-columns: 1fr 1fr; padding: var(--sp-4); }
  .viewer__frame { grid-column: 1 / -1; }
  .viewer__nav--prev { grid-column: 1; justify-self: start; }
  .viewer__nav--next { grid-column: 2; justify-self: end; }
  .viewer__close { top: calc(var(--sp-4) * -1 - 1.2rem); }
}

@media (prefers-reduced-motion: reduce) {
  .viewer { transition: none; }
  .product__shot:hover img { transform: none; }
  .product__thumb:hover { transform: none; }
}

.basket__checkout { display: flex; flex-direction: column; align-items: flex-start; }

.checkout { display: grid; gap: var(--sp-7); align-items: start; }
@media (min-width: 62rem) { .checkout { grid-template-columns: 1fr 22rem; } }

.checkout__block { border: 0; padding: 0; margin: 0 0 var(--sp-7); }
.checkout__block legend { padding: 0; margin-bottom: var(--sp-4); }

.choice {
  display: flex; gap: var(--sp-4); align-items: flex-start;
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface-1);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-standard),
              background var(--dur-fast) var(--ease-standard),
              transform var(--dur-fast) var(--ease-physical);
}
.choice + .choice { margin-top: var(--sp-3); }
.choice:hover { border-color: var(--line-strong); transform: translateY(-1px); }
.choice.is-on { border-color: var(--vertical-accent); background: var(--surface-2); }

.choice.is-blocked { opacity: 0.72; cursor: not-allowed; }
.choice__body { display: grid; gap: var(--sp-1); }
.choice__title { font-weight: var(--wt-semibold); color: var(--ink); }
.choice__fee { margin-left: var(--sp-2); font-family: var(--font-mono); color: var(--metal-text); }
.choice__note { font-size: var(--fs-sm); color: var(--ink-dim); }

.checkout__summary {
  padding: var(--sp-5);
  background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--r-lg);
}
@media (min-width: 62rem) {
  
  .checkout__summary { position: sticky; top: calc(var(--header-h) + var(--sp-5)); }
}
.checkout__lines { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-3); }
.checkout__lines li { display: grid; grid-template-columns: 2rem 1fr auto; gap: var(--sp-2); align-items: baseline; }
.checkout__qty { font-family: var(--font-mono); color: var(--ink-faint); font-size: var(--fs-sm); }
.checkout__name { font-size: var(--fs-sm); color: var(--ink-2); }
.checkout__money { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--ink); }
.checkout__totals { margin: 0; display: grid; gap: var(--sp-2); }
.checkout__totals > div { display: flex; justify-content: space-between; gap: var(--sp-4); }
.checkout__totals dt { color: var(--ink-dim); font-size: var(--fs-sm); }
.checkout__totals dd { margin: 0; font-family: var(--font-mono); }
.checkout__grand {
  padding-top: var(--sp-3); margin-top: var(--sp-2);
  border-top: 1px solid var(--line);
}
.checkout__grand dt { color: var(--ink); font-weight: var(--wt-semibold); font-size: var(--fs-body); }
.checkout__grand dd { color: var(--metal-text); font-size: var(--fs-body-lg); }
.checkout__promises { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-2); }
.checkout__promises li { font-size: var(--fs-xs); color: var(--ink-faint); }

.order__head { display: flex; flex-wrap: wrap; gap: var(--sp-5); align-items: flex-end; justify-content: space-between; }
.order__number { font-family: var(--font-mono); font-size: var(--fs-h1); letter-spacing: 0.04em; }
.order__grid { display: grid; gap: var(--sp-7); }
@media (min-width: 62rem) { .order__grid { grid-template-columns: 1fr 20rem; } }
.order__total th, .order__total td { border-top: 1px solid var(--line-strong); font-weight: var(--wt-semibold); }
.order__aside { padding: var(--sp-5); background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--r-lg); }
.order__whatsapp { width: 100%; }
.order__event { display: grid; grid-template-columns: 8rem 1fr; gap: var(--sp-2) var(--sp-4); padding: var(--sp-3) 0; border-bottom: 1px solid var(--line); }
.order__event-when { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--ink-faint); }
.order__event-note { grid-column: 2; font-size: var(--fs-sm); color: var(--ink-dim); }

.track { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-4); }
@media (min-width: 48rem) {
  .track { grid-auto-flow: column; grid-auto-columns: 1fr; gap: 0; }
}
.track__step {
  position: relative; display: flex; align-items: center; gap: var(--sp-3);
  padding-left: var(--sp-2);
  color: var(--ink-faint);
}
@media (min-width: 48rem) {
  .track__step { flex-direction: column; text-align: center; padding: 0 var(--sp-2); gap: var(--sp-2); }
  
  .track__step:not(:last-child)::after {
    content: ''; position: absolute; top: 0.55rem; left: 50%; width: 100%;
    height: 2px; background: var(--line);
  }
  .track__step.is-done:not(:last-child)::after { background: var(--vertical-accent); }
}
.track__dot {
  position: relative; z-index: 1;
  width: 1.1rem; height: 1.1rem; flex: 0 0 auto;
  border-radius: var(--r-full);
  border: 2px solid var(--line-strong); background: var(--bg);
}
.track__step.is-done .track__dot { background: var(--vertical-accent); border-color: var(--vertical-accent); }
.track__step.is-now .track__dot {
  border-color: var(--vertical-accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--vertical-accent) 22%, transparent);
}
.track__step.is-done, .track__step.is-now { color: var(--ink); }
.track__label { font-size: var(--fs-sm); font-weight: var(--wt-medium); }
.track__now {
  font-size: var(--fs-micro); letter-spacing: var(--ls-eyebrow); text-transform: uppercase;
  color: var(--vertical-accent);
}

@media (prefers-reduced-motion: reduce) {
  .choice:hover { transform: none; }
}

@media print {
  .masthead, .footer, .atmos, .scene-track, .track, .order__print,
  .order__whatsapp, .breadcrumb, .announce, .mobilenav, .theme-toggle { display: none !important; }
  body { background: #fff !important; color: #000 !important; }
  .order__aside, .surface, .rate-table { border-color: #999 !important; background: #fff !important; }
  .order__number { color: #000 !important; }
  a[href]::after { content: ''; }
}

.checkout__main { min-width: 0; }
.order__receipt { min-width: 0; }
.order__history ul { list-style: none; padding: 0; margin: 0; }
.order__event-what { font-weight: var(--wt-medium); color: var(--ink); }

.orders { display: grid; gap: var(--sp-5); align-items: start; }
@media (min-width: 68rem) { .orders { grid-template-columns: minmax(0, 1fr) 26rem; } }

.orders__list { display: grid; gap: var(--sp-2); }
.orders__row {
  display: grid; gap: var(--sp-1) var(--sp-4); align-items: baseline;
  grid-template-columns: 8rem 1fr auto;
  padding: var(--sp-4);
  background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--r-md);
  text-decoration: none; color: inherit;
  transition: border-color var(--dur-fast) var(--ease-standard), background var(--dur-fast) var(--ease-standard);
}
.orders__row:hover { background: var(--surface-2); border-color: var(--line-strong); }
.orders__row.is-open { border-color: var(--vertical-accent); background: var(--surface-2); }
.orders__num { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--metal-text); }
.orders__who { font-weight: var(--wt-medium); color: var(--ink); }
.orders__meta { grid-column: 2; font-size: var(--fs-xs); color: var(--ink-faint); }
.orders__when { font-size: var(--fs-xs); color: var(--ink-faint); text-align: right; }
.orders__status { grid-column: 3; justify-self: end; }
.orders__detail {
  padding: var(--sp-5);
  background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--r-lg);
}
@media (min-width: 68rem) {
  .orders__detail { position: sticky; top: calc(var(--header-h) + var(--sp-4)); max-height: 82vh; overflow-y: auto; }
}
.orders__who-block p { margin: 0 0 var(--sp-1); }
.orders__wa { border-top: 1px solid var(--line); padding-top: var(--sp-5); }

.badge--placed { color: var(--vertical-accent); border-color: var(--accent-line); }
.badge--confirmed, .badge--preparing { color: var(--info); border-color: currentColor; }
.badge--ready, .badge--out_for_delivery { color: var(--warn); border-color: currentColor; }
.badge--completed { color: var(--ok); border-color: currentColor; }
.badge--cancelled { color: var(--ink-faint); border-color: var(--line); }

.toast {
  position: fixed;
  left: 50%; bottom: var(--sp-5);
  z-index: var(--z-toast);
  display: flex; align-items: center; gap: var(--sp-4);
  max-width: min(92vw, 30rem);
  padding: var(--sp-4) var(--sp-5);
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-full);
  box-shadow: var(--shadow-lg);
  color: var(--ink);
  font-size: var(--fs-sm);

  transform: translateX(-50%) translateY(1.25rem);
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-standard),
              transform var(--dur-base) var(--ease-physical);
}
.toast[data-shown] { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast[data-leaving] { opacity: 0; transform: translateX(-50%) translateY(0.75rem); }

.toast--notice { border-left: 3px solid var(--vertical-accent); }
.toast--warn { border-left: 3px solid var(--warn); }

.toast__body { flex: 1 1 auto; }
.toast__go {
  flex: 0 0 auto;
  color: var(--vertical-accent); text-decoration: none;
  font-weight: var(--wt-semibold); white-space: nowrap;
}
.toast__go:hover { text-decoration: underline; }
.toast__close {
  flex: 0 0 auto;
  display: grid; place-items: center;
  width: 1.9rem; height: 1.9rem;
  border-radius: var(--r-full);
  color: var(--ink-dim); cursor: pointer;
  transition: background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);
}
.toast__close:hover { background: var(--surface-3); color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  .toast { transition: opacity 1ms linear; transform: translateX(-50%); }
  .toast[data-shown], .toast[data-leaving] { transform: translateX(-50%); }
}
@media print { .toast { display: none !important; } }

.product__gallery { display: flex; flex-direction: column; gap: var(--sp-4); }
.product__shot { position: static; }
@media (min-width: 62rem) {
  .product__gallery { position: sticky; top: calc(var(--header-h) + var(--sp-6)); }
}

.product__thumbs { margin-top: 0; }

.section { padding-block: clamp(var(--sp-6), 5.5vw, var(--sp-9)); }
.section--tight { padding-block: var(--sp-6); }

.gateway { padding-block: clamp(var(--sp-7), 6vw, var(--sp-9)); }
.gateway__track { margin-top: var(--sp-6); }

@media (min-width: 48rem) {
  
  .js-on .gateway[data-gateway-active] .gateway__viewport { height: min(100svh, 38rem); }
  .hscroll[data-hscroll-active] .hscroll__viewport { height: min(100svh, 34rem); }
}

.hscroll__intro { margin-bottom: var(--sp-6); }

.cat-card:has(.cat-card__shot) {
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "shot name go" "shot count go";
  align-items: center;
}
.cat-card:has(.cat-card__shot) .cat-card__shot { grid-area: shot; }
.cat-card:has(.cat-card__shot) .cat-card__name {
  grid-area: name; align-self: end;
  
  text-wrap: balance;
}
.cat-card:has(.cat-card__shot) .cat-card__count { grid-area: count; align-self: start; }
.cat-card:has(.cat-card__shot) .cat-card__go { grid-area: go; }
.cat-card__shot {
  display: grid; place-items: center;
  width: 3.5rem; height: 3.5rem; padding: var(--sp-2);
  background: var(--surface-inset);
  border: 1px solid var(--line); border-radius: var(--r-sm);
  overflow: hidden;
}
.cat-card__shot img {
  width: 100%; height: 100%; object-fit: contain;
  transition: transform var(--dur-slow) var(--ease-physical);
}
.cat-card:hover .cat-card__shot img { transform: scale(1.08); }

@supports not selector(:has(*)) {
  
  .cat-card { grid-template-columns: auto 1fr auto; }
}
@media (prefers-reduced-motion: reduce) {
  .cat-card:hover .cat-card__shot img { transform: none; }
}

.footer__top {
  display: grid; gap: var(--sp-6);
  padding-block: var(--sp-7) var(--sp-6);
  border-bottom: 1px solid var(--line);
}
@media (min-width: 60rem) {
  .footer__top { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
}
.footer__brand { display: flex; gap: var(--sp-4); align-items: center; }
.footer__mark {
  display: grid; place-items: center;
  width: 2.75rem; height: 2.75rem; flex: 0 0 auto;
  border: 1px solid var(--accent-line); border-radius: var(--r-sm);
  color: var(--metal-text);
}
.footer__mark svg { width: 1.6rem; height: 1.6rem; }
.footer__tag { margin: var(--sp-1) 0 0; font-size: var(--fs-sm); color: var(--ink-dim); max-width: var(--measure); }

.footer__counters { display: grid; gap: var(--sp-3); }
@media (min-width: 40rem) { .footer__counters { grid-auto-flow: column; grid-auto-columns: 1fr; } }
.footer__counter {
  display: grid; gap: 2px;
  padding: var(--sp-3) var(--sp-4);
  min-width: 11rem;
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface-1);
  text-decoration: none; color: inherit;
  transition: border-color var(--dur-fast) var(--ease-standard),
              background var(--dur-fast) var(--ease-standard),
              transform var(--dur-fast) var(--ease-physical);
}
.footer__counter:hover {
  border-color: var(--vertical-accent); background: var(--surface-2);
  transform: translateY(var(--lift-hover));
}
.footer__counter-name { font-weight: var(--wt-semibold); color: var(--ink); font-size: var(--fs-sm); }
.footer__counter-note { font-size: var(--fs-micro); color: var(--vertical-accent); }

.footer__visit { display: grid; gap: var(--sp-3); align-content: start; }
.footer__heading--sub { margin-top: var(--sp-3); }
.footer__address { display: flex; gap: var(--sp-2); align-items: flex-start; margin: 0; font-size: var(--fs-sm); }
.footer__hours { list-style: none; padding: 0; margin: 0; display: grid; gap: 2px; }
.footer__hours li {
  font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--ink-2);
  
  font-variant-numeric: tabular-nums;
}
.footer__contact { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-2); }
.footer__pill {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  min-height: 2.75rem;                       
  border: 1px solid var(--accent-line); border-radius: var(--r-full);
  background: var(--surface-1);
  color: var(--ink); text-decoration: none;
  font-size: var(--fs-sm);
  transition: background var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard);
}
.footer__pill:hover { background: var(--surface-2); border-color: var(--line-strong); }

.footer__legal {
  padding-block: var(--sp-5);
  border-top: 1px solid var(--line);
  display: grid; gap: var(--sp-2);
}
.footer__legal p { margin: 0; max-width: 62rem; }

@media (prefers-reduced-motion: reduce) {
  .footer__counter:hover { transform: none; }
}

.brand__mark--logo { border: 0; padding: 0; background: none; }
.brand__logo { display: block; width: 2.1rem; height: 2.1rem; border-radius: var(--r-sm); }
.footer__mark { border: 0; padding: 0; width: auto; height: auto; }
.footer__mark .brand__logo { width: 2.75rem; height: 2.75rem; }

.split { align-items: start; }
@media (min-width: 60rem) { .split { align-items: start; } }

.section--after-stage { padding-block-start: clamp(var(--sp-5), 4.4vw, var(--sp-8)); }

.footer__grid {
  display: flex; flex-wrap: wrap; gap: var(--sp-7) var(--sp-6);
  padding-block: var(--sp-8) var(--sp-7);
  align-items: flex-start;
}
.footer__identity { flex: 1 1 20rem; max-width: 30rem; }
.footer__grid .footer__links { flex: 1 1 9rem; }
.footer__contact-col { flex: 1 1 15rem; }

.footer__identity { display: grid; gap: var(--sp-4); align-content: start; }
.footer__logo {
  display: inline-flex; align-items: center; gap: var(--sp-3);
  text-decoration: none; color: inherit;
}
.footer__logo img { width: 3.25rem; height: 3.25rem; border-radius: var(--r-sm); display: block; }
.footer__biz { display: block; font-weight: var(--wt-semibold); color: var(--ink); }
.footer__biz-sub {
  display: block; margin-top: 2px;
  font-size: var(--fs-micro); letter-spacing: var(--ls-eyebrow); text-transform: uppercase;
  color: var(--metal-text);
  
  white-space: nowrap;
}
.footer__promise {
  margin: 0; font-size: var(--fs-body-lg); line-height: var(--lh-heading); color: var(--ink);
  font-family: var(--font-display); font-weight: var(--wt-display); font-optical-sizing: none;
  max-width: 22rem;
}

.footer__counters { display: grid; gap: var(--sp-2); }
@media (min-width: 52rem) and (max-width: 75.99rem) {
  .footer__counters { grid-auto-flow: column; grid-auto-columns: 1fr; }
}

.footer__facts { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-3); }
.footer__facts li { display: grid; grid-template-columns: 1.25rem 1fr; gap: var(--sp-3); align-items: start; }
.footer__facts .icon { color: var(--metal-text); margin-top: 0.15rem; }
.footer__facts a { color: var(--ink-2); text-decoration: none; }
.footer__facts a:hover { color: var(--ink); text-decoration: underline; }
.footer__contact-col { display: grid; gap: var(--sp-4); align-content: start; }
.footer__cta { justify-self: start; }

.footer__grid { gap: var(--sp-6) var(--sp-5); }
.footer__identity { flex: 1 1 17rem; }
.footer__grid .footer__links { flex: 1 1 8rem; }
.footer__contact-col { flex: 0 1 16rem; max-width: 22rem; justify-items: start; }

.footer__contact-col .footer__pill,
.footer__contact-col .footer__cta { justify-self: start; width: auto; }

.footer__fine { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); }
.footer__fine a {
  font-size: var(--fs-xs); color: var(--ink-faint); text-decoration: none;
}
.footer__fine a:hover { color: var(--ink-2); text-decoration: underline; }
.footer__fine a + a::before {
  content: '·'; margin-right: var(--sp-4); color: var(--line-strong);
}
@media (min-width: 60rem) {
  
  .footer__base { display: grid; grid-template-columns: 1fr auto; gap: var(--sp-3) var(--sp-6); align-items: end; }
  .footer__fine { grid-column: 2; grid-row: 1 / span 2; align-self: end; justify-content: flex-end; }
}

.footer__grid .footer__links { flex: 0 1 auto; min-width: 7rem; }
.footer__identity { flex: 1 1 15rem; max-width: 26rem; }
.footer__contact-col { flex: 1 1 14rem; }

@media (min-width: 76rem) {
  .footer__identity .footer__counters { grid-auto-flow: row; grid-auto-columns: auto; }
}