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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;

  scroll-padding-top: calc(var(--nav-height) + 24px);
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--color-ink);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img,
svg,
video { display: block; max-width: 100%; }

button,
input,
select,
textarea { font: inherit; color: inherit; }

a { color: inherit; }

:root {

  --color-black:      #000000;
  --color-ink:        #0a0a0b;
  --color-ink-soft:   #6e6e73;
  --color-line:       #e3e3e8;
  --color-line-firm:  #c9c9d0;
  --color-bg:         #ffffff;
  --color-bg-soft:    #ffffff;
  --color-bg-dark:    #000000;
  --color-on-dark:    #f5f5f7;
  --color-on-dark-soft: #9a9aa1;
  --color-accent:     #0a0a0b;

  --surface:          #ffffff;
  --surface-dark:     #000000;

  --surface-pass:     #004a27;
  --on-pass-soft:     rgba(255,255,255,.72);

  --surface-card:      linear-gradient(160deg, #00843F 0%, #006b34 100%);
  --on-card-soft:      #ffffff;
  --on-card-accent:    #ffffff;

  --inset-dark:       rgba(255,255,255,.055);
  --inset-dark-hover: rgba(255,255,255,.10);
  --inset-light:      #ffffff;

  --green-ink:        #00843F;
  --green-deep:       #006b34;
  --green-bright:     #00ad54;
  --green-soft:       #50e297;
  --green-line:       rgba(0,132,63,.38);
  --green-line-2:     rgba(80,226,151,.42);

  --green-line-soft:   rgba(0,132,63,.20);
  --green-line-soft-2: rgba(80,226,151,.22);

  --color-brand:      var(--green-bright);

  --map-home:         #f57305;

  --logo-height:        26px;
  --logo-height-footer: 46px;

  --font-body: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI",
               "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display",
               "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --text-base:  17px;
  --text-small: 14px;
  --text-micro: 12px;

  --text-hero:  clamp(2.6rem, 6.2vw, 4.6rem);
  --text-h1:    clamp(2.1rem, 4.6vw, 3.4rem);
  --text-h2:    clamp(1.5rem, 3vw, 2.25rem);
  --text-h3:    clamp(1.2rem, 2vw, 1.5rem);
  --text-lead:  clamp(1.05rem, 1.6vw, 1.3rem);

  --container-width: 1120px;
  --container-pad:   24px;
  --nav-height:      54px;
  --section-space:   clamp(64px, 9vw, 120px);

  --radius-card:  22px;
  --radius-large: 30px;
  --radius-pill:  980px;
  --radius-tile:  26px;

  --tile-gap:      12px;
  --tile-min:      340px;
  --tile-max:      460px;
  --tile-row:      1400px;
  --tile-height:       clamp(350px, 27vw, 410px);
  --tile-height-small: 390px;
  --tile-media-inset:  22px;
  --tile-media-min:    120px;
  --tile-media-pad:    16px;

  --ease-out: cubic-bezier(0.16, 1, 0.30, 1);
  --speed-fast:   0.25s;
  --speed-medium: 0.45s;
  --speed-slow:   0.75s;

  --shadow-card:  0 1px 2px rgba(0,0,0,.04), 0 6px 18px rgba(0,0,0,.05);
  --shadow-hover: 0 2px 6px rgba(0,0,0,.06), 0 22px 48px rgba(0,0,0,.14);

  --shadow-lift:  0 3px 8px rgba(0,0,0,.07), 0 26px 56px rgba(0,0,0,.16);
  --shadow-green: var(--shadow-lift);

  --depth-on-white:
    drop-shadow(1px 1px 0 #9d9da3)
    drop-shadow(1px 1px 0 #a8a8ae)
    drop-shadow(1px 1px 0 #b4b4b9)
    drop-shadow(1px 1px 0 #c0c0c4)
    drop-shadow(1px 1px 0 #cbcbd0)
    drop-shadow(1px 1px 0 #d6d6db)
    drop-shadow(1px 1px 0 #e2e2e6);
  --depth-on-black:
    drop-shadow(1px 1px 0 #5a5a5e)
    drop-shadow(1px 1px 0 #525256)
    drop-shadow(1px 1px 0 #4a4a4d)
    drop-shadow(1px 1px 0 #424245)
    drop-shadow(1px 1px 0 #3a3a3d)
    drop-shadow(1px 1px 0 #323234)
    drop-shadow(1px 1px 0 #2a2a2c);
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.022em;
  line-height: 1.1;
  margin: 0 0 0.5em;
}

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

.t-hero  { font-family: var(--font-display); font-size: var(--text-hero); font-weight: 700; letter-spacing: -0.035em; line-height: 1.04; margin: 0; }
.t-h1    { font-size: var(--text-h1); }
.t-h2    { font-size: var(--text-h2); }
.t-h3    { font-size: var(--text-h3); }

.t-lead {
  font-size: var(--text-lead);
  line-height: 1.5;
  color: var(--color-ink-soft);
  font-weight: 400;
  letter-spacing: -0.01em;
}

.t-eyebrow {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green-ink);
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;
  margin: 0 0 14px;
}

.t-small { font-size: var(--text-small); color: var(--color-ink-soft); }

.section--dark .t-lead,
.section--dark .t-small { color: var(--color-on-dark-soft); }

.section--dark .t-eyebrow { color: var(--green-soft); }

.container {
  width: 100%;
  max-width: var(--container-width);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}
.container--narrow { max-width: 760px; }

.section { padding-block: var(--section-space); }
.section--tight { padding-block: clamp(40px, 5vw, 64px); }
.section--soft  {

  background: var(--surface);
  border-top: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
}
.section--dark  { background: var(--color-bg-dark); color: var(--color-on-dark); }
.section--dark h1, .section--dark h2, .section--dark h3 { color: #fff; }

.section__head { max-width: 720px; margin-bottom: clamp(32px, 4vw, 56px); }
.section__head--center { margin-inline: auto; text-align: center; }

.grid {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(auto-fit, minmax(var(--grid-min, 300px), 1fr));
}
.grid--2 { --grid-min: 420px; }
.grid--3 { --grid-min: 300px; }
.grid--4 { --grid-min: 230px; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-size: var(--text-small);
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: transform var(--speed-fast) var(--ease-out),
              background-color var(--speed-fast) var(--ease-out),
              color var(--speed-fast) var(--ease-out),
              border-color var(--speed-fast) var(--ease-out);
}
.btn:hover  { transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(0.985); }

.btn--primary { background: var(--color-accent); color: #fff; }
.btn--primary:hover { background: var(--green-ink); }
.btn--primary:active { background: var(--green-deep); }

.btn--ghost { background: transparent; color: var(--color-ink); border-color: var(--color-line); }
.btn--ghost:hover { border-color: var(--green-ink); color: var(--green-ink); }

.btn--green { background: var(--green-ink); color: #fff; }
.btn--green:hover { background: var(--green-deep); }

.section--dark .btn--primary { background: #fff; color: #000; }
.section--dark .btn--primary:hover { background: var(--green-soft); color: #04220a; }
.section--dark .btn--ghost { color: #fff; border-color: rgba(255,255,255,.35); }
.section--dark .btn--ghost:hover { border-color: var(--green-soft); color: var(--green-soft); }

.btn--small { padding: 9px 18px; font-size: 13px; }
.btn--block { display: flex; width: 100%; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-small);
  font-weight: 500;
  text-decoration: none;
  color: var(--color-ink);
}
.link-arrow::after {
  content: "→";
  transition: transform var(--speed-fast) var(--ease-out);
}
.link-arrow:hover { color: var(--green-ink); }
.link-arrow:hover::after { transform: translateX(5px); }
.section--dark .link-arrow { color: #fff; }
.section--dark .link-arrow:hover { color: var(--green-soft); }

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--color-line);
}

.site-header::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 3px;
  background: var(--green-ink);
  pointer-events: none;
}

.site-nav__link.is-active { color: var(--green-ink); }

.site-header .btn--primary { background: var(--green-ink); color: #fff; }
.site-header .btn--primary:hover { background: var(--green-deep); }

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  height: var(--nav-height);
}

.site-logo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: var(--color-ink);
}
.site-logo__img {
  height: var(--logo-height);
  width: auto;
  display: block;
}

.site-logo__mark {
  height: var(--logo-height);
  width: auto;
  display: block;
}
.site-logo__text {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.site-nav { display: flex; align-items: center; gap: 32px; }
.site-nav__link {
  position: relative;
  font-size: var(--text-small);
  text-decoration: none;
  color: var(--color-ink);
  opacity: 0.85;
  transition: opacity var(--speed-fast) var(--ease-out);
}
.site-nav__link:hover { opacity: 1; }

.site-nav__link::after {
  content: "";
  position: absolute;
  left: 50%; bottom: -6px;
  width: 0; height: 2px;
  background: var(--green-ink);
  transform: translateX(-50%);
  transition: width var(--speed-medium) var(--ease-out);
}
.site-nav__link:hover::after { width: 100%; }

.site-nav__link.is-active { opacity: 1; font-weight: 500; }
.site-nav__link.is-active::after { width: 100%; }

.site-header__actions { display: flex; align-items: center; gap: 12px; }

.nav-toggle {
  display: none;
  width: 40px; height: 40px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  position: relative;
}
.nav-toggle__bar {
  position: absolute;
  left: 10px;
  width: 20px; height: 1.5px;
  background: var(--color-ink);
  transition: transform var(--speed-medium) var(--ease-out),
              opacity var(--speed-fast) var(--ease-out);
}
.nav-toggle__bar:nth-child(1) { top: 17px; }
.nav-toggle__bar:nth-child(2) { top: 23px; }
.site-header.is-open .nav-toggle__bar:nth-child(1) { transform: translateY(3px) rotate(45deg); }
.site-header.is-open .nav-toggle__bar:nth-child(2) { transform: translateY(-3px) rotate(-45deg); }

.site-nav-mobile {
  display: none;
  border-top: 1px solid var(--color-line);
  background: rgba(255,255,255,.94);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
}
.site-nav-mobile__link {
  display: block;
  padding: 16px 0;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.02em;
  text-decoration: none;
  border-bottom: 1px solid var(--color-line);
}
.site-nav-mobile__link:last-of-type { border-bottom: 0; }
.site-nav-mobile .btn { margin: 20px 0 28px; }

.hero {
  padding-block: clamp(64px, 11vw, 140px) clamp(48px, 7vw, 90px);
  text-align: center;
}
.hero__inner { max-width: 860px; margin-inline: auto; }
.hero .t-lead { margin-top: 22px; }
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 34px;
}

.hero--compact {
  padding-block: clamp(44px, 5.5vw, 78px) clamp(32px, 4vw, 56px);
}

.hero--bordered { border-bottom: 1px solid var(--color-line); }

.hero--tint {
  position: relative;
  background: var(--surface);
  border-bottom: 1px solid var(--color-line);
}
.hero--tint::after {

  content: "";
  position: absolute;
  left: 50%; bottom: -1px;
  width: 96px; height: 2px;
  background: var(--green-ink);
  transform: translateX(-50%);
}

.hero--dark {
  background: var(--surface-dark);
  color: var(--color-on-dark);
}
.hero--dark h1, .hero--dark h2 { color: #fff; }
.hero--dark .t-lead { color: var(--color-on-dark-soft); }
.hero--dark .t-eyebrow { color: var(--green-soft); }

.tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--tile-min), 1fr));
  justify-items: center;
  gap: var(--tile-gap);
  padding: var(--tile-gap);
  max-width: var(--tile-row);
  margin-inline: auto;
}

.tile {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: var(--tile-max);
  height: var(--tile-height);
  padding: clamp(28px, 3vw, 40px) 22px var(--tile-media-inset);
  overflow: hidden;
  text-align: center;
  text-decoration: none;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-tile);
  background: var(--surface);
  color: var(--color-ink);
  box-shadow: var(--shadow-card);
  transition: transform var(--speed-medium) var(--ease-out),
              box-shadow var(--speed-medium) var(--ease-out),
              border-color var(--speed-medium) var(--ease-out);
}
.tile--dark {
  background: var(--surface-card);
  color: var(--color-on-dark);
  border-color: var(--green-line-soft-2);
}

a.tile:hover,
a.tile:focus-visible {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lift);
  border-color: var(--green-line);
}
a.tile--dark:hover { box-shadow: var(--shadow-hover); border-color: rgba(255,255,255,.5); }

.tile__text { flex: 0 0 auto; max-width: 30ch; margin-inline: auto; }

.tile__eyebrow {
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.14em;
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;
  text-transform: uppercase;
  color: var(--green-ink);
  opacity: 1;
  transition: color var(--speed-fast) var(--ease-out);
}
.tile--dark .tile__eyebrow { color: var(--on-card-accent); }

.tile__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 1.75vw, 1.75rem);
  font-weight: 700;
  letter-spacing: -0.032em;
  line-height: 1.1;
}
.tile--dark .tile__title { color: #fff; }

.tile__sub {
  margin: 10px auto 0;
  max-width: 32ch;
  font-size: 0.9rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-ink-soft);
  opacity: 1;
}
.tile--dark .tile__sub { color: var(--on-card-soft); }
.tile__actions { display: inline-flex; gap: 12px; margin-top: 16px; }

.tile__btn {
  display: inline-flex;
  align-items: center;
  padding: 8px 18px;
  border: 1px solid currentColor;
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  transition: background-color var(--speed-fast) var(--ease-out),
              color var(--speed-fast) var(--ease-out);
}
a.tile:hover .tile__btn,
a.tile:focus-visible .tile__btn {
  background: var(--green-ink);
  border-color: var(--green-ink);
  color: #fff;
}
a.tile--dark:hover .tile__btn {
  background: #fff;
  border-color: #fff;
  color: var(--green-deep);
}

.tile__media {
  flex: 1 1 auto;
  min-height: var(--tile-media-min);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  margin: 18px -22px calc(-1 * var(--tile-media-inset));
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
}
.tile--dark .tile__media,
.tile--featured .tile__media { background: none; border: 0; }

.tile__media img { filter: var(--depth-on-white); }
.tile--dark .tile__media img,
.tile--featured .tile__media img { filter: var(--depth-on-black); }

.tile__media img,
.tile__media svg,
.tile__media video {

  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: bottom center;
  display: block;
  transition: transform var(--speed-slow) var(--ease-out);
}

a.tile:hover .tile__media img,
a.tile:hover .tile__media svg { transform: scale(1.07); }
a.tile:hover .tile__media { border-color: var(--green-line); }
a.tile--dark:hover .tile__media { background: var(--inset-dark-hover); }
a.tile--featured:hover .tile__media { background: var(--inset-dark-hover); }

.tile--text-only { display: flex; align-items: center; justify-content: center; }
.tile--text-only .tile__text { margin: 0; }

.tile--featured {
  background: var(--surface-dark);
  color: var(--color-on-dark);
  border-color: #1c1c1e;
}
.tile--featured .tile__title { color: #fff; }
.tile--featured .tile__sub   { color: var(--color-on-dark-soft); }
.tile--featured .tile__eyebrow { color: var(--green-soft); }
a.tile--featured:hover .tile__btn {
  background: var(--green-bright);
  border-color: var(--green-bright);
  color: #04220a;
}

@media (min-width: 820px) {
  .tile--featured {
    grid-column: span 2;
    max-width: calc(var(--tile-max) * 2 + var(--tile-gap));
    flex-direction: row;
    align-items: center;
    gap: 28px;
    text-align: left;
    padding: clamp(28px, 3vw, 44px);
  }
  .tile--featured .tile__text {
    flex: 1 1 46%;
    max-width: 34ch;
    margin: 0;
  }
  .tile--featured .tile__title { font-size: clamp(1.75rem, 2.4vw, 2.3rem); }
  .tile--featured .tile__sub   { margin-inline: 0; max-width: 36ch; font-size: 0.98rem; }
  .tile--featured .tile__media {
    flex: 1 1 54%;
    align-self: stretch;
    margin-top: 0;
  }
}

@media (max-width: 700px) {
  .tile { height: var(--tile-height-small); }
}

:root {
  --globe-sea:  #0a0b0a;
  --globe-land: #00a74e;
  --globe-live: #8dedbe;
  --globe-hover:#34d07f;
  --globe-home: #f57305;
  --globe-pick: #ffffff;
  --globe-edge: #00351a;
}

.map-block {
  position: relative;
  display: flex;
  justify-content: center;
}

.map-stage {
  position: relative;
  width: 100%;
  max-width: 600px;
  aspect-ratio: 1 / 1;

  align-self: center;
  display: flex;
  align-items: center;
  justify-content: center;

  transition: transform var(--speed-medium) var(--ease-out);
}

#worldMapHost {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.map-stage svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  cursor: grab;

  touch-action: pan-y;
}
.map-stage svg.is-dragging { cursor: grabbing; }

.wm-air   { fill: url(#wmAir); }
.wm-sea   { fill: url(#wmSea); }

.wm-grid  { fill: none; stroke: rgba(255,255,255,.20); stroke-width: 1; }
.wm-shade { fill: url(#wmShade); }

.wm-rim   { fill: none; stroke: rgba(255,255,255,.24); stroke-width: 1.2; }

.wm-limb  { fill: url(#wmLimb); }
.wm-spec  { fill: url(#wmSpec); }
.wm-gloss { fill: none; stroke: url(#wmGloss); stroke-width: 2; }

.wm-pin {

  fill: #ffffff;
  pointer-events: none;
}

#worldGlobe.is-focused .wm-c:not(.is-selected):not(.is-home) { opacity: .72; }
#worldGlobe.is-focused .wm-grid { opacity: .6; }
#worldGlobe .wm-grid { transition: opacity var(--speed-medium) var(--ease-out); }

.wm-ghost {

  fill: rgba(140, 230, 170, .07);
  stroke: none;
  pointer-events: none;
}

.wm-c {
  fill: var(--globe-land);
  stroke: var(--globe-edge);
  stroke-width: 0.45;
  transform-box: fill-box;
  transform-origin: center;
  transition: fill var(--speed-fast) var(--ease-out),
              filter var(--speed-fast) var(--ease-out),
              opacity var(--speed-medium) var(--ease-out);
}

.wm-c.has-link {
  cursor: pointer;
}

.is-engaged .wm-c.has-link:hover { fill: var(--globe-hover); }

.wm-c.is-selected {
  fill: var(--globe-pick);
  stroke: rgba(255,255,255,.9);
  stroke-width: 1;
  paint-order: stroke fill;
  filter: drop-shadow(0 0 8px rgba(255,255,255,.55));
  animation: wmPop var(--speed-medium) var(--ease-out);
}
@keyframes wmPop {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.09); }
  100% { transform: scale(1); }
}

#worldGlobe:focus,
#worldGlobe:focus-visible,
.wm-c:focus { outline: none; }

.wm-c:focus-visible {
  outline: none;
  stroke: #fff;
  stroke-width: 1.6;
  paint-order: stroke fill;
  filter: drop-shadow(0 0 4px rgba(0,0,0,.45));
}

.wm-c.is-home {
  fill: var(--globe-home);
  stroke: rgba(255,255,255,.35);
  stroke-width: 0.5;
  cursor: pointer;
  filter: drop-shadow(0 0 5px rgba(245,115,5,.45));
}
.is-engaged .wm-c.is-home:hover { fill: #ff8c1a; }

.wm-c.is-small { stroke-width: 2.6; paint-order: stroke fill; }
.wm-c.is-small.has-link       { stroke: var(--globe-live); }
.is-engaged .wm-c.is-small.has-link:hover { stroke: var(--globe-hover); }
.wm-c.is-small.is-selected    { stroke: var(--globe-pick); }
.wm-c.is-small.is-home        { stroke: var(--globe-home); }

.wm-dot { stroke-width: 1; stroke: rgba(255,255,255,.4); }
.wm-dot.has-link { fill: var(--globe-live); }
.is-engaged .wm-dot.has-link:hover { fill: var(--globe-hover); }
.wm-dot.is-selected   { fill: var(--globe-pick); }

.wm-hit {
  fill: transparent;
  stroke: none;
  cursor: pointer;
  pointer-events: all;
}

.wm-ring {
  fill: none;
  stroke: rgba(255,255,255,.8);
  stroke-width: 1.3;
  transform-box: fill-box;
  transform-origin: center;
  animation: wmRing 1.5s var(--ease-out) both;
  pointer-events: none;
}
.wm-ring--2 { animation-delay: .22s; stroke: var(--map-home); }
@keyframes wmRing {
  0%   { transform: scale(.25); opacity: .8; }
  100% { transform: scale(4);   opacity: 0; }
}

.wm-arc {
  fill: none;
  stroke: url(#wmArcFade);
  stroke-width: 1.7;
  stroke-linecap: round;
  animation: wmArcIn .5s var(--ease-out);
  pointer-events: none;
}
@keyframes wmArcIn { from { opacity: 0; } to { opacity: 1; } }

.wm-spark { fill: var(--map-home); pointer-events: none; }

.wm-leader {
  fill: none;
  stroke: rgba(255,255,255,.62);
  stroke-width: 1.2;
  stroke-linecap: round;
  pointer-events: none;
}

.wm-leader-halo {
  fill: none;
  stroke: rgba(0,0,0,.5);
  stroke-width: 3.4;
  stroke-linecap: round;
  pointer-events: none;
}
.wm-leader-dot { fill: #fff; pointer-events: none; }

.wm-flag {
  font-size: 34px;
  text-anchor: middle;
  dominant-baseline: central;
  pointer-events: none;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.55));
}

.wm-c.is-showcase {
  fill: var(--globe-hover);
  stroke: rgba(255,255,255,.85);
  stroke-width: 1;
  paint-order: stroke fill;
  filter: drop-shadow(0 0 7px rgba(80,226,151,.6));
  animation: wmPop var(--speed-medium) var(--ease-out);
}

.wm-flag--show { font-size: 52px; }

.wm-flag--show, .wm-showname { animation: wmShowIn .2s var(--ease-out); }
.wm-showname {
  font-size: 13px;
  font-weight: 700;
  text-anchor: middle;
  dominant-baseline: hanging;
  fill: #fff;
  paint-order: stroke fill;
  stroke: rgba(0,0,0,.7);
  stroke-width: 3.5px;
  stroke-linejoin: round;
  pointer-events: none;
}
@keyframes wmShowIn { from { opacity: 0; transform: translateY(6px); } }

.wm-invite {
  fill: none;
  stroke: var(--map-home);
  stroke-width: 1.1;
  transform-box: fill-box;
  transform-origin: center;
  animation: wmInvite 3s ease-out infinite;
  pointer-events: none;
}
@keyframes wmInvite {
  0%   { transform: scale(.4); opacity: .5; }
  70%  { transform: scale(2.6); opacity: 0; }
  100% { transform: scale(2.6); opacity: 0; }
}

.map-tip {
  position: absolute;
  z-index: 5;
  width: max-content;
  max-width: 230px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 11px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 10px;
  background: rgba(10,12,10,.88);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: 0 10px 26px rgba(0,0,0,.5);
  color: #fff;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -150%) translateY(4px);
  transition: opacity var(--speed-fast) var(--ease-out),
              transform var(--speed-fast) var(--ease-out);
}

.map-tip__flag {
  font-size: 1.25em;
  line-height: 1;
  flex: none;
}

.map-tip.has-flag::before { display: none; }

.map-tip::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--green-soft);
  flex: none;
}
.map-tip.is-visible { opacity: 1; transform: translate(-50%, -150%); }

@keyframes mapHintIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; } }

.map-panel {

  text-align: left;
  position: absolute;

  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 6;
  width: 360px;
  max-width: 100%;

  max-height: none;
  overflow: visible;

  border: 1px solid rgba(255,255,255,.16);
  border-radius: var(--radius-large);

  background:
    linear-gradient(157deg, rgba(255,255,255,.13) 0%, rgba(255,255,255,.035) 46%, rgba(255,255,255,.09) 100%),
    rgba(10,11,10,.18);
  -webkit-backdrop-filter: blur(30px) saturate(175%);
  backdrop-filter: blur(30px) saturate(175%);
  box-shadow:
    0 24px 70px rgba(0,0,0,.6),
    inset 0 1px 0 rgba(255,255,255,.16),
    inset 0 -1px 0 rgba(255,255,255,.05);
  padding: 22px 22px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: hidden;
  animation: mapCardIn var(--speed-medium) var(--ease-out);
}
.map-panel[hidden] { display: none; }
.map-panel.is-left  { left: 0; right: auto; }
.map-panel.is-right { right: 0; left: auto; }
@keyframes mapCardIn {
  from { opacity: 0; transform: translateY(-50%) scale(.985); }
  to   { opacity: 1; }
}

.map-panel::-webkit-scrollbar,
.map-panel__dtaa::-webkit-scrollbar { width: 10px; }
.map-panel::-webkit-scrollbar-thumb,
.map-panel__dtaa::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.28);
  border: 4px solid transparent;
  background-clip: padding-box;
  border-radius: 10px;
}
.map-panel::-webkit-scrollbar-thumb:hover,
.map-panel__dtaa::-webkit-scrollbar-thumb:hover {
  background: rgba(255,255,255,.46);
  background-clip: padding-box;
}
.map-panel,
.map-panel__dtaa { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.28) transparent; }

.map-panel::before {
  content: "";
  position: absolute;
  left: 0; top: 24px; bottom: 24px;
  width: 2px;
  background: var(--green-ink);
  opacity: .9;
}
.hero--globe .map-panel.is-right::before { left: auto; right: 0; }
.map-panel__tools {
  position: absolute;
  top: 12px; right: 12px;
  display: flex;
  gap: 4px;
  z-index: 2;
}
.map-panel__btn {
  width: 30px; height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 50%;
  background: none;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  transition: border-color var(--speed-fast) var(--ease-out),
              color var(--speed-fast) var(--ease-out),
              background-color var(--speed-fast) var(--ease-out);
}
.map-panel__close { font-size: 19px; }
.map-panel__btn:hover {
  border-color: rgba(255,255,255,.22);
  background: rgba(255,255,255,.08);
  color: #fff;
}

.map-panel__dtaa { border-top-color: rgba(255,255,255,.14); }
.map-panel__country {
  font-family: var(--font-display);
  font-size: 1.55rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.15;
  color: var(--color-ink);
  margin: 0;
  padding-right: 28px;
}

.map-panel__flag {
  font-size: 0.82em;
  margin-right: 0.4em;
  line-height: 1;
  vertical-align: 0.02em;
}

.map-panel__mission { margin: 0; font-size: 14.5px; color: var(--color-ink-soft); }

.map-panel__rate {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 9px;
  margin: 2px 0 0;
}
.map-panel__rate[hidden] { display: none; }
.map-panel__rate-figure {
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.map-panel__rate-note {
  font-size: var(--text-micro);
  color: var(--color-ink-soft);
}

.map-credit {
  max-width: 480px;
  margin: 16px auto 0;
  text-align: center;
  font-size: var(--text-micro);
  line-height: 1.65;
  color: var(--color-on-dark-soft);
}
.map-credit a { color: var(--green-soft); border-bottom: 1px solid var(--green-line-2); }
.map-credit a:hover { border-bottom-color: var(--green-soft); }
.map-panel .btn { margin-top: 2px; }

.map-panel__all { margin-top: 0; }

.map-panel__dtaa {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 4px;
  padding-top: 18px;
  border-top: 1px solid var(--green-line);
}

.map-panel__dtaa[hidden],
.map-panel__dtaa [hidden] { display: none; }
.map-panel__dtaa .t-eyebrow { margin: 0; }

.map-panel__what {
  margin: 2px 0 0;
  padding-left: 10px;
  border-left: 1px solid rgba(255,255,255,.18);
  opacity: .9;
}

.map-panel__status {
  margin: 0;
  font-size: var(--text-small);
  font-weight: 600;
  color: var(--color-ink);
}

.map-panel__fine {
  margin: 0;
  font-size: var(--text-micro);
  line-height: 1.55;
  color: var(--color-ink-soft);
}
.map-panel__fine a { color: var(--green-ink); text-decoration: underline; }

.map-panel__source { opacity: .8; font-size: 11px; line-height: 1.5; }

.map-rates {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0;
  margin: 2px 0 0;
  padding: 2px 14px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  background: rgba(255,255,255,.06);
}
.map-rates dt,
.map-rates dd {
  margin: 0;
  padding: 8px 0;
  font-size: 13px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.map-rates dt { color: var(--color-ink-soft); }
.map-rates dd { color: var(--color-ink); font-weight: 600; text-align: right; padding-left: 14px; }
.map-rates dt:nth-last-of-type(1),
.map-rates dd:nth-last-of-type(1) { border-bottom: 0; }

.map-panel__links {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 2px 0 0;
}
.map-link {
  font-size: 13px;
  font-weight: 600;
  color: var(--green-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--green-line);
  align-self: flex-start;
  padding-bottom: 2px;
  transition: border-color var(--speed-fast) var(--ease-out),
              color var(--speed-fast) var(--ease-out);
}
.map-link::after { content: " \2192"; }
.map-link:hover { border-bottom-color: var(--green-ink); }

.map-link--quiet {
  font-weight: 500;
  color: var(--color-ink-soft);
  border-bottom-color: var(--color-line);
}
.map-link--quiet:hover { color: var(--green-ink); border-bottom-color: var(--green-line); }

.map-panel__more {
  margin-top: 2px;
  border-top: 1px solid var(--color-line);
  padding-top: 11px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.map-panel__more[hidden] { display: none; }

.map-panel,
.map-panel h3,
.map-panel__country,
.map-panel__status { color: #fff; }
.map-panel .t-eyebrow { color: var(--green-soft); }

.map-panel .t-eyebrow { font-size: var(--text-micro); letter-spacing: 0.2em; }
.map-panel__mission,
.map-panel__fine,
.map-panel__btn,
.map-panel__rate-note,
.map-rates dt { color: var(--color-on-dark-soft); }
.map-panel__rate-figure,
.map-rates dd { color: #fff; }
.map-link { color: var(--green-soft); border-bottom-color: var(--green-line-2); }
.map-link:hover { border-bottom-color: var(--green-soft); }
.map-link--quiet { color: var(--color-on-dark-soft); border-bottom-color: rgba(255,255,255,.2); }
.map-link--quiet:hover { color: var(--green-soft); }
.map-panel__fine a { color: var(--green-soft); }
.map-panel__more { border-top-color: rgba(255,255,255,.12); }
.map-panel::before { background: var(--green-soft); }

.map-panel .btn--primary { background: #fff; color: #000; }
.map-panel .btn--primary:hover { background: var(--green-soft); color: #04220a; }

.map-panel.is-updating .map-panel__country,
.map-panel.is-updating .map-panel__mission,
.map-panel.is-updating .map-panel__dtaa { animation: mapPanelIn var(--speed-medium) var(--ease-out); }
@keyframes mapPanelIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

.globe-hero__tools {

  width: 100%;
  max-width: 500px;
  justify-self: center;
  min-width: 0;
}

.map-clock {
  margin: clamp(14px, 1.6vw, 20px) 0 0;
  font-size: 13px;
  letter-spacing: 0.01em;
  color: var(--color-on-dark-soft);
  font-variant-numeric: tabular-nums;
}
.map-clock[hidden] { display: none; }

.map-panel__clock {
  margin: 2px 0 0;
  font-size: 12px;
  color: var(--color-on-dark-soft);
  font-variant-numeric: tabular-nums;
}
.map-panel__clock[hidden] { display: none; }

.globe-hero__hint {
  margin: 0 0 4px;
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--color-ink-soft);
}

.globe-hero__tools .map-find { margin-top: clamp(16px, 1.8vw, 22px); }
.globe-hero__tools .map-legend { margin-top: 14px; }

.map-find {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin: 22px auto 0;
  max-width: 480px;
}
.map-find__input {
  flex: 1;
  min-width: 0;
  padding: 11px 16px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: var(--radius-pill);
  background: var(--inset-dark);
  font: inherit;
  font-size: var(--text-small);
  color: #fff;
  transition: border-color var(--speed-fast) var(--ease-out),
              background-color var(--speed-fast) var(--ease-out);
}
.map-find__input::placeholder { color: var(--color-on-dark-soft); }
.map-find__input:focus {
  outline: none;
  border-color: var(--green-soft);
  background: var(--inset-dark-hover);
}
.map-find__go { flex: none; }

.map-find__msg {
  margin: 10px auto 0;
  max-width: 480px;
  text-align: center;
  font-size: var(--text-micro);
  color: var(--color-on-dark-soft);
}
.map-find__msg[hidden] { display: none; }

[data-scroll-in] { --in: 1; }
@media (prefers-reduced-motion: reduce) {
  [data-scroll-in] { --in: 1 !important; }
}

.hero--globe { padding-block: 120px clamp(28px, 3vw, 40px); }

@media (min-width: 1340px) {
  .hero--globe { padding-top: 88px; }
}

@media (max-width: 1080px) {
  .hero--globe { padding-block: clamp(48px, 9vw, 76px) clamp(36px, 5vw, 64px); }
  .globe-hero__hint { text-align: center; }
}

.globe-hero {
  display: grid;
  gap: clamp(20px, 3vw, 56px);
  align-items: start;
}

.globe-hero__copy { transition: opacity var(--speed-medium) var(--ease-out); }

@media (min-width: 1081px) {
  .globe-hero {

    grid-template-columns: minmax(0, 1fr) clamp(420px, 38vw, 520px);

    grid-template-rows: auto auto;

    row-gap: clamp(14px, 1.6vw, 24px);
  }

  .globe-hero__copy         { grid-column: 1; grid-row: 1 / span 2; padding-top: clamp(6px, 1.2vw, 20px);
                              text-align: left; }
  .globe-hero__copy .t-lead,
  .globe-hero__copy .hero__actions { margin-inline: 0; }
  .globe-hero__copy .hero__actions { justify-content: flex-start; }
  .hero--globe .map-block   { grid-column: 2; grid-row: 1; }
  .globe-hero__tools        { grid-column: 2; grid-row: 2; }

  .hero--globe .map-stage {
    transform: scale(calc(.88 + .12 * var(--in, 1)));
    transition: none;
  }

  .hero--globe .map-block { justify-content: center; }
  .hero--globe .map-stage { max-width: 500px; margin-inline: auto; }

  .hero--globe .map-panel,
  .hero--globe .map-panel.is-left,
  .hero--globe .map-panel.is-right {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);

    width: clamp(216px, 17.5vw, 278px);
    max-width: none;
    padding: 18px 18px 16px;
  }

  .hero--globe .map-panel,
  .hero--globe .map-panel.is-left {
    left: auto;

    right: calc(100% - 250px);
  }

  .hero--globe .map-panel.is-right {
    right: 0;
    left: auto;
  }

  .hero--globe .map-panel__dtaa {
    max-height: 300px;
    overflow-y: auto;

    overscroll-behavior: contain;
    padding-right: 10px;
  }

  @media (prefers-reduced-motion: no-preference) {
    .hero--globe .map-panel,
    .hero--globe .map-panel.is-left  { animation: mapCardInLeft  var(--speed-medium) var(--ease-out); }
    .hero--globe .map-panel.is-right { animation: mapCardInRight var(--speed-medium) var(--ease-out); }
    .hero--globe .map-panel.is-leaving.is-left  { animation: mapCardOutLeft  var(--speed-fast) var(--ease-out) forwards; }
    .hero--globe .map-panel.is-leaving.is-right { animation: mapCardOutRight var(--speed-fast) var(--ease-out) forwards; }
  }
}

@keyframes mapCardInLeft {
  from { opacity: 0; transform: translate(16px, -50%) scale(.985); }
  to   { opacity: 1; transform: translate(0, -50%) scale(1); }
}
@keyframes mapCardInRight {
  from { opacity: 0; transform: translate(-16px, -50%) scale(.985); }
  to   { opacity: 1; transform: translate(0, -50%) scale(1); }
}
@keyframes mapCardOutLeft {
  from { opacity: 1; transform: translate(0, -50%) scale(1); }
  to   { opacity: 0; transform: translate(12px, -50%) scale(.985); }
}
@keyframes mapCardOutRight {
  from { opacity: 1; transform: translate(0, -50%) scale(1); }
  to   { opacity: 0; transform: translate(-12px, -50%) scale(.985); }
}

.globe-hero__words { text-align: left; }
.globe-hero__words .t-lead,
.globe-hero__words .hero__actions { margin-inline: 0; }
.globe-hero__words .hero__actions { justify-content: flex-start; }
@media (max-width: 1080px) {
  .globe-hero__words { text-align: center; }
  .globe-hero__words .hero__actions { justify-content: center; }
}
.hero--globe .section__head { margin-bottom: 0; }
.hero--globe .t-hero { margin-bottom: 14px; }
.hero--globe .t-lead { max-width: 620px; margin-inline: auto; }
.hero--globe .hero__actions { margin-top: 26px; }

.globe-note {
  max-width: 720px;
  margin: clamp(26px, 3vw, 40px) auto 0;
  text-align: center;
}
.globe-note p {
  margin: 0;
  font-size: var(--text-small);
  line-height: 1.7;
  color: var(--color-on-dark-soft);
}
.globe-note .hero__actions { margin-top: 26px; }

.map-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  margin-top: 20px;
  font-size: 12px;
  color: var(--color-on-dark-soft);
}
.map-legend span { display: inline-flex; align-items: center; gap: 8px; }
.map-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.map-legend i.is-home-swatch { background: #f57305; }

.hero--tint .wm-rim { stroke: rgba(0,0,0,.22); }
.hero--tint .wm-air { display: none; }
.hero--tint .map-stage svg {
  filter: drop-shadow(0 18px 34px rgba(0,0,0,.22));

  transition: filter var(--speed-slow) var(--ease-out);
}

@media (hover: hover) {
  .hero--tint .map-stage:hover svg {
    filter: drop-shadow(0 26px 48px rgba(0,0,0,.30));
  }
}

.hero--tint .map-tip {
  background: var(--surface-dark);
  color: var(--color-on-dark);
  border-color: #1c1c1e;
}
.hero--tint .map-tip::before { border-top-color: var(--surface-dark); }

.hero--tint .map-find__input {
  background: var(--surface);
  border-color: var(--color-line-firm);
  color: var(--color-ink);
}
.hero--tint .map-find__input::placeholder { color: var(--color-ink-soft); }
.hero--tint .map-find__input:focus { border-color: var(--green-ink); }
.hero--tint .map-find__msg,
.hero--tint .map-legend,
.hero--tint .map-credit { color: var(--color-ink-soft); }
.hero--tint .map-credit a { color: var(--green-ink); border-bottom-color: var(--green-line); }
.hero--tint .map-credit a:hover { border-bottom-color: var(--green-ink); }

.hero--tint .map-panel {

  background: transparent;
  border-color: rgba(255, 255, 255, .18);
  color: var(--color-on-dark);
  -webkit-backdrop-filter: blur(34px) brightness(.25) saturate(150%);
  backdrop-filter: blur(34px) brightness(.25) saturate(150%);
  box-shadow: 0 24px 60px rgba(0,0,0,.34),
              inset 0 1px 0 rgba(255,255,255,.16);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .hero--tint .map-panel { background: rgba(10, 12, 11, .92); }
}

.hero--tint .map-panel__country,
.hero--tint .map-panel__rate-figure,
.hero--tint .map-panel__status,
.hero--tint .map-rates dd { color: #fff; }
.hero--tint .map-panel__mission,
.hero--tint .map-panel__clock,
.hero--tint .map-panel__rate-note,
.hero--tint .map-panel__fine,
.hero--tint .map-rates dt { color: rgba(255,255,255,.80); }
.hero--tint .map-panel .t-eyebrow,
.hero--tint .map-panel__eyebrow { color: var(--green-soft); }
.hero--tint .map-panel__btn {
  color: #fff;
  border-color: rgba(255,255,255,.28);
}
.hero--tint .map-panel__btn:hover {
  background: rgba(255,255,255,.10);
  border-color: var(--green-soft);
  color: var(--green-soft);
}
.hero--tint .map-panel__close { color: rgba(255,255,255,.82); }
.hero--tint .map-panel__close:hover { color: #fff; }
.hero--tint .map-panel a { color: var(--green-soft); }

.hero--tint .map-panel .btn--primary { color: #000; }
.hero--tint .map-panel .btn--primary:hover { color: #04220a; }
.hero--tint .map-panel__dtaa { border-top-color: rgba(255,255,255,.16); }
.hero--tint .map-rates {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.12);
}
.hero--tint .map-rates dt,
.hero--tint .map-rates dd { border-bottom-color: rgba(255,255,255,.10); }
.hero--tint .map-panel,
.hero--tint .map-panel__dtaa { scrollbar-color: rgba(255,255,255,.30) transparent; }
.hero--tint .map-panel::-webkit-scrollbar-thumb,
.hero--tint .map-panel__dtaa::-webkit-scrollbar-thumb { background: rgba(0,0,0,.26); }

@media (max-width: 1080px) {
  .map-block { flex-direction: column; align-items: center; gap: 18px; }

  .map-block { position: relative; }
  .map-panel,
  .map-panel.is-left,
  .map-panel.is-right {

    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    margin-inline: auto;
    transform: translateY(-50%);
    width: min(92%, 420px);
    max-width: none;
    z-index: 6;
    animation: mapCardUpOver var(--speed-medium) var(--ease-out);
  }
  .map-panel.is-leaving { animation: mapCardDownOver var(--speed-fast) var(--ease-out) forwards; }

  .map-panel.is-compact > .t-eyebrow,
  .map-panel.is-compact > .map-panel__mission,
  .map-panel.is-compact > .map-panel__clock,
  .map-panel.is-compact > .btn,
  .map-panel.is-compact > .map-panel__dtaa { display: none; }

  .map-panel.is-compact { width: min(80%, 320px); padding: 18px 18px 14px; }

  .map-panel.is-compact::after {
    content: "";
    display: block;
    width: 9px; height: 9px;
    margin: 12px auto 0;
    border-right: 2px solid var(--green-soft);
    border-bottom: 2px solid var(--green-soft);
    transform: rotate(45deg);
    opacity: .75;
  }
  .map-panel.is-compact { cursor: pointer; }

  .map-panel__dtaa {
    max-height: clamp(110px, 20vh, 200px);
    overflow-y: auto;

    overscroll-behavior: contain;
    padding-right: 10px;
  }

  .hero--globe .map-panel:not(.is-compact) {
    position: fixed;
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    margin-inline: auto;
    width: 100%;
    max-width: 600px;
    max-height: 86vh;
    max-height: 86svh;
    transform: none;
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 0;
    border-top: 2px solid var(--green-soft);
    border-radius: 24px 24px 0 0;
    background: var(--surface-dark);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: 0 -18px 50px rgba(0,0,0,.30);
    padding: 14px 22px calc(28px + env(safe-area-inset-bottom, 0px));
    z-index: 120;
    animation: mapSheetUp .32s var(--ease-out);
  }
  .hero--globe .map-panel:not(.is-compact).is-leaving {
    animation: mapSheetDown var(--speed-fast) var(--ease-out) forwards;
  }
  .hero--globe .map-panel:not(.is-compact)::before { display: none; }
  .hero--globe .map-panel:not(.is-compact) .map-panel__dtaa {
    max-height: none;
    overflow: visible;
    padding-right: 0;
  }

  .hero--globe .map-panel:not(.is-compact) { overflow-x: hidden; }
  .hero--globe .map-panel:not(.is-compact) > .map-panel__close {
    position: sticky;
    top: 0;
    z-index: 2;
    flex: none;
    border-color: transparent;
    background: none;
  }
  .hero--globe .map-panel:not(.is-compact) > .map-panel__close::before {
    content: "";
    position: absolute;
    inset: -1px;
    border: 1px solid rgba(255,255,255,.28);
    border-radius: 50%;
    z-index: -1;
  }
  .hero--globe .map-panel:not(.is-compact) > .map-panel__close::after {
    content: "";
    position: absolute;
    top: -20px;
    bottom: -2px;
    left: -24px;
    width: 100vw;
    max-width: 600px;
    background: var(--surface-dark);
    z-index: -2;
  }
  .map-block:has(> .map-panel:not(.is-compact):not([hidden])) > .map-veil {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 115;
    background: rgba(0,0,0,.45);
    touch-action: none;
    animation: mapVeilIn .32s var(--ease-out);
  }
  .map-block:has(> .map-panel.is-leaving) > .map-veil {
    animation: mapVeilOut var(--speed-fast) var(--ease-out) forwards;
  }
  .hero--globe .container:has(.map-panel:not(.is-compact):not([hidden])) { z-index: 110; }
}

.map-veil { display: none; }
@keyframes mapSheetUp   { from { transform: translateY(100%); } to { transform: none; } }
@keyframes mapSheetDown { from { transform: none; } to { transform: translateY(100%); } }
@keyframes mapVeilIn    { from { opacity: 0; } to { opacity: 1; } }
@keyframes mapVeilOut   { from { opacity: 1; } to { opacity: 0; } }

@keyframes mapCardUpOver {
  from { opacity: 0; transform: translateY(calc(-50% + 10px)); }
  to   { opacity: 1; transform: translateY(-50%); }
}
@keyframes mapCardDownOver {
  from { opacity: 1; transform: translateY(-50%); }
  to   { opacity: 0; transform: translateY(calc(-50% + 8px)); }
}

@keyframes mapCardUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
@keyframes mapCardDown {
  from { opacity: 1; transform: none; }
  to   { opacity: 0; transform: translateY(8px); }
}

@media (max-width: 560px) {
  .map-panel { padding: 22px 20px 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .wm-ring, .wm-invite, .wm-spark { display: none; }
  .wm-arc { animation: none; }
  .wm-c.is-selected { animation: none; }
  .map-panel,
  .hero--globe .map-panel:not(.is-compact),
  .hero--globe .map-panel:not(.is-compact).is-leaving,
  .map-block:has(> .map-panel) > .map-veil { animation: none; }
}

.tool {
  border: 1px solid var(--color-line);
  border-radius: var(--radius-large);
  background: var(--color-bg);
  padding: clamp(24px, 4vw, 44px);
  box-shadow: var(--shadow-card);
}

.tool__progress {
  display: flex;
  gap: 6px;
  margin-bottom: 28px;
}
.tool__progress i {
  height: 3px;
  flex: 1;
  border-radius: 2px;
  background: var(--color-line);
  transition: background var(--speed-medium) var(--ease-out);
}
.tool__progress i.is-done { background: var(--green-ink); }

.tool__step { display: none; }
.tool__step.is-active { display: block; animation: toolIn var(--speed-medium) var(--ease-out) both; }
@keyframes toolIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

.tool__question { font-size: var(--text-h3); font-weight: 600; letter-spacing: -0.02em; margin: 0 0 8px; }
.tool__help { font-size: 14px; color: var(--color-ink-soft); margin: 0 0 22px; }

.tool__options { display: grid; gap: 12px; }
.opt {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 20px;
  border: 1px solid var(--color-line);
  border-radius: 16px;
  cursor: pointer;
  transition: border-color var(--speed-fast) var(--ease-out),
              background var(--speed-fast) var(--ease-out),
              transform var(--speed-fast) var(--ease-out);
}
.opt:hover { border-color: var(--green-ink); transform: translateY(-2px); box-shadow: var(--shadow-card); }
.opt input { position: absolute; opacity: 0; pointer-events: none; }
.opt__dot {
  flex: none;
  width: 18px; height: 18px;
  margin-top: 3px;
  border: 1.5px solid var(--color-line);
  border-radius: 50%;
  position: relative;
  transition: border-color var(--speed-fast) var(--ease-out);
}
.opt__dot::after {
  content: "";
  position: absolute;
  inset: 3.5px;
  border-radius: 50%;
  background: var(--green-ink);
  transform: scale(0);
  transition: transform var(--speed-fast) var(--ease-out);
}
.opt input:checked ~ .opt__dot { border-color: var(--green-ink); }
.opt input:checked ~ .opt__dot::after { transform: scale(1); }

.opt:has(input:checked) {
  border-color: var(--green-ink);
  box-shadow: inset 3px 0 0 var(--green-ink);
}
.opt__label { font-size: 15px; font-weight: 500; }
.opt__note { display: block; font-size: 13px; font-weight: 400; color: var(--color-ink-soft); margin-top: 3px; }

.tool__field { display: grid; gap: 8px; max-width: 280px; }
.tool__field label { font-size: 14px; font-weight: 500; }
.tool__field input {
  padding: 13px 16px;
  border: 1px solid var(--color-line);
  border-radius: 12px;
  background: #fff;
  transition: border-color var(--speed-fast) var(--ease-out);
}
.tool__field input:focus { outline: none; border-color: var(--green-ink); box-shadow: 0 0 0 3px rgba(10,125,24,.16); }

.tool__field select {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-small);
  background: var(--surface);
  font: inherit;
  font-size: 15px;
  color: inherit;
}
.tool__field select:focus { outline: none; border-color: var(--green-ink); box-shadow: 0 0 0 3px rgba(10,125,24,.16); }

.tool__pick {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 0 0 14px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-small);
  background: var(--surface);
  transition: border-color var(--speed-fast) var(--ease-out),
              box-shadow var(--speed-fast) var(--ease-out);
}
.tool__pick:focus-within { border-color: var(--green-ink); box-shadow: 0 0 0 3px rgba(10,125,24,.16); }
.tool__pick-flag { font-size: 19px; line-height: 1; min-width: 24px; }
.tool__pick input {
  flex: 1 1 auto;
  width: 100%;
  padding: 12px 14px 12px 0;
  border: 0;
  border-radius: 0;
  background: none;
  font: inherit;
  font-size: 15px;
  color: inherit;
}
.tool__pick input:focus { outline: none; border-color: transparent; box-shadow: none; }

.tool__row { display: flex; flex-wrap: wrap; gap: 14px; }
.tool__row .tool__field { flex: 1 1 180px; max-width: none; }

.fx-box {
  border: 1px solid var(--color-line);
  border-radius: var(--radius-large);
  padding: 20px 22px;
  margin: 26px 0;
}
.fx-box[hidden] { display: none; }
.fx-box__head {
  margin: 0 0 12px;
  font-size: var(--text-micro);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--green-ink);
}
.fx-box__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px 20px;
}
.fx-box__list li {
  margin: 0;
  padding: 7px 0;
  border-bottom: 1px solid var(--color-line);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.fx-box__note {
  margin: 16px 0 0;
  font-size: var(--text-micro);
  line-height: 1.7;
  color: var(--color-ink-soft);
}

.tool__rule {
  border: 0;
  border-top: 1px solid var(--color-line);
  margin: 28px 0 24px;
}

.tool__nav { display: flex; gap: 10px; margin-top: 30px; flex-wrap: wrap; }

.tool__result { display: none; }
.tool__result.is-active { display: block; animation: toolIn var(--speed-medium) var(--ease-out) both; }
.result-badge {
  display: inline-block;
  padding: 7px 16px;
  border-radius: var(--radius-pill);
  background: var(--green-ink);
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  margin-bottom: 18px;
}
.result-headline { font-size: var(--text-h2); font-weight: 600; letter-spacing: -0.03em; margin: 0 0 14px; }
.result-reasons {
  margin: 22px 0 0;
  padding: 22px 0 0;
  border-top: 1px solid var(--color-line);
  list-style: none;
}
.result-reasons li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 10px;
  font-size: 15px;
  color: var(--color-ink-soft);
}
.result-reasons li::before {
  content: "";
  position: absolute;
  left: 2px; top: 9px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--green-ink);
}

.notebox {
  background: var(--surface);
  border: 1px solid var(--color-line);
  border-left: 3px solid var(--green-ink);
  border-radius: 0 16px 16px 0;
  padding: 20px 22px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-ink-soft);
}
.section--dark .notebox {
  background: var(--surface-dark);
  border-color: #232326;
  border-left-color: var(--green-bright);
  color: var(--color-on-dark-soft);
}
.section--dark .notebox strong { color: #fff; }
.notebox strong { color: var(--color-ink); font-weight: 600; }

.notebox__label {
  display: block;
  margin-bottom: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--green-ink);
}

.prose { font-size: 1.06rem; line-height: 1.75; }
.prose h2 { font-size: var(--text-h2); margin: 2em 0 0.6em; }
.prose h3 { font-size: var(--text-h3); margin: 1.8em 0 0.5em; }
.prose ul, .prose ol { padding-left: 22px; margin: 0 0 1.2em; }
.prose li { margin-bottom: 8px; }
.prose blockquote {
  margin: 1.6em 0;
  padding: 4px 0 4px 22px;
  border-left: 3px solid var(--green-ink);
  font-size: 1.15rem;
  letter-spacing: -0.01em;
}
.prose hr { border: 0; border-top: 1px solid var(--color-line); margin: 2.4em 0; }
.prose table { width: 100%; border-collapse: collapse; margin: 1.6em 0; font-size: 15px; }
.prose th, .prose td { text-align: left; padding: 13px 14px; border-bottom: 1px solid var(--color-line); }
.prose th {
  font-weight: 600;
  background: var(--surface);
  border-bottom: 2px solid var(--color-ink);
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.prose tbody tr { transition: background-color var(--speed-fast) var(--ease-out); }
.prose tbody tr:hover { background: #fafafa; }
.prose figure { margin: 2em 0; }
.prose figcaption { font-size: 13px; color: var(--color-ink-soft); margin-top: 10px; }

.article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  font-size: 13px;
  color: var(--color-ink-soft);
  margin-top: 18px;
}

.table-scroll { overflow-x: auto; }

.keypoints { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 10px; }
.keypoints li {
  position: relative;
  padding-left: 26px;
  font-size: 15px;
  color: var(--color-ink-soft);
}
.keypoints li::before {
  content: "";
  position: absolute;
  left: 0; top: 8px;
  width: 12px; height: 2px;
  background: var(--green-ink);
}

.crumb { text-decoration: none; border-bottom: 1px solid var(--green-line); }
.crumb:hover { color: var(--green-ink); border-color: var(--green-ink); }

.pager { display: flex; justify-content: space-between; gap: 24px; }
.pager__link {
  display: block;
  max-width: 46%;
  text-decoration: none;
  transition: transform var(--speed-fast) var(--ease-out);
}
.pager__link--next { text-align: right; margin-left: auto; }
.pager__link:hover { transform: translateY(-2px); }
.pager__link:hover .pager__title { color: var(--green-ink); }
.pager__link:hover .pager__label { color: var(--green-ink); }
.pager__label {
  display: block;
  font-size: var(--text-micro);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
  margin-bottom: 6px;
  transition: color var(--speed-fast) var(--ease-out);
}
.pager__title {
  font-size: 1.05rem; font-weight: 500; letter-spacing: -0.015em;
  transition: color var(--speed-fast) var(--ease-out);
}
@media (max-width: 640px) {
  .pager { flex-direction: column; gap: 26px; }
  .pager__link, .pager__link--next { max-width: 100%; text-align: left; margin-left: 0; }
}

.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 28px;
  margin-top: 40px;
}
.contact-item__label {
  font-size: var(--text-micro);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
  margin: 0 0 8px;
}
.contact-item__value { font-size: 1.05rem; font-weight: 500; margin: 0; }
.contact-item__value a { text-decoration: none; border-bottom: 1px solid var(--green-line); }
.contact-item__value a:hover { color: var(--green-ink); border-color: var(--green-ink); }
.section--dark .contact-item__value a:hover { color: var(--green-soft); border-color: var(--green-soft); }
.section--dark .contact-item__value a { border-color: rgba(255,255,255,.35); }

.contact-form { display: grid; gap: 20px; margin-top: 40px; }
.contact-form[hidden] { display: none; }
.contact-form__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}
.contact-form__field { display: grid; gap: 8px; margin: 0; }
.contact-form__field label { font-size: 14px; font-weight: 500; color: var(--color-on-dark); }
.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 13px 16px;
  border: 1px solid rgba(255,255,255,.38);
  border-radius: 12px;
  background: var(--inset-dark);
  color: var(--color-on-dark);
  font-size: 16px;
  transition: border-color var(--speed-fast) var(--ease-out),
              box-shadow var(--speed-fast) var(--ease-out);
}
.contact-form textarea { min-height: 150px; line-height: 1.5; resize: vertical; }
.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--green-soft);
  box-shadow: 0 0 0 3px rgba(80,226,151,.22);
}

.contact-form input:-webkit-autofill {
  -webkit-text-fill-color: var(--color-on-dark);
  box-shadow: 0 0 0 1000px #0e0e0e inset;
  caret-color: var(--color-on-dark);
}
.contact-form__send { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin: 4px 0 0; }
.contact-form__send .btn[disabled] { opacity: .6; cursor: progress; transform: none; }
.contact-form__status { font-size: var(--text-small); color: var(--color-on-dark-soft); }
.contact-form__status.is-error { color: var(--color-on-dark); }

.contact-form__trap {
  position: absolute;
  left: -10000px;
  width: 1px; height: 1px;
  overflow: hidden;
}

.contact-done {
  margin-top: 40px;
  padding: 24px 28px;
  border: 1px solid var(--green-line-2);
  border-radius: 16px;
  background: var(--inset-dark);
  box-shadow: inset 3px 0 0 var(--green-soft);
  color: var(--color-on-dark-soft);
}
.contact-done:focus { outline: none; }
.contact-done p { margin: 0; }
.contact-done .contact-done__title { font-size: 1.25rem; font-weight: 600; color: #fff; margin: 0 0 6px; }

.site-footer {

  background: var(--surface-dark);
  color: var(--color-on-dark-soft);

  border-top: 3px solid var(--green-ink);
  padding-block: 56px 34px;
  font-size: var(--text-small);
  color: var(--color-ink-soft);
}
.site-footer__top {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: 36px;
  padding-bottom: 34px;
  border-bottom: 1px solid var(--color-line);
}
.site-footer h4 {
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 16px;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.site-footer__top { border-bottom-color: #1f1f22; }
.site-footer__list a:hover { color: var(--green-soft); }
.site-footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.site-footer__list a { text-decoration: none; transition: color var(--speed-fast) var(--ease-out); }
.site-footer__brand p { max-width: 320px; margin-top: 12px; }

.site-footer__lockup { display: flex; align-items: center; gap: 12px; }
.site-footer__mark { height: var(--logo-height-footer); width: auto; display: block; }
.site-footer__logo { height: var(--logo-height-footer); width: auto; display: block; }
.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  padding-top: 24px;
  font-size: var(--text-micro);
}
.site-footer__legal { max-width: 760px; margin-top: 18px; font-size: var(--text-micro); line-height: 1.6; }

@media (max-width: 820px) {
  .site-footer__top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
  .site-footer__top { grid-template-columns: 1fr; }
}

.js .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--speed-slow) var(--ease-out),
              transform var(--speed-slow) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
.js .reveal.is-visible { opacity: 1; transform: none; }

.u-center      { text-align: center; }
.u-mt-0        { margin-top: 0; }
.u-mt-24       { margin-top: 24px; }
.u-mt-40       { margin-top: 40px; }
.u-mb-0        { margin-bottom: 0; }
.u-hairline    { border-top: 1px solid var(--color-line); }
.u-flex-center { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; }
.u-hide        { display: none !important; }

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

@media (max-width: 900px) {
  .site-nav { display: none; }
  .nav-toggle { display: block; }
  .site-header__actions .btn { display: none; }
  .site-header.is-open .site-nav-mobile { display: block; }
}

@media (max-width: 640px) {
  :root { --container-pad: 20px; --logo-height: 22px; --logo-height-footer: 40px; }
  .hero__actions .btn { width: 100%; }
}

:focus-visible {
  outline: 2px solid var(--green-ink);
  outline-offset: 3px;
  border-radius: 4px;
}
.section--dark :focus-visible { outline-color: var(--green-soft); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .js .reveal { opacity: 1; transform: none; }
}

@media print {
  .site-header, .site-footer, .map-block, .tool__nav { display: none !important; }
  body { color: #000; }
  .tile { break-inside: avoid; box-shadow: none; height: auto; }
}

.ways__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));

  column-gap: clamp(12px, 2.8vw, 40px);
  row-gap: clamp(12px, 3.4vw, 48px);
}

.ways__grid--pair,
.ways__grid:has(> .way-card:nth-child(2):last-child) {
  max-width: 702px;
  margin-inline: auto;
}

.way-card {
  position: relative;
  isolation: isolate;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  min-height: clamp(380px, 34vw, 460px);
  padding: clamp(26px, 2.6vw, 36px);
  overflow: hidden;
  text-decoration: none;
  border: 1px solid var(--green-line-soft);
  border-radius: var(--radius-large);
  background: var(--surface);
  color: var(--color-ink);
  box-shadow: var(--shadow-card);
  transition: transform var(--speed-medium) var(--ease-out),
              box-shadow var(--speed-medium) var(--ease-out),
              border-color var(--speed-medium) var(--ease-out);
}
.way-card--dark {
  background: var(--surface-card);
  color: var(--color-on-dark);
  border-color: var(--green-line-soft-2);
}
.way-card:hover,
.way-card:focus-visible {
  transform: translateY(-8px);
  box-shadow: var(--shadow-lift);
  border-color: var(--green-line);
}
.way-card--dark:hover,
.way-card--dark:focus-visible { border-color: rgba(255,255,255,.5); }

.js .way-card.reveal:hover,
.js .way-card.reveal:focus-visible { transform: translateY(-8px); }

.way-card__index {
  position: absolute;
  top: clamp(10px, 1.4vw, 18px);
  right: clamp(14px, 1.8vw, 26px);
  z-index: 0;
  font-family: var(--font-display);
  font-size: clamp(3.2rem, 4.6vw, 4.6rem);
  font-weight: 700;
  letter-spacing: -0.06em;
  line-height: 1;
  color: var(--color-ink);
  opacity: .09;
  pointer-events: none;
  transition: opacity var(--speed-medium) var(--ease-out),
              transform var(--speed-medium) var(--ease-out);
}
.way-card--dark .way-card__index { color: #fff; opacity: .14; }
.way-card:hover .way-card__index { opacity: .2; transform: translateY(-4px); }
.way-card--dark:hover .way-card__index { opacity: .28; }

.way-card__body { position: relative; z-index: 2; padding-right: 3.4rem; }
.way-card__label {
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.14em;
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;
  text-transform: uppercase;
  color: var(--green-ink);
}
.way-card--dark .way-card__label { color: var(--on-card-accent); }
.way-card__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 1.9vw, 1.85rem);
  font-weight: 700;
  letter-spacing: -0.034em;
  line-height: 1.1;
}
.way-card--dark .way-card__title { color: #fff; }
.way-card__text {
  margin: 12px 0 0;
  max-width: 34ch;
  font-size: 0.94rem;
  line-height: 1.55;
  color: var(--color-ink-soft);
}
.way-card--dark .way-card__text { color: var(--on-card-soft); }

.way-card__media {
  position: relative;
  z-index: 2;
  flex: 1 1 auto;
  min-height: 150px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
  margin: 18px calc(-1 * clamp(26px, 2.6vw, 36px)) calc(-1 * clamp(26px, 2.6vw, 36px));
  padding: 0;
  border: 0;
  background: none;
}

.way-card__media img {
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: contain;
  object-position: bottom center;
  transition: transform var(--speed-slow) var(--ease-out);
}
.way-card:hover .way-card__media img { transform: scale(1.06); }

.way-card__media img { filter: var(--depth-on-white); }
.way-card--dark .way-card__media img { filter: var(--depth-on-black); }

.way-card__cta {
  position: relative;
  z-index: 2;
  margin-top: auto;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;

  border: 1px solid var(--green-line);
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  transition: background-color var(--speed-fast) var(--ease-out),
              border-color var(--speed-fast) var(--ease-out),
              color var(--speed-fast) var(--ease-out),
              gap var(--speed-fast) var(--ease-out);
}
.way-card--dark .way-card__cta { border-color: rgba(255,255,255,.6); }
.way-card__cta::after { content: "→"; }

.way-card__cta { text-decoration: none; color: inherit; }
.way-card:hover .way-card__cta {
  background: var(--green-ink);
  border-color: var(--green-ink);
  color: #fff;
  gap: 12px;
}
.way-card--dark:hover .way-card__cta {
  background: #fff;
  border-color: #fff;
  color: var(--green-deep);
}

@media (max-width: 700px) {
  .way-card { min-height: 0; }
  .way-card__media { min-height: 150px; }
}

.way-card[data-flip] {
  padding: 0;
  overflow: visible;
  background: transparent;
  border: 0;
  box-shadow: none;
  perspective: 1500px;

  min-height: clamp(452px, 33vw, 472px);
}
.way-card[data-flip].is-flipped { z-index: 3; }

.ways__grid { perspective: 1800px; }

.js .way-card[data-flip].reveal.is-flipped,
.way-card[data-flip].is-flipped {
  transform: translateZ(80px) translateY(-10px);
}

.ways__grid:has(.way-card.is-flipped) .way-card:not(.is-flipped) {
  filter: blur(5px);
  opacity: .45;
  pointer-events: none;
}
.way-card:not(.is-flipped) {
  transition: transform var(--speed-medium) var(--ease-out),
              box-shadow var(--speed-medium) var(--ease-out),
              border-color var(--speed-medium) var(--ease-out),
              filter var(--speed-medium) var(--ease-out),
              opacity var(--speed-medium) var(--ease-out);
}

.js .way-card.reveal:not(.is-visible) { transform: translateY(44px) scale(.97); }
.js .way-card.reveal:not(.is-settled):not(.is-flipped) {
  transition: opacity var(--speed-slow) var(--ease-out) var(--reveal-delay, 0ms),
              transform var(--speed-slow) var(--ease-out) var(--reveal-delay, 0ms),
              box-shadow var(--speed-medium) var(--ease-out),
              border-color var(--speed-medium) var(--ease-out),
              filter var(--speed-medium) var(--ease-out);
}

.way-card[data-flip].is-flipped .way-card__face {
  box-shadow: var(--shadow-hover);
}
.way-card[data-flip]::before { display: none; }

.way-card__face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: clamp(26px, 2.6vw, 36px);
  overflow: hidden;
  border: 1px solid var(--green-line-soft);
  border-radius: var(--radius-large);
  background: var(--surface);
  color: var(--color-ink);
  box-shadow: var(--shadow-card);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transition: transform var(--speed-slow) var(--ease-out),
              border-color var(--speed-medium) var(--ease-out),
              background-color var(--speed-medium) var(--ease-out);
}
.way-card__face--back { transform: rotateY(180deg); }

.way-card.is-flipped .way-card__face--front,
.way-card:not(.is-flipped) .way-card__face--back { pointer-events: none; }
.way-card.is-flipped .way-card__face--front { transform: rotateY(-180deg); }
.way-card.is-flipped .way-card__face--back  { transform: rotateY(0deg); }

.way-card--dark[data-flip] .way-card__face {
  background: var(--surface-card);
  color: var(--color-on-dark);
  border-color: var(--green-line-soft-2);
}
.way-card--dark[data-flip] .way-card__back-title { color: #fff; }
.way-card--dark[data-flip] .way-card__points     { color: var(--on-card-soft); }
.way-card--dark[data-flip] .way-card__points li::before { background: var(--on-card-accent); }

.way-card[data-flip]:hover .way-card__face,
.way-card[data-flip]:focus-visible .way-card__face { border-color: var(--green-line); }
.way-card--dark[data-flip]:hover .way-card__face,
.way-card--dark[data-flip]:focus-visible .way-card__face { border-color: rgba(255,255,255,.5); }

.way-card[data-flip] .way-card__face--front::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--speed-medium) var(--ease-out);
  background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 50%),
              rgba(0,0,0,.055), rgba(0,0,0,0) 62%);
}
.way-card--dark[data-flip] .way-card__face--front::before {
  background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 50%),
              rgba(255,255,255,.11), rgba(255,255,255,0) 62%);
}
.way-card[data-flip]:hover .way-card__face--front::before { opacity: 1; }
.way-card[data-flip].is-flipped .way-card__face--front::before { opacity: 0; }

.way-card[data-flip] .way-card__media { min-height: 90px; }

.way-card__back-title {
  position: relative;
  z-index: 2;
  margin: 0;
  padding-right: 2.4rem;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1.6vw, 1.42rem);
  font-weight: 700;
  letter-spacing: -0.032em;
  line-height: 1.15;
}

.way-card__points {
  position: relative;
  z-index: 2;

  flex: 0 0 auto;
  margin: 18px 0 18px;
  padding: 0;
  list-style: none;
  font-size: 0.9rem;
  line-height: 1.45;
}
.way-card__points li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 11px;
}
.way-card__points li:last-child { margin-bottom: 0; }
.way-card__points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.66em;
  width: 11px;
  height: 1px;
  background: var(--green-ink);
}

.way-card__back-close {
  position: absolute;
  top: 16px;
  right: 18px;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: 15px;
  line-height: 1;
  opacity: .38;
  transition: opacity var(--speed-fast) var(--ease-out);
}
.way-card__back-close:hover { opacity: 1; }

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

@media (max-width: 700px) {
  .way-card[data-flip] { min-height: 470px; }
  .way-card[data-flip] .way-card__media { min-height: 90px; }
}

@media print {
  .way-card__face--back { display: none; }
  .way-card[data-flip] { perspective: none; min-height: 0; }
  .way-card__face--front { position: static; }
}

@media (min-width: 1024px) {

  .js .ways__grid[data-deal] > .way-card.reveal:not(.is-visible) {
    transform: translateY(36px) scale(.96);
  }
  .js .ways__grid[data-deal] > .way-card.reveal:nth-child(1):not(.is-visible) {
    transform: translateX(calc(100% + clamp(12px, 1.4vw, 18px))) translateY(36px) rotate(-5deg) scale(.94);
  }
  .js .ways__grid[data-deal] > .way-card.reveal:nth-child(3):not(.is-visible) {
    transform: translateX(calc(-100% - clamp(12px, 1.4vw, 18px))) translateY(36px) rotate(5deg) scale(.94);
  }
  .js .ways__grid[data-deal] > .way-card.reveal:nth-child(2):not(.is-settled) { z-index: 2; }

  .js .ways__grid[data-deal] > .way-card.reveal:not(.is-settled):not(.is-flipped) {
    transition: opacity .35s var(--ease-out),
                transform .8s cubic-bezier(.2, .9, .25, 1),
                box-shadow var(--speed-medium) var(--ease-out),
                border-color var(--speed-medium) var(--ease-out),
                filter var(--speed-medium) var(--ease-out);
  }
}

.js .ways__grid[data-tilt] > .way-card.reveal.is-settled:not(.is-flipped):hover {
  transform: translateY(-8px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));

  transition-duration: .2s, var(--speed-medium), var(--speed-medium), var(--speed-medium), var(--speed-medium);
}

.ways__grid[data-tilt] .way-card__index {
  transition: opacity var(--speed-medium) var(--ease-out),
              transform var(--speed-medium) var(--ease-out),
              translate .3s var(--ease-out);
}
.ways__grid[data-tilt] .way-card__media { transition: translate .3s var(--ease-out); }
.ways__grid[data-tilt] .way-card:not(.is-flipped):hover .way-card__index {
  translate: calc(var(--par-x, 0) * 10px) calc(var(--par-y, 0) * 8px);
}
.ways__grid[data-tilt] .way-card:not(.is-flipped):hover .way-card__media {
  translate: calc(var(--par-x, 0) * -8px) calc(var(--par-y, 0) * -6px);
}

.card-veil {
  position: fixed;
  inset: 0;
  z-index: 150;
  background: rgba(0, 0, 0, .34);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .45s var(--ease-out);
}
.card-veil.is-on { opacity: 1; pointer-events: auto; }
.way-card-slot { visibility: hidden; pointer-events: none; }
.way-card[data-flip].is-lifted {
  position: fixed;
  z-index: 160;
  margin: 0;
  min-height: 0;
}
.way-card[data-flip].is-lifted .way-card__face { box-shadow: 0 40px 90px rgba(0,0,0,.35); }

.way-card[data-flip] .way-card__face {
  --band: #000;
  --band-ink: #fff;
  --band-h: 36px;
  background: #fff;
}
.way-card--dark[data-flip] .way-card__face {
  --band: var(--green-ink);
  --band-ink: #fff;
  background: var(--surface-pass);
  border-color: rgba(255,255,255,.14);
}
.way-card--black[data-flip] .way-card__face {
  --band: #fff;
  --band-ink: #0a0a0b;
  background: #0b0b0c;
  border-color: rgba(255,255,255,.12);
}

.way-card[data-flip] .way-card__face { padding-top: calc(var(--band-h) + clamp(14px, 1.6vw, 20px)); }
.way-card[data-flip] .way-card__greet,
.way-card[data-flip] .way-card__face.way-card__face--back > .way-card__label {
  position: absolute;
  z-index: 2;
  top: 0; left: 0; right: 0;

  grid-column: auto;
  grid-row: auto;
  height: var(--band-h);
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0 clamp(26px, 2.6vw, 36px);
  background: var(--band);
  color: var(--band-ink);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
  line-height: 1;
  -webkit-font-smoothing: auto;
}
.way-card[data-flip] .way-card__greet {

  font-size: 12px;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: none;
}
.way-card[data-flip] .way-card__face .way-card__index {
  display: flex;
  align-items: center;
  top: 0;
  right: clamp(26px, 2.6vw, 36px);
  z-index: 3;
  height: var(--band-h);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .08em;
  font-variant-numeric: tabular-nums;
  color: var(--band-ink);
  opacity: 1;
  transform: none;
}
.way-card[data-flip] .way-card__face .way-card__index::before {
  content: "No.";
  margin-right: .4em;
  font-size: 10px;
  letter-spacing: .16em;
  opacity: .8;
}

.way-card[data-flip]:not(.way-card--dark) .way-card__label { color: var(--green-deep); }
.way-card[data-flip]:not(.way-card--dark) .way-card__text,
.way-card[data-flip]:not(.way-card--dark) .way-card__points { color: #4a4a4f; }
.way-card--dark[data-flip] .way-card__label { color: var(--green-soft); }
.way-card--dark[data-flip] .way-card__text,
.way-card--dark[data-flip] .way-card__points { color: rgba(255,255,255,.8); }
.way-card--black[data-flip] .way-card__text,
.way-card--black[data-flip] .way-card__points { color: rgba(255,255,255,.75); }
.way-card--dark[data-flip] .way-card__points li::before { background: var(--green-soft); }

.way-card--dark[data-flip] .way-card__media img {
  filter: drop-shadow(1px 1px 0 #2c7b53) drop-shadow(1px 1px 0 #27704c) drop-shadow(1px 1px 0 #226545)
          drop-shadow(1px 1px 0 #1d5a3e) drop-shadow(1px 1px 0 #185037) drop-shadow(1px 1px 0 #134530)
          drop-shadow(1px 1px 0 #0e3b29);
}
.way-card--black[data-flip] .way-card__media img {
  filter: drop-shadow(1px 1px 0 #1d6b45) drop-shadow(1px 1px 0 #1a6040) drop-shadow(1px 1px 0 #16553a)
          drop-shadow(1px 1px 0 #134a33) drop-shadow(1px 1px 0 #10402c) drop-shadow(1px 1px 0 #0d3525)
          drop-shadow(1px 1px 0 #0a2b1e);
}

.way-card--dark[data-flip] .way-card__media { mix-blend-mode: screen; }

.way-card[data-flip] .way-card__body { padding-right: 0; order: 2; }

.way-card[data-flip] .way-card__face--front .way-card__media {
  order: 1;
  margin: 6px 0 14px;
  align-items: center;
}
.way-card[data-flip] .way-card__face--front .way-card__media img { object-position: center; }
.way-card__greet {
  position: relative;
  z-index: 2;
  order: 0;
  margin: 2px 0 6px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #4a4a4f;
  -webkit-font-smoothing: auto;
}
.way-card--dark .way-card__greet { color: rgba(255,255,255,.75); }

.way-card[data-flip] .way-card__face--back {
  display: grid;

  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto 1fr auto;
  column-gap: 14px;
}

.way-card[data-flip] .way-card__face--back .way-card__label { grid-column: 1 / -1; grid-row: 1; margin: 0; padding-right: 52px; }
.way-card__stamp {
  position: absolute;
  z-index: 2;

  top: calc(var(--band-h) + 10px);
  right: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 38px;
  border-radius: 3px;
  outline: 2px dashed currentColor;
  outline-offset: -4px;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 800;
  color: var(--green-deep);
}
.way-card--dark .way-card__stamp { color: var(--green-soft); }
.way-card[data-flip] .way-card__back-title { grid-column: 1 / -1; grid-row: 2; padding-right: 0; margin-top: 0; }

.way-card[data-flip] .way-card__back-title::before { content: ""; float: right; width: 44px; height: 30px; }
.way-card[data-flip] .way-card__points { grid-column: 1 / -1; grid-row: 3; margin: 14px 0 9px; }
.way-card[data-flip] .way-card__cta { grid-column: 1; grid-row: 4; justify-self: start; align-self: end; margin-top: 0; white-space: nowrap; }
.way-card__to {
  position: relative;
  z-index: 2;
  grid-column: 2;
  grid-row: 4;
  align-self: end;
  padding: 0 34px 2px 12px;
  border-left: 1px solid rgba(0,0,0,.14);
  font-size: 12px;
  color: #4a4a4f;
}
.way-card--dark .way-card__to { border-left-color: rgba(255,255,255,.2); color: rgba(255,255,255,.8); }
.way-card__to span { display: block; font-size: 9.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.way-card__to b {
  display: block;
  margin-top: 2px;
  padding-bottom: 3px;
  border-bottom: 1px solid currentColor;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
}
.way-card[data-flip] .way-card__back-close { top: auto; bottom: 18px; }

.way-card--note[data-flip] .way-card__face {
  --rule: rgba(0,0,0,.07);
  --margin: var(--green-ink);
  --m: calc(clamp(26px, 2.6vw, 36px) - 12px);
  background-image:
    linear-gradient(90deg, transparent var(--m), var(--margin) var(--m),
                    var(--margin) calc(var(--m) + 1.5px), transparent calc(var(--m) + 1.5px)),
    repeating-linear-gradient(180deg, transparent 0 25px, var(--rule) 25px 26px);
  background-position: 0 0, 0 calc(var(--band-h) + 14px);
  background-size: 100% 100%, 100% calc(100% - var(--band-h) - 14px);
  background-repeat: no-repeat;
}
.way-card--note.way-card--dark[data-flip] .way-card__face {
  --rule: rgba(255,255,255,.08);
  --margin: var(--green-soft);
}

.way-card--disc[data-flip] { min-height: 0; aspect-ratio: 1 / 1; }

.ways__grid:has(> .way-card--disc) {
  column-gap: clamp(12px, 2vw, 28px);
  margin-inline: calc(-1 * clamp(0px, (100vw - 1180px) / 2, 64px));
}
.way-card--disc[data-flip] .way-card__face {
  padding: 10% 12%;
  border-radius: 50%;
  border: clamp(6px, .7vw, 9px) solid var(--band);
  align-items: center;
  justify-content: center;
  text-align: center;
}
.way-card--disc[data-flip]:hover .way-card__face,
.way-card--disc[data-flip]:focus-visible .way-card__face { border-color: var(--band); }

.way-card--disc[data-flip] .way-card__greet {
  position: absolute;
  top: 9%; left: 0; right: 0;
  height: auto;
  justify-content: center;
  padding: 0;
  background: none;
  color: inherit;
  opacity: .7;
  font-size: 11.5px;
}
.way-card--disc[data-flip] .way-card__face .way-card__index {
  top: auto; bottom: 7%;
  right: 50%;
  transform: translateX(50%);
  height: auto;
  color: inherit;
}
.way-card--disc[data-flip] .way-card__face--front .way-card__media {

  flex: 0 1 44%;
  min-height: 90px;
  width: 80%;
  margin: 6% 0 6px;
}
.way-card--disc[data-flip] .way-card__body { width: 100%; }
.way-card--disc[data-flip] .way-card__label { font-size: 10.5px; margin-bottom: 6px; }
.way-card--disc[data-flip] .way-card__title { font-size: clamp(17px, 1.3vw, 19.5px); letter-spacing: -.02em; }
.way-card--disc[data-flip] .way-card__face--front .way-card__text { display: none; }

.way-card--disc[data-flip] .way-card__face--front {
  --bezel: #0b0b0c; --bezel-ink: #fff; --tick: rgba(255,255,255,.5);
  --face: #fff; --ring: #0a0a0b; --mark: var(--green-soft);
  border: 0;
  padding: 24% 20%;
  background:
    radial-gradient(circle closest-side, var(--face) 0 80%, var(--ring) 80% 81%, transparent 81.3%),
    radial-gradient(circle closest-side, var(--bezel) 0 89%, transparent 89.3%),
    conic-gradient(var(--bezel) 0 14deg, transparent 14deg 158deg, var(--bezel) 158deg 202deg, transparent 202deg 346deg, var(--bezel) 346deg),
    repeating-conic-gradient(from -.7deg, var(--tick) 0 1.4deg, transparent 1.4deg 12deg),
    var(--bezel);
}
.way-card--disc.way-card--dark[data-flip] .way-card__face--front {
  --bezel: var(--green-ink); --tick: rgba(255,255,255,.6);
  --face: var(--surface-pass); --ring: var(--green-soft); --mark: #000;
}
.way-card--disc.way-card--black[data-flip] .way-card__face--front {
  --bezel: #0b0b0c; --tick: rgba(255,255,255,.5);
  --face: #0b0b0c; --ring: rgba(255,255,255,.7); --mark: var(--green-soft);
}

.way-card--disc[data-flip] .way-card__face--front::after {
  content: "";
  position: absolute;
  z-index: 3;
  top: 0; left: 50%;
  transform: translateX(-50%);
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 10px solid var(--mark);
}

.way-card--disc[data-flip] .way-card__face--front .way-card__index {
  top: 4.2%; bottom: auto;
  font-size: 12px;
  color: var(--bezel-ink);
}
.way-card--disc[data-flip] .way-card__face--front .way-card__greet {
  top: auto; bottom: 4.6%;
  color: var(--bezel-ink);
  opacity: .85;
  font-size: 10.5px;
}
.way-card--disc[data-flip] .way-card__face--front .way-card__media {
  flex: 0 1 50%;
  min-height: 56px;
  width: 90%;
  margin: 0 0 6px;
}

.way-card--disc[data-flip] .way-card__face--back { display: flex; flex-direction: column; }
.way-card--disc[data-flip] .way-card__stamp,
.way-card--disc[data-flip] .way-card__to { display: none; }
.way-card--disc[data-flip] .way-card__face.way-card__face--back > .way-card__label {
  position: static;
  height: auto;
  justify-content: center;
  padding: 0;
  background: none;
  color: inherit;
  opacity: .7;
  font-size: 10.5px;
}
.way-card--disc[data-flip] .way-card__back-title { margin: 6px 0 0; font-size: clamp(16px, 1.35vw, 19px); }
.way-card--disc[data-flip] .way-card__back-title::before { content: none; }
.way-card--disc[data-flip] .way-card__points { margin: 8px 0 10px; font-size: 12px; line-height: 1.36; }
.way-card--disc[data-flip] .way-card__points li { padding-left: 0; margin-bottom: 5px; }
.way-card--disc[data-flip] .way-card__points li::before { display: none; }
.way-card--disc[data-flip] .way-card__cta { align-self: center; margin: 0; }
.way-card--disc[data-flip] .way-card__back-close { top: 2.5%; bottom: auto; right: 50%; transform: translateX(50%); width: 24px; height: 24px; font-size: 14px; }

.cf-card--dark  { background: var(--surface-pass); }
.cf-card--dark .cf-card__label { color: var(--green-soft); }
.cf-card--black { background: #0b0b0c; }

.tile--dark { background: var(--surface-pass); }
.tile--dark .tile__eyebrow { color: var(--green-soft); }
.tile--dark .tile__sub { color: var(--on-pass-soft); }

.tile-grid { counter-reset: tile; }
.tile {
  --band: #000; --band-ink: #fff; --band-h: 36px;
  counter-increment: tile;
  padding-top: calc(var(--band-h) + clamp(22px, 2.4vw, 32px));
}
.tile--dark  { --band: var(--green-ink); }
.tile--black { --band: #fff; --band-ink: #0a0a0b; background: #0b0b0c; border-color: rgba(255,255,255,.12); }
.tile--black .tile__eyebrow { color: var(--green-soft); }
.tile--black .tile__sub { color: rgba(255,255,255,.75); }
.tile::before,
.tile::after {
  position: absolute;
  z-index: 2;
  top: 0;
  height: var(--band-h);
  display: flex;
  align-items: center;
  color: var(--band-ink);
  -webkit-font-smoothing: auto;
}
.tile::before {
  content: "FabNri \00B7" " About";
  left: 0; right: 0;
  padding: 0 22px;
  background: var(--band);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .03em;
}
.tile::after {
  content: "No.\2002" counter(tile, decimal-leading-zero);
  right: 22px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .08em;
  font-variant-numeric: tabular-nums;
}

@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-9px); }
}
.js .way-card__media img,
.js .way-card__media video,
.js .way-card__media svg,
.js .tile__media img {
  animation: floatY 9s ease-in-out infinite;
}

.js .tile-grid > :nth-child(3n+2) .tile__media img { animation-delay: -3s; }
.js .tile-grid > :nth-child(3n+3) .tile__media img { animation-delay: -6s; }

.js .ways__grid > :nth-child(3n+2) .way-card__media img { animation-delay: -3s; }
.js .ways__grid > :nth-child(3n+3) .way-card__media img { animation-delay: -6s; }
.js .way-card:hover .way-card__media img { animation-play-state: paused; }

.media-loop {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: calc(var(--radius-card) - 6px);
}

@media (prefers-reduced-motion: reduce) {
  .js .way-card__media img,
  .js .way-card__media video,
  .js .way-card__media svg,
  .js .tile__media img { animation: none; }
}

.section--tint {
  background: var(--surface);
  border-top: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
}

.topic-hero { padding-block: clamp(40px, 6vw, 84px) clamp(32px, 4vw, 60px); }

.topic-hero__text {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(20px, 4vw, 60px);
  align-items: end;
}
.topic-hero__text .t-eyebrow { grid-column: 1 / -1; margin-bottom: 4px; }
.topic-hero__text h1 {
  margin: 0;
  font-size: clamp(2.3rem, 5.2vw, 4rem);
  letter-spacing: -0.038em;
  line-height: 1.02;
}
.topic-hero__text .t-lead { margin: 0 0 0.4em; max-width: 40ch; }

.topic-hero__figure {
  margin: clamp(28px, 4vw, 52px) 0 0;
  padding: clamp(20px, 3vw, 40px);
  background: var(--surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-large);
  display: flex;
  align-items: center;
  justify-content: center;
}
.topic-hero__figure img {
  width: min(100%, 460px);
  max-height: 300px;
  height: auto;
}

@media (max-width: 860px) {
  .topic-hero__text { grid-template-columns: 1fr; align-items: start; }
  .topic-hero__text .t-lead { margin: 0; }
}

.stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: clamp(22px, 3vw, 44px);
}
.stat { padding-top: 18px; border-top: 2px solid var(--green-ink); }
.stat__value {
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 4.2vw, 3.1rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
  margin: 0 0 12px;
}

.stat__value small {
  font-size: 0.42em;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--color-ink-soft);
  margin-left: 0.35em;
}
.stat__label {
  margin: 0;
  max-width: 28ch;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--color-ink-soft);
}

.pullquote {
  max-width: none;
  margin: 0;
  padding-left: clamp(18px, 2.4vw, 30px);
  border-left: 3px solid var(--green-ink);
}
.pullquote p {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 3vw, 2.15rem);
  font-weight: 600;
  letter-spacing: -0.032em;
  line-height: 1.18;
}
.pullquote cite {
  display: block;
  margin-top: 16px;
  font-style: normal;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--green-ink);
}

.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(12px, 1.6vw, 22px);
}
.split__panel {
  padding: clamp(24px, 3vw, 38px);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card);
  background: var(--surface);
}

.split__panel--accent {
  background: var(--surface-dark);
  border-color: #1c1c1e;
  color: var(--color-on-dark);
}
.split__panel--accent h3 { color: #fff; }
.split__panel--accent p  { color: var(--color-on-dark-soft); }
.split__panel--accent .split__label { color: var(--green-soft); }
.split__label {
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--green-ink);
}
.split__panel h3 {
  margin: 0 0 12px;
  font-size: var(--text-h3);
  font-weight: 700;
  letter-spacing: -0.028em;
}
.split__panel p {
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.55;
  color: var(--color-ink-soft);
}

.tool-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: clamp(24px, 3vw, 36px);
  border-radius: var(--radius-large);
  background: var(--color-bg-dark);
  color: var(--color-on-dark);
}
.tool-strip__text { max-width: 46ch; }
.tool-strip h3 {
  margin: 0 0 6px;
  font-size: var(--text-h3);
  font-weight: 700;
  letter-spacing: -0.028em;
  color: #fff;
}
.tool-strip p { margin: 0; font-size: 0.95rem; color: var(--color-on-dark-soft); }

