/* ============================================================
   PRISM SALES CORPORATION — Responsive Stylesheet
   Breakpoints:
     xl   : ≥ 1440px
     lg   : 1200px – 1439px
     md   : 900px  – 1199px
     sm   : 600px  – 899px
     xs   : 400px  – 599px
     xxs  : ≤ 399px
   ============================================================ */

/* ── Global overflow lock — prevents horizontal scroll on all devices ──
   CRITICAL: Do NOT put overflow-x:hidden on html or body.
   overflow-x:hidden on body promotes overflow-y to auto, making body a scroll
   container. position:sticky then sticks to body (not the viewport), and since
   body is always exactly content-height, it never scrolls → sticky never fires.
   FIX: use overflow-x:clip on #root. clip ≠ hidden — it prevents horizontal
   scroll without creating a scroll container, so sticky's ancestor is still
   the viewport and it fires correctly. */
#root {
  overflow-x: clip;
}
html, body {
  max-width: 100%;
}

/* Every direct child of body must not exceed viewport width
   NOTE: do NOT add overflow-x here — breaks position:sticky inside children */
body > * {
  max-width: 100%;
}

/* ── Base fluid helpers ─────────────────────────────────── */
img, video, iframe {
  max-width: 100%;
  height: auto;
}

/* ── XL: very wide screens ≥ 1440px ────────────────────── */
@media (min-width: 1440px) {
  .container { max-width: 1440px; padding: 0 64px; }

  /* Banner stays full width, logo overlay scales */
  .banner-logo-overlay { width: 6%; min-width: 72px; }

  /* Product card grid — allow 4 cols */
  .cat-card-grid { grid-template-columns: repeat(4, 1fr) !important; }

  /* Hero heading */
  .hero-h1 { font-size: 128px; }

  /* Section headings */
  .sec-title { font-size: clamp(40px, 4vw, 64px); }
}

/* ── LG: 1200px – 1439px ────────────────────────────────── */
@media (max-width: 1439px) and (min-width: 1200px) {
  .container { padding: 0 48px; }
  .cat-card-grid { grid-template-columns: repeat(3, 1fr) !important; }
  .sec-title { font-size: clamp(36px, 3.5vw, 56px); }
}

/* ── MD: 900px – 1199px (large tablet / small laptop) ───── */
@media (max-width: 1199px) and (min-width: 900px) {
  .container { padding: 0 32px; }

  /* Nav — tighten spacing */
  .nav-bar-sticky .container { padding: 14px 32px; }

  /* Hero */
  .hero-h1 { font-size: clamp(48px, 6vw, 80px) !important; }

  /* Banner image — full width no crop */
  .banner-swipe img { width: 100%; height: auto; object-fit: contain; }

  /* Product grids */
  .cat-card-grid        { grid-template-columns: repeat(3, 1fr) !important; gap: 16px !important; }
  .feat-grid            { grid-template-columns: repeat(3, 1fr) !important; gap: 20px !important; }
  .prod-related-grid    { grid-template-columns: repeat(3, 1fr) !important; }

  /* Product card image — consistent height */
  .product-img          { height: 200px !important; }

  /* Home sections */
  .pl-grid              { grid-template-columns: 1fr 1fr !important; gap: 40px !important; }
  .cl-outer             { grid-template-columns: 1fr 2fr !important; }
  .cl-inner             { grid-template-columns: repeat(3, 1fr) !important; }
  .vp-grid              { grid-template-columns: repeat(3, 1fr) !important; }
  .testi-grid           { grid-template-columns: repeat(3, 1fr) !important; }
  .rfq-grid             { grid-template-columns: 1.2fr 1fr !important; }
  .cta-grid             { grid-template-columns: 1.5fr 1fr !important; }

  /* About */
  .abt-main             { grid-template-columns: 1fr 1fr !important; gap: 48px !important; }
  .abt-loc              { grid-template-columns: 1fr 1fr 1fr !important; }
  .abt-cta              { grid-template-columns: 1.5fr 1fr !important; }

  /* Footer */
  .ft-grid              { grid-template-columns: 2fr 1fr 1fr !important; }

  /* Pricing grid */
  .price-grid           { grid-template-columns: repeat(2, 1fr) !important; }

  /* Section spacing */
  section.container     { margin-top: 80px; }
}

