@charset "utf-8";

/*
 * Sanniao laptop polish — 2026-09-04
 * Loaded after every page-specific stylesheet.
 * Scope: compact laptop viewports only; large desktop and mobile keep their
 * established composition.
 */

@media (min-width: 761px) and (max-width: 1440px) {
  /* Keep the consultation entry useful without covering the right content rail. */
  .snk-contact-dock {
    right: 0;
    width: 48px;
    height: 146px;
  }

  .snk-contact-dock-toggle {
    width: 48px;
    min-height: 146px;
    gap: 7px;
    padding: 12px 6px;
    border-radius: 18px 0 0 18px;
  }

  .snk-contact-dock-toggle img {
    width: 23px;
    height: 23px;
  }

  .snk-contact-dock-toggle span { font-size: 14px; }
  .snk-contact-dock-toggle small { display: none; }

  .snk-contact-panel {
    right: 56px;
    width: min(320px, calc(100vw - 80px));
  }

  /* The homepage markup and legacy pseudo-element both supplied an arrow. */
  .home-v4 .header-cta b { display: none !important; }
}

@media (min-width: 981px) and (max-width: 1440px) {
  /* Reserve the real image ratio before the first lazy-loaded case arrives. */
  .home-v4 .v4-case-featured figure {
    min-height: 0;
    aspect-ratio: 2398 / 1050;
  }

  .home-v4 .v4-case-featured figure img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
}

@media (min-width: 1081px) and (max-width: 1440px) {
  /* Four services: preserve the vertical story while removing dead height. */
  .home-v4 .v4-system { padding-block: 104px; }

  .home-v4 .v4-system .shell { gap: 64px; }

  .home-v4 .v4-system-rail { gap: 14px; }

  .home-v4 .v4-system-step {
    grid-template-columns: minmax(0, 1fr) 160px;
    gap: 0 28px;
    min-height: 286px;
    padding: 30px 34px;
    border-radius: 26px;
  }

  .home-v4 .v4-system-step:hover,
  .home-v4 .v4-system-step:focus-visible { transform: translateX(-4px); }

  .home-v4 .v4-system-step h3 {
    margin: 20px 0 16px;
    font-size: clamp(32px, 2.7vw, 38px);
  }

  .home-v4 .v4-system-step > p { line-height: 1.75; }
  .home-v4 .v4-system-step > b { margin-top: 18px; }

  /* Project stories: retain uncropped screenshots and tighten only rhythm. */
  .home-v4 #cases { padding-block: 104px; }
  .home-v4 #cases .v4-section-heading { margin-bottom: 0; }
  .home-v4 .v4-case-grid { margin-top: 52px; }

  .home-v4 .v4-case-grid > .v4-case:not(.v4-case-featured) {
    gap: 64px;
    margin-top: 68px;
    padding-bottom: 68px;
  }

  .home-v4 .v4-case-summary {
    font-size: 14px;
    line-height: 1.75;
  }

  .home-v4 .v6-results {
    margin-top: 128px;
    padding: 64px;
  }

  /* Most service heroes exceeded one laptop viewport only because of padding. */
  .inner-page-v2:not(.page-independent-site) .inner-hero {
    min-height: min(800px, 100svh);
    padding: 116px 0 52px;
  }

  .inner-page-v2:not(.page-independent-site) .inner-hero-layout,
  .inner-page-v2:not(.page-independent-site) .inner-hero > .shell.inner-hero-grid {
    min-height: min(632px, calc(100svh - 168px));
  }

  /* SEO's page-specific rule put the scroll cue back in document flow. */
  .page-google-seo .inner-scroll-cue {
    position: absolute;
    bottom: 20px;
    left: 50%;
    margin: 0;
    transform: translateX(-50%);
  }

  .page-google-seo .inner-scroll-cue:hover,
  .page-google-seo .inner-scroll-cue:focus-visible {
    transform: translate(-50%, -3px);
  }
}

/* Match the 1080px navigation switch with the homepage composition switch. */
@media (min-width: 981px) and (max-width: 1080px) {
  .home-v4 .v4-hero-layout {
    grid-template-columns: 1fr;
    gap: 44px;
  }

  .home-v4 .v4-hero-copy { max-width: 780px; }

  .home-v4 .snk-home-discovery {
    justify-self: start;
    width: min(100%, 860px);
  }
}

/* Critical WZJS copy is visible immediately; the right build animation stays. */
.page-independent-site .inner-hero-copy.reveal {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}