/* ==========================================================================
   Vively — mobile pass.
   Every rule in this file lives inside a media query, so the desktop layout
   is untouched. Loaded last so it wins over the other stylesheets.
   ========================================================================== */

@media (max-width:760px){

  /* ---- edge spacing -------------------------------------------------------
     The global gutter bottomed out at 20px, which read as cramped against
     the screen edge. 24px gives text room to breathe without losing width. */
  :root{ --pad:24px; }

  /* ---- Korean line breaking ----------------------------------------------
     keep-all stops Korean wrapping mid-word, which is the single biggest
     readability win on narrow screens. break-word is the safety net for
     long unbroken runs like URLs or "10,000+". */
  h1, h2, h3, h4, h5, p, .lede, .section-title, li, dt, dd{
    word-break:keep-all;
    overflow-wrap:break-word;
  }

  /* ---- section rhythm -----------------------------------------------------
     104px of padding on a 700px-tall screen meant a third of every scroll
     was empty. Roughly halved across the board so sections read as a
     sequence rather than isolated screens. */
  .section{ padding:64px 0; }
  .section-tight{ padding:40px 0; }
  .cta-band{ padding:64px 0; }
  .page-hero{ padding:112px 0 44px; }
  .work-dark{ padding:64px 0 60px; }
  .founders-dark{ padding:64px 0 56px; }
  .ribbon-banner{ padding:48px 0 52px; }
  .trusted-section{ padding:56px 0; }
  .marquee-section{ padding:44px 0; }

  .section-head{ margin-bottom:30px; gap:16px; }
  .section-title{ font-size:clamp(22px,6.4vw,30px); line-height:1.3; }
  .kicker{ font-size:11.5px; letter-spacing:.12em; margin-bottom:10px; }
  .lede{ font-size:15px; line-height:1.65; }
  .eyebrow{ font-size:11px; }

  /* ---- hero ---------------------------------------------------------------
     The float badges are already hidden below 880px, so the visual is just
     the collage; it can sit closer to the copy than it does on desktop. */
  .hero-center{ padding:104px 0 56px; }
  .hero-oneline{ font-size:clamp(23px,6.6vw,31px); line-height:1.32; }
  .hero-center .hero-sub{ margin-top:16px; font-size:14.5px; }
  .hero-hook{ margin-top:16px; font-size:13px; padding:8px 14px; line-height:1.5; }
  .hero-center .hero-ctas{ margin-top:24px; gap:10px; }
  .hero-visual-wide{ margin-top:40px; max-width:none; }
  .hero-collage{ gap:8px; }

  /* buttons: two side by side must fit a 320px-wide content column */
  .btn{ height:48px; padding:0 18px; font-size:13.5px; }
  .btn-sm{ height:40px; padding:0 15px; font-size:12.5px; }

  /* ---- WORK ---------------------------------------------------------------*/
  .work-head{ margin-bottom:28px; }
  .work-head h2{ font-size:clamp(30px,9vw,42px); }
  .work-meta{ gap:8px; margin-top:11px; }
  .work-meta .t{ font-size:14px; }
  .work-meta .c{ font-size:12.5px; }
  .work-grid .work-item.wide .work-meta .t{ font-size:15px; }
  .work-more-wrap{ margin-top:28px; }
  .work-more{ height:44px; padding:0 22px; font-size:13.5px; }

  /* ---- ticker -------------------------------------------------------------*/
  .ticker{ margin-top:44px; padding:14px 0; }
  .ticker-item{ padding:0 15px; font-size:12px; }

  /* ---- services -----------------------------------------------------------
     This section's container is <div class="wrap section">, and .section's
     `padding:104px 0` shorthand zeroes out the horizontal padding .wrap sets.
     On desktop that's invisible because .wrap is capped at 1240px and centred,
     so there's slack either side — but on a phone .wrap fills the screen and
     the copy ends up flush against both edges. Restore the gutter explicitly. */
  .wrap.section{ padding-left:var(--pad); padding-right:var(--pad); }
  .service-dark .wrap.section{ padding:64px var(--pad); }
  .service-row-head h3{ font-size:16px; line-height:1.4; }
  .service-row-body p{ font-size:14px; line-height:1.7; }

  /* ---- process timeline ---------------------------------------------------
     Steps 02 and 04 inherit text-align:right from the desktop zig-zag. In
     the single-column mobile layout the copy sits to the right of the line,
     so it has to read left-aligned like every other step. */
  .process-step[data-side="left"]{ text-align:left; }
  .process-step[data-side="left"] .step-badge{ justify-content:flex-start; }
  .process-step h4{ font-size:18px; }
  .process-step p{ font-size:13.5px; line-height:1.65; }

  /* ---- why-Vively cards ---------------------------------------------------*/
  #why .pcell h3{ font-size:18px; }
  #why .pcell-media{ margin-bottom:16px; }

  /* ---- brand page ---------------------------------------------------------*/
  .about-hero-full{ min-height:auto; padding:112px var(--pad) 64px; }
  .about-hero-full h1{ font-size:clamp(26px,7.4vw,36px); line-height:1.32; }
  .about-hero-full .about-scroll-cue{ margin-top:32px; }

  .value-row{ grid-template-columns:32px 1fr; gap:14px; padding:22px 0; }
  .value-row h4{ font-size:17px; }
  .value-row p{ font-size:14px; }

  .tri figcaption .t{ font-size:14.5px; }
  .tri figcaption .d{ font-size:13px; }

  .kk-item h3{ font-size:19px; }
  .kk-item p{ font-size:14px; line-height:1.75; }

  .stat{ padding:20px var(--pad); flex:1 1 100%; border-right:0; border-bottom:1px solid var(--line); }
  .stat:last-child{ border-bottom:0; }
  .stats-strip{ margin-top:28px !important; }

  .f-story{ margin-top:28px; min-height:0; }
  .f-story p{ font-size:14px; line-height:1.75; }
  .f-nav{ margin-top:20px; }

  /* ---- contact ------------------------------------------------------------*/
  .contact-card{ padding:24px 20px; }
  .tally-fallback p{ font-size:14px; line-height:1.7; margin-bottom:16px; }
  .contact-info-item{ margin-bottom:20px; }

  /* ---- project detail -----------------------------------------------------*/
  .proj-hero{ padding:96px 0 0; }
  .proj-head h1{ font-size:clamp(22px,6.4vw,30px); line-height:1.3; }
  .proj-body{ margin-top:34px; }
  .proj-block{ margin-bottom:32px; }
  .proj-block p{ font-size:14.5px; }
  .proj-facts{ padding:18px; }

  /* ---- footer -------------------------------------------------------------*/
  .footer-top{ padding-bottom:36px; gap:28px; }
  .footer-legal{ gap:6px 16px; font-size:11.5px; margin-top:22px; padding-top:18px; }
  .footer-bottom{ gap:8px; font-size:12px; }
}

/* ---- very small phones ---------------------------------------------------*/
@media (max-width:380px){
  :root{ --pad:20px; }
  .hero-center .hero-ctas{ flex-direction:column; align-items:stretch; }
  .hero-center .hero-ctas .btn{ width:100%; }
  .cta-band .hero-ctas{ flex-direction:column; align-items:stretch; }
  .cta-band .hero-ctas .btn{ width:100%; }
  .work-head h2{ font-size:30px; }
  .ticker-item{ padding:0 12px; font-size:11.5px; }
}