/* Applied globally to prevent FOUC on navigation.
Loaded via in of every page so styles are ready before first paint. */
/* Never show light overscroll behind the layout (fixes bounce-past-footer flash) */
/* html gets the dark footer color so overscroll bounce (top & bottom) stays dark,
while body keeps the cream page background so light sections render as designed
with proper dark-on-light text contrast. */
html { background: #120d0b; }
body { background: var(--cream, #fffaf2); }
/* Light step cards inside dark sections need dark text, overriding older inline page CSS. */
.section.dark .timeline .step {
color: var(--ink, #1b1411) !important;
background: rgba(255, 250, 242, .86) !important;
}
.section.dark .timeline .step h3,
.section.dark .timeline .step h4 {
color: var(--ink, #1b1411) !important;
}
.section.dark .timeline .step p,
.section.dark .timeline .step li {
color: #4f453e !important;
}
/* No horizontal scroll anywhere */
/* Use overflow-x: clip so html/body don't become scroll containers,
which would break position: sticky on the header. */
html, body { max-width: 100%; overflow-x: clip; }
img, video, iframe, svg { max-width: 100%; height: auto; }
/* Mobile lang-switch: hidden on desktop, shown on tablet & mobile.
Prevents JS-injected element from flashing later — hidden by default. */
.lang-switch-mobile { display: none; }
@media (max-width: 1040px) {
.site-header .header-inner { gap: .6rem; padding-inline: 0; }
.site-header .logo-wrap { min-width: 0; flex: 1 1 auto; overflow: hidden; }
.site-header .logo-wrap img { width: auto; max-width: 150px; max-height: 44px; }
.lang-switch-mobile {
display: inline-flex !important;
margin: 0 !important;
padding: .18rem !important;
gap: .18rem !important;
flex-shrink: 0;
}
.lang-switch-mobile a { padding: .28rem .5rem !important; font-size: .72rem !important; }
.lang-switch-mobile .flag { width: 16px; height: 12px; }
.menu-toggle { padding: .55rem .8rem !important; font-size: .85rem; }
/* Mobile nav dropdown — click-to-open, chevron */
.site-header.mobile-open .main-nav {
max-height: calc(100vh - 90px);
overflow-y: auto;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
padding-bottom: 1rem !important;
}
.site-header.mobile-open .dropdown-menu { display: none !important; }
.site-header.mobile-open .dropdown.open > .dropdown-menu { display: block !important; }
.site-header.mobile-open .dropdown-toggle {
display: flex !important;
justify-content: space-between;
align-items: center;
}
.site-header.mobile-open .dropdown-toggle::after {
content: "";
display: inline-block;
width: .5em; height: .5em;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: translateY(-2px) rotate(45deg);
margin-left: .75rem;
transition: transform .2s ease;
flex-shrink: 0;
}
.site-header.mobile-open .dropdown.open > .dropdown-toggle::after {
transform: translateY(2px) rotate(-135deg);
}
}
/* Tablet-only tweaks */
@media (max-width: 1040px) and (min-width: 721px) {
.grid.three, .grid.four { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.split { grid-template-columns: 1fr !important; gap: 2rem !important; }
.footer-grid { grid-template-columns: repeat(2, 1fr) !important; }
.cta-band { grid-template-columns: 1fr !important; padding: 2rem !important; text-align: left; }
.section { padding: 4.6rem 0; }
.page-hero { padding: 5rem 0 3.8rem; }
}
/* Mobile-only tweaks */
@media (max-width: 720px) {
:root { --radius: 20px; --radius-lg: 28px; }
.container { width: min(100% - 24px, var(--container)) !important; }
h1 { font-size: clamp(1.85rem, 7vw, 2.6rem) !important; line-height: 1.12; }
h2 { font-size: clamp(1.55rem, 5.5vw, 2.15rem) !important; line-height: 1.15; }
h3 { font-size: clamp(1.18rem, 4.5vw, 1.5rem) !important; line-height: 1.2; }
.lead { font-size: 1rem !important; line-height: 1.55; }
p, li { overflow-wrap: break-word; word-wrap: break-word; }
h1, h2, h3, h4 { overflow-wrap: break-word; hyphens: auto; }
.section { padding: 3.4rem 0 !important; }
.section.compact { padding: 2.6rem 0 !important; }
.page-hero { padding: 3.8rem 0 2.8rem !important; }
.hero-inner { padding: 3.6rem 0 3rem !important; gap: 1.8rem !important; }
.hero .lead { font-size: 1rem !important; }
.card { padding: 1.1rem !important; border-radius: 20px !important; }
.card img { border-radius: 14px; }
.form-card { padding: 1.15rem !important; border-radius: 22px !important; }
input, select, textarea { padding: .8rem .85rem !important; font-size: 16px !important; border-radius: 14px !important; }
.btn { padding: .85rem 1.1rem !important; font-size: .92rem !important; min-height: 46px; }
.hero-ctas, .section-ctas { gap: .6rem !important; }
.hero-ctas .btn, .section-ctas .btn { flex: 1 1 auto; min-width: 0; }
.cta-band { padding: 1.4rem !important; text-align: left; border-radius: 22px; }
.cta-band:before { display: none; }
.cta-band h2, .cta-band h3 { font-size: 1.5rem; }
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
.table-wrap table { min-width: 560px !important; }
.timeline { gap: .75rem; }
.step { padding: 1rem !important; gap: .85rem !important; border-radius: 18px; }
.step:before { width: 36px; height: 36px; font-size: .95rem; }
.faq-q { padding: .95rem 1rem !important; font-size: .95rem !important; gap: .6rem !important; }
.faq-a { padding: 0 1rem 1rem !important; }
.section-header { margin-bottom: 1.8rem !important; gap: .9rem !important; }
.hero-card .floating { position: static !important; }
.site-header .header-inner { height: 64px !important; }
.site-header .logo-wrap img { max-width: 130px; max-height: 38px; }
.container > * { min-width: 0; }
.grid, .split, .hero-inner { min-width: 0; }
/* Sticky mobile CTA — polished pill, centered label */
.sticky-mobile-cta.btn.primary {
display: flex !important;
align-items: center;
justify-content: center;
text-align: center;
gap: .5rem;
left: 14px !important; right: 14px !important; bottom: 14px !important;
padding: 1rem 1.25rem !important;
min-height: 56px;
font-size: 1rem;
font-weight: 900;
letter-spacing: .01em;
color: #1b1411 !important;
background: linear-gradient(135deg, #e6cf9d, #c99f6c) !important;
border: 1px solid rgba(146, 107, 79, .35) !important;
border-radius: 999px !important;
box-shadow:
0 12px 28px -8px rgba(27, 20, 17, .55),
0 2px 6px rgba(27, 20, 17, .25),
inset 0 1px 0 rgba(255, 255, 255, .35) !important;
backdrop-filter: blur(8px);
transition: transform .18s ease, box-shadow .18s ease;
}
.sticky-mobile-cta.btn.primary:hover,
.sticky-mobile-cta.btn.primary:active {
transform: translateY(-1px);
box-shadow:
0 16px 32px -8px rgba(27, 20, 17, .6),
0 3px 8px rgba(27, 20, 17, .3),
inset 0 1px 0 rgba(255, 255, 255, .4) !important;
}
body { padding-bottom: 92px !important; }
}
/* Very small (< 380) */
@media (max-width: 380px) {
.site-header .header-inner { gap: .4rem; }
.site-header .logo-wrap img { max-width: 110px; max-height: 34px; }
.lang-switch-mobile a { padding: .24rem .4rem !important; font-size: .68rem !important; }
.lang-switch-mobile .flag { width: 14px; height: 10px; }
.menu-toggle { padding: .5rem .65rem !important; font-size: .8rem !important; }
h1 { font-size: 1.7rem !important; }
h2 { font-size: 1.4rem !important; }
}
/* Nav typography consistency: