/* ==========================================================================
   SSK Business Services — Responsive layer
   Breakpoints: 1399 / 1199 / 991 / 767 / 575 / 400
   ========================================================================== */

/* --------------------------------------------------------------------------
   Very wide screens — keep the measure comfortable
   -------------------------------------------------------------------------- */
@media (min-width: 1600px) {
  :root { --container: 1400px; --gutter: 32px; }
  .work-card { width: min(46vw, 700px); }
}

/* --------------------------------------------------------------------------
   ≤ 1399px
   -------------------------------------------------------------------------- */
@media (max-width: 1399px) {
  .nav__link { padding: 10px 11px; font-size: 0.8438rem; }
  .hdr__tel { display: none; }
}

/* --------------------------------------------------------------------------
   ≤ 1199px — tablet landscape
   -------------------------------------------------------------------------- */
@media (max-width: 1199px) {
  :root { --section-space: clamp(64px, 8vw, 104px); }

  .svc__layout { grid-template-columns: 1fr; gap: 40px; }
  .svc__aside { position: static !important; }
  .svc__viz { display: none; }

  .nodes__canvas { min-height: 340px; }

  .ind { grid-template-columns: 44px 1fr 40px; }
  .ind p { display: none; }

  .phero__grid { grid-template-columns: 1fr; gap: 32px; align-items: start; }
  .phero__aside { padding-bottom: 0; }

  .footer__top { grid-template-columns: 1fr; gap: 44px; }
  .footer__cols { grid-template-columns: repeat(4, 1fr); }

  .work-card { width: min(64vw, 560px); }

  .tiles--4 { grid-template-columns: repeat(2, 1fr); }
}

/* --------------------------------------------------------------------------
   ≤ 991px — tablet portrait: nav collapses, layouts single-column
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
  :root { --header-h: 68px; }

  /* Desktop nav out, burger in */
  .nav,
  .hdr__actions .btn-x { display: none; }
  .burger { display: block; }
  .site-header.is-scrolled .hdr__inner { height: 60px; }

  /* The mobile drawer is always available */
  .mnav { display: flex; }

  .split { grid-template-columns: 1fr; gap: 34px; }
  .split--sticky > .split__aside { position: static; }
  .split--flip .split__aside { order: 2; }

  .statpanel { grid-template-columns: 1fr; }
  .statpanel__col { border-left: 0; border-top: 1px solid var(--line); }
  .statpanel__col:first-child { border-top: 0; }


  .showcase { perspective: none; }
  html.js-anim .showcase { --rx: 7; --sc: 0.97; }
  .showcase__grid { grid-template-columns: 1fr; grid-template-rows: auto auto; aspect-ratio: auto; }
  .showcase__cell--main { aspect-ratio: 16 / 10; }
  .showcase__side { grid-template-rows: none; grid-template-columns: 1fr 1fr; }
  .showcase__cell--sm { aspect-ratio: 4 / 3; }


  .tiles { grid-template-columns: repeat(2, 1fr); }
  .tile { min-height: 218px; }

  .proc__steps { grid-template-columns: repeat(2, 1fr); row-gap: 40px; }
  .proc__line { display: none; }

  .case { grid-template-columns: 1fr; gap: 24px; }
  .case--flip .case__media { order: 0; }

  /* CTA stacks: message first, contact panel beneath */
  .cta-band__inner { grid-template-columns: 1fr; gap: 30px; }
  .cta-band__bg::after { display: none; }

  .work-grid { grid-template-columns: 1fr; }

  /* No pinning below 992px — the track becomes a native touch carousel */
  .hscroll,
  .hwrap.is-touch .hscroll {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .hscroll::-webkit-scrollbar { display: none; }
  .hscroll__track { transform: none !important; }
  .hscroll .work-card { scroll-snap-align: center; }
  .hscroll__pad { width: var(--gutter); }

  .form__grid { grid-template-columns: 1fr; }

  .metastrip__cell { padding-right: 18px; }

  .footer__cols { grid-template-columns: repeat(2, 1fr); row-gap: 34px; }
  .footer__mark span { font-size: clamp(3rem, 17vw, 8rem); }

  .deflist__row { grid-template-columns: 1fr; gap: 10px; }

  .rail { position: static; }

  .nodes__canvas { display: none; }
  .nodes__list { display: grid; gap: 8px; }

  /* Cursor + veil belong to pointer-fine desktops only */
  .cursor { display: none !important; }
}

