/* ==========================================================================
   Vively — Global Market Activation
   Design system: white canvas, black ink, KREAM-style lime accent.
   ========================================================================== */

@import url("https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/variable/pretendardvariable-dynamic-subset.css");

:root{
  --bg: #f7f8ed;
  --ink: #353535;
  --ink-70: rgba(53,53,53,.72);
  --ink-50: rgba(53,53,53,.54);
  --ink-30: rgba(53,53,53,.34);
  --line: #e3e4d4;
  --line-strong: #d1d3bd;
  --panel: #eef0e0;
  --accent: #ff5757;
  --accent-ink: #ffffff;
  --accent-dim: #ffe1de;
  --accent-text: #b6362f;
  --dark: #262620;
  --dark-line: rgba(255,255,255,.12);
  --radius: 2px;
  --maxw: 1240px;
  --pad: clamp(20px, 4vw, 64px);
  --ease: cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:"Pretendard Variable","Pretendard",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  font-feature-settings:"tnum";
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
button{ font-family:inherit; cursor:pointer; }
::selection{ background:var(--accent); color:var(--accent-ink); }

.wrap{ max-width:var(--maxw); margin:0 auto; padding-left:var(--pad); padding-right:var(--pad); }

.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-70);
}
.eyebrow::before{
  content:""; width:6px; height:6px; border-radius:50%; background:var(--accent);
  box-shadow:0 0 0 3px var(--accent-dim);
}
h1,h2,h3,h4{ margin:0; font-weight:800; letter-spacing:-0.02em; line-height:1.05; }
p{ margin:0; }
.lede{ font-size:clamp(16px,1.7vw,19px); color:var(--ink-70); line-height:1.6; font-weight:500; }
.mono{ font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; }
.hl{ background:linear-gradient(transparent 60%, var(--accent-dim) 60%); padding:0 2px; color:var(--accent-text); }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  height:52px; padding:0 26px; border-radius:999px;
  font-size:14.5px; font-weight:700; letter-spacing:-.01em;
  border:1px solid transparent; white-space:nowrap;
  transition:transform .35s var(--ease), background .3s ease, color .3s ease, border-color .3s ease;
}
.btn-primary{ background:var(--ink); color:#fff; }
.btn-primary:hover{ background:var(--accent); color:#fff; transform:translateY(-2px); }
.btn-accent{ background:var(--accent); color:var(--accent-ink); }
.btn-accent:hover{ background:var(--ink); color:#fff; transform:translateY(-2px); }
.btn-ghost{ background:transparent; color:var(--ink); border-color:var(--line-strong); }
.btn-ghost:hover{ border-color:var(--ink); transform:translateY(-2px); }
.btn-sm{ height:42px; padding:0 20px; font-size:13px; }
.btn svg{ width:15px; height:15px; }

.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  background:rgba(255,255,255,.86); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.nav .wrap{ display:flex; align-items:center; justify-content:space-between; height:76px; }
.brand{ display:flex; align-items:center; gap:8px; font-weight:800; font-size:21px; letter-spacing:-.03em; }
.brand .dot{ display:none; }
.brand-mark{ height:22px; width:auto; display:block; }
.nav-links{ display:flex; align-items:center; gap:36px; }
.nav-links a{ font-size:14.5px; font-weight:600; color:var(--ink-70); transition:color .2s; position:relative; }
.nav-links a:hover{ color:var(--ink); }
.nav-links a.active{ color:var(--ink); }
.nav-links a.active::after{
  content:""; position:absolute; left:0; right:0; bottom:-22px; height:2px; background:var(--accent);
}
.nav-right{ display:flex; align-items:center; gap:14px; }
.nav-burger{ display:none; flex-direction:column; gap:5px; width:26px; background:none; border:0; padding:6px; }
.nav-burger span{ height:2px; background:var(--ink); border-radius:2px; }

.mobile-menu{
  position:fixed; inset:76px 0 0 0; background:#fff; z-index:99;
  padding:28px var(--pad); display:none; flex-direction:column; gap:2px;
  border-top:1px solid var(--line);
}
.mobile-menu.open{ display:flex; }
.mobile-menu a{ padding:16px 0; font-size:22px; font-weight:700; border-bottom:1px solid var(--line); }
.mobile-menu .btn{ margin-top:20px; width:100%; }

@media (max-width:880px){
  .nav-links{ display:none; }
  .nav-right .btn{ display:none; }
  .nav-burger{ display:flex; }
}

section{ position:relative; }
.section{ padding:104px 0; border-bottom:1px solid var(--line); }
.section-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:40px; margin-bottom:56px; flex-wrap:wrap; }
.section-title{ font-size:clamp(28px,3.6vw,44px); max-width:640px; }
.section-num{ font-size:13px; font-weight:700; letter-spacing:.1em; color:var(--ink-30); }
.kicker{ font-size:13px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-50); margin-bottom:14px; display:block; }

/* Content is visible by default. The fade-up animation only kicks in once
   JS confirms it's ready to run (html.js-reveal), so a JS failure never
   leaves the page blank -- it just shows the static, unanimated content. */
.reveal{ opacity:1; transform:none; }
html.js-reveal .reveal{ opacity:0; transform:translateY(28px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
html.js-reveal .reveal.in{ opacity:1; transform:none; }

.hero{ padding:170px 0 80px; }
.hero-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center; }
.hero h1{ font-size:clamp(26px,3.4vw,44px); line-height:1.22; margin-top:16px; max-width:640px; }
.hero-sub{ margin-top:24px; max-width:520px; }
.hero-ctas{ display:flex; gap:14px; margin-top:36px; flex-wrap:wrap; }

.usp-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); margin-top:56px; border:1px solid var(--line); }
.usp-item{ background:#fff; padding:22px 20px; }
.usp-item .n{ font-size:12px; font-weight:700; color:var(--ink-30); letter-spacing:.08em; }
.usp-item p{ font-size:14.5px; font-weight:700; margin-top:10px; line-height:1.35; }

.hero-visual{ position:relative; }
.hero-collage{
  display:grid; grid-template-columns:repeat(3,1fr); gap:10px;
  transform:rotate(1.2deg);
}
.hero-collage .cell{
  aspect-ratio:9/13; border-radius:14px; overflow:hidden; background:var(--panel);
  border:1px solid var(--line);
}
.hero-collage .cell img{ width:100%; height:100%; object-fit:cover; }
.hero-collage .cell:nth-child(2){ transform:translateY(-18px); }
.hero-collage .cell:nth-child(5){ transform:translateY(-18px); }

.float-badge{
  position:absolute; display:flex; align-items:center; gap:10px;
  background:#fff; border:1px solid var(--line-strong); border-radius:999px;
  padding:10px 16px 10px 10px; box-shadow:0 14px 30px rgba(0,0,0,.08);
  font-size:12.5px; font-weight:700; animation:float 5s ease-in-out infinite;
}
.float-badge .ic{ width:26px; height:26px; border-radius:50%; background:var(--accent); display:flex; align-items:center; justify-content:center; font-size:13px; flex:none; }
.float-badge span.sub{ display:block; font-weight:500; color:var(--ink-50); font-size:11px; }
.fb-1{ top:-4%; right:-6%; animation-delay:.2s; }
.fb-2{ bottom:6%; left:-8%; animation-delay:1.4s; }
.fb-3{ bottom:-6%; right:8%; animation-delay:.8s; }
@keyframes float{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-10px);} }
@media (max-width:880px){ .float-badge{ display:none; } }

