/* SERI JADI scroll-performance and image-fit overrides — 2026-07-13.
   Loaded after style.css so legacy theme rules cannot re-enable costly effects. */

.section-light,
.section-dark,
.section-gray {
  content-visibility: visible;
  contain-intrinsic-size: none;
}

.site-nav {
  background: #fff;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.wa-fab {
  will-change: auto;
  box-shadow: 0 5px 18px rgba(15, 122, 67, .24), 0 2px 6px rgba(0, 0, 0, .12);
}

.wa-fab-ping {
  display: none;
  animation: none;
}

.home-v2-faq-intro {
  position: static;
  top: auto;
}

.service-card-photo,
.home-v2-service-card img,
.home-v2-hero-photo img {
  object-position: 50% 50% !important;
}

/* Homepage cards previously forced wide images into near-square full-bleed
   frames. Use a native 16:9 image area so the complete subject remains visible. */
.home-v2-service-card,
.home-v2-service-card-wide {
  display: grid;
  grid-template-rows: auto 1fr;
  height: auto;
  min-height: 0;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--border);
}

.home-v2-service-card img {
  position: relative;
  inset: auto;
  z-index: 0;
  grid-row: 1;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.home-v2-service-shade {
  display: none;
}

.home-v2-service-copy {
  position: relative;
  inset: auto;
  z-index: 1;
  grid-row: 2;
  padding: 17px;
  color: var(--text-1);
}

.home-v2-service-copy small,
.home-v2-service-copy b {
  color: var(--purple);
}

.home-v2-service-copy em {
  color: var(--text-3);
}

@media (hover: none), (pointer: coarse) {
  .home-v2-service-card img,
  .home-v2-hero-photo img,
  .product-card,
  .stamp-type-card,
  .service-card {
    transition: none;
  }

  .home-v2-service-card:hover img,
  .home-v2-hero-media:hover .home-v2-hero-photo img,
  .product-card:hover,
  .stamp-type-card:hover,
  .service-card:hover {
    transform: none;
    filter: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* Phone-density pass — keep the catalogue readable while showing substantially
   more useful information in each viewport. Touch controls remain at least 42px. */
@media (max-width: 640px) {
  :root {
    --pad: 12px;
    --nav-h: 52px;
  }

  body { font-size: 14px; }
  .container { padding-left: 12px; padding-right: 12px; }
  .nav-inner { padding-left: 12px; padding-right: 12px; }
  .nav-logo { margin-right: 10px; }
  .nav-logo img { height: 28px; }
  .site-nav .nav-lang-btn { min-height: 40px; padding: 7px 9px; font-size: 11px; }
  .hamburger { width: 42px; height: 42px; }

  /* Homepage: shorter first screen, compact proof, and two services per row. */
  .home-v2-hero { padding: 18px 0 20px; }
  .home-v2-hero-grid { gap: 16px; }
  .home-v2-eyebrow { margin-bottom: 8px; font-size: 8px; letter-spacing: .8px; }
  .home-v2-hero-copy h1 {
    max-width: 340px;
    font-size: clamp(29px, 8.4vw, 34px);
    line-height: 1.01;
  }
  .home-v2-hero-lead { margin-top: 10px; font-size: 13px; line-height: 1.45; }
  .home-v2-category-pills {
    display: flex;
    flex-wrap: nowrap;
    gap: 5px;
    margin-top: 11px;
    padding-bottom: 3px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .home-v2-category-pills::-webkit-scrollbar { display: none; }
  .home-v2-category-pills a {
    flex: 0 0 auto;
    min-height: 0;
    padding: 4px 7px;
    font-size: 9px;
    line-height: 1.15;
    white-space: nowrap;
  }
  .home-v2-actions { flex-direction: row; gap: 7px; margin-top: 13px; }
  .home-v2-actions .btn {
    width: auto;
    min-width: 0;
    min-height: 42px;
    flex: 1 1 0;
    padding: 9px 8px;
    font-size: 11px;
  }
  .home-v2-hero-note { display: none; }
  .home-v2-hero-media {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: auto;
    gap: 6px;
    margin-top: 0;
  }
  .home-v2-hero-photo,
  .home-v2-hero-photo-main {
    grid-column: auto;
    grid-row: auto;
    aspect-ratio: 4 / 3;
    border-radius: 8px;
  }
  .home-v2-hero-photo > span { left: 6px; bottom: 5px; max-width: calc(100% - 12px); font-size: 7px; }

  .home-v2-trust-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-v2-trust-item,
  .home-v2-trust-item:first-child,
  .home-v2-trust-item:nth-child(2) {
    min-height: 0;
    padding: 11px 10px;
  }
  .home-v2-trust-item strong { font-size: 11px; line-height: 1.25; }
  .home-v2-trust-item span { margin-top: 3px; font-size: 9px; line-height: 1.3; }

  .home-v2-section { padding: 24px 0; }
  .home-v2-section-head { gap: 7px; margin-bottom: 16px; }
  .home-v2-section-head .home-v2-eyebrow { display: none; }
  .home-v2-section-head h2,
  .home-v2-proof-copy h2,
  .home-v2-area-copy h2,
  .home-v2-faq-intro h2,
  .home-v2-final-cta h2 {
    font-size: clamp(23px, 6.6vw, 28px);
    line-height: 1.06;
  }
  .home-v2-section-head > p,
  .home-v2-proof-copy > p,
  .home-v2-area-copy > p,
  .home-v2-faq-intro > p { font-size: 11.5px; line-height: 1.45; }
  .home-v2-section-head > p {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .home-v2-service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .home-v2-service-card,
  .home-v2-service-card-wide {
    grid-template-rows: auto 1fr;
    min-height: 0;
    border-radius: 9px;
  }
  .home-v2-service-card img {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
  }
  .home-v2-service-copy { padding: 9px; }
  .home-v2-service-copy small { margin-bottom: 3px; font-size: 7.5px; letter-spacing: .45px; }
  .home-v2-service-copy strong { font-size: 14px; line-height: 1.12; }
  .home-v2-service-copy em {
    margin-top: 5px;
    font-size: 9px;
    line-height: 1.35;
    -webkit-line-clamp: 2;
  }
  .home-v2-service-copy b { margin-top: 7px; font-size: 9px; }

  .home-v2-proof-grid,
  .home-v2-process-grid,
  .home-v2-area-grid,
  .home-v2-faq-grid { gap: 18px; }
  .home-v2-proof-points { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
  .home-v2-proof-points > div { padding: 11px; border-radius: 8px; }
  .home-v2-proof-points span { margin-bottom: 3px; font-size: 12px; }
  .home-v2-proof-points p { font-size: 9.5px; line-height: 1.35; }

  .home-v2-process-grid { gap: 7px; }
  .home-v2-process-grid li {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: start;
    gap: 2px 10px;
    padding: 12px;
  }
  .home-v2-process-grid li > span { grid-row: 1 / span 2; margin: 0; font-size: 12px; }
  .home-v2-process-grid h3 { margin: 0; font-size: 13px; }
  .home-v2-process-grid p { margin: 2px 0 0; font-size: 10px; line-height: 1.35; }
  .home-v2-brief-card { gap: 9px; margin-top: 10px; padding: 13px; }
  .home-v2-brief-card strong { font-size: 12px; }
  .home-v2-brief-card p,
  .home-v2-brief-card a { font-size: 10px; line-height: 1.4; }
  .home-v2-area-links { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
  .home-v2-area-links a { padding: 10px; font-size: 10px; }
  .home-v2-faq-list summary { min-height: 44px; padding: 12px 38px 12px 0; font-size: 12px; }
  .home-v2-faq-list summary::after { top: 8px; width: 28px; height: 28px; font-size: 16px; }
  .home-v2-faq-list details p { padding: 0 6px 14px 0; font-size: 10.5px; line-height: 1.45; }
  .home-v2-final-cta { padding: 30px 0; }
  .home-v2-final-cta-inner { gap: 18px; }
  .home-v2-final-cta p:not(.home-v2-eyebrow) { margin-top: 9px; font-size: 11px; line-height: 1.45; }
  .home-v2-final-actions { flex-direction: row; gap: 7px; }
  .home-v2-final-actions .btn { min-height: 42px; padding: 9px 7px; font-size: 10.5px; }
  .home-v2-email-link { display: none; }

  /* Interior service pages: title and explanation above compact image-left cards. */
  .page-hero { padding: 14px 0 16px; }
  .page-hero .breadcrumb { margin-bottom: 6px; font-size: 10px; line-height: 1.35; }
  .page-hero-eyebrow { margin-bottom: 5px; font-size: 8px; line-height: 1.3; letter-spacing: .75px; }
  body .page-hero-title {
    margin-top: 4px;
    margin-bottom: 6px;
    font-size: 26px !important;
    line-height: 1.04 !important;
  }
  body .page-hero-sub {
    margin-top: 6px !important;
    font-size: 11.5px !important;
    line-height: 1.45 !important;
  }
  .page-hero .page-hero-sub + div {
    gap: 6px !important;
    margin-top: 10px !important;
    flex-wrap: nowrap !important;
  }
  .page-hero .page-hero-sub + div .btn {
    min-width: 0;
    min-height: 42px;
    flex: 1 1 0;
    padding: 8px 7px;
    font-size: 9.5px;
    white-space: normal;
  }
  .page-hero .trust-badges {
    flex-wrap: nowrap;
    gap: 5px;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: none;
  }
  .page-hero .trust-badges::-webkit-scrollbar { display: none; }
  .page-hero .trust-badges .badge { flex: 0 0 auto; padding: 4px 7px !important; font-size: 8.5px !important; }
  .section { padding: 28px 0; }
  .section-header { margin-bottom: 16px; }
  .section-title { font-size: 23px; line-height: 1.08; }
  .compact-answer { padding: 18px 0; }
  .compact-answer .section-title { font-size: 20px; }

  .stamp-types-grid,
  .services-grid { gap: 8px; }
  .visual-service-grid .stamp-type-card,
  .visual-service-grid .service-card {
    display: grid;
    grid-template-columns: 104px minmax(0, 1fr);
    align-content: start;
    gap: 0 11px;
    min-height: 132px;
    padding: 11px;
    border-radius: 9px;
  }
  .visual-service-grid .service-card-photo {
    grid-column: 1;
    grid-row: 1 / span 12;
    align-self: stretch;
    width: 104px;
    height: calc(100% + 22px);
    min-height: 132px;
    max-height: 180px;
    margin: -11px 0 -11px -11px;
    border: 0;
    border-right: 1px solid var(--border);
    aspect-ratio: auto;
  }
  .visual-service-grid .stamp-type-card > :not(.service-card-photo),
  .visual-service-grid .service-card > :not(.service-card-photo) { grid-column: 2; }
  .visual-service-grid .stamp-type-card h3,
  .visual-service-grid .service-card h3 { margin: 0 0 4px; font-size: 13px; line-height: 1.2; }
  .visual-service-grid .service-icon,
  .visual-service-grid .stamp-type-icon { display: none; }
  .visual-service-grid .stamp-type-card > p,
  .visual-service-grid .service-card > p {
    display: -webkit-box;
    margin: 0 0 5px;
    overflow: hidden;
    font-size: 9.5px;
    line-height: 1.35;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }
  .visual-service-grid .badge-tag,
  .visual-service-grid .service-card-price,
  .visual-service-grid .stamp-type-size { font-size: 9px; }
  .visual-service-grid .service-features,
  .visual-service-grid .stamp-features {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2px 7px;
    margin: 2px 0 6px;
    padding: 0;
  }
  .visual-service-grid .service-features li,
  .visual-service-grid .stamp-features li {
    margin: 0;
    padding-left: 9px;
    font-size: 8px;
    line-height: 1.3;
  }
  .visual-service-grid .btn {
    width: 100%;
    min-height: 38px;
    padding: 7px 8px;
    font-size: 9px;
  }
  .visual-service-grid .stamp-price { margin-top: 3px; font-size: 9px; }

  .real-stamp-models { margin: 14px 0 24px; gap: 8px; }
  .real-stamp-model { grid-template-columns: 92px minmax(0, 1fr); }
  .real-stamp-model img { height: 96px; }
  .real-stamp-model figcaption { padding: 10px; }
  .real-stamp-model strong { font-size: 12px; }
  .real-stamp-model span { margin-top: 3px; font-size: 9px; line-height: 1.35; }

  /* Stationery: return to a genuinely scannable two-up product catalogue. */
  body[data-page="stationery"] .page-hero { padding: 14px 0 16px; }
  body[data-page="stationery"] .page-hero-title { font-size: 26px; }
  body[data-page="stationery"] .catalog-section { padding: 18px 0 30px; }
  body[data-page="stationery"] .catalog-toolbar { gap: 7px; }
  body[data-page="stationery"] .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  body[data-page="stationery"] .product-card-link { display: block; }
  body[data-page="stationery"] .product-card-img { width: 100%; height: auto; min-height: 0; aspect-ratio: 4 / 3; }
  body[data-page="stationery"] .product-card-body { padding: 8px 9px 5px; }
  body[data-page="stationery"] .product-name {
    display: -webkit-box;
    min-height: 34px;
    overflow: hidden;
    font-size: 11px;
    line-height: 1.35;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
  body[data-page="stationery"] .product-card .product-price { font-size: 12px; }
  body[data-page="stationery"] .product-card-actions { padding: 5px 8px 8px; gap: 5px; }
  body[data-page="stationery"] .btn-add,
  body[data-page="stationery"] .btn-wa-quick { min-height: 42px; font-size: 10px; }

  .newsletter-band { padding: 28px 0; }
  body[data-page="home"] .newsletter-band { padding-top: 28px; }
  .footer { padding-top: 30px; }
  .footer-inner { gap: 14px; margin-bottom: 22px; }
  .footer-brand p { font-size: 10.5px; line-height: 1.45; }
  .footer-col { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 10px; }
  .footer-col h4 { margin-bottom: 7px; font-size: 9px; }
  .footer-col a { margin-bottom: 6px; font-size: 10.5px; }
  .footer-bottom { padding-top: 14px; }
  .footer-bottom p { font-size: 9px; }
}

/* ========================================================================
   SITE-WIDE VISUAL QA PASS — 2026-07-13

   This final cascade normalises card media, vertical rhythm and interaction
   motion across every public page. Keep it after the density rules above so
   legacy declarations in style.css cannot reintroduce uneven image frames.
   ======================================================================== */

:root {
  --surface-violet: #f8f7fc;
  --surface-violet-strong: #f2effb;
  --card-border: #e4e1ed;
  --card-radius: 14px;
  --card-shadow: 0 1px 2px rgba(31, 25, 74, .04), 0 8px 24px rgba(31, 25, 74, .045);
  --card-shadow-hover: 0 2px 4px rgba(31, 25, 74, .05), 0 14px 32px rgba(31, 25, 74, .08);
}

/* Stable page paint: decorative animation and blur were making scroll feel
   heavier on ordinary laptops without adding useful information. */
.hero-deco-blob,
.hero-deco-ring,
.hero-deco-dot,
.wa-fab-ping {
  animation: none !important;
  will-change: auto !important;
}

.section-light,
.section-dark,
.section-gray,
.home-v2-section {
  contain: none;
}

.section-gray,
.home-v2-services,
.home-v2-process,
.home-v2-faq {
  background: var(--surface-violet);
}

.section-gray {
  border-block: 1px solid rgba(111, 86, 217, .08);
}

/* Headings share one readable measure and one spacing rhythm. */
.section-header {
  width: 100%;
  max-width: 760px;
}

.section-header .section-sub {
  max-width: 680px;
  margin-inline: auto;
}

.section-eyebrow.as-chip {
  border: 1px solid rgba(111, 86, 217, .16);
  background: var(--surface-violet-strong);
  color: var(--purple-dark);
}

/* Service cards: equal visual frames, equal content padding and clean rows.
   max-width:none is intentional — the global img max-width:100% rule was
   clipping the full-bleed image and created the white strip in the screenshot. */
.stamp-types-grid,
.services-grid,
.steps-grid,
.values-grid {
  align-items: stretch;
}

.visual-service-grid .stamp-type-card,
.visual-service-grid .service-card {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 100%;
  flex-direction: column;
  overflow: hidden;
  padding: 0 24px 24px;
  border-color: var(--card-border);
  border-radius: var(--card-radius);
  background: #fff;
  box-shadow: var(--card-shadow);
}

.visual-service-grid .service-card-photo {
  display: block;
  width: calc(100% + 48px);
  max-width: none;
  height: auto;
  flex: 0 0 auto;
  margin: 0 -24px 20px;
  aspect-ratio: 16 / 9;
  border: 0;
  border-bottom: 1px solid var(--card-border);
  background: #f4f2f8;
  object-fit: cover;
  object-position: center;
}

.visual-service-grid .service-card-photo.contain {
  object-fit: contain;
  padding: 8px;
  background: #fff;
}

.visual-service-grid .stamp-type-card h3,
.visual-service-grid .service-card h3 {
  margin: 0 0 7px;
  color: var(--text-1);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
}

.visual-service-grid .stamp-type-card > p,
.visual-service-grid .service-card > p {
  margin: 0;
  color: var(--text-3);
  font-size: 13px;
  line-height: 1.58;
}

.visual-service-grid .service-features,
.visual-service-grid .stamp-features {
  margin-top: 14px;
}

.visual-service-grid .btn,
.visual-service-grid .stamp-price,
.visual-service-grid .service-card-price {
  margin-top: auto;
}

/* All common card families now use the same border, radius and restrained
   hover. Transform is desktop-pointer only below, so scrolling never fights
   a hover animation on touch devices. */
.category-card,
.product-card,
.stamp-type-card,
.service-card,
.value-card,
.step-card,
.faq-item,
.form-card,
.real-stamp-model,
.home-v2-service-card,
.home-v2-proof-points > div,
.home-v2-process-grid li {
  border-color: var(--card-border);
  border-radius: var(--card-radius);
}

.category-card,
.product-card,
.stamp-type-card,
.service-card,
.value-card,
.step-card,
.home-v2-service-card {
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.product-card,
.category-card,
.home-v2-service-card {
  overflow: hidden;
}

.product-card-img,
.cat-photo {
  overflow: hidden;
  background: #f5f3f9;
}

.product-card-img > img,
.cat-photo > img,
.home-v2-service-card > img {
  width: 100%;
  object-position: center;
}

.step-card,
.value-card,
.home-v2-process-grid li,
.home-v2-proof-points > div {
  height: 100%;
  background: #fff;
}

.form-control,
.catalog-search,
.catalog-sort {
  border-color: var(--card-border);
  border-radius: 10px;
  background: #fff;
}

.faq-item {
  overflow: hidden;
  background: #fff;
}

@media (hover: hover) and (pointer: fine) {
  .category-card:hover,
  .product-card:hover,
  .visual-service-grid .stamp-type-card:hover,
  .visual-service-grid .service-card:hover,
  .home-v2-service-card:hover {
    transform: translateY(-2px);
    border-color: rgba(111, 86, 217, .34);
    box-shadow: var(--card-shadow-hover);
  }

  .visual-service-grid .stamp-type-card:hover .service-card-photo,
  .visual-service-grid .service-card:hover .service-card-photo {
    filter: saturate(1.025);
  }
}

/* Contact columns now finish together; the previous generic handshake photo
   made the left column much taller while the map ended halfway up the page. */
.contact-map-wrap iframe {
  display: block;
  height: 540px;
}

@media (max-width: 768px) {
  .contact-map-wrap iframe {
    height: 320px;
  }
}

/* Catalogue records without uploaded photos should look intentional, not like
   giant empty image panels. Real product photography keeps the normal frame. */
.product-card.no-product-image .product-card-img {
  height: 112px;
  min-height: 0;
  aspect-ratio: auto;
  border-bottom: 1px solid var(--card-border);
}

.product-card.no-product-image .product-card-img > svg,
.product-card.no-product-image .product-card-img > div > svg {
  width: 38px;
  height: 38px;
}

@media (max-width: 640px) {
  body[data-page="stationery"] .product-card.no-product-image .product-card-img,
  body[data-page="stamps"] .product-card.no-product-image .product-card-img,
  body[data-page="home"] .product-card.no-product-image .product-card-img {
    height: 78px;
    min-height: 0;
    aspect-ratio: auto;
  }
}

/* Reserve the injected navigation shell before main.js runs. Without this the
   page shifted down after DOMContentLoaded by the topbar + navigation height. */
#nav-placeholder:empty {
  display: block;
  height: 92px;
  background: linear-gradient(to bottom, var(--dark-bg) 0 28px, #fff 28px 100%);
  border-bottom: 1px solid var(--border);
}

@media (max-width: 640px) {
  #nav-placeholder:empty {
    height: 80px;
  }

  /* Dense, but still comfortably readable and tappable. */
  .home-v2-category-pills a {
    min-height: 32px;
    padding: 6px 9px;
    font-size: 10px;
  }

  .home-v2-actions .btn,
  .home-v2-final-actions .btn {
    min-height: 44px;
  }

  .home-v2-service-copy em,
  .home-v2-proof-points p,
  .home-v2-process-grid p,
  .home-v2-brief-card p,
  .home-v2-brief-card a,
  .home-v2-area-links a,
  .home-v2-faq-list details p,
  .visual-service-grid .stamp-type-card > p,
  .visual-service-grid .service-card > p {
    font-size: 10.5px;
  }
}

@media (max-width: 980px) and (min-width: 641px) {
  .stamp-types-grid,
  .services-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }

  .visual-service-grid .stamp-type-card,
  .visual-service-grid .service-card {
    padding: 0 20px 20px;
  }

  .visual-service-grid .service-card-photo {
    width: calc(100% + 40px);
    margin: 0 -20px 17px;
  }
}

@media (max-width: 640px) {
  /* Compact image-left service cards. Exact dimensions are repeated here so
     the desktop full-bleed fix cannot leak into the phone layout. */
  .visual-service-grid .stamp-type-card,
  .visual-service-grid .service-card {
    display: grid;
    grid-template-columns: 108px minmax(0, 1fr);
    grid-auto-rows: min-content;
    align-content: start;
    min-height: 136px;
    padding: 10px;
    gap: 0 11px;
    border-radius: 11px;
    box-shadow: 0 1px 8px rgba(31, 25, 74, .055);
  }

  .visual-service-grid .service-card-photo {
    grid-column: 1;
    grid-row: 1 / span 12;
    align-self: stretch;
    width: 108px;
    max-width: 108px;
    height: calc(100% + 20px);
    min-height: 136px;
    max-height: 184px;
    margin: -10px 0 -10px -10px;
    aspect-ratio: auto;
    border: 0;
    border-right: 1px solid var(--card-border);
  }

  .visual-service-grid .stamp-type-card > :not(.service-card-photo),
  .visual-service-grid .service-card > :not(.service-card-photo) {
    grid-column: 2;
  }

  .visual-service-grid .stamp-type-card h3,
  .visual-service-grid .service-card h3 {
    margin-bottom: 4px;
    font-size: 13px;
    line-height: 1.2;
  }

  .visual-service-grid .stamp-type-card > p,
  .visual-service-grid .service-card > p {
    display: -webkit-box;
    overflow: hidden;
    font-size: 9.75px;
    line-height: 1.4;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
  }

  .section-gray { border-block-color: rgba(111, 86, 217, .07); }
  .section-header { max-width: 100%; }
  .section-eyebrow.as-chip { padding: 4px 8px; }
}

@media (prefers-reduced-motion: reduce), (hover: none), (pointer: coarse) {
  .category-card,
  .product-card,
  .stamp-type-card,
  .service-card,
  .value-card,
  .step-card,
  .home-v2-service-card,
  .home-v2-service-card img,
  .home-v2-hero-photo img {
    transition: none !important;
    transform: none !important;
    filter: none !important;
  }
}

/* Homepage composition repair. The text-only proof block still inherited the
   old two-column media layout, so half the section rendered as a giant empty
   white panel. Turn it into an intentional copy + proof-card composition and
   tighten the oversized headings/sections into one consistent rhythm. */
body[data-page="home"] .home-v2-section {
  padding: clamp(56px, 5.5vw, 76px) 0;
}

body[data-page="home"] .home-v2-section-head h2,
body[data-page="home"] .home-v2-proof-copy h2,
body[data-page="home"] .home-v2-area-copy h2,
body[data-page="home"] .home-v2-faq-intro h2,
body[data-page="home"] .home-v2-final-cta h2 {
  font-size: clamp(34px, 3.3vw, 46px);
  font-weight: 800;
  letter-spacing: -.035em;
}

body[data-page="home"] .home-v2-section-head {
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr);
  gap: 42px;
  margin-bottom: 30px;
}

body[data-page="home"] .home-v2-trust-item {
  min-height: 106px;
  padding-block: 24px 22px;
}

body[data-page="home"] .home-v2-trust-item::before {
  top: 30px;
}

body[data-page="home"] .home-v2-proof-grid-text-only {
  display: block;
  width: 100%;
  max-width: var(--max-w);
}

body[data-page="home"] .home-v2-proof-grid-text-only .home-v2-proof-copy {
  display: grid;
  grid-template-columns: minmax(300px, .78fr) minmax(480px, 1.22fr);
  grid-template-rows: auto auto auto 1fr;
  gap: 0 72px;
  align-items: start;
}

body[data-page="home"] .home-v2-proof-copy > .home-v2-eyebrow,
body[data-page="home"] .home-v2-proof-copy > h2,
body[data-page="home"] .home-v2-proof-copy > p,
body[data-page="home"] .home-v2-proof-copy > .home-v2-text-link {
  grid-column: 1;
}

body[data-page="home"] .home-v2-proof-copy > p:not(.home-v2-eyebrow) {
  margin-top: 18px;
  font-size: 15px;
  line-height: 1.68;
}

body[data-page="home"] .home-v2-proof-copy > .home-v2-text-link {
  align-self: end;
  justify-self: start;
  margin-top: 26px;
}

body[data-page="home"] .home-v2-proof-points {
  grid-column: 2;
  grid-row: 1 / span 4;
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  width: 100%;
  margin: 0;
  border: 0;
}

body[data-page="home"] .home-v2-proof-points > div {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  align-items: start;
  gap: 18px;
  min-height: 0;
  height: auto;
  padding: 19px 20px;
  border: 1px solid var(--card-border);
  border-radius: 12px;
  background: var(--surface-violet);
}

body[data-page="home"] .home-v2-proof-points span {
  margin: 0;
  font-size: 18px;
}

body[data-page="home"] .home-v2-proof-points p {
  font-size: 13px;
  line-height: 1.55;
}

@media (max-width: 900px) {
  body[data-page="home"] .home-v2-proof-grid-text-only .home-v2-proof-copy {
    display: block;
  }

  body[data-page="home"] .home-v2-proof-points {
    margin-top: 28px;
  }

  body[data-page="home"] .home-v2-proof-copy > .home-v2-text-link {
    margin-top: 22px;
  }
}

@media (max-width: 640px) {
  body[data-page="home"] .home-v2-section {
    padding: 26px 0;
  }

  body[data-page="home"] .home-v2-section-head h2,
  body[data-page="home"] .home-v2-proof-copy h2,
  body[data-page="home"] .home-v2-area-copy h2,
  body[data-page="home"] .home-v2-faq-intro h2,
  body[data-page="home"] .home-v2-final-cta h2 {
    font-size: clamp(24px, 7vw, 29px);
    line-height: 1.08;
  }

  body[data-page="home"] .home-v2-proof-copy > p:not(.home-v2-eyebrow) {
    margin-top: 10px;
    font-size: 11.5px;
    line-height: 1.5;
  }

  body[data-page="home"] .home-v2-proof-points {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    margin-top: 16px;
  }

  body[data-page="home"] .home-v2-proof-points > div {
    display: block;
    padding: 11px;
  }

  body[data-page="home"] .home-v2-proof-points > div:last-child {
    grid-column: 1 / -1;
  }

  body[data-page="home"] .home-v2-proof-points span {
    font-size: 13px;
  }

  body[data-page="home"] .home-v2-proof-points p {
    margin-top: 3px;
    font-size: 10px;
    line-height: 1.4;
  }
}

/* Use the content count, not one generic grid, to avoid unfinished orphan
   rows. Detailed print/stamp cards stay three-up; simple taxonomies can scan
   four-up on a wide laptop and two-up on a phone. */
@media (min-width: 1101px) {
  .signage-visuals,
  .packaging-visuals,
  .banner-visuals,
  .specialist-print-visuals {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
  }

  .signage-visuals .stamp-type-card,
  .packaging-visuals .stamp-type-card,
  .banner-visuals .stamp-type-card,
  .specialist-print-visuals .service-card {
    padding: 0 18px 18px;
  }

  .signage-visuals .service-card-photo,
  .packaging-visuals .service-card-photo,
  .banner-visuals .service-card-photo,
  .specialist-print-visuals .service-card-photo {
    width: calc(100% + 36px);
    margin: 0 -18px 16px;
  }
}

@media (max-width: 1100px) and (min-width: 981px) {
  .signage-visuals,
  .packaging-visuals,
  .banner-visuals,
  .specialist-print-visuals {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
  }
}

@media (max-width: 640px) {
  .signage-visuals,
  .sticker-visuals,
  .packaging-visuals,
  .banner-visuals {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .signage-visuals .stamp-type-card,
  .sticker-visuals .stamp-type-card,
  .packaging-visuals .stamp-type-card,
  .banner-visuals .stamp-type-card {
    display: flex;
    min-height: 0;
    padding: 0 9px 10px;
    border-radius: 10px;
  }

  .signage-visuals .service-card-photo,
  .sticker-visuals .service-card-photo,
  .packaging-visuals .service-card-photo,
  .banner-visuals .service-card-photo {
    order: -1;
    width: calc(100% + 18px);
    max-width: none;
    height: auto;
    min-height: 0;
    max-height: none;
    margin: 0 -9px 9px;
    aspect-ratio: 16 / 9;
    border: 0;
    border-bottom: 1px solid var(--card-border);
  }

  .signage-visuals .stamp-type-card h3,
  .sticker-visuals .stamp-type-card h3,
  .packaging-visuals .stamp-type-card h3,
  .banner-visuals .stamp-type-card h3 {
    margin: 0 0 3px;
    font-size: 12px;
    line-height: 1.2;
  }

  .signage-visuals .stamp-type-card > p,
  .sticker-visuals .stamp-type-card > p,
  .packaging-visuals .stamp-type-card > p,
  .banner-visuals .stamp-type-card > p {
    display: -webkit-box;
    overflow: hidden;
    font-size: 10.5px;
    line-height: 1.38;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }

  .visual-service-grid .stamp-type-card > p,
  .visual-service-grid .service-card > p,
  body[data-page="home"] .home-v2-proof-points p {
    font-size: 10.5px;
  }
}