/* Mobile only. Loaded with media="(max-width: 767px)", so desktop is never affected. */

/* Home hero: drop the status strip and pill, hide animated background */
#hero .status-bar,
#hero .hero-pill,
#hero .hero-bg { display: none !important; }
#hero .section-pad { padding-top: 28px; padding-bottom: 32px; }

/* No cover photos on mobile: flat dark hero backgrounds */
.section-hero,
.sv-hero,
.about-hero,
[class*="-hero"]:not(.hero-copy):not(.hero-actions):not(.hero-h1):not(.hero-sub) {
  background-image: none !important;
}
.section-hero::before, .section-hero::after,
.sv-hero::before, .sv-hero::after,
.about-hero::before, .about-hero::after { display: none !important; }

/* No decorative animation on mobile */
*, *::before, *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
}
.rv, .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }


/* Swipe slides: one card across, peek the next */
.services-grid,
.sv-steps,
.sv-vtrack,
.about-grid.about-acc,
.about-grid-5,
.work-grid,
.se-grid {
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto;
  gap: 12px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 6px;
}
.services-grid::-webkit-scrollbar,
.sv-steps::-webkit-scrollbar,
.sv-vtrack::-webkit-scrollbar,
.about-grid.about-acc::-webkit-scrollbar,
.about-grid-5::-webkit-scrollbar,
.work-grid::-webkit-scrollbar,
.se-grid::-webkit-scrollbar { display: none; }
.services-grid > *,
.sv-steps > *,
.sv-vtrack > *,
.about-grid.about-acc > *,
.about-grid-5 > *,
.work-grid > *,
.se-grid > * {
  flex: 0 0 84% !important;
  max-width: 84%;
  scroll-snap-align: start;
  height: auto !important;
}

/* Founder page: timeline as swipe slides, drop decorative glow and terminal card */
.hero-glow, .hero-bg .hero-glow { display: none !important; }
.hero .hero-card { display: none !important; }
.timeline {
  display: flex !important; flex-wrap: nowrap !important; overflow-x: auto;
  gap: 12px; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 0 0 6px !important;
}
.timeline::-webkit-scrollbar { display: none; }
.timeline::before, .timeline::after { display: none !important; }
.timeline > .tl-item {
  flex: 0 0 84% !important; max-width: 84%; scroll-snap-align: start;
  margin: 0 !important; position: relative !important; left: auto !important; right: auto !important;
}

/* Our work: featured grid must not push the page wider than the screen */
.featured-grid { grid-template-columns: minmax(0, 1fr) !important; }
.featured-grid > *, .fv-carousel, .fvc-clip { min-width: 0; max-width: 100%; }
.fvc-slide img { max-width: 100%; height: auto; }

/* About accordion: show every card open, hide the expand hint */
.about-acc .acc-v { display: none !important; }
.about-acc .about-cell { max-height: none !important; }