/* --------------------------------------------------------------------------
   ≤ 767px — phones
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  :root {
    --gutter: 20px;
    --section-space: clamp(58px, 12vw, 82px);
    --section-space-sm: clamp(46px, 9vw, 64px);
    --r-xl: 24px;
    --r-lg: 20px;
  }

  body { font-size: 0.9375rem; }

  .hero { padding-top: calc(var(--header-h) + 40px); }
  .hero__title { max-width: 100%; }

  /* Hero video on phones.

     The hero stacks to roughly 4x its own width here. Covering all of it means
     object-fit has to keep a sliver barely a fifth of the source wide, which
     lands on flat background rather than on the scene — the video ends up
     technically present and visually absent. So the layer becomes a band across
     the top instead: less height to cover, a much wider slice survives the crop,
     and the actual animation is what shows. Below the band the hero is clean
     paper, which the stacked cards want anyway. */
  .hero__video-wrap {
    height: 54%;
    bottom: auto;
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 58%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 0%, #000 58%, transparent 100%);
  }
  .hero__video { opacity: 0.6; object-position: 84% 40%; }
  /* The pool is aimed at the headline and lede specifically. The strip above
     them carries only pill badges, which bring their own opaque backgrounds, so
     nothing needs covering up there — that strip is where the video reads. */
  .hero__bed {
    background:
      radial-gradient(80% 27% at 50% 32%,
        rgba(var(--paper-rgb), 0.93) 0%,
        rgba(var(--paper-rgb), 0.87) 52%,
        rgba(var(--paper-rgb), 0.4) 84%,
        rgba(var(--paper-rgb), 0) 100%),
      linear-gradient(to bottom,
        rgba(var(--paper-rgb), 0.38) 0%,
        rgba(var(--paper-rgb), 0.1) 13%,
        rgba(var(--paper-rgb), 0.04) 44%,
        rgba(var(--paper-rgb), 0) 60%);
  }
  .hero__vignette { display: none; }
  .hero__vidbtn { width: 34px; height: 34px; font-size: 0.95rem; }
  .hero__badges { gap: 6px; }
  .hero__cta { flex-direction: column; align-items: stretch; }
  .hero__cta .btn-x { width: 100%; }

  .section-head { flex-direction: column; align-items: flex-start; gap: 22px; }
  .section-head__aside { padding-bottom: 0; }

  .trust__row { gap: 20px 28px; }

  .tiles,
  .tiles--2,
  .tiles--4 { grid-template-columns: 1fr; }
  .tile { min-height: 0; }

  .statpanel__figs { gap: 20px; }

  .svc__item { grid-template-columns: 1fr; gap: 10px; }
  .svc__n { padding-top: 0; }
  .svc__go { position: absolute; top: clamp(22px, 2.4vw, 30px); right: 0; width: 34px; height: 34px; }
  .svc__item::before { left: -14px; right: -14px; }

  .ind { grid-template-columns: 1fr auto; gap: 14px; padding-inline: 0; }
  .ind__n { display: none; }
  .ind:hover h3 { transform: none; }

  .proc__steps { grid-template-columns: 1fr; row-gap: 0; }
  .proc__step { padding-top: 0; padding-left: 34px; padding-block: 20px; border-bottom: 1px solid var(--line); }
  .proc__step:last-child { border-bottom: 0; }
  .proc__dot { top: 24px; }

  /* The tag runs into the project label once the cell narrows */
  .showcase__tag { display: none; }

  .work-card { width: 78vw; }
  .work-card__foot { flex-direction: column; gap: 10px; }

  .case__body h3 { margin-bottom: 12px; }

  .cta-band { padding: 34px 22px; }
  .cta-band .btn-row { flex-direction: column; align-items: stretch; }
  .cta-band .btn-x { width: 100%; }
  .cta-band__panel { padding: 20px; }

  .metastrip { grid-template-columns: repeat(2, 1fr); }
  .metastrip__cell { padding: 18px 16px 18px 0; }
  .metastrip__cell:nth-child(2n) { border-right: 0; }
  .metastrip__cell:nth-child(n + 3) { border-top: 1px solid var(--line); }

  .footer__cols { grid-template-columns: 1fr 1fr; }
  .footer__bottom { flex-direction: column; align-items: flex-start; }
  .footer__mark-line { -webkit-text-stroke-width: 0.8px; }

  .prose h2 { margin-top: 40px; }
  .prose blockquote { padding: 20px 22px; font-size: 1.0625rem; }

  .job { grid-template-columns: 1fr; gap: 16px; }
  .job .btn-x { justify-self: start; }

  .totop { right: 16px; bottom: 16px; width: 42px; height: 42px; }

  .cinfo__row { grid-template-columns: 36px 1fr; gap: 14px; }
  .cinfo__ico { width: 34px; height: 34px; font-size: 1rem; }

  .acc__btn { gap: 14px; }

  .marquee__item { gap: 16px; }
}