.stats-strip{ display:flex; flex-wrap:wrap; gap:0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.stat{ flex:1 1 200px; padding:26px var(--pad); border-right:1px solid var(--line); }
.stat:last-child{ border-right:none; }
.stat b{ display:block; font-size:clamp(22px,2.6vw,32px); font-weight:800; }
.stat span{ font-size:13px; color:var(--ink-50); font-weight:600; }

.marquee-section{ padding:64px 0; border-bottom:1px solid var(--line); }
.marquee-label{ text-align:center; font-size:13px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-50); margin-bottom:36px; }
.marquee{ overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.marquee-track{ display:flex; align-items:center; gap:64px; width:max-content; animation:scrollX 34s linear infinite; }
.marquee-track.reverse{ animation-direction:reverse; animation-duration:40s; }
.marquee-track img{ height:30px; width:auto; object-fit:contain; opacity:.7; filter:grayscale(1); transition:opacity .25s, filter .25s; }
.marquee-track img:hover{ opacity:1; filter:grayscale(0); }
@keyframes scrollX{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }
.marquee + .marquee{ margin-top:26px; }

.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line); }
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.pcell{ background:#fff; padding:36px 32px; position:relative; }
.pcell-media{ aspect-ratio:3/4; border-radius:12px; overflow:hidden; margin:-4px -4px 22px; background:var(--panel); }
.pcell-media video{ width:100%; height:100%; object-fit:cover; display:block; }
.pcell .tag{ display:inline-block; font-size:11.5px; font-weight:700; letter-spacing:.06em; background:var(--accent-dim); color:var(--accent-text); padding:5px 10px; border-radius:999px; margin-bottom:18px; }
.pcell h3{ font-size:21px; margin-bottom:12px; }
.pcell p{ color:var(--ink-70); font-size:14.5px; line-height:1.6; }
.pcell .step-no{ font-size:34px; font-weight:800; color:var(--ink); opacity:.12; position:absolute; top:20px; right:26px; }
@media (max-width:980px){ .grid-3,.grid-4{ grid-template-columns:1fr 1fr; } }
@media (max-width:620px){ .grid-2,.grid-3,.grid-4{ grid-template-columns:1fr; } }

.video-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.video-card{
  position:relative; aspect-ratio:9/14; border-radius:16px; overflow:hidden;
  background:var(--panel); border:1px solid var(--line); cursor:pointer;
}
.video-card img{ width:100%; height:100%; object-fit:cover; opacity:.9; transition:transform .5s var(--ease); }
.video-card:hover img{ transform:scale(1.05); }
.video-card::after{ content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.06) 46%, rgba(0,0,0,.15) 100%); }
.video-card .play{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:56px; height:56px; border-radius:50%; background:rgba(255,255,255,.92);
  display:flex; align-items:center; justify-content:center; z-index:2;
  transition:background .25s, transform .3s var(--ease);
}
.video-card:hover .play{ background:var(--accent); transform:translate(-50%,-50%) scale(1.08); }
.video-card .play svg{ width:18px; height:18px; margin-left:2px; }
.video-card .meta{ position:absolute; left:14px; right:14px; bottom:14px; z-index:2; color:#fff; }
.video-card .meta .cat{ font-size:10.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); }
.video-card .meta .cap{ font-size:13.5px; font-weight:700; margin-top:4px; line-height:1.3; }
.video-card .badge-add{
  position:absolute; top:12px; right:12px; z-index:2; background:rgba(255,255,255,.94); color:var(--ink);
  font-size:10px; font-weight:800; letter-spacing:.04em; text-transform:uppercase;
  padding:5px 9px; border-radius:999px;
}
@media (max-width:980px){ .video-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .video-grid{ grid-template-columns:1fr 1fr; gap:10px; } }

