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

:root {
  --bg:      oklch(10% 0.012 70);
  --surface: oklch(14% 0.01 70);
  --surf-hi: oklch(18% 0.01 70);
  --border:  oklch(22% 0.008 70);
  --t1:      oklch(95% 0.008 70);
  --t2:      oklch(60% 0.006 70);
  --t3:      oklch(50% 0.005 70);
  --accent:  oklch(76% 0.18 70);
  --a10:     oklch(76% 0.18 70 / 0.1);
  --aw:      oklch(70% 0.14 210);
  --aw10:    oklch(70% 0.14 210 / 0.12);
  --eop: cubic-bezier(0.16, 1, 0.3, 1);
  --eoq: cubic-bezier(0.25, 1, 0.5, 1);
  --pad: clamp(20px, 5vw, 80px);
  --max: 1240px;
}

html { scroll-behavior: smooth; }
body {
  background: var(--bg); color: var(--t1);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 1rem; line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img, video { display: block; max-width: 100%; }

/* ── TYPOGRAPHY UTILS ── */
.eyebrow {
  font-size: 0.625rem; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 14px;
}
.sec-title {
  font-weight: 700; font-size: clamp(36px, 5vw, 64px);
  letter-spacing: -0.035em; line-height: 0.96; color: var(--t1);
}

/* ── REVEAL ── */
.rv { opacity: 0; transform: translateY(16px); transition: opacity 550ms var(--eoq), transform 550ms var(--eoq); }
.rv.in { opacity: 1; transform: none; }

/* ── NAV ── */
#hdr {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  padding: 14px var(--pad);
  border-bottom: 1px solid transparent;
  transition: background .25s, border-color .25s;
}
#hdr.stuck {
  background: oklch(10% 0.012 70 / 0.95);
  border-color: var(--border);
  backdrop-filter: blur(10px);
}
nav {
  max-width: var(--max); margin: 0 auto;
  display: flex; align-items: center; gap: 16px;
}
.brand { font-weight: 700; font-size: 1rem; letter-spacing: -0.02em; color: var(--t1); text-decoration: none; flex-shrink: 0; transition: color .15s; }
.brand em { color: var(--accent); font-style: normal; transition: color .15s; }
.brand:hover { color: var(--accent); }
.brand:hover em { color: var(--t1); }
.nav-links { display: flex; gap: 20px; list-style: none; align-items: center; margin-left: auto; }
.nav-links a {
  font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--t2); text-decoration: none; transition: color .15s;
}
.nav-links a:hover { color: var(--t1); }

/* lang switcher */
.lang-sw { display: flex; gap: 1px; flex-shrink: 0; }
.lang-btn {
  background: none; border: 1px solid transparent; color: var(--t3);
  font-size: 0.4375rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 4px 7px; cursor: pointer; transition: border-color .15s, color .15s; line-height: 1;
}
.lang-btn:hover { color: var(--t2); border-color: var(--border); }
.lang-btn.active { border-color: var(--accent); color: var(--accent); }

/* skill pills */
.nav-pills { display: flex; gap: 4px; list-style: none; flex-wrap: wrap; margin-left: auto; }
.pill {
  font-size: 0.5625rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 5px 10px; min-height: 36px; border: 1px solid var(--border); color: var(--t3);
  text-decoration: none; transition: border-color .15s, color .15s; white-space: nowrap;
  display: inline-flex; align-items: center;
}
.pill:hover { border-color: var(--t2); color: var(--t2); }
.pill.active { border-color: var(--accent); color: var(--accent); }

/* ── SECTION ── */
.section { border-top: 1px solid var(--border); }
.inner { max-width: var(--max); margin: 0 auto; padding: 80px var(--pad); }
.inner.top { padding-top: 128px; }

/* ── FOOTER ── */
.foot { border-top: 1px solid var(--border); }
.foot-in {
  max-width: var(--max); margin: 0 auto; padding: 18px var(--pad);
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 6px;
}
.foot p { font-size: 0.625rem; color: var(--t3); letter-spacing: 0.06em; }
.foot a { color: var(--t3); text-decoration: none; transition: color .15s; }
.foot a:hover { color: var(--t2); }