/* --------------------------------------------------------------------------
   ≤ 575px — small phones
   -------------------------------------------------------------------------- */
@media (max-width: 575px) {
  .brand__text { font-size: 0.5rem; letter-spacing: 0.09em; }
  .brand__mark { height: 22px; }

  .hero__badges .badge-hide-xs { display: none; }


  .work-card { width: 84vw; }

  .showcase__side { grid-template-columns: 1fr; grid-template-rows: auto auto; }
  .showcase__cell--sm { aspect-ratio: 16 / 10; }

  .footer__cols { grid-template-columns: 1fr; row-gap: 28px; }

  .metastrip { grid-template-columns: 1fr; }
  .metastrip__cell { border-right: 0; border-top: 1px solid var(--line); }
  .metastrip__cell:first-child { border-top: 0; }

  .filters { gap: 6px; }
  .filter { padding: 9px 14px; font-size: 0.75rem; }

  .statpanel__figs { flex-direction: column; gap: 18px; }
}

/* --------------------------------------------------------------------------
   ≤ 400px — 320–390px hardening
   -------------------------------------------------------------------------- */
@media (max-width: 400px) {
  :root { --gutter: 16px; }

  .display-hero { font-size: clamp(2rem, 10.5vw, 2.6rem); }

  .brand__text { display: none; }
  .brand__mark { height: 24px; }

  .pill { padding: 6px 11px; font-size: 0.6875rem; }

  .btn-x { padding: 13px 20px; font-size: 0.8125rem; }
  .btn-x--lg { padding: 15px 24px; font-size: 0.875rem; }

  .tile { padding: 20px; }

  .work-card { width: 88vw; }

  .nf__code { -webkit-text-stroke-width: 1px; }
}

/* --------------------------------------------------------------------------
   Short viewports — don't let the hero push everything off-screen
   -------------------------------------------------------------------------- */
@media (max-height: 620px) and (min-width: 992px) {
  .hero { padding-top: calc(var(--header-h) + 40px); }
  .hero-viz { margin-top: 28px; }
}

/* --------------------------------------------------------------------------
   Touch devices — remove hover-only affordances that can stick
   -------------------------------------------------------------------------- */
@media (hover: none) {
  .tile__arrow { opacity: 1; transform: none; }
  .work-card__go { opacity: 1; transform: none; }
  .cursor { display: none !important; }
  .ticker:hover .ticker__track { animation-play-state: running; }
}

/* --------------------------------------------------------------------------
   Print
   -------------------------------------------------------------------------- */
@media print {
  .site-header, .mnav, .totop, .cursor, .veil, .progress,
  .marquee, .ticker, .cta-band, .scrollcue { display: none !important; }
  body { background: #fff; color: #000; }
  .section { padding-block: 24px; }
  a { text-decoration: underline; }
  .reveal-up, .reveal-fade, .stagger > * { opacity: 1 !important; transform: none !important; }
  .line__inner, .word > span { transform: none !important; }
  .image-reveal, .media-reveal { clip-path: none !important; }
}