@property --p { syntax: '<number>'; inherits: false; initial-value: 0; }
/* Hallmark · macrostructure: Panel Stack (studied) · tone: refined-operator · anchor hue: brass 86°
 * theme: studied-DNA (source: https://ventriloc.ca/en/) · studied: yes · DNA-source: url + screenshots
 * observed: PolySans + Inter + DM Mono → built with General Sans + Geist + DM Mono (free) · paper #f5f5f5 · brass #816729 · orange #ff682c
 * nav: N5 floating pill · footer: Ft5 statement (dark inset panel + glyph) · enrichment: Tier-C generated stills (Higgsfield) + Tier-A CSS floating cards
 * copy: unchanged (verified by textcheck) · motion: loader curtain · line reveal · brass underline draw · card rise · float
 */

/* ---- legacy aliases: inline styles in the markup still reference these names ---- */
:root {
  --accent: var(--color-orange);
  --ink: var(--color-ink);
  --bg: var(--color-paper);
  --bg-card: var(--color-card);
  --bg-deep: var(--color-paper-2);
  --ink-2: var(--color-ink-2);
  --ink-mute: var(--color-mute);
  --ink-faint: var(--color-faint);
  --line: var(--color-rule);
  --line-strong: var(--color-rule-2);
}

/* ========== Base ========== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; scroll-padding-top: calc(var(--nav-h) + var(--space-sm)); }
body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.55;
  color: var(--color-ink);
  background: var(--color-paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
ul, ol { list-style: none; }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--color-nude); color: var(--color-ink); }

/* ========== Type primitives ========== */
.display, .h-section, h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 500; font-style: normal; }
.display, .h-section, .service-title, .tts-offers-head h3, .tts-proof h3, .tts-faq h3, .channels-strip h3, .work-logos-title { font-weight: 400; }
.display {
  font-size: var(--text-display);
  line-height: 1.04;
  letter-spacing: -0.02em;
}
.h-section {
  font-size: var(--text-h2);
  line-height: 1.08;
  letter-spacing: -0.02em;
  overflow-wrap: anywhere; min-width: 0;
  text-wrap: balance;
}
.eyebrow {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  color: var(--color-brass);
  display: inline-flex; align-items: center; gap: var(--space-2xs);
}
.eyebrow::before {
  content: ""; width: 7px; height: 7px; border-radius: 2px;
  background: var(--color-orange); flex: none;
}
.lead {
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.125rem);
  line-height: 1.6;
  color: var(--color-ink-2);
  max-width: 58ch;
}
.kr { font-family: var(--font-kr); letter-spacing: -0.01em; word-break: keep-all; }
.mono { font-family: var(--font-mono); }

/* Emphasis = brass colour (never italic in headings). The drawn underline — brass line + orange sweep,
   as on the reference — is reserved for two moments: the hero headline and the contact head. */
.hl, .italic, .accent { font-style: normal; color: var(--color-brass); }
.hero-headline .accent, #contact .hl { position: relative; white-space: nowrap; }
.hero-headline .accent::before, #contact .hl::before,
.hero-headline .accent::after, #contact .hl::after { content: ""; position: absolute; left: 0; bottom: 0.02em; height: 2px; pointer-events: none; }
.hero-headline .accent::before, #contact .hl::before {
  right: 0; background: var(--color-brass); opacity: 0.4;
  transform: scaleX(0); transform-origin: left; transition: transform var(--dur-slow) var(--ease-out) 0.6s;
}
.hero-headline .accent::after, #contact .hl::after { width: 18%; background: var(--color-orange); opacity: 0; transform: translateX(-100%); }
.hero-headline.is-in .accent::before, #contact .is-in .hl::before, html:not(.js) .hero-headline .accent::before, html:not(.js) #contact .hl::before { transform: none; }
.hero-headline.is-in .accent::after, #contact .is-in .hl::after { animation: uSweep 4.5s var(--ease-in-out) 1.8s infinite; }
@keyframes uSweep { 0% { transform: translateX(0); opacity: 0; } 8% { opacity: 1; } 50% { transform: translateX(455%); opacity: 1; } 58%, 100% { transform: translateX(455%); opacity: 0; } }
@media (max-width: 767px) { #contact .hl { white-space: normal; } #contact .hl::before, #contact .hl::after { display: none; } }
.service-title.is-accent { color: var(--color-ink); }
.service-title.is-accent .ln-last { color: var(--color-brass); }

/* Skip link (visible on focus) */
.skip-link { position: absolute; left: var(--space-sm); top: -60px; z-index: 1001; padding: 10px 16px; border-radius: var(--radius-pill); background: var(--color-ink); color: var(--color-on-dark); font-size: var(--text-sm); }
.skip-link:focus { top: var(--space-sm); }

/* ========== Layout ========== */
.container { max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); }
section { padding: var(--section-y) 0; position: relative; }
section.container { padding-top: var(--section-y); padding-bottom: var(--section-y); }
.section-head { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-md); margin-bottom: var(--space-2xl); }
.section-head .h-section { max-width: 20ch; }
.divider { height: 1px; background: var(--color-rule); }

/* ========== Loader (brass curtain) ========== */
.site-loader {
  position: fixed; inset: 0; z-index: 1000;
  background: var(--color-brass);
  display: none; align-items: center; justify-content: center;
  transform-origin: top;
}
.site-loader img { height: 30px; width: auto; opacity: 0; transform: translateY(12px); }
html.js.show-loader .site-loader { display: flex; animation: loaderOut 800ms var(--ease-in-out) 650ms forwards; }
@keyframes loaderOut { to { transform: translateY(-101%); visibility: hidden; } }
html.js.show-loader .hero [data-lines] .ln-i { transition-delay: calc(1.25s + var(--i, 0) * 90ms); }
html.js.show-loader .hero .reveal { transition-delay: calc(1.35s + var(--i, 0) * 80ms); }

/* ========== Nav (N5 floating pill) ========== */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  height: var(--nav-h);
  padding: 0 var(--pad);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--space-md);
  background: var(--color-paper-clear);
  transition: background var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.nav.scrolled {
  background: var(--color-paper-glass);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  box-shadow: 0 1px 0 var(--color-rule);
}
.nav-logo { display: inline-flex; align-items: center; height: 26px; justify-self: start; flex: none; }
.nav-logo-img { height: 100%; width: auto; max-width: none; mix-blend-mode: multiply; }
.nav-menu {
  display: flex; align-items: center; gap: 2px;
  padding: 4px;
  background: var(--color-paper-2);
  border-radius: var(--radius-pill);
  position: relative;
}
.nav-hl { position: absolute; top: 4px; bottom: 4px; left: 0; width: 0; border-radius: var(--radius-pill); background: var(--color-card); opacity: 0; pointer-events: none; transition: transform 220ms var(--ease-out), width 220ms var(--ease-out), opacity 160ms; }
.nav-menu a { position: relative; z-index: 1; }
html.js .nav { animation: navIn 650ms var(--ease-out) 150ms both; }
html.js.show-loader .nav { animation-delay: 1.3s; }
@keyframes navIn { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: none; } }
.nav-menu a {
  font-size: var(--text-sm); font-weight: 500;
  color: var(--color-ink-2);
  padding: 7px 14px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.nav-menu a:hover { color: var(--color-ink); }
.nav-menu:not(.has-hl) a:hover, .nav-menu a:focus-visible { background: var(--color-card); }
.nav-right { display: flex; align-items: center; gap: var(--space-xs); justify-self: end; }

/* Pills */
.cta-pill, .btn-secondary, .tts-cta, .playbook-cta, .btn-submit, .external-card, .brand-cta, .cs-reset {
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 42px; padding: 0 20px;
  border-radius: var(--radius-pill);
  font-family: var(--font-body); font-size: var(--text-sm); font-weight: 500;
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), transform 600ms var(--ease-spring);
}
.cta-pill, .playbook-cta, .external-card { background: var(--color-ink); color: var(--color-on-dark); }
.cta-pill:hover, .playbook-cta:hover, .external-card:hover { background: var(--color-brass); transform: scale(1.03); }
.btn-secondary, .brand-cta, .cs-reset { background: transparent; color: var(--color-ink); border: 1px solid var(--color-rule-2); }
.btn-secondary:hover, .brand-cta:hover, .cs-reset:hover { border-color: var(--color-ink); background: var(--color-card); transform: scale(1.03); }
.tts-cta, .btn-submit { background: var(--color-brass); color: var(--color-on-dark); }
.tts-cta:hover, .btn-submit:hover { background: var(--color-ink); transform: scale(1.03); }
.cta-pill .arrow, .tts-cta > span:last-child, .playbook-cta > span:last-child, .btn-submit > span:last-child { transition: transform var(--dur-base) var(--ease-out); }
.cta-pill:hover .arrow, .tts-cta:hover > span:last-child, .playbook-cta:hover > span:last-child, .btn-submit:hover > span:last-child { transform: translateX(3px); }
.cta-pill:active, .btn-secondary:active, .tts-cta:active, .btn-submit:active { transform: scale(0.98); transition-duration: 120ms; }
.btn-submit:disabled, .btn-submit[aria-busy="true"] { opacity: 0.6; cursor: progress; transform: none; }