/* ── SM: 600px – 899px (tablet portrait) ────────────────── */
@media (max-width: 899px) and (min-width: 600px) {
  .container { padding: 0 24px; }
  .nav-bar-sticky .container { padding: 12px 24px; }

  /* Nav */
  .nav-links  { display: none !important; }
  .nav-burger { display: flex !important; align-items: center; gap: 10px; }

  /* Logo — keep single line */
  .logo-name  { font-size: 16px !important; white-space: nowrap; }

  /* Banner — full image */
  .banner-swipe img { width: 100%; height: auto; object-fit: contain; }

  /* Banner arrows */
  .banner-arrow { width: 36px !important; height: 36px !important; font-size: 16px !important; }

  /* Hero heading */
  .hero-h1 { font-size: clamp(36px, 6vw, 64px) !important; line-height: 0.9 !important; }

  /* Product cards — 2 col */
  .cat-card-grid        { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }
  .feat-grid            { grid-template-columns: repeat(2, 1fr) !important; gap: 16px !important; }
  .prod-related-grid    { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }

  /* Consistent product image height */
  .product-img          { height: 180px !important; min-height: 180px !important; }
  .product-img img      { width: 100% !important; height: 100% !important; object-fit: contain !important; }

  /* Product card text */
  .product-card-name    { font-size: 15px !important; }
  .product-card-price   { font-size: 13px !important; }

  /* Home sections */
  .pl-grid              { grid-template-columns: 1fr !important; gap: 32px !important; }
  .pl-sticky            { position: static !important; }
  .cl-outer             { grid-template-columns: 1fr !important; gap: 20px !important; }
  .cl-inner             { grid-template-columns: repeat(3, 1fr) !important; }
  .vp-grid              { grid-template-columns: repeat(2, 1fr) !important; }
  .cert-grid            { grid-template-columns: repeat(2, 1fr) !important; }
  .testi-grid           { grid-template-columns: 1fr 1fr !important; }
  .testi-grid > div     { border-right: none !important; border-bottom: 1px solid var(--border) !important; }
  .rfq-grid             { grid-template-columns: 1fr !important; }
  .rfq-right            { display: none !important; }
  .cta-grid             { grid-template-columns: 1fr !important; gap: 24px !important; }
  .proj-row             { grid-template-columns: 40px 1fr 80px !important; gap: 12px !important; }
  .proj-hide            { display: none !important; }

  /* About */
  .abt-main             { grid-template-columns: 1fr !important; gap: 32px !important; }
  .abt-img              { display: none !important; }
  .abt-vals             { grid-template-columns: 1fr 1fr !important; }
  .abt-stats            { grid-template-columns: repeat(3, 1fr) !important; }
  .abt-loc              { grid-template-columns: 1fr 1fr !important; }
  .abt-loc > div        { border-right: none !important; border-bottom: 1px solid var(--border) !important; }
  .abt-cta              { grid-template-columns: 1fr !important; gap: 20px !important; }

  /* Contact */
  .con-grid             { grid-template-columns: 1fr !important; gap: 0 !important; }
  .con-hdr              { grid-template-columns: 1fr 1fr !important; }
  .con-hdr-hide         { display: none !important; }

  /* Group */
  .group-grid           { grid-template-columns: 1fr !important; }

  /* Certifications */
  .cert-pdf-grid        { grid-template-columns: repeat(2, 1fr) !important; }

  /* Pricing list */
  .price-grid           { grid-template-columns: repeat(2, 1fr) !important; }

  /* Footer */
  .ft-grid              { grid-template-columns: 1fr 1fr !important; gap: 32px !important; }
  .ft-brand             { grid-column: span 2 !important; font-size: clamp(60px, 14vw, 120px) !important; }

  /* Mega menu */
  .mm-grid              { grid-template-columns: 1fr !important; }
  .mm-desc              { display: none !important; }
  .mm-contact           { display: none !important; }
  .mm-cats              { grid-template-columns: repeat(2, 1fr) !important; }

  /* Hero scroll */
  .hs-hdr               { grid-template-columns: 1fr 1fr !important; }
  .hs-hdr-hide          { display: none !important; }
  .hs-rail              { display: none !important; }
  .hs-lines-grid        { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; padding: 0 12px !important; }
  .hs-footer-mid        { display: none !important; }
  .hs-act5 button       { padding: 14px 22px !important; font-size: 12px !important; }

  /* Section spacing */
  section.container     { margin-top: 60px; }

  /* Careers */
  .careers-grid         { grid-template-columns: 1fr !important; }

  /* Product detail */
  .prod-hero-grid       { grid-template-columns: 1fr !important; gap: 24px !important; }
  .prod-spec-grid       { grid-template-columns: 1fr !important; }
}

