/* ── NAV FIT: keeps the WhatsApp CTA on-screen at every desktop width
     after the Global CLASSYS KOL item was added ── */
@media (min-width:961px) and (max-width:1049px){
  #siteNav{ padding:0 12px; }
  .nav-links{ gap:7px; }
  .nav-links > li > a, .nav-drop-btn{ font-size:8px; letter-spacing:.04em; }
  .nav-cta{ padding:10px 10px; font-size:8px; letter-spacing:.04em; }
  .nav-logo{ max-width:88px; }
}
@media (min-width:1050px) and (max-width:1199px){
  #siteNav{ padding:0 16px; }
  .nav-links{ gap:10px; }
  .nav-links > li > a, .nav-drop-btn{ font-size:8.5px; letter-spacing:.08em; }
  .nav-cta{ padding:11px 13px; font-size:8.5px; letter-spacing:.08em; }
  .nav-logo{ max-width:104px; }
}
@media (min-width:1200px) and (max-width:1360px){
  #siteNav{ padding:0 24px; }
  .nav-links{ gap:14px; }
  .nav-links > li > a, .nav-drop-btn{ font-size:9px; letter-spacing:.10em; }
  .nav-cta{ padding:12px 16px; font-size:9px; }
}
/* ============================================================
   MOBILE OPTIMIZATION PATCH  (<=768px / <=960px nav)
   Loaded last in <head> so it overrides earlier source-order CSS.
   ============================================================ */

/* ---- Global: prevent horizontal overflow ---- */