/* Mobile menu */
.nav-mobile-toggle {
  display: none;
  width: 42px; height: 42px;
  flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  border-radius: var(--radius-pill);
  background: var(--color-paper-2);
  border: 1px solid var(--color-rule);
}
.nav-mobile-toggle .bar { display: block; width: 16px; height: 1.6px; background: var(--color-ink); border-radius: 2px; transition: transform 300ms var(--ease-out), opacity 200ms; }
body.menu-open .nav-mobile-toggle .bar:nth-child(1) { transform: translateY(5.6px) rotate(45deg); }
body.menu-open .nav-mobile-toggle .bar:nth-child(2) { opacity: 0; }
body.menu-open .nav-mobile-toggle .bar:nth-child(3) { transform: translateY(-5.6px) rotate(-45deg); }
.menu-backdrop { position: fixed; inset: 0; z-index: 105; background: var(--color-scrim); opacity: 0; pointer-events: none; transition: opacity 300ms var(--ease-out); }
body.menu-open .menu-backdrop { opacity: 1; pointer-events: auto; }
body.menu-open, html:has(body.menu-open) { overflow: hidden; }
.mobile-drawer {
  position: fixed; top: var(--space-xs); right: var(--space-xs); bottom: var(--space-xs);
  width: min(calc(100vw - 24px), 380px);
  z-index: 110;
  background: var(--color-card);
  border-radius: var(--radius-lg);
  padding: 84px var(--space-lg) var(--space-lg);
  display: flex; flex-direction: column;
  transform: translateX(calc(100% + 24px));
  transition: transform 520ms var(--ease-out);
  box-shadow: var(--shadow-float);
  overflow-y: auto; overscroll-behavior: contain;
}
body.menu-open .mobile-drawer { transform: none; }
.drawer-close { position: absolute; top: var(--space-sm); right: var(--space-sm); width: 42px; height: 42px; border-radius: 50%; background: var(--color-paper-2); }
.drawer-close::before, .drawer-close::after { content: ""; position: absolute; left: 12px; right: 12px; top: 20px; height: 1.6px; background: var(--color-ink); border-radius: 2px; }
.drawer-close::before { transform: rotate(45deg); } .drawer-close::after { transform: rotate(-45deg); }
body:not(.menu-open) .mobile-drawer { visibility: hidden; transition: transform 520ms var(--ease-out), visibility 0s 520ms; }
body.menu-open .mobile-drawer { visibility: visible; transition: transform 520ms var(--ease-out), visibility 0s; }
.mobile-drawer-link {
  font-family: var(--font-display); font-size: var(--text-xl); font-weight: 500; letter-spacing: -0.02em;
  padding: var(--space-sm) 0;
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-sm);
  border-bottom: 1px solid var(--color-rule);
  transition: color var(--dur-fast);
}
.mobile-drawer-link:hover { color: var(--color-brass); }
.mobile-drawer-link .label-kr { font-family: var(--font-kr); font-size: var(--text-sm); color: var(--color-mute); }
.mobile-drawer-cta {
  margin-top: var(--space-md);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; border-radius: var(--radius-pill);
  background: var(--color-ink); color: var(--color-on-dark); font-weight: 500;
}
.mobile-drawer-foot {
  margin-top: auto; padding-top: var(--space-md);
  font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-mute);
}
.mobile-drawer-foot a { display: block; margin-top: 4px; color: var(--color-ink); font-family: var(--font-body); font-size: var(--text-sm); }

/* ========== Hero ========== */
.hero { padding-top: calc(var(--nav-h) + var(--space-2xl)); padding-bottom: var(--space-2xl); }
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.hero-copy { display: flex; flex-direction: column; align-items: flex-start; }
.hero-headline { margin-top: var(--space-md); max-width: 16ch; }
.hero-headline .line { display: block; }
.hero-kr-line {
  margin-top: var(--space-md);
  font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.3125rem);
  font-weight: 500;
  color: var(--color-ink);
}
.hero-sub { margin-top: var(--space-md); display: flex; flex-direction: column; gap: var(--space-xs); max-width: 54ch; }
.hero-sub p { font-size: var(--text-base); line-height: 1.65; color: var(--color-mute); }
.hero-cta { margin-top: var(--space-xl); display: flex; gap: var(--space-xs); flex-wrap: wrap; }

/* Visual = light ivory panel holding the existing slideshow as a UI card, floating cards on the panel edges */
.hero-visual {
  position: relative;
  background: var(--color-ivory);
  border-radius: var(--radius-xl);
  padding: clamp(2.75rem, 4vw, 3.75rem) clamp(1.25rem, 3vw, 2.5rem);
}
.hero-showcase {
  position: relative;
  aspect-ratio: 2 / 1;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-dark);
  isolation: isolate;
  box-shadow: var(--shadow-float);
}
.hero-slides { position: absolute; inset: 0; }
.hero-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1200ms var(--ease-in-out); }
.hero-slide.active { opacity: 1; }
.hero-slide picture, .hero-slide picture img, .hero-showcase-video, .hero-showcase-img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.hero-slide.active .hero-showcase-img, .hero-slide.active .hero-showcase-video { animation: kenburns 9s var(--ease-out) both; }
@keyframes kenburns { from { transform: scale(1.05); } to { transform: scale(1); } }
.hero-showcase-grad {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, var(--color-media-clear) 35%, var(--color-media-fade) 100%);
}
.hero-showcase-caption {
  position: absolute; left: var(--space-md); right: max(30%, 170px); bottom: var(--space-md); z-index: 2; text-wrap: balance;
  display: flex; flex-direction: column; gap: 4px;
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(0.9375rem, 0.85rem + 0.4vw, 1.125rem); letter-spacing: -0.01em; line-height: 1.25;
  color: var(--color-on-dark);
  text-shadow: 0 1px 12px var(--color-shadow-soft);
}
.hero-showcase-caption .label-kr { font-family: var(--font-kr); font-weight: 400; font-size: var(--text-sm); color: var(--color-on-dark-mute); }
.hero-dots { position: absolute; right: var(--space-md); top: var(--space-md); z-index: 3; display: flex; gap: 6px; }
.hero-dot { width: 18px; height: 3px; border-radius: 2px; background: var(--color-on-media-dim); transition: background var(--dur-base), width var(--dur-base) var(--ease-out); position: relative; }
.hero-dot::before { content: ""; position: absolute; inset: -12px -4px; }
.hero-dot.active { width: 34px; background: var(--color-orange); }
.hero-pause { position: relative; width: 26px; height: 26px; margin-left: 6px; border-radius: 50%; background: var(--color-on-media-dim); display: grid; place-items: center; }
.hero-pause::before, .hero-pause::after { content: ""; width: 3px; height: 10px; border-radius: 1px; background: var(--color-on-dark); position: absolute; top: 8px; }
.hero-pause::before { left: 9px; } .hero-pause::after { right: 9px; }
.hero-pause[aria-pressed="true"]::before { left: 10px; width: 0; height: 0; background: none; border-left: 9px solid var(--color-on-dark); border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-radius: 0; top: 7px; }
.hero-pause[aria-pressed="true"]::after { display: none; }
.hero-dots { align-items: center; }

