/* ==========================================================================
   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 #login-link,
.nav #logout-btn{
  background:transparent;
  border-color:transparent;
  color:#fff;
}
.nav #login-link:hover,
.nav #logout-btn:hover{
  background:transparent;
  border-color:transparent;
  color:var(--accent);
  transform:none;
}
.nav #user-name,
.nav .user-profile,
.nav .user-profile .btn,
.nav .auth-container,
.nav .auth-container a,
.nav .auth-container button,
.nav .nav-links a{
  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{
  min-height:100svh;
  padding:72px 0 52px;
  display:flex;
  align-items:center;
  background:#0d0d0c;
  color:#fff;
}

.hero-center .wrap{ width:100%; }

.hero-center .hero-showcase{
  display:grid;
  grid-template-columns:minmax(360px, 500px) minmax(0, 820px);
  gap:clamp(28px, 4vw, 68px);
  align-items:center;
  justify-content:center;
  min-height:calc(100svh - 120px);
}
.hero-copy{ max-width:1180px; margin:0 auto; }
.hero-center .hero-copy{ max-width:820px; margin:0; text-align:left; }
.hero-center .eyebrow{ justify-content:flex-start; color:rgba(255,255,255,.76); }
.hero-oneline{
  margin-top:22px;
  font-size:clamp(36px,3.25vw,64px);
  line-height:1.1;
  max-width:none;
  letter-spacing:-0.05em;
  color:#ffffff;
}
@media (min-width:1080px){ .hero-oneline{ white-space:nowrap; } }
.hero-center .hero-sub{
  margin:26px 0 0;
  max-width:760px;
  font-size:clamp(17px,1.5vw,22px);
  line-height:1.62;
  color:rgba(255,255,255,.72);
}
.hero-center .hero-hook{
  margin-top:22px;
  color:rgba(255,255,255,.8);
  display:inline-block;
  padding:12px 21px;
  border-radius:999px;
  background:#2a2a2a;
  border:none;
  font-size:16px;
  line-height:1.5;
}
.hero-center .hero-hook b{ color:#fff; }
.hero-center .hero-ctas{ justify-content:flex-start; margin-top:34px; gap:14px; }
.hero-center .hero-ctas .btn{ height:56px; padding:0 28px; font-size:16px; }
.hero-center .hero-ctas .btn-ghost{
  color:#fff;
}

.hero-visual-wide{
  position:relative;
  margin:0;
  width:500px;
  max-width:100%;
  justify-self:center;
}

.hero-loop{
  position:relative;
  width:100%;
  aspect-ratio:0.82;
  border-radius:18px;
  overflow:hidden;
  border:10px solid #0d0d0c;
  box-shadow:0 36px 56px rgba(16,16,16,.12);
  transform:rotate(-7deg) translateX(-8px);
  background:#000;
}

.hero-loop-frame{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  opacity:0;
  animation:heroLoopGentle 8s infinite ease-in-out;
}

.hero-loop-frame:nth-child(1){ animation-delay:0s; z-index:4; }
.hero-loop-frame:nth-child(2){ animation-delay:2s; z-index:3; }
.hero-loop-frame:nth-child(3){ animation-delay:4s; z-index:2; }
.hero-loop-frame:nth-child(4){ animation-delay:6s; z-index:1; }

@keyframes heroLoopGentle {
  0%, 18% { opacity: 1; }
  22% { opacity: 0.9; }
  28%, 100% { opacity: 0; }
}

/* 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-center{ min-height:auto; padding:112px 0 60px; display:block; }
  .hero-center .hero-showcase{ grid-template-columns:1fr; }
  .hero-center .hero-copy{ max-width:680px; margin:0 auto; text-align:center; }
  .hero-center .eyebrow{ justify-content:center; }
  .hero-center .hero-sub{ margin-left:auto; margin-right:auto; }
  .hero-center .hero-ctas{ justify-content:center; }
  .hero-visual-wide{ max-width:520px; margin:18px auto 0; }
  .hero-loop{ transform:rotate(-4deg); }
  .cta-band{ padding:88px 0 76px; }
  .cta-band-inner{ padding:34px 24px 38px; border-radius:20px; }
  .cta-band .hero-ctas .btn{ min-width:154px; height:54px; font-size:16px; }
  .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; }
  .hero-loop-frame{ animation:none; opacity:0; }
  .hero-loop-frame:first-child{ opacity:1; }
}

/* --------------------------------------------------------------------------
   2b. CTA band refresh
   -------------------------------------------------------------------------- */
.cta-band{
  position:relative;
  background:#080a0f;
  color:#fff;
  padding:110px 0 104px;
  overflow:hidden;
}

.cta-band::before,
.cta-band::after{
  content:"";
  position:absolute;
  inset:auto;
  pointer-events:none;
  border-radius:50%;
}

.cta-band::before{
  width:760px;
  height:760px;
  right:-180px;
  top:-300px;
  background:radial-gradient(circle, rgba(255,88,87,.18) 0%, rgba(255,88,87,.06) 28%, rgba(255,88,87,0) 68%);
}

.cta-band::after{
  width:520px;
  height:520px;
  left:-180px;
  bottom:-220px;
  background:radial-gradient(circle, rgba(255,88,87,.15) 0%, rgba(255,88,87,.05) 28%, rgba(255,88,87,0) 70%);
}