@media (max-width: 700px) {
  .pullquote { padding-left: 16px; }
}

@media print {
  .page-progress, .tool-strip { display: none !important; }
  .split__panel, .notebox { break-inside: avoid; }
}

:root {

  --rail-card-w: clamp(260px, 28vw, 390px);
  --rail-card-h: clamp(390px, 42vw, 470px);
  --rail-gap:    16px;
}

.rail-section { padding-block: clamp(44px, 6vw, 84px); }
.rail-section + .rail-section { padding-top: 0; }

.rail__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: clamp(20px, 2.5vw, 32px);
}
.rail__head h2 { margin: 0; }
.rail__head .t-eyebrow { margin-bottom: 8px; }

.rail__nav { display: flex; gap: 8px; flex: none; }
.rail__arrow {
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid var(--color-line);
  border-radius: 50%;
  background: var(--color-bg);
  color: var(--color-ink);
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
  transition: background-color var(--speed-fast) var(--ease-out),
              border-color var(--speed-fast) var(--ease-out),
              color var(--speed-fast) var(--ease-out),
              opacity var(--speed-fast) var(--ease-out);
}
.rail__arrow:hover { background: var(--green-ink); border-color: var(--green-ink); color: #fff; }
.rail__arrow[disabled] { opacity: 0.3; cursor: default; }
.rail__arrow[disabled]:hover { background: var(--color-bg); border-color: var(--color-line); color: var(--color-ink); }

.rail__nav.is-hidden { display: none; }

.rail {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-padding-left: max(var(--container-pad), calc((100vw - var(--container-width)) / 2));
}
.rail::-webkit-scrollbar { display: none; }

.rail__track {
  display: flex;
  gap: var(--rail-gap);
  padding-inline: max(var(--container-pad), calc((100vw - var(--container-width)) / 2));
  padding-block: 6px 10px;
  width: max-content;
}

.rail-card {
  position: relative;
  flex: 0 0 var(--rail-card-w);
  width: var(--rail-card-w);
  height: var(--rail-card-h);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  padding: clamp(22px, 2.2vw, 30px);
  overflow: hidden;
  border-radius: var(--radius-large);
  text-decoration: none;
  box-shadow: var(--shadow-card);
  transition: transform var(--speed-medium) var(--ease-out),
              box-shadow var(--speed-medium) var(--ease-out);
}
.rail-card:hover,
.rail-card:focus-visible {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lift);
  border-color: var(--green-line);
}
.rail-card--black:hover,
.rail-card--black:focus-visible { border-color: var(--green-line-2); }