/* floating UI cards — decorative, built only from figures already printed on the page */
.hero-float {
  position: absolute; z-index: 4;
  background: var(--color-card);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-float);
  padding: var(--space-sm);
  animation: floatY 7s var(--ease-in-out) infinite alternate;
}
.hero-float--a { top: -22px; left: clamp(-28px, -2vw, -12px); width: 196px; }
.hero-float--b { bottom: 18%; right: clamp(-28px, -2vw, -12px); width: 188px; animation-delay: -3.5s; }
.hf-label { display: block; font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--color-mute); }
.hf-num { margin-top: 4px; font-family: var(--font-display); font-weight: 500; font-size: var(--text-xl); letter-spacing: -0.02em; line-height: 1.1; color: var(--color-ink); }
.hf-tiles { display: flex; gap: 4px; margin-top: var(--space-2xs); }
.hf-tiles i { flex: 1; height: 18px; border-radius: 4px; background: var(--color-paper-2); transform: scaleY(0.3); transform-origin: bottom; transition: transform 700ms var(--ease-out); }
.hf-tiles i:nth-child(2) { background: var(--color-nude); }
.hf-tiles i:nth-child(4) { background: var(--color-brass-lt); }
.is-in .hf-tiles i, html:not(.js) .hf-tiles i { transform: none; }
.hf-tiles i:nth-child(2) { transition-delay: 80ms; } .hf-tiles i:nth-child(3) { transition-delay: 160ms; } .hf-tiles i:nth-child(4) { transition-delay: 240ms; } .hf-tiles i:nth-child(5) { transition-delay: 320ms; }
.hf-avatars { display: flex; margin-top: var(--space-2xs); }
.hf-avatars i { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--color-card); margin-left: -7px; }
.hf-avatars i:first-child { margin-left: 0; }
.hf-avatars i:nth-child(1) { background: var(--color-nude); }
.hf-avatars i:nth-child(2) { background: var(--color-brass-lt); }
.hf-avatars i:nth-child(3) { background: var(--color-orange); }
.hf-avatars i:nth-child(4) { background: var(--color-paper-2); }
.hf-avatars i:nth-child(5) { background: var(--color-ink-2); }
.hero-cursor {
  position: absolute; z-index: 5; top: 26%; left: 46%;
  width: 18px; height: 18px;
  animation: cursorPath 12s var(--ease-in-out) infinite;
}
.hero-cursor svg { width: 18px; height: 18px; filter: drop-shadow(0 1px 1px var(--color-shadow-soft)); }
.hero-cursor path { fill: var(--color-card); stroke: var(--color-ink); stroke-width: 1.4; stroke-linejoin: round; }
@keyframes drawLine { to { stroke-dashoffset: 0; } }
@keyframes floatY { from { transform: translateY(-6px) scale(var(--s, 1)); } to { transform: translateY(8px) scale(var(--s, 1)); } }
@keyframes cursorPath {
  0%, 100% { transform: translate(0, 0); }
  30% { transform: translate(-500%, -300%); }
  55% { transform: translate(420%, 160%); }
  80% { transform: translate(-200%, 220%); }
}

.hero-stat-strip {
  margin-top: var(--space-2xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-rule);
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-lg);
}
.hsi { display: flex; flex-direction: column; gap: var(--space-2xs); }
.hsi-num { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem); letter-spacing: -0.03em; line-height: 1; transition: color var(--dur-base); }
.hsi:hover .hsi-num { color: var(--color-brass); }
.hsi-label { font-size: var(--text-sm); color: var(--color-mute); line-height: 1.45; }

/* ========== Why ========== */
.why-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-sm); }
.why-card {
  background: var(--color-paper-2);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  display: flex; flex-direction: column;
  min-height: 300px;
  transition: background var(--dur-base) var(--ease-out), transform 600ms var(--ease-out);
}
.why-card:hover { background: var(--color-card); transform: translateY(-4px); }
.why-num { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-brass); }
.why-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: var(--space-xl); }
.why-ico { width: 40px; height: 40px; padding: 8px; border-radius: var(--radius-md); background: var(--color-card); fill: none; stroke: var(--color-brass); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: transform 600ms var(--ease-out), background var(--dur-base); }
.why-card:hover .why-ico { transform: rotate(-6deg) scale(1.06); background: var(--color-ivory); }
.why-title { font-size: var(--text-xl); line-height: 1.15; letter-spacing: -0.02em; margin-bottom: var(--space-2xs); text-wrap: balance; }
.why-title-kr { font-size: var(--text-sm); font-weight: 500; color: var(--color-ink-2); margin-bottom: var(--space-md); }
.why-desc { font-size: var(--text-sm); line-height: 1.6; color: var(--color-mute); margin-top: auto; }

/* ========== TikTok Shop ========== */
.tts-intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; margin-bottom: var(--space-2xl); }
.tts-intro-copy { display: flex; flex-direction: column; gap: var(--space-md); }
.tts-kr { font-family: var(--font-kr); font-weight: 600; font-size: clamp(1.0625rem, 1rem + 0.45vw, 1.375rem); line-height: 1.45; letter-spacing: -0.02em; color: var(--color-ink); }
.tts-kr-sub { font-family: var(--font-kr); font-size: var(--text-base); line-height: 1.7; color: var(--color-mute); }
.tts-intro .lead + .lead { margin-top: calc(var(--space-xs) * -1); }
.tts-kr, .tts-kr-sub, .tts-shift-kr, .tts-offer-kr, .tts-faq-kr, .tts-faq-list .q-kr { word-break: keep-all; }
.tts-media, .service-media {
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-ivory);
  aspect-ratio: 4 / 3;
}
.tts-media img, .service-media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: transform 1600ms var(--ease-out); }
html.js .tts-media, html.js .service-media { clip-path: inset(0 0 100% 0 round var(--radius-lg)); transition: clip-path 1200ms var(--ease-out); }
html.js .tts-media.is-in, html.js .service-media.is-in { clip-path: inset(0 round var(--radius-lg)); }
.is-in .tts-media img, .is-in .service-media img, .tts-media.is-in img, .service-media.is-in img, html:not(.js) .tts-media img, html:not(.js) .service-media img { transform: none; }

.tts-shifts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-sm); }
.tts-shift { background: var(--color-paper-2); border-radius: var(--radius-lg); padding: var(--space-lg); display: flex; flex-direction: column; gap: var(--space-xs); min-height: 320px; }
.tts-shift-num { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-brass); margin-bottom: var(--space-md); }
.tts-shift-title { font-size: var(--text-xl); line-height: 1.15; letter-spacing: -0.02em; text-wrap: balance; }
.tts-shift-kr { font-family: var(--font-kr); font-size: var(--text-sm); font-weight: 600; color: var(--color-ink-2); }
.tts-shift-desc { font-size: var(--text-sm); line-height: 1.6; color: var(--color-mute); }
.tts-shift-src { margin-top: auto; padding-top: var(--space-sm); font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--color-mute); }

.tts-offers-head { margin: var(--space-3xl) 0 var(--space-xl); display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--space-2xl); align-items: end; }
.tts-offers-head h3, .tts-proof h3, .tts-faq h3 { font-size: var(--text-2xl); line-height: 1.12; letter-spacing: -0.02em; text-wrap: balance; }
.tts-offers-head h3 .accent, .tts-proof h3 .accent, .tts-faq h3 .accent { color: var(--color-brass); }
.tts-offers-head p { font-size: var(--text-base); line-height: 1.6; color: var(--color-mute); }
.tts-offers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-sm); }
.tts-offer {
  position: relative;
  background: var(--color-paper-2);
  border-radius: var(--radius-lg);
  padding: var(--space-lg) var(--space-md) var(--space-md);
  display: flex; flex-direction: column; gap: var(--space-xs);
  min-height: 460px;
  transition: transform 600ms var(--ease-out), border-color var(--dur-base), box-shadow var(--dur-base);
}
.tts-offer:hover { transform: translateY(-6px); background: var(--color-card); }
.tts-offer-num { font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--color-brass); }
.tts-offer-tag { position: absolute; top: var(--space-md); right: var(--space-md); font-family: var(--font-mono); font-size: var(--text-2xs); padding: 3px 9px; border-radius: var(--radius-pill); background: var(--color-orange); color: var(--color-ink); }
.tts-offer-name { font-size: var(--text-xl); line-height: 1.1; letter-spacing: -0.02em; margin-top: var(--space-xs); text-wrap: balance; }
.tts-offer-kr { font-family: var(--font-kr); font-size: var(--text-sm); font-weight: 600; line-height: 1.45; color: var(--color-ink-2); }
.tts-offer-desc { font-size: var(--text-sm); line-height: 1.6; color: var(--color-ink-2); }
.tts-offer-list { display: flex; flex-direction: column; gap: 6px; margin-top: 2px; }
.tts-offer-list li, .pb-card-actions li { position: relative; padding-left: 16px; font-size: var(--text-sm); line-height: 1.5; color: var(--color-mute); }
.tts-offer-list li::before, .pb-card-actions li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 6px; height: 6px; border-radius: 1px; background: var(--color-orange); }
.tts-offer-out { margin-top: auto; padding-top: var(--space-sm); border-top: 1px solid var(--color-rule); font-size: var(--text-sm); line-height: 1.5; color: var(--color-ink); }
.tts-offer-out b { display: block; font-family: var(--font-mono); font-weight: 400; font-size: var(--text-2xs); color: var(--color-brass); margin-bottom: 4px; }