/* ── XS: 400px – 599px (mobile landscape / large phone) ─── */
@media (max-width: 599px) and (min-width: 400px) {
  .container { padding: 0 16px; }
  .nav-bar-sticky .container { padding: 10px 16px; }

  /* Logo */
  .logo-name  { font-size: 14px !important; white-space: nowrap; }
  .logo-tagline { display: none !important; }

  /* Banner */
  .banner-swipe img { width: 100%; height: auto; object-fit: contain; }
  .banner-arrow     { width: 32px !important; height: 32px !important; font-size: 14px !important; }

  /* Hero */
  .hero-h1 { font-size: clamp(30px, 8vw, 48px) !important; line-height: 0.9 !important; }

  /* Tagline hero */
  .hero-tagline { font-size: clamp(14px, 3.5vw, 20px) !important; margin-bottom: 20px !important; }

  /* Product cards — 2 col on larger phones, 1 col on small */
  .cat-card-grid        { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
  .feat-grid            { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
  .prod-related-grid    { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }

  /* Product image — same height across all cards */
  .product-img          { height: 150px !important; min-height: 150px !important; }
  .product-img img      { width: 100% !important; height: 100% !important; object-fit: contain !important; padding: 8px !important; }
  .product-img .label   { font-size: 8px !important; }

  /* Product card padding */
  .product-card-body    { padding: 12px !important; }
  .product-card-name    { font-size: 13px !important; line-height: 1.3 !important; }
  .product-card-price   { font-size: 12px !important; }
  .product-card-tags    { display: none !important; }

  /* Home sections */
  .pl-grid              { grid-template-columns: 1fr !important; }
  .pl-sticky            { position: static !important; }
  .cl-outer             { grid-template-columns: 1fr !important; }
  .cl-inner             { grid-template-columns: repeat(2, 1fr) !important; }
  .vp-grid              { grid-template-columns: repeat(2, 1fr) !important; }
  .cert-grid            { grid-template-columns: repeat(2, 1fr) !important; }
  .testi-grid           { grid-template-columns: 1fr !important; }
  .rfq-grid             { grid-template-columns: 1fr !important; }
  .rfq-right            { display: none !important; }
  .cta-grid             { grid-template-columns: 1fr !important; }
  .proj-row             { grid-template-columns: 32px 1fr !important; gap: 8px !important; }
  .proj-hide            { display: none !important; }

  /* Hero scroll */
  .hs-hdr               { grid-template-columns: 1fr 1fr !important; }
  .hs-hdr-hide          { display: none !important; }
  .hs-rail              { display: none !important; }
  .hs-lines-grid        { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; padding: 0 10px !important; }
  .hs-stamp             { display: none !important; }
  .hs-footer-mid        { display: none !important; }
  .hs-title-wrap h1     { font-size: clamp(72px, 20vw, 280px) !important; }
  .hs-act5 h2           { font-size: clamp(36px, 9vw, 80px) !important; }
  .hs-act5 button       { padding: 12px 16px !important; font-size: 11px !important; }

  /* About */
  .abt-main             { grid-template-columns: 1fr !important; }
  .abt-img              { display: none !important; }
  .abt-vals             { grid-template-columns: 1fr !important; }
  .abt-stats            { grid-template-columns: repeat(3, 1fr) !important; }
  .abt-loc              { grid-template-columns: 1fr !important; }
  .abt-cta              { grid-template-columns: 1fr !important; }

  /* Contact */
  .con-grid             { grid-template-columns: 1fr !important; }
  .con-hdr              { grid-template-columns: 1fr !important; }
  .con-hdr-hide         { display: none !important; }

  /* Footer */
  .ft-grid              { grid-template-columns: 1fr 1fr !important; gap: 24px !important; }
  .ft-brand             { grid-column: span 2 !important; font-size: clamp(48px, 12vw, 80px) !important; white-space: nowrap; overflow: hidden; }

  /* Certifications */
  .cert-pdf-grid        { grid-template-columns: 1fr !important; }
  .cert-grid            { grid-template-columns: repeat(2, 1fr) !important; }

  /* Pricing */
  .price-grid           { grid-template-columns: 1fr !important; }

  /* Section spacing */
  section.container     { margin-top: 48px; }

  /* Catalog */
  .cat-dense-wrap > div { min-width: 500px; }
  .cat-spec-row         { grid-template-columns: 50px 1fr !important; gap: 8px !important; }
  .cat-spec-row > div:nth-child(3),
  .cat-spec-row > div:nth-child(4) { display: none !important; }

  /* Product detail */
  .prod-hero-grid       { grid-template-columns: 1fr !important; gap: 20px !important; }
  .prod-spec-grid       { grid-template-columns: 1fr !important; }
  .prod-related-grid    { grid-template-columns: repeat(2, 1fr) !important; }

  /* Mega menu */
  .mm-grid              { grid-template-columns: 1fr !important; }
  .mm-desc              { display: none !important; }
  .mm-contact           { display: none !important; }
  .mm-cats              { grid-template-columns: 1fr !important; }

  /* Mobile nav font size */
  .mob-nav-item         { font-size: clamp(28px, 8vw, 44px) !important; }

  /* Input zoom fix iOS */
  input, textarea, select { font-size: 16px !important; }

  /* Timeline hover */
  .timeline-row:hover   { padding-left: 0 !important; padding-right: 0 !important; }

  /* Buttons */
  .btn { padding: 12px 16px !important; font-size: 10px !important; }
}

/* ── XXS: ≤ 399px (small phones) ────────────────────────── */
@media (max-width: 399px) {
  .container { padding: 0 12px; }
  .nav-bar-sticky .container { padding: 8px 12px; }

  /* Logo — trim for tiny screens */
  .logo-name     { font-size: 13px !important; white-space: nowrap; }
  .logo-tagline  { display: none !important; }
  .logo-mark     { width: 36px !important; height: 36px !important; }

  /* Banner */
  .banner-swipe img { width: 100%; height: auto; object-fit: contain; }
  .banner-arrow     { display: none !important; }

  /* Hero */
  .hero-h1      { font-size: clamp(26px, 9vw, 38px) !important; }
  .hero-tagline { display: none !important; }

  /* Product cards — single column */
  .cat-card-grid        { grid-template-columns: 1fr !important; gap: 8px !important; }
  .feat-grid            { grid-template-columns: 1fr !important; gap: 8px !important; }
  .prod-related-grid    { grid-template-columns: 1fr !important; gap: 8px !important; }

  /* Product image */
  .product-img          { height: 200px !important; min-height: 200px !important; }
  .product-img img      { width: 100% !important; height: 100% !important; object-fit: contain !important; padding: 12px !important; }

  /* Hero scroll */
  .hs-hdr               { grid-template-columns: 1fr 1fr !important; }
  .hs-hdr-hide          { display: none !important; }
  .hs-rail              { display: none !important; }
  .hs-stamp             { display: none !important; }
  .hs-footer-mid        { display: none !important; }
  .hs-lines-grid        { grid-template-columns: repeat(2, 1fr) !important; gap: 6px !important; padding: 0 8px !important; }
  .hs-title-wrap h1     { font-size: clamp(56px, 15vw, 280px) !important; }
  .hs-act5 h2           { font-size: clamp(30px, 8vw, 80px) !important; }
  .hs-cta               { padding: 0 12px !important; }
  .hs-act5 button       { padding: 11px 14px !important; font-size: 10px !important; width: 100% !important; }

  /* Home sections */
  .cl-inner             { grid-template-columns: 1fr !important; }
  .vp-grid              { grid-template-columns: 1fr !important; }
  .cert-grid            { grid-template-columns: 1fr !important; }
  .abt-stats            { grid-template-columns: 1fr 1fr !important; }
  .ft-grid              { grid-template-columns: 1fr !important; }
  .ft-brand             { grid-column: span 1 !important; font-size: clamp(40px, 10vw, 60px) !important; }

  /* Mobile nav */
  .mob-nav-item         { font-size: clamp(24px, 8vw, 36px) !important; padding: 16px 0 !important; }
  .mob-nav              { padding: 60px 16px 32px !important; }

  /* Section spacing */
  section.container     { margin-top: 40px; }

  /* Catalog */
  .cat-dense-wrap > div { min-width: 360px; }

  /* Pricing */
  .price-grid           { grid-template-columns: 1fr !important; }

  /* Input zoom fix */
  input, textarea, select { font-size: 16px !important; }

  /* Buttons stack */
  .btn-row              { flex-direction: column !important; gap: 10px !important; }
  .btn { width: 100% !important; justify-content: center !important; }
}

/* ── Universal image consistency ─────────────────────────── */

/* All product card images same height, never distorted */
.product-img {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  width: 100%;
}
.product-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Catalog card images */
.cat-card-img {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface);
}
.cat-card-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 8px;
}