.rail-card--black,
.rail-card--dark {
  background: var(--surface-dark);
  color: var(--color-on-dark);
  border: 1px solid #1c1c1e;
}
.rail-card--white,
.rail-card--grey,
.rail-card--tint {
  background: var(--surface);
  color: var(--color-ink);
  border: 1px solid var(--color-line);
}

.rail-card__body { position: relative; z-index: 2; flex: 0 0 auto; }
.rail-card__label {
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--green-ink);
}
.rail-card--black .rail-card__label { color: var(--green-soft); }
.rail-card__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.5vw, 1.55rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.12;
}
.rail-card--black .rail-card__title { color: #fff; }
.rail-card__text {
  margin: 10px 0 0;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--color-ink-soft);
}
.rail-card--black .rail-card__text { color: var(--color-on-dark-soft); }

.rail-card__media {
  position: relative;
  z-index: 2;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 16px 0 8px;
}
.rail-card__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform var(--speed-slow) var(--ease-out);
}
.rail-card:hover .rail-card__media img { transform: scale(1.06); }

.rail-card__cta {
  position: relative;
  z-index: 2;
  margin-top: auto;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  padding: 8px 18px;
  border: 1px solid currentColor;
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  transition: background-color var(--speed-fast) var(--ease-out),
              border-color var(--speed-fast) var(--ease-out),
              color var(--speed-fast) var(--ease-out);
}
.rail-card:hover .rail-card__cta {
  background: var(--green-ink);
  border-color: var(--green-ink);
  color: #fff;
}
.rail-card--black:hover .rail-card__cta {
  background: var(--green-bright);
  border-color: var(--green-bright);
  color: #04220a;
}