/* ---- Graceful fallback for images that fail to load (e.g. expired CDN) ---- */
.blog-card-img-wrap,
.bi-card-img-wrap,
.tx-hero-video,
.blog-hero-media{
  background:linear-gradient(135deg,#141416 0%,#1d1a14 100%);
}
/* Hide the broken-image alt sprawl: failed imgs collapse to the bg gradient */
img.img-failed{
  opacity:0 !important;
}
.blog-card-img-wrap.img-failed-wrap::after,
.bi-card-img-wrap.img-failed-wrap::after{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(circle at 30% 30%, rgba(201,169,110,0.12), transparent 60%),
    linear-gradient(135deg,#141416 0%,#1d1a14 100%);
  z-index:0;
}

@media (max-width: 960px){
  html, body { max-width:100%; overflow-x:hidden; }
  *{ -webkit-tap-highlight-color: transparent; }
}

/* ---- NAV: fix collapsed/transparent mobile overlay ---- */
@media (max-width: 960px){
  #siteNav{ height:60px; padding:0 18px; }

  /* Ensure the burger shows on mobile even on pages whose base CSS
     is missing the standard 960px rule (e.g. blog listing). */
  .nav-burger{ display:flex !important; }
  .nav-links > li > a, .nav-drop-btn{ text-transform:uppercase; }

  .nav-links{
    display:none;
    position:fixed;
    top:60px; left:0; right:0;
    /* explicit height fixes the collapse-to-40px bug */
    height:calc(100vh - 60px);
    height:calc(100dvh - 60px);
    max-height:calc(100vh - 60px);
    background:#0A0A0B;            /* fully opaque */
    -webkit-backdrop-filter:blur(20px);
    backdrop-filter:blur(20px);
    flex-direction:column;
    align-items:stretch;
    justify-content:flex-start;
    gap:0;
    margin:0; padding:0 0 48px 0;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    z-index:1200;
  }
  .nav-links.open{ display:flex; }

  .nav-links > li{
    flex:0 0 auto;
    width:100%;
    border-bottom:1px solid rgba(201,169,110,0.08);
  }

  .nav-links > li > a,
  .nav-drop-btn{
    display:flex; justify-content:space-between; align-items:center;
    width:100%; box-sizing:border-box;
    padding:18px 22px !important;
    font-size:13px !important; letter-spacing:0.12em !important;
  }

  /* Mega submenu: hidden until parent toggled open, then visible & in-flow */
  .nav-mega{
    display:none !important;
    position:static !important;
    top:auto !important;
    width:100%;
    background:rgba(201,169,110,0.03) !important;
    border:none !important; box-shadow:none !important;
    -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
  }
  .nav-has-drop.open .nav-mega{ display:block !important; }

  .nav-mega-inner{
    grid-template-columns:1fr !important;
    max-width:100% !important;
    padding:0 !important; gap:0 !important;
  }
  .nav-mega-col{
    padding:10px 22px !important;
    border-right:none !important;
    border-bottom:1px solid rgba(201,169,110,0.05);
  }
  .nav-mega-col:last-child{ border-bottom:none; }
  .nav-mega-col > a{ padding:9px 0 !important; }
  .nav-mega-cat{ margin-bottom:8px; }

  /* Marquee strip: stack vertically, no horizontal overflow */
  .nav-mega-strip{
    flex-direction:column !important;
    width:100%;
    overflow:hidden;
  }
  .nav-mega-strip > a{
    flex:1 1 auto;
    width:100%; box-sizing:border-box;
    padding:12px 22px !important;
    white-space:normal !important;
    border-right:none !important;
    border-bottom:1px solid rgba(201,169,110,0.05);
  }

  .nav-cta{
    margin:18px 22px 0 !important;
    display:block !important;
    width:calc(100% - 44px) !important;
    text-align:center !important;
    padding:15px !important;
    box-sizing:border-box !important;
  }

  .nav-arrow{ flex:0 0 auto; }
}

/* ---- LAYOUT: collapse multi-column grids on small screens ---- */
@media (max-width: 768px){
  .hero,
  .about-grid,
  .philosophy-inner,
  .contact-grid,
  .home-celeb-grid,
  .kol-peer-card{
    grid-template-columns:1fr !important;
    gap:28px !important;
  }
  .services-grid,
  .testimonials-grid,
  .ph-grid{
    grid-template-columns:1fr !important;
    gap:20px !important;
  }
  /* Influencer grid: small photo tiles read well 2-up on mobile. */
  .inf-grid{
    grid-template-columns:1fr 1fr !important;
    gap:12px !important;
  }
  /* The award card spans 2 cols on desktop; on a 2-col mobile grid that's
     the full row. Reset its span so it doesn't force phantom tracks. */
  .inf-card--award{
    grid-column:1 / -1 !important;
  }
  .gallery-grid{
    grid-template-columns:1fr 1fr !important;
    gap:10px !important;
  }
  .ft-grid{
    grid-template-columns:1fr 1fr !important;
    gap:24px 16px !important;
  }
  /* sig-item has THREE children (num / content / details).
     Collapse to a single column so the details list spans full width
     instead of wrapping back into the narrow number column. */
  .sig-item{
    display:block !important;
    padding:32px 0 !important;
  }
  .sig-num{
    font-size:40px !important;
    padding-top:0 !important;
    margin-bottom:8px;
  }
  .sig-details{
    padding-top:20px !important;
    margin-top:4px;
  }
  .sig-detail-item{
    font-size:13px !important;
    line-height:1.55 !important;
  }
  .signature{ padding:64px 0 !important; }

  /* Featured service-card #07 uses an inline 3-column grid
     (auto 1fr auto = number / content / link). Collapse it so the
     description and tags get full width instead of a ~140px column. */
  .service-card[style*="grid"]{
    display:block !important;
    grid-template-columns:1fr !important;
    padding:36px 22px !important;
  }
  .service-card[style*="grid"] .service-num{
    position:static !important;
    font-size:40px !important;
    display:block;
    margin-bottom:8px;
  }
  .service-card[style*="grid"] .service-desc{
    max-width:100% !important;
  }
  .service-card[style*="grid"] .service-link{
    margin-top:20px;
  }

  /* Any element that explicitly forced a wide min-width can shrink */
  .c, .container, section, .section{
    box-sizing:border-box;
    max-width:100%;
  }
}

/* ---- TYPOGRAPHY: keep big display type from one-word-per-line ---- */
@media (max-width: 768px){
  .hero-title{ font-size:clamp(38px,11vw,58px) !important; }
  .hero-title-line2{ font-size:clamp(30px,9vw,46px) !important; }
  .tx-hero-title{ font-size:clamp(30px,8.5vw,52px) !important; line-height:1.08 !important; }
  .section-title,
  .tx-section-title,
  .tx-detail-title,
  .tx-about-title{ font-size:clamp(28px,8vw,44px) !important; line-height:1.12 !important; }
  .philosophy-quote{ font-size:clamp(23px,6.5vw,38px) !important; line-height:1.3 !important; }
  .testi-quote{ font-size:clamp(18px,5vw,26px) !important; }
}

/* ---- SPACING: trim excessive vertical whitespace on mobile ---- */
@media (max-width: 768px){
  section, .section{ padding-top:64px !important; padding-bottom:64px !important; }
  .hero{ padding-top:96px !important; padding-bottom:72px !important; }
}

/* ---- Images/media never overflow ---- */
@media (max-width: 960px){
  img, video, iframe{ max-width:100%; height:auto; }
}

/* ---- Marquee strips & wide bands: clip, never scroll the page ---- */
@media (max-width: 960px){
  .intro-strip,
  .nav-mega-strip,
  .marquee, .ticker, [class*="strip"]{
    overflow:hidden !important;
    max-width:100%;
  }
}

/* ---- Hero & header notes fit small screens ---- */
@media (max-width: 768px){
  .hero-left{ padding:110px 22px 56px 22px !important; }
  .hero-right{ min-height:300px; }
  .kol-header-note{
    max-width:100% !important;
    text-align:left !important;
  }
  .kol-peer-card{ gap:18px !important; }

  /* Blog listing (bi-) hero & filter: add horizontal padding so text
     and tabs don't touch the screen edge on mobile. */
  .bi-hero-content{ padding-left:22px !important; padding-right:22px !important; }
  .bi-hero{ padding-left:0 !important; padding-right:0 !important; }
  .bi-filter-inner{ padding:0 12px !important; }
  .bi-filter-btn{ padding:14px 16px !important; }
}