/* Standard mobile top bar with burger replaces the floating pill */
#fdh-floating-header, .fdh-goo-stage, .fdh-island-wrap { display: none !important; }
.fm-mbar {
  display: flex; align-items: center; justify-content: space-between;
  position: sticky; top: 0; z-index: 1000; height: 56px; padding: 0 16px;
  background: rgba(11,11,16,.96); border-bottom: 1px solid rgba(255,255,255,.08);
}
.fm-mbar-logo { font-family: var(--font-head, inherit); font-weight: 700; font-size: 15px; color: #fff; text-decoration: none; }
.fm-mbar-logo span { color: #a874d6; }
.fm-burger { width: 44px; height: 44px; background: none; border: 0; display: flex; flex-direction: column; justify-content: center; align-items: flex-end; gap: 5px; padding: 0 6px; cursor: pointer; }
.fm-burger span { display: block; width: 22px; height: 2px; background: #fff; border-radius: 2px; transition: transform .2s, opacity .2s; }
.fm-mbar.is-open .fm-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.fm-mbar.is-open .fm-burger span:nth-child(2) { opacity: 0; }
.fm-mbar.is-open .fm-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.fm-mmenu { display: none; position: absolute; top: 56px; left: 0; right: 0; background: #0b0b10; border-bottom: 1px solid rgba(255,255,255,.1); padding: 8px 16px 18px; flex-direction: column; max-height: calc(100vh - 56px); overflow-y: auto; }
.fm-mbar.is-open .fm-mmenu { display: flex; }
.fm-mmenu a { color: #eef0f6; text-decoration: none; font-size: 17px; padding: 13px 0; border-bottom: 1px solid rgba(255,255,255,.06); }
.fm-mmenu a.fm-sub { font-size: 14px; color: #9aa3b2; padding: 9px 0 9px 14px; }
.fm-mmenu a[aria-current] { color: #a874d6; }
.fm-mmenu a.fm-mcta { margin-top: 14px; text-align: center; background: #6b3d96; color: #fff; border: 0; border-radius: 8px; font-size: 15px; }

/* Decorative scrolling marquees add nothing on mobile: hide them */
.stack-marquee, .about-marq, .marquee-wrap { display: none !important; }

/* Tighter vertical rhythm */
.section-pad, .section-pad-sm, .sv-section, .about-section { padding-top: 40px !important; padding-bottom: 40px !important; }

/* Bigger tap targets in the footer */
.ft2-term a, .ft2-legal-links a, .ft2-legal a { display: inline-block; padding: 10px 0; min-height: 40px; }

/* Auto carousels (built by mobile-carousel.js) */
.fm-car { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; grid-template-columns: none !important; overflow-x: auto !important; gap: 12px !important; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 4px; }
.fm-car::-webkit-scrollbar { display: none; }
.fm-car > * { flex: 0 0 86% !important; max-width: 86%; scroll-snap-align: start; margin: 0 !important; height: auto !important; }
.fm-car-nav { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 12px; }
.fm-car-nav button { width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.06); color: #fff; font-size: 22px; line-height: 1; cursor: pointer; }
.fm-car-dots { display: flex; gap: 6px; }
.fm-car-dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.25); }
.fm-car-dots i.on { background: #a874d6; width: 16px; border-radius: 3px; }

/* Burger menu: Services submenu collapsed until tapped */
.fm-grp-row { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(255,255,255,.06); }
.fm-grp-row a { flex: 1; border-bottom: 0 !important; }
.fm-grp-btn { width: 44px; height: 44px; background: none; border: 0; color: #9aa3b2; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.fm-grp-btn svg { transition: transform .2s; }
.fm-grp.is-open .fm-grp-btn svg { transform: rotate(180deg); }
.fm-subs { display: none; flex-direction: column; }
.fm-grp.is-open .fm-subs { display: flex; }

/* Logo icon beside the name in the mobile bar */
.fm-mbar-logo { display: inline-flex; align-items: center; gap: 9px; }
.fm-mbar-logo img { display: block; width: 28px; height: 28px; flex: none; }
.fm-mbar-logo b { font-weight: 700; }

/* Home "How I work": swipe slides instead of four squeezed columns */
.process-deck { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; overflow-x: auto !important; gap: 12px !important; scroll-snap-type: x mandatory; scrollbar-width: none; }
.process-deck::-webkit-scrollbar { display: none; }
.process-deck > * { flex: 0 0 82% !important; max-width: 82%; width: auto !important; scroll-snap-align: start; height: auto !important; }

/* Process cards: always show full content, no tap-to-expand */
.deck-card { opacity: 1 !important; transform: none !important; margin-left: 0 !important; cursor: default; flex: 0 0 82% !important; }
.deck-card .deck-card-body { max-height: none !important; opacity: 1 !important; padding: 0 24px 24px !important; }
.deck-hint { display: none !important; }

/* Never let a sliding element widen the page */
html, body { overflow-x: clip; max-width: 100%; }

/* Home featured work: text only, no screenshot panel */
.work-tile-preview { display: none !important; }
.work-tile { grid-template-columns: 1fr !important; }

/* Schools page: demo tiles stack upwards, mock stays centred, decorative strips hidden */
.se-mini { display: flex !important; flex-direction: column !important; overflow: visible !important; gap: 10px !important; }
.se-mini > * { flex: none !important; max-width: 100% !important; width: 100% !important; }
.se-demo { width: 100% !important; max-width: 100% !important; margin-left: auto; margin-right: auto; }
.se-demo, .se-demo * { min-width: 0; }
.se-site-hero { max-width: 100% !important; }
.se-strip, .se-strip-l, .se-strip-r { display: none !important; }
.se-blob { display: none !important; }

/* From brief to live: one square-ish card at a time with arrows */
.process-deck > *, .fm-car.process-deck > * { flex: 0 0 100% !important; max-width: 100% !important; min-height: 260px; }

/* Forms: closed accordion */
.fm-acc { border: 1px solid rgba(255,255,255,.14); border-radius: 12px; overflow: hidden; background: rgba(255,255,255,.03); }
.fm-acc-btn { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; background: none; border: 0; color: inherit; font: inherit; font-weight: 700; font-size: 16px; cursor: pointer; text-align: left; }
.fm-acc-btn i { font-style: normal; font-size: 22px; color: #a874d6; }
.fm-acc-body { display: none; padding: 0 14px 16px; }
.fm-acc.is-open .fm-acc-body { display: block; }

/* Footer: compact strip */
.fmds-footer .ft2 { padding: 22px 16px 10px !important; }
.fmds-footer .ft2-strip { display: block !important; }
.fmds-footer .ft2-pitch, .fmds-footer .ft2-bar { display: none !important; }
.fmds-footer .ft2-big { font-size: 24px !important; line-height: 1.15; margin: 6px 0 14px !important; }
.fmds-footer .ft2-big br { display: none; }
.fmds-footer .ft2-status { font-size: 11px; margin: 0; }
.fmds-footer .ft2-term { border: 0 !important; background: none !important; padding: 0 !important; margin: 0 !important; box-shadow: none !important; }
.fmds-footer .ft2-cols { display: block !important; }
.fmds-footer .ft2-col { display: block !important; border-top: 1px solid rgba(255,255,255,.08); }
.fmds-footer .ft2-col a { font-size: 13px; padding: 8px 0; }
.fmds-footer .ft2-legal { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; padding-top: 12px; margin-top: 10px; font-size: 11px; }
.fmds-footer .ft2-legal-links { display: flex; gap: 12px; flex-wrap: wrap; }
.fmds-footer .ft2-big em { margin-left: .25em; }

/* Carousels: finger swipe with slim dots, no bulky arrow buttons */
.fm-car-prev, .fm-car-next { display: none !important; }
.fm-car-nav { margin-top: 8px; }

.sd-inner { grid-template-columns: 1fr !important; }

/* Text must fit its card: wrap long words, no clipping */
main p, main li, main h1, main h2, main h3, main h4, main span, main a { overflow-wrap: break-word; word-break: normal; }
.sd-card, .sd-body, .sd-inner, .sd-inner > * { min-width: 0; }
.sd-rail { flex-wrap: nowrap; gap: 12px; padding: 16px 18px 6px; }
.sd-t { font-size: 1.05rem; line-height: 1.25; flex: 1; min-width: 0; }
.sd-inner { padding-left: 18px !important; padding-right: 18px !important; }
.sd-card ul { padding-left: 1.1rem; }
.fm-car > * { box-sizing: border-box; overflow: visible; }

/* Use the full screen width: one card fills the row */
.fm-car > *, .sd-card, .timeline > .tl-item, .process-deck > *, .fm-car.process-deck > * { flex: 0 0 100% !important; max-width: 100% !important; width: 100% !important; }
.fm-car, .sd-deck { gap: 10px !important; }

/* Services: "AI lets anyone build" boxes, normal look, no fade, no dead gap */
.sv-vm { height: auto !important; -webkit-mask-image: none !important; mask-image: none !important; overflow: visible !important; display: block !important; }
.sv-vcol { overflow: visible !important; }
.sv-split { gap: 1.25rem !important; }
.sv-section .sv-vtrack { animation: none !important; transform: none !important; }
.sv-vcol .sv-why-c[aria-hidden] { display: none !important; }
.sv-section { padding-top: 32px !important; padding-bottom: 32px !important; }

/* Services: tools strip keeps moving on mobile */
.tl-inner { animation-name: tl-l !important; animation-duration: 38s !important; animation-iteration-count: infinite !important; animation-timing-function: linear !important; }
.tl-row.rev .tl-inner { animation-name: tl-r !important; animation-duration: 44s !important; }
.tl-wrap { overflow: hidden !important; display: flex !important; }
.tl-row, .tl-inner { display: flex !important; }

/* Case studies: no snake border or glow, no travelling colour */
.chs-snake, .cs-hero-glow, .cs-hero .hero-glow { display: none !important; }
.cs-hero-show { box-shadow: none !important; }

/* Hero sits right under the 56px mobile bar: trim the desktop top padding */
.cs-hero, .about-hero, .ct-hero, .sv-hero, .section-hero, .gd-hero, .legal-hero, .wd-hero, .pd-hero, .se-hero, .sp-hero, .ar-hero { padding-top: 28px !important; }
main > section:first-child, #main > section:first-child { padding-top: min(28px, 100%) !important; }
.work-hero, .archive-hero { padding-top: 28px !important; }

/* About: "Three ways we can help" as a closed accordion stack */
.about-grid-3 { display: flex !important; flex-direction: column; gap: 10px !important; }
.about-grid-3 > .about-cell { padding: 14px 44px 14px 16px !important; position: relative; min-height: 0 !important; }
.about-grid-3 > .about-cell h3 { margin: 0 !important; font-size: 1.05rem; }
.about-grid-3 > .about-cell .about-num { display: inline-block; margin-bottom: 4px; }
.about-grid-3 > .about-cell::after { content: '+'; position: absolute; right: 16px; top: 14px; font-size: 1.4rem; line-height: 1; color: var(--purple-light); }
.about-grid-3 > .about-cell.is-open::after { content: '\2212'; }
.about-grid-3 > .about-cell p, .about-grid-3 > .about-cell .about-more { display: none !important; }
.about-grid-3 > .about-cell.is-open p { display: block !important; margin: 10px 0 0 !important; }
.about-grid-3 > .about-cell.is-open .about-more { display: inline-block !important; margin-top: 10px; }

/* Web design: "How a project runs" as a swipe carousel, CTA tile under it */
.wd-row { display: block !important; }
.wd-row .wd-marq, .wd-marq { display: block !important; overflow: visible !important; -webkit-mask-image: none !important; mask-image: none !important; width: 100% !important; }
.wd-row .wd-marq .wd-mtrack, .wd-mtrack { display: block !important; width: 100% !important; transform: none !important; animation: none !important; }
.wd-pane .wd-steps[aria-hidden] { display: none !important; }
.wd-pane .wd-steps { display: flex !important; width: 100% !important; flex: none !important; overflow-x: auto; gap: 12px; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 0 0 6px !important; }
.wd-pane .wd-steps::-webkit-scrollbar { display: none; }
.wd-pane .wd-step { flex: 0 0 100% !important; width: 100% !important; max-width: 100% !important; min-height: 0 !important; scroll-snap-align: start; box-sizing: border-box; }
.wd-cta-fixed { width: 100% !important; flex-basis: auto !important; min-height: 0 !important; margin-top: 12px; box-sizing: border-box; }
.wd-hint { display: none !important; }
.wd-how-head { display: block !important; }
.wd-how-head .wd-tablist { display: flex !important; margin-top: 14px !important; }

/* SaaS: "How a product gets built" as a swipe carousel, same as web design */
.pd-row { display: block !important; }
.pd-row .pd-marq, .pd-marq { display: block !important; overflow: visible !important; -webkit-mask-image: none !important; mask-image: none !important; width: 100% !important; }
.pd-mtrack { display: block !important; width: 100% !important; transform: none !important; animation: none !important; }
.pd-pane .pd-steps[aria-hidden] { display: none !important; }
.pd-pane .pd-steps { display: flex !important; width: 100% !important; flex: none !important; overflow-x: auto; gap: 12px; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 0 0 6px !important; }
.pd-pane .pd-steps::-webkit-scrollbar { display: none; }
.pd-pane .pd-step { flex: 0 0 100% !important; width: 100% !important; max-width: 100% !important; min-height: 0 !important; scroll-snap-align: start; box-sizing: border-box; }
.pd-cta-fixed { width: 100% !important; flex-basis: auto !important; min-height: 0 !important; margin-top: 12px; box-sizing: border-box; }
.pd-hint { display: none !important; }
.pd-how-head { display: block !important; }
.pd-how-head .pd-tablist { display: flex !important; margin-top: 14px !important; }

/* SaaS: product-build viewer: one card at a time, working arrows */
.dv-app { box-shadow: none !important; }
.dv-stage { min-height: 0 !important; display: block !important; overflow: visible !important; }
.dv-slide { display: none !important; grid-template-columns: 1fr !important; padding: 1.1rem !important; animation: none !important; }
.dv-slide.is-on { display: block !important; }
.dv-content { padding: 14px !important; }
.dv-nav { margin-left: 0 !important; width: 100%; justify-content: space-between; }
.dv-arrow { width: 44px !important; height: 44px !important; }

/* Services: keep the swipe pills inside the screen, one pill fills the width */
.sv-split, .sv-split > *, .sv-vm, .sv-vcol, .fm-car-wrap { min-width: 0 !important; max-width: 100% !important; }
.sv-split { grid-template-columns: minmax(0, 1fr) !important; }
.sv-vm, .sv-vcol { width: 100% !important; }
.sv-section .sv-vtrack { width: 100% !important; max-width: 100% !important; }
.sv-section .sv-vtrack > .sv-why-c { flex: 0 0 100% !important; max-width: 100% !important; width: 100% !important; box-sizing: border-box; }

/* Web design: "Hi, I'm Gameed" block and expectation tiles, use the full width, never clip */
.wd-me { grid-template-columns: minmax(0, 1fr) !important; gap: 16px !important; }
.wd-me > *, .wd-about, .wd-expect-wrap, .ex-deck, .ex-card { min-width: 0 !important; max-width: 100% !important; }
.wd-about { padding: 20px 18px !important; }
.wd-about p, .wd-about h3, .wd-me-note, .ex-t, .ex-inner p { overflow-wrap: anywhere; word-break: normal; hyphens: auto; }
.ex-rail { padding: 14px 14px !important; gap: 12px !important; }
.ex-t { flex: 1; min-width: 0; font-size: 1rem; line-height: 1.35; }
.ex-card.is-active .ex-inner { padding: 0 14px 16px !important; }
.wd-about-cta { display: flex; flex-wrap: wrap; gap: 10px; }

/* "Here's what you can expect": swipe cards, every card open */
.ex-deck { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; overflow-x: auto; gap: 12px !important; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 6px; }
.ex-deck::-webkit-scrollbar { display: none; }
.ex-deck > .ex-card { flex: 0 0 100% !important; max-width: 100% !important; width: 100% !important; scroll-snap-align: start; box-sizing: border-box; border-color: rgba(107,61,150,.5) !important; }
.ex-rail { pointer-events: none; cursor: default; align-items: flex-start !important; }
.ex-rail::after, .ex-rail::before { display: none !important; }
.ex-body { grid-template-rows: 1fr !important; }
.ex-card .ex-inner, .ex-card.is-active .ex-inner { padding: 0 14px 18px !important; }
.ex-card .ex-t { color: var(--fg) !important; }
.wd-about p, .wd-about h3, .wd-me-note, .ex-t, .ex-inner p { hyphens: manual !important; }

/* Home: school dashboard tile fits the screen, no fake browser bar */
.sx-grid { grid-template-columns: minmax(0, 1fr) !important; gap: 18px !important; }
.sx-grid > *, .sx-stage, .sx-frame, .sx-view { min-width: 0 !important; max-width: 100% !important; width: 100% !important; }
.sx-bar { display: none !important; }
.sx-view::after { display: none !important; }
.sx-frame { border-radius: 12px !important; }
.sx-pane img { object-fit: contain; object-position: center; }

/* Founder page: hero starts right under the header */
.hero { min-height: 0 !important; align-items: flex-start !important; padding-top: 24px !important; padding-bottom: 32px !important; }
.hero-grid { padding-top: 0 !important; padding-bottom: 0 !important; align-items: start !important; }

/* Footer link groups as a closed accordion */
.fmds-footer .ft2-h { display: flex !important; align-items: center; justify-content: space-between; padding: 14px 2px; font-size: 14px !important; color: #eef0f6 !important; cursor: pointer; letter-spacing: .02em; text-transform: none !important; }
.fmds-footer .ft2-h::after { content: '+'; font-size: 20px; line-height: 1; color: #a874d6; }
.fmds-footer .ft2-col.is-open > .ft2-h::after { content: '\2212'; }
.fmds-footer .ft2-col > a { display: none !important; }
.fmds-footer .ft2-col.is-open > a { display: block !important; padding: 9px 0 9px 8px !important; font-size: 14px; }
.fmds-footer .ft2-col.is-open { padding-bottom: 8px; }
.fmds-footer .ft2-cols { border-bottom: 1px solid rgba(255,255,255,.08); }
.fmds-footer .ft2-col > a, .fmds-footer .ft2-col.is-open > a { color: #a874d6 !important; }
.fmds-footer .ft2-col > a:hover, .fmds-footer .ft2-col > a:active { color: #c4a4ea !important; }
.fmds-footer .ft2-h { color: #fff !important; }

/* TEST (?heroimg=1): hero image behind the text, dimmed */
html.hero-img-test #hero { position: relative; isolation: isolate; }
html.hero-img-test #hero::before { content: ''; position: absolute; inset: 0; z-index: 0; display: block !important;
  background: linear-gradient(180deg, rgba(11,11,16,.78), rgba(11,11,16,.92)), url('https://fmdigitalsolutions.co.za/wp-content/uploads/2026/10/Screenshot-2026-10-19-at-09.39.06-1024x581.webp') center top / cover no-repeat; }


/* a11y contrast: lift low-contrast greys/purples to >=4.5:1 on mobile */
:root{--fg-subtle:#9AA0AC}
.trust-sub,.service-num,.process-num,.tc-comment,.ft2-sep,.f-label.sec-idx,.status-sub,.form-note,.process-deliverable{color:#9AA0AC !important}
.chip-purple{color:#D2B4EE !important}
a.f-mono,.f-mono{color:#C9A3EA}
.fmds-footer .ft2-sep{color:#9AA0AC !important}