/* Cacele AI — overflow fix layered over the imported Claude Design. Linked LAST in so it wins over the design's inline styles. KEEPS the design's column counts (incl. 2-up on mobile) — only stops the bleed. */ /* Grid children default to min-width:auto, so long content forces a track wider than its 1fr share and the row overflows the screen. Clamp it: tracks now honor the 50/50 split and content wraps inside them. */ [data-grid] > * { min-width: 0; } /* Never let media force horizontal overflow either. Exclude the logo: it has a fixed height + width:auto, so max-width:100% would squash its aspect ratio when the tight nav shrinks its container. */ img:not([src*="logo"]), video { max-width: 100%; } /* Logo: keep its true aspect ratio and never let the flex nav shrink/squeeze it. */ nav a:has(img[src*="logo"]) { flex-shrink: 0; } nav img[src*="logo"] { max-width: none; flex-shrink: 0; } /* Phones: bigger logo + tighter surrounding padding/gap so it has room. */ @media (max-width: 560px) { nav img[src*="logo"] { height: 46px !important; } /* tight left keeps the logo big; right keeps breathing room around the hamburger. Tighten the gaps + CTA side padding so the logo+button+burger fit inside the padding instead of overflowing it (which was shoving the burger to the edge). */ nav { gap: 8px !important; padding-left: 16px !important; padding-right: 22px !important; } nav > div:last-child { gap: 8px !important; } nav a[href="contact.html"] { padding-left: 14px !important; padding-right: 14px !important; } } /* Nav "Get Started" CTA: keep it on a single line (was wrapping to 2 rows on mobile). */ nav a[href="contact.html"] { white-space: nowrap; } /* Mobile off-canvas menu: let the link area scroll so nothing is clipped/unreachable on short screens. min-height:0 lets the flex child shrink and own its scroll. "safe center" keeps items centered when they fit, but top-aligns them when they overflow — otherwise centering hides the top items and it opens mid-scroll. */ [data-menu-list] { overflow-y: auto; min-height: 0; -webkit-overflow-scrolling: touch; justify-content: safe center !important; }