/* =========================================================================== GRIT BLUEPRINT — "Build Your Authority" MOBILE LAYER Purpose-built for THIS page's real class set. Loaded after gb-home.css. gb-home.css already stacks most grids at its 920/560 breakpoints; this file adds the thumb-first polish on top: 1. Tall card rows (Three Ways In, Testimonials, Work) become horizontal swipe carousels with a peek + swipe hint -> far shorter scroll. 2. The 8 "What We Build" mechanics become a compact 2-up grid; the 4-phase arc becomes 2x2; How It Works + Before/After stack cleanly. 3. Footer link walls collapse into tap-to-open accordions. 4. Section rhythm, hero, CTAs, and tap targets all tightened for phones. Everything is scoped <=760px (plus small-phone tweaks), so desktop is untouched. Net effect: dramatically shorter, every tap target >=44px. =========================================================================== */ @media (max-width: 760px) { /* ---------- vertical rhythm -------------------------------------------- */ .gb-app .sec{ padding: 56px 0 !important; } .gb-app .sechead{ margin-bottom: 30px !important; } .gb-app .sechead .lead{ margin-top: 14px !important; } .gb-app .wrap, .gb-app .wrap-narrow{ padding: 0 20px; } /* the big section CTAs sit closer to their content on mobile */ .gb-app .sec-cta{ margin-top: 34px !important; } /* ---------- OVERFLOW HARDENING: nothing may widen the page ------------- */ /* A single nowrap line wider than the screen inflates the whole page and clips every section's right edge. Kill nowrap on body copy + clamp width. */ /* clip (not hidden) so we don't turn into a scroll container — that would break the position:sticky nav. clip contains overflow without it. */ html, .gb-app{ overflow-x: clip !important; max-width: 100% !important; } .gb-app .sec .lead strong, .gb-app .lead strong, .gb-app .h2 .accent, .gb-app .h2 .accent-pink{ white-space: normal !important; } .gb-app .wrap, .gb-app .wrap-narrow, .gb-app .formwrap, .gb-app .sform, .gb-app .hero-copy, .gb-app .sechead{ max-width: 100%; min-width: 0; } .gb-app .formwrap > *{ min-width: 0 !important; max-width: 100% !important; } .gb-app .formwrap .lead, .gb-app .checks, .gb-app .check{ max-width: 100% !important; } .gb-app .check .ct{ overflow-wrap: anywhere; } /* ---------- HERO ------------------------------------------------------- */ .gb-app .hero{ overflow: hidden; } /* accessibility: keep the hero dark enough that white/near-white copy clears WCAG AA. The bright-blue ombre tail (#0092D6) tanked contrast on phones. */ .gb-app .hero{ background: linear-gradient(165deg, #0E1E36 0%, #122B50 56%, #163B6E 100%) !important; } .gb-app .hero::after{ opacity: .4 !important; } .gb-app .hero-copy .lead{ color: #E8EEF8 !important; } .gb-app .hero-wrap{ padding-top: 24px !important; padding-bottom: 48px !important; gap: 0 !important; } .gb-app .crumb{ padding-top: 18px !important; margin-bottom: 24px !important; justify-content: center; } .gb-app .hero-art{ order: 0 !important; min-height: 0 !important; } .gb-app .hero-copy .hero-cat, .gb-app .hero-copy .eyebrow{ font-size: 11px !important; letter-spacing: .15em !important; margin-bottom: 20px !important; } .gb-app .hero-copy .display{ font-size: clamp(31px, 8vw, 44px) !important; line-height: 1.14 !important; margin-bottom: 22px !important; } /* hero eyebrow: "in the Building Industry" on its own centered line */ .gb-app .hero-cat{ display: block !important; text-align: center; line-height: 1.4; } .gb-app .hero-cat .hc-line2{ display: block; } .gb-app .hero-copy .display br{ display: none; } .gb-app .hero-copy .lead{ font-size: 16px !important; line-height: 1.55 !important; margin: 0 auto !important; max-width: 34ch; } .gb-app .hero-mark{ width: min(48vw, 200px) !important; top: -26px !important; right: -34px !important; opacity: .5; } .gb-app .xcard{ max-width: 322px !important; margin: 26px auto 0 !important; } .gb-app .xcard-body{ padding: 20px 18px 16px !important; } .gb-app .xphoto{ width: 104px !important; height: 104px !important; margin: 20px auto 14px !important; } .gb-app .xname{ font-size: 25px !important; } /* ---------- ethos band ------------------------------------------------- */ .gb-app .ethos{ padding: 30px 0 !important; } .gb-app .ethos .wrap{ text-align: center !important; } .gb-app .ethos .wrap > div:first-child{ font-size: clamp(20px, 5.8vw, 30px) !important; line-height: 1.18 !important; } .gb-app .ethos .wrap > div:last-child{ margin-top: 14px !important; font-size: 12px !important; letter-spacing: .12em !important; } /* Three Ways In: pink half drops to its own line so it doesn't crowd */ .gb-app #ways .sechead .h2 .accent-pink{ display: block; } /* Who This Is For: "Unknown to the Many." drops to its own line */ .gb-app #who .sechead .h2 .accent{ display: block; } /* FAQ: "Honest Answers." drops to its own line */ .gb-app #faq .sechead .h2 .accent-pink{ display: block; } /* ---------- quick answer / who ---------------------------------------- */ .gb-app .qa-card{ padding: 26px 24px !important; } .gb-app .qa-card .q{ font-size: 24px !important; } .gb-app .who-desc{ padding: 22px 22px !important; } /* who-this-is-for becomes a swipe slider on mobile (chips + panel hidden) */ .gb-app .audience-chips, .gb-app #who .who-hint, .gb-app #who-desc{ display: none !important; } .gb-app .who-slide{ flex:0 0 86%; scroll-snap-align:start; min-width:0; background:#fff; border:1px solid var(--gb-line); border-left:4px solid var(--gb-pink); border-radius:16px; padding:24px 22px; box-shadow:var(--shadow-card); } .gb-app .who-slide h3{ font-family:var(--font-display); text-transform:uppercase; font-weight:700; font-size:20px; color:var(--gb-navy); letter-spacing:.01em; margin:0 0 10px; line-height:1.06; } .gb-app .who-slide p{ margin:0; font-size:14.5px; line-height:1.6; color:var(--fg2); } /* ---------- the problem: cost list ------------------------------------ */ .gb-app .cost{ gap: 0 !important; } .gb-app .cost li{ padding: 16px 0 !important; font-size: 15px !important; } /* ---------- WHAT WE BUILD: arc 2x2 + mechanics 2-up ------------------- */ .gb-app .fdiagram{ grid-template-columns: 1fr 1fr !important; gap: 26px 18px !important; margin-top: 8px !important; } .gb-app .fnode{ padding: 0 !important; } .gb-app .mechg{ grid-template-columns: 1fr 1fr !important; gap: 10px !important; margin-top: 30px !important; } .gb-app .mech{ padding: 15px 14px !important; gap: 11px !important; } .gb-app .mech .mi{ width: 34px !important; height: 34px !important; } .gb-app .mech b{ font-size: 15px !important; } .gb-app .mech span{ font-size: 12.5px !important; line-height: 1.4 !important; } .gb-app .conv{ padding: 24px 22px !important; margin-top: 30px !important; gap: 18px !important; } /* ---------- HOW IT WORKS: stack (was hard-coded 3-col) ---------------- */ .gb-app .how{ grid-template-columns: 1fr !important; gap: 14px !important; } .gb-app .howc{ display: flex !important; align-items: flex-start; gap: 16px; padding: 22px 22px !important; } .gb-app .howc .hn{ font-size: 30px !important; line-height: 1; flex: none; } .gb-app .howc p{ margin: 4px 0 0 !important; } /* ---------- BEFORE / AFTER: stack ------------------------------------- */ .gb-app .before-after{ grid-template-columns: 1fr !important; gap: 12px !important; } /* ---------- OFFER LADDER: inline accordion (shared panel sits off-screen) */ .gb-app #rung-detail{ display: none !important; } .gb-app .rung-acc{ display:block !important; flex:0 0 100%; max-height:0; overflow:hidden; opacity:0; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); border-radius:12px; margin:-4px 0 0; padding:0 18px; transition:max-height .3s var(--ease-out), opacity .25s, padding .3s, margin .3s; } .gb-app .rung-acc.open{ max-height:360px; opacity:1; padding:16px 18px; margin:-2px 0 6px; } .gb-app .rung-acc p{ margin:0; color:rgba(255,255,255,.85); font-size:14.5px; line-height:1.6; } .gb-app .ladder .rung .rplus{ transition:color var(--dur); } .gb-app .ladder .rung.acc-open .rplus{ color:var(--gb-pink); } /* ---------- SCORECARD -------------------------------------------------- */ .gb-app .scard{ padding: 6px 6px !important; } /* icon + title on row 1, the Gap/Building/Strong control full-width on row 2 */ .gb-app .scard-row{ grid-template-columns: auto 1fr !important; row-gap: 14px !important; padding: 18px 16px !important; } .gb-app .scard-row .sc-opts{ grid-column: 1 / -1 !important; width: 100% !important; } .gb-app .sc-opts{ width: 100%; } .gb-app .sc-opts button{ flex: 1 1 auto; padding: 12px 10px !important; font-size: 12px !important; } .gb-app .sc-dim span{ font-size: 13.5px !important; } .gb-app .scard-result{ padding: 26px 22px !important; } /* CTA button: let it wrap instead of overflowing the card */ .gb-app .scard-go{ white-space: normal !important; line-height: 1.25; font-size: 13.5px !important; padding: 16px 16px !important; height: auto; } /* one-question-at-a-time stepper (mobile only) */ .gb-app .sc-stepped .scard-prog > span:first-child{ display: none; } /* hide "n of 6 answered", keep the bar */ .gb-app .sc-stepped .scard-rows .scard-row{ display: none !important; } .gb-app .sc-stepped .scard-rows .scard-row.is-current{ display: grid !important; } .gb-app .sc-stepped .scard-go{ display: none !important; } /* auto-advances + auto-submits */ .gb-app .sc-step-nav{ display: flex !important; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 6px 2px; } .gb-app .sc-step-nav .sc-back{ display: inline-flex; align-items: center; gap: 6px; background: none; border: none; font-family: var(--font-sans); font-weight: 800; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--gb-ink-3); cursor: pointer; padding: 6px 2px; } .gb-app .sc-step-nav .sc-back svg{ width: 15px; height: 15px; } .gb-app .sc-step-count{ font-family: var(--font-sans); font-weight: 800; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--gb-pink-600); } .gb-app .sc-stepped.sc-done .scard-rows, .gb-app .sc-stepped.sc-done .scard-head{ display: none !important; } /* the single visible question gets a touch more room */ .gb-app .sc-stepped .scard-row.is-current{ padding: 22px 16px !important; } /* ---------- FAQ: unstick the heading ---------------------------------- */ .gb-app #faq .sechead{ position: static !important; top: auto !important; } /* ---------- proof: stat band stays 2x2, tighten the rest -------------- */ .gb-app .proofstat{ grid-template-columns: 1fr 1fr !important; gap: 12px !important; margin-bottom: 28px !important; } .gb-app .proofstat .ps{ padding: 18px 14px !important; } .gb-app .founder{ padding: 20px 20px !important; gap: 18px !important; margin-bottom: 28px !important; } .gb-app .spotlight{ padding: 28px 24px !important; } .gb-app .orbit{ gap: 12px 22px !important; margin-top: 26px !important; padding-top: 26px !important; } .gb-app .orbit span{ font-size: 16px !important; } .gb-app .plat{ gap: 16px !important; } .gb-app .platc{ padding: 28px 24px !important; } /* ==================================================================== SWIPE CAROUSELS Tall card rows -> one horizontal, snapping row with the next card peeking in. A slim pink scrollbar + injected "Swipe" hint make the gesture obvious. These three are the biggest scroll-savers on mobile. ==================================================================== */ .gb-app .tiers, .gb-app .tcards, .gb-app .work-grid, .gb-app .who-slider{ display: flex !important; flex-wrap: nowrap !important; grid-template-columns: none !important; grid-template-rows: none !important; max-width: none !important; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-padding-left: 20px; gap: 14px !important; margin: 0 -20px !important; padding: 6px 20px 18px !important; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: var(--gb-pink) rgba(140,150,170,.22); } /* the "Most Popular" badge overhangs the top, give the row headroom */ .gb-app .tiers{ padding-top: 20px !important; } .gb-app .tiers > .tier, .gb-app .tcards > *, .gb-app .work-grid > .wkcard{ flex: 0 0 85% !important; scroll-snap-align: start; min-width: 0; margin: 0 !important; } .gb-app .work-grid > .wkcard{ flex-basis: 82% !important; } /* slim brand scrollbar (webkit) */ .gb-app .tiers::-webkit-scrollbar, .gb-app .tcards::-webkit-scrollbar, .gb-app .work-grid::-webkit-scrollbar{ height: 5px; } .gb-app .who-slider::-webkit-scrollbar{ height: 5px; } .gb-app .tiers::-webkit-scrollbar-thumb, .gb-app .tcards::-webkit-scrollbar-thumb, .gb-app .work-grid::-webkit-scrollbar-thumb{ background: var(--gb-pink); border-radius: 99px; } .gb-app .who-slider::-webkit-scrollbar-thumb{ background: var(--gb-pink); border-radius: 99px; } .gb-app .tiers::-webkit-scrollbar-track, .gb-app .tcards::-webkit-scrollbar-track, .gb-app .work-grid::-webkit-scrollbar-track{ background: rgba(140,150,170,.22); border-radius: 99px; } .gb-app .who-slider::-webkit-scrollbar-track{ background: rgba(140,150,170,.22); border-radius: 99px; } /* swipe hint (injected by JS before each carousel) */ .gb-app .swipe-hint{ display: flex !important; align-items: center; gap: 8px; font-family: var(--font-sans); font-weight: 800; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--gb-pink); margin: 0 0 12px !important; } .gb-app .swipe-hint svg{ width: 15px; height: 15px; } .gb-app .swipe-hint::after{ content: ""; flex: 1; height: 1px; background: currentColor; opacity: .35; } /* hint sitting on a dark section */ .gb-app .deep .swipe-hint, .gb-app .navy .swipe-hint{ color: var(--gb-pink); } /* ---------- CTAs: full-width, stacked, fat tap targets ---------------- */ .gb-app .hero-cta{ flex-direction: column !important; align-items: center; gap: 10px !important; margin-top: 24px !important; } .gb-app .hero-cta .btn{ width: auto !important; } .gb-app .hero-cta .btn.btn-lg{ padding: 12px 22px !important; font-size: 13.5px !important; } .gb-app .hero-cta .btn.btn-lg svg{ width: 16px; height: 16px; } .gb-app .sec-cta{ flex-direction: column !important; gap: 12px !important; } .gb-app .sec-cta .btn{ width: 100%; max-width: 420px; } .gb-app .sec-cta .note{ text-align: center; } .gb-app .btn-lg{ padding: 17px 26px !important; } /* tap targets >= 44px */ .gb-app .audience-chips .chip{ width: 100% !important; justify-content: center; text-align: center; border-radius: 12px !important; padding: 13px 12px !important; font-size: 12.5px !important; line-height: 1.22; min-height: 50px; } .gb-app .sc-opts button{ min-height: 44px; } .gb-app .faq-q{ padding: 20px 2px !important; } /* ---------- final CTA form -------------------------------------------- */ /* let the stacked headline wrap instead of forcing no-wrap (overflow fix) */ .gb-app #strategy .formwrap .display span{ white-space: normal !important; } .gb-app #strategy .formwrap .display{ font-size: clamp(30px, 8.2vw, 44px) !important; } .gb-app .sform{ padding: 28px 22px !important; } .gb-app .news-bar .wrap, .gb-app .foot-news .wrap{ gap: 16px; } /* ==================================================================== FOOTER — collapsible columns (tap to open) ==================================================================== */ .gb-app .foot-main{ gap: 0 !important; padding: 36px 0 24px !important; } .gb-app .foot-brand{ margin-bottom: 24px; } .gb-app .foot-col{ border-bottom: 1px solid rgba(255,255,255,.1); } .gb-app .foot-col-toggle{ display: flex !important; align-items: center; justify-content: space-between; width: 100%; min-height: 52px; background: none; border: none; padding: 0 !important; margin: 0; cursor: pointer; text-align: left; font-family: inherit; } .gb-app .foot-col .foot-h{ margin: 0 !important; } .gb-app .foot-col-chev{ display: inline-flex !important; color: rgba(255,255,255,.55); transition: transform var(--dur) var(--ease-out), color var(--dur); } .gb-app .foot-col-chev svg{ width: 20px; height: 20px; } .gb-app .foot-col.open .foot-col-chev{ transform: rotate(45deg); color: var(--gb-pink); } .gb-app .foot-col-links{ overflow: hidden; max-height: 0; opacity: 0; transition: max-height .32s var(--ease-out), opacity .2s var(--ease-out), padding .32s var(--ease-out); } .gb-app .foot-col.open .foot-col-links{ max-height: 520px; opacity: 1; padding-bottom: 14px; } .gb-app .foot-col-links a{ padding: 11px 0 !important; } .gb-app .foot-bot{ flex-direction: column; gap: 12px; align-items: flex-start; }} /* small phones — keep the arc + mechanics 2-up so the section stays compact */ @media (max-width: 440px) { .gb-app .proofstat{ grid-template-columns: 1fr 1fr !important; } .gb-app .tiers > .tier{ flex-basis: 90% !important; } .gb-app .tcards > *{ flex-basis: 90% !important; } .gb-app .work-grid > .wkcard{ flex-basis: 88% !important; }} /* --------------------------------------------------------------------------- DESKTOP / TABLET (>=761px): neutralize the mobile-only scaffolding so the footer accordion markup + swipe hints render exactly as originally designed. --------------------------------------------------------------------------- */ @media (min-width: 761px) { .gb-app .foot-col-toggle{ display: block; width: 100%; background: none; border: none; padding: 0; margin: 0; cursor: default; text-align: left; font-family: inherit; } .gb-app .foot-col-chev{ display: none; } .gb-app .foot-col-links{ display: block; } .gb-app .swipe-hint{ display: none !important; }}