.tts-proof {
  margin-top: var(--space-3xl);
  background: var(--color-dark); color: var(--color-on-dark);
  border-radius: var(--radius-xl);
  padding: clamp(2rem, 4vw, 3.5rem);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: var(--space-xl); align-items: center;
}
.tts-proof .eyebrow { color: var(--color-brass-lt); margin-bottom: var(--space-sm); }
.tts-proof h3 { color: var(--color-on-dark); }
.tts-proof h3 .accent { color: var(--color-brass-lt); }
.tts-proof-sub { margin-top: var(--space-md); font-size: var(--text-base); line-height: 1.6; color: var(--color-on-dark-mute); }
.tts-proof-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-xs); }
.tts-proof-stats > div { container-type: inline-size; background: var(--color-dark-raise); border: 1px solid var(--color-rule-dark); border-radius: var(--radius-md); padding: var(--space-md); display: flex; flex-direction: column; gap: var(--space-2xs); min-height: 190px; }
.tts-proof-num { font-family: var(--font-display); font-weight: 500; font-size: min(2.75rem, 24cqi); letter-spacing: -0.03em; line-height: 1; color: var(--color-brass-lt); }
.tts-proof-desc { font-size: var(--text-sm); font-weight: 500; line-height: 1.4; color: var(--color-on-dark); }
.tts-proof-ctx { margin-top: auto; font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--color-on-dark-mute); }

.tts-faq { margin-top: var(--space-3xl); display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--space-2xl); align-items: start; }
.tts-faq-kr { margin-top: var(--space-sm); font-family: var(--font-kr); font-size: var(--text-sm); color: var(--color-mute); }
.tts-faq-list { border-bottom: 1px solid var(--color-rule); }
.tts-faq-list details { border-top: 1px solid var(--color-rule); }
.tts-faq-list summary {
  list-style: none; cursor: pointer; position: relative;
  padding: var(--space-md) 52px var(--space-md) 0;
  font-family: var(--font-display); font-weight: 500; font-size: var(--text-lg); line-height: 1.3; letter-spacing: -0.015em;
  transition: color var(--dur-fast);
}
.tts-faq-list summary::-webkit-details-marker { display: none; }
.tts-faq-list summary:hover { color: var(--color-brass); }
.tts-faq-list summary::after {
  content: "+" / ""; position: absolute; right: 0; top: 50%;
  width: 32px; height: 32px; margin-top: -16px;
  display: grid; place-items: center;
  border-radius: 50%; background: var(--color-paper-2);
  font-family: var(--font-body); font-size: var(--text-lg); color: var(--color-ink);
  transition: transform var(--dur-base) var(--ease-out), background var(--dur-fast);
}
.tts-faq-list details[open] summary::after { transform: rotate(45deg); background: var(--color-nude); }
.tts-faq-list summary .q-kr { display: block; margin-top: 4px; font-family: var(--font-kr); font-weight: 400; font-size: var(--text-sm); color: var(--color-mute); letter-spacing: -0.01em; }
.tts-faq-list details p { padding: 0 52px var(--space-md) 0; font-size: var(--text-base); line-height: 1.65; color: var(--color-mute); max-width: 62ch; }
.tts-cta-row { margin-top: var(--space-2xl); padding-top: var(--space-lg); border-top: 1px solid var(--color-rule); display: flex; justify-content: space-between; align-items: center; gap: var(--space-md); flex-wrap: wrap; }
.tts-cta-line { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 500; letter-spacing: -0.015em; color: var(--color-ink); max-width: 46ch; }

/* ========== Playbook (light panel) ========== */
.playbook-panel { background: var(--color-paper-2); border-radius: var(--radius-xl); padding: clamp(1.5rem, 4vw, 4rem); }
.playbook-intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-2xl); margin-bottom: var(--space-xl); align-items: start; }
.playbook-intro .eyebrow { margin-bottom: var(--space-md); }
.playbook-track-legend { display: flex; gap: var(--space-sm) var(--space-lg); flex-wrap: wrap; margin-top: var(--space-md); }
.legend-item { display: flex; align-items: center; gap: var(--space-2xs); font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-ink-2); }
.legend-sub { color: var(--color-mute); }
.swatch { display: inline-block; width: 22px; height: 6px; border-radius: 3px; }
.swatch--usp { background: var(--color-orange); }
.swatch--brand { background: var(--color-brass); }
.playbook-diagram-wrap { background: var(--color-card); border-radius: var(--radius-lg); padding: var(--space-lg) var(--space-md) var(--space-md); margin-bottom: var(--space-md); }
.playbook-svg { width: 100%; height: auto; }
.playbook-svg .timeline-base { stroke: var(--color-rule-2); stroke-width: 1; }
.playbook-svg .tick-line { stroke: var(--color-rule); stroke-dasharray: 3 4; }
.playbook-svg line[stroke^="rgba(255"] { stroke: var(--color-rule-2); }
.playbook-svg .tick-label { font-family: var(--font-mono); font-size: 11px; fill: var(--color-mute); }
.playbook-svg .growth-curve { fill: none; stroke-width: 2.5; stroke-dasharray: 1500; stroke-dashoffset: 1500; }
.is-in .playbook-svg .growth-curve, .playbook-svg.is-in .growth-curve, html:not(.js) .playbook-svg .growth-curve { animation: drawLine 2600ms var(--ease-out) 300ms forwards; }
#uspGrad stop { stop-color: var(--color-nude); }
#philoGrad stop { stop-color: var(--color-ivory); }
#curveGrad stop:nth-child(1) { stop-color: var(--color-orange); }
#curveGrad stop:nth-child(2) { stop-color: var(--color-ink); }
#curveGrad stop:nth-child(3) { stop-color: var(--color-brass); }
.playbook-svg .track-label { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; fill: var(--color-ink); }
.playbook-svg .track-label[fill="#FFB89E"] { fill: var(--color-brass); }
.playbook-svg .track-label[fill="#B5DBD5"] { fill: var(--color-brass); }
.playbook-svg .track-label[fill^="rgba"] { fill: var(--color-mute); text-transform: none; }
.playbook-svg .node { fill: var(--color-card); stroke: var(--color-ink); stroke-width: 2; transition: fill var(--dur-fast); }
.playbook-svg .node[fill="#FF4D3D"] { fill: var(--color-orange); stroke: var(--color-card); }
.playbook-svg .node-group:hover .node { fill: var(--color-orange); }
.playbook-svg .node-label { font-family: var(--font-mono); font-size: 11.5px; fill: var(--color-ink); }
.playbook-svg .node-label[fill] { fill: var(--color-ink); }
.playbook-svg .node-kpi { font-family: var(--font-body); font-size: 10.5px; fill: var(--color-mute); }
.playbook-svg .scale-peak-label { font-family: var(--font-mono); fill: var(--color-ink); }
.playbook-svg rect[fill^="rgba(255,77,61"] { fill: var(--color-nude); }
.playbook-cards { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-xs); }
.pb-card { background: var(--color-card); border-radius: var(--radius-md); padding: var(--space-md); display: flex; flex-direction: column; gap: var(--space-xs); min-height: 360px; position: relative; overflow: hidden; transition: transform 600ms var(--ease-out); }
.pb-card:hover { transform: translateY(-4px); }
.pb-card.scale .pb-card-num { display: inline-flex; align-items: center; gap: 6px; }
.pb-card.scale .pb-card-num::before { content: ""; width: 7px; height: 7px; border-radius: 2px; background: var(--color-orange); }
.pb-card-num, .pb-card-time { font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--color-brass); }
.pb-card-time { color: var(--color-mute); }
.pb-card-name { font-size: var(--text-xl); letter-spacing: -0.02em; line-height: 1.1; }
.pb-card-kpi { font-size: var(--text-sm); font-weight: 500; line-height: 1.4; padding: var(--space-xs); border-radius: var(--radius-sm); background: var(--color-paper-2); }
.pb-card-actions { margin-top: auto; }
.pb-card-actions ul { display: flex; flex-direction: column; gap: 6px; }
.playbook-cta-row { margin-top: var(--space-xl); display: flex; justify-content: space-between; align-items: center; gap: var(--space-md); flex-wrap: wrap; }
.playbook-quote { font-family: var(--font-kr); font-size: var(--text-lg); font-weight: 500; letter-spacing: -0.02em; color: var(--color-ink); }
.playbook-quote .source { display: block; margin-top: 6px; font-family: var(--font-mono); font-weight: 400; font-size: var(--text-2xs); color: var(--color-mute); letter-spacing: 0.02em; }