.flow{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.flow-item{ padding-top:20px; border-top:2px solid var(--ink); }
.flow-item .num{ font-size:13px; font-weight:800; color:var(--ink-30); }
.flow-item h4{ font-size:18px; margin:12px 0 8px; }
.flow-item p{ font-size:13.5px; color:var(--ink-70); line-height:1.55; }
@media (max-width:820px){ .flow{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .flow{ grid-template-columns:1fr; } }

.market-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.market-card{ background:#fff; padding:0 0 26px; }
.market-card .photo{ aspect-ratio:4/3; overflow:hidden; }
.market-card .photo img{ width:100%; height:100%; object-fit:cover; }
.market-card .body{ padding:22px 22px 0; }
.market-card .flag-tag{ font-size:12px; font-weight:700; color:var(--ink-50); margin-bottom:8px; }
.market-card h4{ font-size:16.5px; margin-bottom:14px; line-height:1.35; min-height:44px; }
.market-card .figs{ display:flex; justify-content:space-between; font-size:13px; padding:8px 0; border-top:1px solid var(--line); }
.market-card .figs b{ font-weight:800; }
@media (max-width:980px){ .market-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .market-grid{ grid-template-columns:1fr; } }

.tiers{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.tier{ background:#fff; padding:32px; }
.tier .badge{ display:inline-block; font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; padding:5px 10px; border-radius:999px; background:var(--ink); color:#fff; margin-bottom:18px; }
.tier h4{ font-size:22px; }
.tier .follow{ font-size:13px; color:var(--ink-50); margin:6px 0 18px; font-weight:600; }
.tier p{ font-size:14px; color:var(--ink-70); line-height:1.6; }
.tier .cost{ margin-top:18px; padding-top:16px; border-top:1px solid var(--line); font-size:12.5px; font-weight:700; color:var(--ink-70); }
@media (max-width:820px){ .tiers{ grid-template-columns:1fr; } }

.cta-band{ background:var(--ink); color:#fff; padding:96px 0; text-align:center; }
.cta-band h2{ font-size:clamp(30px,4vw,52px); color:#fff; }
.cta-band .lede{ color:rgba(255,255,255,.65); max-width:560px; margin:20px auto 0; }
.cta-band .hero-ctas{ justify-content:center; margin-top:36px; }
.cta-band .btn-ghost{ border-color:rgba(255,255,255,.3); color:#fff; }
.cta-band .btn-ghost:hover{ border-color:#fff; }

.site-footer{ padding:72px 0 32px; }
.footer-top{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; padding-bottom:56px; border-bottom:1px solid var(--line); }
.footer-brand .brand{ margin-bottom:14px; }
.footer-brand p{ color:var(--ink-70); font-size:14px; max-width:280px; line-height:1.6; }
.footer-col h5{ font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-50); margin-bottom:16px; }
.footer-col a, .footer-col p{ display:block; font-size:14px; color:var(--ink-70); margin-bottom:10px; }
.footer-col a:hover{ color:var(--ink); }
.placeholder-tag{ font-size:11px; color:var(--ink-30); font-style:italic; }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; padding-top:28px; flex-wrap:wrap; gap:12px; }
.footer-bottom p{ font-size:12.5px; color:var(--ink-50); }
.footer-tagline{ font-size:12.5px; color:var(--ink-30); }
@media (max-width:880px){ .footer-top{ grid-template-columns:1fr 1fr; row-gap:36px; } }
@media (max-width:520px){ .footer-top{ grid-template-columns:1fr; } }

.photo-ph{
  aspect-ratio:4/3; border-radius:14px; background:repeating-linear-gradient(135deg, #fafafa, #fafafa 10px, #f2f2f0 10px, #f2f2f0 20px);
  border:1px dashed var(--line-strong); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; color:var(--ink-30);
  text-align:center; padding:20px;
}
.photo-ph svg{ width:30px; height:30px; opacity:.6; }
.photo-ph span{ font-size:12px; font-weight:700; letter-spacing:.03em; color:var(--ink-50); }
.photo-ph small{ font-size:11px; color:var(--ink-30); }

.page-hero{ padding:168px 0 72px; }
.page-hero h1{ font-size:clamp(34px,5vw,60px); margin-top:16px; max-width:820px; }
.two-col{ display:grid; grid-template-columns:.9fr 1.1fr; gap:60px; align-items:start; }
@media (max-width:880px){ .two-col{ grid-template-columns:1fr; } }

.gallery-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
@media (max-width:820px){ .gallery-4{ grid-template-columns:1fr 1fr; } }

.value-list{ display:flex; flex-direction:column; }
.value-row{ display:grid; grid-template-columns:60px 1fr; gap:24px; padding:28px 0; border-top:1px solid var(--line); }
.value-row:last-child{ border-bottom:1px solid var(--line); }
.value-row .vn{ font-size:14px; font-weight:800; color:var(--ink-30); }
.value-row h4{ font-size:19px; margin-bottom:8px; }
.value-row p{ font-size:14.5px; color:var(--ink-70); line-height:1.6; max-width:640px; }

.quote-block{ font-size:clamp(20px,2.6vw,30px); font-weight:700; line-height:1.4; max-width:880px; letter-spacing:-.01em; }
.quote-block .src{ display:block; margin-top:26px; font-size:14px; font-weight:600; color:var(--ink-50); }

.source-line{ font-size:12px; color:var(--ink-30); margin-top:8px; }

.kr{ display:block; color:var(--ink-50); font-weight:500; }
h1 .kr, h2 .kr, .section-title .kr{ font-size:.42em; font-weight:600; letter-spacing:-.01em; margin-top:10px; color:var(--ink-50); }
.kicker .kr{ display:inline; font-size:1em; font-weight:600; text-transform:none; letter-spacing:0; color:var(--ink-30); }
.kicker .kr::before{ content:" · "; }
p.kr, .lede .kr{ font-size:.86em; margin-top:6px; color:var(--ink-50); font-weight:500; }
.usp-item .kr{ font-size:.82em; font-weight:600; margin-top:4px; color:var(--ink-30); }
.pcell .kr, .value-row .kr, .tier .kr, .flow-item .kr, .market-card .kr{ font-size:.9em; margin-top:8px; color:var(--ink-50); font-weight:500; }
.cta-band .kr{ color:rgba(255,255,255,.55); }
.eyebrow .kr{ text-transform:none; letter-spacing:0; font-weight:600; color:var(--ink-50); }
.eyebrow .kr::before{ content:"— "; }

.team-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:20px;
  max-width:880px; margin-left:auto; margin-right:auto;
}
.team-card{ border:1px solid var(--line); border-radius:16px; padding:20px; }
/* Founder portraits — square frames. The three source photos are framed
   very differently (one full-body, two half-body headshots), so a 1:1
   window plus a per-person vertical anchor lands every face in roughly
   the same place instead of leaving one tiny and two cropped. */
.team-card .avatar{ width:100%; aspect-ratio:1/1; border-radius:12px; margin-bottom:18px; }
.avatar-slot{ position:relative; margin-bottom:18px; }
.avatar-img{
  width:100%; aspect-ratio:1/1; object-fit:cover; object-position:50% 18%;
  border-radius:12px; display:block; background:var(--panel);
}
.avatar-img[src*="velycia" i]{ object-position:50% 8%; }
.avatar-img[src*="jane" i]{ object-position:50% 16%; }
.avatar-img[src*="namgyal" i]{ object-position:50% 13%; }
.avatar-slot .photo-ph{ margin-bottom:0; aspect-ratio:1/1 !important; }
.team-card h4{ font-size:17px; }
.team-card .role{ font-size:13px; color:var(--ink-50); font-weight:700; margin-top:4px; }
.team-card p.bio{ font-size:13px; color:var(--ink-70); margin-top:12px; line-height:1.5; }
@media (max-width:820px){ .team-grid{ grid-template-columns:1fr; max-width:420px; } }

.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:start; }
.contact-card{ border:1px solid var(--line); border-radius:20px; padding:40px; }
.field{ margin-bottom:20px; }
.field label{ display:block; font-size:12.5px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-50); margin-bottom:8px; }
.field input, .field textarea, .field select{
  width:100%; border:1px solid var(--line-strong); border-radius:10px; padding:14px 16px;
  font-family:inherit; font-size:14.5px; color:var(--ink); background:#fff; transition:border-color .2s;
}
.field input:focus, .field textarea:focus, .field select:focus{ outline:none; border-color:var(--ink); }
.field textarea{ resize:vertical; min-height:120px; }
.row-2{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.form-note{ font-size:12.5px; color:var(--ink-30); margin-top:14px; }
.contact-info-item{ display:flex; gap:16px; padding:22px 0; border-top:1px solid var(--line); }
.contact-info-item:first-child{ border-top:none; }
.contact-info-item .ic{ width:40px; height:40px; border-radius:10px; background:var(--panel); display:flex; align-items:center; justify-content:center; flex:none; }
.contact-info-item .ic svg{ width:18px; height:18px; }
.contact-info-item h5{ font-size:14px; font-weight:800; margin-bottom:4px; }
.contact-info-item p, .contact-info-item a{ font-size:14px; color:var(--ink-70); }
.map-ph{ aspect-ratio:16/9; margin-top:8px; }
.social-row{ display:flex; gap:10px; margin-top:24px; }
.social-row a{ width:42px; height:42px; border-radius:50%; border:1px solid var(--line-strong); display:flex; align-items:center; justify-content:center; transition:.2s; }
.social-row a:hover{ background:var(--ink); color:#fff; border-color:var(--ink); }
.social-row svg{ width:16px; height:16px; }
@media (max-width:880px){ .contact-grid{ grid-template-columns:1fr; } .row-2{ grid-template-columns:1fr; } }

.form-success{ display:none; padding:16px 18px; border-radius:10px; background:var(--accent-dim); color:var(--accent-text); font-size:13.5px; font-weight:700; margin-top:16px; }
.form-success.show{ display:block; }

/* brand mark image sizing (real logo file) */
.brand{ gap:0; }
.brand-mark{ height:20px; width:auto; display:block; }

/* ==========================================================================
   Redesign additions — Trusted-by grid, video hover stats, dark service
   list, scroll-line process timeline, full-bleed about hero, office triptych
   ========================================================================== */

.trusted-section{ padding:88px 0; border-bottom:1px solid var(--line); }
.trusted-grid{ display:grid; grid-template-columns:.85fr 1.15fr; gap:56px; align-items:center; }
.trusted-copy h2{ font-size:clamp(30px,3.6vw,46px); line-height:1.08; }
.trusted-copy p{ margin-top:18px; max-width:380px; }
.trusted-logos{ display:grid; grid-template-columns:repeat(4,1fr); gap:30px 24px; align-items:center; }
.trusted-logos img{ max-height:32px; width:auto; max-width:100%; object-fit:contain; opacity:.82; filter:grayscale(1); margin:0 auto; transition:opacity .2s, filter .2s; }
.trusted-logos img:hover{ opacity:1; filter:grayscale(0); }
@media (max-width:880px){ .trusted-grid{ grid-template-columns:1fr; } .trusted-logos{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:520px){ .trusted-logos{ grid-template-columns:repeat(2,1fr); } }

/* video cards: real <video> proof clips + hover stat overlay */
.video-card video{ width:100%; height:100%; object-fit:cover; display:block; }
.video-card .stat-panel{
  position:absolute; inset:0; z-index:3; padding:16px;
  display:flex; flex-direction:column; justify-content:flex-end;
  opacity:0; transform:translateY(6px);
  transition:opacity .3s var(--ease), transform .3s var(--ease);
  pointer-events:none;
}
.video-card:hover .stat-panel{ opacity:1; transform:translateY(0); }
.video-card .stat-panel .cap{ font-size:13.5px; font-weight:800; color:#fff; margin-bottom:8px; }
.video-card .stat-line{
  display:flex; justify-content:space-between; align-items:baseline;
  font-size:11px; color:rgba(255,255,255,.7); padding:6px 0; border-top:1px solid rgba(255,255,255,.22);
}
.video-card .stat-line b{ color:#fff; font-size:13.5px; font-weight:800; }
.video-card:hover .meta{ opacity:1; }
.video-card .meta{ transition:opacity .25s; }

/* dark 5-item service list */
.service-dark{ background:var(--dark); color:#fff; }
.service-dark .kicker{ color:rgba(255,255,255,.5); }
.service-dark .section-title{ color:#fff; }
.service-dark .lede{ color:rgba(255,255,255,.6); }
.service-list{ margin-top:48px; border-top:1px solid var(--dark-line); }
.service-row{ border-bottom:1px solid var(--dark-line); padding:26px 4px; cursor:pointer; }
.service-row-head{ display:flex; align-items:center; gap:18px; }
.service-row .ic{ width:30px; height:30px; flex:none; color:var(--accent); }
.service-row .ic svg{ width:100%; height:100%; }
.service-row h3{ flex:1; font-size:18.5px; font-weight:700; color:#fff; margin:0; }
.service-row .plus{ font-size:24px; font-weight:300; line-height:1; color:rgba(255,255,255,.45); transition:transform .3s var(--ease), color .3s; flex:none; }
.service-row.open .plus{ transform:rotate(45deg); color:var(--accent); }
.service-row-body{ max-height:0; overflow:hidden; transition:max-height .4s var(--ease); }
.service-row.open .service-row-body{ max-height:260px; }
.service-row-body-inner{ padding:14px 0 4px 48px; }
.service-row-body p{ font-size:14.5px; color:rgba(255,255,255,.62); line-height:1.65; max-width:640px; }
@media (max-width:620px){ .service-row-body-inner{ padding-left:0; } }

/* process timeline — true two-column zig-zag with a reserved, empty
   centre lane. Odd steps sit in the right column, even steps in the
   left column, and both columns hug the lane so the connecting SVG
   line (drawn in JS from the real .step-num badge positions) only
   ever travels through that empty gap and can never cross step copy. */
.process-timeline{
  position:relative; margin:88px auto 0; max-width:980px;
  display:grid; grid-template-columns:1fr 1fr; column-gap:220px; row-gap:124px;
}
.process-step{ position:relative; z-index:1; max-width:360px; }
.process-step[data-side="right"]{ grid-column:2; }
.process-step[data-side="left"]{ grid-column:1; margin-left:auto; text-align:right; }
.process-step[data-side="left"] .step-badge{ justify-content:flex-end; }
.process-step .step-badge{ display:flex; align-items:center; gap:10px; margin-bottom:16px; }
.process-step .step-icon{ width:22px; height:22px; flex:none; color:var(--ink); }
.process-step .step-icon svg{ width:100%; height:100%; display:block; }
.process-step .step-num{
  width:34px; height:34px; border-radius:50%; flex:none;
  background:var(--bg); border:2px solid var(--line-strong); display:flex; align-items:center; justify-content:center;
  font-size:12.5px; font-weight:800; color:var(--ink-50); transition:border-color .3s, color .3s, background .3s;
}
.process-step.active .step-num{ border-color:var(--accent); color:#fff; background:var(--accent); }
.process-step h4{ font-size:20px; margin-bottom:8px; }
.process-step p{ font-size:14px; color:var(--ink-70); line-height:1.6; }
@media (max-width:760px){
  .process-timeline{
    display:flex; flex-direction:column; max-width:480px; margin-top:52px; gap:52px;
  }
  .process-step{ max-width:none; margin-left:0 !important; display:flex; gap:16px; align-items:flex-start; }
  .process-step .step-badge{ flex-direction:column; gap:6px; margin-bottom:0; flex:none; width:34px; }
  .process-step p{ max-width:none; }
}

/* about page: full-bleed statement hero */
.about-hero-full{
  min-height:calc(100vh - 76px); display:flex; align-items:center; justify-content:center; text-align:center;
  padding:120px var(--pad) 60px;
}
.about-hero-full .inner{ max-width:960px; margin:0 auto; }
.about-hero-full .eyebrow{ justify-content:center; margin-bottom:26px; }
.about-hero-full h1{ font-size:clamp(30px,5.2vw,60px); line-height:1.2; }
.about-scroll-cue{
  margin-top:48px; font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-30);
  display:flex; flex-direction:column; align-items:center; gap:8px;
}
.about-scroll-cue svg{ width:15px; height:15px; animation:bob 1.8s ease-in-out infinite; }
@keyframes bob{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(6px);} }

/* office triptych */
/* Office triptych — sources are tall phone photos (≈5:8). A 4:3 window
   keeps the meeting table and the window wall without the elongated
   crop; the 45% vertical anchor centres on the people, not the ceiling. */
.gallery-3{
  display:grid; grid-template-columns:repeat(3,1fr); gap:16px;
  max-width:880px; margin-left:auto; margin-right:auto;
}
.gallery-3 img{
  width:100%; aspect-ratio:4/3; object-fit:cover; object-position:50% 45%;
  border-radius:14px; border:1px solid var(--line);
}
@media (max-width:720px){ .gallery-3{ grid-template-columns:1fr; max-width:420px; } }

.section-tight{ padding:56px 0; }

/* Curved, scroll-drawn process line (replaces the straight track/fill bar).
   The <path> "d" and dash values are computed in JS from the actual
   .dot positions, so this only needs to define appearance + stacking. */
.process-svg{
  position:absolute; inset:0; width:100%; height:100%;
  overflow:visible; z-index:0; pointer-events:none;
}
.process-svg path{ fill:none; stroke:var(--accent); stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }

/* ============================================================
   Review pass — credibility, accessibility, rhythm, performance
   ============================================================ */

/* #13 hero hook — the "0원" line is the strongest commercial claim */
.hero-hook{
  margin-top:18px; font-size:14.5px; color:var(--ink-70);
  display:inline-flex; align-items:center; gap:7px; flex-wrap:wrap;
  background:var(--accent-dim); color:var(--accent-text);
  padding:9px 15px; border-radius:999px; line-height:1.4;
}
.hero-hook b{ font-weight:800; }

/* #17 vertical rhythm — give the proof section more air than the rest
   so the page doesn't scroll at a single monotone tempo */
.section-lg{ padding-top:110px; padding-bottom:110px; }
@media (max-width:760px){ .section-lg{ padding-top:64px; padding-bottom:64px; } }

/* #3 + #15 + #16 case study blocks (replaces the flat 8-up video grid) */
.case{ margin-top:64px; padding-top:44px; border-top:1px solid var(--line); }
.case:first-of-type{ border-top:none; padding-top:0; margin-top:44px; }
.case-head{
  display:grid; grid-template-columns:1fr auto; gap:28px 48px;
  align-items:end; margin-bottom:22px;
}
.case-tag{
  display:inline-flex; align-items:center; gap:7px;
  font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  color:var(--accent-text); margin-bottom:12px;
}
.live-dot{
  width:7px; height:7px; border-radius:50%; background:var(--accent); flex:none;
  box-shadow:0 0 0 0 rgba(255,87,87,.6); animation:livePulse 2s infinite;
}
@keyframes livePulse{
  70%{ box-shadow:0 0 0 7px rgba(255,87,87,0); }
  100%{ box-shadow:0 0 0 0 rgba(255,87,87,0); }
}
.case-head h3{ font-size:clamp(21px,2.4vw,28px); line-height:1.28; margin-bottom:8px; }
.case-sub{ font-size:13.5px; color:var(--ink-50); line-height:1.6; max-width:520px; }
.case-stats{ display:flex; gap:34px; margin:0; }
.case-stats div{ text-align:right; }
.case-stats dt{
  font-size:10.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--ink-50); margin-bottom:5px;
}
.case-stats dd{ margin:0; font-size:clamp(19px,2.2vw,26px); font-weight:800; letter-spacing:-.02em; }
.case-stats .hero-stat dd{ color:var(--accent-text); }
.case-result{
  font-size:15px; line-height:1.65; color:var(--ink-70); max-width:760px;
  padding:16px 20px; background:var(--panel); border-radius:12px;
  border-left:3px solid var(--accent); margin-bottom:24px;
}
.case-result b{ color:var(--ink); font-weight:800; }
.case-source{ font-size:12px; color:var(--ink-30); line-height:1.6; margin-top:14px; }
.case-note{
  margin-top:56px; padding:24px 26px; border:1px solid var(--line);
  border-radius:14px; background:var(--panel);
}
.case-note p{ font-size:14.5px; line-height:1.7; color:var(--ink-70); }
.case-note b{ color:var(--ink); font-weight:800; }
.case-note .case-source{ margin-top:8px; }

/* clip rail — 4-up on desktop, swipeable snap carousel on mobile (#18) */
.clip-rail{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
@media (max-width:900px){ .clip-rail{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:620px){
  .clip-rail{
    display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch; scrollbar-width:none;
    margin:0 calc(var(--pad) * -1); padding:0 var(--pad) 4px;
  }
  .clip-rail::-webkit-scrollbar{ display:none; }
  .clip-rail .video-card{ flex:0 0 66%; scroll-snap-align:start; }
}
@media (max-width:900px){
  .case-head{ grid-template-columns:1fr; align-items:start; }
  .case-stats{ gap:26px; }
  .case-stats div{ text-align:left; }
}

/* #12 visible focus for every interactive element */
a:focus-visible, button:focus-visible, .video-card:focus-visible,
.service-row-head:focus-visible, [tabindex]:focus-visible{
  outline:2px solid var(--accent-text); outline-offset:3px; border-radius:6px;
}
.field input:focus-visible, .field textarea:focus-visible, .field select:focus-visible{
  outline:2px solid var(--accent-text); outline-offset:2px;
}

/* #14 the active step badge needs AA contrast — coral fill fails at 3:1
   against white, so use the darker accent tone for the filled state */
.process-step.active .step-num{ background:var(--accent-text); border-color:var(--accent-text); }

/* #20 optically normalise partner logos — heavy wordmarks were dominating
   and light ones disappearing at a single uniform box size */
.trusted-logos img{ transition:opacity .25s; }
.trusted-logos img[alt="TONYMOLY"],
.trusted-logos img[alt="LABIOTTE"]{ transform:scale(.86); }
.trusted-logos img[alt="D.A"],
.trusted-logos img[alt="Kowork"],
.trusted-logos img[alt="LA BAB"]{ transform:scale(1.12); }
.trusted-logos img[alt="Berry New Pharmacy"],
.trusted-logos img[alt="Jaimdang Korean Medicine Clinic"],
.trusted-logos img[alt="Park Jun Beauty Lab"]{ transform:scale(1.06); }

/* #4 Tally embed */
.tally-embed iframe{ width:100%; border:0; display:block; }
.tally-fallback p{ font-size:14.5px; line-height:1.7; color:var(--ink-70); margin-bottom:20px; }

/* footer legal row (#1) */
.footer-legal{
  display:flex; flex-wrap:wrap; gap:8px 22px; padding:22px 0 0;
  font-size:12px; color:var(--ink-30); border-top:1px solid var(--line);
  margin-top:32px;
}
.footer-legal a{ color:inherit; }

/* #10 honour reduced-motion across the whole site, not just the SVG path */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
  .marquee-track, .about-scroll-cue svg, .live-dot{ animation:none !important; }
  html.js-reveal .reveal{ opacity:1 !important; transform:none !important; }
}