/* Calyx Core — mobile optimisation layer v20261005-1
   Purpose: responsive polish without changing desktop layouts. */

/* Baseline resilience */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { min-width: 320px; overflow-x: hidden; }
img, svg, video, canvas { max-width: 100%; }
img, video { height: auto; }
button, input, select, textarea { font: inherit; }
.calyx-page, .calyx-page * { min-width: 0; }

@media (max-width: 860px) {
  :root {
    --mobile-gutter: 20px;
    --mobile-section-y: 56px;
    --mobile-card-radius: 18px;
  }

  /* Global spacing and typography */
  .calyx-page { overflow-x: clip !important; }
  .calyx-page section,
  .calyx-page header {
    padding-left: var(--mobile-gutter) !important;
    padding-right: var(--mobile-gutter) !important;
  }
  .calyx-page h1 {
    font-size: clamp(42px, 12vw, 58px) !important;
    line-height: .96 !important;
    letter-spacing: -.035em !important;
    overflow-wrap: anywhere;
  }
  .calyx-page h2 {
    font-size: clamp(32px, 9vw, 44px) !important;
    line-height: 1 !important;
    letter-spacing: -.028em !important;
    overflow-wrap: anywhere;
  }
  .calyx-page h3 {
    font-size: clamp(25px, 7.4vw, 32px) !important;
    line-height: 1.05 !important;
    letter-spacing: -.022em !important;
  }
  .calyx-page p,
  .calyx-page li {
    line-height: 1.62 !important;
  }
  .calyx-page p { max-width: 68ch; }

  /* Prevent inline desktop grids from squeezing content */
  .calyx-page [style*="grid-template-columns"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .calyx-page [style*="display:grid"],
  .calyx-page [style*="display: grid"] { min-width: 0 !important; }
  .calyx-page [style*="display:flex"],
  .calyx-page [style*="display: flex"] { min-width: 0 !important; }

  /* Header */
  .ch-nav {
    height: 60px !important;
    padding: 0 16px !important;
    background: rgba(249,247,243,.90) !important;
    -webkit-backdrop-filter: blur(14px) saturate(1.08);
    backdrop-filter: blur(14px) saturate(1.08);
  }
  .ch-nav > a[aria-label="Calyx Core home"] img {
    height: 23px !important;
    width: auto !important;
  }
  .ch-burger {
    display: inline-flex !important;
    width: 44px !important;
    height: 44px !important;
    flex: 0 0 44px !important;
  }
  #ch-mobile {
    top: 60px !important;
    padding: 8px 18px calc(28px + env(safe-area-inset-bottom)) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    gap: 0 !important;
  }
  #ch-mobile .ch-m-link {
    padding: 14px 2px !important;
    font-size: clamp(25px, 8vw, 31px) !important;
    line-height: 1.05 !important;
  }
  body.calyx-mobile-menu-open { overflow: hidden !important; touch-action: none; }

  /* Touch targets */
  .calyx-page a,
  .calyx-page button { -webkit-tap-highlight-color: transparent; }
  .calyx-page button,
  .calyx-page input[type="button"],
  .calyx-page input[type="submit"],
  .calyx-page [role="button"] { min-height: 44px; }

  /* Inputs: 16px avoids iOS zoom */
  .calyx-page input,
  .calyx-page select,
  .calyx-page textarea {
    font-size: 16px !important;
    max-width: 100% !important;
  }
  .calyx-page textarea { min-height: 120px; }

  /* Cards and media */
  .cm-card,
  .tl-card,
  .r-card,
  .r-feature {
    border-radius: var(--mobile-card-radius) !important;
  }
  .cm-media,
  .cm-media img,
  .cm-media-img { max-width: 100% !important; }
  .cm-media-img { object-fit: cover; }

  /* Motion on phones should be lighter */
  .cm-reveal,
  .cm-reveal-item {
    transform: translateY(12px) !important;
  }
  .cm-reveal.cm-in,
  .cm-reveal-item.cm-in { transform: translateY(0) !important; }
  .svc-glass::after { display: none !important; }

  /* Marquee */
  .calyx-track { gap: 10px !important; animation-duration: 38s !important; }
  .calyx-track > * { width: 145px !important; }
  .calyx-track img {
    max-width: 112px !important;
    max-height: 36px !important;
  }

  /* Tables, code, long content */
  table { max-width: 100%; }
  .r-table,
  .table-wrap,
  pre {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    max-width: 100% !important;
  }
  pre { white-space: pre; }
  code { overflow-wrap: normal; }

  /* Sticky mobile action area */
  .sticky-cta {
    gap: 8px !important;
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom)) !important;
    box-shadow: 0 -8px 28px rgba(32,32,32,.07);
  }
  .sticky-cta a {
    height: 46px !important;
    font-size: 14px !important;
  }
  body.has-sticky-cta { padding-bottom: calc(64px + env(safe-area-inset-bottom)) !important; }

  /* Footer: keep columns readable rather than squeezed */
  footer [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  footer [style*="display:flex"] { flex-wrap: wrap !important; }
  footer { padding-bottom: calc(92px + env(safe-area-inset-bottom)) !important; }

  /* Long-form and legal */
  .legal-body h2 { font-size: 30px !important; margin-top: 42px !important; }
  .legal-body p,
  .legal-body ul { font-size: 16px !important; }

  /* Case studies hub */
  .case-hero { padding: 58px var(--mobile-gutter) 42px !important; }
  .case-hero-grid { gap: 30px !important; }
  .case-hero h1 { font-size: clamp(46px, 13vw, 58px) !important; margin: 14px 0 20px !important; }
  .case-hero p { font-size: 16px !important; line-height: 1.62 !important; }
  .case-index-row { padding: 13px 0 !important; }
  .case-work { padding: 0 var(--mobile-gutter) 58px !important; }
  .case-featured { border-radius: 20px !important; min-height: 0 !important; }
  .case-featured-media { min-height: 235px !important; }
  .case-featured-logo { width: min(76%, 330px) !important; }
  .case-featured-copy { padding: 26px 22px 28px !important; }
  .case-featured h2 { font-size: 42px !important; }
  .case-points { margin-bottom: 26px !important; }
  .case-points li { align-items: flex-start !important; line-height: 1.45 !important; }
  .case-grid { gap: 16px !important; margin-top: 16px !important; }
  .case-card { border-radius: 20px !important; min-height: 0 !important; }
  .case-card-media { aspect-ratio: 4 / 3 !important; }
  .case-card-copy { padding: 23px 21px 24px !important; }
  .case-card h2 { font-size: 38px !important; }
  .case-mini-points { gap: 6px !important; margin-bottom: 22px !important; }
  .case-mini-points span { font-size: 8.5px !important; padding: 7px 9px !important; }
  .case-note { padding: 0 var(--mobile-gutter) 58px !important; }
  .case-note-item { padding: 22px 2px !important; }
  .case-note-item b { font-size: 26px !important; }
  .case-cta { padding: 0 var(--mobile-gutter) 58px !important; }
  .case-cta-inner { padding: 28px 22px !important; border-radius: 20px !important; }
  .case-cta h2 { font-size: 36px !important; }
  .case-cta a { width: 100% !important; justify-content: center !important; }
}