/* ── HERO (landing) ── */
#hero {
  min-height: 100svh; padding: 80px var(--pad) 88px;
  display: flex; flex-direction: column; justify-content: flex-end;
  position: relative; isolation: isolate;
}
#hero::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(ellipse 80% 55% at 0% 100%, oklch(76% 0.18 70 / 0.18), transparent 70%),
    radial-gradient(ellipse 45% 35% at 6% 0%,   oklch(76% 0.18 70 / 0.05), transparent 60%);
}
.hero-in { max-width: var(--max); margin: 0 auto; width: 100%; }
.hero-tag {
  font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 20px;
  display: flex; align-items: center; gap: 8px;
}
.hero-tag::before {
  content: ''; display: block; width: 5px; height: 5px; border-radius: 50%;
  background: var(--accent); animation: blink 2.5s ease-in-out infinite;
}
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.2} }
.hero-name {
  font-weight: 700; font-size: clamp(52px, 10vw, 116px);
  line-height: 0.93; letter-spacing: -0.045em; color: var(--t1); margin-bottom: 24px;
}
.hero-name em { color: var(--accent); font-style: normal; }
.hero-sub {
  font-size: clamp(1rem, 1.6vw, 1.25rem); font-weight: 300;
  color: var(--t2); line-height: 1.5; max-width: 38ch; margin-bottom: 40px;
}
.hero-sub strong { color: var(--t1); font-weight: 400; }
.cta {
  display: inline-flex; align-items: center; gap: 8px; padding: 12px 24px;
  border: 1px solid var(--accent); color: var(--accent);
  font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase;
  text-decoration: none; transition: background .18s, color .18s;
}
.cta:hover { background: var(--accent); color: var(--bg); }
.cta span { display: inline-block; transition: transform .18s var(--eoq); }
.cta:hover span { transform: translateX(4px); }

/* ── SKILL LIST (landing) ── */
.skill-list { margin-top: 48px; border-top: 1px solid var(--border); }
.skill-row {
  display: flex; align-items: center; gap: 20px;
  padding: 18px 0; border-bottom: 1px solid var(--border);
  text-decoration: none; transition: padding-left .35s var(--eop), background .25s var(--eoq);
}
.skill-row:hover { padding-left: 12px; background: var(--a10); }
.sr-num {
  font-size: 0.5rem; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--accent); width: 28px; flex-shrink: 0;
}
.sr-name {
  font-weight: 700; font-size: clamp(26px, 4vw, 52px);
  letter-spacing: -0.038em; line-height: 1; color: var(--t1); flex: 1;
  transition: color .2s;
}
.skill-row:hover .sr-name { color: var(--accent); }
.sr-cat {
  font-size: 0.6875rem; color: var(--t2); display: none; flex-shrink: 0;
}
@media (min-width: 640px) { .sr-cat { display: block; } }
.sr-arr {
  font-size: 1rem; color: var(--t3); flex-shrink: 0;
  opacity: 0; transform: translateX(-6px);
  transition: opacity .25s, transform .35s var(--eop), color .2s;
}
.skill-row:hover .sr-arr { opacity: 1; transform: translateX(4px); color: var(--accent); }

/* ── LOGO TRACK ── */
.logo-track {
  overflow: hidden;
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  padding: 22px 0; user-select: none;
}
.logo-strip {
  display: flex; align-items: center; gap: 96px;
  width: max-content; animation: marquee 22s linear infinite;
}
.track-logo {
  height: 36px; width: auto; flex-shrink: 0;
  filter: brightness(0) invert(1); opacity: 0.32; display: block;
}
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(calc(-100% / 3)); }
}

/* ── ABOUT (landing) ── */
.about-cols { display: grid; grid-template-columns: 140px 1fr; gap: 56px; align-items: start; }
.about-label { font-weight: 700; font-size: clamp(24px, 3.2vw, 40px); letter-spacing: -0.03em; line-height: 1.05; color: var(--t3); }
.about-body p { font-size: clamp(1rem, 1.5vw, 1.125rem); font-weight: 300; line-height: 1.75; color: var(--t1); max-width: 56ch; }
.about-body p + p { margin-top: 14px; }

