/* ===== Mobile Fix Kit for GHL (banner + hero + typography) ===== */
/* Vars */
:root{ --banner-h:64px; } /* your moving banner height */
/* If your ticker is fixed, keep content from sliding under it */
@media (max-width: 767px){
.ticker{ --h:52px; } /* shorter banner on mobile */
:root{ --banner-h:52px; }
/* Push first section down if the ticker is fixed */
.page-wrapper > section:first-child,
.ghl-page > section:first-child{ margin-top: var(--banner-h) !important; }
}
/* Hero section – make it fit real mobile viewport */
.hero-full{
width:100%;
min-height: calc(100svh - var(--banner-h));
background-size: cover;
background-position: center 40%;
background-repeat: no-repeat;
}
/* Global container breathing room on mobile */
@media (max-width: 767px){
.container, .row, .wrapper, .content{
padding-left: 20px !important;
padding-right: 20px !important;
}
/* Headings/body scale */
h1{ font-size: clamp(26px, 6vw, 32px) !important; line-height: 1.15 !important; }
h2{ font-size: clamp(20px, 5.2vw, 26px) !important; line-height: 1.2 !important; }
p, li, .body-text{ font-size: 16px !important; line-height: 1.55 !important; }
/* Buttons full width */
.btn, a.button, button{ width:100% !important; max-width: 540px; display:block; margin:12px auto !important; }
/* Kill giant gaps */
section, .row{ padding-top:24px !important; padding-bottom:24px !important; }
}
/* Images & videos behave */
img, video{ max-width:100%; height:auto; display:block; }
video{ object-fit: cover; }
/* Marquee safety: reduce motion + font on small screens */
@media (max-width: 480px){
.ticker__content span{ font-size: clamp(16px, 4.2vw, 22px) !important; letter-spacing:.04em !important; margin-right: 2rem !important; }
}
@media (prefers-reduced-motion: reduce){
.ticker__inner{ animation: none !important; transform: none !important; }
}
/* Prevent text overflow in tight columns */
*{ word-wrap: break-word; overflow-wrap: anywhere; }