.rail-card--photo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: var(--card-img);
  background-size: cover;
  background-position: center;
  transition: transform var(--speed-slow) var(--ease-out);
}
.rail-card--photo:hover::before { transform: scale(1.05); }

.rail-card--photo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.rail-card--black.rail-card--photo::after {
  background: linear-gradient(180deg, rgba(0,0,0,.78) 0%, rgba(0,0,0,.45) 55%, rgba(0,0,0,.72) 100%);
}
.rail-card--grey.rail-card--photo::after {
  background: linear-gradient(180deg, rgba(255,255,255,.88) 0%, rgba(255,255,255,.62) 55%, rgba(255,255,255,.85) 100%);
}
.rail-card--white.rail-card--photo::after,
.rail-card--tint.rail-card--photo::after {
  background: linear-gradient(180deg, rgba(255,255,255,.90) 0%, rgba(255,255,255,.66) 55%, rgba(255,255,255,.88) 100%);
}

@media (max-width: 700px) {
  :root { --rail-card-w: 76vw; --rail-card-h: 420px; }
  .rail__nav { display: none; }
  .rail__head { align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .rail { scroll-behavior: auto; }
}

@media print {
  .rail { overflow: visible; }
  .rail__track { flex-wrap: wrap; width: auto; }
  .rail__nav { display: none !important; }
  .rail-card { break-inside: avoid; box-shadow: none; height: auto; }
}

.page-progress {
  position: fixed;

  top: var(--nav-height); left: 0; right: 0;
  height: 2px;
  z-index: 200;
  pointer-events: none;
  background: transparent;
}
.page-progress::after {
  content: "";
  display: block;
  height: 100%;
  background: var(--green-ink);
  transform: scaleX(var(--progress, 0));
  transform-origin: left center;

  opacity: 0;
  transition: opacity var(--speed-fast) linear;
}
.page-progress.is-on::after { opacity: 1; }

.page-progress { transition: transform var(--speed-medium) var(--ease-out); }
html.header-away .page-progress { transform: translateY(calc(-1 * var(--nav-height))); }
@media (prefers-reduced-motion: reduce) {
  .page-progress { transition: none; }
}

.site-header {
  transition: transform var(--speed-medium) var(--ease-out),
              height var(--speed-medium) var(--ease-out),
              background-color var(--speed-medium) var(--ease-out),
              box-shadow var(--speed-medium) var(--ease-out);
}

.site-header.is-hidden { transform: translateY(-100%); }
.site-header.is-open,
.site-header.is-open.is-hidden { transform: none; }

@media (prefers-reduced-motion: reduce) {
  .site-header { transition: none; }
}
.site-header__inner {
  transition: height var(--speed-medium) var(--ease-out);
}
.site-header.is-stuck {
  background: rgba(255,255,255,0.86);
  box-shadow: 0 1px 0 rgba(0,0,0,.06), 0 8px 30px rgba(0,0,0,.05);
}

[data-spotlight] { position: relative; isolation: isolate; }
[data-spotlight]::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--speed-medium) var(--ease-out);
  background: radial-gradient(
      340px circle at var(--mx, 50%) var(--my, 50%),
      rgba(0,0,0,.055),
      rgba(0,0,0,0) 62%);
}
[data-spotlight]:hover::before { opacity: 1; }
.tile--dark[data-spotlight]::before,
.tile--featured[data-spotlight]::before,
.way-card--dark[data-spotlight]::before,
.rail-card--black[data-spotlight]::before,
.showcase[data-spotlight]::before {
  background: radial-gradient(
      380px circle at var(--mx, 50%) var(--my, 50%),
      rgba(255,255,255,.11),
      rgba(255,255,255,0) 62%);
}
@media (hover: none) {
  [data-spotlight]::before { display: none; }
}