/* Partner / brand logos */
.brand-logo img {
  width: 100%;
  height: 60px;
  object-fit: contain;
  display: block;
}

/* About page — prism logo image */
.abt-logo-img {
  width: 100%;
  height: auto;
  display: block;
  max-width: 300px;
  margin: 0 auto;
}

/* Group page — company logos */
.group-logo img {
  width: 100%;
  max-height: 80px;
  object-fit: contain;
  display: block;
}

/* Certification badge images */
.cert-badge img {
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
}

/* ── Touch targets — min 44×44px on mobile ───────────────── */
@media (max-width: 899px) {
  button, a, [role="button"] {
    min-height: 44px;
    min-width: 44px;
  }
  .nav-burger button { min-height: 44px; min-width: 44px; }
  .banner-dot-btn    { min-height: 44px !important; min-width: 44px !important; }
}

/* ── Footer — override inline styles on mobile ───────────── */
@media (max-width: 899px) {
  /* Footer element padding */
  footer { padding: 48px 0 24px !important; margin-top: 60px !important; }

  /* Force 1-col grid (inline style uses 4-col) */
  .ft-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
    margin-bottom: 40px !important;
  }

  /* Brand block full width */
  .ft-brand { grid-column: span 1 !important; }

  /* Giant wordmark — clamp tighter, allow overflow hidden */
  footer .container > div[style*="clamp(80px"] {
    font-size: clamp(40px, 10vw, 72px) !important;
    padding-top: 24px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
  }

  /* Footer bottom bar — stack on very small */
  footer .container > div[style*="space-between"] {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }

  /* Copyright text size */
  footer .container > div[style*="ALL RIGHTS"] {
    font-size: 9px !important;
  }
}