@media (max-width: 560px) {
  :root { --mobile-gutter: 18px; --mobile-section-y: 48px; }

  .calyx-page section,
  .calyx-page header {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }
  .calyx-page h1 { font-size: clamp(40px, 12.8vw, 52px) !important; }
  .calyx-page h2 { font-size: clamp(30px, 9.5vw, 39px) !important; }
  .calyx-page h3 { font-size: clamp(24px, 7.5vw, 29px) !important; }
  .calyx-page p,
  .calyx-page li { font-size: 15.5px; }

  .ch-nav { padding: 0 14px !important; }
  .ch-nav > a[aria-label="Calyx Core home"] img { height: 22px !important; }
  #ch-mobile { padding-left: 16px !important; padding-right: 16px !important; }

  /* Stack primary inline CTA groups cleanly on narrow devices */
  .calyx-page .r-cta-row,
  .calyx-page [class*="cta-row"] {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }
  .calyx-page .r-cta-row a,
  .calyx-page [class*="cta-row"] a { width: 100% !important; justify-content: center !important; }

  .sticky-cta { padding-left: 10px !important; padding-right: 10px !important; }
  .sticky-cta a { padding-left: 10px !important; padding-right: 10px !important; }

  .case-hero { padding-top: 50px !important; }
  .case-featured-media { min-height: 210px !important; }
  .case-featured h2 { font-size: 39px !important; }
  .case-card h2 { font-size: 35px !important; }
}

@media (max-width: 380px) {
  :root { --mobile-gutter: 16px; }
  .calyx-page h1 { font-size: 39px !important; }
  .calyx-page h2 { font-size: 30px !important; }
  .ch-nav > a[aria-label="Calyx Core home"] img { height: 20px !important; }
  .sticky-cta a { font-size: 13px !important; }
  .calyx-track > * { width: 130px !important; }
  .calyx-track img { max-width: 100px !important; }
}

@media (orientation: landscape) and (max-height: 520px) and (max-width: 900px) {
  #ch-mobile { padding-top: 4px !important; }
  #ch-mobile .ch-m-link { padding: 8px 2px !important; font-size: 22px !important; }
  #ch-mobile > a:last-child { margin-top: 10px !important; height: 46px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .calyx-track { animation-play-state: paused !important; }
}