[data-magnetic] {
  transform: translate(var(--dx, 0px), var(--dy, 0px));
  transition: transform var(--speed-fast) var(--ease-out),
              background-color var(--speed-fast) var(--ease-out),
              color var(--speed-fast) var(--ease-out),
              border-color var(--speed-fast) var(--ease-out);
}
.btn[data-magnetic]:hover { transform: translate(var(--dx, 0px), calc(var(--dy, 0px) - 1px)); }
@media (hover: none) {
  [data-magnetic] { transform: none; }
}

.hero { position: relative; overflow: hidden; }
.hero__ghost {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 0;
  transform: translate(-50%, 0);
  top: auto;
  bottom: -0.30em;
  font-family: var(--font-display);
  font-size: clamp(11rem, 30vw, 30rem);
  font-weight: 700;
  letter-spacing: -0.06em;
  line-height: 1;
  white-space: nowrap;
  color: var(--color-ink);
  opacity: .022;
  pointer-events: none;
  user-select: none;
}
.hero--dark .hero__ghost { color: #fff; opacity: .05; }

.hero__inner,
.hero > .container { position: relative; z-index: 1; }

.hero__ghost--left {
  left: max(var(--container-pad), calc((100vw - var(--container-width)) / 2));
  transform: none;
  font-size: clamp(7rem, 18vw, 17rem);
}

.line-mask { display: block; overflow: hidden; }
.line-mask > span {
  display: block;
  transform: translateY(105%);
  transition: transform 0.9s var(--ease-out);
  transition-delay: var(--line-delay, 0ms);
}
.is-lines-in .line-mask > span { transform: translateY(0); }

.marquee {
  overflow: hidden;
  border-block: 1px solid var(--color-line);
  padding-block: 20px;
}
.marquee__track {
  display: flex;
  width: max-content;
  align-items: center;
  gap: 0;
  animation: marqueeSlide 42s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }

.marquee__track > span {
  display: inline-flex;
  align-items: center;
  padding-inline: 30px;
  font-family: var(--font-display);
  font-size: clamp(0.95rem, 1.5vw, 1.2rem);
  font-weight: 600;
  letter-spacing: -0.015em;
  white-space: nowrap;
  color: var(--color-ink-soft);
}

.marquee__track > span::after {
  content: "";
  width: 5px; height: 5px;
  margin-left: 30px;
  border-radius: 1px;
  background: var(--green-ink);
  transform: rotate(45deg);
  opacity: .85;
}
@keyframes marqueeSlide {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
}

.marquee--rates .marquee__track > span {
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  color: var(--color-ink);
}

.marquee--rates .marquee__track > span { color: var(--green-ink); }

.marquee--rates .marquee__track > span.marquee__label {
  color: var(--green-ink);
  font-family: var(--font-body);
  font-size: clamp(0.72rem, 0.95vw, 0.82rem);
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  -webkit-font-smoothing: auto;
}

.marquee__rate { gap: 0; }

.marquee__flag { margin-right: 11px; font-size: clamp(1.4rem, 2.1vw, 1.75rem); line-height: 1; }
.marquee__code {
  margin-right: 9px;
  font-family: var(--font-body);
  font-size: clamp(0.72rem, 0.95vw, 0.84rem);
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--color-ink-soft);
  -webkit-font-smoothing: auto;
}
.marquee__fig {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 1.7vw, 1.4rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--green-ink);
}
.marquee__rupee { margin-right: 1px; font-weight: 500; opacity: .75; }

@media (prefers-reduced-motion: reduce) {
  .marquee--rates .marquee__track {
    width: auto;
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 6px;
  }
  .marquee--rates .marquee__track > span[aria-hidden="true"] { display: none; }
  .marquee--rates .marquee__track > span { padding-inline: 16px; }
}

@media (prefers-reduced-motion: reduce) and (max-width: 720px) {
  .marquee--rates .marquee__track > span:nth-child(n+10) { display: none; }
}

.dtaa-row { padding: 16px 0; border-top: 1px solid var(--color-line); }
.dtaa-row:first-child { border-top: 0; }
.dtaa-row__label {
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
}
.dtaa-row__pair { display: flex; gap: 24px; }
.dtaa-side { flex: 1; min-width: 0; }
.dtaa-side__figure {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: clamp(1rem, 2vw, 1.25rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
}
.dtaa-side.is-lower .dtaa-side__figure { color: var(--green-ink); }

.dtaa-side__tag {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 8px;
  border: 1px solid var(--green-ink);
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  vertical-align: 2px;
}
.dtaa-bar {
  height: 9px;
  border-radius: 999px;
  background: var(--color-line);
  overflow: hidden;
}
.dtaa-bar__fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: var(--color-ink);
  transition: width var(--speed-slow, .6s) var(--ease-out);
}
.dtaa-side.is-lower .dtaa-bar__fill { background: var(--green-ink); }

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

@media (max-width: 560px) {
  .dtaa-row__pair { flex-direction: column; gap: 14px; }
}

.stat-band {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: clamp(24px, 3vw, 48px);
}

@media (min-width: 561px) and (max-width: 1023px) {
  .stat-band { grid-template-columns: repeat(2, 1fr); }
}
.stat-band__item { padding-top: 20px; border-top: 2px solid var(--green-ink); }
.section--dark .stat-band__item { border-top-color: var(--green-bright); }
.stat-band__value {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.section--dark .stat-band__value { color: #fff; }
.stat-band__value small {
  font-size: 0.4em;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-left: 0.2em;
  color: var(--color-ink-soft);
}
.stat-band__label {
  margin: 0;
  max-width: 24ch;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--color-ink-soft);
}
.section--dark .stat-band__label { color: var(--color-on-dark-soft); }

.index-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--color-line); }
.index-list li { border-bottom: 1px solid var(--color-line); }
.section--dark .index-list,
.section--dark .index-list li { border-color: #1f1f22; }

.index-row {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: clamp(16px, 3vw, 44px);
  padding: clamp(18px, 2.2vw, 28px) 44px clamp(18px, 2.2vw, 28px) 0;
  text-decoration: none;
  color: inherit;
  transition: padding-left var(--speed-medium) var(--ease-out);
}
.index-row:hover { padding-left: 14px; }

.index-row::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 0; height: 2px;
  background: var(--green-ink);
  transform: translateY(-50%);
  transition: width var(--speed-medium) var(--ease-out);
}
.index-row:hover::before { width: 8px; }
.section--dark .index-row::before { background: var(--green-bright); }

.index-row::after {
  content: "→";
  position: absolute;
  right: 4px; top: 50%;
  transform: translateY(-50%) translateX(-8px);
  opacity: 0;
  transition: opacity var(--speed-medium) var(--ease-out),
              transform var(--speed-medium) var(--ease-out);
}
.index-row:hover::after { opacity: 1; transform: translateY(-50%) translateX(0); }

.index-row__num {
  flex: none;
  width: 3ch;
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--color-ink-soft);
  transition: color var(--speed-fast) var(--ease-out);
}
.index-row:hover .index-row__num { color: var(--green-ink); }
.section--dark .index-row:hover .index-row__num { color: var(--green-soft); }
.index-row__main { display: block; }
.index-row__title {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2vw, 1.55rem);
  font-weight: 600;
  letter-spacing: -0.028em;
  line-height: 1.15;
}
.section--dark .index-row__title { color: #fff; }
.index-row__note {
  display: block;
  margin-top: 6px;
  max-width: 60ch;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--color-ink-soft);
}
.section--dark .index-row__note { color: var(--color-on-dark-soft); }