/* ========== Services ========== */
.services-intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-2xl); margin-bottom: var(--space-2xl); align-items: end; }
.services-intro .eyebrow { margin-bottom: var(--space-md); }
.service-chips { margin-top: var(--space-lg); display: flex; flex-wrap: wrap; gap: var(--space-2xs); align-items: center; }
.schip { display: inline-flex; align-items: center; gap: var(--space-2xs); padding: 6px 14px 6px 6px; border-radius: var(--radius-pill); background: var(--color-card); border: 1px solid var(--color-rule); font-size: var(--text-sm); font-weight: 500; }
.schip-num { font-family: var(--font-mono); font-size: var(--text-2xs); padding: 3px 8px; border-radius: var(--radius-pill); background: var(--color-paper-2); color: var(--color-brass); }
.schip-plus { color: var(--color-faint); }
.service-stack { display: flex; flex-direction: column; gap: var(--space-sm); }
.service-row {
  background: var(--color-paper-2);
  border-radius: var(--radius-xl);
  padding: clamp(1.5rem, 3.5vw, 3.5rem);
  transform-origin: 50% 0;
}
.service-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: center; }
.service-head { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-sm); }
.service-num { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-brass); display: inline-flex; align-items: center; gap: var(--space-2xs); }
.service-num::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--color-orange); }
.service-title { font-size: var(--text-2xl); line-height: 1.08; letter-spacing: -0.02em; text-wrap: balance; overflow-wrap: anywhere; }
.service-title-kr { font-size: var(--text-base); font-weight: 600; color: var(--color-ink-2); }
.service-head > p { font-size: var(--text-base); line-height: 1.65; color: var(--color-mute); max-width: 52ch; }
.service-head > p strong { color: var(--color-ink); font-weight: 600; }
.service-row { position: relative; }
@media (min-width: 1200px) {
  .service-top { position: sticky; top: calc(var(--nav-h) + var(--space-md)); z-index: 0; transform-origin: 50% 0;
    transform: scale(calc(1 - var(--p) * 0.05)); opacity: calc(1 - var(--p) * 0.55); }
  .service-body { position: relative; z-index: 1; background: var(--color-paper-2); }
}
.service-body { margin-top: var(--space-xl); padding-top: var(--space-xl); border-top: 1px solid var(--color-rule); display: flex; flex-direction: column; gap: var(--space-md); }
.service-body > p { font-size: var(--text-sm); color: var(--color-mute); }
.service-items { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 var(--space-lg); }
.service-items > div { padding: var(--space-sm) 0; border-top: 1px solid var(--color-rule); display: flex; flex-direction: column; gap: 2px; }
.service-items strong { font-family: var(--font-display); font-weight: 500; font-size: var(--text-base); letter-spacing: -0.01em; }
.service-items em { font-style: normal; font-family: var(--font-kr); font-size: var(--text-xs); color: var(--color-mute); }

.charis-celeb-panel, .voc-pull, .promise-card, .sea-map-wrap, .cosmax-card, .charis-card { background: var(--color-card); border-radius: var(--radius-lg); }
.charis-celeb-panel { padding: var(--space-lg); }
.ccp-head { margin-bottom: var(--space-md); }
.ccp-eyebrow { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-brass); margin-bottom: var(--space-2xs); }
.ccp-title { font-size: var(--text-2xl); line-height: 1.12; letter-spacing: -0.02em; }
.ccp-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-md); padding-bottom: var(--space-md); margin-bottom: var(--space-md); border-bottom: 1px solid var(--color-rule); }
.ccp-stats > div { display: flex; flex-direction: column; gap: 6px; }
.ccp-num { font-family: var(--font-display); font-weight: 500; font-size: var(--text-2xl); letter-spacing: -0.03em; line-height: 1; }
.ccp-desc { font-size: var(--text-xs); color: var(--color-mute); line-height: 1.45; }
.ccp-body { font-size: var(--text-sm); line-height: 1.6; color: var(--color-ink-2); }
.tiktok-stat-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-xs); }
.tiktok-stat-strip > div { background: var(--color-card); border-radius: var(--radius-md); padding: var(--space-md); }
.tiktok-stat-strip .num { font-family: var(--font-display); font-weight: 500; font-size: var(--text-2xl); letter-spacing: -0.03em; margin-bottom: 6px; }
.tiktok-stat-strip .desc { font-size: var(--text-xs); color: var(--color-mute); line-height: 1.45; }
.voc-pull { padding: var(--space-lg); position: relative; }
.voc-pull::before { content: "“"; position: absolute; top: var(--space-xs); left: var(--space-md); font-family: var(--font-display); font-size: 64px; line-height: 1; color: var(--color-nude); }
.voc-pull q { display: block; padding-top: var(--space-md); font-family: var(--font-display); font-weight: 500; font-size: var(--text-xl); line-height: 1.3; letter-spacing: -0.015em; quotes: none; }
.voc-pull .source { margin-top: var(--space-sm); font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--color-brass); }
.promises { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-xs); }
.promise-card { padding: var(--space-md); display: flex; flex-direction: column; gap: var(--space-sm); position: relative; overflow: hidden; }
.promise-label { font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--color-brass); margin-bottom: 6px; }
.promise-title { font-family: var(--font-display); font-weight: 500; font-size: var(--text-lg); line-height: 1.2; letter-spacing: -0.015em; margin-bottom: var(--space-2xs); }
.promise-desc { font-size: var(--text-sm); color: var(--color-mute); line-height: 1.55; }
.promise-num { position: absolute; right: var(--space-sm); bottom: -10px; font-family: var(--font-display); font-weight: 500; font-size: 72px; letter-spacing: -0.04em; color: var(--color-paper-2); z-index: 0; }
.promise-card > div:first-child { position: relative; z-index: 1; }
.sea-map-wrap { padding: var(--space-lg); }
.sea-map { width: 100%; height: auto; max-height: 420px; }
.sea-map g[fill="#EDE7DB"] { fill: var(--color-ivory); stroke: var(--color-ink-2); stroke-width: 0.5; }
.sea-map circle[fill="#FF4D3D"] { fill: var(--color-orange); }
.sea-map circle[fill="#D97757"] { fill: var(--color-sea-2); }
.sea-map circle[fill="#1F1F1F"] { fill: var(--color-ink); }
.sea-map .pin-pulse { animation: pulse 2.4s var(--ease-out) infinite; transform-origin: center; transform-box: fill-box; }
@keyframes pulse { from { transform: scale(1); opacity: 0.7; } to { transform: scale(3); opacity: 0; } }
.sea-map text { font-family: var(--font-mono); font-size: 10.5px; fill: var(--color-ink); }
.sea-legend { margin-top: var(--space-md); display: flex; gap: var(--space-sm) var(--space-lg); flex-wrap: wrap; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-mute); }
.sea-legend > span { display: flex; align-items: center; gap: var(--space-2xs); }
.sea-legend i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; }
.sea-legend .dot-sub { background: var(--color-orange); }
.sea-legend .dot-fam { background: var(--color-sea-2); }
.sea-legend .dot-net { background: var(--color-ink); }
.sea-note { margin-top: var(--space-xs); font-size: var(--text-sm); color: var(--color-mute); line-height: 1.5; }
.external-card { align-self: flex-start; min-height: 48px; padding: 0 24px; }
.external-card .arrow-up-right { width: 15px; height: 15px; }
.service-note { font-size: var(--text-sm); color: var(--color-mute); }

/* ========== Markets ========== */
.markets-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-sm); }
.market-card {
  background: var(--color-paper-2); border-radius: var(--radius-lg);
  padding: var(--space-lg); display: flex; flex-direction: column; gap: var(--space-xs); min-height: 320px;
  transition: transform 600ms var(--ease-out), box-shadow var(--dur-base), border-color var(--dur-base);
}
.market-card:hover { transform: translateY(-6px); background: var(--color-card); }
.market-flag { font-size: 30px; line-height: 1; }
.market-name { font-size: var(--text-xl); letter-spacing: -0.02em; margin-top: var(--space-xs); }
.market-headline { font-family: var(--font-display); font-weight: 500; font-size: var(--text-base); color: var(--color-brass); }
.market-body { font-size: var(--text-sm); line-height: 1.6; color: var(--color-mute); }
.market-tag { margin-top: auto; padding-top: var(--space-sm); border-top: 1px solid var(--color-rule); font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--color-ink-2); display: flex; align-items: center; gap: var(--space-2xs); }

