/* Mobile-first layout foundation (MOVE CTO-10, 31 October 2026).
   Root causes fixed here, once, for every page:
   1. Grid items default to min-width:auto, so a grid with no column template (Tailwind "grid" on
      phones) or a "1fr" column grew to its widest word, graphic or email address. The app wrapper
      clips horizontal overflow, so the text was silently cut off instead of scrolling.
   2. Desktop type scale and padding were used unchanged on 320 to 430px screens, and in-app
      browsers (Instagram, Facebook) enlarge text further with the phone's font setting.
   3. The floating booking button and its tooltip sat over content and over the offer panel.
   No overflow-x:hidden is added; components now fit. */

/* 1. Let grid and flex content shrink to the space they are given. Scoped to phones so tablet and
      desktop layouts stay exactly as they were (checked against production at 768, 1280, 1440). */
@media (max-width: 1000px) {
  #isl-lib#isl-lib [class*="isl-"] > * { min-width: 0; }
  #isl-lib#isl-lib .isl-layout { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
  .grid > * { min-width: 0; }
  img, video, canvas, iframe, table { max-width: 100%; }
}
@media (max-width: 639px) { .flex-col > * { min-width: 0; } }

/* Long words, URLs and email addresses wrap instead of pushing the layout wider. */
@media (max-width: 767px) {
  h1, h2, h3, h4, h5, h6, p, li, dt, dd, blockquote, figcaption, label, td, th, a, span { overflow-wrap: break-word; }
}
/* Email addresses are the one long "word" that also overflowed narrow tablet cards (/contact at 768px). */
a[href^="mailto:"] { overflow-wrap: anywhere; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* Wide tables scroll inside their own box rather than the page. */
@media (max-width: 767px) {
  .prose table, article table, table.min-w-full { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* 2. Phone type scale, spacing and cards. */
@media (max-width: 640px) {
  .text-7xl { font-size: clamp(2.25rem, 10.5vw, 3rem); line-height: 1.08; }
  .text-6xl { font-size: clamp(2.1rem, 9.8vw, 2.75rem); line-height: 1.1; }
  .text-5xl { font-size: clamp(2rem, 9vw, 2.5rem); line-height: 1.12; }
  .text-4xl { font-size: clamp(1.65rem, 7.4vw, 2.1rem); line-height: 1.18; }
  .text-3xl { font-size: clamp(1.45rem, 6.4vw, 1.75rem); line-height: 1.22; }
  .text-2xl { font-size: clamp(1.25rem, 5.4vw, 1.5rem); line-height: 1.28; }
  .text-xl { font-size: clamp(1.06rem, 4.6vw, 1.2rem); line-height: 1.55; }
  h1, h2, h3 { letter-spacing: -0.015em; text-wrap: balance; }
  p { text-wrap: pretty; }

  .py-32 { padding-top: 4.5rem; padding-bottom: 4.5rem; }
  .py-24 { padding-top: 4rem; padding-bottom: 4rem; }
  .py-20 { padding-top: 3.5rem; padding-bottom: 3.5rem; }
  .p-12, .p-10 { padding: 1.5rem; }
  .p-8 { padding: 1.375rem; }
  .px-10, .px-12 { padding-left: 1.5rem; padding-right: 1.5rem; }
  .rounded-\[3rem\], .rounded-\[2\.5rem\] { border-radius: 1.75rem; }
  .rounded-\[2rem\] { border-radius: 1.5rem; }
  .gap-20, .gap-16 { gap: 2.5rem; }
  /* Label and large figure rows (calculators, stats): wrap rather than clip the figure. */
  .flex.justify-between.items-end { flex-wrap: wrap; column-gap: 1rem; row-gap: 0.25rem; }
  .gap-12 { gap: 2rem; }
  .space-x-12 > :not([hidden]) ~ :not([hidden]) { margin-left: 2rem; }
  .flex-wrap .whitespace-nowrap { white-space: normal; }
  .max-w-\[200px\], .max-w-xs { max-width: min(100%, 20rem); }

  /* Buttons: full-width, comfortable, never wider than the screen. */
  .flex.flex-col.sm\:flex-row > a, .flex.flex-col.sm\:flex-row > button { width: 100%; justify-content: center; text-align: center; }
  a[class*="px-8"], button[class*="px-8"] { padding-left: 1.25rem; padding-right: 1.25rem; }
  .flex.gap-4:has(> a[class*="px-8"], > button[class*="px-8"]) { flex-wrap: wrap; }
  .flex.gap-4:has(> a[class*="px-8"], > button[class*="px-8"]) > :is(a, button) { flex: 1 1 auto; justify-content: center; text-align: center; }

  /* Homepage "How we work" dashboard: two columns while labels fit, compact type. */
  .grid.grid-cols-2.gap-4.mb-8 { gap: 0.75rem; }
  .grid.grid-cols-2.gap-4.mb-8 > .p-5 { padding: 1rem; }
  .grid.grid-cols-2.gap-4.mb-8 .text-2xl { font-size: clamp(1.05rem, 5vw, 1.35rem); line-height: 1.2; hyphens: manual; }
  .grid.grid-cols-2.gap-4.mb-8 .tracking-widest { letter-spacing: 0.08em; }

  /* Contact page cards: centred, balanced, social icons tidy and easy to tap. */
  .grid.md\:grid-cols-3.gap-6 > .bg-white { text-align: center; }
  .flex.justify-center.gap-4 { flex-wrap: wrap; gap: 0.75rem; }
  .flex.justify-center.gap-4 > a.w-14.h-14 { width: 3.25rem; height: 3.25rem; }
}
@media (max-width: 360px) {
  .grid.grid-cols-2.gap-4.mb-8 { grid-template-columns: minmax(0, 1fr); }
  .text-7xl, .text-6xl { font-size: 2.05rem; }
  .text-5xl { font-size: 1.9rem; }
}

/* Case study and guide pages (case library). */
@media (max-width: 640px) {
  #isl-lib#isl-lib .isl-layout { gap: 28px; padding: 36px 0 64px; }
  #isl-lib#isl-lib .isl-prose h2 { font-size: clamp(1.4rem, 6.2vw, 1.75rem); line-height: 1.2; }
  #isl-lib#isl-lib .isl-prose .isl-q { font-size: clamp(1.15rem, 5.2vw, 1.4rem); line-height: 1.3; }
  #isl-lib#isl-lib .isl-challenges { grid-template-columns: minmax(0, 1fr); }
  #isl-lib#isl-lib .isl-diagram { padding: 10px; }
}

/* 3. Floating booking action (Greta FloatingCTA): one compact, labelled pill on phones,
      inside the safe area, hidden while a form field is in use, on form pages and while the
      offer sheet is open. The tooltip bubble is desktop-only. */
@media (max-width: 767px) {
  .fixed.bottom-8.right-8.z-\[100\] { right: calc(14px + env(safe-area-inset-right)); bottom: calc(14px + env(safe-area-inset-bottom)); }
  .fixed.bottom-8.right-8.z-\[100\] > .bg-white.max-w-\[200px\] { display: none; }
  .fixed.bottom-8.right-8.z-\[100\] > .w-16.h-16 { width: auto; height: 48px; padding: 0 18px 0 14px; gap: 8px; border-radius: 999px; font: 600 14px/1 Poppins, system-ui, sans-serif; letter-spacing: 0; box-shadow: 0 10px 28px rgba(2, 8, 23, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.25) inset; }
  .fixed.bottom-8.right-8.z-\[100\] > .w-16.h-16 svg { width: 18px; height: 18px; }
  .fixed.bottom-8.right-8.z-\[100\] > .w-16.h-16::after { content: "Free review"; white-space: nowrap; }
  body:has(input:focus, textarea:focus, select:focus) .fixed.bottom-8.right-8.z-\[100\],
  body:has(#isl-panel:not([hidden])) .fixed.bottom-8.right-8.z-\[100\],
  body:has(#isl-consent) .fixed.bottom-8.right-8.z-\[100\],
  body:has(main form) .fixed.bottom-8.right-8.z-\[100\] { display: none; }
  /* Room at the end of every page so the pill never sits on the last link or button. */
  #root footer { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
  /* Offer sheet: compact, inside the safe area, never taller than most of the screen. */
  #isl-panel { left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); }
  #isl-panel .isl-panel-card { max-height: min(72vh, 520px); overflow: auto; overscroll-behavior: contain; }
}

/* Tablet and phone: text wrappers inside flex rows (icon + text cards) may shrink, and chip labels
   wrap instead of clipping (/ai-intelligence-hub cards, /products timeline chips at 768px). */
@media (max-width: 1023px) {
  .flex > .flex-1, .flex > div:not([class]) { min-width: 0; }
  .flex-wrap .whitespace-nowrap { white-space: normal; }
  /* /ai-intelligence-hub list cards keep a 30px slide-in offset when motion is reduced. */
  .space-y-4 > .p-5.rounded-2xl.flex.items-start { transform: none !important; }
}
@media (max-width: 640px) {
  /* Card header rows (title plus badge such as "Most popular"): the badge drops below if needed. */
  .flex.items-start.justify-between, .flex.items-center.justify-between:has(> span.rounded-full) { flex-wrap: wrap; gap: 0.5rem; }
}
@media (max-width: 640px) {
  /* Segmented tab switchers (/ai-tools): full width, equal segments, labels wrap. */
  .inline-flex.p-1:has(> button) { display: flex; width: 100%; }
  .inline-flex.p-1:has(> button) > button { flex: 1 1 0; min-width: 0; padding: 0.7rem 0.5rem; white-space: normal; line-height: 1.25; }
  /* Small stat boxes in three and two column rows (homepage method cards, /products). */
  .grid.grid-cols-3.gap-2 > * { padding-left: 0.375rem; padding-right: 0.375rem; }
  .grid.grid-cols-3.gap-2 .text-base { font-size: 0.875rem; }
  .grid.grid-cols-2.gap-4 > .p-4 { padding: 0.875rem; }
}
@media (max-width: 380px) {
  .grid.grid-cols-2.gap-4.mb-10 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  /* "At a glance" lists on case studies and guides: label above value, never wider than the box. */
  #isl-lib#isl-lib .isl-box dl { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  #isl-lib#isl-lib .isl-box dd { margin-bottom: 8px; }
  /* Pill switchers (homepage sectors) and icon + label rows wrap within the screen. */
  .bg-gray-100.p-1\.5.rounded-2xl { display: flex; flex-wrap: wrap; justify-content: center; max-width: 100%; }
  .bg-gray-100.p-1\.5.rounded-2xl > button { flex: 1 1 auto; min-width: 0; white-space: normal; }
  .flex.items-center.gap-4 > span { min-width: 0; }
}

/* 4. Mobile navigation: menu button and submenu toggles meet the 44px touch target. */
@media (max-width: 1023px) {
  button[aria-label="Open menu"], button[aria-label="Close menu"], button[aria-label^="Toggle "][aria-label$=" submenu"] { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .fixed.bottom-8.right-8.z-\[100\] > .w-16.h-16 { transition: none; }
}

/* Large price or figure followed by a unit (/ai-discovery investment card): let the unit wrap
   under the figure instead of being clipped when text is enlarged. Phones and tablets only, so the
   desktop layout is unchanged; 200% desktop zoom renders at under 1024px and is covered. */
@media (max-width: 1023px) { div:has(> span.text-5xl + span), div:has(> span.text-4xl + span) { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 0.5rem; } }

/* 200% text size on phones (WCAG 1.4.4): words longer than their box wrap, wide buttons stay inside
   the screen, and icon + text rows stack. These rules only change anything when text would
   otherwise be clipped, so standard sizes look the same. */
@media (max-width: 640px) {
  .grid.grid-cols-3 > * :is(div, span, p), .grid.grid-cols-2 > * :is(div, span, p, h3, h4) { overflow-wrap: anywhere; hyphens: auto; }
  button.text-left :is(p, h3, h4, span), address { overflow-wrap: anywhere; }
  button.text-left.p-8 { padding: 1.25rem; gap: 0.75rem; }
  button.text-left > *, button.text-left .flex > * { min-width: 0; }
  .flex.items-start.gap-6.p-6 { flex-wrap: wrap; gap: 0.75rem; }
  .flex.items-start.gap-6.p-6 > :last-child { flex: 1 1 12rem; min-width: 0; }
  a.inline-flex, button.inline-flex { max-width: 100%; white-space: normal; text-align: center; }
  a.px-10, button.px-10 { padding-left: 1.5rem; padding-right: 1.5rem; }
}