.acc { border-top: 1px solid var(--color-line); }
.acc__item { border-bottom: 1px solid var(--color-line); }
.acc__q {
  position: relative;
  list-style: none;
  cursor: pointer;
  padding: clamp(18px, 2vw, 24px) 46px clamp(18px, 2vw, 24px) 0;
  font-family: var(--font-display);
  font-size: clamp(1.02rem, 1.5vw, 1.2rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  transition: color var(--speed-fast) var(--ease-out);
}
.acc__q::-webkit-details-marker { display: none; }
.acc__q:hover { color: var(--green-ink); }

.acc__q::after,
.acc__q::before {
  content: "";
  position: absolute;
  right: 8px; top: 50%;
  background: var(--color-ink);
  transition: transform var(--speed-medium) var(--ease-out),
              background-color var(--speed-fast) var(--ease-out);
}
.acc__q::before { width: 16px; height: 2px; transform: translateY(-50%); }
.acc__q::after  { width: 2px; height: 16px; transform: translate(7px, -50%); right: 15px; }
.acc__item[open] .acc__q::after { transform: translate(7px, -50%) scaleY(0); }
.acc__item[open] .acc__q { color: var(--green-ink); }
.acc__item[open] .acc__q::before { background: var(--green-ink); }
.acc__a {
  padding: 0 46px clamp(20px, 2.2vw, 28px) 0;
  font-size: 0.98rem;
  line-height: 1.7;
  color: var(--color-ink-soft);
  animation: accOpen var(--speed-medium) var(--ease-out);
}
.acc__a p { margin: 0 0 0.9em; }
@keyframes accOpen {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

.chipbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: clamp(24px, 3vw, 38px);
}
.chip {
  padding: 9px 18px;
  border: 1px solid var(--color-line-firm);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--color-ink);
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  transition: background-color var(--speed-fast) var(--ease-out),
              border-color var(--speed-fast) var(--ease-out),
              color var(--speed-fast) var(--ease-out),
              transform var(--speed-fast) var(--ease-out);
}
.chip:hover { border-color: var(--green-ink); color: var(--green-ink); transform: translateY(-1px); }
.chip.is-active {
  background: var(--color-ink);
  border-color: var(--color-ink);
  color: #fff;
}
.chip.is-active:hover { background: var(--green-ink); border-color: var(--green-ink); color: #fff; }

.chipbar:has(+ .chipbar) { margin-bottom: 10px; }

.is-filtered-out { display: none !important; }

.showcase {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(24px, 4vw, 60px);
  padding: clamp(30px, 4vw, 58px);
  border: 1px solid #1c1c1e;
  border-radius: var(--radius-large);
  background: var(--surface-dark);
  color: var(--color-on-dark);
  overflow: hidden;
}
.showcase__text { position: relative; z-index: 2; }
.showcase__text h2, .showcase__text h3 { color: #fff; margin: 0 0 14px; }
.showcase__text p { color: var(--color-on-dark-soft); max-width: 44ch; }
.showcase__text .t-eyebrow { color: var(--green-soft); }
.showcase__text .btn { margin-top: 22px; }
.showcase__media {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(18px, 2.4vw, 32px);
  border: 1px solid #232326;
  border-radius: var(--radius-card);
  background: var(--inset-dark);
}
.showcase__media img { width: 100%; max-height: 300px; object-fit: contain; }

.showcase-stack {
  display: grid;
  gap: clamp(12px, 1.4vw, 18px);
}
@media (min-width: 900px) {
  .showcase-stack { grid-template-columns: 1fr 1fr; align-items: stretch; }
}
.showcase--compact {
  padding: clamp(22px, 2.4vw, 34px);
  gap: clamp(18px, 2.6vw, 40px);
}

.showcase-stack .showcase--compact {
  grid-template-columns: 1fr;
  align-items: start;
  gap: clamp(16px, 1.8vw, 22px);
}
.showcase-stack .showcase--compact .showcase__media { margin-top: auto; }
.showcase--compact .showcase__text > h2 {
  font-size: clamp(1.45rem, 2.3vw, 2rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin-bottom: 10px;
}
.showcase--compact .showcase__text > p { font-size: var(--text-small); margin-bottom: 18px; }
.showcase--compact .showcase__media { padding: clamp(10px, 1.2vw, 16px); }
.showcase--compact .showcase__media img { max-height: 172px; }

.showcase .btn--primary { background: #fff; color: #000; }
.showcase .btn--primary:hover { background: var(--green-soft); color: #04220a; }
.showcase .btn--ghost { color: #fff; border-color: rgba(255,255,255,.35); }
.showcase .btn--ghost:hover { border-color: var(--green-soft); color: var(--green-soft); }
.showcase .t-lead, .showcase .t-small { color: var(--color-on-dark-soft); }
.showcase--light .btn--primary { background: var(--color-accent); color: #fff; }
.showcase--light .btn--primary:hover { background: var(--green-ink); }
.showcase--light .btn--ghost { color: var(--color-ink); border-color: var(--color-line); }

.showcase--light {
  background: var(--surface);
  color: var(--color-ink);
  border-color: var(--color-line);
}
.showcase--light h2, .showcase--light h3 { color: var(--color-ink); }
.showcase--light p { color: var(--color-ink-soft); }
.showcase--light .t-eyebrow { color: var(--green-ink); }
.showcase--light .showcase__media { background: var(--inset-light); border-color: var(--color-line); }
@media (max-width: 820px) {
  .showcase { grid-template-columns: 1fr; }
}

.rule-head {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: clamp(22px, 2.6vw, 34px);
}
.rule-head h2, .rule-head h3 { margin: 0; flex: none; }
.rule-head::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--green-ink) 0 46px, var(--color-line) 46px);
}
.section--dark .rule-head::after {
  background: linear-gradient(90deg, var(--green-bright) 0 46px, #26262a 46px);
}

@media (prefers-reduced-motion: reduce) {
  .line-mask > span { transform: none; }
  [data-magnetic] { transform: none !important; }
}

@media print {
  .page-progress, .marquee, .chipbar { display: none !important; }
  .showcase, .way-card { break-inside: avoid; box-shadow: none; }
}

.index-row--static { cursor: default; padding-right: 0; }
.index-row--static::after { content: none; }
.index-row--static:hover { padding-left: 0; }
.index-row--static:hover::before { width: 0; }
.index-row--static:hover .index-row__num { color: var(--color-ink-soft); }

.index-row__tag {
  flex: none;
  margin-left: auto;
  align-self: center;
  padding: 6px 14px;
  border: 1px solid var(--color-line-firm);
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
  white-space: nowrap;
}
.section--dark .index-row__tag { border-color: #2a2a2e; color: var(--color-on-dark-soft); }

.index-row__tag--live { border-color: var(--green-ink); color: var(--green-ink); }
.section--dark .index-row__tag--live { border-color: var(--green-bright); color: var(--green-soft); }

@media (max-width: 620px) {
  .index-row { flex-wrap: wrap; padding-right: 0; }
  .index-row__tag { margin-left: 0; margin-top: 10px; }
  .index-row::after { content: none; }
}

.trip-stage { perspective: 1500px; }
.trip {
  position: relative; overflow: hidden;
  border: 0;
  border-radius: var(--radius-large);
  background: transparent;
  transform-origin: 50% 62%;
  will-change: transform;

  transition: box-shadow var(--speed-slow) var(--ease-out);
}

.trip__art { filter: var(--depth-on-white) drop-shadow(0 12px 22px rgba(0,0,0,.16));
             transition: filter var(--speed-slow) var(--ease-out); }
@media (hover: hover) {
  .trip-stage:hover .trip__art {
    filter: var(--depth-on-white) drop-shadow(0 20px 34px rgba(0,0,0,.22));
  }
}
.trip svg { display: block; width: 100%; height: auto; }

.trip > svg + svg { position: absolute; left: 0; top: 0; }
.fig { transition: transform 1.25s cubic-bezier(.34,.02,.28,1); }
.trip__far { opacity: .9; }

.ln    { fill: none; stroke: var(--globe-sea); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }

.sl    { fill: #fff; stroke: none; }
.win   { fill: #d2d2d7; stroke: none; }
.lit   { fill: var(--globe-sea); stroke: none; }
.far   { fill: #ececf0; stroke: none; }
.dot   { fill: var(--globe-sea); }
.fill  { fill: var(--globe-sea); stroke: none; }
.trail { fill: none; stroke: rgba(10,11,10,.32); stroke-width: 1.2; stroke-dasharray: 3 8; }
.ground{ stroke: rgba(10,11,10,.22); stroke-width: 1.2; }

.sl2   { fill: #fff; stroke: var(--globe-sea); stroke-width: 1.2; stroke-linejoin: round; }

.beadmark { fill: var(--globe-sea); stroke: none; }

.kite     { transform-box: fill-box; transform-origin: 50% 0; }
.kite--1  { animation: tripKite1 9s ease-in-out infinite alternate; }
.kite--2  { animation: tripKite2 11s ease-in-out infinite alternate; }
@keyframes tripKite1 { from { transform: rotate(-7deg) translateY(0) }    to { transform: rotate(9deg) translateY(-14px) } }
@keyframes tripKite2 { from { transform: rotate(8deg) translateY(-6px) }  to { transform: rotate(-6deg) translateY(10px) } }

.trip__fore { opacity: .9; }
.trip__far  { animation: tripCreep 210s linear infinite alternate; }
@keyframes tripCreep { from { transform: translateX(0) } to { transform: translateX(-26px) } }
.grit  { stroke: rgba(10,11,10,.45); stroke-width: 1.4; stroke-linecap: round; }
.stk   { fill: none; stroke: var(--globe-sea); stroke-width: 2.5; stroke-linecap: round; }
.fillw { fill: var(--globe-sea); }

.spot        { cursor: pointer; opacity: .72; transition: opacity .35s var(--ease-out); }
.spot.is-active  { opacity: 1; }
.spot__hit   { fill: transparent; }
.spot__cap   { fill: var(--color-ink); font-size: 20px; font-weight: 600; font-family: var(--font-display); }
.spot__sub   { fill: var(--color-ink-soft); font-size: 14px; font-family: var(--font-body); }
.spot.is-active .spot__cap { fill: var(--green-ink); }

.spot__count {
  fill: var(--green-ink);
  font-size: 14px;
  font-weight: 600;
  font-family: var(--font-body);
  opacity: 0;
  transition: opacity var(--speed-medium) var(--ease-out);
}
.spot.is-active .spot__count { opacity: 1; }
.spot.is-active .spot__sub   { opacity: 0; }
.spot__sub { transition: opacity var(--speed-medium) var(--ease-out); }
.spot:focus         { outline: none; }
.spot:focus-visible { outline: none; }
.spot:focus-visible .spot__hit { stroke: var(--green-ink); stroke-width: 2; }

@keyframes tripStepA { 0%,49.9% { opacity:1 } 50%,100% { opacity:0 } }
@keyframes tripStepB { 0%,49.9% { opacity:0 } 50%,100% { opacity:1 } }
@keyframes tripBob { from { transform: translateY(0) } to { transform: translateY(-1.6px) } }

.trip__hint { margin: 12px 0 26px; font-size: 12px; color: var(--color-ink-soft); }
.trip__hint-m { display: none; }
@media (max-width: 720px) { .trip__hint-m { display: inline; } }
.trip__empty { margin: 0 0 22px; font-size: .9rem; color: var(--color-ink-soft); }
.trip__empty b { color: var(--color-ink); }

@media (min-width: 721px) {
  .trip { overflow: visible; }
}

.sky, .stars { display: none; }
.orb    { fill: none; stroke: var(--globe-sea); stroke-width: 1.6;
          transform: translate(1060px, 58px);
          transition: transform 1.6s var(--ease-out), opacity 1.25s var(--ease-out); }
.cloud path { fill: #ececf0; }
.lit    { opacity: .28; transition: opacity 1.25s var(--ease-out); }

.trip.at-abroad    .orb   { transform: translate(250px, 46px); }
.trip.at-abroad    .lit   { opacity: 1; }
.trip.at-returning .orb   { transform: translate(700px, 52px); }
.trip.at-returning .cloud path { fill: #e0e0e5; }

.flyer  { animation: tripFly 26s linear infinite; }
@keyframes tripFly { from { transform: translate(-240px, 104px) } to { transform: translate(1460px, 70px) } }
.cloud--1 { animation: tripDrift1 64s linear infinite; }
.cloud--2 { animation: tripDrift2 92s linear infinite; }
.cloud--3 { animation: tripDrift3 78s linear infinite; }
@keyframes tripDrift1 { from { transform: translate(-90px, 44px) }  to { transform: translate(1340px, 44px) } }
@keyframes tripDrift2 { from { transform: translate(-70px, 86px) }  to { transform: translate(1330px, 86px) } }
@keyframes tripDrift3 { from { transform: translate(-120px, 46px) } to { transform: translate(1360px, 46px) } }
.trip.at-abroad .lit { animation: tripLit 5.5s ease-in-out infinite alternate; }
.trip.at-abroad .lit:nth-of-type(3n)   { animation-duration: 7.5s; animation-delay: -2s; }
.trip.at-abroad .lit:nth-of-type(3n+1) { animation-duration: 4.2s; animation-delay: -3.4s; }
@keyframes tripLit { from { opacity: .5 } to { opacity: 1 } }

.pose--a { opacity: 0; }
.pose--b { opacity: 1; }
.trip.is-walking .pose--a { animation: tripStepA .42s steps(1) infinite; }
.trip.is-walking .pose--b { animation: tripStepB .42s steps(1) infinite; }
.fig__bob { animation: none; }
.trip.is-walking .fig__bob { animation: tripBob .42s ease-in-out infinite alternate; }

.fig__face { transition: none; }

.bag { opacity: 0; transition: opacity .4s var(--ease-out); }
.trip .bag--leave                    { opacity: 1; }
.trip.at-abroad    .bag--leave       { opacity: 0; }
.trip.at-abroad    .bag--abroad      { opacity: 1; }
.trip.at-returning .bag--leave       { opacity: 0; }
.trip.at-returning .bag--home        { opacity: 1; }

@media (max-width: 720px) {
  .trip { overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
  .trip svg { width: 940px; max-width: none; }

  .trip.has-right { -webkit-mask-image: linear-gradient(to right, #000 82%, transparent 100%);
                            mask-image: linear-gradient(to right, #000 82%, transparent 100%); }
  .trip.has-left  { -webkit-mask-image: linear-gradient(to right, transparent 0, #000 12%);
                            mask-image: linear-gradient(to right, transparent 0, #000 12%); }
  .trip.has-left.has-right {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 12%, #000 82%, transparent 100%);
            mask-image: linear-gradient(to right, transparent 0, #000 12%, #000 82%, transparent 100%);
  }
  .trip::-webkit-scrollbar { height: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .pose--a, .pose--b, .fig__bob, .flyer, .cloud, .lit, .trip__far, .kite { animation: none; }
  .flyer { opacity: 0; }
  .pose--b { opacity: 0; }
  .trip__far, .trip__near, .fig { transition: none; }
}

.ways__grid.is-refiltered .way-card:not(.is-filtered-out) {
  animation: wayCardIn .38s var(--ease-out) backwards;
  animation-delay: calc(var(--fi, 0) * 24ms);
}
@keyframes wayCardIn {
  from { opacity: 0; transform: translateY(12px); }
}
@media (prefers-reduced-motion: reduce) {
  .ways__grid.is-refiltered .way-card:not(.is-filtered-out) { animation: none; }
}

.hero--object { padding-block: clamp(52px, 7vw, 96px) clamp(44px, 6vw, 84px); }

@media (min-width: 961px) {
  .hero--object { padding-top: 120px; }
}
@media (min-width: 1340px) {
  .hero--object { padding-top: 88px; }
}
.object-hero {
  display: grid;
  gap: clamp(36px, 4.5vw, 72px);

  row-gap: clamp(14px, 2vw, 26px);
  align-items: center;
}
.object-hero__stage {
  position: relative;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

html:not(.js) .object-hero__stage--js { display: none; }
.object-hero__hint {
  margin: 14px 0 0;
  font-size: 12px;
  color: var(--color-ink-soft);
  text-align: center;
}
@media (min-width: 961px) {

  .object-hero { grid-template-columns: minmax(0, 1fr) clamp(420px, 38vw, 520px); }

  .object-hero { align-items: start; }
  .object-hero__words { align-self: start; padding-top: clamp(6px, 1.2vw, 20px); text-align: left; }
  .object-hero__stage { align-self: start; }
  .object-hero__words .t-lead { margin-inline: 0; max-width: 430px; }
}

@media (max-width: 960px) {
  .object-hero__words { position: relative; z-index: 2; }
}

.object-hero__words .t-hero { text-wrap: balance; }

.object-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 26px;
}
.object-nav[hidden] { display: none; }
.object-nav__btn {
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--color-line-firm);
  border-radius: 50%;
  background: var(--surface);
  color: var(--color-ink);
  font: inherit;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  transition: border-color var(--speed-fast) var(--ease-out),
              color var(--speed-fast) var(--ease-out),
              transform var(--speed-fast) var(--ease-out);
}
.object-nav__btn:hover { border-color: var(--green-ink); color: var(--green-ink); transform: translateY(-1px); }
.object-nav__btn:disabled { opacity: .35; cursor: default; transform: none; border-color: var(--color-line-firm); color: var(--color-ink); }
.object-nav__count {
  min-width: 118px;
  text-align: center;
  font-size: 12.5px;
  color: var(--color-ink-soft);
  font-variant-numeric: tabular-nums;
}

.carousel {
  --cf-w: clamp(200px, 19vw, 256px);
  position: relative;
  width: 100%;
  max-width: 660px;

  height: calc(var(--cf-w) * 1.38 + 40px);
  perspective: 1400px;
  outline: none;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.carousel:focus-visible .cf-card.is-front { outline: 2px solid var(--green-ink); outline-offset: 5px; }
.carousel__ring {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;

  pointer-events: none;
}
.carousel__floor {
  position: absolute;
  left: 50%; bottom: 2%;
  width: 70%; height: 12%;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(0,0,0,.2), rgba(0,0,0,0));
  pointer-events: none;
}

.cf-card {
  position: absolute;
  left: 50%; top: 4px;

  width: var(--cf-w);
  aspect-ratio: 1 / 1.38;
  margin: 0;
  display: flex;
  flex-direction: column;

  padding: 16px 16px 58px;
  border: 1px solid var(--green-line-soft);
  border-radius: 18px;
  background: #fff;
  color: var(--color-ink);
  text-align: left;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 14px 30px rgba(0,0,0,.10);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  will-change: transform, opacity;
  pointer-events: auto;
}
.cf-card--dark { background: var(--surface-card); color: #fff; border-color: rgba(255,255,255,.18); }

.cf-card--dark .cf-card__read { background: #fff; color: var(--green-deep); }
.cf-card--dark .cf-card__read:hover { background: #e9f7ef; }
.cf-card.is-front { box-shadow: 0 2px 4px rgba(0,0,0,.08), 0 28px 56px rgba(0,0,0,.20); }
.cf-card__num {
  position: absolute;
  top: 10px; right: 14px;
  margin: 0;
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -.04em;
  line-height: 1;
  color: #ececf0;
}
.cf-card--dark .cf-card__num { color: rgba(255,255,255,.2); }
.cf-card__label {
  position: relative;
  margin: 2px 0 8px;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--green-ink);
}
.cf-card--dark .cf-card__label { color: var(--on-card-accent); }
.cf-card__title {
  position: relative;
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(15px, 1.4vw, 19px);
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.18;
}
.cf-card__media {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 10px -8px 0;
}
.cf-card__media img { width: 100%; height: 100%; object-fit: contain; object-position: center;
                      filter: var(--depth-on-white); }
.cf-card--dark .cf-card__media img { filter: var(--depth-on-black); }

.cf-card__read {
  position: absolute;
  left: 16px; bottom: 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  background: var(--green-ink);
  color: #fff;
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--speed-fast) var(--ease-out), transform var(--speed-fast) var(--ease-out),
              background-color var(--speed-fast) var(--ease-out);
  pointer-events: none;
}
.cf-card__read::after { content: "→"; }
.cf-card.is-front .cf-card__read { opacity: 1; transform: none; pointer-events: auto; }
.cf-card__read:hover { background: var(--green-deep); }

.cf-card--all {
  background: linear-gradient(160deg, var(--green-ink) 0%, var(--green-deep) 100%);
  border-color: transparent;
  color: #fff;
}
.cf-card--all .cf-card__num {
  position: static;
  margin: 6px 0 2px;
  font-size: clamp(64px, 6vw, 88px);
  letter-spacing: -.05em;
  color: #fff;
}
.cf-card--all .cf-card__label { color: rgba(255,255,255,.75); }
.cf-card--all .cf-card__text { margin: 10px 0 0; font-size: 12.5px; line-height: 1.45; color: rgba(255,255,255,.82); }
.cf-card--all .cf-card__read { background: #fff; color: var(--green-deep); }
.cf-card--all .cf-card__read:hover { background: #e9f7ef; }

.cf-card { --cf-band: #000; --cf-band-ink: #fff; --cf-band-h: 28px; padding-top: calc(var(--cf-band-h) + 12px); }
.cf-card--dark  { --cf-band: var(--green-ink); background: var(--surface-pass); }
.cf-card--black { --cf-band: #fff; --cf-band-ink: #0a0a0b; background: #0b0b0c; border-color: rgba(255,255,255,.14); }
.cf-card--all   { --cf-band: #000; }
.cf-card::before {
  content: "FabNri \00B7" " Guide";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: var(--cf-band-h);
  display: flex;
  align-items: center;
  padding: 0 12px;
  background: var(--cf-band);
  color: var(--cf-band-ink);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: none;
  white-space: nowrap;
  -webkit-font-smoothing: auto;
}
.cf-card:not(.cf-card--all) .cf-card__num {
  top: 0; right: 12px;
  z-index: 1;
  height: var(--cf-band-h);
  display: flex;
  align-items: center;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
  font-variant-numeric: tabular-nums;
  color: var(--cf-band-ink);
}
.cf-card:not(.cf-card--all) .cf-card__num::before { content: "No."; margin-right: .35em; font-size: 8.5px; letter-spacing: .14em; opacity: .8; }
.cf-card--dark .cf-card__label { color: var(--green-soft); }

.cf-card--all { --cf-band: var(--green-ink); background: var(--surface-pass); border-color: rgba(255,255,255,.14); }
.cf-card--all::after {
  content: "All";
  position: absolute;
  top: 0; right: 12px;
  height: var(--cf-band-h);
  display: flex;
  align-items: center;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
}
.cf-card--all .cf-card__label { color: var(--green-soft); }
.cf-card--all .cf-card__text { color: rgba(255,255,255,.8); }

.dial {
  position: relative;

  width: min(100%, clamp(360px, 31vw, 440px));
  aspect-ratio: 1;
  border-radius: 50%;

  container-type: inline-size;
  outline: none;
  user-select: none;
  -webkit-user-select: none;
}
.dial:focus-visible { box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--green-ink); }
.dial__ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  overflow: hidden;
  cursor: grab;
  touch-action: none;

  background:
    radial-gradient(circle at 30% 24%, rgba(255,255,255,.22), rgba(255,255,255,0) 44%),
    radial-gradient(circle, #00904a 0 60%, #006b34 100%);
  box-shadow: 0 34px 60px -12px rgba(0,50,25,.36), 0 8px 18px rgba(0,0,0,.14),
              inset 0 1px 0 rgba(255,255,255,.24);
}
.dial.is-dragging .dial__ring { cursor: grabbing; }

.dial__knurl {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: repeating-conic-gradient(rgba(255,255,255,.20) 0deg .7deg, rgba(255,255,255,0) .7deg 3deg);
  -webkit-mask: radial-gradient(circle, transparent 0 94%, #000 94.6%);
          mask: radial-gradient(circle, transparent 0 94%, #000 94.6%);
  pointer-events: none;
}

.dial__rotor {
  position: absolute;
  inset: 0;
  transition: transform .35s var(--ease-out);
}
.dial.is-dragging .dial__rotor { transition: none; }
.dial__tick {
  position: absolute;
  left: 50%; top: 50%;
  width: 1.5px; height: 2.6%;
  margin-left: -.75px;
  background: rgba(255,255,255,.45);
  pointer-events: none;
}
.dial__tick--major { height: 3.6%; width: 2px; margin-left: -1px; background: rgba(255,255,255,.85); }
.dial__num {
  position: absolute;
  left: 50%; top: 50%;
  padding: 6px;
  border: 0;
  background: none;
  font-family: var(--font-display);
  font-size: clamp(12px, 1.2vw, 14px);
  font-weight: 600;
  letter-spacing: .04em;
  color: rgba(255,255,255,.88);
  cursor: pointer;

  transition: color var(--speed-fast) var(--ease-out), transform .35s var(--ease-out);
}
.dial.is-dragging .dial__num { transition: color var(--speed-fast) var(--ease-out); }
.dial__num:hover { color: #fff; }
.dial__num.is-active { color: #000; }

.dial__glow {
  position: absolute;
  inset: 0;
  border-radius: 50%;

  background: conic-gradient(from -16deg, rgba(0,0,0,0) 0deg, rgba(0,0,0,.26) 16deg,
                             rgba(0,0,0,0) 32deg, rgba(0,0,0,0) 360deg);
  -webkit-mask: radial-gradient(circle, transparent 0 64%, #000 64.5% 93.5%, transparent 94%);
          mask: radial-gradient(circle, transparent 0 64%, #000 64.5% 93.5%, transparent 94%);
  pointer-events: none;
  z-index: 1;
}
.dial__tick--major.is-active { background: #000; }

.dial__marker {
  position: absolute;
  left: 50%; top: 1.4%;
  z-index: 3;
  width: 0; height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 10px solid #000;
  transform: translateX(-50%);
  pointer-events: none;
}

.dial__face {
  position: absolute;
  inset: 20%;
  z-index: 2;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 11%;
  text-align: center;
  background: radial-gradient(circle at 36% 28%, #fff 0%, #fbfbfc 52%, #ececf0 100%);

  box-shadow: inset 0 3px 8px rgba(0,0,0,.22), inset 0 -2px 3px rgba(255,255,255,.7),
              0 0 0 4px #006b34, 0 0 0 6px #000, 0 0 18px 6px rgba(0,0,0,.16);
}

.dial__text { display: flex; flex-direction: column; align-items: center; transition: opacity .1s var(--ease-out); }
.dial.is-changing .dial__text { opacity: 0; }
.dial__label {
  margin: 0;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #000;
}
.dial__title {
  margin: 8px 0 10px;
  font-family: var(--font-display);
  font-size: clamp(15px, 1.55vw, 19px);
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.18;
  color: var(--color-ink);
}
.dial__first {
  margin: 0 0 3px;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
}
.dial__ask { margin: 0 0 14px; font-size: clamp(11px, 1vw, 12.5px); line-height: 1.42; color: var(--color-ink-soft); }
.dial__go {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 16px;
  border-radius: var(--radius-pill);
  background: #000;
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  transition: background-color var(--speed-fast) var(--ease-out);
}
.dial__go::after { content: "→"; }
.dial__go:hover { background: var(--green-ink); }
@media (max-width: 420px) {
  .dial__face { inset: 18%; padding: 9%; }
  .dial__ask { display: none; }
  .dial__first { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .dial__rotor, .dial__text { transition: none; }
}

.notes {
  position: relative;

  width: min(100%, 340px);
  perspective: 1600px;
  outline: none;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;

  --notes-drop: 70px;
}

@media (max-width: 960px) {
  .notes { margin-top: 36px; --notes-drop: 0px; }
}
.notes:focus-visible .note.is-top { outline: 2px solid var(--green-ink); outline-offset: 6px; }
.notes__tilt { position: relative; transform-style: preserve-3d; }
.notes__pile {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1.1;
  transform-style: preserve-3d;
}
.notes__shadow {
  position: absolute;
  left: 50%; bottom: -8%;
  width: 96%; height: 14%;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(0,0,0,.22), rgba(0,0,0,0));
  pointer-events: none;
}
.note {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: 10% 9% 8% 17%;
  text-align: left;
  border: 1px solid var(--color-line);
  border-radius: 10px;

  background:
    linear-gradient(90deg, rgba(0,0,0,0) 11%, var(--green-ink) 11%, var(--green-ink) calc(11% + 1.5px),
                           rgba(0,0,0,0) calc(11% + 1.5px)),
    repeating-linear-gradient(180deg, rgba(0,0,0,0) 0 27px, #ececf1 27px 28px) 0 100% / 100% 64% no-repeat,
    #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 10px 24px rgba(0,0,0,.07);
  cursor: pointer;
  transform-origin: 50% 70%;

  transition: transform .35s var(--ease-out), box-shadow .3s var(--ease-out), opacity .3s var(--ease-out);
}
.note.is-top { box-shadow: 0 2px 4px rgba(0,0,0,.06), 0 24px 46px rgba(0,0,0,.14); }
.note.is-top:hover { box-shadow: 0 3px 6px rgba(0,0,0,.07), 0 32px 60px rgba(0,0,0,.18); }
.note.is-buried { opacity: 0; }

.note::after {
  content: "";
  position: absolute;
  top: -1px; right: 10%;
  width: 18px; height: 32px;
  background: var(--green-ink);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 76%, 0 100%);
  opacity: 0;
  transition: opacity .3s var(--ease-out);
}
.note.is-top::after { opacity: 1; }
.note__num {
  position: absolute;
  top: 8%; right: 22%;
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(26px, 2.6vw, 34px);
  font-weight: 700;
  letter-spacing: -.04em;
  line-height: 1;
  color: #ececf0;
}
.note__label {
  margin: 0 0 12px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--green-ink);
}
.note__title {
  margin: 0 0 14px;
  padding-bottom: 12px;
  font-family: var(--font-display);
  font-size: clamp(17px, 1.6vw, 21px);
  font-weight: 700;
  letter-spacing: -.015em;
  line-height: 1.15;
  color: var(--color-ink);
  background: linear-gradient(var(--green-ink), var(--green-ink)) 0 100% / 28px 2px no-repeat;
}
.note__inside {
  margin: 0 0 8px;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
}
.note__heads { list-style: none; margin: 0; padding: 0; }
.note__heads li {
  position: relative;
  margin: 0 0 8px;
  padding-left: 16px;
  font-size: clamp(11px, .85vw, 12px);
  line-height: 1.42;
  color: var(--color-ink);
}
.note__heads li::before { content: "—"; position: absolute; left: 0; color: var(--green-ink); }
.note__read {
  margin-top: auto;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 16px;
  border-radius: var(--radius-pill);
  background: var(--green-ink);
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  transition: background-color var(--speed-fast) var(--ease-out);
}
.note__read::after { content: "→"; }

.note--all .note__title { font-size: clamp(26px, 2.6vw, 34px); }
.note__read:hover { background: var(--green-deep); }
@media (prefers-reduced-motion: reduce) {
  .note { transition: none; }
}

.note {
  --band: #000; --band-ink: #fff; --band-h: 34px;
  --rule: rgba(0,0,0,.07); --margin: var(--green-ink);
  padding-top: calc(var(--band-h) + 7%);
  overflow: hidden;
  background:
    linear-gradient(90deg, transparent 11%, var(--margin) 11%, var(--margin) calc(11% + 1.5px), transparent calc(11% + 1.5px)),
    repeating-linear-gradient(180deg, transparent 0 25px, var(--rule) 25px 26px) 0 calc(var(--band-h) + 14px) / 100% calc(100% - var(--band-h) - 14px) no-repeat,
    #fff;
}
.note::after { display: none; }
.note__band {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: var(--band-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0;
  padding: 0 7% 0 9%;
  background: var(--band);
  color: var(--band-ink);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .03em;
}
.note__no { font-size: 13px; font-weight: 800; letter-spacing: .08em; font-variant-numeric: tabular-nums; }
.note__no::before { content: "No."; margin-right: .4em; font-size: 10px; letter-spacing: .16em; opacity: .8; }
.note--dark {
  --band: var(--green-ink); --rule: rgba(255,255,255,.08); --margin: var(--green-soft);
  border-color: rgba(255,255,255,.14);
  background-color: var(--surface-pass);
}
.note--black {
  --band: #fff; --band-ink: #0a0a0b;
  background-color: #0b0b0c;
}

.note--dark, .note--black {
  background:
    linear-gradient(90deg, transparent 11%, var(--margin) 11%, var(--margin) calc(11% + 1.5px), transparent calc(11% + 1.5px)),
    repeating-linear-gradient(180deg, transparent 0 25px, var(--rule) 25px 26px) 0 calc(var(--band-h) + 14px) / 100% calc(100% - var(--band-h) - 14px) no-repeat,
    var(--surface-pass);
}
.note--black { background-color: #0b0b0c; }
.note--dark .note__label { color: var(--green-soft); }
.note--dark .note__title { color: #fff; background-image: linear-gradient(var(--green-soft), var(--green-soft)); }
.note--dark .note__inside { color: rgba(255,255,255,.72); }
.note--dark .note__heads li { color: rgba(255,255,255,.88); }
.note--dark .note__heads li::before { color: var(--green-soft); }
.note--dark .note__read { background: #fff; color: var(--green-deep); }
.note--dark .note__read:hover { background: #e9f7ef; }

.object-hero .scroll-cue { grid-column: 1 / -1; }
.object-hero__words .hero__actions { margin-top: 28px; }
@media (min-width: 961px) {
  .object-hero__words .hero__actions { justify-content: flex-start; }
}

.scroll-cue {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: max-content;
  max-width: 100%;
  margin: clamp(10px, 2vw, 28px) auto 0;
  font-family: var(--font-display);
  font-size: clamp(17px, 1.6vw, 21px);
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--color-ink);
  text-align: center;
  text-decoration: none;
  transition: color var(--speed-fast) var(--ease-out);
}
.scroll-cue b { font-weight: 700; color: var(--green-ink); }
.scroll-cue__hand {
  width: 58px; height: 58px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--green-ink);
  color: #fff;
  box-shadow: 0 10px 24px rgba(0,132,63,.28);
  animation: cueBob 1.8s ease-in-out infinite;
  transition: background-color var(--speed-fast) var(--ease-out), transform var(--speed-fast) var(--ease-out);
}
.scroll-cue__hand svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.7;
                        stroke-linecap: round; stroke-linejoin: round; }
.scroll-cue:hover { color: var(--green-ink); }
.scroll-cue:hover .scroll-cue__hand { background: var(--green-deep); }
@keyframes cueBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(7px); } }
@media (prefers-reduced-motion: reduce) { .scroll-cue__hand { animation: none; } }

.scroll-cue-float {
  position: fixed;
  left: 50%;
  bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: calc(100vw - 32px);
  padding: 7px 7px 7px 18px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-pill);
  background: #fff;
  box-shadow: var(--shadow-lift);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.2;
  color: var(--color-ink);
  text-decoration: none;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 14px);
  transition: opacity .3s var(--ease-out), transform .3s var(--ease-out), visibility 0s linear .3s;
}
.scroll-cue-float.is-shown {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  transition: opacity .3s var(--ease-out), transform .3s var(--ease-out), visibility 0s;
}
.scroll-cue-float b { font-weight: 700; color: var(--green-ink); }

.scroll-cue { transition: color var(--speed-fast) var(--ease-out), opacity .3s var(--ease-out); }
.scroll-cue.is-stood-in { opacity: 0; }
.scroll-cue-float .scroll-cue__hand { width: 40px; height: 40px; flex: none; box-shadow: none; }
.scroll-cue-float .scroll-cue__hand svg { width: 22px; height: 22px; }
@media (max-width: 359px) { .scroll-cue-float { font-size: 14px; gap: 8px; padding-left: 14px; } }
@media (min-width: 961px) { .scroll-cue-float { display: none; } }
@media (prefers-reduced-motion: reduce) { .scroll-cue-float, .scroll-cue-float.is-shown { transition: none; } }
@media print { .scroll-cue-float { display: none; } }

.lens-stage {
  position: relative;
  width: min(100%, 400px);
  aspect-ratio: 1 / .86;
  cursor: none;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}
.lens-sheet {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border: 1px solid var(--color-line);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 2px 4px rgba(0,0,0,.05), 0 26px 50px rgba(0,0,0,.14);
}

.fineprint {
  position: absolute;
  left: 0; top: 0;
  padding: 3.2em 3.4em;
  font-size: 6.5px;
  line-height: 1.55;
  color: #a4a4aa;
  text-align: left;
}
.fineprint p, .fineprint ol { margin: 0 0 1.1em; }
.fineprint ol { padding: 0; list-style: none; }
.fineprint li { margin: 0 0 .9em; }
.fineprint b { color: #8a8a90; font-weight: 700; }
.fp__eyebrow { font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--green-ink) !important; }
.fp__title {
  padding-bottom: .9em;
  font-family: var(--font-display);
  font-size: 2.3em;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.02em;
  color: #8a8a90;
  background: linear-gradient(var(--green-ink), var(--green-ink)) 0 100% / 3em .22em no-repeat;
}
.fp__num { color: var(--green-ink); font-weight: 700; margin-right: .5em; }

.fineprint { padding-top: calc(3.2em + 4.8em); width: 100%; }
.fineprint::before,
.fineprint::after {
  position: absolute;
  top: 0;
  height: calc(4.8em / 1.85);
  display: flex;
  align-items: center;
  font-size: 1.85em;
  font-weight: 700;
  letter-spacing: .03em;
  line-height: 1;
  color: #fff;
}
.fineprint::before {
  content: "FabNri \00B7" " About";
  left: 0; right: 0;
  padding: 0 calc(3.4em / 1.85);
  background: #000;
}
.fineprint::after {
  content: "Fine print";
  right: calc(3.4em / 1.85);
  font-weight: 800;
  letter-spacing: .06em;
}

.lens {
  position: absolute;
  left: 0; top: 0;
  width: 42%;
  aspect-ratio: 1;
  pointer-events: none;
  will-change: transform;
}
.lens__glass {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 5px var(--green-ink), 0 0 0 6px rgba(0,0,0,.18),
              0 20px 40px rgba(0,0,0,.30), inset 0 0 18px rgba(0,0,0,.10);
}

.lens__glass::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 24%, rgba(255,255,255,.55), rgba(255,255,255,0) 38%),
              radial-gradient(circle at 70% 80%, rgba(0,132,63,.07), rgba(0,132,63,0) 50%);
  pointer-events: none;
}
.lens__inner { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.lens__inner .fineprint { font-size: 16.9px; color: var(--color-ink-soft); }
.lens__inner .fineprint b,
.lens__inner .fp__title { color: var(--color-ink); }

.lens__handle {
  position: absolute;
  left: 85.4%; top: 85.4%;
  width: 13%; height: 46%;
  transform: translateX(-50%) rotate(-45deg);
  transform-origin: 50% 0;
  border-radius: 0 0 999px 999px;
  background: linear-gradient(90deg, #2a2a2c 0%, #0a0a0b 55%, #1a1a1c 100%);
  box-shadow: 0 10px 20px rgba(0,0,0,.25);
}
.lens__handle::before {
  content: "";
  position: absolute;
  left: -8%; right: -8%; top: 0; height: 18%;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--green-deep), var(--green-bright) 50%, var(--green-deep));
}
@media (hover: none) { .lens-stage { cursor: auto; } }

.hero-rates { margin-top: 30px; }
.hero-rates[hidden] { display: none; }

.rate-roll {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  height: 64px;
  max-width: 100%;
  padding: 0 26px 0 24px;
  border-radius: var(--radius-pill);
  background:
    radial-gradient(120% 140% at 20% 0%, rgba(255,255,255,.10), rgba(255,255,255,0) 55%),
    linear-gradient(180deg, #1d1d1f 0%, #0b0b0c 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    inset 0 -1px 0 rgba(0,0,0,.6),
    0 0 0 1px rgba(0,173,84,.45),
    0 14px 30px rgba(0,0,0,.22),
    0 4px 10px rgba(0,0,0,.12);
  color: #fff;
}

.rate-roll__label {
  padding-right: 16px;
  border-right: 1px solid rgba(255,255,255,.12);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .18em;
  line-height: 1.55;
  text-transform: uppercase;
  color: var(--green-soft);
  white-space: nowrap;
}
.rate-roll__label span { font-size: 11px; font-weight: 500; letter-spacing: .02em; text-transform: none; color: rgba(255,255,255,.6); }

.rate-roll__window {
  position: relative;
  width: 224px;
  height: 62px;
  overflow: hidden;
  perspective: 220px;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 28%, #000 72%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0, #000 28%, #000 72%, transparent 100%);
}

.rate-roll__window::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 30px;
  margin-top: -15px;
  border-block: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  pointer-events: none;
}
.rate-roll__item {
  position: absolute;
  left: 4px; right: 0; top: 50%;
  height: 26px;
  margin-top: -13px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  white-space: nowrap;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: translateY(calc(var(--d, 0) * 100%)) rotateX(calc(var(--d, 0) * -40deg));
  opacity: var(--o, 1);
  transition: transform .6s var(--ease-out), opacity .6s var(--ease-out);
}
.rate-roll__item { color: rgba(255,255,255,.72); }
.rate-roll__item b { display: inline-flex; align-items: baseline; gap: 8px; font-weight: 700; font-variant-numeric: tabular-nums; color: #fff; letter-spacing: -.01em; }
.rate-roll__flag { font-size: 23px; line-height: 1; }

.rate-roll__code {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  color: rgba(255,255,255,.62);
  -webkit-font-smoothing: auto;
}
.rate-roll__fig {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--green-soft);
}
.rate-roll__rupee { margin-right: 1px; font-weight: 500; opacity: .75; }

.rate-credit {
  max-width: 420px;
  margin: 10px 0 0;
  font-size: 11px;
  line-height: 1.5;
  color: var(--color-ink-soft);
}
.rate-credit a { color: var(--green-ink); border-bottom: 1px solid var(--green-line); text-decoration: none; }
@media (max-width: 960px) {
  .rate-credit { margin-inline: auto; }
}
@media (max-width: 420px) {
  .rate-roll__window { width: 168px; }
  .rate-roll__item { font-size: 14.5px; }
  .rate-roll__fig  { font-size: 16px; }
  .rate-roll__flag { font-size: 20px; }
}

.rate-roll {
  padding-left: 0;
  overflow: hidden;
  background:
    radial-gradient(120% 140% at 30% 0%, rgba(255,255,255,.08), rgba(255,255,255,0) 55%),
    linear-gradient(180deg, #005a30 0%, var(--surface-pass) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    0 0 0 1px rgba(80,226,151,.55),
    0 14px 30px rgba(0,60,30,.26),
    0 4px 10px rgba(0,0,0,.10);
}
.rate-roll__label {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 18px 0 24px;
  border-right: 0;
  background: var(--green-ink);
  color: #fff;
  font-weight: 800;
}
.rate-roll__label span { color: #fff; opacity: 1; font-weight: 500; }
.rate-roll__item,
.rate-roll__code { color: rgba(255,255,255,.72); }
.rate-roll__window::before { border-color: rgba(255,255,255,.14); background: rgba(255,255,255,.05); }
@media (max-width: 420px) {
  .rate-roll__label { padding: 0 14px 0 20px; }
}

.hero__actions .btn { padding: 14px 26px; font-weight: 600; }
.hero__actions .btn--primary { background: var(--green-ink); color: #fff; }
.hero__actions .btn--primary:hover  { background: var(--green-deep); }
.hero__actions .btn--primary:active { background: var(--green-deep); }
.hero__actions .btn--ghost {
  border: 1.5px solid var(--green-ink);
  color: var(--green-ink);
  background: #fff;
}
.hero__actions .btn--ghost:hover { background: var(--green-ink); color: #fff; }

.map-find__go.btn--ghost { border: 1.5px solid var(--green-ink); color: var(--green-ink); font-weight: 600; }
.map-find__go.btn--ghost:hover { background: var(--green-ink); color: #fff; }

.section__head--center .btn--primary {
  background: linear-gradient(180deg, #005a30 0%, var(--surface-pass) 100%);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 0 0 1px rgba(80,226,151,.55),
              0 10px 22px rgba(0,60,30,.22);
}
.section__head--center .btn--primary:hover { background: var(--green-ink); }
.section--dark .btn--primary,
.showcase:not(.showcase--light) .btn--primary {
  background: var(--green-ink);
  color: #fff;
  font-weight: 600;
  box-shadow: 0 0 0 1px rgba(80,226,151,.35), 0 10px 24px rgba(0,132,63,.28);
}
.section--dark .btn--primary:hover,
.showcase:not(.showcase--light) .btn--primary:hover { background: var(--green-soft); color: #04220a; }

.ways-object { display: grid; gap: clamp(28px, 4vw, 64px); align-items: start; }
html:not(.js) .ways-object__stage { display: none; }

[data-ways-prism].is-built .ways__grid { display: none; }
html:not(.js) .ways-object__list { display: none; }

@media (min-width: 961px) {
  .ways-object { grid-template-columns: minmax(0, 1fr) clamp(420px, 38vw, 520px); }
  .ways-object__words { padding-top: clamp(6px, 1.2vw, 20px); }
}
.ways-object__words .t-h1 { text-wrap: balance; }
html:not(.js) .ways-object { display: block; }
html:not(.js) .ways-object__words { text-align: center; margin-bottom: clamp(28px, 4vw, 48px); }

.ways-object__list {
  list-style: none;
  margin: clamp(22px, 3vw, 36px) 0 0;
  padding: 0;
  border-top: 1px solid var(--color-line);
}
.ways-object__row { border-bottom: 1px solid var(--color-line); }
.ways-object__pick {
  position: relative;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: baseline;
  width: 100%;
  padding: 16px 0 17px;
  border: 0;
  background: none;
  color: var(--color-ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.ways-object__num {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  color: var(--color-ink-soft);
  font-variant-numeric: tabular-nums;
  transition: color var(--speed-fast) var(--ease-out);
}
.ways-object__name {
  font-family: var(--font-display);
  font-size: clamp(17px, 1.6vw, 21px);
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--color-ink-soft);
  transition: color var(--speed-fast) var(--ease-out);
}
.ways-object__name small {
  display: block;
  margin-bottom: 3px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: inherit;
}
.ways-object__pick:hover .ways-object__name,
.ways-object__row.is-active .ways-object__name { color: var(--color-ink); }
.ways-object__row.is-active .ways-object__num,
.ways-object__row.is-active .ways-object__name small { color: var(--green-ink); }
.ways-object__pick:focus-visible { outline: 2px solid var(--green-ink); outline-offset: 2px; }

.ways-object__bar {
  position: absolute;
  left: 0; bottom: -1px;
  height: 2px;
  width: 100%;
  background: var(--green-ink);
  transform: scaleX(0);
  transform-origin: 0 50%;
}
.ways-object__row.is-active .ways-object__bar { transform: scaleX(1); }
.is-running .ways-object__row.is-active .ways-object__bar {
  animation: prismBar var(--prism-every, 4s) linear both;
}
@keyframes prismBar { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.ways-object__stage { display: flex; justify-content: center; min-width: 0; }
.prism {
  --pw: clamp(280px, 27vw, 380px);
  --pz: calc(var(--pw) * 0.2887);
  position: relative;
  width: var(--pw);
  height: calc(var(--pw) * 1.3 + 44px);
  perspective: 1400px;
  outline: none;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.prism:focus-visible .prism__face.is-front { outline: 2px solid var(--green-ink); outline-offset: 5px; }
.prism__body {
  position: absolute;
  left: 0; top: 0;
  width: 100%;
  height: calc(var(--pw) * 1.3);
  transform-style: preserve-3d;
  transform: translateZ(calc(var(--pz) * -1)) rotateY(var(--turn, 0deg));

  transition: transform 1s cubic-bezier(.45, .05, .2, 1);
}
.prism__floor {
  position: absolute;
  left: 50%; bottom: 0;
  width: 86%; height: 40px;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(0,0,0,.22), rgba(0,0,0,0));
  pointer-events: none;
}
.prism__face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: 22px 22px 76px;
  border: 1px solid var(--green-line-soft);
  border-radius: 22px;
  background: #fff;
  color: var(--color-ink);
  overflow: hidden;
  cursor: pointer;
  transform: rotateY(calc(var(--i) * 120deg)) translateZ(var(--pz));
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  box-shadow: 0 2px 4px rgba(0,0,0,.06), 0 26px 52px rgba(0,0,0,.14);
}
.prism__face--dark { background: #000; color: #fff; border-color: var(--green-line-soft-2); }

.prism__face::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: #000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 1s var(--ease-out);
}
.prism__face.is-away::after { opacity: .45; }
.prism__num {
  position: absolute;
  top: 14px; right: 20px;
  margin: 0;
  font-family: var(--font-display);
  font-size: 56px;
  font-weight: 700;
  letter-spacing: -.05em;
  line-height: 1;
  color: #ececf0;
}
.prism__face--dark .prism__num { color: #1f1f22; }
.prism__label {
  position: relative;
  margin: 2px 0 10px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--green-ink);
}
.prism__face--dark .prism__label { color: var(--green-soft); }
.prism__title {
  position: relative;
  margin: 0 64px 8px 0;
  font-family: var(--font-display);
  font-size: clamp(21px, 2vw, 26px);
  font-weight: 700;
  letter-spacing: -.015em;
  line-height: 1.15;
}
.prism__text {
  position: relative;
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-ink-soft);
}
.prism__face--dark .prism__text { color: var(--color-on-dark-soft); }
.prism__media {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 12px;
}
.prism__media img { width: 100%; height: 100%; object-fit: contain; filter: var(--depth-on-white); }
.prism__face--dark .prism__media img { filter: var(--depth-on-black); }
.prism__go {
  position: absolute;
  left: 22px; bottom: 22px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 18px;
  border-radius: var(--radius-pill);
  background: var(--green-ink);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  transition: background-color var(--speed-fast) var(--ease-out);
}
.prism__go::after { content: "→"; }
.prism__go:hover { background: var(--green-deep); }
.prism__face--dark .prism__go { background: var(--green-bright); color: #000; }
.prism__face--dark .prism__go:hover { background: var(--green-soft); }

@media (prefers-reduced-motion: reduce) {
  .prism__body, .prism__face::after { transition: none; }
}
@media (max-width: 960px) {
  .ways-object__words { text-align: left; }
  .prism { --pw: min(340px, calc(100vw - 48px)); }
}

.wpanels[hidden] { display: none; }
[data-ways-panels].is-built .ways__grid { display: none; }
.wpanels {
  display: flex;
  gap: clamp(10px, 1.2vw, 16px);
  height: clamp(480px, 40vw, 520px);
}
.wpanel {
  --open-grow: 3.2;
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  padding: clamp(20px, 2vw, 30px);
  border: 1px solid var(--green-line-soft);
  border-radius: 24px;
  background: var(--surface);
  color: var(--color-ink);
  box-shadow: var(--shadow-card);
  cursor: pointer;
  outline: none;
  transition: flex-grow .7s cubic-bezier(.25, .8, .25, 1),
              border-color var(--speed-medium) var(--ease-out),
              box-shadow var(--speed-medium) var(--ease-out);
}
.wpanel--dark { background: var(--surface-dark); color: var(--color-on-dark); border-color: var(--green-line-soft-2); }
.wpanel.is-open { flex-grow: var(--open-grow); cursor: default; border-color: var(--green-line); box-shadow: var(--shadow-lift); }
.wpanel--dark.is-open { border-color: var(--green-line-2); }
.wpanel:focus-visible { outline: 2px solid var(--green-ink); outline-offset: 3px; }

.wpanel__num {
  display: block;
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: 3rem;
  font-weight: 700;
  letter-spacing: -0.06em;
  line-height: 1;
  color: var(--color-ink);
  opacity: .09;
  pointer-events: none;
}
.wpanel--dark .wpanel__num { color: #fff; opacity: .2; }
.wpanel.is-open .wpanel__num { opacity: .16; }
.wpanel--dark.is-open .wpanel__num { opacity: .3; }

.wpanel__words { position: relative; z-index: 1; width: min(300px, 100%); }
.wpanel__label {
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--green-ink);
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;
}
.wpanel--dark .wpanel__label { color: var(--green-soft); }
.wpanel__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.18;
}
.wpanel.is-open .wpanel__title { font-size: clamp(1.5rem, 2.4vw, 2rem); }

.wpanel__more {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  visibility: hidden;
  transition: grid-template-rows .5s var(--ease-out),
              opacity .25s var(--ease-out),
              visibility 0s linear .25s;
}
.wpanel.is-open .wpanel__more {
  grid-template-rows: 1fr;
  opacity: 1;
  visibility: visible;
  transition: grid-template-rows .5s var(--ease-out),
              opacity .4s var(--ease-out) .25s,
              visibility 0s;
}
.wpanel__more-inner { min-height: 0; overflow: hidden; }
.wpanel__text {
  margin: 14px 0 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--color-ink-soft);
}
.wpanel--dark .wpanel__text { color: var(--color-on-dark-soft); }
.wpanel__points {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  font-size: 14px;
  line-height: 1.4;
}
.wpanel__points li { position: relative; padding: 5px 0 5px 18px; }
.wpanel__points li::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 8px; height: 2px;
  background: var(--green-ink);
}
.wpanel--dark .wpanel__points li::before { background: var(--green-soft); }
.wpanel__go {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 22px;
  padding: 12px 20px;
  border-radius: var(--radius-pill);
  background: var(--green-ink);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  transition: background-color var(--speed-fast) var(--ease-out);
}
.wpanel__go::after { content: "→"; }
.wpanel__go:hover { background: var(--green-deep); }
.wpanel--dark .wpanel__go { background: var(--green-bright); color: #000; }
.wpanel--dark .wpanel__go:hover { background: var(--green-soft); }

.wpanel__media {
  position: absolute;
  right: clamp(16px, 2vw, 28px);
  bottom: clamp(16px, 2vw, 28px);
  width: min(200px, calc(100% - 2 * clamp(16px, 2vw, 28px)));
  transition: width .7s cubic-bezier(.25, .8, .25, 1);
  pointer-events: none;
}

.wpanel.is-open .wpanel__media { width: 38%; }
.wpanel__media img { display: block; width: 100%; height: auto; filter: var(--depth-on-white); }
.wpanel--dark .wpanel__media img { filter: var(--depth-on-black); }

@media (max-width: 960px) {
  .wpanels { flex-direction: column; height: auto; }
  .wpanel { flex: none; }
  .wpanel__words { width: 100%; }
  .wpanel.is-open .wpanel__title { font-size: var(--text-h3); }
  .wpanel__media { display: none; }
  .wpanel.is-open .wpanel__media {
    display: block;
    position: static;
    width: 100%;
    max-width: 260px;
    margin: 18px auto 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .wpanel, .wpanel__media, .wpanel__more, .wpanel.is-open .wpanel__more { transition: none; }
}

[data-pass-section] .section__head .t-h1 { text-wrap: balance; }
.bpass-stage { perspective: 1400px; }
.bpass {
  --bp-body: var(--surface-pass);
  --bp-band: var(--green-ink);
  --bp-soft: rgba(255,255,255,.72);
  position: relative;
  display: flex;
  overflow: hidden;
  background: var(--bp-body);
  color: #fff;
  border-radius: 22px;
  box-shadow: 0 2px 4px rgba(0,0,0,.08), 0 30px 60px rgba(0,40,20,.22);
  transform: rotateX(var(--bp-rx, 0deg)) rotateY(var(--bp-ry, 0deg));
  transition: transform .25s var(--ease-out);
}
.bpass__main { position: relative; flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }

.bpass__band {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 11px clamp(18px, 2.6vw, 30px);
  background: var(--bp-band);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
  -webkit-font-smoothing: auto;
}
.bpass__band-note { opacity: .85; }

.bpass__brand { font-weight: inherit; text-transform: none; letter-spacing: .06em; }
.bpass__body { position: relative; padding: 16px clamp(18px, 2.6vw, 30px) 10px; }

.bpass__wm {
  position: absolute;
  right: clamp(12px, 2vw, 28px);
  top: 18px;
  font-family: var(--font-display);
  font-size: clamp(110px, 14vw, 170px);
  font-weight: 900;
  letter-spacing: -.06em;
  line-height: 1;
  color: #fff;
  opacity: .06;
  pointer-events: none;
}

.bpass__k,
.bpass__facts dt {
  display: block;
  margin: 0 0 3px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--bp-soft);
}

.bpass__route { position: relative; display: grid; grid-template-columns: auto minmax(60px, 1fr) auto; align-items: end; gap: 14px; }
.bpass__to { text-align: right; }
.bpass__city {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(26px, 3.2vw, 36px);
  font-weight: 800;
  letter-spacing: .01em;
  line-height: 1;
  text-transform: uppercase;
}
.bpass__arc { width: 100%; height: 40px; overflow: visible; }
.bpass__path { fill: none; stroke: rgba(255,255,255,.45); stroke-width: 1.3; stroke-dasharray: 3 5; }
.bpass__dot { fill: #fff; }
.bpass__dot--home { fill: var(--green-soft); }
.bpass__plane circle { fill: var(--bp-body); }
.bpass__plane path { fill: none; stroke: var(--green-soft); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.bpass__facts {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px 22px;
  margin: 16px 0 12px;
  padding: 12px 0;
  border-block: 1px dashed rgba(255,255,255,.28);
}
.bpass__facts dd { margin: 0; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }

.bpass__gates { position: relative; list-style: none; margin: 0; padding: 0; }
.bpass__gate {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) 22px;
  align-items: center;
  gap: 12px;
  padding: 11px 10px;
  border-top: 1px solid rgba(255,255,255,.14);
  border-radius: 10px;
  color: #fff;
  text-decoration: none;
  transition: background-color var(--speed-fast) var(--ease-out);
}
.bpass__gates li:first-child .bpass__gate { border-top: 0; }
.bpass__gate:hover,
.bpass__gate.is-on,
.bpass__gate:focus-visible { background: rgba(255,255,255,.1); }
.bpass__gate:focus-visible { outline: 2px solid var(--green-soft); outline-offset: -2px; }
.bpass__num {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 800;
  color: rgba(255,255,255,.5);
  font-variant-numeric: tabular-nums;
  transition: color var(--speed-fast) var(--ease-out);
}
.bpass__gate:hover .bpass__num,
.bpass__gate.is-on .bpass__num,
.bpass__gate:focus-visible .bpass__num { color: var(--green-soft); }
.bpass__way {
  display: block;
  margin-bottom: 2px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--green-soft);
  -webkit-font-smoothing: auto;
}
.bpass__title { display: block; font-family: var(--font-display); font-size: 16px; font-weight: 700; line-height: 1.25; }
.bpass__go {
  font-size: 18px;
  color: var(--green-soft);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity var(--speed-fast) var(--ease-out), transform var(--speed-fast) var(--ease-out);
}
.bpass__gate:hover .bpass__go,
.bpass__gate.is-on .bpass__go,
.bpass__gate:focus-visible .bpass__go { opacity: 1; transform: none; }

.bpass__fine {
  margin: auto 0 0;
  padding: 10px clamp(18px, 2.6vw, 30px) 14px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--bp-soft);
}

.bpass__stub {
  position: relative;
  flex: 0 0 170px;
  display: flex;
  flex-direction: column;
  border-left: 1.5px dashed rgba(255,255,255,.4);
  transform-origin: 0 0;
  transition: transform .8s cubic-bezier(.3, .7, .3, 1), opacity .8s var(--ease-out);
}
.bpass__stub .bpass__band { padding-inline: 16px; }
.bpass__stub-in { flex: 1 1 auto; display: flex; flex-direction: column; gap: 14px; padding: 16px; }
.bpass__stub.is-torn { transform: translate(46px, 40px) rotate(10deg); opacity: 0; }

.bpass__notch {
  position: absolute;
  z-index: 2;
  left: -11px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--surface);
}
.bpass__notch--top    { top: -11px; }
.bpass__notch--bottom { bottom: -11px; }
.bpass__stub-gate {
  display: block;
  font-family: var(--font-display);
  font-size: 44px;
  font-weight: 800;
  line-height: 1;
  color: var(--green-soft);
  font-variant-numeric: tabular-nums;
}
.bpass__stub-way   { display: block; font-size: 15px; font-weight: 700; }
.bpass__stub-title { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.4; color: rgba(255,255,255,.82); }
.bpass__stub-seat  { font-size: 14px; font-weight: 600; }
.bpass__stub [data-stub-gate],
.bpass__stub [data-stub-way],
.bpass__stub [data-stub-title] { transition: opacity .16s var(--ease-out); }
.bpass__stub.is-swapping [data-stub-gate],
.bpass__stub.is-swapping [data-stub-way],
.bpass__stub.is-swapping [data-stub-title] { opacity: 0; }
.bpass__barcode {
  display: block;
  margin-top: auto;
  height: 44px;
  background: repeating-linear-gradient(90deg,
    #fff 0 1px, transparent 1px 3px, #fff 3px 6px, transparent 6px 8px,
    #fff 8px 9px, transparent 9px 12px, #fff 12px 14px, transparent 14px 17px);
  opacity: .9;
}
.bpass__boarding {
  display: block;
  margin-top: -6px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--green-soft);
}

@media (max-width: 680px) {
  .bpass { flex-direction: column; }

  .bpass__main > .bpass__band { flex-wrap: wrap; justify-content: flex-start; gap: 2px 12px; font-size: 10px; letter-spacing: .14em; }
  .bpass__main > .bpass__band > span { white-space: nowrap; }
  .bpass__route { gap: 8px; }
  .bpass__facts { justify-content: flex-start; gap: 10px 20px; }
  .bpass__stub { flex: none; border-left: 0; border-top: 1.5px dashed rgba(255,255,255,.4); }
  .bpass__stub .bpass__band { display: none; }
  .bpass__stub-in { flex-direction: row; flex-wrap: wrap; align-items: flex-end; gap: 12px 18px; }
  .bpass__stub-to { flex: 1 1 120px; min-width: 0; }
  .bpass__barcode { width: 80px; margin-top: 0; }
  .bpass__boarding { flex-basis: 100%; margin-top: -4px; }
  .bpass__notch { display: none; }
  .bpass__gate { grid-template-columns: 38px minmax(0, 1fr) 18px; padding-inline: 6px; }
  .bpass__num { font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .bpass, .bpass__stub { transition: none; }
}

@media (max-width: 600px) {
  .hero--object { padding-top: 24px; }
  .hero--globe  { padding-top: 24px; }
  .hero--object .t-hero,
  .hero--globe .t-hero { font-size: 2.15rem; }
  .hero--object .t-lead,
  .hero--globe .t-lead { font-size: 15.5px; }
  .carousel { zoom: .75; }
  .notes { zoom: .72; }
  .dial { width: min(100%, 270px); }
}

@media (hover: none) {
  .object-hero__hint { display: none; }
}