.channels-strip { position: relative; margin-top: var(--space-3xl); min-height: 520px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.channels-strip h3 { font-size: var(--text-3xl); line-height: 1.1; letter-spacing: -0.02em; max-width: 16ch; position: relative; z-index: 1; }
.channels-strip h3 .accent { display: inline; }
.channels-list > div {
  position: absolute; width: 220px; text-align: left;
  background: var(--color-card); border: 1px solid var(--color-rule); border-radius: var(--radius-md);
  box-shadow: var(--shadow-float);
  padding: var(--space-sm);
  display: flex; flex-direction: column; gap: 2px;
  animation: floatY 8s var(--ease-in-out) infinite alternate;
}
.channels-list > div:nth-child(1) { top: 2%; left: 3%; --s: 1; }
.channels-list > div:nth-child(2) { top: 0; right: 5%; animation-delay: -2s; --s: 1.05; }
.channels-list > div:nth-child(3) { top: 40%; left: 0; animation-delay: -4s; --s: 0.92; }
.channels-list > div:nth-child(4) { top: 44%; right: 0; animation-delay: -1s; --s: 0.96; }
.channels-list > div:nth-child(5) { bottom: 2%; left: 9%; animation-delay: -5s; --s: 1.02; }
.channels-list > div:nth-child(6) { bottom: 0; right: 10%; animation-delay: -3s; --s: 0.9; }
.ch-logo { display: flex; align-items: center; gap: 8px; height: 30px; margin-bottom: var(--space-2xs); }
.ch-logo img { width: auto; height: 26px; }
.ch-store { width: 28px; height: 28px; fill: none; stroke: var(--color-brass); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.channels-list strong { font-family: var(--font-display); font-weight: 500; font-size: var(--text-base); }
.channels-list em { font-style: normal; font-size: var(--text-xs); color: var(--color-mute); line-height: 1.4; }

/* ========== Work ========== */
.metrics-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-sm); margin-bottom: var(--space-3xl); }
.metric-card { background: var(--color-paper-2); border-radius: var(--radius-lg); padding: var(--space-lg); display: flex; flex-direction: column; min-height: 230px; transition: background var(--dur-base), transform 600ms var(--ease-out); }
.metric-card:hover { background: var(--color-card); transform: translateY(-4px); }
.metric-num { font-family: var(--font-display); font-weight: 500; font-size: clamp(2.25rem, 1.6rem + 2vw, 3.5rem); letter-spacing: -0.035em; line-height: 1; color: var(--color-brass); margin-bottom: var(--space-md); }
.metric-desc { font-size: var(--text-base); font-weight: 500; margin-bottom: var(--space-2xs); }
.metric-ctx { margin-top: auto; font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--color-mute); }
.work-logos-head { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--space-xl); margin-bottom: var(--space-lg); align-items: end; }
.work-logos-head .eyebrow { margin-bottom: var(--space-sm); }
.work-logos-title { font-size: var(--text-3xl); line-height: 1.08; letter-spacing: -0.025em; }
.work-tagline-right { font-family: var(--font-mono); font-size: var(--text-xs); line-height: 1.7; color: var(--color-mute); text-align: right; }
.clients-image-wrap { background: var(--color-card); border-radius: var(--radius-xl); padding: clamp(1rem, 3vw, 2.5rem); border: 1px solid var(--color-rule); }
.clients-image-inner { position: relative; width: 100%; container-type: inline-size; }
.clients-image { width: 100%; height: auto; display: block; filter: grayscale(1) contrast(1.05); mix-blend-mode: multiply; transition: filter 600ms var(--ease-out); }
.clients-image-wrap:hover .clients-image { filter: none; }
.logo-overlay { position: absolute; bottom: 0; width: 14.28%; aspect-ratio: 1.55; display: flex; flex-direction: column; align-items: center; justify-content: center; transform: translateY(10%); }
.logo-overlay.plus { right: 14.28%; }
.logo-overlay.plus span { font-family: var(--font-display); font-weight: 600; font-size: clamp(8px, 3.2cqw, 38px); letter-spacing: -0.04em; color: var(--color-brass); white-space: nowrap; line-height: 1; }
.logo-overlay.count { right: 0; }
.logo-overlay.count .count-num { font-family: var(--font-display); font-weight: 500; font-size: clamp(6px, 1.7cqw, 19px); line-height: 1.1; text-align: center; }

/* ========== Brands ========== */
.brand-stack { display: flex; flex-direction: column; gap: var(--space-sm); }
.brand-row {
  background: var(--color-paper-2); border-radius: var(--radius-xl);
  padding: var(--space-md);
  display: grid; grid-template-columns: auto minmax(0, 1.1fr) minmax(0, 1fr) auto; gap: var(--space-xl); align-items: center;
  transition: background var(--dur-base) var(--ease-out);
}
.brand-row:hover { background: var(--color-card); }
.brand-visual { width: 200px; height: 240px; border-radius: var(--radius-lg); overflow: hidden; background: var(--color-ivory); }
.brand-visual-img { width: 100%; height: 100%; object-fit: cover; object-position: center top; transition: transform 1200ms var(--ease-out); }
.brand-visual-img.reii { object-position: center; }
.brand-row:hover .brand-visual-img { transform: scale(1.04); }
.brand-name-logo { display: block; height: auto; width: auto; margin-bottom: var(--space-xs); }
.brand-name-logo.logo-blocks { height: 24px; max-width: 200px; }
.brand-name-logo.logo-upmake { height: 22px; max-width: 170px; object-fit: contain; object-position: left center; }
.brand-name-logo.logo-reii { height: 26px; max-width: 170px; }
.brand-meta { font-family: var(--font-mono); font-size: var(--text-xs); line-height: 1.7; color: var(--color-mute); }
.brand-tagline { font-family: var(--font-display); font-weight: 500; font-size: var(--text-lg); line-height: 1.3; letter-spacing: -0.015em; color: var(--color-ink); }
.brand-cta { min-height: 44px; }
.brand-cta .arrow-up-right { width: 13px; height: 13px; }

/* ========== About ========== */
.about-panel { background: var(--color-paper-2); border-radius: var(--radius-xl); padding: clamp(1.5rem, 4vw, 4rem); }
.about-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
@media (min-width: 961px) { .about-story { position: sticky; top: calc(var(--nav-h) + var(--space-lg)); } }
.about-story p { font-size: var(--text-md); line-height: 1.7; color: var(--color-ink-2); margin-bottom: var(--space-sm); }
.numbers-bar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2xs); }
.num-cell { background: var(--color-card); border-radius: var(--radius-md); padding: var(--space-md); }
.num-cell .num { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem); letter-spacing: -0.03em; line-height: 1; margin-bottom: var(--space-2xs); }
.num-cell .label { font-size: var(--text-xs); color: var(--color-mute); line-height: 1.45; }
.offices-block { margin-top: var(--space-xl); }
.offices-block .eyebrow { margin-bottom: var(--space-sm); }
.offices-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--space-lg); }
.offices-list > div { padding: var(--space-xs) 0; border-top: 1px solid var(--color-rule); display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr); gap: var(--space-2xs); align-items: baseline; }
.offices-list strong { font-family: var(--font-mono); font-weight: 400; font-size: var(--text-xs); color: var(--color-brass); }
.offices-list span { font-size: var(--text-sm); color: var(--color-ink-2); }
.partners-block { margin-top: var(--space-xl); }
.partners-block .eyebrow { margin-bottom: var(--space-sm) !important; }
.partners-block .eyebrow:not(:first-child) { margin-top: var(--space-lg) !important; }
.cosmax-card, .charis-card { padding: var(--space-md); display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-md); align-items: center; }
.cosmax-logo { height: 28px; width: auto; max-width: 100%; }
.charis-logo { height: 24px; width: auto; }
.cosmax-title { font-family: var(--font-display); font-weight: 500; font-size: var(--text-lg); letter-spacing: -0.015em; margin-bottom: 4px; }
.cosmax-sub, .charis-sub { font-size: var(--text-sm); color: var(--color-mute); line-height: 1.55; }
.partners-row { display: flex; flex-wrap: wrap; gap: var(--space-2xs); }
.partner { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: var(--radius-pill); background: var(--color-card); border: 1px solid var(--color-rule); font-family: var(--font-display); font-weight: 500; font-size: var(--text-sm); }
.partner small { font-family: var(--font-body); font-weight: 400; font-size: var(--text-xs); color: var(--color-mute); }

