/* ==========================================================================
   Responsive corrections.

   Every page is built from inline styles, and an inline style beats a normal
   stylesheet rule — so these use !important and reach the inline declarations
   through attribute-substring selectors. It looks unusual, but it is the only
   way to make a fully inline-styled site responsive without rewriting several
   thousand style attributes by hand.

   IMPORTANT — every value selector is written twice, once for each spelling:

     padding:0 40px        the source form, as authored in the .dc.html files
     padding: 0px 40px     what the browser reports after the doc-canvas
                           runtime (React) re-serialises the same declaration

   The runtime adds spaces after colons and normalises units, so a selector
   matching only the source form silently fails on the served site. Matching
   both keeps this working in the Claude canvas and in production.

   Property-name-only selectors, like [style*="grid-template-columns"], are
   unaffected by spelling and need no twin.

   Breakpoints
     <= 900px   phones and small tablets: everything stacks
     520-900px  wide phones and tablets: 3/4/5-column grids go 2 up
     <= 380px   small phones: tighter gutters
   ========================================================================== */

/* --------------------------------------------------------------------------
   The "trusted by" marquee animates a width:max-content strip roughly 2,500px
   wide inside an overflow:hidden window. That window clips it visually, but on
   narrow screens the strip still widened the document by a few dozen pixels,
   leaving the page able to scroll sideways.

   overflow-x: clip rather than hidden — hidden on html/body creates a scroll
   container, which would break the sticky header. clip does not.
   -------------------------------------------------------------------------- */
html, body { overflow-x: clip; }

@media (max-width: 900px) {

  /* --- Layout -------------------------------------------------------- */

  /* Every multi-column grid collapses. The exception is the small
     "icon + text" pairs (a fixed 78px/88px first column), which are already
     narrow and read better side by side. Their inline value contains
     "px minmax", which the wider grids never produce. */
  [style*="grid-template-columns"]:not([style*="px minmax"]) {
    grid-template-columns: 1fr !important;
  }

  /* Page gutters. 40px a side leaves 295px of content on a 375px screen. */
  [style*="padding:0 40px"],
  [style*="padding: 0px 40px"] {
    padding-left: 22px !important;
    padding-right: 22px !important;
  }
  [style*="padding:26px 40px 0"],
  [style*="padding: 26px 40px 0px"] {
    padding-left: 22px !important;
    padding-right: 22px !important;
  }

  /* Vertical rhythm. Sections use vertical-only padding, so overriding top
     and bottom leaves the horizontal value (0) intact. */
  section { padding-top: 54px !important; padding-bottom: 54px !important; }
  footer  { padding-top: 54px !important; }

  /* Gaps tuned for a wide screen leave large holes once stacked. */
  [style*="gap:90px"], [style*="gap: 90px"],
  [style*="gap:80px"], [style*="gap: 80px"] { gap: 32px !important; }
  [style*="gap:70px"], [style*="gap: 70px"],
  [style*="gap:60px"], [style*="gap: 60px"] { gap: 28px !important; }
  [style*="gap:56px"], [style*="gap: 56px"],
  [style*="gap:52px"], [style*="gap: 52px"] { gap: 26px !important; }

  /* --- Type ---------------------------------------------------------- */

  h1 { font-size: clamp(30px, 8.4vw, 60px) !important; line-height: 1.08 !important; }
  h2 { font-size: clamp(25px, 6.4vw, 46px) !important; line-height: 1.14 !important; }
  h3 { font-size: clamp(17px, 4.4vw, 30px) !important; }

  /* Long unbroken strings (emails, URLs) must not push the page wide. */
  p, h1, h2, h3, span, a, li { overflow-wrap: break-word; }

  /* --- Header -------------------------------------------------------- */

  /* Announcement bar: two flex groups that would otherwise sit on one row. */
  [style*="min-height:46px"],
  [style*="min-height: 46px"] {
    flex-wrap: wrap !important;
    min-height: 0 !important;
    padding-top: 9px !important;
    padding-bottom: 9px !important;
    gap: 4px 14px !important;
    font-size: 11px !important;
    line-height: 1.45 !important;
  }
  [style*="min-height:46px"] > div,
  [style*="min-height: 46px"] > div { flex-wrap: wrap !important; gap: 4px 14px !important; }

  /* The nav row. Without wrap on the parent the nav overflows the viewport
     no matter what width it is given — this is the rule that fixes it. */
  header [style*="min-height:82px"],
  header [style*="min-height: 82px"] {
    flex-wrap: wrap !important;
    min-height: 0 !important;
    padding-top: 14px !important;
    padding-bottom: 14px !important;
    gap: 12px !important;
  }
  header nav {
    order: 3 !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    flex-wrap: wrap !important;
    gap: 8px 14px !important;
    font-size: 11.5px !important;
    letter-spacing: .06em !important;
  }

  /* --- Contact form -------------------------------------------------- */

  /* The form carries width:100% AND padding:32px 30px. With the default
     content-box sizing the padding is added on top of the full width, so it
     rendered 403px wide inside a 375px screen and got clipped on the right.
     border-box folds the padding back inside the 100%. */
  form[style*="justify-self:end"],
  form[style*="justify-self: end"] {
    box-sizing: border-box !important;
    padding: 24px 20px !important;
  }
  form input, form textarea, form button { box-sizing: border-box !important; max-width: 100% !important; }

  /* Stack first/last name rather than squeezing two fields side by side. */
  form [style*="grid-template-columns"] { gap: 0 !important; }

  /* --- Announcement bar ----------------------------------------------- */

  /* Three lines of secondary text before the logo is too much on a phone.
     Drop the long location string and the reel-deck link; keep the booking
     notice and, most importantly, the tap-to-call number. */
  [style*="min-height:46px"] > div:first-child > span:first-child,
  [style*="min-height: 46px"] > div:first-child > span:first-child { display: none !important; }
  [style*="min-height:46px"] a[href*="#contact"],
  [style*="min-height: 46px"] a[href*="#contact"] { display: none !important; }

  /* --- Components ---------------------------------------------------- */

  /* The contact form is right-aligned and width-capped on desktop. */
  [style*="justify-self:end"],
  [style*="justify-self: end"] {
    justify-self: stretch !important;
    max-width: none !important;
  }

  /* Orbit and confirmation graphics position rings absolutely at fixed pixel
     sizes that overflow a narrow screen. Scale the block, not the page. */
  [style*="aspect-ratio:1/1"],
  [style*="aspect-ratio: 1 / 1"] { transform: scale(.84); transform-origin: center; }

  /* Buttons sized for a roomy row. */
  [style*="padding:20px 54px"], [style*="padding: 20px 54px"],
  [style*="padding:22px 46px"], [style*="padding: 22px 46px"] {
    padding-left: 28px !important;
    padding-right: 28px !important;
  }
}

/* Wide phones and tablets: two up reads better than one for short cards. */
@media (min-width: 520px) and (max-width: 900px) {
  [style*="repeat(3,minmax"], [style*="repeat(3, minmax"],
  [style*="repeat(4,minmax"], [style*="repeat(4, minmax"],
  [style*="repeat(5,minmax"], [style*="repeat(5, minmax"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* Small phones. */
@media (max-width: 380px) {
  [style*="padding:0 40px"],
  [style*="padding: 0px 40px"] { padding-left: 16px !important; padding-right: 16px !important; }
  [style*="aspect-ratio:1/1"],
  [style*="aspect-ratio: 1 / 1"] { transform: scale(.74); }
}