/* ── Body watermark — shrink on mobile ───────────────────── */
@media (max-width: 768px) {
  body::after {
    background-size: 200px auto !important;
    opacity: 0.06 !important;
  }
}

/* ── Mega menu — mobile padding & close button ───────────── */
@media (max-width: 768px) {
  /* Mega menu inner padding — was 120px 48px */
  .mm-inner { padding: 72px 16px 32px !important; }

  /* Close button reposition */
  .mm-close-btn { top: 16px !important; right: 16px !important; }

  /* Category rows — tighter */
  .mm-cats button { padding: 12px 0 !important; }
  .mm-cats button span[style*="font-size: 24"] { font-size: 18px !important; }
}

/* ── Nav bar — logo tagline hide on small screens ────────── */
@media (max-width: 480px) {
  .logo-tagline-row { display: none !important; }
}

/* ── Section headings — scale down on mobile ─────────────── */
@media (max-width: 599px) {
  .sec-title { font-size: clamp(24px, 7vw, 40px) !important; }
  .sec-num   { font-size: 9px !important; }

  /* Managing Partners / Directors headings */
  div[style*="f-display-black"][style*="clamp(28px"] {
    font-size: clamp(22px, 6vw, 32px) !important;
  }

  /* About partner cards — reduce padding */
  div[style*="44px 48px"] { padding: 24px 20px !important; }

  /* Partner name font */
  div[style*="font-size: 36"] { font-size: 24px !important; }
}

/* ── Print ───────────────────────────────────────────────── */
@media print {
  .nav-bar-sticky, .mob-nav, .banner-swipe, .tweaks-panel,
  .btn-primary, .rfq-inline, .cta-strip { display: none !important; }
  .container { max-width: 100%; padding: 0 16px; }
  body { font-size: 12pt; color: #000; background: #fff; }
}

/* ── Reduced motion ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}