/* ── CONTACT ── */
#contact { background: radial-gradient(ellipse 100% 80% at 50% 110%, oklch(76% 0.18 70 / 0.1), transparent 70%); }
.contact-in { max-width: var(--max); margin: 0 auto; padding: 80px var(--pad) 64px; }
.contact-hl {
  font-weight: 700; font-size: clamp(44px, 8.5vw, 104px);
  letter-spacing: -0.048em; line-height: 0.92; color: var(--t1); margin-bottom: 44px;
}
.contact-hl em { color: var(--accent); font-style: normal; }
.contact-links { display: flex; gap: 24px; flex-wrap: wrap; }
.contact-link {
  display: flex; align-items: center; gap: 7px;
  font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--t2); text-decoration: none; transition: color .15s;
}
.contact-link:hover { color: var(--accent); }

/* ── SKILL PAGE HEADER ── */
.page-title {
  font-weight: 700; font-size: clamp(36px, 7vw, 88px);
  letter-spacing: -0.04em; line-height: 0.93; color: var(--t1); margin-top: 12px; margin-bottom: 48px;
  overflow-wrap: break-word;
}

/* ── CLIENT LOGO ── */
.logo-wrap { display: flex; align-items: center; height: 48px; margin-bottom: 16px; }
.logo-img { max-height: 48px; max-width: 160px; width: auto; object-fit: contain; display: block; filter: brightness(0) invert(1); opacity: 0.85; }
.logo-txt { display: none; }


/* ── CASE STUDY ── */
.cases { display: flex; flex-direction: column; }
.case {
  padding: 48px 0; border-top: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 24px;
}
.case:last-child { border-bottom: 1px solid var(--border); }
.case-hd {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
  padding-bottom: 20px; border-bottom: 1px solid oklch(76% 0.18 70 / 0.28);
}
.case-hd .logo-wrap { margin-bottom: 0; }
.case-result {
  font-size: clamp(14px, 1.8vw, 20px); font-weight: 300;
  color: var(--t2); letter-spacing: -0.01em; text-align: right;
}
.case-result strong { font-weight: 700; color: var(--accent); }
.case-stats {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 0;
  font-size: 0.8125rem; color: var(--t3); line-height: 1.8;
}
.cs-stat { display: inline-flex; align-items: baseline; gap: 5px; white-space: nowrap; }
.cs-sep { padding: 0 10px; color: var(--t3); user-select: none; }
.cs-val { font-weight: 700; color: var(--t1); font-size: 0.875rem; font-variant-numeric: tabular-nums; }
.cs-val.pos { color: oklch(72% 0.17 145); }
.case-desc {
  font-size: 0.9375rem; color: var(--t2); line-height: 1.65;
  max-width: 600px;
}

/* ── CARD GRID ── */
.card-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
  gap: 2px; background: var(--border); border: 1px solid var(--border);
}

/* card */
.card {
  position: relative; overflow: hidden; cursor: pointer;
  background: var(--surface); aspect-ratio: 4/3;
}
.card.w { aspect-ratio: 16/9; }
.card img, .card video {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 600ms var(--eoq);
}
.card:hover img, .card:hover video { transform: scale(1.04); }
.card-over {
  position: absolute; inset: 0;
  background: linear-gradient(to top, oklch(10% 0.012 70 / 0.92) 0%, oklch(10% 0.012 70 / 0) 52%);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 20px 22px;
  opacity: 0; transform: translateY(8px);
  transition: opacity .3s, transform .4s var(--eop);
}
.card:hover .card-over { opacity: 1; transform: none; }
.card-nm { font-weight: 600; font-size: 0.875rem; letter-spacing: -0.01em; color: var(--t1); }

/* play ring */
.play-ring {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 42px; height: 42px; border-radius: 50%;
  border: 1.5px solid oklch(95% 0.008 70 / 0.45);
  display: flex; align-items: center; justify-content: center;
  pointer-events: none; z-index: 2; transition: border-color .2s, background .2s;
}
.card:hover .play-ring { border-color: var(--accent); background: var(--a10); }
.play-ring svg { fill: var(--t1); width: 12px; height: 12px; margin-left: 2px; }

/* placeholder */
.card-ph {
  aspect-ratio: 1; background: var(--surface);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
}
.card-ph p { font-size: 0.5625rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--t3); }