.cta-band .wrap{ max-width:1500px; position:relative; z-index:1; }

.cta-band-inner{
  position:relative;
  text-align:center;
  padding:90px 100px 92px;
  border-radius:42px;
  border:1px solid rgba(255,255,255,.16);
  background:linear-gradient(135deg, rgba(255,255,255,.055), rgba(255,255,255,.015));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 30px 80px rgba(0,0,0,.35);
  backdrop-filter:blur(18px);
  overflow:hidden;
}

.cta-band-inner::before,
.cta-band-inner::after{
  content:"";
  position:absolute;
  pointer-events:none;
  border-radius:50%;
  opacity:.35;
}

.cta-band-inner::before{
  width:260px;
  height:260px;
  right:-90px;
  top:-90px;
  border:1px solid rgba(255,255,255,.12);
  background:radial-gradient(circle, rgba(255,98,98,.12) 0%, rgba(255,98,98,0) 70%);
}

.cta-band-inner::after{
  width:320px;
  height:320px;
  left:-120px;
  bottom:-130px;
  border:1px solid rgba(255,255,255,.08);
  background:radial-gradient(circle, rgba(255,98,98,.06) 0%, rgba(255,98,98,0) 70%);
}

.cta-band-eyebrow{
  position:relative;
  justify-content:center;
  margin-bottom:38px;
  padding:0 18px;
  font-size:14px;
  letter-spacing:.22em;
  color:rgba(255,255,255,.74);
  text-transform:uppercase;
}

.cta-band-eyebrow::before,
.cta-band-eyebrow::after{
  content:"|";
  display:block;
  width:auto;
  height:auto;
  color:#ff6262;
  font-size:18px;
  font-weight:500;
  line-height:1;
  background:none;
  opacity:1;
}

.cta-band-eyebrow::before{ display:none; }
.cta-band-eyebrow::after{ margin-left:12px; }

.cta-band h2{
  position:relative;
  z-index:1;
  font-size:clamp(40px, 3.4vw, 64px);
  line-height:1.08;
  letter-spacing:-0.045em;
  color:#fff;
  max-width:1200px;
  margin:0 auto;
}

.cta-band .lede{
  position:relative;
  z-index:1;
  color:rgba(255,255,255,.62);
  max-width:900px;
  margin:34px auto 0;
  font-size:clamp(20px, 1.8vw, 23px);
  line-height:1.72;
  font-weight:400;
}

.cta-band .hero-ctas{
  position:relative;
  z-index:1;
  justify-content:center;
  margin-top:54px;
  gap:22px;
}

.cta-band .hero-ctas .btn{
  min-width:280px;
  height:78px;
  padding:0 30px;
  font-size:20px;
  border-radius:999px;
  letter-spacing:-0.02em;
  justify-content:space-between;
}

.cta-band .hero-ctas .btn span[aria-hidden="true"]{
  font-size:1.2em;
  transition:transform .3s ease;
  display:inline-block;
}

.cta-band .btn-accent{
  background:linear-gradient(135deg, #ff5151, #ff6a6a);
  box-shadow:0 14px 40px rgba(255,81,81,.28);
  border-color:rgba(255,255,255,.06);
}

.cta-band .btn-accent:hover{
  background:linear-gradient(135deg, #ff5d5d, #ff7676);
  transform:translateY(-2px);
  box-shadow:0 18px 44px rgba(255,81,81,.34);
}

.cta-band .btn-accent:hover span[aria-hidden="true"],
.cta-band .btn-ghost:hover span[aria-hidden="true"]{
  transform:translateX(4px);
}

.cta-band .btn-ghost{
  border-color:rgba(255,255,255,.38);
  color:#fff;
  background:rgba(255,255,255,.015);
}

.cta-band .btn-ghost:hover{
  border-color:rgba(255,255,255,.65);
  background:rgba(255,255,255,.06);
  color:#fff;
}

@media (max-width: 900px){
  .cta-band{ padding:72px 0 80px; }
  .cta-band-inner{ padding:72px 42px; border-radius:32px; }
  .cta-band h2{ font-size:clamp(36px, 5.2vw, 50px); }
  .cta-band .lede{ font-size:clamp(18px, 2.5vw, 20px); }
  .cta-band .hero-ctas .btn{ min-width:220px; height:70px; font-size:18px; }
}

@media (max-width: 767px){
  .cta-band{ padding:64px 0 72px; }
  .cta-band .wrap{ padding-left:20px; padding-right:20px; }
  .cta-band-inner{ padding:56px 22px 52px; border-radius:28px; }
  .cta-band-eyebrow{ font-size:10px; letter-spacing:.18em; margin-bottom:26px; }
  .cta-band h2{ font-size:clamp(30px, 8.8vw, 40px); }
  .cta-band .lede{ margin-top:20px; font-size:16px; line-height:1.7; }
  .cta-band .hero-ctas{ margin-top:32px; gap:12px; }
  .cta-band .hero-ctas .btn{ width:100%; min-width:0; height:64px; font-size:17px; }
}

/* --------------------------------------------------------------------------
   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; }
}