:root {
  --sc-canvas: #0c1015;
  --sc-surface: #151b22;
  --sc-ink: #f1ebe1;
  --sc-ink-soft: #aab2bb;
  --sc-accent: #f0a33a;
  --sc-accent-ink: #1a1208;
  --sc-font-display: "Bricolage Grotesque", system-ui, sans-serif;
  --sc-font-text: "Geist", system-ui, sans-serif;
  --paw-wet: #4f5a66;
}
body { background: var(--sc-canvas); color: var(--sc-ink); }

/* Bar */
.bar { position: fixed; inset: 0 0 auto 0; z-index: var(--sc-z-chrome, 50); display: flex; align-items: center; gap: var(--sc-5); padding: var(--sc-4) var(--sc-gutter); }
.bar__mark { font-family: var(--sc-font-display); font-weight: 700; font-size: 1.15rem; letter-spacing: -0.01em; color: var(--sc-ink); text-decoration: none; margin-right: auto; }
.bar__lang { color: var(--sc-ink-soft); text-decoration: none; font-size: var(--sc-t-sm); }
.bar__lang:hover { color: var(--sc-ink); }
.cta { display: inline-flex; align-items: center; gap: .55em; background: var(--sc-accent); color: var(--sc-accent-ink); font-weight: 600; text-decoration: none; padding: .7em 1.15em; border-radius: var(--sc-r-pill); white-space: nowrap; transition: transform 140ms var(--sc-ease-out), background-color 160ms var(--sc-ease-out); }
.cta:hover { background: #f5b459; }
.cta:active { transform: translateY(1px); }
.cta:focus-visible, .bar a:focus-visible, .foot a:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 3px; }
.cta--sm { font-size: var(--sc-t-sm); padding: .55em 1em; }
.cta__paw { width: 1.1em; height: 1.1em; fill: none; stroke: currentColor; stroke-width: 1.6; transition: fill 400ms var(--sc-ease-out), transform 400ms var(--sc-ease-out); }
.is-home .cta__paw { fill: currentColor; transform: scale(1.12); }

/* 1 Hero: layered planes driven by --sc-p */
.hero [data-sc-stage] { overflow: hidden; background: #0b0f14; }
.plane { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 60%; pointer-events: none; }
.plane img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; max-width: none; }
.plane--back { z-index: 1; transform-origin: 72% 85%; transform: scale(calc(1.02 + var(--sc-p, 0) * 0.06)); }
.plane--cat  { z-index: 3; transform-origin: 72% 85%; transform: scale(calc(1.02 + var(--sc-p, 0) * 0.17)); }
.plane--fg   { z-index: 4; filter: blur(6px) brightness(.8); transform-origin: 50% 100%;
  transform: translateY(calc(var(--sc-p, 0) * -7vh)) scale(1.2);
  -webkit-mask-image: linear-gradient(to top, #000 0, #000 9%, transparent 22%); mask-image: linear-gradient(to top, #000 0, #000 9%, transparent 22%); }
.mist { position: absolute; inset: -10%; z-index: 2; pointer-events: none;
  background: radial-gradient(60% 40% at 18% 35%, rgba(140,160,185,.18), transparent 70%), radial-gradient(40% 30% at 30% 70%, rgba(120,140,165,.12), transparent 70%);
  transform: translateX(calc(var(--sc-p, 0) * 6vw)); }
.hero .sc-scrim { z-index: 2; }
.hero .sc-copy { z-index: 5; max-width: min(44rem, 52vw); bottom: clamp(6rem, 21vh, 14rem); }
.hero h1 { font-size: var(--sc-t-3xl); }
.shade { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(90deg, rgba(8,11,15,.86) 0%, rgba(8,11,15,.62) 34%, rgba(8,11,15,0) 58%); }
.hero h1 { text-wrap: balance; }
.hero .sc-body { color: var(--sc-ink-soft); max-width: 34rem; margin-top: var(--sc-5); }

/* 2 Cold */
.cold { padding-block: clamp(4rem, 9vw, 8rem) var(--sc-section); }
.cold__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.cold figure { margin: 0; }
.cold img { width: 100%; height: auto; display: block; border-radius: var(--sc-r-md); }
.cold figcaption { font-size: var(--sc-t-xs); color: var(--sc-ink-soft); margin-top: var(--sc-3); }
.cold h2 { text-wrap: balance; }
.cold .sc-body { color: var(--sc-ink-soft); }

/* 3 Turn: pinned lines over the hands */
.turn [data-sc-stage] { overflow: hidden; }
.turn__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; max-width: none; }
.turn .shade { z-index: 1; background: linear-gradient(90deg, rgba(14,11,8,.9) 0%, rgba(14,11,8,.7) 36%, rgba(14,11,8,0) 60%); }
.turn__lines { position: absolute; z-index: 2; left: var(--sc-gutter); top: 50%; translate: 0 -50%; width: min(34rem, 40vw); }
.turn__lines p { position: absolute; top: 0; left: 0; margin: 0; font-family: var(--sc-font-display); font-size: var(--sc-t-2xl); line-height: 1.08; letter-spacing: var(--sc-track-snug); text-wrap: balance; translate: 0 -50%; }

/* 4 What a rescue takes */
.steps { padding-block: var(--sc-section); }
.steps__head { max-width: 40rem; margin-bottom: var(--sc-8); }
.steps__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--sc-hairline); }
.steps__list li { display: grid; grid-template-columns: minmax(8rem, 3fr) minmax(0, 7fr); gap: var(--sc-6); padding-block: var(--sc-6); border-bottom: 1px solid var(--sc-hairline); align-items: baseline; }
.steps__list h3 { margin: 0; font-family: var(--sc-font-display); font-size: var(--sc-t-xl); font-weight: 600; }
.steps__list p { margin: 0; color: var(--sc-ink-soft); max-width: 46ch; }
.steps__close { margin-top: var(--sc-8); max-width: 36rem; font-size: var(--sc-t-lg); }