/* ── BROWSER FRAME (web) ── */
.web-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(440px, 1fr));
  gap: 32px;
}
.site-block { display: flex; flex-direction: column; gap: 16px; }
.browser-frame {
  border: 1px solid var(--border); overflow: hidden;
  display: block; text-decoration: none; transition: border-color .2s;
}
.browser-frame:hover { border-color: var(--aw); }
.b-chrome {
  background: var(--surf-hi); border-bottom: 1px solid var(--border);
  padding: 8px 10px; display: flex; align-items: center; gap: 8px;
}
.b-dots { display: flex; gap: 4px; }
.b-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--border); }
.b-url {
  flex: 1; background: var(--surface); border: 1px solid var(--border);
  padding: 2px 8px; font-size: 0.5rem; color: var(--aw); font-family: monospace;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0.7;
}
.b-body { overflow: hidden; }
.b-body img { width: 100%; aspect-ratio: 16/9; object-fit: cover; object-position: top; display: block; transition: transform 500ms var(--eoq); }
.browser-frame:hover .b-body img { transform: scale(1.025) translateY(-1%); }
.site-meta { padding: 0 2px; }
.site-name { font-weight: 700; font-size: 1.125rem; letter-spacing: -0.02em; margin-bottom: 4px; }
.site-desc { font-size: 0.875rem; color: var(--t2); line-height: 1.55; margin-bottom: 10px; }
.site-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.5625rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--aw); text-decoration: none; border-bottom: 1px solid var(--aw10);
  padding-bottom: 1px; transition: border-color .15s, color .15s;
}
.site-link:hover { border-color: var(--aw); color: oklch(78% 0.14 210); }
.site-link svg { flex-shrink: 0; }

/* ── DRAWER ── */
.d-overlay {
  position: fixed; inset: 0; z-index: 500;
  background: oklch(10% 0.012 70 / 0.82);
  opacity: 0; pointer-events: none; transition: opacity .24s var(--eoq);
}
.d-overlay.open { opacity: 1; pointer-events: all; }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(480px, 100vw);
  background: var(--surface); border-left: 1px solid var(--border);
  overflow-y: auto; overscroll-behavior: contain;
  transform: translateX(100%); transition: transform 320ms var(--eop); z-index: 501;
  will-change: transform;
}
.d-overlay.open .drawer { transform: none; }
.d-topbar {
  position: sticky; top: 0; z-index: 2; background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 8px 12px; display: flex; align-items: center; gap: 8px;
}
.d-nav { display: flex; gap: 3px; }
.d-nav-btn, .d-close {
  width: 40px; height: 40px; background: none; border: 1px solid var(--border);
  color: var(--t2); cursor: pointer; font-size: 1rem;
  display: flex; align-items: center; justify-content: center;
  transition: border-color .15s, color .15s;
}
.d-nav-btn:hover:not(:disabled), .d-close:hover { border-color: var(--accent); color: var(--accent); }
.d-nav-btn:disabled { opacity: 0.25; cursor: not-allowed; }
.d-count { font-size: 0.5rem; font-weight: 500; color: var(--t3); letter-spacing: 0.08em; flex: 1; text-align: center; }
.d-media { width: 100%; background: var(--bg); }
.d-media img, .d-media video { width: 100%; display: block; max-height: 65vh; object-fit: contain; }
.d-body { padding: 18px 22px 36px; }
.d-client { font-size: 0.5rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); margin-bottom: 6px; }
.d-title { font-weight: 700; font-size: clamp(16px, 2.2vw, 24px); letter-spacing: -0.02em; line-height: 1.2; margin-bottom: 10px; }
.d-desc { font-size: 0.875rem; color: var(--t2); line-height: 1.7; }
.d-tags { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 12px; }
.d-tag { font-size: 0.5rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; padding: 2px 6px; border: 1px solid var(--border); color: var(--t3); }
.d-link {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 14px;
  font-size: 0.5625rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--accent); text-decoration: none;
}
.d-link:hover { text-decoration: underline; }
.d-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 4px; margin-top: 14px; }
.d-gallery img { width: 100%; aspect-ratio: 1; object-fit: cover; cursor: pointer; transition: opacity .15s; }
.d-gallery img:hover { opacity: 0.75; }

/* ── PAGE ENTRANCE ── */
@keyframes pageIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
main { animation: pageIn 0.55s var(--eoq) both; }

/* ── CLIENT SECTION (design page) ── */
.client-section { margin-bottom: 56px; }
.client-hd {
  display: flex; align-items: center; gap: 16px;
  padding: 16px 0; border-bottom: 1px solid oklch(76% 0.18 70 / 0.28); margin-bottom: 2px;
}
.client-hd-logo {
  height: 44px; width: auto; max-width: 180px; object-fit: contain;
  filter: brightness(0) invert(1); opacity: 0.85;
}

