/**
 * NEW STYLE — mobile / responsive adaptation layer
 * Loads after the main Tailwind bundle. Desktop-first overrides are
 * scoped under max-width media queries so large screens stay intact.
 */

/* -------------------------------------------------------------------------- */
/* Foundations                                                                */
/* -------------------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

html,
body,
#root {
  max-width: 100%;
}

img,
svg,
video,
canvas,
iframe {
  max-width: 100%;
}

img {
  height: auto;
}

iframe {
  width: 100%;
}

/* -------------------------------------------------------------------------- */
/* Containers                                                                 */
/* -------------------------------------------------------------------------- */

@media (max-width: 767px) {
  .site-container {
    width: 100%;
    max-width: 100%;
    padding-left: 1.125rem; /* 18px */
    padding-right: 1.125rem;
  }
}

@media (max-width: 379px) {
  .site-container {
    padding-left: 1rem; /* 16px */
    padding-right: 1rem;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .site-container {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

/* -------------------------------------------------------------------------- */
/* Typography                                                                 */
/* -------------------------------------------------------------------------- */

@media (max-width: 767px) {
  .font-display.text-\[42px\],
  .font-display.text-\[40px\],
  h1.font-display {
    font-size: clamp(1.85rem, 8.2vw, 2.5rem) !important;
    line-height: 1.12 !important;
    letter-spacing: -0.015em !important;
  }

  .font-display.text-\[32px\],
  h2.font-display {
    font-size: clamp(1.55rem, 6.5vw, 2rem) !important;
    line-height: 1.18 !important;
  }

  .font-display.text-\[28px\],
  .font-display.text-\[30px\],
  h3.font-display {
    font-size: clamp(1.35rem, 5.5vw, 1.75rem) !important;
    line-height: 1.2 !important;
  }

  .font-display.text-\[24px\],
  .font-display.text-\[22px\] {
    font-size: clamp(1.2rem, 4.8vw, 1.45rem) !important;
  }

  /* Stats numbers */
  .font-display.text-\[40px\].font-semibold,
  .font-display.text-\[44px\] {
    font-size: clamp(1.75rem, 7vw, 2.25rem) !important;
  }

  .hero-lead,
  .ph-lead,
  .svc-lead,
  .ihero-lead,
  p.text-\[17px\],
  p.text-\[16px\] {
    font-size: 1rem !important; /* 16px */
    line-height: 1.65 !important;
  }

  .eyebrow {
    letter-spacing: 0.18em !important;
    font-size: 11px !important;
    gap: 0.5rem !important;
  }
}

/* -------------------------------------------------------------------------- */
/* Buttons / touch targets                                                    */
/* -------------------------------------------------------------------------- */

@media (max-width: 767px) {
  .btn-primary,
  .btn-secondary,
  a.btn-primary,
  button.btn-primary {
    min-height: 48px;
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
    padding-top: 0.85rem !important;
    padding-bottom: 0.85rem !important;
    font-size: 12px !important;
    letter-spacing: 0.12em !important;
    width: auto;
    max-width: 100%;
  }

  .hero-cta {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.75rem !important;
    width: 100%;
  }

  .hero-cta > a,
  .hero-cta > button,
  .hero-cta .btn-primary {
    width: 100% !important;
    justify-content: center;
  }

  /* Generic CTA pairs in sections */
  .flex.flex-wrap.gap-3 > .btn-primary,
  .flex.flex-wrap.gap-4 > .btn-primary,
  .flex.gap-3 > .btn-primary,
  .flex.gap-4 > .btn-primary {
    min-height: 48px;
  }
}

/* -------------------------------------------------------------------------- */
/* Header / topbar / promo                                                    */
/* -------------------------------------------------------------------------- */

@media (max-width: 767px) {
  /* Topbar denser */
  .bg-dark .site-container {
    min-height: 36px;
  }

  /* Navbar row breathing room */
  header,
  [class*="Navbar"] {
    max-width: 100%;
  }

  /* Promo strip: allow wrap, tighten tracking */
  .link-ghost {
    white-space: nowrap;
  }
}

/* Fullscreen mobile menu */
@media (max-width: 1279px) {
  .fixed.inset-0.z-\[90\].flex.flex-col.bg-cream {
    height: 100dvh;
    max-height: 100dvh;
    overflow: hidden;
  }

  .fixed.inset-0.z-\[90\] nav {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: calc(1.5rem + env(safe-area-inset-bottom));
  }

  .fixed.inset-0.z-\[90\] a,
  .fixed.inset-0.z-\[90\] button {
    min-height: 44px;
  }
}

/* -------------------------------------------------------------------------- */
/* Section spacing                                                            */
/* -------------------------------------------------------------------------- */

@media (max-width: 767px) {
  .py-24 {
    padding-top: 3.5rem !important;
    padding-bottom: 3.5rem !important;
  }

  .py-32 {
    padding-top: 4rem !important;
    padding-bottom: 4rem !important;
  }

  .md\:py-24,
  .md\:py-32 {
    /* no-op on mobile; utility only applies at md+ */
  }

  .mt-14 {
    margin-top: 2.25rem !important;
  }

  .mt-12 {
    margin-top: 2rem !important;
  }

  .gap-10 {
    gap: 1.5rem !important;
  }

  .gap-12 {
    gap: 1.75rem !important;
  }

  .gap-16,
  .gap-20 {
    gap: 2rem !important;
  }
}

/* -------------------------------------------------------------------------- */
/* Grids / cards                                                              */
/* -------------------------------------------------------------------------- */

@media (max-width: 639px) {
  /* Avoid ultra-narrow 2-col cards on very small phones where content is dense */
  .grid.grid-cols-2.gap-x-6,
  .grid.grid-cols-2.lg\:grid-cols-4 {
    column-gap: 0.75rem !important;
    row-gap: 1rem !important;
  }

  .card-base,
  .branch-card {
    max-width: 100%;
  }

  .card-base.p-7,
  .card-base.p-8,
  article.card-base {
    padding: 1.25rem !important;
  }
}

/* Horizontal card rails: keep scroll inside, not on body */
@media (max-width: 1023px) {
  .min-w-\[280px\] {
    min-width: min(280px, calc(100vw - 3rem)) !important;
    max-width: calc(100vw - 3rem);
  }

  .w-\[260px\].shrink-0,
  .flex.w-\[260px\].shrink-0 {
    width: min(260px, calc(100vw - 3rem)) !important;
    flex-shrink: 0;
  }

  /* Parents that host horizontal lists */
  .overflow-x-auto {
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
  }
}

/* -------------------------------------------------------------------------- */
/* Images / media / maps                                                      */
/* -------------------------------------------------------------------------- */

@media (max-width: 767px) {
  .hero-photo,
  .hero-photo img,
  .aspect-\[3\/4\] img,
  .object-cover {
    max-width: 100%;
  }

  .cta-bg-img {
    transform: none !important;
    scale: none !important;
    height: 100% !important;
    width: 100% !important;
    object-fit: cover;
    object-position: center;
  }

  .map-frame,
  .map-frame iframe,
  .map-frame img {
    width: 100% !important;
    max-width: 100%;
  }

  .map-frame {
    height: min(360px, 70vw) !important;
  }
}

/* -------------------------------------------------------------------------- */
/* Forms                                                                      */
/* -------------------------------------------------------------------------- */

@media (max-width: 767px) {
  .input-pill,
  input.input-pill,
  select.input-pill,
  textarea.input-pill,
  input[type="text"],
  input[type="tel"],
  input[type="email"],
  textarea,
  select {
    font-size: 16px !important; /* prevent iOS zoom */
    max-width: 100%;
  }

  .input-pill {
    min-height: 48px;
    padding-top: 0.85rem !important;
    padding-bottom: 0.85rem !important;
  }

  textarea.input-pill,
  textarea {
    min-height: 110px;
  }

  label {
    line-height: 1.45;
  }

  /* Price search field shouldn't force layout width */
  .input-pill.w-\[200px\],
  .input-pill.w-\[240px\],
  .input-pill.lg\:w-\[220px\] {
    width: 100% !important;
    max-width: 100%;
  }
}

/* -------------------------------------------------------------------------- */
/* Modals / dialogs / lightboxes                                              */
/* -------------------------------------------------------------------------- */

@media (max-width: 767px) {
  [data-slot="dialog-content"],
  .fixed.inset-0.z-\[100\] > div,
  .fixed.top-\[50\%\].left-\[50\%\] {
    max-width: calc(100vw - 1.5rem) !important;
    max-height: min(90dvh, 100%) !important;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .max-h-\[90dvh\] {
    max-height: min(90dvh, calc(100dvh - 2rem)) !important;
  }

  /* Close / action hit areas */
  [data-slot="dialog-content"] button,
  .fixed.inset-0.z-\[100\] button {
    min-height: 44px;
  }
}

/* -------------------------------------------------------------------------- */
/* Tables / price lists                                                       */
/* -------------------------------------------------------------------------- */

@media (max-width: 767px) {
  table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* -------------------------------------------------------------------------- */
/* Sticky / fixed chrome                                                      */
/* -------------------------------------------------------------------------- */

/* Kill duplicate enhance sticky — app already has FloatingCTA on mobile */
.ns-sticky-cta {
  display: none !important;
}

@media (max-width: 767px) {
  /* Native floating CTA bar */
  .fixed.inset-x-0.bottom-0.z-40.border-t {
    padding-bottom: calc(0.75rem + env(safe-area-inset-bottom));
    padding-left: max(1rem, env(safe-area-inset-left));
    padding-right: max(1rem, env(safe-area-inset-right));
    width: 100%;
    max-width: 100vw;
    left: 0;
    right: 0;
    box-sizing: border-box;
  }

  .fixed.inset-x-0.bottom-0.z-40 .btn-primary {
    width: 100%;
    min-height: 48px;
  }

  /* Space so footer/content isn't hidden under bar */
  body {
    padding-bottom: calc(72px + env(safe-area-inset-bottom));
  }

  /* Desktop-only floaters stay hidden */
  .fixed.bottom-6.right-6 {
    display: none !important;
  }

  .fixed.left-0.top-1\/2 {
    display: none !important;
  }
}

@media (min-width: 768px) {
  body {
    padding-bottom: 0;
  }
}

/* -------------------------------------------------------------------------- */
/* Page-specific polish                                                       */
/* -------------------------------------------------------------------------- */

@media (max-width: 767px) {
  /* Page hero titles */
  .font-display.text-\[40px\].font-medium {
    font-size: clamp(1.85rem, 7.5vw, 2.35rem) !important;
  }

  /* Contacts branch cards */
  .branch-card {
    padding: 1.25rem !important;
  }

  .ns-howto {
    font-size: 13px;
    padding: 12px 14px;
  }

  .ns-footer-extra {
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 0 1rem 0.5rem;
    text-align: center;
  }

  /* Before/after comparison controls */
  .absolute.left-3.top-1\/2,
  .absolute.right-3.top-1\/2 {
    width: 44px;
    height: 44px;
  }

  /* Countdown / promo circles */
  .h-\[300px\].w-\[300px\] {
    height: min(240px, 70vw) !important;
    width: min(240px, 70vw) !important;
  }
}

/* -------------------------------------------------------------------------- */
/* Ultra-narrow 320–360                                                       */
/* -------------------------------------------------------------------------- */

@media (max-width: 359px) {
  .font-display.text-\[42px\],
  h1.font-display {
    font-size: 1.7rem !important;
  }

  .btn-primary {
    letter-spacing: 0.08em !important;
    font-size: 11px !important;
  }

  .eyebrow {
    letter-spacing: 0.12em !important;
  }
}

/* -------------------------------------------------------------------------- */
/* Tablet polish                                                              */
/* -------------------------------------------------------------------------- */

@media (min-width: 768px) and (max-width: 1023px) {
  .font-display.md\:text-\[72px\] {
    font-size: clamp(2.75rem, 6vw, 3.75rem) !important;
  }

  .hero-cta {
    gap: 0.75rem;
  }
}

/* -------------------------------------------------------------------------- */
/* Safety: clip page overflow without killing nested scrollers                */
/* -------------------------------------------------------------------------- */

@media (max-width: 1023px) {
  html,
  body {
    overflow-x: clip;
  }

  #root {
    overflow-x: clip;
  }
}

/* Promo bar readability on narrow screens */
@media (max-width: 767px) {
  .hidden.sm\:inline {
    /* keep utility behavior */
  }

  /* Soften long uppercase tracking in promo / nav crumbs */
  .tracking-\[0\.28em\],
  .tracking-\[0\.32em\] {
    letter-spacing: 0.16em !important;
  }

  .tracking-\[0\.14em\],
  .tracking-\[0\.12em\] {
    letter-spacing: 0.1em !important;
  }
}

/* Gallery / category tiles: single column until sm */
@media (max-width: 639px) {
  .gallery-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Specialists diploma rail stays inside overflow-hidden parent */
@media (max-width: 1023px) {
  .overflow-hidden > .flex.w-max {
    max-width: none; /* intentional for drag */
  }
}

/* Booking / callback forms stack cleanly */
@media (max-width: 767px) {
  form .flex.gap-3,
  form .flex.gap-4 {
    flex-wrap: wrap;
  }

  form .flex.gap-3 > *,
  form .flex.gap-4 > * {
    min-width: 0;
  }
}

/* Prevent absolute decorative stars/stickers from widening page */
@media (max-width: 767px) {
  .hero-sticker {
    max-width: calc(100% - 1rem);
  }
}

/* Decorative image scales must not widen the page (esp. ~1024) */
.scale-\[1\.16\],
.scale-\[1\.12\],
.cta-bg-img.scale-\[1\.16\],
.aspect-\[4\/3\].scale-\[1\.16\],
.aspect-\[3\/2\].scale-\[1\.12\] {
  transform: none !important;
}

/* Prefer parent clip for hero/CTA media */
section .overflow-hidden,
.relative.overflow-hidden,
[class*="overflow-hidden"] {
  max-width: 100%;
}

@media (max-width: 1279px) {
  .cta-bg-img {
    height: 100% !important;
    width: 100% !important;
    left: 0 !important;
    object-fit: cover;
  }
}

/* Service detail sticky column shouldn't push page width */
@media (max-width: 1279px) {
  .lg\:sticky {
    max-width: 100%;
  }
}

/* Percent-based lg grids + gap overflow around tablet widths */
@media (min-width: 1024px) and (max-width: 1279px) {
  .site-container {
    padding-left: 1.75rem;
    padding-right: 1.75rem;
  }

  .lg\:grid-cols-\[55\%_45\%\] {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) !important;
  }

  .lg\:grid-cols-\[40\%_60\%\] {
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr) !important;
  }

  .lg\:grid-cols-\[38\%_62\%\] {
    grid-template-columns: minmax(0, 2fr) minmax(0, 3.2fr) !important;
  }

  .lg\:gap-16,
  .lg\:gap-20 {
    gap: 1.75rem !important;
  }
}

/* Grid children must be allowed to shrink */
.site-container.grid > *,
.grid > * {
  min-width: 0;
}

/* Replace %-based two-column grids with fr to include gap safely */
@media (min-width: 768px) {
  .md\:grid-cols-\[55\%_45\%\],
  .md\:grid-cols-\[45\%_55\%\],
  .md\:grid-cols-\[40\%_60\%\],
  .md\:grid-cols-\[60\%_40\%\] {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) !important;
  }
}

@media (min-width: 1024px) {
  .lg\:grid-cols-\[55\%_45\%\],
  .lg\:grid-cols-\[45\%_55\%\] {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) !important;
  }

  .lg\:grid-cols-\[40\%_60\%\],
  .lg\:grid-cols-\[38\%_62\%\] {
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr) !important;
  }

  .lg\:grid-cols-\[60\%_40\%\],
  .lg\:grid-cols-\[62\%_38\%\] {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr) !important;
  }
}

/* GSAP/Framer entrance transforms (translateX) must not widen the page */
@media (max-width: 1439px) {
  section,
  .bg-white,
  .bg-cream,
  .bg-blush,
  .site-container.grid,
  .flex-1 {
    overflow-x: clip;
  }
}

/* Keep 2-col form cards inside padded container */
@media (min-width: 1024px) and (max-width: 1279px) {
  .site-container.grid.lg\:grid-cols-2 {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  }

  .form-card {
    max-width: 100%;
  }
}

/* GSAP .hero-word / split words: trailing spaces collapse on inline-block */
.hero-word.inline-block,
[class*="hero-word"].inline-block,
h1 .inline-block,
h2 .inline-block,
.font-display .inline-block {
  margin-right: 0.27em;
}

.hero-word.inline-block:last-child,
h1 > .inline-block:last-child,
h2 > .inline-block:last-child {
  margin-right: 0;
}

/* Promo bar / eyebrow split words */
.eyebrow .inline-block,
[class*="PromoBar"] .inline-block {
  margin-right: 0.22em;
}