/* ========== Contact (CTA card) ========== */
.contact-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: start;
  background: var(--color-card); border: 1px solid var(--color-rule); border-radius: var(--radius-xl);
  padding: clamp(1.5rem, 4vw, 4rem);
}
.contact-grid .eyebrow { margin-bottom: var(--space-md) !important; }
.contact-info { display: flex; flex-direction: column; margin-top: var(--space-xl) !important; }
.contact-info > div { padding: var(--space-sm) 0; border-top: 1px solid var(--color-rule); display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: var(--space-sm); align-items: baseline; }
.contact-info .eyebrow { margin: 0 !important; }
.contact-info .eyebrow::before { display: none; }
.contact-info .value { font-family: var(--font-display); font-weight: 500; font-size: var(--text-lg); letter-spacing: -0.01em; }
.contact-info .value a { background-image: linear-gradient(currentColor, currentColor); background-size: 0% 1px; background-repeat: no-repeat; background-position: 0 100%; transition: background-size var(--dur-base) var(--ease-out), color var(--dur-fast); }
.contact-info .value a:hover { color: var(--color-brass); background-size: 100% 1px; }
.contact-form-wrap { width: 100%; }
.form-row { margin-bottom: var(--space-md); position: relative; }
.form-row label { display: block; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-ink-2); margin-bottom: var(--space-2xs); }
.form-row input, .form-row textarea {
  width: 100%; padding: 12px 14px;
  background: var(--color-card); border: 1px solid var(--color-field); border-radius: var(--radius-sm);
  font: inherit; font-size: var(--text-base); color: var(--color-ink);
  transition: border-color var(--dur-fast), background var(--dur-fast);
}
.form-row input:hover, .form-row textarea:hover { border-color: var(--color-ink-2); }
.form-row input:focus-visible, .form-row textarea:focus-visible { outline: 2px solid var(--color-brass); outline-offset: 1px; border-color: var(--color-brass); }
.form-row [aria-invalid="true"] { border-color: var(--color-error); }
.form-error { margin: 0 0 var(--space-sm); padding: 10px 14px; border-radius: var(--radius-sm); background: var(--color-error-bg); color: var(--color-error); font-size: var(--text-sm); }
.form-error[hidden] { display: none; }
.chip-group { border: 0; padding: 0; margin: 0 0 var(--space-md); min-width: 0; }
.chip-group legend { display: block; padding: 0; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-ink-2); margin-bottom: var(--space-2xs); }
.form-row textarea { min-height: 110px; resize: vertical; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  padding: 7px 14px; border-radius: var(--radius-pill);
  background: var(--color-card); border: 1px solid var(--color-field);
  font-size: var(--text-sm); cursor: pointer; user-select: none;
  transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast), transform var(--dur-fast) var(--ease-out);
}
.chip:hover { border-color: var(--color-ink); }
.chip:active { transform: scale(0.96); }
.chip.active { background: var(--color-ink); color: var(--color-on-dark); border-color: var(--color-ink); }
.btn-submit { margin-top: var(--space-2xs); min-height: 50px; padding: 0 28px; font-size: var(--text-base); }
.contact-success-wrap { display: none; width: 100%; }
body.form-sent #contact-form { display: none; }
body.form-sent .contact-success-wrap { display: block; }
.contact-success { background: var(--color-paper-2); border-radius: var(--radius-lg); padding: var(--space-xl) var(--space-lg); text-align: center; animation: csIn 600ms var(--ease-out) both; }
@keyframes csIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.cs-icon { width: 56px; height: 56px; border-radius: 50%; background: var(--color-brass); color: var(--color-on-dark); display: inline-grid; place-items: center; margin: 0 auto var(--space-md); }
.cs-title { font-size: var(--text-xl); letter-spacing: -0.02em; margin-bottom: var(--space-xs); }
.cs-body { font-size: var(--text-sm); color: var(--color-mute); line-height: 1.6; margin-bottom: var(--space-lg); }

/* ========== Footer (Ft5 dark inset + glyph) ========== */
.footer {
  position: relative; overflow: hidden;
  margin: 0 var(--space-xs) var(--space-xs);
  border-radius: var(--radius-xl);
  background: var(--color-dark); color: var(--color-on-dark);
  padding: var(--space-2xl) 0 var(--space-lg);
  min-height: clamp(420px, 38vw, 560px);
  --glyph: clamp(200px, 25vw, 380px);
}
.footer-glyph {
  position: absolute; bottom: var(--space-lg); right: var(--pad);
  width: var(--glyph); aspect-ratio: 1;
  border-radius: 20%;
  border: calc(var(--glyph) * 0.2) solid var(--color-orange);
  pointer-events: none;
}
.footer .container { position: relative; z-index: 1; }
.footer-top { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.8fr) minmax(0, 1fr); gap: var(--space-xl); padding-bottom: var(--space-xl); max-width: min(980px, calc(100% - var(--glyph) - var(--space-xl))); }
.footer-logo-img { height: 28px; width: auto; }
.footer-cosmax-line { display: flex; align-items: center; gap: var(--space-xs); padding-bottom: var(--space-sm); margin-bottom: var(--space-sm); border-bottom: 1px solid var(--color-rule-dark); font-size: var(--text-sm); font-weight: 500; }
.footer-cosmax-mark { height: 20px; width: auto; }
.footer p, .footer a { font-size: var(--text-sm); color: var(--color-on-dark-mute); line-height: 1.7; }
.footer a { transition: color var(--dur-fast); }
.footer a:hover { color: var(--color-brass-lt); }
.footer h4 { font-family: var(--font-mono); font-weight: 400; font-size: var(--text-xs); color: var(--color-brass-lt); margin-bottom: var(--space-sm); }
.footer ul li { margin-bottom: 6px; }
.footer-bottom { padding-top: var(--space-md); border-top: 1px solid var(--color-rule-dark); font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--color-on-dark-mute); max-width: min(980px, calc(100% - var(--glyph) - var(--space-xl))); }
.footer-h { font-family: var(--font-mono); font-weight: 400; font-size: var(--text-xs); color: var(--color-brass-lt); margin-bottom: var(--space-sm); }

/* ========== Motion: reveal + line reveal ========== */
html.js .reveal { opacity: 0; transform: translateY(28px); transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out); transition-delay: calc(var(--i, 0) * 80ms); }
html.js .reveal.in, html.js .reveal:focus-within { opacity: 1; transform: none; }
html.js .service-row.reveal { transform: translateY(48px) scale(0.97); }
html.js .service-row.reveal.in { transform: none; }
.ln { display: block; overflow: hidden; padding-bottom: 0.12em; margin-bottom: -0.12em; }
.ln-i { display: block; }
html.js [data-lines] .ln-i { transform: translateY(108%); transition: transform var(--dur-reveal) var(--ease-out); transition-delay: calc(var(--i, 0) * 90ms + 80ms); }
html.js [data-lines].is-in .ln-i { transform: none; }
.anim-off, .anim-off *, .anim-off *::before, .anim-off *::after { animation-play-state: paused !important; }
/* ---- Decorative UI illustrations (visual pass) ---- */
.shift-ill { height: 88px; margin: calc(var(--space-xs) * -1) 0 var(--space-xs); }
.shift-ill svg { height: 100%; width: auto; overflow: visible; }
.shift-ill .f0 { fill: var(--color-card); stroke: var(--color-rule-2); }
.shift-ill .f1 { fill: var(--color-ivory); }
.shift-ill .f2 { fill: var(--color-nude); }
.shift-ill .bag { fill: var(--color-brass-lt); }
.shift-ill .bagh { fill: none; stroke: var(--color-brass); stroke-width: 2; }
.shift-ill .dot { fill: var(--color-orange); }
.shift-ill .route { fill: none; stroke: var(--color-brass); stroke-width: 1.6; stroke-dasharray: 4 5; }
.shift-ill .node { fill: var(--color-card); stroke: var(--color-ink-2); stroke-width: 1.4; }
.shift-ill .node--to { fill: var(--color-brass-lt); stroke: var(--color-brass); }
.shift-ill .ring { fill: none; stroke: var(--color-orange); stroke-width: 1.2; opacity: 0.6; }
.shift-ill .edge { fill: none; stroke: var(--color-rule-2); stroke-width: 1.4; }
.shift-ill .spark { fill: var(--color-orange); }
.is-in .shift-ill .route { animation: routeFlow 2.4s linear infinite; }
.is-in .shift-ill .mover { animation: moverPulse 2.4s var(--ease-in-out) infinite; }
@keyframes routeFlow { to { stroke-dashoffset: -18; } }
@keyframes moverPulse { 50% { transform: translateY(-3px); } }
.shift-ill .mover { transform-box: fill-box; transform-origin: center; }

.offer-ill { height: 118px; border-radius: var(--radius-md); background: var(--color-ivory); padding: 10px 12px; margin: var(--space-2xs) 0 var(--space-2xs); }
.offer-ill svg { width: 100%; height: 100%; }
.offer-ill .card { fill: var(--color-card); }
.offer-ill .card.hit { fill: var(--color-card); stroke: var(--color-brass); stroke-width: 1.4; }
.offer-ill .ln { fill: var(--color-paper-2); }
.offer-ill .ln--b { fill: var(--color-brass-lt); }
.offer-ill .dot { fill: var(--color-orange); }
.offer-ill .track { fill: var(--color-card); }
.offer-ill .bar { fill: var(--color-nude); transform-box: fill-box; transform-origin: left; }
.offer-ill .bar--win { fill: var(--color-orange); }
.offer-ill .play { fill: var(--color-ink-2); }
.offer-ill .area { fill: var(--color-nude); opacity: 0.8; }
.offer-ill .spark { fill: none; stroke: var(--color-brass); stroke-width: 2; }
.offer-ill .row { fill: var(--color-card); }
.offer-ill .ok { fill: var(--color-brass); }
.offer-ill .chk { fill: var(--color-brass); }
.offer-ill .chk--todo { fill: var(--color-card); stroke: var(--color-rule-2); }
.offer-ill .tick { fill: none; stroke: var(--color-card); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.offer-ill path.spark[d^="M192"] { fill: var(--color-orange); stroke: none; }
html.js .offer-ill .bar { transform: scaleX(0.15); transition: transform 1200ms var(--ease-out); }
html.js .is-in .offer-ill .bar, html.js .offer-ill.is-in .bar { transform: none; }
html.js .is-in .offer-ill .bar--win { transition-delay: 200ms; }

/* Proof panel: the CEO's TikTok Shop key visual sits on the one dark panel */
.tts-proof { grid-template-areas: "copy media" "stats stats"; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
.tts-proof-copy { grid-area: copy; }
.tts-proof-media { grid-area: media; margin: 0; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 3 / 2; background: var(--color-dark); box-shadow: 0 0 0 1px var(--color-rule-dark); }
.tts-proof-media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); transition: transform 1600ms var(--ease-out); }
.tts-proof.in .tts-proof-media img { transform: none; }
.tts-proof-stats { grid-area: stats; }
@media (max-width: 960px) {
  .tts-proof { grid-template-areas: "media" "copy" "stats"; grid-template-columns: minmax(0, 1fr); }
}