/* 5 Peak */
.peak .sc-copy h2 { text-wrap: balance; max-width: 18ch; }

/* 6 Close */
.close [data-sc-stage] { background: radial-gradient(80% 60% at 70% 30%, #2a2016, #17120d 70%); display: grid; align-content: center; }
.close__inner { width: min(var(--sc-maxw, 76rem), 100% - 2 * var(--sc-gutter)); margin-inline: auto; }
.close h2 { margin-bottom: var(--sc-7); }
.close__cols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 4rem); margin-bottom: var(--sc-8); }
.close__cols h3 { font-family: var(--sc-font-display); font-size: var(--sc-t-lg); margin: 0 0 var(--sc-3); }
.close__cols p { margin: 0; color: #cfc6b8; max-width: 44ch; }
.foot { position: absolute; left: var(--sc-gutter); right: var(--sc-gutter); bottom: var(--sc-5); display: flex; flex-wrap: wrap; gap: var(--sc-2) var(--sc-6); font-size: var(--sc-t-xs); color: #b9ae9f; }
.foot a { color: inherit; }

/* Signature: the paw trail */
.trail { position: fixed; z-index: 40; right: clamp(.6rem, 1.6vw, 1.6rem); top: 14vh; bottom: 10vh; width: 3.2rem; pointer-events: none; }
.paw { position: absolute; width: 1.35rem; height: 1.35rem; opacity: 0; transform: translate(-50%, -50%) rotate(var(--r)) scale(.7); transition: opacity 500ms var(--sc-ease-out), transform 500ms var(--sc-ease-out);
  color: color-mix(in oklab, var(--paw-wet) calc((1 - var(--t)) * 100%), var(--sc-accent)); }
.paw.is-on { opacity: calc(.45 + var(--t) * .55); transform: translate(-50%, -50%) rotate(var(--r)) scale(1); }
.paw svg { width: 100%; height: 100%; fill: currentColor; display: block; }

@media (max-width: 860px) {
  .bar__lang { font-size: var(--sc-t-xs); }
  .hero .sc-copy { max-width: none; top: calc(4.5rem + 4vh); bottom: auto; translate: none; right: var(--sc-gutter); }
  .hero h1 { font-size: var(--sc-t-2xl); }
  .shade { background: linear-gradient(180deg, rgba(8,11,15,.9) 0%, rgba(8,11,15,.82) 38%, rgba(8,11,15,0) 58%); }
  .turn .shade { background: linear-gradient(0deg, rgba(14,11,8,.92) 0%, rgba(14,11,8,.65) 42%, rgba(14,11,8,0) 66%); }
  .plane--back, .plane--cat { transform-origin: 55% 75%; }
  .cold__grid { grid-template-columns: 1fr; }
  .turn__lines { width: auto; right: var(--sc-gutter); top: auto; bottom: 26vh; translate: none; }
  .turn__lines p { font-size: var(--sc-t-xl); top: auto; bottom: 0; translate: none; }
  .steps__list li { grid-template-columns: 1fr; gap: var(--sc-2); }
  .close__cols { grid-template-columns: 1fr; gap: var(--sc-5); margin-bottom: var(--sc-6); }
  .close h2 { margin-bottom: var(--sc-5); }
  .foot { position: static; margin-top: var(--sc-7); }
  .trail { top: auto; right: auto; left: 4vw; bottom: .35rem; width: 62vw; height: 1.4rem; }
  .paw { width: .85rem; height: .85rem; }
}
@media (prefers-reduced-motion: reduce) {
  .paw { transition: none; }
}