/* ============================================================ Responsive layer — loaded LAST on every page. Adds a mobile nav, small-phone tuning, large-screen / TV scaling, and overflow safety on top of each page's own CSS (which already collapses its grids at 900px). ============================================================ */ img, video { max-width: 100%; } /* NOTE: do NOT put overflow-x on / — it breaks the sticky header (the header would scroll away when jumping to a #section). The layout has no horizontal overflow to clip anyway. Media/wide blocks handle their own overflow where needed. */ /* --------------------------------------------------------------- Mobile navigation (hamburger + dropdown) --------------------------------------------------------------- */ .nav-toggle{ display:none; width:42px;height:42px;flex:none; background:transparent;border:1px solid var(--line);border-radius:9px; color:inherit;cursor:pointer; padding:0;place-items:center;gap:4px;flex-direction:column; } .nav-toggle span{ display:block;width:19px;height:2px;background:currentColor;border-radius:2px; transition:transform .2s ease, opacity .2s ease; } header.nav-open .nav-toggle span:nth-child(1){transform:translateY(6px) rotate(45deg)} header.nav-open .nav-toggle span:nth-child(2){opacity:0} header.nav-open .nav-toggle span:nth-child(3){transform:translateY(-6px) rotate(-45deg)} @media (max-width: 900px){ .nav-toggle{display:inline-flex} /* Turn the desktop menu into a full-width dropdown panel. */ .menu{ display:none; position:absolute;left:0;right:0;top:100%; flex-direction:column;gap:0; background:rgba(6,9,13,.98); border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:6px 0; box-shadow:0 24px 40px rgba(0,0,0,.4); } :root[data-theme="light"] .menu{background:rgba(255,255,255,.98)} header.nav-open .menu{display:flex} .menu a{ display:block;padding:15px 6vw;font-size:14px;letter-spacing:.06em; border-top:1px solid var(--line); } .menu a:first-child{border-top:0} } /* --------------------------------------------------------------- Tablets / small laptops --------------------------------------------------------------- */ @media (max-width: 900px){ .section{padding:56px 0} /* Long single-line strips should wrap instead of overflow. */ .time-strip{font-size:15px;line-height:1.5} } /* --------------------------------------------------------------- Phones --------------------------------------------------------------- */ /* --------------------------------------------------------------- Sticky "Request a demo" button on phones (the header CTA folds away below 600px; this keeps it one thumb-tap away everywhere). --------------------------------------------------------------- */ .mobile-cta{display:none} @media (max-width: 600px){ .mobile-cta{ display:block;position:fixed;left:0;right:0;bottom:0;z-index:40; background:var(--red);color:#fff;text-align:center;text-decoration:none; padding:15px 16px;font-size:13px;font-weight:900;letter-spacing:.05em; box-shadow:0 -6px 22px rgba(0,0,0,.35); } /* Already on the contact page — no need to nudge people there. */ body.page-contact .mobile-cta{display:none} /* Keep the footer clear of the fixed button. */ footer{padding-bottom:78px} } @media (max-width: 600px){ .section{padding:44px 0} .cta{padding:52px 0} /* Tall desktop hero min-heights waste a lot of scroll on phones. */ .hero{min-height:auto;padding-top:40px;padding-bottom:34px} /* Headings: the page CSS floors (44–54px) overflow narrow phones because a single long word can't wrap. Scale them down so words always fit. */ h1{font-size:clamp(30px,8.4vw,44px)} .hero h2{font-size:clamp(19px,5vw,24px)} .cta h2,.section h2{font-size:clamp(26px,6.5vw,34px)} .meta{font-size:11px;padding:11px 13px} /* Header: keep it compact; the CTA button lives in the menu area. */ .topbar{font-size:11px;letter-spacing:.08em;padding:7px 12px} .nav{gap:10px} .va{font:700 34px Georgia,serif;letter-spacing:-.08em} .brand strong,.brand-copy strong{font-size:13px;letter-spacing:.04em} .brand small,.brand-copy span{display:none} .nav-actions .demo,.nav-actions .contact{display:none} /* Tame the oversized display headings on small screens. */ .yard-copy h3{font-size:30px} .arch-copy h3{font-size:26px} .video-intro h2{font-size:26px} .legacy-card strong{font-size:34px} .stat strong{font-size:22px} .immediate h2,.copy-panel h3,.origin-copy h3,.validation-copy h3{font-size:24px} /* Give edge padding to full-bleed copy blocks. */ .yard-copy{padding:36px 22px} .contact-form-wrap,.contact-info,.origin-copy,.validation-copy{padding:22px} .time-strip{font-size:13px;padding:14px} /* Two-up chip/stat grids look better as two columns than one on phones. */ .compat{grid-template-columns:1fr 1fr} .hero-stats{grid-template-columns:1fr 1fr} } @media (max-width: 380px){ .compat,.hero-stats{grid-template-columns:1fr} h1{font-size:38px} } /* --------------------------------------------------------------- Large screens & TVs — let content breathe without over-stretching --------------------------------------------------------------- */ @media (min-width: 1700px){ .container{width:min(1440px,90vw)} } @media (min-width: 2200px){ .container{width:min(1660px,88vw)} body{font-size:18px} .hero p,.lead{font-size:20px} }