/* ==========================================================================
   Vively — round 2 additions + overrides.
   Loaded AFTER style.v13.css, so equal-specificity rules here win.
   Kept in its own (new) file so a cached main stylesheet can't mask it.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Black header bar with the white wordmark
   -------------------------------------------------------------------------- */
.nav{
  background:#0d0d0c;
  border-bottom:1px solid rgba(255,255,255,.10);
  backdrop-filter:none;
}
.nav .brand-mark{ height:24px; }
.nav-links a{ color:rgba(255,255,255,.66); }
.nav-links a:hover, .nav-links a.active{ color:#fff; }
.nav-links a.active::after{ background:var(--accent); }
.nav .btn-primary{ background:#fff; color:#0d0d0c; }
.nav .btn-primary:hover{ background:var(--accent); color:#fff; }
.nav-burger span{ background:#fff; }
.mobile-menu{ background:#0d0d0c; border-top-color:rgba(255,255,255,.10); }
.mobile-menu a{ color:#fff; border-bottom-color:rgba(255,255,255,.12); }

/* --------------------------------------------------------------------------
   2. Hero — single centred column, headline on one line, visual underneath
   -------------------------------------------------------------------------- */
.hero-center{ padding:150px 0 96px; text-align:center; }
.hero-copy{ max-width:1100px; margin:0 auto; }
.hero-center .eyebrow{ justify-content:center; }
.hero-oneline{
  margin-top:18px;
  /* sized so the full 31em Korean string still fits the 1112px content
     column on one line at the largest viewports */
  font-size:clamp(21px,2.7vw,34px);
  line-height:1.25;
  max-width:none;
}
@media (min-width:1080px){ .hero-oneline{ white-space:nowrap; } }
.hero-center .hero-sub{ margin:22px auto 0; max-width:660px; }
.hero-center .hero-hook{ margin-top:20px; }
.hero-center .hero-ctas{ justify-content:center; margin-top:30px; }

.hero-visual-wide{
  position:relative; margin:72px auto 0; max-width:680px;
}
.hero-visual-wide .hero-collage{ transform:rotate(0deg); gap:12px; }

/* badges pop in one after another as the collage scrolls into view */
.badge-pop{ opacity:0; transform:translateY(16px) scale(.94); }
html.js-reveal .badge-pop{
  transition:opacity .6s var(--ease), transform .6s var(--ease);
}
.badge-pop.in{ opacity:1; transform:translateY(0) scale(1); }
html:not(.js-reveal) .badge-pop{ opacity:1; transform:none; }
.fb-a{ top:-5%; right:-14%; }
.fb-b{ top:38%; left:-19%; }
.fb-c{ bottom:-4%; right:-8%; }
@media (max-width:900px){
  .hero-visual-wide{ max-width:520px; }
  .fb-a{ top:-4%; right:-4%; }
  .fb-b{ top:40%; left:-4%; }
  .fb-c{ bottom:-3%; right:2%; }
  .float-badge{ font-size:11.5px; padding:8px 12px 8px 8px; }
}
@media (prefers-reduced-motion: reduce){
  .badge-pop{ opacity:1 !important; transform:none !important; }
}

/* --------------------------------------------------------------------------
   3. WORK — dark section, 8 project banners (Cheil-style hover)
   -------------------------------------------------------------------------- */
.work-dark{
  background:#0d0d0c; color:#fff;
  padding:104px 0 96px; border-bottom:none;
}
.work-dark .kicker{ color:rgba(255,255,255,.5); }
.work-dark .section-title, .work-dark h2{ color:#fff; }
.work-dark .lede{ color:rgba(255,255,255,.62); }
.work-head{ margin-bottom:44px; }
.work-head h2{ font-size:clamp(34px,5vw,64px); letter-spacing:-.03em; }

.work-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:26px 24px; }
.work-item{ display:block; color:#fff; }
.work-thumb{
  position:relative; overflow:hidden; border-radius:6px;
  aspect-ratio:16/9; background:#17171a;
}
.work-thumb img{
  width:100%; height:100%; object-fit:cover; display:block;
  /* banners sit dark by default and light up on hover */
  filter:brightness(.52) saturate(.85);
  transform:scale(1);
  transition:filter .5s var(--ease), transform .7s var(--ease);
}
.work-item:hover .work-thumb img,
.work-item:focus-visible .work-thumb img{
  filter:brightness(1) saturate(1.02);
  transform:scale(1.06);
}
.work-thumb::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(0,0,0,.20) 0%, rgba(0,0,0,.55) 100%);
  opacity:1; transition:opacity .5s var(--ease);
}
.work-item:hover .work-thumb::after,
.work-item:focus-visible .work-thumb::after{ opacity:0; }
.work-meta{ display:flex; align-items:baseline; gap:12px; margin-top:14px; flex-wrap:wrap; }
.work-meta .t{ font-size:15px; font-weight:800; letter-spacing:-.01em; }
.work-meta .c{ font-size:13px; color:rgba(255,255,255,.5); font-weight:600; }
.work-item:hover .work-meta .c{ color:rgba(255,255,255,.78); }

/* Every thumb stays 16:9 — the same ratio the banner files are authored at —
   so nothing is ever cropped. The first and last tiles simply run full width
   for rhythm; they keep the identical aspect ratio. */
.work-grid .work-item.wide{ grid-column:1 / -1; }
.work-grid .work-item.wide .work-meta .t{ font-size:18px; }

/* progressive disclosure: 5 shown, the rest behind "view more" */
.work-item.is-hidden{ display:none; }
.work-more-wrap{ display:flex; justify-content:center; margin-top:38px; }
.work-more{
  display:inline-flex; align-items:center; gap:10px;
  height:48px; padding:0 26px; border-radius:999px;
  background:transparent; color:#fff; border:1px solid rgba(255,255,255,.28);
  font-size:14px; font-weight:700; letter-spacing:-.01em;
  transition:background .3s ease, border-color .3s ease, color .3s ease;
}
.work-more:hover{ background:#fff; color:#0d0d0c; border-color:#fff; }
.work-more .chev{ transition:transform .3s var(--ease); font-size:11px; }
.work-more[aria-expanded="true"] .chev{ transform:rotate(180deg); }

@media (max-width:760px){
  .work-grid{ grid-template-columns:1fr; gap:22px; }
}

/* --------------------------------------------------------------------------
   4. Looping quote ticker under WORK
   -------------------------------------------------------------------------- */
.ticker{
  border-top:1px solid rgba(255,255,255,.12);
  border-bottom:1px solid rgba(255,255,255,.12);
  margin-top:72px; padding:18px 0; overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.ticker + .ticker{ margin-top:0; border-top:none; }
.ticker-track{
  display:flex; align-items:center; gap:0; width:max-content;
  animation:tickerScroll 58s linear infinite;
}
.ticker-track.reverse{ animation-direction:reverse; }
.ticker:hover .ticker-track{ animation-play-state:paused; }
.ticker-item{
  display:inline-flex; align-items:center; gap:10px;
  padding:0 22px; white-space:nowrap;
  font-size:13px; color:rgba(255,255,255,.62); letter-spacing:.02em;
}
.ticker-item b{ color:#fff; font-weight:700; }
.ticker-item .sep{ color:var(--accent); font-weight:800; }
@keyframes tickerScroll{
  from{ transform:translate3d(0,0,0); }
  to{ transform:translate3d(-50%,0,0); }
}
@media (prefers-reduced-motion: reduce){
  .ticker-track{ animation:none; }
}

/* --------------------------------------------------------------------------
   4b. "왜 Vively" cards — drop the boxed/hairline treatment.
   The old .grid-3 drew its dividers with a 1px gap over a line-coloured
   background plus an outer border, which read as a dated table. Here the
   cells float on the page background and the video does the work.
   -------------------------------------------------------------------------- */
#why .grid-3{
  background:none; border:0; gap:30px;
}
#why .pcell{
  background:none; padding:0;
}
#why .pcell-media{
  aspect-ratio:3/4; border-radius:18px; margin:0 0 22px;
  border:0; background:var(--panel);
}
#why .pcell .tag{ margin-bottom:14px; }
#why .pcell h3{ font-size:20px; margin-bottom:10px; }
#why .pcell p{ font-size:14px; }
@media (max-width:980px){ #why .grid-3{ gap:26px; } }
@media (max-width:620px){ #why .grid-3{ gap:34px; } }

/* --------------------------------------------------------------------------
   5. Service list — highlighted key phrases
   -------------------------------------------------------------------------- */
.service-row-body .hi{
  background:none; color:#fff; font-weight:800;
  box-shadow:inset 0 -8px 0 rgba(255,87,87,.30);
  padding:0 1px;
}

/* --------------------------------------------------------------------------
   6. Project detail page (work.html)
   -------------------------------------------------------------------------- */
.proj-hero{ padding:112px 0 0; }
.proj-banner{
  width:100%; aspect-ratio:21/9; object-fit:cover;
  border-radius:8px; background:#17171a; display:block;
}
.proj-head{ margin:34px 0 8px; }
.proj-head .c{
  font-size:13px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--accent-text);
}
.proj-head h1{ font-size:clamp(26px,4vw,46px); margin-top:12px; }
.proj-back{
  display:inline-flex; align-items:center; gap:8px; margin-bottom:26px;
  font-size:13px; font-weight:700; color:var(--ink-50);
}
.proj-back:hover{ color:var(--ink); }
.proj-body{ display:grid; grid-template-columns:1fr 300px; gap:56px; margin-top:52px; }
.proj-block{ margin-bottom:44px; }
.proj-block h2{ font-size:19px; margin-bottom:14px; }
.proj-block p{ font-size:15px; line-height:1.75; color:var(--ink-70); }
.proj-facts{ border:1px solid var(--line); border-radius:14px; padding:22px; height:max-content; }
.proj-facts dl{ margin:0; }
.proj-facts dt{
  font-size:11px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--ink-50); margin-bottom:5px;
}
.proj-facts dd{ margin:0 0 18px; font-size:14.5px; font-weight:700; }
.proj-facts dd:last-child{ margin-bottom:0; }
.tofill{
  display:inline-block; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:12.5px; font-weight:700; color:var(--accent-text);
  background:var(--accent-dim); border-radius:5px; padding:2px 8px;
}
@media (max-width:860px){
  .proj-body{ grid-template-columns:1fr; gap:36px; }
}