/* ── VIDEO LIGHTBOX ── */
.vl-overlay {
  position: fixed; inset: 0; z-index: 600;
  background: oklch(8% 0.01 70 / 0.97);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 24px; gap: 0;
  opacity: 0; pointer-events: none;
  transition: opacity .28s var(--eoq);
}
.vl-overlay.open { opacity: 1; pointer-events: all; }
.vl {
  width: min(900px, 100%); display: flex; flex-direction: column; gap: 16px;
  max-height: 92svh; overflow-y: auto; overscroll-behavior: contain;
}
.vl-top { display: flex; justify-content: flex-end; }
.vl-close {
  width: 40px; height: 40px; background: none;
  border: 1px solid var(--border); color: var(--t2); cursor: pointer;
  font-size: 1.125rem; display: flex; align-items: center; justify-content: center;
  transition: border-color .15s, color .15s; flex-shrink: 0;
}
.vl-close:hover { border-color: var(--accent); color: var(--accent); }
.vl-player { width: 100%; aspect-ratio: 16/9; background: var(--bg); overflow: hidden; }
.vl-player video { width: 100%; height: 100%; object-fit: contain; display: block; }
.vl-info { display: flex; flex-direction: column; gap: 4px; }
.vl-client {
  font-size: 0.5rem; font-weight: 700; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--accent);
}
.vl-title {
  font-weight: 700; font-size: clamp(15px, 2vw, 22px);
  letter-spacing: -0.02em; color: var(--t1);
}
.vl-thumbs {
  display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px;
}
.vl-thumbs::-webkit-scrollbar { display: none; }
.vl-thumb {
  flex-shrink: 0; width: 150px; aspect-ratio: 16/9;
  position: relative; overflow: hidden; cursor: pointer;
  background: var(--surface);
  border: 1.5px solid transparent; transition: border-color .15s;
}
.vl-thumb.active { border-color: var(--accent); }
.vl-thumb:not(.active):hover { border-color: var(--t2); }
.vl-thumb video { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.vl-thumb-label {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: oklch(10% 0.012 70 / 0.88); padding: 4px 8px;
  font-size: 0.4375rem; font-weight: 500; color: var(--t1);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ── RESPONSIVE ── */
@media (max-width: 860px) {
  .about-cols { grid-template-columns: 1fr; gap: 24px; }
  .web-grid { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .card-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .nav-links { display: none; }
  nav { display: grid; grid-template-columns: 1fr auto; gap: 4px 8px; padding-bottom: 4px; align-items: center; }
  .brand { grid-column: 1; grid-row: 1; }
  .lang-sw { grid-column: 2; grid-row: 1; }
  .nav-pills { grid-column: 1 / -1; grid-row: 2; margin-left: 0; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; width: 100%; padding-bottom: 2px; }
  .nav-pills::-webkit-scrollbar { display: none; }
  .drawer {
    top: auto; left: 0; right: 0; bottom: 0;
    width: 100%; height: 88svh;
    border-left: none; border-top: 1px solid var(--border);
    transform: translateY(100%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .rv { opacity: 1; transform: none; transition: none; }
  .hero-tag::before { animation: none; }
  .drawer, .d-overlay, .vl-overlay { transition: none; }
  main { animation: none; }
  .logo-strip { animation: none; }
  .card img, .card video { transition: none; }
  .card:hover img, .card:hover video { transform: none; }
  .card-over { transition: none; }
  .skill-row, .sr-arr, .sr-name { transition: none; }
  html { scroll-behavior: auto; }
}
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── SCROLL TO TOP ── */
.to-top {
  position: fixed; bottom: 28px; right: 28px; z-index: 900;
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 50%; cursor: pointer; color: var(--t2);
  opacity: 0; pointer-events: none;
  transform: translateY(8px);
  transition: opacity 0.25s var(--eoq), transform 0.25s var(--eoq), color 0.15s, background 0.15s;
}
.to-top svg { width: 12px; height: 12px; }
.to-top.visible { opacity: 1; pointer-events: auto; transform: translateY(0); }
.to-top:hover { background: var(--surf-hi); color: var(--t1); }
@media (max-width: 600px) {
  .to-top { bottom: 16px; right: 16px; }
}