/* Crystal Design: app-style mobile layer. Everything here is scoped to phones (max-width 767px). */

.cd-nav, .cd-sheet, .cd-sheet-bg, .cd-more, .cd-areas-btn, .cd-expand { display: none; }

@media (max-width: 767px) {
  html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
  body { -webkit-tap-highlight-color: transparent; overflow-x: hidden; padding-bottom: calc(68px + env(safe-area-inset-bottom)); animation: cdFade .3s ease backwards; }
  @keyframes cdFade { from { opacity: 0; } to { opacity: 1; } }
  main, footer { max-width: 100vw; overflow-x: clip; }

  /* tighter vertical rhythm so pages scroll less */
  main section.py-20 { padding-top: 2.25rem !important; padding-bottom: 2.25rem !important; }
  main section.py-16, main div.py-16 { padding-top: 1.75rem !important; padding-bottom: 1.75rem !important; }
  main section.py-14, main div.py-14 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
  main section.pt-20 { padding-top: 2rem !important; }
  main section.pb-20 { padding-bottom: 2rem !important; }
  main .mt-14 { margin-top: 1.5rem !important; }
  main .mt-12 { margin-top: 1.25rem !important; }
  main .mt-10 { margin-top: 1.25rem !important; }
  main .space-y-14 > :not([hidden]) ~ :not([hidden]) { margin-top: 1rem !important; }
  main .space-y-10 > :not([hidden]) ~ :not([hidden]) { margin-top: 1rem !important; }
  main h2.text-4xl, main h2.text-5xl, main h2.sm\:text-5xl { font-size: 1.7rem !important; line-height: 1.15 !important; }
  main h2.text-3xl { font-size: 1.45rem !important; line-height: 1.2 !important; }
  main h3.text-2xl { font-size: 1.2rem !important; }
  main section:first-child > div[class*="min-h-"] { min-height: 120px !important; padding-top: 1.25rem !important; padding-bottom: 1.25rem !important; }

  main section:first-child h1 { font-size: 2.15rem !important; line-height: 1.08 !important; }
  main section.relative.bg-white h1 { font-size: 2.15rem !important; line-height: 1.08 !important; }

  /* press feedback like a native app */
  main a, main button, footer a { touch-action: manipulation; }
  main a[class*="rounded"]:active, main button:active, .cd-nav a:active, .cd-nav button:active { transform: scale(.97); transition: transform .08s; }

  /* old floating buttons are replaced by the bottom bar */
  .fixed.bottom-5.right-5 { display: none !important; }

  /* ---------- bottom navigation ---------- */
  .cd-nav { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; height: calc(60px + env(safe-area-inset-bottom)); padding: 0 6px env(safe-area-inset-bottom); background: rgba(255,255,255,.96); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-top: 1px solid rgba(0,0,0,.08); box-shadow: 0 -6px 24px rgba(21,18,26,.08); align-items: stretch; justify-content: space-around; }
  .cd-nav > a, .cd-nav > button { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font: 600 10.5px/1 var(--font-rubik, system-ui, sans-serif); color: #4a4d55; background: none; border: 0; text-decoration: none; letter-spacing: .02em; text-transform: none; }
  .cd-nav svg { width: 22px; height: 22px; }
  .cd-nav .cd-on { color: #f4320b; }
  .cd-nav .cd-call { position: relative; flex: 0 0 64px; }
  .cd-nav .cd-call span.cd-bub { position: absolute; top: -18px; width: 54px; height: 54px; border-radius: 50%; background: linear-gradient(135deg,#f4320b,#ff6b3d); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 20px rgba(244,50,11,.45); border: 4px solid #fff; }
  .cd-nav .cd-call svg { width: 24px; height: 24px; }
  .cd-nav .cd-call em { font-style: normal; margin-top: 30px; color: #f4320b; }
  .cd-nav .cd-wa { color: #128c4a; }

  /* ---------- bottom sheets ---------- */
  .cd-sheet-bg { display: block; position: fixed; inset: 0; z-index: 80; background: rgba(21,18,26,.5); opacity: 0; pointer-events: none; transition: opacity .25s; }
  .cd-sheet { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; max-height: 82vh; overflow-y: auto; overscroll-behavior: contain; background: #fff; border-radius: 22px 22px 0 0; padding: 10px 18px calc(24px + env(safe-area-inset-bottom)); transform: translateY(105%); transition: transform .32s cubic-bezier(.2,.8,.2,1); box-shadow: 0 -12px 40px rgba(0,0,0,.25); }
  .cd-sheet::before { content: ""; display: block; width: 42px; height: 4px; border-radius: 4px; background: #d6d8dd; margin: 0 auto 12px; }
  .cd-open-sheet .cd-sheet-bg { opacity: 1; pointer-events: auto; }
  .cd-open-sheet .cd-sheet.cd-show { transform: none; }
  body.cd-lock { overflow: hidden; }
  .cd-sheet h4 { margin: 14px 0 8px; font: 700 11px/1 var(--font-rubik, system-ui); letter-spacing: .14em; text-transform: uppercase; color: #6b6e76; }
  .cd-sheet .cd-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .cd-sheet .cd-grid a { display: block; padding: 12px 12px; border-radius: 12px; background: #f6f6f8; color: #15121a; font: 500 13.5px/1.25 var(--font-rubik, system-ui); text-decoration: none; text-transform: none; }
  .cd-sheet .cd-grid a:active { background: #ffe9e3; }
  .cd-sheet .cd-list a { display: flex; justify-content: space-between; align-items: center; padding: 14px 4px; border-bottom: 1px solid #eee; color: #15121a; font: 500 15px/1.2 var(--font-rubik, system-ui); text-decoration: none; text-transform: none; }
  .cd-sheet .cd-list a::after { content: "\203A"; color: #aaa; font-size: 20px; }
  .cd-sheet .cd-x { position: absolute; right: 14px; top: 10px; width: 32px; height: 32px; border-radius: 50%; border: 0; background: #f1f1f4; font-size: 18px; line-height: 1; }

  /* ---------- FAQ: four visible, rest behind "View more" ---------- */
  .cd-faq-c.cd-collapsed [data-cdx] { display: none !important; }
  .cd-more { display: block; width: 100%; margin: 14px 0 0; padding: 13px 16px; border-radius: 14px; border: 1.5px solid #f4320b; background: #fff; color: #f4320b; font: 700 13.5px/1 var(--font-rubik, system-ui); letter-spacing: .02em; text-transform: none; }
  .cd-more:active { background: #fff1ed; }

  /* ---------- horizontal swipe rails ---------- */
  .cd-hs { display: flex !important; overflow-x: auto; scroll-snap-type: x mandatory; gap: 0; -webkit-overflow-scrolling: touch; scrollbar-width: none; border-left: 0 !important; border-top: 0 !important; }
  .cd-hs::-webkit-scrollbar { display: none; }
  .cd-hs > * { flex: 0 0 62%; scroll-snap-align: start; border-top: 1px solid rgba(0,0,0,.06); }
  .cd-hs-hint { display: block; text-align: right; font: 600 10.5px/1 var(--font-rubik, system-ui); color: #8a8d95; padding: 6px 14px 8px; letter-spacing: .06em; text-transform: uppercase; }

  /* ---------- collapsible grids (e.g. industries) ---------- */
  .cd-g6.cd-collapsed > :nth-child(n+7) { display: none !important; }
  .cd-expand { display: block; width: 100%; margin: 12px 0 0; padding: 12px; border-radius: 12px; border: 1.5px solid rgba(0,0,0,.12); background: #fff; color: #15121a; font: 700 13px/1 var(--font-rubik, system-ui); text-transform: none; }

  /* ---------- long copy: clamp with read more ---------- */
  .cd-clamp { display: -webkit-box !important; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; }
  .cd-readmore { display: inline-block; margin-top: 6px; padding: 4px 0; background: none; border: 0; color: #f4320b; font: 700 13px/1 var(--font-rubik, system-ui); text-transform: none; }

  /* ---------- article pages: tap-to-open sections ---------- */
  .cd-art-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; margin: 0 0 10px; border-radius: 14px; background: #f6f6f8; font: 600 12.5px/1.2 var(--font-rubik, system-ui); color: #4a4d55; text-transform: none; }
  .cd-art-bar button { border: 0; background: #fff; border-radius: 10px; padding: 8px 12px; color: #f4320b; font: 700 12.5px/1 var(--font-rubik, system-ui); box-shadow: 0 1px 2px rgba(0,0,0,.08); text-transform: none; }
  section.cd-acc { border: 1px solid rgba(0,0,0,.08); border-radius: 16px; background: #fff; overflow: hidden; }
  section.cd-acc > :first-child { padding: 14px 14px; cursor: pointer; align-items: center !important; position: relative; padding-right: 40px; }
  section.cd-acc > :first-child > span:first-child { margin-top: 0 !important; }
  section.cd-acc > :first-child::after { content: "+"; position: absolute; right: 14px; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; border-radius: 50%; background: #f1f1f4; color: #15121a; display: flex; align-items: center; justify-content: center; font: 700 16px/1 system-ui; transition: transform .2s, background .2s; }
  section.cd-acc.cd-open > :first-child::after { content: "\2212"; background: #ffe9e3; color: #f4320b; }
  section.cd-acc > :not(:first-child) { display: none !important; }
  section.cd-acc.cd-open > div:not(:first-child) { display: block !important; padding-left: 14px; padding-right: 14px; }
  section.cd-acc.cd-open > ul { display: grid !important; padding-left: 14px; padding-right: 14px; padding-bottom: 14px; grid-template-columns: 1fr !important; }
  section.cd-acc > :first-child h2, section.cd-acc > :first-child h3 { font-size: 1.05rem !important; line-height: 1.25 !important; }

  /* ---------- footer: areas collapsed behind one button ---------- */
  .cd-areas .cd-areas-body { display: none !important; }
  .cd-areas.cd-open .cd-areas-body { display: block !important; columns: 1 !important; }
  .cd-areas { padding-bottom: 8px; }
  .cd-areas > div { padding-top: 1.75rem !important; padding-bottom: 1.25rem !important; }
  .cd-areas-btn { display: block; width: 100%; margin-top: 16px; padding: 14px; border-radius: 14px; border: 1.5px solid rgba(255,255,255,.25); background: rgba(255,255,255,.06); color: #fff; font: 700 13.5px/1 var(--font-rubik, system-ui); text-transform: none; }
  .cd-areas .cd-g { margin-bottom: 0 !important; border-bottom: 1px solid rgba(255,255,255,.08); }
  .cd-areas .cd-g > h3 { padding: 14px 0; cursor: pointer; position: relative; }
  .cd-areas .cd-g > h3::after { content: "+"; margin-left: auto; font: 700 18px/1 system-ui; color: #ff6b3d; }
  .cd-areas .cd-g.cd-open > h3::after { content: "\2212"; }
  .cd-areas .cd-g > ul { display: none; padding-bottom: 8px; }
  .cd-areas .cd-g.cd-open > ul { display: block; }
}