/* ---- Visual pass 2: icon tiles + market mini-maps ---- */
.ico-tile { width: 40px; height: 40px; padding: 8px; flex: none; border-radius: var(--radius-md); background: var(--color-card); fill: none; stroke: var(--color-brass); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: transform 600ms var(--ease-out), background var(--dur-base); }
.metric-card { position: relative; }
.metric-ico { position: absolute; right: var(--space-md); bottom: var(--space-md); }
.metric-ctx { padding-right: 52px; }
.metric-card:hover .metric-ico, .pb-card:hover .pb-ico, .promise-card:hover .promise-ico, .work-card:hover .ico-tile { transform: rotate(-6deg) scale(1.06); background: var(--color-ivory); }
.promise-ico { margin-bottom: var(--space-sm); background: var(--color-paper-2); }
.pb-ico { position: absolute; top: var(--space-md); right: var(--space-md); width: 34px; height: 34px; padding: 7px; background: var(--color-paper-2); }
.work-card .why-top { margin-bottom: var(--space-xl); }
.work-card .work-num { margin-bottom: 0; }
.mk-top { display: flex; justify-content: space-between; align-items: flex-start; }
.nw { white-space: nowrap; }
.mk-map { width: 108px; height: auto; overflow: visible; }
.mk-map g { fill: var(--color-rule-2); transition: fill var(--dur-base) var(--ease-out); }
.mk-map .dim { opacity: 0.55; }
.mk-map .is-hot { fill: var(--color-orange); }
.mk-map .mk-dot { fill: var(--color-orange); stroke: var(--color-paper-2); stroke-width: 3; }
.mk-map .mk-ping { fill: none; stroke: var(--color-orange); stroke-width: 2.5; transform-box: fill-box; transform-origin: center; animation: mkPing 2.4s var(--ease-out) infinite; }
@keyframes mkPing { 0% { transform: scale(0.5); opacity: 0.9; } 100% { transform: scale(2.2); opacity: 0; } }


/* Lenis smooth scroll */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

/* ========== Lang visibility (EN site, KR helpers hidden) ========== */
[data-lang="en"] .lang-kr-only { display: none; }
[data-lang="en"] .label-kr { display: none; }
[data-lang="en"] .kr-text { display: none; }
[data-lang="en"] .kr-block { display: none; }
[data-lang="kr"] .label-en { display: none; }

/* ========== Responsive ========== */
@media (max-width: 1100px) {
  .nav { grid-template-columns: 1fr auto; }
  .nav-menu { display: none; }
  .nav-mobile-toggle { display: flex; }
}
@media (max-width: 1280px) {
  .cosmax-card, .charis-card { grid-template-columns: minmax(0, 1fr); gap: var(--space-sm); }
}
@media (max-width: 1180px) {
  .nav-menu a { padding: 7px 10px; }
  .tts-offers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .playbook-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .channels-strip { min-height: 0; }
  .channels-list { margin-top: var(--space-xl); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-xs); width: 100%; }
  .channels-list > div { position: static; width: auto; animation: none; box-shadow: none; }
}
@media (max-width: 960px) {
  .playbook-diagram-wrap { overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; padding: var(--space-md) var(--space-sm);
    -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent); mask-image: linear-gradient(90deg, #000 82%, transparent); }
  .playbook-svg { min-width: 900px; }
  .playbook-svg .tick-label, .playbook-svg .node-label { font-size: 15px; }
  .playbook-svg .node-kpi, .playbook-svg .scale-peak-label { font-size: 13px !important; }
  .playbook-svg .track-label { font-size: 14px !important; }
  .footer { --glyph: 96px; }
  .footer-glyph { top: var(--space-lg); right: var(--space-lg); bottom: auto; }
  .footer-top, .footer-bottom { max-width: none; }
  :root { --nav-h: 64px; }
  .nav { grid-template-columns: 1fr auto; }
  .nav-menu { display: none; }
  .nav-mobile-toggle { display: flex; }
  .hero-sub { display: none; }
  .hero-grid, .tts-intro, .tts-offers-head, .tts-faq, .tts-proof, .playbook-intro, .services-intro, .service-top, .work-logos-head, .about-grid, .contact-grid, .footer-top { grid-template-columns: minmax(0, 1fr); }
  .hero-visual { padding: var(--space-lg) var(--space-sm) var(--space-lg) var(--space-lg); }
  .hero-showcase { aspect-ratio: 4 / 3; }
  .hero-headline { max-width: none; }
  .hero-stat-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .why-grid, .tts-shifts, .markets-grid, .metrics-grid, .promises { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .service-items { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .playbook-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pb-card { min-height: 0; }
  .brand-row { grid-template-columns: minmax(0, 1fr); gap: var(--space-md); }
  .brand-visual { width: 100%; height: auto; aspect-ratio: 4 / 3; }
  .work-tagline-right { text-align: left; }
  .tts-media { order: -1; }
  .channels-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 540px) {
  .nav { grid-template-columns: minmax(0, 1fr) auto; }
  .nav-logo { height: 18px; min-width: 0; }
  .nav-logo-img { max-width: 100%; object-fit: contain; object-position: left center; }
  .cosmax-card, .charis-card { grid-template-columns: minmax(0, 1fr); gap: var(--space-sm); }
  .sea-map-wrap { overflow-x: auto; overscroll-behavior-x: contain; padding: var(--space-md) var(--space-sm); }
  .sea-map { min-width: 500px; max-height: none; }
  .sea-map text { font-size: 15px; }
  .hero-float--a { display: none; }
  .hero-float--b { width: 150px; --s: 0.9; bottom: -84px; right: 10px; }
  .hero-showcase-caption { right: var(--space-md); }
  .hero-visual { margin-bottom: 92px; }
  .hf-num { font-size: var(--text-lg); }
  .why-grid, .tts-shifts, .tts-offers, .markets-grid, .metrics-grid, .promises, .playbook-cards, .service-items, .ccp-stats, .tiktok-stat-strip, .tts-proof-stats, .numbers-bar, .offices-list, .channels-list { grid-template-columns: minmax(0, 1fr); }
  .hero-stat-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); }
  .hero-cta { flex-direction: column; align-items: stretch; width: 100%; }
  .hero-float--a { width: 168px; left: -6px; }
  .hero-float--b { width: 160px; right: -10px; }
  .hero-cursor { display: none; }
  .why-card, .tts-shift, .tts-offer, .market-card, .metric-card { min-height: 0; }
  .contact-info > div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .tts-cta-row { flex-direction: column; align-items: stretch; }
  .tts-cta, .playbook-cta { white-space: normal; text-align: center; padding: 12px 20px; }
  .footer { margin: 0 6px 6px; }
  .nav-right .cta-pill { padding: 0 14px; min-height: 40px; }
}

@media (max-width: 374px) {
  .playbook-panel { padding-inline: 1rem; }
  .playbook-cta { white-space: nowrap; font-size: 0.8125rem; padding: 0 14px; }
  .playbook-cta > span:last-child { display: none; }
}

@media (max-width: 400px) { .nav-right .cta-pill { display: none; } }

/* ========== Reduced motion ========== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 150ms !important; transition-delay: 0ms !important; scroll-behavior: auto !important; }
  html.js .reveal, html.js .service-row.reveal { transform: none; }
  html.js [data-lines] .ln-i { transform: none; }
  .hero-float, .channels-list > div, .hero-cursor, .shift-ill .route, .shift-ill .mover, .mk-map .mk-ping { animation: none !important; }
  .mk-map .mk-ping { opacity: 0; }
  html.js .offer-ill .bar { transform: none; }
  .tts-media img, .service-media img { transform: none; }
  html.js.show-loader .site-loader { display: none; }
}