/* ============================================================ OLYMPUS FINANCIAL — RESPONSIVE CSS v6 olympus-responsive.css ============================================================ DEPLOYMENT: Replace existing file in your /website folder. Same tag already in every HTML page — no HTML changes. ============================================================ CHANGELOG v6 (on top of v5): - \n artifact: suppressed via body font-size trick on text nodes - Homepage nav logo: inline style="height:156px" overridden to 40px (logo was making nav ~200px tall, covering hero eyebrow on mobile) - Hero padding-top: increased to 100px to always clear fixed nav - LO nav logo: inline style="height:60px" kept but bumped to 48px on mobile for better visual presence - LO hero padding: adjusted to match new nav height ============================================================ */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } /* ════════════════════════════════════════════════════════════ SUPPRESS \n ARTIFACT The HTML source has a literal \n text node at the top of . We can't remove it without editing HTML files, but we can hide it by clamping body line-height at 0 only for direct anonymous text nodes — achieved by setting body font-size:0 and restoring on all real child elements. NOTE: Cleaner permanent fix = open each HTML file, find \n and delete the \n after . ════════════════════════════════════════════════════════════ */ html body { font-size: 0 !important; } html body * { font-size: initial; } /* Restore font sizes explicitly for elements that need it */ html body nav, html body nav *, html body section, html body section *, html body main, html body main *, html body footer, html body footer *, html body div, html body p, html body h1, html body h2, html body h3, html body h4, html body a, html body span, html body li, html body ul, html body ol, html body button, html body input, html body label { font-size: revert; } /* ════════════════════════════════════════════════════════════ MOBILE ≤ 768px ════════════════════════════════════════════════════════════ */ @media (max-width: 768px) { /* ── GLOBAL ── */ html body { overflow-x: hidden !important; } html body img { max-width: 100% !important; height: auto !important; } html body .cursor, html body .cursor-ring, html body .cursor-ring-outer { display: none !important; } html body .section-heading { font-size: 34px !important; line-height: 1.08 !important; } html body .section-label { font-size: 10px !important; letter-spacing: 0.13em !important; } html body .btn-primary, html body .btn-ghost { box-sizing: border-box !important; padding: 14px 22px !important; font-size: 11px !important; letter-spacing: 0.08em !important; } /* ══════════════════════════════════ NAV — HOMEPAGE PROBLEM: Homepage nav logo has inline style="height:156px" making the fixed nav ~204px tall and covering the hero eyebrow. FIX: Override inline style with !important, target the img inside .nav-logo to bring it to 40px — clean, proportional. At 40px logo + 14px padding top + 14px padding bottom = 68px nav. Hero padding-top set to 88px to always clear it. ══════════════════════════════════ */ html body nav { padding: 14px 20px !important; justify-content: space-between !important; align-items: center !important; flex-wrap: nowrap !important; gap: 0 !important; } /* Override BOTH the CSS height and the inline style attribute */ html body .nav-logo img { height: 40px !important; width: auto !important; display: block !important; max-height: 40px !important; } html body .nav-links { display: none !important; } html body .nav-cta { padding: 10px 16px !important; font-size: 10px !important; white-space: nowrap !important; flex-shrink: 0 !important; } /* ══════════════════════════════════ HERO — HOMEPAGE padding-top: 88px clears the 68px nav with 20px breathing room ══════════════════════════════════ */ html body .hero { min-height: unset !important; height: auto !important; padding: 88px 20px 52px !important; justify-content: flex-start !important; } html body .hero-eyebrow { font-size: 9px !important; letter-spacing: 0.14em !important; } html body .hero-headline { font-size: 38px !important; max-width: 100% !important; line-height: 1.06 !important; } html body .hero-vline, html body .scroll-hint { display: none !important; } html body .hero-sub-row { display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 16px !important; width: 100% !important; margin-top: 20px !important; } html body .hero-descriptor { font-size: 14px !important; line-height: 1.7 !important; max-width: 100% !important; width: 100% !important; } html body .hero-ctas { display: flex !important; flex-direction: column !important; gap: 10px !important; width: 100% !important; margin-left: 0 !important; } html body .hero-ctas .btn-primary, html body .hero-ctas .btn-ghost { width: 100% !important; text-align: center !important; display: block !important; } /* ══════════════════════════════════ REVIEWS BAR ══════════════════════════════════ */ html body .reviews-bar { padding: 12px 20px !important; } html body .reviews-track { gap: 20px !important; } /* ══════════════════════════════════ LOAN PROGRAMS / PRODUCTS products-primary: was repeat(3,1fr) — 3 featured cards, card 3 orphaned products-secondary: was repeat(3,1fr) — text clipping off-screen BOTH forced to 1fr single column ══════════════════════════════════ */ html body .products { padding: 56px 20px !important; } html body .products-header { flex-direction: column !important; gap: 10px !important; align-items: flex-start !important; margin-bottom: 24px !important; } html body .products-intro { font-size: 14px !important; line-height: 1.7 !important; max-width: 100% !important; } html body .products-primary { display: grid !important; grid-template-columns: 1fr !important; gap: 1px !important; background: rgba(255,255,255,0.08) !important; margin-bottom: 1px !important; } html body .product-card { padding: 24px 20px !important; background: #0d0d0d !important; } html body .product-badge { font-size: 9px !important; padding: 4px 8px !important; margin-bottom: 16px !important; display: inline-block !important; } html body .product-num { font-size: 10px !important; margin-bottom: 8px !important; display: block !important; } html body .product-name { font-size: 18px !important; margin-bottom: 10px !important; line-height: 1.2 !important; } html body .product-desc { font-size: 13px !important; line-height: 1.65 !important; } html body .products-secondary { display: grid !important; grid-template-columns: 1fr !important; gap: 1px !important; background: rgba(255,255,255,0.08) !important; } html body .product-card.secondary { padding: 20px !important; background: #0d0d0d !important; } /* SPECIALTY RIBBON SOURCE: flex-row, padding 28px 44px, ribbon-div as vertical separators, ribbon-text constrained to 300px FIX: flex-column, dividers hidden, ribbon-text full-width */ html body .specialty-ribbon { display: flex !important; flex-direction: column !important; padding: 24px 20px !important; gap: 14px !important; align-items: flex-start !important; margin-top: 1px !important; } html body .ribbon-label { font-size: 9px !important; letter-spacing: 0.13em !important; } html body .ribbon-div { display: none !important; } html body .ribbon-items { display: flex !important; flex-wrap: wrap !important; min-width: 0 !important; width: 100% !important; gap: 8px 14px !important; } html body .ribbon-item { font-size: 12px !important; white-space: nowrap !important; } html body .ribbon-text { width: 100% !important; font-size: 13px !important; line-height: 1.65 !important; max-width: 100% !important; margin-top: 4px !important; } /* ══════════════════════════════════ WHY OLYMPUS ══════════════════════════════════ */ html body .why { padding: 56px 20px !important; } html body .why-layout { display: flex !important; flex-direction: column !important; gap: 0 !important; width: 100% !important; } html body .why-sticky { position: static !important; top: unset !important; width: 100% !important; border-right: none !important; padding-right: 0 !important; padding-bottom: 36px !important; border-bottom: 1px solid rgba(255,255,255,0.1) !important; margin-bottom: 36px !important; } html body .why-trust-strip { display: flex !important; flex-wrap: wrap !important; gap: 20px 32px !important; margin-top: 20px !important; margin-bottom: 20px !important; } html body .why-trust-num { font-size: 28px !important; line-height: 1 !important; } html body .why-trust-label { font-size: 10px !important; } html body .why-badges { flex-wrap: wrap !important; gap: 8px !important; margin-top: 20px !important; } html body .why-points { display: flex !important; flex-direction: column !important; padding-left: 0 !important; width: 100% !important; gap: 0 !important; } html body .why-point { display: grid !important; grid-template-columns: 32px 1fr !important; gap: 14px !important; padding: 20px 0 !important; align-items: flex-start !important; opacity: 1 !important; } html body .why-num { font-size: 10px !important; padding-top: 4px !important; } html body .why-title { font-size: 14px !important; margin-bottom: 6px !important; } html body .why-text { font-size: 13px !important; line-height: 1.65 !important; } /* ══════════════════════════════════ STATES ══════════════════════════════════ */ html body .states { padding: 28px 20px !important; } html body .states-row { display: flex !important; flex-wrap: wrap !important; justify-content: flex-start !important; gap: 8px !important; } html body .state-badge { padding: 10px 14px !important; } html body .state-code { font-size: 13px !important; } html body .state-name { font-size: 9px !important; } /* ══════════════════════════════════ TEAM GRID ══════════════════════════════════ */ html body .team { padding: 56px 20px !important; } html body .team-header { flex-direction: column !important; gap: 10px !important; align-items: flex-start !important; margin-bottom: 24px !important; } html body .team-grid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 8px !important; } html body .team-card { padding: 14px !important; display: flex !important; flex-direction: column !important; } html body .team-photo { width: 100% !important; aspect-ratio: 3 / 4 !important; height: auto !important; margin-bottom: 12px !important; overflow: hidden !important; } html body .team-photo img { width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: top !important; } html body .team-name { font-size: 13px !important; line-height: 1.2 !important; margin-bottom: 2px !important; } html body .team-role { font-size: 9px !important; letter-spacing: 0.08em !important; margin-bottom: 8px !important; } html body .team-bio { display: none !important; } html body .team-meta { display: flex !important; flex-wrap: wrap !important; gap: 3px !important; } html body .team-tag { font-size: 8px !important; padding: 3px 5px !important; } html body .team-nmls { font-size: 9px !important; margin-top: 6px !important; display: block !important; } html body .team-cta-row { flex-direction: column !important; gap: 10px !important; align-items: stretch !important; padding: 32px 20px !important; text-align: center !important; } html body .team-cta-row .btn-primary, html body .team-cta-row .btn-ghost { width: 100% !important; text-align: center !important; display: block !important; } /* ══════════════════════════════════ RECRUITING ══════════════════════════════════ */ html body .recruiting { padding: 56px 20px !important; overflow: hidden !important; } html body .recruiting-layout { display: flex !important; flex-direction: column !important; gap: 36px !important; width: 100% !important; } html body .recruiting-layout > * { width: 100% !important; } html body .recruiting-list { display: flex !important; flex-direction: column !important; gap: 0 !important; width: 100% !important; } html body .recruiting-item { display: flex !important; flex-direction: row !important; align-items: flex-start !important; gap: 16px !important; padding: 18px 0 !important; width: 100% !important; } html body .recruiting-icon { flex-shrink: 0 !important; width: 36px !important; height: 36px !important; } html body .comp-pill { font-size: 9px !important; padding: 4px 8px !important; } html body .recruiting .btn-primary { width: 100% !important; text-align: center !important; display: block !important; } /* ══════════════════════════════════ BLOG / INSIGHTS SOURCE: blog-grid = repeat(3, 386px) fixed — horizontal overflow FIX: 1-col grid ══════════════════════════════════ */ html body .blog { padding: 56px 20px !important; } html body .blog-header { display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 16px !important; margin-bottom: 28px !important; } html body .blog-grid { display: grid !important; grid-template-columns: 1fr !important; gap: 10px !important; width: 100% !important; overflow: visible !important; } html body .blog-card { padding: 24px 20px !important; width: 100% !important; } html body .blog-tag { font-size: 9px !important; padding: 3px 8px !important; margin-bottom: 12px !important; } html body .blog-title { font-size: 16px !important; line-height: 1.3 !important; margin-bottom: 10px !important; } html body .blog-excerpt { font-size: 13px !important; line-height: 1.65 !important; } html body .blog-meta { margin-top: 16px !important; } html body .blog-date { font-size: 10px !important; } html body .blog-read { font-size: 11px !important; } /* ══════════════════════════════════ FINAL CTA SPLIT PANELS ══════════════════════════════════ */ html body .cta-grid { display: flex !important; flex-direction: column !important; width: 100% !important; gap: 1px !important; background: rgba(255,255,255,0.08) !important; } html body .cta-panel { width: 100% !important; padding: 44px 20px !important; background: #0a0a0a !important; } html body .cta-heading { font-size: 28px !important; line-height: 1.08 !important; margin-bottom: 12px !important; } html body .cta-text { font-size: 13px !important; line-height: 1.7 !important; max-width: 100% !important; margin-bottom: 28px !important; } html body .cta-deco { display: none !important; } html body .cta-panel .btn-primary, html body .cta-panel .btn-ghost { width: 100% !important; text-align: center !important; display: block !important; } /* ══════════════════════════════════ HOMEPAGE FOOTER SOURCE: footer-top = grid 300px 1fr 1fr 220px (4 columns) FIX: flex-column, link cols in 2-col sub-grid ══════════════════════════════════ */ html body footer { padding: 0 !important; } html body .footer-inner { max-width: 100% !important; padding: 40px 20px 24px !important; } html body .footer-top { display: flex !important; flex-direction: column !important; gap: 32px !important; width: 100% !important; margin-bottom: 28px !important; } html body .footer-brand-col { width: 100% !important; } html body .footer-desc { font-size: 13px !important; line-height: 1.7 !important; max-width: 100% !important; margin-top: 12px !important; } html body .footer-nmls { font-size: 10px !important; margin-top: 10px !important; } html body .footer-states { font-size: 10px !important; } html body .footer-contact-row { flex-direction: column !important; gap: 8px !important; margin-top: 14px !important; } html body .footer-contact-link { font-size: 13px !important; } html body .footer-contact-sep { display: none !important; } html body .footer-links { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 28px 16px !important; width: 100% !important; } html body .footer-col-title { font-size: 10px !important; letter-spacing: 0.12em !important; margin-bottom: 14px !important; } html body .footer-links li a { font-size: 13px !important; } html body .footer-apply-btn { display: none !important; } html body .footer-apply-text { display: none !important; } html body .footer-bottom { display: flex !important; flex-direction: column !important; gap: 12px !important; align-items: flex-start !important; padding-top: 24px !important; } html body .footer-legal { font-size: 10px !important; line-height: 1.75 !important; max-width: 100% !important; } html body .footer-eho { margin-left: 0 !important; } /* ══════════════════════════════════ LO PAGES — NAV PROBLEM: LO logo inline style="height:60px" is fine but could be larger. FIX: Set to 48px for better brand presence on mobile — visible, not giant. nav-back and nav-cta stay as-is. ══════════════════════════════════ */ html body .nav-back { font-size: 11px !important; } /* LO pages use a slightly different nav (no nav-links, has nav-back) Logo bump: 60px → 48px on mobile keeps it readable without overwhelming */ html body .lo-hero ~ * .nav-logo img, html body nav .nav-logo img { height: 48px !important; width: auto !important; display: block !important; max-height: 48px !important; } /* ══════════════════════════════════ LO PAGES — HERO SOURCE: lo-hero = padding 140px 60px 80px lo-hero-inner = grid 420px 1fr, margin 0 auto, max-width 1280px FIX: nav on LO pages is ~76px (14px top + 14px bottom + 48px logo) lo-hero padding-top: 96px clears nav with headroom ══════════════════════════════════ */ html body .lo-hero { padding: 96px 0 0 !important; } html body .lo-hero-inner { display: flex !important; flex-direction: column !important; align-items: center !important; max-width: 100% !important; width: 100% !important; margin: 0 !important; padding: 24px 20px 0 !important; gap: 0 !important; } html body .lo-photo-wrap { width: 100% !important; max-width: 240px !important; position: relative !important; margin-bottom: 28px !important; flex-shrink: 0 !important; } html body .lo-photo { width: 100% !important; aspect-ratio: 3 / 4 !important; overflow: hidden !important; height: auto !important; } html body .lo-photo img { width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: top !important; } html body .lo-photo-badge { position: absolute !important; bottom: 12px !important; left: 12px !important; padding: 8px 10px !important; } html body .lo-bio { width: 100% !important; text-align: left !important; } html body .lo-breadcrumb { font-size: 9px !important; letter-spacing: 0.12em !important; margin-bottom: 10px !important; } html body .lo-name { font-size: 40px !important; line-height: 1.0 !important; text-align: left !important; margin-bottom: 10px !important; } html body .lo-role { font-size: 9px !important; letter-spacing: 0.12em !important; text-align: left !important; margin-bottom: 14px !important; } html body .lo-tagline { font-size: 16px !important; line-height: 1.4 !important; text-align: left !important; margin-bottom: 14px !important; } html body .lo-about { font-size: 14px !important; line-height: 1.75 !important; text-align: left !important; margin-bottom: 18px !important; } html body .lo-meta { display: flex !important; flex-wrap: wrap !important; gap: 5px !important; justify-content: flex-start !important; margin-bottom: 16px !important; } html body .lo-tag { font-size: 9px !important; padding: 4px 8px !important; } html body .lo-nmls { font-size: 11px !important; text-align: left !important; margin-bottom: 22px !important; } html body .lo-actions { display: flex !important; flex-direction: column !important; gap: 10px !important; width: 100% !important; } html body .lo-actions .btn-primary { width: 100% !important; text-align: center !important; display: block !important; } /* ══════════════════════════════════ LO PAGES — CONTACT STRIP FIX: 2×2 grid, 5th item spans full width ══════════════════════════════════ */ html body .lo-contact-strip { padding: 0 !important; } html body .lo-contact-inner { display: grid !important; grid-template-columns: 1fr 1fr !important; max-width: 100% !important; width: 100% !important; padding: 0 !important; margin: 0 !important; gap: 1px !important; background: rgba(255,255,255,0.08) !important; } html body .lo-contact-item { display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 3px !important; padding: 16px 14px !important; border-right: none !important; background: #0a0a0a !important; } html body .lo-contact-item:first-child { padding-left: 14px !important; } html body .lo-contact-item:last-child:nth-child(odd) { grid-column: 1 / -1 !important; } html body .lo-contact-icon { width: 18px !important; height: 18px !important; margin-bottom: 4px !important; flex-shrink: 0 !important; } html body .lo-contact-label { font-size: 9px !important; letter-spacing: 0.1em !important; } html body .lo-contact-value { font-size: 12px !important; word-break: break-word !important; overflow-wrap: anywhere !important; line-height: 1.3 !important; } /* ══════════════════════════════════ LO PAGES — STATS BAR (2×2) ══════════════════════════════════ */ html body .lo-stats { overflow: hidden !important; } html body .lo-stats-inner { display: grid !important; grid-template-columns: 1fr 1fr !important; max-width: 100% !important; width: 100% !important; gap: 1px !important; background: rgba(255,255,255,0.08) !important; } html body .lo-stat { padding: 24px 16px !important; background: #0a0a0a !important; } html body .lo-stat-num { font-size: 30px !important; line-height: 1 !important; margin-bottom: 4px !important; } html body .lo-stat-label { font-size: 10px !important; line-height: 1.4 !important; } /* ══════════════════════════════════ LO PAGES — STORY + SPEC SIDEBAR SOURCE: lo-story-inner = grid 1fr 380px, gap 80px, max-width 1280px lo-spec-sidebar = position sticky top 100px FIX: single column grid, sidebar full width unstuck CRITICAL: min-width: 0 on grid children prevents overflow even at 1fr ══════════════════════════════════ */ html body .lo-story { padding: 52px 20px !important; } html body .lo-story-inner { display: grid !important; grid-template-columns: 1fr !important; gap: 0 !important; max-width: 100% !important; width: 100% !important; margin: 0 !important; } html body .lo-story-content { width: 100% !important; min-width: 0 !important; margin-bottom: 40px !important; } html body .lo-story-headline { font-size: 30px !important; line-height: 1.08 !important; margin-bottom: 18px !important; letter-spacing: -0.5px !important; } html body .lo-story-body { font-size: 14px !important; line-height: 1.75 !important; } html body .lo-story-pullquote { font-size: 16px !important; line-height: 1.5 !important; padding: 18px !important; margin: 20px 0 !important; } html body .lo-spec-sidebar { position: static !important; top: unset !important; width: 100% !important; min-width: 0 !important; border-top: 1px solid rgba(255,255,255,0.1) !important; padding-top: 32px !important; padding-left: 0 !important; } html body .lo-spec-sidebar-label { font-size: 9px !important; letter-spacing: 0.12em !important; margin-bottom: 16px !important; } html body .lo-spec-item { padding: 14px 0 !important; display: flex !important; justify-content: space-between !important; align-items: baseline !important; gap: 12px !important; min-width: 0 !important; } html body .lo-spec-item-name { font-size: 12px !important; flex-shrink: 0 !important; } html body .lo-spec-item-desc { font-size: 12px !important; text-align: right !important; } /* ══════════════════════════════════ LO PAGES — REVIEWS (1-col) ══════════════════════════════════ */ html body .lo-reviews { padding: 52px 20px !important; } html body .lo-reviews-inner { max-width: 100% !important; width: 100% !important; } html body .lo-reviews-grid { display: grid !important; grid-template-columns: 1fr !important; gap: 10px !important; width: 100% !important; } html body .lo-review-card { padding: 20px 18px !important; } html body .lo-review-text { font-size: 14px !important; line-height: 1.65 !important; margin: 10px 0 !important; } html body .lo-review-author { font-size: 11px !important; } /* ══════════════════════════════════ LO PAGES — FINAL CTA ══════════════════════════════════ */ html body .lo-final-cta { padding: 52px 20px !important; } html body .lo-final-cta-inner { max-width: 100% !important; width: 100% !important; } html body .lo-final-cta-heading { font-size: 30px !important; line-height: 1.08 !important; margin-bottom: 12px !important; } html body .lo-final-cta-sub { font-size: 14px !important; line-height: 1.7 !important; margin-bottom: 24px !important; } html body .lo-final-cta-actions { display: flex !important; flex-direction: column !important; gap: 10px !important; align-items: stretch !important; } html body .lo-final-cta-actions .btn-primary, html body .lo-final-cta-actions .btn-ghost { width: 100% !important; text-align: center !important; display: block !important; } /* ══════════════════════════════════ LO PAGES — FOOTER ══════════════════════════════════ */ html body .lo-footer { padding: 24px 20px 32px !important; } html body .lo-footer-inner { display: flex !important; flex-direction: column !important; gap: 12px !important; max-width: 100% !important; width: 100% !important; align-items: flex-start !important; } html body .lo-footer-legal { font-size: 10px !important; line-height: 1.7 !important; max-width: 100% !important; } /* ══════════════════════════════════ VA PAGE — NAV ══════════════════════════════════ */ html body .nav-right { gap: 8px !important; flex-wrap: nowrap !important; align-items: center !important; } html body .nav-hero-badge { display: none !important; } /* ══════════════════════════════════ VA PAGE — HERO ══════════════════════════════════ */ html body .hero-content { padding: 80px 20px 52px !important; min-height: unset !important; height: auto !important; } html body .hero-content h1 { font-size: 36px !important; line-height: 1.06 !important; max-width: 100% !important; margin-bottom: 14px !important; } html body .hero-sub { font-size: 14px !important; line-height: 1.7 !important; max-width: 100% !important; margin-bottom: 24px !important; } html body .hero-ctas { flex-direction: column !important; gap: 10px !important; width: 100% !important; max-width: 100% !important; } html body .btn-red, html body .btn-ghost-white, html body .btn-blue { width: 100% !important; text-align: center !important; display: block !important; } html body .flag-ribbons, html body .stars-field, html body .flag-stripe { display: none !important; } html body .benefits-bar { overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; } html body .benefits-track { flex-wrap: nowrap !important; min-width: max-content !important; gap: 14px !important; padding: 12px 20px !important; } html body .benefit-item { font-size: 11px !important; white-space: nowrap !important; } /* ══════════════════════════════════ VA PAGE — PROGRAM / PERKS ══════════════════════════════════ */ html body .hero-program { padding: 52px 20px !important; } html body .hero-program-layout { display: flex !important; flex-direction: column !important; gap: 32px !important; width: 100% !important; } html body .hero-perks { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 10px !important; width: 100% !important; } html body .hero-perk { padding: 16px 14px !important; } html body .perk-title { font-size: 13px !important; } html body .perk-text { font-size: 12px !important; line-height: 1.6 !important; } /* ══════════════════════════════════ VA PAGE — BENEFITS GRID ══════════════════════════════════ */ html body .va-benefits { padding: 52px 20px !important; } html body .benefits-grid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 10px !important; width: 100% !important; } html body .benefit-card { padding: 18px 14px !important; } html body .benefit-num { font-size: 20px !important; margin-bottom: 6px !important; } html body .benefit-title { font-size: 13px !important; margin-bottom: 6px !important; } html body .benefit-text { font-size: 12px !important; line-height: 1.6 !important; } /* ══════════════════════════════════ VA PAGE — ELIGIBILITY ══════════════════════════════════ */ html body .eligibility { padding: 52px 20px !important; } html body .elig-layout { display: flex !important; flex-direction: column !important; gap: 28px !important; width: 100% !important; } html body .elig-item { font-size: 14px !important; gap: 10px !important; line-height: 1.5 !important; } html body .elig-check { flex-shrink: 0 !important; } html body .elig-note { font-size: 12px !important; line-height: 1.65 !important; margin-top: 16px !important; } /* ══════════════════════════════════ VA PAGE — PROCESS STEPS ══════════════════════════════════ */ html body .process { padding: 52px 20px !important; } html body .process-steps { display: flex !important; flex-direction: column !important; gap: 0 !important; width: 100% !important; } html body .process-step { display: flex !important; flex-direction: row !important; align-items: flex-start !important; gap: 16px !important; text-align: left !important; width: 100% !important; padding: 20px 0 !important; border-bottom: 1px solid rgba(255,255,255,0.07) !important; } html body .step-icon { flex-shrink: 0 !important; width: 36px !important; height: 36px !important; } html body .step-title { font-size: 14px !important; margin-bottom: 4px !important; } html body .step-text { font-size: 13px !important; line-height: 1.65 !important; } /* ══════════════════════════════════ VA PAGE — TESTIMONIAL ══════════════════════════════════ */ html body .testimonial { padding: 52px 20px !important; } html body .testimonial-inner { padding: 28px 20px !important; } html body .quote-text { font-size: 18px !important; line-height: 1.55 !important; margin-bottom: 16px !important; } html body .quote-attribution { font-size: 12px !important; } /* ══════════════════════════════════ VA PAGE — FINAL CTA + FOOTER ══════════════════════════════════ */ html body .va-cta { padding: 52px 20px !important; } html body .va-cta-box { padding: 36px 20px !important; } html body .va-cta-heading { font-size: 28px !important; line-height: 1.08 !important; margin-bottom: 10px !important; } html body .va-cta-sub { font-size: 14px !important; line-height: 1.7 !important; margin-bottom: 24px !important; } html body .va-cta-actions { display: flex !important; flex-direction: column !important; gap: 10px !important; align-items: stretch !important; width: 100% !important; } html body .va-footer { padding: 24px 20px 32px !important; } html body .va-footer-inner { display: flex !important; flex-direction: column !important; gap: 16px !important; align-items: flex-start !important; width: 100% !important; } html body .footer-brand-row { display: flex !important; flex-direction: column !important; gap: 10px !important; align-items: flex-start !important; } html body .footer-links { flex-wrap: wrap !important; gap: 10px !important; } html body .footer-legal { font-size: 10px !important; line-height: 1.7 !important; max-width: 100% !important; } } /* end @media 768px */ /* ════════════════════════════════════════════════════════════ TABLET 769px – 1024px ════════════════════════════════════════════════════════════ */ @media (min-width: 769px) and (max-width: 1024px) { html body nav { padding: 18px 32px !important; } html body .nav-links { gap: 18px !important; font-size: 13px !important; } html body .nav-logo img { height: 52px !important; width: auto !important; max-height: 52px !important; } html body .hero { min-height: unset !important; height: auto !important; padding: 100px 40px 72px !important; } html body .hero-headline { font-size: 58px !important; max-width: 100% !important; } html body .hero-sub-row { flex-direction: column !important; gap: 20px !important; } html body .why-layout { display: flex !important; flex-direction: column !important; gap: 40px !important; } html body .why-sticky { position: static !important; border-right: none !important; padding-right: 0 !important; border-bottom: 1px solid rgba(255,255,255,0.1) !important; padding-bottom: 36px !important; width: 100% !important; } html body .why-points { padding-left: 0 !important; } html body .recruiting { padding: 72px 40px !important; } html body .recruiting-layout { display: flex !important; flex-direction: column !important; gap: 36px !important; width: 100% !important; } html body .blog-grid { grid-template-columns: 1fr 1fr !important; gap: 14px !important; } html body .cta-grid { display: flex !important; flex-direction: column !important; } html body .cta-panel { padding: 52px 40px !important; } html body .footer-inner { padding: 48px 40px 24px !important; } html body .footer-top { grid-template-columns: 1fr 1fr !important; gap: 36px !important; } html body .products-primary { grid-template-columns: 1fr 1fr !important; } html body .products-secondary { grid-template-columns: 1fr 1fr 1fr !important; } html body .lo-hero { padding: 40px 0 0 !important; } html body .lo-hero-inner { display: grid !important; grid-template-columns: 260px 1fr !important; max-width: 100% !important; margin: 0 auto !important; padding: 0 32px !important; gap: 40px !important; } html body .lo-story-inner { grid-template-columns: 1fr 240px !important; gap: 40px !important; max-width: 100% !important; } html body .lo-stats-inner { grid-template-columns: repeat(2, 1fr) !important; max-width: 100% !important; } html body .lo-reviews-grid { grid-template-columns: 1fr 1fr !important; } html body .team { padding: 72px 40px !important; } html body .team-grid { grid-template-columns: repeat(3, 1fr) !important; } html body .products { padding: 72px 40px !important; } html body .hero-perks { grid-template-columns: 1fr 1fr !important; } html body .benefits-grid { grid-template-columns: repeat(2, 1fr) !important; } /* Josh page tablet */ html body .lo-full-bio-inner { grid-template-columns: 1fr 300px !important; gap: 48px !important; max-width: 100% !important; } html body .lo-full-bio { padding: 72px 40px !important; } } /* ════════════════════════════════════════════════════════════ JOSH JANKELOW PAGE — UNIQUE TEMPLATE Classes: lo-full-bio, lo-full-bio-inner, lo-full-bio-text, lo-specialties, lo-specialty-item, lo-bio-pull, lo-bio-para, lo-stat, lo-stats-inner (Josh version), lo-cta, lo-cta-inner, lo-cta-actions, lo-footer-inner (Josh), lo-footer-links, lo-footer-legal SOURCE: lo-full-bio-inner = grid 1fr 420px gap 100px lo-stats-inner = repeat(4,1fr) padding 0 60px lo-footer-inner = flex space-between padding 48px 60px ════════════════════════════════════════════════════════════ */ @media (max-width: 768px) { /* ── BIO + SPECIALTIES SECTION ── */ html body .lo-full-bio { padding: 52px 20px !important; } /* Collapse the 2-col grid (bio text | specialties) to single column */ html body .lo-full-bio-inner { display: grid !important; grid-template-columns: 1fr !important; gap: 0 !important; max-width: 100% !important; width: 100% !important; margin: 0 !important; } html body .lo-full-bio-text { width: 100% !important; min-width: 0 !important; margin-bottom: 40px !important; } html body .lo-bio-pull { font-size: 18px !important; line-height: 1.4 !important; margin-bottom: 20px !important; } html body .lo-bio-para { font-size: 14px !important; line-height: 1.75 !important; margin-bottom: 14px !important; } /* Specialties — moves below bio, full width, clear border-top separator */ html body .lo-specialties { width: 100% !important; min-width: 0 !important; border-top: 1px solid rgba(255,255,255,0.1) !important; padding-top: 32px !important; } html body .lo-specialties-label { font-size: 9px !important; letter-spacing: 0.13em !important; margin-bottom: 16px !important; } html body .lo-specialty-item { padding: 14px 0 !important; width: 100% !important; min-width: 0 !important; } html body .lo-specialty-name { font-size: 12px !important; margin-bottom: 4px !important; letter-spacing: 0.08em !important; } html body .lo-specialty-desc { font-size: 13px !important; line-height: 1.6 !important; } /* ── STATS BAR (Josh version) ── */ /* SOURCE: repeat(4,1fr) with padding 0 60px — overflows on mobile */ html body .lo-stats { overflow: hidden !important; } html body .lo-stats-inner { display: grid !important; grid-template-columns: 1fr 1fr !important; max-width: 100% !important; width: 100% !important; padding: 0 !important; margin: 0 !important; gap: 1px !important; background: rgba(255,255,255,0.08) !important; } html body .lo-stat { padding: 24px 16px !important; border-right: none !important; background: #0a0a0a !important; text-align: left !important; } html body .lo-stat-value { font-size: 30px !important; line-height: 1 !important; margin-bottom: 4px !important; display: block !important; } html body .lo-stat-label { font-size: 10px !important; line-height: 1.4 !important; } /* ── FINAL CTA (Josh version) ── */ html body .lo-cta { padding: 52px 20px !important; text-align: left !important; } html body .lo-cta-inner { max-width: 100% !important; width: 100% !important; text-align: left !important; margin: 0 !important; } html body .lo-cta-eyebrow { font-size: 9px !important; letter-spacing: 0.13em !important; margin-bottom: 12px !important; } html body .lo-cta-actions { display: flex !important; flex-direction: column !important; gap: 10px !important; align-items: stretch !important; justify-content: flex-start !important; flex-wrap: nowrap !important; } html body .lo-cta-actions .btn-primary, html body .lo-cta-actions .btn-outline { width: 100% !important; text-align: center !important; display: block !important; } /* ── FOOTER (Josh version) ── */ /* SOURCE: flex space-between padding 48px 60px */ html body .lo-footer-inner { display: flex !important; flex-direction: column !important; gap: 20px !important; max-width: 100% !important; width: 100% !important; padding: 28px 20px !important; margin: 0 !important; align-items: flex-start !important; justify-content: flex-start !important; } html body .lo-footer-legal { font-size: 10px !important; line-height: 1.7 !important; max-width: 100% !important; } html body .lo-footer-links { display: flex !important; flex-wrap: wrap !important; gap: 12px 20px !important; } html body .lo-footer-links a { font-size: 12px !important; } }