/* D113 + D348 (28 Oct): Arial sized like Plus Jakarta Sans, one face per weight (Arial Bold for 600-800; Chrome's fake bold keeps
   regular widths), so text does not reflow when the web font arrives. Measured in Chrome 28 Oct: width per weight, ascent 1.04em,
   descent 0.22em. Widths of text boxes are in em, not ch: "ch" follows the font's "0" and changes when the font swaps. */
@font-face{ font-family: "PJ Fallback"; font-weight: 400; src: local("Arial"), local("ArialMT"), local("Helvetica"), local("Liberation Sans");
    size-adjust: 104.9%; ascent-override: 99.1%; descent-override: 21.0%; line-gap-override: 0%; }
@font-face{ font-family: "PJ Fallback"; font-weight: 500; src: local("Arial"), local("ArialMT"), local("Helvetica"), local("Liberation Sans");
    size-adjust: 106.1%; ascent-override: 98.0%; descent-override: 20.7%; line-gap-override: 0%; }
@font-face{ font-family: "PJ Fallback"; font-weight: 600; src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Bold"), local("Helvetica-Bold"), local("Liberation Sans Bold");
    size-adjust: 100.0%; ascent-override: 104.0%; descent-override: 22.0%; line-gap-override: 0%; }
@font-face{ font-family: "PJ Fallback"; font-weight: 700; src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Bold"), local("Helvetica-Bold"), local("Liberation Sans Bold");
    size-adjust: 101.0%; ascent-override: 103.0%; descent-override: 21.8%; line-gap-override: 0%; }
@font-face{ font-family: "PJ Fallback"; font-weight: 800; src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Bold"), local("Helvetica-Bold"), local("Liberation Sans Bold");
    size-adjust: 102.1%; ascent-override: 101.9%; descent-override: 21.5%; line-gap-override: 0%; }
/* ================================================================
   D78 sample redesign (branch build/d78-redesign; not on staging until the user's yes).
   Same HTML; this layer restyles it: one font, sentence case, a pastel tint system with brand-blue actions,
   cards like Google's, step chips, an "On this page" chip bar and light motion (off under reduced motion).
   ================================================================ */
:root{
    --m-font: "Plus Jakarta Sans", "PJ Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
    --m-paper: #ffffff; --m-surface: #f5f7fb; --m-line: #e3e8f0;
    --m-ink: #1b2333; --m-ink-2: #46506a; --m-ink-3: #6b7489;
    --m-blue: #0b5fd9; --m-blue-ink: #ffffff; --m-blue-soft: #e5f0ff;
    --t-sky: #e5f0ff;      --i-sky: #0b4a9e;
    --t-mint: #dcf5e9;     --i-mint: #0e6b44;
    --t-peach: #ffe7da;    --i-peach: #9a3b0e;
    --t-lavender: #ece7ff; --i-lavender: #4e35a6;
    --t-butter: #fff3c9;   --i-butter: #765600;
    --t-rose: #ffe4ee;     --i-rose: #9b1e4f;
    --t-teal: #d9f3f2;     --i-teal: #0d6464;
    --tint: var(--t-sky); --tint-ink: var(--i-sky);
    --m-r-lg: 24px; --m-r: 18px; --m-r-sm: 12px;
    --m-shadow: 0 1px 2px rgb(27 35 51 / 6%), 0 2px 8px rgb(27 35 51 / 5%);
    --m-shadow-up: 0 6px 18px rgb(27 35 51 / 10%), 0 2px 4px rgb(27 35 51 / 6%);
}
body.isM3[data-tint="sky"]{ --tint: var(--t-sky); --tint-ink: var(--i-sky); }
body.isM3[data-tint="mint"]{ --tint: var(--t-mint); --tint-ink: var(--i-mint); }
body.isM3[data-tint="peach"]{ --tint: var(--t-peach); --tint-ink: var(--i-peach); }
body.isM3[data-tint="lavender"]{ --tint: var(--t-lavender); --tint-ink: var(--i-lavender); }
body.isM3[data-tint="butter"]{ --tint: var(--t-butter); --tint-ink: var(--i-butter); }
body.isM3[data-tint="rose"]{ --tint: var(--t-rose); --tint-ink: var(--i-rose); }
body.isM3[data-tint="teal"]{ --tint: var(--t-teal); --tint-ink: var(--i-teal); }

/* ---------- one font, sentence case, calm ink ---------- */
html.isM3, body.isM3{ background: var(--m-paper) !important; color: var(--m-ink) !important; }
body.isM3, body.isM3 :where(*:not(i):not(.fa):not([class*="fa-"]):not(code):not(svg):not(svg *)){
    font-family: var(--m-font) !important; font-stretch: normal !important; font-variation-settings: normal !important; }
body.isM3 :where(h1, h2, h3, h4, .pgTitle, .pgHeroTitle, .ctaTitle, .faqTitle, .pgEyebrow, .pgHeroSub, .pgCrumb, .pgRowHead,
    .menuWrap a, .menuCta, .pgBtn, .peByline, .peByline span, .ftSiteTitle, .ftTitle, .faqQ i, .pgCardNum, .peHookBtn, .peProofMore,
    .ctaBtn, .ftPlanBtn, .ftCopyBtn, .ctaEyebrow, .ftCtaEyebrow, .peTag, .pePriceSub, .peNextNum, .pgStepNum, .ftReachLabel, .ftClock){
    text-transform: none !important; letter-spacing: normal !important; }
body.isM3 :where(p, li, td, th, dd, .pgText, .pgProse p){ color: var(--m-ink-2); }
body.isM3 :where(p, li){ line-height: 1.65; }
body.isM3 h1, body.isM3 h2, body.isM3 h3, body.isM3 .pgTitle, body.isM3 .pgHeroTitle{ color: var(--m-ink) !important; }
body.isM3 .pgTitle em, body.isM3 .pgHeroTitle em, body.isM3 .ctaTitle em, body.isM3 .faqTitle em, body.isM3 .ctaTitle .outline{
    font-style: normal !important; color: inherit !important; -webkit-text-stroke: 0 !important; }
body.isM3 .pgTitle .pgLine, body.isM3 .pgTitle .pgIn, body.isM3 .pgHeroTitle .pgHeroLine, body.isM3 .pgHeroTitle .pgHeroIn,
body.isM3 .ctaTitle .ctaLine, body.isM3 .ctaTitle .ctaIn{ display: inline !important; overflow: visible !important; white-space: normal !important; }
body.isM3 .pgTitle .pgLine + .pgLine::before, body.isM3 .pgHeroTitle .pgHeroLine + .pgHeroLine::before,
body.isM3 .ctaTitle .ctaLine + .ctaLine::before{ content: " "; }
body.isM3 .pgHeroTitle[data-dot] .pgHeroLine:last-child .pgHeroIn::after{ content: none !important; }
body.isM3 .pgTitle{ font-size: clamp(26px, 2.6vw, 38px) !important; font-weight: 800 !important; line-height: 1.18 !important; letter-spacing: -0.02em !important; max-width: 16.8em;   /* = 24ch in Plus Jakarta Sans 800 */ }
body.isM3 .pgText, body.isM3 .pgHead > p{ font-size: 17px !important; max-width: 62ch; }

/* section label: a small tinted chip, sentence case, no running number */
body.isM3 .pgEyebrow{ display: inline-flex !important; align-items: center; gap: 6px; width: auto !important; padding: 5px 12px !important; margin-bottom: 14px !important;
    border-radius: 999px; background: var(--tint); color: var(--tint-ink) !important; font-size: 13px !important; font-weight: 700 !important; }
body.isM3 .pgEyebrow::before, body.isM3 .pgEyebrow::after{ display: none !important; }
body.isM3 .pgEyebrow > i{ display: none !important; }

/* ---------- layout rhythm ---------- */
body.isM3 main > section{ background: transparent !important; border: 0 !important; }
body.isM3 main > section:not(.pgHero):not(.ctaWrap):not(.peHook):not(.peLesson):not(.peBand):not(.peBrandNote):not(.m3Belief){ padding-top: clamp(40px, 5vw, 72px) !important; padding-bottom: clamp(40px, 5vw, 72px) !important; }
body.isM3 main > section.isAlt, body.isM3 main > .peProof, body.isM3 main > .peNext{ background: var(--m-surface) !important; }
body.isM3 .pgWrap{ max-width: 1160px; }
body.isM3 .pgHead{ text-align: left !important; margin-left: 0 !important; }

/* ---------- header: white bar, quiet links, one blue pill ---------- */
body.isM3 .headerWrap, body.isM3 .headerWrap.isSticky{ background: rgb(255 255 255 / 92%) !important; backdrop-filter: blur(12px); border-bottom: 1px solid var(--m-line) !important; padding-top: 6px !important; padding-bottom: 6px !important; }
body.isM3 .headerWrap .headerInner .menuWrap{ background: transparent !important; border: 0 !important; backdrop-filter: none !important; }
body.isM3 .headerWrap .headerInner .menuWrap > ul > li > a{ color: var(--m-ink) !important; font-size: 15px !important; font-weight: 600 !important; }
body.isM3 .headerWrap .headerInner .menuWrap > ul > li > a:hover, body.isM3 .headerWrap .headerInner .menuWrap > ul > li.isActive > a{ color: var(--m-blue) !important; }
body.isM3 .headerWrap .headerInner .menuWrap .menuCta, body.isM3 .menuCta{ background: var(--m-blue) !important; color: #fff !important; font-size: 15px !important; font-weight: 700 !important; border-radius: 999px !important; height: 44px; padding: 0 22px !important; }
body.isM3 .headerWrap .headerInner .menuWrap > ul > li .subMenu{ background: #fff !important; border: 1px solid var(--m-line) !important; border-radius: var(--m-r) !important; box-shadow: var(--m-shadow-up) !important; }
body.isM3 .headerWrap .headerInner .menuWrap > ul > li .subMenu li a{ color: var(--m-ink) !important; font-size: 14px !important; }
body.isM3 .peMega .megaHead{ color: var(--m-ink) !important; font-size: 14px !important; border-bottom-color: var(--m-line) !important; }
body.isM3 .peMega li a small, body.isM3 .peMega .megaPromise{ color: var(--m-ink-3) !important; }
body.isM3 .peNavIcon, body.isM3 .peHeadCall{ background: var(--m-surface) !important; border-color: var(--m-line) !important; color: var(--m-ink) !important; border-radius: 999px !important; }
body.isM3 .peNavIcon.isWa, body.isM3 .peHeadCall.isWa{ color: #0e7a3c !important; }
body.isM3 .themeToggle, body.isM3 [class*="themeSwitch"], body.isM3 .peTheme{ display: none !important; }

/* ---------- buttons: pills ---------- */
body.isM3 .pgBtn, body.isM3 .ctaBtn, body.isM3 .ftPlanBtn, body.isM3 .peHookBtn{ border-radius: 999px !important; font-size: 15px !important; font-weight: 700 !important; min-height: 48px; padding: 0 24px !important;
    display: inline-flex !important; align-items: center; gap: 8px; box-shadow: none !important; }
body.isM3 .pgBtn.primary, body.isM3 .ctaBtn.solid, body.isM3 .ftPlanBtn, body.isM3 .peHookBtn{ background: var(--m-blue) !important; border-color: var(--m-blue) !important; color: #fff !important; }
body.isM3 .pgBtn.ghost, body.isM3 .ctaBtn:not(.solid){ background: #fff !important; border: 1px solid var(--m-line) !important; color: var(--m-blue) !important; }
body.isM3 .pgBtn:hover, body.isM3 .ctaBtn:hover{ filter: brightness(0.96); }
body.isM3 .btnArrow{ display: none; }

/* ---------- hero: text left, a pastel tile cluster right ---------- */
body.isM3 .pgHero{ min-height: 0 !important; height: auto !important; padding: 128px 0 56px !important; background: linear-gradient(180deg, var(--m-surface), #fff) !important; overflow: hidden; }
body.isM3 .pgHero .pgCircle{ display: none !important; }
body.isM3 .pgHero .pgHeroInner{ max-width: 1160px !important; margin: 0 auto !important; padding: 0 24px !important; text-align: left !important; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); column-gap: 48px; align-items: center; }
body.isM3 .pgHero .pgHeroInner > *{ grid-column: 1; justify-self: start !important; text-align: left !important; margin-left: 0 !important; }
body.isM3 .pgHero .pgHeroInner > .m3Tiles{ grid-column: 2; grid-row: 1 / span 8; justify-self: stretch !important; }
body.isM3 .pgCrumb{ font-size: 13px !important; color: var(--m-ink-3) !important; }
body.isM3 .pgCrumb a{ color: var(--m-ink-3) !important; }
body.isM3 .pgHeroSub{ display: flex !important; flex-wrap: wrap; gap: 8px; margin: 14px 0 10px !important; font-size: 13px !important; font-weight: 600 !important; }
body.isM3 .pgHeroSub span{ padding: 5px 12px; border-radius: 999px; background: var(--tint); color: var(--tint-ink); }
body.isM3 .pgHeroSub i{ display: none !important; }
body.isM3 .pgHeroTitle{ font-size: clamp(34px, 4.6vw, 60px) !important; font-weight: 800 !important; line-height: 1.08 !important; letter-spacing: -0.03em !important; max-width: 11.2em;   /* = 16ch in Plus Jakarta Sans 800 */ margin: 6px 0 16px !important; }
body.isM3 .pgHeroLead{ font-size: 19px !important; line-height: 1.6 !important; color: var(--m-ink-2) !important; max-width: 38em !important;   /* = 52ch in Plus Jakarta Sans */ margin: 0 0 22px !important; }
body.isM3 .pgHeroLead em, body.isM3 .pgHeroLead strong{ color: var(--m-ink) !important; font-style: normal; }
body.isM3 .pgHeroBtns, body.isM3 .pgHero .pgBtns{ justify-content: flex-start !important; gap: 10px !important; }
body.isM3 .peByline{ justify-content: flex-start !important; font-size: 13px !important; color: var(--m-ink-3) !important; opacity: 1 !important; margin-top: 18px !important; }
body.isM3 .peAdviceNote{ text-align: left; margin-left: 0; }
.m3Tiles{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; aspect-ratio: 1 / 1; max-width: 420px; margin-left: auto; }
.m3Tile{ border-radius: var(--m-r-lg); display: flex; align-items: center; justify-content: center; font-size: clamp(22px, 2.6vw, 34px); }
.m3Tile:nth-child(1){ grid-column: span 2; border-radius: var(--m-r-lg) var(--m-r-lg) var(--m-r-lg) 6px; }
.m3Tile:nth-child(4){ grid-row: span 2; border-radius: 999px; }
.m3Tile:nth-child(5){ border-radius: 50%; }
.m3Tile:nth-child(6){ grid-column: span 2; }
.m3Tile i{ transition: transform 0.4s ease; }
.m3Tile:hover i{ transform: scale(1.12) rotate(-6deg); }

/* ---------- "On this page" chips ---------- */
.m3Toc{ position: sticky; top: var(--m3-top, 72px); z-index: 20; background: rgb(255 255 255 / 94%); backdrop-filter: blur(10px); border-bottom: 1px solid var(--m-line); }
.m3TocInner{ max-width: 1160px; margin: 0 auto; padding: 10px 24px; display: flex; align-items: center; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.m3TocInner::-webkit-scrollbar{ display: none; }
.m3TocLabel{ flex: 0 0 auto; font-size: 13px; font-weight: 700; color: var(--m-ink-3); margin-right: 4px; }
.m3Toc a{ flex: 0 0 auto; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--m-line); background: #fff; color: var(--m-ink-2); font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap; transition: background 0.2s, color 0.2s, border-color 0.2s; }
.m3Toc a:hover{ border-color: var(--tint-ink); color: var(--tint-ink); }
.m3Toc a.isOn{ background: var(--tint); border-color: transparent; color: var(--tint-ink); }

/* ---------- cards like Google: soft, rounded, tinted in turn ---------- */
body.isM3 .pgCard, body.isM3 .peSvcCard{ background: #fff !important; border: 1px solid var(--m-line) !important; border-radius: var(--m-r) !important; box-shadow: var(--m-shadow) !important;
    padding: 22px !important; transition: transform 0.25s ease, box-shadow 0.25s ease; min-height: 0 !important; }
body.isM3 a.pgCard:hover, body.isM3 .peSvcCard:hover{ transform: translateY(-3px); box-shadow: var(--m-shadow-up) !important; }
body.isM3 .pgCard h3, body.isM3 .peSvcCard h3{ font-size: 18px !important; font-weight: 700 !important; line-height: 1.3 !important; margin: 12px 0 6px !important; }
body.isM3 .pgCard p, body.isM3 .peSvcCard p{ font-size: 15px !important; color: var(--m-ink-2) !important; }
body.isM3 .pgCardNum{ display: none !important; }
body.isM3 .pgCardIcon, body.isM3 .peSvcCard .peSvcIcon, body.isM3 .peSvcCard > i:first-child{ width: 48px; height: 48px; border-radius: 14px; display: inline-flex !important; align-items: center; justify-content: center; }
body.isM3 .pgCardIcon svg{ width: 24px; height: 24px; }
body.isM3 .pgCardGo{ color: var(--m-ink-3) !important; }
/* the seven tints, in turn */
body.isM3 :is(.pgGrid, .peSvcGrid, .pgCardsGrid, .peSvcRow) > :nth-child(7n+1){ --c: var(--t-sky); --ci: var(--i-sky); }
body.isM3 :is(.pgGrid, .peSvcGrid, .pgCardsGrid, .peSvcRow) > :nth-child(7n+2){ --c: var(--t-mint); --ci: var(--i-mint); }
body.isM3 :is(.pgGrid, .peSvcGrid, .pgCardsGrid, .peSvcRow) > :nth-child(7n+3){ --c: var(--t-peach); --ci: var(--i-peach); }
body.isM3 :is(.pgGrid, .peSvcGrid, .pgCardsGrid, .peSvcRow) > :nth-child(7n+4){ --c: var(--t-lavender); --ci: var(--i-lavender); }
body.isM3 :is(.pgGrid, .peSvcGrid, .pgCardsGrid, .peSvcRow) > :nth-child(7n+5){ --c: var(--t-butter); --ci: var(--i-butter); }
body.isM3 :is(.pgGrid, .peSvcGrid, .pgCardsGrid, .peSvcRow) > :nth-child(7n+6){ --c: var(--t-rose); --ci: var(--i-rose); }
body.isM3 :is(.pgGrid, .peSvcGrid, .pgCardsGrid, .peSvcRow) > :nth-child(7n+7){ --c: var(--t-teal); --ci: var(--i-teal); }
body.isM3 .pgCardIcon, body.isM3 .peSvcCard > i:first-child, body.isM3 .peSvcCard .peSvcIcon{ background: var(--c, var(--tint)) !important; color: var(--ci, var(--tint-ink)) !important; }
body.isM3 .pgCard.isLink:hover, body.isM3 .peSvcCard:hover{ border-color: var(--ci, var(--tint-ink)) !important; }
body.isM3 .pePlatform, body.isM3 .pePlatforms span, body.isM3 [class*="peChip"]{ border-radius: 999px !important; background: var(--m-surface) !important; border-color: var(--m-line) !important; color: var(--m-ink-2) !important; }

/* ---------- intro: the answer as a highlighted card ---------- */
body.isM3 .pgIntroLead{ font-size: 20px !important; line-height: 1.55 !important; color: var(--m-ink) !important; background: var(--tint); border-radius: var(--m-r-lg); padding: 22px 24px !important; font-weight: 500 !important; }
body.isM3 .pgIntroGrid{ align-items: start !important; }

/* ---------- facts: pastel stat tiles ---------- */
body.isM3 .peProofList{ display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 14px !important; border: 0 !important; }
body.isM3 .peProofItem{ border: 0 !important; border-radius: var(--m-r) !important; padding: 20px !important; }
body.isM3 .peProofItem:nth-child(4n+1){ background: var(--t-sky); --ci: var(--i-sky); }
body.isM3 .peProofItem:nth-child(4n+2){ background: var(--t-mint); --ci: var(--i-mint); }
body.isM3 .peProofItem:nth-child(4n+3){ background: var(--t-peach); --ci: var(--i-peach); }
body.isM3 .peProofItem:nth-child(4n+4){ background: var(--t-lavender); --ci: var(--i-lavender); }
body.isM3 .peProofItem b{ color: var(--ci) !important; font-size: clamp(30px, 3vw, 42px) !important; font-weight: 800 !important; letter-spacing: -0.02em; }
body.isM3 .peProofItem span{ color: var(--m-ink-2) !important; font-size: 14px !important; }
body.isM3 .peProofMore{ color: var(--m-blue) !important; font-weight: 700 !important; }

/* ---------- steps: numbered chips (these really are sequences) ---------- */
body.isM3 .pgStepList, body.isM3 .peNextList{ display: grid !important; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)) !important; gap: 14px !important; counter-reset: none; }
body.isM3 .pgStep, body.isM3 .peNextStep{ background: #fff !important; border: 1px solid var(--m-line) !important; border-radius: var(--m-r) !important; padding: 22px !important; box-shadow: var(--m-shadow); }
body.isM3 .pgStepNum, body.isM3 .peNextNum{ display: inline-flex !important; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%;
    background: var(--tint) !important; color: var(--tint-ink) !important; font-size: 15px !important; font-weight: 800 !important; margin-bottom: 10px; }
body.isM3 .pgStep h3, body.isM3 .peNextStep h3{ font-size: 18px !important; font-weight: 700 !important; }
body.isM3 .pgStep::before, body.isM3 .pgStep::after, body.isM3 .peNextStep::before, body.isM3 .peNextStep::after{ display: none !important; }

/* ---------- folds: Google-style accordions ---------- */
body.isM3 .peDeeperBox, body.isM3 .peSecFold{ background: #fff !important; border: 1px solid var(--m-line) !important; border-radius: var(--m-r) !important; box-shadow: var(--m-shadow); overflow: hidden; }
body.isM3 .peDeeperBox > summary{ padding: 18px 22px !important; font-size: 18px !important; font-weight: 700 !important; color: var(--m-ink) !important; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
body.isM3 .peDeeperBox > summary::after{ content: "" !important; width: 10px; height: 10px; border-right: 2px solid var(--tint-ink); border-bottom: 2px solid var(--tint-ink); transform: rotate(45deg); transition: transform 0.25s; flex: 0 0 auto; }
body.isM3 .peDeeperBox[open] > summary::after{ transform: rotate(-135deg); }
body.isM3 .peDeeperBox[open] > summary{ background: var(--tint); }
body.isM3 .peDeeperBox > .pgProse{ padding: 6px 22px 20px !important; }
body.isM3 main > .peDeeper{ padding-top: 10px !important; padding-bottom: 10px !important; }

/* ---------- invitations, lessons, notes ---------- */
body.isM3 .peHook{ padding: 12px 0 !important; }
body.isM3 .peHookLine{ background: var(--m-blue-soft) !important; color: var(--m-ink) !important; border-radius: var(--m-r-lg) !important; padding: 18px 22px !important; font-size: 16px !important; }
body.isM3 .peLessonBox{ background: var(--t-butter) !important; border: 0 !important; border-radius: var(--m-r-lg) !important; padding: 22px !important; }
body.isM3 .peLessonBox > i{ color: var(--i-butter) !important; background: #fff; width: 44px; height: 44px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; }
body.isM3 .peLessonText{ color: var(--m-ink) !important; }
body.isM3 .peLessonSrc{ color: var(--m-ink-3) !important; }
body.isM3 .peBrandNote p{ color: var(--m-ink-3) !important; font-size: 13px !important; }

/* ---------- cost, tables ---------- */
body.isM3 .pePriceFrom{ background: #fff; border-radius: var(--m-r); padding: 18px 20px; border: 1px solid var(--m-line); color: var(--m-ink) !important; }
body.isM3 .pePriceFactors{ display: flex !important; flex-wrap: wrap; gap: 8px !important; list-style: none !important; padding: 0 !important; }
body.isM3 .pePriceFactors li{ background: #fff; border: 1px solid var(--m-line); border-radius: 999px; padding: 8px 14px !important; font-size: 14px !important; }
body.isM3 .pePriceFactors li::before{ display: none !important; }
body.isM3 .peTable{ border-radius: var(--m-r) !important; overflow: hidden; border: 1px solid var(--m-line) !important; background: #fff; }
body.isM3 .peTable th{ background: var(--m-surface) !important; color: var(--m-ink) !important; font-weight: 700 !important; }
body.isM3 .peTable td, body.isM3 .peTable th{ border-color: var(--m-line) !important; }

/* ---------- related links: rows become chips ---------- */
body.isM3 .pgRows{ display: flex !important; flex-wrap: wrap; gap: 8px !important; }
body.isM3 .pgRows li{ border: 0 !important; }
body.isM3 .pgRow{ display: inline-flex !important; align-items: center; gap: 8px; padding: 9px 14px !important; border-radius: 999px !important; background: var(--m-surface) !important; border: 1px solid var(--m-line) !important; color: var(--m-ink) !important; font-size: 14px !important; font-weight: 600 !important; }
body.isM3 .pgRow > i{ display: none !important; }
body.isM3 .pgRow:hover{ background: var(--tint) !important; color: var(--tint-ink) !important; }
body.isM3 .pgRowHead{ color: var(--m-ink) !important; font-size: 15px !important; font-weight: 700 !important; }

/* ---------- closing block + FAQ ---------- */
body.isM3 .ctaWrap{ background: var(--m-surface) !important; padding: clamp(48px, 6vw, 88px) 0 !important; }
body.isM3 .ctaWrap .ctaSide{ background: var(--m-blue); border-radius: var(--m-r-lg); padding: clamp(24px, 3vw, 40px) !important; }
body.isM3 .ctaWrap .ctaSide *, body.isM3 .ctaWrap .ctaTitle{ color: #fff !important; }
body.isM3 .ctaWrap .ctaTitle{ font-size: clamp(28px, 3vw, 40px) !important; font-weight: 800 !important; line-height: 1.15 !important; }
body.isM3 .ctaWrap .ctaSide .ctaBtn.solid{ background: #fff !important; color: var(--m-blue) !important; border-color: #fff !important; }
body.isM3 .ctaWrap .ctaSide .ctaBtn:not(.solid){ background: transparent !important; color: #fff !important; border-color: rgb(255 255 255 / 55%) !important; }
body.isM3 .faqTitle{ font-size: clamp(24px, 2.4vw, 32px) !important; font-weight: 800 !important; }
body.isM3 .faqItem{ background: #fff; border: 1px solid var(--m-line) !important; border-radius: var(--m-r) !important; margin-bottom: 10px !important; overflow: hidden; }
body.isM3 .faqQ{ padding: 16px 18px !important; font-size: 16px !important; font-weight: 700 !important; color: var(--m-ink) !important; }
body.isM3 .faqQ > i{ display: none !important; }
body.isM3 .faqA p{ padding: 0 18px 16px; }

/* ---------- footer: light surface ---------- */
body.isM3 .ftWrap{ background: var(--m-surface) !important; color: var(--m-ink) !important; }
body.isM3 .ftWrap :is(p, span, li, a, h2, h3, b){ color: var(--m-ink-2) !important; }
body.isM3 .ftSiteTitle, body.isM3 .ftTitle{ color: var(--m-ink) !important; font-size: 15px !important; font-weight: 700 !important; }
body.isM3 .ftMail{ color: var(--m-ink) !important; font-weight: 800 !important; }
body.isM3 .ftMark{ display: none !important; }
body.isM3 .ftChip{ border-radius: 999px !important; background: #fff !important; border-color: var(--m-line) !important; }

/* ---------- motion: light, and none when asked ---------- */
@media (prefers-reduced-motion: no-preference){
    html.m3Js body.isM3 main > section.m3Rev{ opacity: 0; transform: translateY(16px); transition: opacity 0.55s ease, transform 0.55s ease; }
    html.m3Js body.isM3 main > section.m3Rev.m3In{ opacity: 1; transform: none; }
    html.m3Js .m3Tile{ opacity: 0; transform: scale(0.85); animation: m3Pop 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; }
    html.m3Js .m3Tile:nth-child(2){ animation-delay: 0.08s; } html.m3Js .m3Tile:nth-child(3){ animation-delay: 0.16s; }
    html.m3Js .m3Tile:nth-child(4){ animation-delay: 0.24s; } html.m3Js .m3Tile:nth-child(5){ animation-delay: 0.32s; }
    html.m3Js .m3Tile:nth-child(6){ animation-delay: 0.4s; }
}
@keyframes m3Pop{ to{ opacity: 1; transform: none; } }

/* ---------- phones ---------- */
@media (max-width: 991px){
    body.isM3 .pgHero{ padding: 96px 0 36px !important; }
    body.isM3 .pgHero .pgHeroInner{ grid-template-columns: 1fr; }
    body.isM3 .pgHero .pgHeroInner > .m3Tiles{ grid-column: 1; grid-row: auto; max-width: 100%; aspect-ratio: auto; grid-template-columns: repeat(6, 1fr); gap: 8px; margin: 22px 0 0; }
    body.isM3 .m3Tile{ height: 56px; grid-column: auto !important; grid-row: auto !important; font-size: 20px; }
    body.isM3 .peProofList{ grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 767px){
    body.isM3 .pgHeroTitle{ font-size: 34px !important; }
    body.isM3 .pgHeroLead{ font-size: 17px !important; }
    body.isM3 .pgTitle{ font-size: 26px !important; }
    body.isM3 .pgIntroLead{ font-size: 18px !important; padding: 18px !important; }
    .m3TocInner{ padding: 8px 16px; }
    .m3TocLabel{ display: none; }
}

/* ---------- fixes after the first look ---------- */
body.isM3 .pgStep, body.isM3 .peNextStep{ display: block !important; grid-template-columns: none !important; min-height: 0 !important; height: auto !important; }
body.isM3 .pgStep > *, body.isM3 .peNextStep > *{ width: auto !important; max-width: none !important; grid-column: auto !important; position: static !important; writing-mode: horizontal-tb !important; }
body.isM3 .pgStep h3, body.isM3 .peNextStep h3{ margin: 0 0 6px !important; }
body.isM3 .pgStep p, body.isM3 .peNextStep p{ font-size: 15px !important; margin: 0 !important; }
body.isM3 .faqQ{ display: flex !important; align-items: center; justify-content: space-between; gap: 14px; width: 100%; text-align: left; grid-template-columns: none !important; }
body.isM3 .faqQ > span{ flex: 1 1 auto; min-width: 0; }
body.isM3 .faqQ > b{ flex: 0 0 auto; }
body.isM3 .pePriceFrom{ display: block !important; max-width: 70ch; font-size: 16px !important; }
body.isM3 .pePriceSub{ font-size: 16px !important; font-weight: 700 !important; color: var(--m-ink) !important; margin: 22px 0 10px !important; }
body.isM3 .ftMail{ font-size: clamp(22px, 3vw, 36px) !important; }
body.isM3 .ftCtaInner{ background: #fff; border-radius: var(--m-r-lg); padding: clamp(20px, 3vw, 36px) !important; border: 1px solid var(--m-line); }
body.isM3 .ftWrap .ftPlanBtn, body.isM3 .ftWrap .ftPlanBtn *{ color: #fff !important; }
body.isM3 .ftWrap .ftCopyBtn, body.isM3 .ftWrap .ftCopyBtn *{ color: var(--m-blue) !important; }
/* the D50 phone folds stay folded (my display rules above must not reopen them) */
html body.isM3 .peFold{ display: none !important; }
body.isM3 .peSecFold .pgHead::after, body.isM3 .peSecFold .pgStateSide::after{ color: var(--tint-ink) !important; font-family: var(--m-font) !important; }
@media (max-width: 767px){
    body.isM3 main > section:not(.pgHero):not(.ctaWrap):not(.peHook):not(.peLesson):not(.peBand):not(.peBrandNote):not(.m3Belief):not(.peSecFold){ padding-top: 32px !important; padding-bottom: 32px !important; }
    body.isM3 .pgCard, body.isM3 .peSvcCard, body.isM3 .pgStep, body.isM3 .peNextStep{ padding: 18px !important; }
}
body.isM3 .pgWrap{ max-width: 1160px !important; margin-left: auto !important; margin-right: auto !important; padding-left: 24px !important; padding-right: 24px !important; box-sizing: border-box; }
body.isM3 .pgScrollCue{ display: none !important; }
@media (min-width: 992px){ body.isM3 .peSvcGrid{ grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important; } }
@media (max-width: 767px){ body.isM3 .pgWrap{ padding-left: 16px !important; padding-right: 16px !important; } }
/* no layout shift when the tiles arrive: the hero box is always full width */
body.isM3 .pgHero .pgHeroInner{ width: 100% !important; box-sizing: border-box; }

/* ================================================================
   Round 2 (D79): Material Symbols, drawings, stat chips, segmented tabs, read-more, icon rows, cards for tables,
   a drawing band, "people also ask" FAQ, chips bar that hides while you scroll down on phones
   ================================================================ */
svg.ms{ width: 1.25em; height: 1.25em; fill: currentColor; vertical-align: -0.25em; flex: 0 0 auto; }
body.isM3 .pgCardIcon svg.ms{ width: 26px; height: 26px; }

/* hero drawing (replaces the round photo); the one bold element */
body.isM3 .pgHero .pgHeroInner > .m3Illo{ grid-column: 2; grid-row: 1 / span 9; justify-self: stretch !important; align-self: center; }
.m3Draw{ display: block; width: 100%; max-width: 460px; height: auto; margin-left: auto; }
@media (prefers-reduced-motion: no-preference){
    .m3Draw .m3dC{ animation: m3Float 6s ease-in-out infinite; }
    .m3Draw .m3dD{ animation: m3Float 7s ease-in-out -2s infinite; }
    .m3Draw .m3dE{ animation: m3Float 5.5s ease-in-out -1s infinite; }
    html.m3Js .m3Draw{ animation: m3In 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
}
@keyframes m3Float{ 50%{ transform: translateY(-6px); } }
@keyframes m3In{ from{ opacity: 0; transform: translateY(10px) scale(0.98); } }

/* stat chips under the hero buttons (verified facts) */
.m3Chips{ display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.m3Chip{ display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px 6px 9px; border-radius: 999px; background: #fff; border: 1px solid var(--m-line);
    font-size: 13px; font-weight: 600; color: var(--m-ink-2); }
.m3Chip svg.ms{ color: var(--tint-ink); width: 18px; height: 18px; vertical-align: 0; }

/* segmented tabs (the "go deeper" folds, side by side) */
body.isM3 main > .m3TabsWrap{ padding-top: clamp(32px, 4vw, 56px) !important; padding-bottom: clamp(32px, 4vw, 56px) !important; }
.m3Tabs{ display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--m-surface); border: 1px solid var(--m-line); overflow-x: auto; scrollbar-width: none; max-width: 100%; width: max-content; }
.m3Tabs::-webkit-scrollbar{ display: none; }
.m3Tab{ flex: 0 0 auto; border: 0; background: transparent; padding: 10px 16px; border-radius: 999px; font: 600 14px/1.2 var(--m-font); color: var(--m-ink-2); cursor: pointer; white-space: nowrap; max-width: 280px; overflow: hidden; text-overflow: ellipsis; }
.m3Tab:hover{ color: var(--tint-ink); }
.m3Tab.isOn{ background: #fff; color: var(--tint-ink); box-shadow: var(--m-shadow); }
.m3Tab:focus-visible{ outline: 2px solid var(--m-blue); outline-offset: 2px; }
.m3Panels{ margin-top: 16px; background: #fff; border: 1px solid var(--m-line); border-radius: var(--m-r-lg); box-shadow: var(--m-shadow); padding: clamp(18px, 2.4vw, 30px); }
html.m3Js .m3Panel:not(.isOn){ display: none; }
.m3PanelTitle{ font-size: 20px !important; font-weight: 800 !important; margin: 0 0 10px !important; }
html.m3Js .m3PanelTitle{ display: none; }
.m3Panel .pgProse > *:first-child{ margin-top: 0; }

/* read more: first lines show, the rest waits (all still in the HTML) */
html.m3Js .m3Clamp:not(.isOpen) > :not(:first-child){ display: none !important; }
html.m3Js .m3Clamp:not(.isOpen) > :first-child{ display: -webkit-box !important; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
html.m3Js .m3Clamp2:not(.isOpen){ display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
html.m3Js .m3Rest:not(.isOpen){ display: none; }
.m3More{ display: none; }
html.m3Js .m3More{ display: inline-flex; align-items: center; gap: 4px; margin: 8px 0 0; padding: 6px 2px; border: 0; background: none; font: 700 14px/1.2 var(--m-font); color: var(--m-blue); cursor: pointer; }
html.m3Js .m3More::after{ content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translate(-2px, -2px); transition: transform 0.2s; }
html.m3Js .m3More[aria-expanded="true"]::after{ transform: rotate(-135deg) translate(-1px, -1px); }

/* guide: each part is a card */
.m3DocCard{ background: #fff; border: 1px solid var(--m-line); border-radius: var(--m-r-lg); box-shadow: var(--m-shadow); padding: clamp(18px, 2.4vw, 28px); margin: 0 0 14px; }
.m3DocCard > h2{ font-size: clamp(20px, 2vw, 26px) !important; font-weight: 800 !important; margin: 0 0 8px !important; }
.m3DocCard:nth-child(7n+1){ border-top: 4px solid var(--t-sky); } .m3DocCard:nth-child(7n+2){ border-top: 4px solid var(--t-mint); }
.m3DocCard:nth-child(7n+3){ border-top: 4px solid var(--t-peach); } .m3DocCard:nth-child(7n+4){ border-top: 4px solid var(--t-lavender); }
.m3DocCard:nth-child(7n+5){ border-top: 4px solid var(--t-butter); } .m3DocCard:nth-child(7n+6){ border-top: 4px solid var(--t-rose); }
.m3DocCard:nth-child(7n+7){ border-top: 4px solid var(--t-teal); }

/* lists: icon rows */
ul.m3Rows{ list-style: none !important; padding: 0 !important; margin: 12px 0 !important; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
ul.m3Rows .m3RowText{ min-width: 0; overflow-wrap: anywhere; }
ul.m3Rows > li{ display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--m-r-sm); background: var(--m-surface); line-height: 1.5; }
ul.m3Rows > li::before{ display: none !important; content: none !important; }
ul.m3Rows .m3RowIcon{ color: var(--tint-ink); width: 20px; height: 20px; margin-top: 2px; }
ul.m3Rows strong{ color: var(--m-ink); }

/* tables read as cards on phones */
@media (max-width: 767px){
    /* D195 item 4: growth.css gives .peTable min-width 640px (desktop scroll); on phones the cards must fit the box */
    body.isM3 table.m3CardsOnPhone, body.isM3 table.m3CardsOnPhone tbody, body.isM3 table.m3CardsOnPhone tr{ display: block; width: 100%; min-width: 0 !important; }
    body.isM3 table.m3CardsOnPhone{ border: 0 !important; background: transparent; }
    body.isM3 table.m3CardsOnPhone thead{ display: none; }
    body.isM3 table.m3CardsOnPhone tr{ background: #fff; border: 1px solid var(--m-line); border-radius: var(--m-r); padding: 6px 14px; margin-bottom: 10px; box-shadow: var(--m-shadow); }
    /* label on top, value below (long values no longer squeeze into a right-aligned half) */
    body.isM3 table.m3CardsOnPhone td, body.isM3 table.m3CardsOnPhone th{ display: block; border: 0 !important; border-bottom: 1px solid var(--m-line) !important; padding: 9px 0 !important; text-align: left; background: transparent !important; overflow-wrap: anywhere; }
    body.isM3 table.m3CardsOnPhone tr > :last-child{ border-bottom: 0 !important; }
    body.isM3 table.m3CardsOnPhone td::before, body.isM3 table.m3CardsOnPhone th[data-label]::before{ content: attr(data-label); display: block; font-size: 12.5px; font-weight: 700; letter-spacing: .01em; color: var(--m-ink-3, #5a6377); margin-bottom: 3px; }
    body.isM3 table.m3CardsOnPhone td:not([data-label])::before{ content: none; }
    body.isM3 table.m3CardsOnPhone tr > :first-child::before{ content: none; }   /* the row's first cell is the card title */
    body.isM3 table.m3CardsOnPhone tr > :first-child{ font-size: 16px; padding-top: 10px !important; }
    body.isM3 table.m3CardsOnPhone tr > :first-child{ font-weight: 800; color: var(--m-ink) !important; }
    body.isM3 .peTableScroll{ overflow: visible !important; }
}

/* drawing band before the closing block */
.m3Divider{ display: flex; align-items: center; justify-content: center; gap: 12px; max-width: 1160px; margin: 0 auto; padding: 28px 24px; }
.m3DivLine{ flex: 1 1 auto; height: 2px; background: repeating-linear-gradient(90deg, var(--m-line) 0 8px, transparent 8px 14px); }
.m3DivDot{ flex: 0 0 auto; width: 48px; height: 48px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; }
.m3DivDot svg.ms{ width: 24px; height: 24px; vertical-align: 0; }
.m3DivDot:nth-child(4){ width: 60px; height: 60px; border-radius: 18px; }

/* FAQ: "people also ask" rows */
body.isM3 .faqList{ border: 1px solid var(--m-line); border-radius: var(--m-r-lg); background: #fff; overflow: hidden; padding: 0 !important; }
body.isM3 .faqItem{ border: 0 !important; border-bottom: 1px solid var(--m-line) !important; border-radius: 0 !important; margin: 0 !important; background: transparent !important; }
body.isM3 .faqItem:last-child{ border-bottom: 0 !important; }
body.isM3 .faqQ{ padding: 16px 20px !important; }
body.isM3 .faqQ > b{ width: 10px; height: 10px; border-right: 2px solid var(--m-ink-3); border-bottom: 2px solid var(--m-ink-3); transform: rotate(45deg); background: none !important; transition: transform 0.2s; }
body.isM3 .faqQ[aria-expanded="true"] > b{ transform: rotate(-135deg); }
body.isM3 .faqQ > b::before, body.isM3 .faqQ > b::after{ display: none !important; }

/* chips bar: sections land below it; on phones it slides away while you scroll down */
body.isM3 main > section, body.isM3 .m3Panel{ scroll-margin-top: calc(var(--m3-top, 72px) + 16px); }   /* D353: header height + a little air */
.m3Toc{ transition: transform 0.25s ease; }
@media (max-width: 991px){ .m3Toc.isAway{ transform: translateY(-110%); } }

/* phones: one column hero (drawing below the text), and D50's own phone folds handle the intro and state text */
@media (max-width: 991px){
    body.isM3 .pgHero .pgHeroInner > .m3Illo{ grid-column: 1 !important; grid-row: auto !important; max-width: 340px; margin: 18px auto 0 !important; justify-self: center !important; }
}
@media (max-width: 767px){
    body.isM3 .pgIntroBody .m3More, body.isM3 .pgState .m3More{ display: none !important; }
    html.m3Js body.isM3 .pgIntroBody .m3Clamp > :first-child, html.m3Js body.isM3 .pgState .m3Clamp > :first-child{ display: block !important; -webkit-line-clamp: unset; overflow: visible; }
    html.m3Js body.isM3 .pgIntroBody .m3Clamp > :not(:first-child):not(.peFold), html.m3Js body.isM3 .pgState .m3Clamp > :not(:first-child):not(.peFold){ display: block !important; }
    .m3Chips{ gap: 6px; } .m3Chip{ font-size: 12px; padding: 5px 10px 5px 8px; }
}
body.isM3 .pgHeroSub{ justify-content: flex-start !important; text-align: left !important; }

/* ================================================================
   Round 2b (01's benchmark): lead block, repeated CTA, widgets kept clear, quick-form variant (mock)
   ================================================================ */
/* lead block on money pages: promise, proof strip right under the headline, one button */
body.isM3 .m3Lead > .m3Chips{ margin: 0 0 14px; }
body.isM3 .m3Lead .pgBtn.m3Second{ display: none !important; }
body.isM3 .m3Lead .pgHeroLead{ margin-bottom: 20px !important; }

/* the one CTA label, repeated after major blocks */
.m3CtaRow{ max-width: 1160px; margin: 0 auto; padding: 4px 24px 28px; display: flex; justify-content: flex-start; }
.m3CtaRow .pgBtn{ min-height: 46px; }
@media (max-width: 767px){ .m3CtaRow{ padding: 0 16px 20px; } .m3CtaRow .pgBtn{ width: 100%; justify-content: center; } }

/* floating widgets never cover the headline or the button: the call-back tab sits low, the WhatsApp bubble stays
   above the phone bar, and both stay out of the first screen's text column */
body.isM3 .qcTab{ top: auto !important; bottom: 132px !important; transform: none !important; }
body.isM3 .waFloat{ bottom: 24px !important; }
@media (max-width: 991px){
    body.isM3 .qcTab, body.isM3 .waFloat{ display: none !important; }   /* phones have the Call / WhatsApp / Growth plan bar */
}

/* variant: a short 3-field form beside the words (mock only, not connected) */
.m3QuickForm{ grid-column: 2; grid-row: 1 / span 9; align-self: center; background: #fff; border: 1px solid var(--m-line); border-radius: var(--m-r-lg);
    box-shadow: var(--m-shadow-up); padding: 22px; display: grid; gap: 12px; max-width: 400px; justify-self: end; width: 100%; }
.m3QuickTitle{ margin: 0; font-size: 18px; font-weight: 800; color: var(--m-ink) !important; }
.m3QuickForm label{ display: grid; gap: 6px; font-size: 13px; font-weight: 600; color: var(--m-ink-2); }
.m3QuickForm input{ height: 46px; border-radius: 12px; border: 1px solid var(--m-line); padding: 0 14px; font: 500 15px var(--m-font); background: var(--m-surface); }
.m3QuickForm input:focus{ outline: 2px solid var(--m-blue); outline-offset: 1px; background: #fff; }
.m3QuickForm .pgBtn{ width: 100%; justify-content: center; }
.m3QuickNote{ margin: 0; font-size: 12px; color: var(--m-ink-3) !important; }
@media (max-width: 991px){ .m3QuickForm{ grid-column: 1; grid-row: auto; justify-self: stretch; max-width: none; margin-top: 18px; } }
body.isM3 .pgHero .pgHeroInner > .m3QuickForm{ grid-column: 2 !important; grid-row: 1 / span 9 !important; justify-self: end !important; align-self: center; }
@media (max-width: 991px){ body.isM3 .pgHero .pgHeroInner > .m3QuickForm{ grid-column: 1 !important; grid-row: auto !important; justify-self: stretch !important; } }

/* ================================================================
   Round 3 (D81/D84/D85): client logos, quotes, films, the team on this work, gallery and work slots
   ================================================================ */
body.isM3 main > .m3Logos{ padding: 22px 0 !important; background: #fff !important; border-bottom: 1px solid var(--m-line) !important; }
.m3Logos .pgWrap{ display: flex; align-items: center; gap: 18px 24px; flex-wrap: wrap; }
.m3LogosLabel{ margin: 0; font-size: 14px; font-weight: 700; color: var(--m-ink-3) !important; flex: 0 0 auto; }
.m3LogoList{ list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; flex: 1 1 520px; }
.m3LogoList li{ display: flex; align-items: center; }
.m3LogoList img{ height: 34px; width: auto; max-width: 120px; object-fit: contain; filter: grayscale(1); opacity: 0.6; transition: filter 0.3s, opacity 0.3s; }
.m3LogoList img:hover{ filter: none; opacity: 1; }
.m3LogosAll{ font-size: 14px; font-weight: 700; color: var(--m-blue) !important; white-space: nowrap; }
@media (max-width: 767px){
    .m3LogoList{ flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 22px; padding-bottom: 4px; flex-basis: 100%; }
    .m3LogoList::-webkit-scrollbar{ display: none; }
    .m3LogoList img{ height: 30px; }
}

/* quotes */
.m3QuoteRow{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 8px; }
.m3Quote{ margin: 0; background: #fff; border: 1px solid var(--m-line); border-radius: var(--m-r-lg); box-shadow: var(--m-shadow); padding: 22px; display: flex; flex-direction: column; gap: 16px; }
.m3Quote blockquote{ margin: 0; font-size: 16px; line-height: 1.6; color: var(--m-ink); }
.m3Quote figcaption{ display: flex; align-items: center; gap: 12px; margin-top: auto; }
.m3Quote figcaption b{ display: block; color: var(--m-ink); font-size: 15px; }
.m3Quote figcaption small{ display: block; color: var(--m-ink-3); font-size: 13px; line-height: 1.4; }
.m3Avatar{ flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
    background: var(--tint); color: var(--tint-ink); font-weight: 800; font-size: 15px; object-fit: cover; }
.m3QuoteRow > :nth-child(2) .m3Avatar{ background: var(--t-mint); color: var(--i-mint); }
.m3QuoteRow > :nth-child(3) .m3Avatar{ background: var(--t-peach); color: var(--i-peach); }
.m3Quotes .m3LogosAll{ display: inline-block; margin-top: 14px; }
@media (max-width: 991px){
    .m3QuoteRow{ display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 6px; }
    .m3QuoteRow::-webkit-scrollbar{ display: none; }
    .m3Quote{ flex: 0 0 86%; scroll-snap-align: start; }
}

/* films */
@media (min-width: 768px){ .m3VideoRow{ grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } }
.m3Videos .peVideo figcaption b{ display: block; }

/* the team on this work */
body.isM3 main > .m3Team{ padding-top: 8px !important; padding-bottom: 8px !important; }
.m3TeamCard{ background: var(--m-surface); border: 1px solid var(--m-line); border-radius: var(--m-r-lg); padding: 18px 20px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.m3TeamLabel{ margin: 0; font-size: 14px; font-weight: 700; color: var(--m-ink-3) !important; }
.m3People{ display: flex; flex-wrap: wrap; gap: 12px 22px; }
.m3Person{ display: flex; align-items: center; gap: 10px; text-decoration: none; }
.m3Person b{ display: block; color: var(--m-ink); font-size: 15px; }
.m3Person small{ display: block; color: var(--m-ink-3); font-size: 13px; }
.m3Person:hover b{ color: var(--m-blue); }
.m3People > :nth-child(2) .m3Avatar{ background: var(--t-mint); color: var(--i-mint); }
.m3People > :nth-child(3) .m3Avatar{ background: var(--t-lavender); color: var(--i-lavender); }

/* gallery and work slots (shown only when their data files have rows) */
.m3MediaGrid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.m3MediaGrid figure{ margin: 0; }
.m3MediaGrid img{ width: 100%; height: auto; border-radius: var(--m-r); display: block; }
.m3MediaGrid figcaption{ margin-top: 8px; font-size: 14px; color: var(--m-ink-2); }
.m3SpeakerTag{ display: inline-block; margin-top: 4px; padding: 2px 8px; border-radius: 999px; background: var(--m-surface); border: 1px solid var(--m-line); font-style: normal; font-size: 12px; font-weight: 600; color: var(--m-ink-3); }
body.isM3 .pgHeroBtns.m3HasForm{ display: none !important; }
.m3Opt{ font-weight: 400; color: var(--m-ink-3); }
.m3QuickForm .peHp{ position: absolute; left: -9999px; }
.m3QuickForm input.isError{ outline: 2px solid #c62828; outline-offset: 1px; }
.m3QuickNote a{ color: var(--m-blue); }
/* the hero form: one column, plain sentence-case labels (not the old form grid) */
body.isM3 form.m3QuickForm.pgForm{ display: grid !important; grid-template-columns: 1fr !important; gap: 12px !important; }
body.isM3 form.m3QuickForm label{ display: grid !important; gap: 6px; font-family: var(--m-font) !important; font-size: 13px !important; font-weight: 600 !important; letter-spacing: normal !important; text-transform: none !important; color: var(--m-ink-2) !important; grid-column: auto !important; }
body.isM3 form.m3QuickForm input{ width: 100%; border: 1px solid var(--m-line) !important; border-radius: 12px !important; background: var(--m-surface) !important; height: 46px; padding: 0 14px !important; font: 500 15px var(--m-font) !important; color: var(--m-ink) !important; }
body.isM3 form.m3QuickForm .pgBtn{ grid-column: auto !important; width: 100%; justify-content: center; }
body.isM3 .m3LogoList img{ opacity: 0.75; }

/* D88 (user 13 Oct): no stray lines, round number pills, colour logo marquee, more icons and shapes */
body.isM3 .pgGrid, body.isM3 .pgStepList, body.isM3 .pgFindList{ border: 0 !important; }
body.isM3 .pgRail{ display: none !important; }
body.isM3 .pgStepNum, body.isM3 .peNextNum{ width: 40px !important; min-width: 40px; height: 40px !important; padding: 0 !important; flex: none;
    letter-spacing: 0 !important; line-height: 1 !important; font-family: var(--m-font) !important; font-size: 15px !important; }
body.isM3 .pgStep{ position: relative; overflow: hidden; }
body.isM3 .pgCard.isLink p:empty{ display: none; }
/* logo marquee: full colour, slow, pauses on hover/focus, still for people who ask for less motion */
.m3Marquee{ flex: 1 1 520px; min-width: 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.m3MarqueeTrack{ display: flex; width: max-content; animation: m3Marq 55s linear infinite; }
.m3Marquee:hover .m3MarqueeTrack, .m3Marquee:focus-within .m3MarqueeTrack{ animation-play-state: paused; }
body.isM3 .m3Marquee .m3LogoList{ flex: none; flex-wrap: nowrap !important; overflow: visible !important; gap: 0 !important; padding: 0 !important; }
body.isM3 .m3Marquee .m3LogoList li{ padding: 0 22px; }
body.isM3 .m3Marquee .m3LogoList img{ filter: none !important; opacity: 1 !important; height: 38px; max-width: 130px; }
@keyframes m3Marq{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce){
    .m3MarqueeTrack{ animation: none; width: auto; }
    .m3MarqueeTrack > .m3LogoList[aria-hidden]{ display: none !important; }
    body.isM3 .m3Marquee .m3LogoList{ flex-wrap: wrap !important; row-gap: 12px !important; }
    .m3Marquee{ -webkit-mask-image: none; mask-image: none; }
}
@media (max-width: 767px){
    .m3Marquee{ flex-basis: 100%; }
    body.isM3 .m3Marquee .m3LogoList li{ padding: 0 16px; }
    body.isM3 .m3Marquee .m3LogoList img{ height: 32px; }
    .m3MarqueeTrack{ animation-duration: 40s; }
}
/* section label icons */
body.isM3 .pgEyebrow svg.m3EbIcon{ width: 16px; height: 16px; flex: none; }
/* soft shapes behind every other big section */
body.isM3 main > section.m3HasDeco{ position: relative; overflow-x: clip; }
body.isM3 main > section.m3HasDeco > :not(.m3Deco){ position: relative; z-index: 1; }
.m3Deco{ position: absolute; z-index: 0; pointer-events: none; }
.m3Deco0{ top: 28px; right: 3%; width: 190px; height: 130px; opacity: 0.55;
    background: radial-gradient(circle, var(--tint-ink, #0b4a9e) 1.4px, transparent 1.9px) 0 0 / 18px 18px;
    -webkit-mask-image: radial-gradient(closest-side, #000 40%, transparent); mask-image: radial-gradient(closest-side, #000 40%, transparent); }
.m3Deco1{ top: -40px; right: -60px; width: 260px; height: 260px; border-radius: 50%; border: 28px solid var(--tint, #e5f0ff); opacity: 0.7; }
.m3Deco2{ bottom: 24px; left: 2%; width: 120px; height: 120px; opacity: 0.5;
    background: linear-gradient(var(--tint-ink, #0b4a9e), var(--tint-ink, #0b4a9e)) center / 2px 14px no-repeat,
                linear-gradient(var(--tint-ink, #0b4a9e), var(--tint-ink, #0b4a9e)) center / 14px 2px no-repeat,
                radial-gradient(circle, var(--tint, #e5f0ff) 58%, transparent 60%); }
@media (max-width: 767px){
    .m3Deco0{ width: 120px; height: 90px; right: 0; top: 12px; }
    .m3Deco1{ width: 160px; height: 160px; border-width: 18px; right: -70px; top: -50px; }
    .m3Deco2{ display: none; }
}

/* D89 (user 13 Oct): breathing room, no touching cards, no rule under the logo row */
body.isM3 .pgGrid, body.isM3 .peSvcGrid{ gap: 20px !important; }
body.isM3 .pgGrid.cols2{ grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
@media (max-width: 767px){ body.isM3 .pgGrid.cols2{ grid-template-columns: minmax(0, 1fr) !important; } body.isM3 .pgGrid, body.isM3 .peSvcGrid{ gap: 14px !important; } }
body.isM3 main > .m3Logos{ border-bottom: 0 !important; }
body.isM3 main > section:not(.pgHero):not(.ctaWrap):not(.peHook):not(.peLesson):not(.peBand):not(.peBrandNote):not(.m3Belief):not(.m3Logos):not(.m3Team):not(.m3TabsWrap){
    padding-top: clamp(56px, 6.5vw, 96px) !important; padding-bottom: clamp(56px, 6.5vw, 96px) !important; }
@media (max-width: 767px){
    body.isM3 main > section:not(.pgHero):not(.ctaWrap):not(.peHook):not(.peLesson):not(.peBand):not(.peBrandNote):not(.m3Belief):not(.peSecFold):not(.m3Logos):not(.m3Team){
        padding-top: 44px !important; padding-bottom: 44px !important; }
}
body.isM3 .peSvcCard .peSvcIcon svg{ width: 24px; height: 24px; }
/* round 2: bento tiles (wide first / last card, so the last row is full), tinted feature tile */
@media (min-width: 1200px){
    body.isM3 .pgGrid.cols3[data-r3="1"] > .pgCard:first-child, body.isM3 .pgGrid.cols3[data-r3="1"] > .pgCard:last-child,
    body.isM3 .pgGrid.cols3[data-r3="2"] > .pgCard:first-child{ grid-column: span 2; }
}
@media (min-width: 576px) and (max-width: 1199px){
    body.isM3 .pgGrid.cols3[data-r2="1"] > .pgCard:first-child{ grid-column: span 2; }
}
body.isM3 .pgGrid[data-r3] > .pgCard:first-child{ background: linear-gradient(135deg, var(--c, var(--tint)) 0%, #fff 70%) !important; }
/* round 2: marker highlight on the key words of headings */
body.isM3 :is(.pgTitle, .pgHeroTitle, h1) em{ font-style: normal; background: linear-gradient(transparent 58%, var(--tint) 58%, var(--tint) 92%, transparent 92%);
    padding: 0 0.08em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
/* round 2: fact chips as little stickers */
@media (min-width: 768px){
    body.isM3 .m3Chip:nth-child(odd){ transform: rotate(-1.6deg); }
    body.isM3 .m3Chip:nth-child(even){ transform: rotate(1.4deg); }
    body.isM3 .m3Chip{ box-shadow: 0 2px 0 var(--m-line); }
}
/* round 2: icons move a little on hover */
body.isM3 .pgCardIcon svg, body.isM3 .peSvcIcon svg, body.isM3 .peSvcCard > i:first-child{ transition: transform 0.3s cubic-bezier(0.3, 1.6, 0.5, 1); }
body.isM3 a.pgCard:hover .pgCardIcon svg, body.isM3 .peSvcCard:hover .peSvcIcon svg{ transform: rotate(-10deg) scale(1.12); }
@media (prefers-reduced-motion: reduce){
    body.isM3 a.pgCard:hover .pgCardIcon svg, body.isM3 .peSvcCard:hover .peSvcIcon svg{ transform: none; }
}

/* round 3: the mid-page nudge as a pastel card with pill buttons (it was white-on-white caps after the redesign) */
body.isM3 main > section.peNudge{ padding: 24px 0 !important; }
body.isM3 .peNudgeIn{ max-width: 1160px; margin: 0 auto; padding: 26px 28px; border-radius: var(--m-r-lg); background: var(--tint) !important;
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; position: relative; overflow: hidden; }
body.isM3 .peNudgeIn::after{ content: ""; position: absolute; right: -40px; top: -40px; width: 160px; height: 160px; border-radius: 50%; border: 22px solid rgba(255,255,255,0.55); pointer-events: none; }
body.isM3 .peNudgeText{ margin: 0; flex: 1 1 360px; font-family: var(--m-font) !important; font-size: 18px !important; font-weight: 600 !important; color: var(--m-ink) !important;
    letter-spacing: normal !important; text-transform: none !important; position: relative; z-index: 1; }
body.isM3 .peNudgeBtns{ position: relative; z-index: 1; gap: 10px; }
body.isM3 .peNudgeBtn{ height: 48px !important; padding: 0 22px !important; border-radius: 999px !important; font: 700 15px/1 var(--m-font) !important; letter-spacing: normal !important;
    text-transform: none !important; border: 1.5px solid var(--m-blue) !important; color: var(--m-blue) !important; background: #fff !important; }
body.isM3 .peNudgeBtn.solid{ background: var(--m-blue) !important; color: #fff !important; }
body.isM3 .peNudgeBtn:hover{ transform: translateY(-1px); box-shadow: var(--m-shadow-up); }
@media (max-width: 767px){ body.isM3 .peNudgeIn{ margin: 0 16px; padding: 20px; } body.isM3 .peNudgeBtns{ width: 100%; } body.isM3 .peNudgeBtn{ flex: 1 1 auto; justify-content: center; } }

/* round 3: brush stroke under key words (headline end, *emphasis* in section titles); a background, so it wraps line by line */
body.isM3 :is(.pgTitle, .pgHeroTitle, h1) em{ font-style: normal; padding: 0 0.06em; box-decoration-break: clone; -webkit-box-decoration-break: clone;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 24' preserveAspectRatio='none'%3E%3Cpath fill='%230b4a9e' fill-opacity='0.42' d='M3 15c28-7 60-10 98-9 33 1 63 3 96 1-3 3-6 6-12 7-28 2-57 1-86 1-34 0-64 2-92 6-4-1-6-3-4-6z'/%3E%3C/svg%3E") 0 94% / 100% 0.5em no-repeat !important; }
body.isM3[data-tint="sky"] :is(.pgTitle, .pgHeroTitle, h1) em{ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 24' preserveAspectRatio='none'%3E%3Cpath fill='%230b4a9e' fill-opacity='0.42' d='M3 15c28-7 60-10 98-9 33 1 63 3 96 1-3 3-6 6-12 7-28 2-57 1-86 1-34 0-64 2-92 6-4-1-6-3-4-6z'/%3E%3C/svg%3E") !important; }
body.isM3[data-tint="mint"] :is(.pgTitle, .pgHeroTitle, h1) em{ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 24' preserveAspectRatio='none'%3E%3Cpath fill='%230e6b44' fill-opacity='0.42' d='M3 15c28-7 60-10 98-9 33 1 63 3 96 1-3 3-6 6-12 7-28 2-57 1-86 1-34 0-64 2-92 6-4-1-6-3-4-6z'/%3E%3C/svg%3E") !important; }
body.isM3[data-tint="peach"] :is(.pgTitle, .pgHeroTitle, h1) em{ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 24' preserveAspectRatio='none'%3E%3Cpath fill='%239a3b0e' fill-opacity='0.42' d='M3 15c28-7 60-10 98-9 33 1 63 3 96 1-3 3-6 6-12 7-28 2-57 1-86 1-34 0-64 2-92 6-4-1-6-3-4-6z'/%3E%3C/svg%3E") !important; }
body.isM3[data-tint="lavender"] :is(.pgTitle, .pgHeroTitle, h1) em{ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 24' preserveAspectRatio='none'%3E%3Cpath fill='%234e35a6' fill-opacity='0.42' d='M3 15c28-7 60-10 98-9 33 1 63 3 96 1-3 3-6 6-12 7-28 2-57 1-86 1-34 0-64 2-92 6-4-1-6-3-4-6z'/%3E%3C/svg%3E") !important; }
body.isM3[data-tint="butter"] :is(.pgTitle, .pgHeroTitle, h1) em{ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 24' preserveAspectRatio='none'%3E%3Cpath fill='%23765600' fill-opacity='0.42' d='M3 15c28-7 60-10 98-9 33 1 63 3 96 1-3 3-6 6-12 7-28 2-57 1-86 1-34 0-64 2-92 6-4-1-6-3-4-6z'/%3E%3C/svg%3E") !important; }
body.isM3[data-tint="rose"] :is(.pgTitle, .pgHeroTitle, h1) em{ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 24' preserveAspectRatio='none'%3E%3Cpath fill='%239b1e4f' fill-opacity='0.42' d='M3 15c28-7 60-10 98-9 33 1 63 3 96 1-3 3-6 6-12 7-28 2-57 1-86 1-34 0-64 2-92 6-4-1-6-3-4-6z'/%3E%3C/svg%3E") !important; }
body.isM3[data-tint="teal"] :is(.pgTitle, .pgHeroTitle, h1) em{ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 24' preserveAspectRatio='none'%3E%3Cpath fill='%230d6464' fill-opacity='0.42' d='M3 15c28-7 60-10 98-9 33 1 63 3 96 1-3 3-6 6-12 7-28 2-57 1-86 1-34 0-64 2-92 6-4-1-6-3-4-6z'/%3E%3C/svg%3E") !important; }

/* round 3: a bolder hero per page type: pastel blob + dot patch behind the words; city name watermark; guide sticker */
body.isM3 .pgHero{ position: relative; isolation: isolate; }
body.isM3 .pgHero > :not(.m3HeroBlob):not(.m3HeroDots):not(.m3HeroWord){ position: relative; z-index: 1; }
.m3HeroBlob{ position: absolute; z-index: 0; right: -6%; top: 8%; width: min(46vw, 640px); aspect-ratio: 1; pointer-events: none;
    background: radial-gradient(closest-side, var(--tint) 0%, var(--tint) 62%, transparent 64%); border-radius: 42% 58% 61% 39% / 45% 41% 59% 55%; opacity: 0.9; }
.m3HeroDots{ position: absolute; z-index: 0; left: 2%; bottom: 10%; width: 180px; height: 110px; pointer-events: none; opacity: 0.45;
    background: radial-gradient(circle, var(--tint-ink, #0b4a9e) 1.4px, transparent 1.9px) 0 0 / 16px 16px;
    -webkit-mask-image: radial-gradient(closest-side, #000 45%, transparent); mask-image: radial-gradient(closest-side, #000 45%, transparent); }
.m3HeroWord{ position: absolute; z-index: 0; right: 3%; bottom: 4%; font: 800 clamp(64px, 11vw, 168px)/0.9 var(--m-font); letter-spacing: -0.04em; color: transparent;
    -webkit-text-stroke: 1.5px var(--tint-ink, #0b4a9e); opacity: 0.12; pointer-events: none; white-space: nowrap; }
.m3HeroWord::before{ content: attr(data-word); }   /* 01 audit item 1: decoration only, never page text */
.m3HeroSticker{ display: none; }
.m3HeroSticker.isOn{ position: absolute; z-index: 2; right: 8%; top: 132px; display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px;
    background: #fff; border: 1px solid var(--m-line); box-shadow: 0 3px 0 var(--m-line); font: 700 13px/1 var(--m-font); color: var(--tint-ink, #0b4a9e); transform: rotate(3deg); }
.m3HeroSticker svg{ width: 16px; height: 16px; }
body.isM3[data-ptype="home"] .pgHero h1, body.isM3[data-ptype="service"] .pgHero h1, body.isM3[data-ptype="industry"] .pgHero h1{ font-size: clamp(38px, 5.4vw, 72px) !important; letter-spacing: -0.035em !important; }
body.isM3[data-ptype="service"] .m3QuickForm{ box-shadow: 10px 10px 0 var(--tint), var(--m-shadow-up) !important; }
body.isM3[data-ptype="industry"] .m3HeroBlob{ border-radius: 30% 70% 52% 48% / 55% 35% 65% 45%; }
body.isM3[data-ptype="city"] .m3HeroBlob{ right: auto; left: 52%; width: min(38vw, 520px); }
body.isM3[data-ptype="guide"] .m3HeroBlob, body.isM3[data-ptype="page"] .m3HeroBlob{ width: min(34vw, 460px); top: 18%; opacity: 0.7; }
@media (max-width: 767px){
    .m3HeroBlob{ width: 280px; right: -110px; top: 60px; opacity: 0.6; }
    .m3HeroDots{ display: none; }
    .m3HeroWord{ font-size: 64px; right: -8px; bottom: 8px; }
    .m3HeroSticker{ display: none; }
.m3HeroSticker.isOn{ position: static; margin: 0 0 12px 16px; transform: rotate(-2deg); }
    body.isM3[data-ptype="service"] .m3QuickForm{ box-shadow: 6px 6px 0 var(--tint), var(--m-shadow) !important; }
}

/* D90: one belief per page, four looks */
body.isM3 main > section.m3Belief{ padding: 4px 0 20px !important; margin-top: -12px; }   /* D189/D167: the sticker sits with the content above it, never in an empty band */
.m3Belief .pgWrap{ display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.m3Belief.isQuote figure{ margin: 0 auto; max-width: 820px; text-align: center; position: relative; padding: 8px 12px; }
.m3BeliefMark{ display: block; font: 800 96px/0.6 var(--m-font); color: var(--tint-ink, #0b4a9e); opacity: 0.25; height: 44px; }
.m3Belief.isQuote blockquote{ margin: 0; font: 700 clamp(24px, 3vw, 36px)/1.25 var(--m-font); letter-spacing: -0.02em; color: var(--m-ink); }
.m3Belief.isQuote figcaption{ margin-top: 12px; font-size: 14px; font-weight: 600; color: var(--m-ink-3); }
.m3Belief.isQuote .pgWrap{ align-items: center; }
.m3BeliefSticker{ margin: 0; display: inline-flex; align-items: center; gap: 14px; padding: 18px 24px; border-radius: 18px; background: var(--t-butter, #fff3c9);
    border: 1px solid rgba(0,0,0,0.06); box-shadow: 0 4px 0 rgba(0,0,0,0.06); transform: rotate(-1.8deg); max-width: 640px; color: var(--m-ink);
    font: 700 19px/1.35 var(--m-font); }
.m3BeliefSticker svg{ width: 30px; height: 30px; flex: none; color: var(--i-butter, #765600); }
.m3BeliefSticker small{ display: block; font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--i-butter, #765600); margin-bottom: 2px; }
.m3Belief.isSticker .pgWrap{ align-items: flex-start; }
.m3BeliefBanner{ margin: 0; width: 100%; display: flex; align-items: center; gap: 12px; padding: 14px 20px; border-radius: 999px; background: var(--tint);
    font: 600 17px/1.4 var(--m-font); color: var(--m-ink); }
.m3BeliefBanner svg{ width: 22px; height: 22px; flex: none; color: var(--tint-ink); }
.m3BeliefBanner b{ flex: none; font-size: 13px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--tint-ink); }
body.isM3 .pgCard.m3BeliefCard{ background: var(--tint-ink, #0b4a9e) !important; border-color: transparent !important; }
body.isM3 .pgCard.m3BeliefCard h3{ color: #fff !important; font-size: 13px !important; text-transform: uppercase; letter-spacing: 0.05em; }
body.isM3 .pgCard.m3BeliefCard p{ color: #fff !important; font-size: 20px !important; font-weight: 700; line-height: 1.35; }
body.isM3 .pgCard.m3BeliefCard .pgCardIcon{ background: rgba(255,255,255,0.18) !important; color: #fff !important; }
.m3BeliefMore{ font-size: 15px; font-weight: 700; color: var(--m-blue) !important; }
@media (max-width: 767px){
    .m3BeliefBanner{ border-radius: 18px; flex-wrap: wrap; }
    .m3BeliefSticker{ transform: rotate(-1deg); font-size: 17px; }
}

/* D90: hook bars as compact cards (max 640px), icon, two lines, button below, alternating tint and side */
body.isM3 main > section.peHook{ padding: 20px 0 !important; }
body.isM3 .peHook .pgWrap{ display: flex; }
body.isM3 .peHook.m3HookR .pgWrap{ justify-content: flex-end; }
body.isM3 .peHookLine{ max-width: 640px; display: grid !important; grid-template-columns: 44px 1fr; gap: 6px 14px; align-items: start; padding: 20px 22px !important;
    font-size: 17px !important; line-height: 1.45; box-shadow: var(--m-shadow); }
body.isM3 .peHookLine > svg.m3HookIcon{ grid-row: span 2; width: 44px; height: 44px; padding: 10px; border-radius: 14px; background: #fff; color: var(--m-blue); }
body.isM3 .peHookLine .peHookBtn{ grid-column: 2; justify-self: start; margin-top: 8px; min-height: 42px !important; }
body.isM3 .peHook.m3HookT1 .peHookLine{ background: var(--t-mint) !important; }
body.isM3 .peHook.m3HookT1 svg.m3HookIcon{ color: var(--i-mint); }
body.isM3 .peHook.m3HookT2 .peHookLine{ background: var(--t-lavender) !important; }
body.isM3 .peHook.m3HookT2 svg.m3HookIcon{ color: var(--i-lavender); }
@media (max-width: 767px){ body.isM3 .peHook .pgWrap, body.isM3 .peHook.m3HookR .pgWrap{ justify-content: stretch; } body.isM3 .peHookLine{ max-width: none; width: 100%; } }

/* 07 (f): cookie and privacy banner (only present when site_data.CONSENT_BANNER is on): three equal choices */
.peConsent{ position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 9999; max-width: 720px; margin: 0 auto; background: #fff; color: var(--m-ink);
    border: 1px solid var(--m-line); border-radius: 18px; box-shadow: 0 12px 40px rgba(16,24,40,0.18); padding: 18px 20px; font: 500 15px/1.5 var(--m-font); }
.peConsent p{ margin: 0 0 12px; } .peConsent a{ color: var(--m-blue); }
.peConsentBtns{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.peConsentBtns button{ min-height: 44px; border-radius: 999px; border: 1.5px solid var(--m-blue); background: #fff; color: var(--m-blue); font: 700 14px/1.2 var(--m-font); cursor: pointer; }
@media (max-width: 575px){ .peConsentBtns{ grid-template-columns: 1fr; } .peConsent{ bottom: 84px; } }

/* 03b D104/D105/D107/D111: events, brands, AI help, leaders: light cards, swipe rows on phones */
.m3XGrid{ display: grid; gap: 18px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.m3XGrid.cols2{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 991px){ .m3XGrid, .m3XGrid.cols2{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.m3XCard{ background: #fff; border: 1px solid var(--m-line); border-radius: var(--m-r); box-shadow: var(--m-shadow); padding: 20px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.m3XCard h3{ margin: 0; font: 700 18px/1.3 var(--m-font); color: var(--m-ink); }
.m3Tag{ align-self: flex-start; padding: 3px 10px; border-radius: 999px; background: var(--tint); color: var(--tint-ink); font: 700 12px/1.4 var(--m-font); text-transform: capitalize; }
.m3XLead{ margin: 0; font-size: 16px; line-height: 1.5; color: var(--m-ink); }
.m3XFix, .m3XFact{ margin: 0; font-size: 15px; line-height: 1.5; color: var(--m-ink-2); }
.m3XFix b, .m3XFact b{ display: block; font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--tint-ink); margin-bottom: 2px; }
.m3XSrc{ margin: auto 0 0; font-size: 13px; color: var(--m-ink-3); }
.m3XSrc a, .m3Src{ color: var(--m-ink-3); text-decoration: underline; text-underline-offset: 2px; }
.m3XMeta{ margin: 0; display: flex; flex-direction: column; gap: 4px; font-size: 14px; color: var(--m-ink-2); }
.m3XMeta span{ display: inline-flex; align-items: center; gap: 6px; }
.m3XMeta svg, .m3Chan svg{ width: 16px; height: 16px; flex: none; color: var(--tint-ink); }
.m3XMeta a{ color: var(--m-blue); }
.m3XCat{ margin: 0; font-size: 14px; color: var(--m-ink-2); text-transform: capitalize; }
.m3XWhen{ color: var(--m-ink-3); }
.m3Chans{ margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.m3Chan{ display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; background: var(--m-surface); border: 1px solid var(--m-line); font-size: 13px; color: var(--m-ink-2); }
.m3XNote{ margin: 14px 0 0; font-size: 13px; color: var(--m-ink-3); }
.m3XLesson{ margin: 18px 0 0; font: 600 17px/1.5 var(--m-font); color: var(--m-ink); }
.m3XCta{ margin: 20px 0 0; }
.m3LinkRow{ margin: 14px 0 0; display: flex; flex-wrap: wrap; gap: 8px 18px; }
.m3LinkRow a{ font-weight: 700; font-size: 15px; color: var(--m-blue) !important; }
.m3Tip{ margin-top: 20px; padding: 20px 22px; border-radius: var(--m-r-lg); background: var(--tint); max-width: 760px; }
.m3Tip h3{ margin: 0 0 6px; font: 700 18px/1.3 var(--m-font); }
.m3Tip p{ margin: 0; }
@media (max-width: 767px){
    .m3XGrid, .m3XGrid.cols2{ display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; padding-bottom: 6px; scrollbar-width: none; }
    .m3XGrid::-webkit-scrollbar{ display: none; }
    .m3XCard{ flex: 0 0 86%; scroll-snap-align: start; }
}



/* D113: Font Awesome now loads without blocking the first paint; keep a box for its icons so nothing moves when it arrives */
.fa-brands, .fa-solid, .fa-regular{ display: inline-block; min-width: 1em; min-height: 1em; }

/* persona audit (15 Oct): call-me-back form in the blue box on phones; clear FAQ +/-; no floating arrow on phones;
   industry cards 2 per row and quotes stacked on phones (vertical scrollers miss what sits to the right) */
.m3CtaForm{ display: none !important; }
@media (max-width: 767px){
    body.isM3 form.m3CtaForm.pgForm{ display: grid !important; grid-template-columns: 1fr !important; gap: 10px !important; margin-top: 18px;
        padding: 18px; border-radius: var(--m-r-lg); background: #fff; border: 1px solid var(--m-line); }
    body.isM3 .m3CtaForm .m3QuickTitle{ margin: 0; font: 700 16px/1.35 var(--m-font); color: var(--m-ink); }
}
body.isM3 .faqQ > b{ width: 28px !important; height: 28px !important; flex: 0 0 28px; border: 1.5px solid var(--m-line) !important; border-radius: 50% !important;
    transform: none !important; display: inline-flex !important; align-items: center; justify-content: center; background: #fff !important; }
body.isM3 .faqQ > b::before{ display: block !important; content: "+"; position: static !important; width: auto !important; height: auto !important;
    background: none !important; transform: none !important; font: 600 18px/1 var(--m-font); color: var(--m-ink-2); }
body.isM3 .is-open .faqQ > b::before, body.isM3 .faqQ[aria-expanded="true"] > b::before{ content: "\2212"; }
body.isM3 .faqQ > b::after{ display: none !important; }
@media (max-width: 991px){ body.isM3 .ftTop{ display: none !important; } }
@media (max-width: 575px){
    body.isM3 .peSvcGrid{ display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; overflow: visible !important; gap: 10px !important; }
    body.isM3 .peSvcGrid > .peSvcCard{ flex: none !important; width: auto !important; min-width: 0 !important; padding: 14px !important; }
    body.isM3 .peSvcCard h3{ font-size: 15px !important; }
    body.isM3 .peSvcCard p{ font-size: 13px !important; }
    .m3QuoteRow{ display: grid !important; grid-template-columns: 1fr !important; overflow: visible !important; }
    .m3Quote{ flex: none !important; }
}
@media (max-width: 767px){
    body.isM3 .ctaWrap form.m3CtaForm, body.isM3 .ctaWrap form.m3CtaForm label, body.isM3 .ctaWrap form.m3CtaForm .m3QuickTitle,
    body.isM3 .ctaWrap form.m3CtaForm .m3QuickNote{ color: var(--m-ink) !important; }
    body.isM3 .ctaWrap form.m3CtaForm label{ font-size: 13px !important; font-weight: 600 !important; text-transform: none !important; letter-spacing: normal !important; }
    body.isM3 .ctaWrap form.m3CtaForm .m3QuickNote a{ color: var(--m-blue) !important; }
}

/* persona audit (03b): "More ways AI helps" / "Show global events" folds under the card grids */
.m3XMoreBox{ margin-top: 14px; }
.m3XMoreBox > summary{ display: inline-flex; align-items: center; gap: 8px; cursor: pointer; list-style: none; padding: 10px 16px; border-radius: 999px;
    border: 1.5px solid var(--m-line); background: #fff; font: 700 15px/1.2 var(--m-font); color: var(--m-blue); }
.m3XMoreBox > summary::-webkit-details-marker{ display: none; }
.m3XMoreBox > summary::after{ content: "+"; font-size: 18px; }
.m3XMoreBox[open] > summary::after{ content: "\2212"; }
.m3XMoreBox > .m3XGrid{ margin-top: 14px; }

/* user 15 Oct: the call-back promise under the main hero button (hidden where the hero form replaces the buttons) */
.m3Promise{ margin: 10px 0 0; font-size: 14px; font-weight: 600; color: var(--m-ink-2); }
.m3Lead .pgHeroBtns.m3HasForm + .m3Promise{ display: none; }


/* ---------------------------------------------------------------- D125 (user via Boss, 15 Oct): final staging batch */
/* no sideways sliders on phones: every card row stacks; long stacks show four, then "Show more" (m3.js) */
@media (max-width: 767px){
    body.isM3 .pgCards .pgGrid, body.isM3 .pgWins .pgWinGrid, body.isM3 .m3XGrid, body.isM3 .m3XGrid.cols2, body.isM3 .m3XGrid.cols3,
    body.isM3 .peVideoGrid, body.isM3 .m3QuoteRow{ display: grid !important; grid-template-columns: minmax(0, 1fr) !important; overflow: visible !important;
        scroll-snap-type: none !important; gap: 14px !important; padding-bottom: 0 !important; }
    body.isM3 .pgCards .pgGrid > *, body.isM3 .pgWins .pgWinGrid > *, body.isM3 .m3XCard, body.isM3 .peVideo, body.isM3 .m3Quote{
        flex: none !important; width: auto !important; min-width: 0 !important; grid-column: auto !important; }
    body.isM3 .pgCards .pgGrid::after, body.isM3 .pgWins .pgWinGrid::after{ content: none !important; }
    body.isM3 .peSvcGrid{ display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; overflow: visible !important; gap: 10px !important; }
    body.isM3 .peSvcGrid > .peSvcCard{ flex: none !important; width: auto !important; min-width: 0 !important; }
    body.isM3 .m3Capped > :nth-child(n+5){ display: none !important; }
}
.m3ShowMore{ display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 12px; padding: 10px 18px; border-radius: 999px;
    border: 1.5px solid var(--m-line); background: #fff; font: 700 15px/1.2 var(--m-font); color: var(--m-blue); cursor: pointer; }
.m3ShowMore::after{ content: "+"; font-size: 18px; }
.m3ShowMore[aria-expanded="true"]::after{ content: "\2212"; }
.m3XMoreBox > summary, .m3WorthBox > summary{ min-height: 44px; }

/* worry cards: stacked, each with "This is mine" */
.m3Worries .peProblem{ display: flex; flex-direction: column; }
.m3Worry{ align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin-top: auto; padding: 10px 18px;
    border-radius: 999px; background: var(--m-blue); color: #fff !important; font: 700 15px/1.2 var(--m-font); text-decoration: none !important; }
.m3Worries .peProblem > p:last-of-type{ margin-bottom: 14px; }
.m3Worry:hover, .m3Worry:focus-visible{ filter: brightness(1.08); }

/* hub hero form: the worry the reader picked; the photo slot */
.m3WorryPick{ margin: 0; padding: 8px 12px; border-radius: 10px; background: var(--tint); color: var(--tint-ink, var(--m-ink)); font: 600 14px/1.4 var(--m-font); }
.m3HeroPhoto{ grid-column: 1 / -1; margin: 22px 0 0; }
.m3HeroPhoto img{ display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--m-r-lg); }
.m3HeroPhoto figcaption{ margin-top: 8px; font-size: 13px; color: var(--m-ink-3); }

/* proof block */
.m3WeDid{ max-width: 760px; margin: 0 0 18px; font-size: 17px; line-height: 1.6; color: var(--m-ink); }
.m3IndProof .m3LogosLabel{ margin: 6px 0 10px; }
.m3LogoList.isStill{ display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: center; padding: 0; margin: 0 0 6px; list-style: none; animation: none; }
.m3LogoList.isStill img{ height: 48px; width: auto; }
.m3IndProof .m3QuoteRow{ margin-top: 18px; }
.m3IndProof .m3QuoteRow.isOne{ display: block; max-width: 760px; }
.m3IndProof .m3LogosAll{ display: inline-flex; align-items: center; min-height: 44px; margin-top: 10px; }
.m3ProofQuote{ max-width: 760px; margin: 0 0 14px; }

/* "Worth knowing": one closed fold */
.m3WorthBox > summary{ display: inline-flex; align-items: center; gap: 8px; cursor: pointer; list-style: none; padding: 10px 18px; border-radius: 999px;
    border: 1.5px solid var(--m-line); background: #fff; font: 700 15px/1.3 var(--m-font); color: var(--m-blue); }
.m3WorthBox > summary::-webkit-details-marker{ display: none; }
.m3WorthBox > summary::after{ content: "+"; font-size: 18px; }
.m3WorthBox[open] > summary::after{ content: "\2212"; }
.m3WkPart{ margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--m-line); }
.m3WkHead{ margin: 0 0 12px; font: 800 20px/1.3 var(--m-font); color: var(--m-ink); }
.m3WkLead{ font-weight: 600; max-width: 760px; }
.m3WkGroup h4{ margin: 0 0 8px; font: 700 16px/1.3 var(--m-font); }
.m3WkGroup ul{ margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.m3WkGroup li{ display: flex; gap: 8px; align-items: flex-start; }
.m3WkPart .pgProse{ max-width: 760px; }

/* D133: the hub cost block ends with the user's line and the call-back form (no cost sheet) */
.m3PriceLine{ margin-top: 22px !important; font-weight: 700; }
body.isM3 .pePrice form.m3PriceForm.pgForm{ display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 10px !important; justify-self: start !important;
    max-width: 520px; margin: 14px 0 6px; padding: 18px; border-radius: var(--m-r-lg); background: #fff; border: 1px solid var(--m-line); box-shadow: none !important; }
body.isM3 .pePrice .m3PriceForm .m3QuickTitle{ margin: 0; font: 700 16px/1.35 var(--m-font); color: var(--m-ink); }

/* hub closing box: the call-me-back form and the mark-up form on phones AND laptops, dark text on white (no white-on-white) */
body.isM3 .ctaWrap.isHub form.m3CtaForm.pgForm{ display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 10px !important; margin-top: 18px;
    padding: 18px; border-radius: var(--m-r-lg); background: #fff; border: 1px solid var(--m-line); max-width: 520px; justify-self: start !important; }
body.isM3 .ctaWrap form.m3CtaForm, body.isM3 .ctaWrap form.m3CtaForm label, body.isM3 .ctaWrap form.m3CtaForm .m3QuickTitle,
body.isM3 .ctaWrap form.m3CtaForm .m3QuickNote{ color: var(--m-ink) !important; }
body.isM3 .ctaWrap form.m3CtaForm label{ font-size: 13px !important; font-weight: 600 !important; text-transform: none !important; letter-spacing: normal !important; }
body.isM3 .ctaWrap form.m3CtaForm .m3QuickNote a{ color: var(--m-blue) !important; }
body.isM3 .ctaWrap form.m3CtaForm .m3QuickTitle{ margin: 0; font: 700 16px/1.35 var(--m-font); }
body.isM3 .ctaWrap form.m3CtaForm .m3Opt{ font-weight: 500; color: var(--m-ink-3); }

/* growth-plan page: name + phone first, the rest folded */
.m3OptBox > summary{ display: inline-flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; list-style: none; font: 700 15px/1.3 var(--m-font); color: var(--m-blue); }
.m3OptBox > summary::-webkit-details-marker{ display: none; }
.m3OptBox > summary::after{ content: "+"; font-size: 18px; }
.m3OptBox[open] > summary::after{ content: "\2212"; }
.m3OptGrid{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; margin-top: 12px; }
.m3OptGrid .fullRow{ grid-column: 1 / -1; }
@media (max-width: 575px){ .m3OptGrid{ grid-template-columns: minmax(0, 1fr); } }
.m3FromPage{ margin: 0; padding: 10px 14px; border-radius: 10px; background: var(--tint, #eef4ff); font-weight: 600; }
.pgContactForm > .m3LinkRow{ margin-top: 16px; }
body.isM3 .pgHero.m3Short{ min-height: 0 !important; padding-bottom: 8px !important; }
body.isM3 .pgHero.m3Short .pgCircle, body.isM3 .pgHero.m3Short .pgScrollCue{ display: none !important; }
/* D125 tap targets of at least 40px on phones: bigger buttons; chips and link rows get an invisible larger hit area */
@media (max-width: 991px){
    body.isM3 .peMoreBtn, body.isM3 .m3More, body.isM3 .m3Tab{ min-height: 44px; }
    body.isM3 .m3Toc a, body.isM3 .m3LinkRow a, body.isM3 .m3XMeta a, body.isM3 .peTable th a{ position: relative; }
    body.isM3 .m3Toc a::after, body.isM3 .m3LinkRow a::after, body.isM3 .m3XMeta a::after, body.isM3 .peTable th a::after{
        content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%); }
    body.isM3 .m3LinkRow{ row-gap: 18px; }
}
/* D131 (user): the logo file matches its background (navy + blue F on light), so no colour filter on it */
html .logoImg img.peLogoTrue, html .ftLogo img.peLogoTrue{ filter: none !important; width: auto; }
/* D132 (user): the pastel boxes slowly change colour every ~30 s (m3.js shifts the palette one step; each tint keeps its own ink,
   so text contrast stays the same). Registered colours fade in 1.5 s; paint only, no layout change. Off with reduced motion. */
@property --t-sky{ syntax: '<color>'; inherits: true; initial-value: #e5f0ff; }
@property --i-sky{ syntax: '<color>'; inherits: true; initial-value: #0b4a9e; }
@property --t-mint{ syntax: '<color>'; inherits: true; initial-value: #dcf5e9; }
@property --i-mint{ syntax: '<color>'; inherits: true; initial-value: #0e6b44; }
@property --t-peach{ syntax: '<color>'; inherits: true; initial-value: #ffe7da; }
@property --i-peach{ syntax: '<color>'; inherits: true; initial-value: #9a3b0e; }
@property --t-lavender{ syntax: '<color>'; inherits: true; initial-value: #ece7ff; }
@property --i-lavender{ syntax: '<color>'; inherits: true; initial-value: #4e35a6; }
@property --t-butter{ syntax: '<color>'; inherits: true; initial-value: #fff3c9; }
@property --i-butter{ syntax: '<color>'; inherits: true; initial-value: #765600; }
@property --t-rose{ syntax: '<color>'; inherits: true; initial-value: #ffe4ee; }
@property --i-rose{ syntax: '<color>'; inherits: true; initial-value: #9b1e4f; }
@property --t-teal{ syntax: '<color>'; inherits: true; initial-value: #d9f3f2; }
@property --i-teal{ syntax: '<color>'; inherits: true; initial-value: #0d6464; }
@media (prefers-reduced-motion: no-preference){ html.m3Shift{ transition: --t-sky 1.5s ease, --i-sky 1.5s ease, --t-mint 1.5s ease, --i-mint 1.5s ease, --t-peach 1.5s ease, --i-peach 1.5s ease, --t-lavender 1.5s ease, --i-lavender 1.5s ease, --t-butter 1.5s ease, --i-butter 1.5s ease, --t-rose 1.5s ease, --i-rose 1.5s ease, --t-teal 1.5s ease, --i-teal 1.5s ease; } }
/* D135: the speaker's face (or the client's logo) in the same circle on every quote */
.peQuoteCard figcaption.m3HasFace{ display: flex; align-items: center; gap: 12px; }
.m3QuoteWho{ display: grid; gap: 2px; min-width: 0; }
.m3Avatar.isLogo{ object-fit: contain; background: #fff; border: 1px solid var(--m-line); padding: 5px; }
/* D138 audit (16 Oct): readable everywhere. The older bright link blue (#0075ff, 3.9-4.2:1) becomes the brand blue used by the
   buttons (#0b5fd9, about 5:1); the lightest grey gets darker (4.2 -> 5+:1 on the pastels); no running text under 13px */
body.isM3{ --blue: var(--m-blue); --m-ink-3: #5a6377; }
body.isM3 .m3Chip, body.isM3 .peTable th, body.isM3 .m3QuickNote, body.isM3 .ctaEyebrow, body.isM3 .ftCtaEyebrow, body.isM3 .pePersonRole,
body.isM3 .pgForm label, body.isM3 .ftClock, body.isM3 .peCheckNote, body.isM3 main small, body.isM3 .m3XFix b, body.isM3 .ftCin, body.isM3 .m3Tag,
body.isM3 .ftFraud, body.isM3 .peDocMeta, body.isM3 .pgWinChip, body.isM3 .pgReachK{ font-size: max(13px, 1em) !important; }
body.isM3 .pgForm label{ font-size: 13px !important; }
body.isM3 .peBrandNote p, body.isM3 .m3XNote, body.isM3 .peTableNote, body.isM3 .peDocMeta, body.isM3 .m3XSrc, body.isM3 .peDeeperSrc{ max-width: 80ch; }
@media (max-width: 991px){ body.isM3 .peCheckGroup > summary, body.isM3 .peCheckPrint{ min-height: 44px; } body.isM3 .peCheckGroup > summary{ display: flex; align-items: center; } }

/* ---------------------------------------------------------------- D139 header menu, design A (user 16 Oct: "A: big and visual") */
.mxCol[data-t="lavender"], .mnPil[data-t="lavender"]{ --mxT: var(--t-lavender); --mxI: var(--i-lavender); }
.mxCol[data-t="peach"], .mnPil[data-t="peach"]{ --mxT: var(--t-peach); --mxI: var(--i-peach); }
.mxCol[data-t="sky"], .mnPil[data-t="sky"]{ --mxT: var(--t-sky); --mxI: var(--i-sky); }
.mxCol[data-t="mint"], .mnPil[data-t="mint"]{ --mxT: var(--t-mint); --mxI: var(--i-mint); }
.mxTile{ flex: none; width: 40px; height: 40px; border-radius: 12px; background: #fff; color: var(--mxI); display: inline-flex; align-items: center; justify-content: center; }
.mxTile svg{ width: 20px; height: 20px; }
.mxHeadTxt{ display: grid; gap: 2px; min-width: 0; }
.mxHeadTxt b{ font: 700 16px/1.25 var(--m-font); color: var(--mxI); }
.mxHeadTxt small{ font: 500 13px/1.35 var(--m-font); color: var(--mxI); opacity: .9; }

/* desktop panel */
body.isM3 .headerWrap .headerInner .menuWrap > ul > li .subMenu.peMega.peMegaA{
    width: min(1200px, calc(100vw - 48px)); display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 0; padding: 0 !important;
    border-radius: 24px !important; overflow: hidden; box-shadow: 0 24px 60px rgb(27 35 51 / 14%), 0 4px 12px rgb(27 35 51 / 6%) !important; }
body.isM3 .peMegaA > li{ list-style: none; }
body.isM3 .peMegaA .mxMain{ padding: 20px 22px 22px; }
body.isM3 .peMegaA .mxPop{ display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid var(--m-line); }
body.isM3 .peMegaA .mxPop > span{ font: 600 14px var(--m-font); color: var(--m-ink-2); margin-right: 4px; }
body.isM3 .headerWrap .headerInner .menuWrap > ul > li .subMenu.peMegaA a.mxChip{ display: inline-flex; padding: 8px 14px !important; border-radius: 999px; border: 1px solid var(--m-line);
    background: var(--m-surface); font: 600 14px/1.2 var(--m-font) !important; color: var(--m-ink) !important; }
body.isM3 .headerWrap .headerInner .menuWrap > ul > li .subMenu.peMegaA a.mxChip:hover{ background: var(--m-blue); border-color: var(--m-blue); color: #fff !important; }
body.isM3 .peMegaA .mxCols{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
body.isM3 .headerWrap .headerInner .menuWrap > ul > li .subMenu.peMegaA a.mxHead, body.isM3 .headerWrap .headerInner .menuWrap > ul > li .subMenu.peMegaA span.mxHead{ display: flex !important; gap: 12px; align-items: flex-start; padding: 14px !important;
    margin-bottom: 6px; border-radius: 14px; background: var(--mxT); }
body.isM3 .headerWrap .headerInner .menuWrap > ul > li .subMenu.peMegaA a.mxRow{ display: block; padding: 6px 10px !important; border-radius: 12px; }
body.isM3 .peMegaA a.mxRow b{ display: block; font: 600 15px/1.3 var(--m-font); color: var(--m-ink); }
body.isM3 .peMegaA a.mxRow small{ display: block; margin-top: 2px; font: 500 13px/1.35 var(--m-font); color: var(--m-ink-3); }
body.isM3 .headerWrap .headerInner .menuWrap > ul > li .subMenu.peMegaA a.mxRow:hover, body.isM3 .headerWrap .headerInner .menuWrap > ul > li .subMenu.peMegaA a.mxRow:focus-visible{ background: var(--m-surface); }
body.isM3 .peMegaA a.mxRow:hover b{ color: var(--m-blue); }
body.isM3 .headerWrap .headerInner .menuWrap > ul > li .subMenu.peMegaA a.mxAll{ display: block; padding: 10px 12px !important; font: 700 14px var(--m-font) !important; color: var(--m-blue) !important; }
body.isM3 .peMegaA .mxRail{ background: var(--m-blue); color: #fff; padding: 26px 24px; display: flex; flex-direction: column; gap: 14px; }
body.isM3 .peMegaA .mxRailT{ margin: 0; font: 800 22px/1.2 var(--m-font); color: #fff; }
body.isM3 .peMegaA .mxRailP{ margin: 0; font: 500 15px/1.5 var(--m-font); color: rgb(255 255 255 / 92%); }
body.isM3 .headerWrap .headerInner .menuWrap > ul > li .subMenu.peMegaA a.mxRailBtn{ display: block; text-align: center; padding: 13px 18px !important; border-radius: 999px; background: #fff;
    color: var(--m-blue) !important; font: 700 16px var(--m-font) !important; }
body.isM3 .peMegaA .mxPair{ display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
body.isM3 .headerWrap .headerInner .menuWrap > ul > li .subMenu.peMegaA .mxPair a{ display: block; text-align: center; padding: 11px 8px !important; border-radius: 999px;
    border: 1px solid rgb(255 255 255 / 50%); color: #fff !important; font: 600 15px var(--m-font) !important; }
body.isM3 .headerWrap .headerInner .menuWrap > ul > li .subMenu.peMegaA .mxPair a:hover{ background: rgb(255 255 255 / 12%); }
body.isM3 .headerWrap .headerInner .menuWrap > ul > li .subMenu.peMegaA a.mxRailAll{ margin-top: auto; padding: 0 !important; color: #fff !important; font: 600 14px var(--m-font) !important; text-decoration: underline; }
@media (max-width: 1199px){ body.isM3 .headerWrap .headerInner .menuWrap > ul > li .subMenu.peMega.peMegaA{ grid-template-columns: 1fr; }
    body.isM3 .peMegaA .mxRail{ flex-direction: row; flex-wrap: wrap; align-items: center; padding: 16px 22px; }
    body.isM3 .peMegaA .mxRailP, body.isM3 .peMegaA a.mxRailAll{ display: none; } }

/* phone drawer */
body.isM3 .peMobileNav.peMobA{ background: #fff !important; padding: 84px 16px 120px; }
body.isM3 .peMobA .mnPair{ display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
body.isM3 .peMobA .mnPair a{ display: flex; align-items: center; justify-content: center; min-height: 52px; border-radius: 14px; border: 1px solid var(--m-line);
    font: 700 16px var(--m-font); color: var(--m-ink) !important; text-decoration: none; }
body.isM3 .peMobA .mnPair a.isWa{ background: var(--t-mint); border-color: transparent; color: var(--i-mint) !important; }
body.isM3 .peMobA details, body.isM3 .peMobA .peMobileTop{ border-bottom: 1px solid var(--m-line) !important; }
body.isM3 .peMobA summary, body.isM3 .peMobA .peMobileTop{ display: flex; align-items: center; min-height: 56px; padding: 0 4px !important;
    font: 700 18px var(--m-font) !important; letter-spacing: normal !important; text-transform: none !important; color: var(--m-ink) !important; }
body.isM3 .peMobA summary::after{ margin-left: auto; color: var(--m-blue) !important; font-size: 22px; }
body.isM3 .peMobA .peMobPop{ padding: 4px 0 6px !important; }
body.isM3 .peMobA .peMobPop li a{ border-color: var(--m-line) !important; background: var(--m-surface); color: var(--m-ink) !important; font: 600 14px var(--m-font) !important; }
body.isM3 .peMobA details.mnPil{ border: 0 !important; margin: 8px 0 !important; border-radius: 14px; background: var(--mxT); }
body.isM3 .peMobA details.mnPil > summary{ gap: 12px; min-height: 64px; padding: 8px 12px !important; }
body.isM3 .peMobA details.mnPil > summary::after{ color: var(--mxI) !important; }
body.isM3 .peMobA details.mnPil ul{ background: #fff; margin: 0 4px 4px !important; border-radius: 12px; padding: 4px 12px !important; }
body.isM3 .peMobA details.mnPil li a{ display: flex; align-items: center; min-height: 48px; font: 600 15px var(--m-font) !important; color: var(--m-ink) !important;
    border-bottom: 1px solid var(--m-line); text-transform: none !important; letter-spacing: normal !important; }
body.isM3 .peMobA details.mnPil li:last-child a{ border-bottom: 0; color: var(--m-blue) !important; }
body.isM3 .peMobA details:not(.mnPil) > ul li a, body.isM3 .peMobA .peMobAll a{ display: flex; align-items: center; min-height: 48px; font: 600 16px var(--m-font) !important;
    text-transform: none !important; letter-spacing: normal !important; color: var(--m-ink) !important; }
body.isM3 .peMobA .peMobAll a{ color: var(--m-blue) !important; }
body.isM3 .peMobA .mnSticky{ position: fixed; left: 0; right: 0; bottom: 0; z-index: 2; margin: 0 !important; padding: 12px 16px 16px; background: #fff; border-top: 1px solid var(--m-line); text-align: center; }
body.isM3 .peMobA .mnSticky .pgBtn{ display: flex !important; justify-content: center; width: 100%; min-height: 54px; font-size: 17px !important; }
body.isM3 .peMobA .mnSticky small{ display: block; margin-top: 8px; font: 500 13px var(--m-font); color: var(--m-ink-2); }

body.isM3 .peMegaA a.mxRow small{ margin-top: 1px; }
body.isM3 .peMobA .mnSticky{ display: block !important; }
body.isM3 .m3XFact b, body.isM3 .ftCopyBtn span{ font-size: 13px !important; }
body.isM3 .peQuoteCard figcaption.m3HasFace{ display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: flex-start !important; text-align: left !important; gap: 12px !important; }

/* ================================================================
   D195 phone layer (mobile review 17 Oct, the user's yes; batch 1)
   ================================================================ */
@media (max-width: 767px){
    /* item 3: long card stacks become a swipe row with a "1 / N" counter (lighter.js adds .peScroller + .peScrollNav) */
    /* .peScroller x3: outranks the older phone rule that stacks .pgCards .pgGrid / .m3XGrid as a grid */
    body.isM3 .peScroller.peScroller.peScroller{ display: flex !important; flex-wrap: nowrap !important; gap: 12px; overflow-x: auto !important; scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch; scrollbar-width: none; margin-right: -16px; padding: 4px 16px 6px 0; grid-template-columns: none !important; }
    body.isM3 .peScroller::-webkit-scrollbar{ display: none; }
    /* :nth-child(n) outranks the old ".m3Capped > :nth-child(n+5)" cap: every card shows in the swipe row */
    body.isM3 .peScroller.peScroller.peScroller > :nth-child(n){ flex: 0 0 84% !important; max-width: 84%; width: 84%; scroll-snap-align: start; display: flex !important; flex-direction: column; margin: 0 !important; }
    body.isM3 .peScroller ~ .m3ShowMore{ display: none !important; }
    body.isM3 .peScrollNav{ display: flex; align-items: center; justify-content: space-between; margin-top: 10px; }
    body.isM3 .peScrollCount{ font-size: 13px; font-weight: 700; color: var(--m-ink-3, #5a6377); letter-spacing: .02em; }
    body.isM3 .peScrollBtns{ display: flex; gap: 8px; }
    body.isM3 .peScrollBtns button{ width: 40px; height: 40px; border-radius: 999px; border: 1px solid var(--m-line); background: #fff; color: var(--m-ink);
        font-size: 18px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
    body.isM3 .peScrollBtns button:disabled{ opacity: .35; cursor: default; }
    body.isM3 .peScrollBtns button:focus-visible{ outline: 2px solid var(--m-blue, #0b5fd9); outline-offset: 2px; }

    /* item 6: the hero fits one screen: one pill, the facts on one swipeable line, one button plus one text link */
    body.isM3 .pgHeroSub span:not(:first-child), body.isM3 .pgHeroSub i{ display: none; }
    body.isM3 .pgHero .pgHeroInner > .m3Chips, body.isM3 .pgHero .m3Chips{ flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; margin-right: -16px; padding: 2px 16px 4px 0; }
    body.isM3 .pgHero .m3Chips::-webkit-scrollbar{ display: none; }
    body.isM3 .pgHero .m3Chip{ flex: 0 0 auto; transform: none !important; white-space: nowrap; }
    body.isM3 .pgHeroBtns{ display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
    body.isM3 .pgHero .m3Illo{ display: none !important; }   /* the decorative illustration: the hero fits one screen */
    body.isM3 .pgHeroBtns .pgBtn.ghost{ background: none !important; border: 0 !important; box-shadow: none !important; padding: 8px 2px !important;
        min-height: 44px; text-decoration: underline; text-underline-offset: 3px; color: var(--m-blue, #0b5fd9) !important; }

    /* item 7: the "On this page" strip shows that it scrolls (fading right edge) */
    body.isM3 .m3TocInner{ -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent); mask-image: linear-gradient(90deg, #000 82%, transparent); }

    /* item 9: noise off on phones: the icon divider before CTA bands, the city ticker on Contact, the logo strip on guides */
    body.isM3 .m3Divider{ display: none !important; }
    body.isM3.page_contact .indWrap .indRow, body.isM3[data-ptype="guide"] .m3Marquee{ display: none !important; }   /* batch 2 fix: Contact's grey ticker is .indWrap; its client logos stay */
    body.isM3[data-ptype="guide"] .m3LogosAll{ margin-top: 6px; }
}
/* D195 item 10: the one-line note under a heading */
body.isM3 .peHeadNote{ margin: 8px 0 0; max-width: 62ch; font-size: 15.5px; line-height: 1.5; color: var(--m-ink-3, #5a6377); }
@media (max-width: 767px){ body.isM3 .peHeadNote{ font-size: 15px; } }
/* D189: a lone service card shows as one link line */
body.isM3 .peOneLink{ margin: 12px 0 0; font: 700 17px/1.4 var(--m-font); }
body.isM3 .peOneLink a{ color: var(--m-blue, #0b5fd9); text-decoration: underline; text-underline-offset: 3px; }
/* Proof block rhythm (the user's report, 17 Oct, all hubs): logo strip -> 36px -> quote card (full content width) -> 24px -> link.
   The strip's edges fade instead of cutting a logo in half. */
body.isM3 .m3Marquee{ -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%); }
body.isM3 .m3Marquee + .m3ProofQuote, body.isM3 .m3Marquee ~ .m3ProofQuote{ margin-top: 36px !important; }
body.isM3 .m3ProofQuote{ width: 100%; max-width: none !important; box-sizing: border-box; }
body.isM3 .m3ProofQuote + .m3LogosAll, body.isM3 .m3LogosAll{ display: inline-block; margin-top: 24px !important; margin-bottom: 0 !important; }
@media (max-width: 767px){ body.isM3 .m3Marquee + .m3ProofQuote, body.isM3 .m3Marquee ~ .m3ProofQuote{ margin-top: 24px !important; } }
/* D173 (the user, 16 Oct): on desktop every "Read more" is open by default (the page's own scroll nav handles length);
   phones keep their folds. */
@media (min-width: 1024px){
    html.m3Js body.isM3 .m3Clamp:not(.isOpen) > :not(:first-child){ display: revert !important; }
    html.m3Js body.isM3 .m3Clamp:not(.isOpen) > :first-child, html.m3Js body.isM3 .m3Clamp2:not(.isOpen){ display: revert !important; -webkit-line-clamp: unset; overflow: visible; }
    body.isM3 .m3More{ display: none !important; }
}
/* D194: desktop quote rows show three, then "Show all (N)" (m3.js); phones swipe through every quote (lighter.js) */
@media (min-width: 768px){ body.isM3 .m3QuoteRow.m3Capped3 > :nth-child(n+7), body.isM3 .peQuotes.m3Capped3 > :nth-child(n+7){ display: none !important; } body.isM3 .m3QuoteRow ~ .m3ShowMore{ margin-top: 18px; } }
/* D213: the label above Contact's city ticker says one office and team bases (the ticker itself is hidden on phones) */
.indWrap .indLabel{ max-width: 1200px; margin: 0 auto; padding: 14px clamp(16px, 4vw, 48px) 0; font: 600 15px/1.5 var(--m-font, sans-serif); color: var(--m-ink-2, #46506a); }
@media (max-width: 767px){ body.isM3.page_contact .indWrap{ padding: 0 0 14px !important; } }

/* ================================================================
   D218-D221 batch 2.1: the user's own phone and desktop review (17 Oct)
   ================================================================ */
/* (5)(7) text is never faded: heading notes use the normal secondary colour, and the word-by-word scroll fade is off
   (words sat at 16% strength inside opened sections; a hidden-text risk too) */
body.isM3 .peHeadNote{ color: var(--m-ink-2, #46506a) !important; }
body.isM3 .pgScrub .w{ opacity: 1 !important; }
/* (1) stacked cards stand alone: no outer frame around them */
@media (max-width: 767px){
    body.isM3 .peTableScroll:has(> table.m3CardsOnPhone){ border: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; overflow: visible !important; }
}
/* (2) the "On this page" strip is one capsule group, like the "More on this" tabs; on phones it stays put (no sliding away) */
body.isM3 .m3TocInner{ gap: 4px; padding: 5px !important; margin: 8px auto; max-width: min(1160px, calc(100% - 32px)); background: var(--m-surface); border: 1px solid var(--m-line); border-radius: 999px; }
body.isM3 .m3Toc{ border-bottom: 0; }
body.isM3 .m3Toc a{ border: 0 !important; background: transparent; padding: 8px 14px; }
body.isM3 .m3Toc a:hover{ color: var(--tint-ink); }
body.isM3 .m3Toc a.isOn{ background: #fff !important; color: var(--tint-ink); box-shadow: var(--m-shadow); }
@media (max-width: 991px){ body.isM3 .m3Toc.isAway{ transform: none !important; } }
/* (3) logos: bigger, the row keeps moving on touch phones (a tap no longer leaves it paused), tighter band */
body.isM3 .m3Marquee .m3LogoList img, body.isM3 .m3LogoList.isStill img{ height: 56px !important; max-width: 170px !important; filter: none !important; opacity: 1 !important; }
body.isM3 .m3Marquee .m3LogoList li{ padding: 0 18px; }
@media (hover: none){
    .m3Marquee:hover .m3MarqueeTrack, .m3Marquee:focus-within .m3MarqueeTrack{ animation-play-state: running; }
    .m3Marquee:active .m3MarqueeTrack{ animation-play-state: paused; }
}
body.isM3 main > .m3Logos{ padding: 18px 0 !important; }
body.isM3 .m3Logos .pgWrap{ row-gap: 10px; }
body.isM3 .m3Logos .m3LogosAll{ margin-top: 2px !important; }
@media (max-width: 767px){ body.isM3 .m3Deco0, body.isM3 .m3Deco1, body.isM3 .m3Deco2{ display: none !important; } }
/* (6)(9) sections are clearly apart on every width: more space and a thin line between sections */
body.isM3 main > section:not(.pgHero):not(.peSecFold):not(.peHook):not(.m3Belief) + section:not(.ctaWrap):not(.peSecFold):not(.peHook):not(.m3Belief):not(.peBand){ border-top: 1px solid var(--m-line) !important; }
@media (max-width: 767px){
    body.isM3 main > section:not(.pgHero):not(.ctaWrap):not(.peHook):not(.peLesson):not(.peBand):not(.peBrandNote):not(.m3Belief):not(.peSecFold):not(.m3Logos):not(.m3Team){
        padding-top: 52px !important; padding-bottom: 52px !important; }
    body.isM3 main > .peSecFold{ margin-top: 14px !important; margin-bottom: 14px !important; }
}
/* (10) proof block rhythm: words, label, logos, quotes each get their own space */
body.isM3 .m3IndProof .m3WeDid{ margin-bottom: 26px !important; }
body.isM3 .m3IndProof .m3LogosLabel{ display: block; margin: 0 0 12px !important; }
body.isM3 .m3IndProof .m3Marquee, body.isM3 .m3IndProof .m3LogoList.isStill{ margin-bottom: 30px !important; }
body.isM3 .m3IndProof .m3QuoteRow{ margin-top: 0 !important; }
/* D220: the team photo beside the "65+ team" fact on home */
body.isM3 .m3TeamPhoto{ margin: 26px 0 0; }
body.isM3 .m3TeamPhoto img{ display: block; width: 100%; height: auto; aspect-ratio: 960 / 721; border-radius: var(--m-r, 18px); object-fit: cover; }
body.isM3 .m3TeamPhoto figcaption{ margin-top: 8px; font: 500 14px/1.45 var(--m-font); color: var(--m-ink-2); }
@media (min-width: 992px){
    body.isM3 .peProof.m3HasPhoto .pgWrap{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px); gap: 36px; align-items: center; }
    body.isM3 .peProof.m3HasPhoto .peProofList{ grid-template-columns: 1fr 1fr !important; }
    body.isM3 .peProof.m3HasPhoto .m3TeamPhoto{ margin: 0; }
}
@media (min-width: 992px){
    body.isM3 .peProof.m3HasPhoto .pgWrap > :not(.m3TeamPhoto){ grid-column: 1; }
    body.isM3 .peProof.m3HasPhoto .pgWrap > .m3TeamPhoto{ grid-column: 2; grid-row: 1 / span 3; }
}
body.isM3 .m3ShowMore + .m3LogosAll{ margin-left: 18px; }
@media (min-width: 768px){ body.isM3 .m3QuoteRow{ grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ================================================================
   D239 batch 2.2: the team's QA audit (17 Oct) + the desktop layout-shift fix (CrUX desktop CLS 0.31)
   ================================================================ */
/* CLS: the hero drawing and blob no longer move when the text reflows as the web font arrives */
body.isM3 .pgHero .pgHeroInner > .m3Illo{ align-self: start !important; }
.m3HeroBlob{ top: 64px; }
/* (6) one card treatment: no gradient on the first card only */
body.isM3 .pgGrid[data-r3] > .pgCard:first-child{ background: #fff !important; }
/* (9) the old dropdown's hover dot leaked into the mega menu */
body.isM3 .subMenu li a::before{ display: none !important; content: none !important; }
/* (4) the side panel's close button: the x sits in the middle of its circle */
.qcClose{ display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 0 !important; line-height: 1 !important; text-align: center; }
/* (8) phones: one card per row in the small tile grids (4 tiles; 5+ are already a swipe row) */
@media (max-width: 520px){ body.isM3 .peSvcGrid:not(.peScroller){ grid-template-columns: minmax(0, 1fr) !important; } }
/* (15) hero chips never run off the screen: they wrap on phones */
@media (max-width: 767px){ body.isM3 .pgHero .pgHeroInner > .m3Chips, body.isM3 .pgHero .m3Chips, body.isM3 .m3Chips{ flex-wrap: wrap !important; margin-right: 0 !important; padding-right: 0 !important; overflow: visible !important; -webkit-mask-image: none !important; mask-image: none !important; } body.isM3 .m3Chip{ white-space: normal !important; } }
/* (14) phones: shorter headline lines (3-4 line wraps) */
@media (max-width: 480px){ body.isM3 .pgHero .pgTitle, body.isM3 .pgHero h1{ font-size: clamp(30px, 8.4vw, 36px) !important; line-height: 1.12 !important; } }
/* (13) the 16 px side gap everywhere: the closing band + FAQ, the footer, wide quote rows */
body.isM3 .ctaWrap{ padding-left: clamp(16px, 4vw, 48px) !important; padding-right: clamp(16px, 4vw, 48px) !important; }
body.isM3 .ctaWrap .ctaInner{ max-width: 1240px; margin-left: auto; margin-right: auto; }
@media (max-width: 991px){ body.isM3 .ctaWrap .faqSide{ padding-left: 0 !important; padding-right: 0 !important; } }
@media (max-width: 1199px){ footer .container-max, footer .ftSitemap .container-max, footer .ftSiteGrid{ padding-left: 16px !important; padding-right: 16px !important; } }
@media (min-width: 768px) and (max-width: 991px){ body.isM3 .m3QuoteRow{ display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; overflow: visible !important; } body.isM3 .m3QuoteRow > *{ width: auto !important; flex: none !important; } }
/* (12) the closing band's form: room above it, under the buttons, and it lines up with the words */
body.isM3 .ctaWrap .m3CtaForm{ margin-top: 28px !important; justify-self: start !important; margin-left: 0 !important; }
/* SEO page (1): the lone "Get a free growth plan" row gets room above and below */
body.isM3 .m3CtaRow{ padding-top: 32px !important; padding-bottom: 40px !important; }
/* SEO page (2): related pages: words on top, link groups across, arrows stay round */
body.isM3 .pgLinksGrid{ display: block !important; }
body.isM3 .pgLinksGrid > .pgHead{ max-width: 760px; margin-bottom: 24px; }
body.isM3 .pgRowCols{ display: grid !important; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important; gap: 24px 28px !important; width: 100% !important; }
body.isM3 .pgRow > b{ flex: 0 0 auto !important; width: 26px !important; height: 26px !important; aspect-ratio: 1; display: inline-flex !important; align-items: center; justify-content: center; border-radius: 50% !important; }
/* footer CTA: the label sits above the email, never under it */
footer .ftCtaText{ display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 6px; }
footer .ftCtaText .ftMail{ overflow-wrap: anywhere; }
/* (10)(16) phones: the page ends above the sticky bar (footer links were hidden behind it) */
@media (max-width: 767px){ body{ padding-bottom: calc(88px + env(safe-area-inset-bottom)) !important; } }
/* (16) phones: the footer's legal links flow as one centred, wrapped row (not four narrow columns) */
@media (max-width: 767px){
    footer .ftLegal{ display: flex !important; flex-wrap: wrap !important; justify-content: center !important; gap: 8px 18px !important; padding: 0 !important; }
    footer .ftLegal li{ flex: 0 0 auto !important; width: auto !important; }
    footer .ftLegal a{ white-space: nowrap; line-height: 1.6; }
}
/* D249: "See how we price" under a cost question, only while its answer is open; the cost block link line */
body.isM3 .faqMore{ margin: 0 0 14px; padding: 0 20px; font-size: 15px; font-weight: 600; }
body.isM3 .faqMore a{ color: var(--m-blue); }
body.isM3 .faqQ[aria-expanded="false"] ~ .faqMore{ display: none; }
body.isM3 .pePricingLink{ margin-top: 18px; }
/* D253 (the user: "menu is not fitting in 1 screen ... spread into multiple columns, as well as widen the menu bar"):
   the Services panel spans the page, 5 columns (Digital splits into two), one-line descriptions, chips in one row,
   a slimmer blue box; it fits 1366x768 without scrolling (inner scroll only as a last resort) */
@media (min-width: 1200px){
    body.isM3 .headerWrap .headerInner .menuWrap > ul > li .subMenu.peMega.peMegaA{
        position: fixed; left: max(24px, calc((100vw - 1800px) / 2)); right: max(24px, calc((100vw - 1800px) / 2)); width: auto;
        top: calc(var(--m3-top, 72px) + 6px); grid-template-columns: minmax(0, 1fr) 236px;
        max-height: calc(100vh - var(--m3-top, 72px) - 18px); overflow-y: auto; overscroll-behavior: contain; }
    body.isM3 .peMegaA .mxMain{ padding: 14px 18px 14px; }
    body.isM3 .peMegaA .mxPop{ flex-wrap: nowrap; overflow: hidden; padding-bottom: 10px; margin-bottom: 10px;
        -webkit-mask-image: linear-gradient(90deg, #000 94%, transparent); mask-image: linear-gradient(90deg, #000 94%, transparent); }
    body.isM3 .headerWrap .headerInner .menuWrap > ul > li .subMenu.peMegaA a.mxChip{ padding: 6px 12px !important; white-space: nowrap; flex: 0 0 auto; }
    body.isM3 .peMegaA .mxCols{ grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px 14px; }
    body.isM3 .peMegaA .mxCol[data-k="digital"]{ grid-column: span 2; display: grid; grid-template-columns: 1fr 1fr; column-gap: 14px; align-content: start; }
    body.isM3 .peMegaA .mxCol[data-k="digital"] > .mxHead, body.isM3 .peMegaA .mxCol[data-k="digital"] > .mxAll{ grid-column: 1 / -1; }
    body.isM3 .headerWrap .headerInner .menuWrap > ul > li .subMenu.peMegaA a.mxRow{ padding: 4px 10px !important; }
    body.isM3 .peMegaA a.mxRow small{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    body.isM3 .headerWrap .headerInner .menuWrap > ul > li .subMenu.peMegaA a.mxAll{ padding: 6px 10px !important; }
    body.isM3 .peMegaA .mxRail{ padding: 18px 18px; gap: 10px; }
    body.isM3 .peMegaA .mxRailT{ font-size: 19px; }
    body.isM3 .peMegaA .mxRailP{ font-size: 14px; }
}
@media (min-width: 1200px){ body.isM3 .peMegaA .mxCol, body.isM3 .peMegaA .mxCol > *{ min-width: 0; } body.isM3 .peMegaA a.mxRow b{ overflow-wrap: anywhere; } body.isM3 .peMegaA .mxCol[data-k="digital"]{ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

/* D250 A4: numbers strip under the hero of the six D192 industry hubs */
.m3HubStrip{ padding: 0 0 20px; background: #fff; }
.m3HubStrip .m3Chips{ margin-top: 0; justify-content: flex-start; }
/* D252: one neutral sector chip per quote (testimonials-chips.csv) */
.m3SectorChip{ display: inline-block; margin: 6px 6px 0 0; padding: 2px 8px; border-radius: 999px; background: var(--m-surface); border: 1px solid var(--m-line); font-size: 12px; font-weight: 600; color: var(--m-ink-3); font-style: normal; }
/* D266: a card with its own links (home service cards): title link, then a short list of links */
.pgCard.hasLinks h3 a{ color: inherit; text-decoration: none; }
.pgCard.hasLinks h3 a:hover, .pgCard.hasLinks h3 a:focus-visible{ color: var(--m-blue); text-decoration: underline; }
.pgCardLinks{ list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 2px; }
.pgCardLinks a{ display: inline-flex; align-items: center; min-height: 36px; font-weight: 600; font-size: 15px; color: var(--m-blue); text-decoration: none; }
.pgCardLinks a::after{ content: "\2192"; margin-left: 6px; }
.pgCardLinks a:hover, .pgCardLinks a:focus-visible{ text-decoration: underline; }

/* D270: "From the PromotEdge group" strip in the Services menu, footer and phone menu (text links, new tab) */
body.isM3 .peMega .mxGroup{ display: flex; align-items: center; flex-wrap: wrap; gap: 4px 18px; margin-top: 4px; padding: 6px 14px 2px; border-top: 1px solid var(--m-line); }
.mxGroupT{ font-size: 12px; font-weight: 700; color: var(--m-ink-3); margin-right: 4px; }
body.isM3 .peMega .mxGroupItem{ display: inline-flex !important; flex-direction: row !important; align-items: baseline !important; gap: 6px !important; padding: 0 !important; min-height: 0 !important; text-decoration: none; color: var(--m-ink); font-size: 13px; }
body.isM3 .peMega .mxGroupItem small{ display: inline !important; margin: 0 !important; color: var(--m-ink-3); font-size: 12px; }
.mxGroupItem:hover b, .mxGroupItem:focus-visible b{ color: var(--m-blue); text-decoration: underline; }
.ftGroup{ display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 22px; padding: 14px 0; margin-bottom: 8px; border-bottom: 1px solid rgb(255 255 255 / 12%); font-size: 14px; }
.ftGroupT{ font-weight: 700; opacity: 0.8; }
.ftGroup a{ color: inherit; text-decoration: none; } .ftGroup a span{ opacity: 0.7; } .ftGroup a:hover b, .ftGroup a:focus-visible b{ text-decoration: underline; }
.mnGroup{ margin: 14px 0 6px; padding: 12px 4px 4px; border-top: 1px solid var(--m-line); display: grid; gap: 2px; }
.mnGroup p{ margin: 0 0 4px; font-size: 12px; font-weight: 700; color: var(--m-ink-3); }
.mnGroup a{ display: block; padding: 8px 0; min-height: 40px; text-decoration: none; color: var(--m-ink); font-size: 15px; }
.mnGroup a span{ color: var(--m-ink-3); font-size: 13px; }
/* D273: questions 5+ fold under "Show all N questions" */
.faqList.hasFold:not(.showAll) > .faqItem.isFold{ display: none !important; }
.faqShowAll{ display: inline-flex; align-items: center; min-height: 44px; margin: 14px 0 0; padding: 0 18px; border: 1px solid var(--m-line); border-radius: 999px; background: #fff;
    font: 700 15px/1.2 var(--m-font, inherit); color: var(--m-blue); cursor: pointer; }
.faqShowAll:hover, .faqShowAll:focus-visible{ background: var(--m-blue-soft, #e5f0ff); }

/* ===== D278 layout pass (user via Boss, 22 Oct): one content column, balanced blocks, even cards, one rhythm ===== */
/* (1) one alignment rule: body text, lists, accordions, checklists and callouts start on the same left edge;
       only short section heads and the closing ask may centre */
body.isM3 .peHook.m3HookR .pgWrap, body.isM3 .peHook .pgWrap{ justify-content: flex-start !important; }
body.isM3 .peHookLine, body.isM3 .peLessonBox{ max-width: 760px !important; margin-left: 0 !important; margin-right: auto !important; }
body.isM3 .peHookLine .peHookBtn{ max-width: 100%; white-space: normal; text-align: left; }   /* the ask never runs past the box on phones */
/* (2) two-column checklist: one column of groups, each group's items in two even columns on wide screens (no empty side) */
@media (min-width: 900px){
    body.isM3 .peCheckGrid{ grid-template-columns: minmax(0, 1fr) !important; }
    body.isM3 .peCheckGroup ul{ columns: 2; column-gap: 40px; }
    body.isM3 .peCheckGroup li{ break-inside: avoid; }
}
/* (3) testimonial cards: equal heights in a row; quote on top, speaker row at the bottom, same photo size in every card */
body.isM3 .m3QuoteRow > figure.m3Quote, body.isM3 .peQuotes > figure.peQuoteCard, body.isM3 .m3ProofQuote{ display: flex !important; flex-direction: column; height: 100%; }
body.isM3 .m3Quote > blockquote, body.isM3 .peQuoteCard > blockquote{ flex: 1 1 auto; text-align: left; }
body.isM3 .m3Quote > figcaption, body.isM3 .peQuoteCard > figcaption{ margin-top: auto !important; padding-top: 14px; display: flex !important; align-items: center; gap: 12px; text-align: left; }
body.isM3 .m3Quote figcaption .m3Avatar, body.isM3 .peQuoteCard figcaption .m3Avatar{ width: 48px !important; height: 48px !important; flex: 0 0 48px; }
/* (4) accordions: the text column's width, icon on the right, one padding */
body.isM3 .peDeeper .peDeeperBox, body.isM3 .peDeeper .peDeeperSummary{ max-width: 760px; margin-left: 0; margin-right: auto; }
body.isM3 .peDeeperBox > summary{ display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 22px !important; }
/* (5) card grids: a last row that can't be even is centred, never left hanging (m3.py adds m3Bal) */
@media (min-width: 1200px){
    body.isM3 .pgGrid.m3Bal{ display: flex !important; flex-wrap: wrap; justify-content: center; gap: 24px !important; --pe-gap: 24px; }
    body.isM3 .pgGrid.m3Bal[data-cols="4"] > *{ flex: 0 0 calc((100% - 3 * var(--pe-gap, 24px)) / 4); }
    body.isM3 .pgGrid.m3Bal[data-cols="3"] > *{ flex: 0 0 calc((100% - 2 * var(--pe-gap, 24px)) / 3); }
    body.isM3 .pgStepList[data-n="5"]{ grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
    body.isM3 .pgStepList[data-n="6"]{ grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
    body.isM3 .pgStepList[data-n="4"], body.isM3 .pgStepList[data-n="8"]{ grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
    body.isM3 .pgStepList[data-n="3"]{ grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
/* (6) one vertical rhythm (D219): the small in-between blocks get the same breathing room as each other */
body.isM3 main > section.peHook, body.isM3 main > section.peLesson{ padding: 28px 0 !important; }
body.isM3 main > section.m3Belief{ padding: 8px 0 28px !important; }
/* D278: checklist items flow in two even columns (the list was a grid, which ignores columns) */
@media (min-width: 900px){
    body.isM3 .peCheckGroup ul{ display: block !important; columns: 2; column-gap: 40px; }
    body.isM3 .peCheckGroup li{ margin: 0 0 10px; break-inside: avoid; }
}
/* D278: service cards: 6 or 9 cards sit 3 across (no half-empty last row) */
@media (min-width: 1200px){
    body.isM3 .peSvcGrid:has(> :nth-child(6):last-child), body.isM3 .peSvcGrid:has(> :nth-child(9):last-child){ grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
    body.isM3 .peSvcGrid:has(> :nth-child(8):last-child), body.isM3 .peSvcGrid:has(> :nth-child(4):last-child){ grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
}
/* D278: the ask under a section sits with that section (no empty band above it) */
body.isM3 main > section:has(+ .m3CtaRow){ padding-bottom: 20px !important; }
body.isM3 .m3CtaRow{ padding-top: 0 !important; padding-bottom: 56px !important; }
/* D278: quote cards in a swipe row (phones) share one height too */
body.isM3 .m3QuoteRow, body.isM3 .peQuotes.peScroller{ align-items: stretch !important; }
body.isM3 .m3QuoteRow > figure, body.isM3 .peQuotes > figure{ height: auto !important; align-self: stretch !important; }
/* D281: template download block */
.peDownload{ padding: 28px 0; }
.peDlBox{ max-width: 760px; display: grid; grid-template-columns: minmax(0, 240px) minmax(0, 1fr); gap: 24px; align-items: center; padding: 20px; border: 1px solid var(--m-line); border-radius: 18px; background: #fff; }
.peDlPrev img{ display: block; width: 100%; height: auto; border-radius: 8px; border: 1px solid var(--m-line); }
.peDlLabel{ margin: 0 0 10px; font-size: 14px; font-weight: 700; color: var(--m-ink-3); }
.peDlNote{ margin: 10px 0 0; font-size: 14px; color: var(--m-ink-3); }
@media (max-width: 767px){ .peDlBox{ grid-template-columns: minmax(0, 1fr); } .peDlBtn{ width: 100%; justify-content: center; } }

/* ===== D282 preview (user via Boss): side index on wide screens, like a product page's section list =====
   The index sits in a reserved left column (room made by CSS from the first paint, so nothing shifts); it shows once the
   hero has scrolled away and hides at the closing ask. Phones keep the compact strip at the top. Without JS: the old strip. */
@media (min-width: 1200px){
    html.m3Js body.isM3.m3HasToc main > section:not(.pgHero):not(.ctaWrap) > .pgWrap,
    html.m3Js body.isM3.m3HasToc main > .m3CtaRow{ padding-left: 260px !important; }
    html.m3Js body.isM3 .m3Toc{ position: fixed !important; top: 112px; left: max(16px, calc((100vw - 1240px) / 2 + 8px)); width: 220px; z-index: 30;
        background: none !important; backdrop-filter: none !important; border: 0 !important; transform: none !important;
        opacity: 0; visibility: hidden; transition: opacity 0.2s ease, visibility 0.2s; }
    html.m3Js body.isM3 .m3Toc.isShown{ opacity: 1; visibility: visible; }
    html.m3Js body.isM3 .m3TocInner{ display: block !important; max-width: none; margin: 0; padding: 14px 0 14px 14px; overflow: visible;
        max-height: calc(100vh - 140px); overflow-y: auto; border-left: 2px solid var(--m-line); }
    html.m3Js body.isM3 .m3TocLabel{ display: block !important; margin: 0 0 8px; font-size: 12px; font-weight: 700; color: var(--m-ink-3); }
    html.m3Js body.isM3 .m3Toc a{ display: block; margin: 0 0 2px -16px; padding: 7px 10px 7px 14px; border: 0 !important; border-left: 2px solid transparent !important;
        border-radius: 0 8px 8px 0; background: none !important; font-size: 14px; font-weight: 600; line-height: 1.35; white-space: normal; color: var(--m-ink-2); }
    html.m3Js body.isM3 .m3Toc a:hover{ color: var(--m-blue); }
    html.m3Js body.isM3 .m3Toc a.isOn{ border-left-color: var(--m-blue) !important; background: var(--m-blue-soft, #e5f0ff) !important; color: var(--m-blue) !important; }
}
@media (min-width: 1200px){
    html.m3Js body.isM3 .m3Toc .m3TocInner{ border-radius: 0 !important; background: none !important; box-shadow: none !important; border-top: 0 !important; border-right: 0 !important; border-bottom: 0 !important; }
    html.m3Js body.isM3 .m3Toc .m3TocInner::before, html.m3Js body.isM3 .m3Toc .m3TocInner::after{ display: none !important; }
}
@media (min-width: 1200px){
    html.m3Js body.isM3 .m3Toc .m3TocInner{ -webkit-mask-image: none !important; mask-image: none !important; padding: 14px 0 14px 14px !important; margin: 0 !important; max-width: none !important; gap: 0 !important; border-left: 2px solid var(--m-line) !important; }
}
.m3TocL{ display: none; }
@media (min-width: 1200px){ html.m3Js body.isM3 .m3Toc .m3TocS{ display: none; } html.m3Js body.isM3 .m3Toc .m3TocL{ display: inline; } }
/* D282 (phones and tablets): the contents box after the opening section, and the "Sections" button + bottom sheet */
.m3TocBox{ max-width: 1160px; margin: 0 auto; padding: 8px 16px 24px; }
.m3TocBox ol{ list-style: none; margin: 0; padding: 14px 16px; border: 1px solid var(--m-line); border-radius: 16px; background: #fff; columns: 1; }
.m3TocBoxT{ margin: 0 0 8px; font-size: 13px; font-weight: 700; color: var(--m-ink-3); }
.m3TocBox li{ break-inside: avoid; }
.m3TocBox a{ display: flex; align-items: baseline; gap: 6px; min-height: 40px; padding: 9px 0; border-bottom: 1px solid var(--m-line); color: var(--m-ink); font-weight: 600; font-size: 15px; text-decoration: none; }
.m3TocBox li:last-child a{ border-bottom: 0; }
.m3TocBox a span{ color: var(--m-ink-3); font-weight: 500; }
@media (min-width: 600px) and (max-width: 1199px){ .m3TocBox ol{ columns: 2; column-gap: 28px; } }
@media (min-width: 1200px){ .m3TocBox{ display: none; } }
@media (max-width: 1199px){ html.m3Js body.isM3 .m3Toc{ display: none !important; } }   /* the box and the button replace the sideways strip */
.m3SecBtn{ position: fixed; z-index: 94; left: 12px; bottom: calc(78px + env(safe-area-inset-bottom)); display: inline-flex; align-items: center; gap: 8px;
    min-height: 44px; padding: 0 16px; border: 1px solid var(--m-line); border-radius: 999px; background: #fff; color: var(--m-ink); font: 700 14px/1 var(--m-font, inherit);
    box-shadow: 0 6px 18px rgb(16 24 40 / 14%); opacity: 0; visibility: hidden; transition: opacity 0.2s, visibility 0.2s; }
.m3SecBtn.isShown{ opacity: 1; visibility: visible; }
@media (min-width: 768px){ .m3SecBtn{ bottom: 24px; } }
@media (min-width: 1200px){ .m3SecBtn, .m3SecSheet{ display: none !important; } }
.m3SecSheet{ position: fixed; inset: 0; z-index: 120; }
.m3SecSheet[hidden]{ display: none; }
.m3SecBack{ position: absolute; inset: 0; background: rgb(16 24 40 / 45%); }
.m3SecPanel{ position: absolute; left: 0; right: 0; bottom: 0; max-height: 78vh; overflow-y: auto; background: #fff; border-radius: 20px 20px 0 0; padding: 16px 16px calc(16px + env(safe-area-inset-bottom)); }
.m3SecHead{ display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.m3SecHead p{ margin: 0; font-weight: 800; font-size: 17px; color: var(--m-ink); }
.m3SecClose{ width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--m-surface); font-size: 22px; cursor: pointer; }
.m3SecPanel ol{ list-style: none; margin: 0; padding: 0; }
.m3SecPanel a{ display: flex; align-items: baseline; gap: 6px; min-height: 44px; padding: 11px 12px; border-radius: 10px; color: var(--m-ink); font-weight: 600; text-decoration: none; }
.m3SecPanel a span{ color: var(--m-ink-3); font-weight: 500; }
.m3SecPanel a.isOn{ background: var(--m-blue-soft, #e5f0ff); color: var(--m-blue); }
/* D282: the site header stays visible and usable while the Sections sheet is open (the sheet starts under it) */
.m3SecSheet{ top: var(--m3-top, 72px) !important; }
.m3SecPanel{ max-height: calc(100% - 24px); }
.m3SecMore{ display: grid; gap: 4px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--m-line); }
.m3SecMore a, .m3SecMenu{ display: flex; align-items: center; gap: 6px; min-height: 44px; padding: 11px 12px; border: 0; border-radius: 10px; background: none;
    color: var(--m-blue); font: 700 15px/1.2 var(--m-font, inherit); text-align: left; text-decoration: none; cursor: pointer; }
.m3SecMore a:hover, .m3SecMenu:hover{ background: var(--m-surface); }
/* D184: AI cards = problem, what we set up, who stays in charge (no "AI fix" label, no news source) */
.m3AiCard .m3XLead:has(~ .m3XWho), .m3AiCard .m3XLead:has(+ .m3XFix + .m3XWho){ font-weight: 700; }
.m3XWho{ margin: 0; font-size: 15px; line-height: 1.5; color: var(--m-ink-2); }
.m3XWho b{ display: block; font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--tint-ink); margin-bottom: 2px; }
body.isM3 .m3XWho b{ font-size: max(13px, 1em) !important; }
/* Industry flow v2 (03b spec, preview): pillar groups, tab counts, folds, new block headings */
.m3Pillars{ display: grid; gap: 28px; margin-top: 18px; }
.m3PillarT{ margin: 0 0 12px; font: 700 17px/1.3 var(--m-font); color: var(--m-ink); }
.m3PillarMore, .m3FvRead{ margin-top: 12px; }
.m3PillarMore > summary, .m3FvRead > summary{ display: inline-flex; align-items: center; gap: 8px; cursor: pointer; list-style: none; min-height: 44px;
    padding: 10px 16px; border-radius: 999px; border: 1px solid var(--m-line); background: #fff; font: 600 15px/1.2 var(--m-font); color: var(--tint-ink); }
.m3PillarMore > summary::-webkit-details-marker, .m3FvRead > summary::-webkit-details-marker{ display: none; }
.m3PillarMore > summary::after, .m3FvRead > summary::after{ content: "+"; font-size: 18px; }
.m3PillarMore[open] > summary::after, .m3FvRead[open] > summary::after{ content: "\2212"; }
.m3PillarMore > .peSvcGrid{ margin-top: 14px; }
.m3TabN{ display: inline-block; min-width: 22px; margin-left: 4px; padding: 1px 7px; border-radius: 999px; background: var(--m-surface, #eef2f8); font-size: 12px; text-align: center; }
.m3Tab.isOn .m3TabN{ background: var(--tint-bg, #eef2f8); }
.m3FvSubT{ margin: 28px 0 12px; font: 700 20px/1.3 var(--m-font); color: var(--m-ink); }
.m3FvSubT:first-child{ margin-top: 4px; }
.m3FvLead{ margin-bottom: 26px; }
.m3FvLead + .pgHead{ margin-top: 0; }
.m3FvShare .m3XCta{ margin-top: 6px; }
.m3ChipLed{ font-weight: 700; }
/* group strip: a brand whose site is down shows as plain text (same look, no link) */
.ftGroupNo > span{ opacity: 0.7; }
.mnGroup > span{ display: block; padding: 8px 0; min-height: 40px; color: var(--m-ink); font-size: 15px; } .mnGroup > span span{ color: var(--m-ink-3); font-size: 13px; }

/* "In short" answer-first block under the hero buttons (Boss yes 24 Oct via 01) */
.peInShort{ margin: 18px 0 0; max-width: 62ch; padding: 14px 18px; border-radius: var(--m-r-sm, 12px); background: var(--tint, #e5f0ff); }
.peInShort p{ margin: 0; font-size: 16px; line-height: 1.6; color: var(--m-ink, #1b2333); }
.peInShortLabel{ display: block; margin-bottom: 4px; font-size: 13px; font-weight: 800; letter-spacing: .02em; color: var(--tint-ink, #0b4a9e); }

/* D305 "Common challenges we solve": typical examples, first one open (FAQ pattern) */
.peChList{ display: grid; gap: 12px; max-width: 860px; }
.peCh{ background: #fff; border: 1px solid var(--m-line, #e3e8f0); border-radius: var(--m-r, 18px); overflow: hidden; }
.peCh > summary{ display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 18px 20px; cursor: pointer; list-style: none; }
.peCh > summary::-webkit-details-marker{ display: none; }
.peCh > summary h3{ margin: 0; font-size: 17px; line-height: 1.4; font-weight: 700; color: var(--m-ink, #1b2333); }
.peCh > summary b{ flex: 0 0 auto; width: 12px; height: 12px; border-right: 2px solid var(--m-blue, #0b5fd9); border-bottom: 2px solid var(--m-blue, #0b5fd9); transform: rotate(45deg); transition: transform .2s; }
.peCh[open] > summary b{ transform: rotate(-135deg); }
.peCh > summary:focus-visible{ outline: 3px solid var(--m-blue, #0b5fd9); outline-offset: -3px; }
.peChBody{ padding: 0 20px 18px; font-size: 16px; line-height: 1.6; color: var(--m-ink-2, #46506a); }
.peChBody h4{ margin: 16px 0 6px; font-size: 14px; font-weight: 800; color: var(--m-ink, #1b2333); }
.peChBody p, .peChBody ul, .peChBody ol{ margin: 0; }
.peChBody ul, .peChBody ol{ padding-left: 20px; }
.peChBody ul{ list-style: disc !important; } .peChBody ol{ list-style: decimal !important; } .peChBody li{ display: list-item !important; }
.peChBody li + li{ margin-top: 4px; }
.peChLabel{ padding: 10px 12px; border-radius: var(--m-r-sm, 12px); background: var(--m-surface, #f5f7fb); font-size: 14px; color: var(--m-ink-3, #6b7489); }
.peChLink{ margin: 18px 0 0; max-width: 860px; }
.peChAsk{ margin: 16px 0 0; }
.peChGo{ display: inline-block; margin-top: 8px; font-size: 14px; font-weight: 700; color: var(--m-blue, #0b5fd9); }
@media (prefers-reduced-motion: reduce){ .peCh > summary b{ transition: none; } }
/* quote author (Boss 23 Oct, the user's grey-text and alignment notes): photo and name side by side, top aligned; the title
   small, dark and at most 2 lines (full text stays in the HTML) */
body.isM3 .m3Quote figcaption, body.isM3 .peQuoteCard figcaption.m3HasFace{ align-items: flex-start !important; }
body.isM3 .m3Quote figcaption small, body.isM3 .peQuoteCard .m3QuoteWho span{ font-size: 13px !important; line-height: 1.35 !important; color: var(--m-ink-2) !important;
    display: -webkit-box !important; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
body.isM3 .m3Quote figcaption b{ line-height: 1.3; }
/* page-flow v3 previews (flow3.py): asks, quotes with "Read full quote", start-and-cost, learn more, joined blocks */
.m3AskBtns{ display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 14px; }
.m3AskBtns .pgBtn{ min-height: 44px; }
.m3AskTel{ display: none !important; }
@media (min-width: 1024px){ .m3AskTel{ display: inline-flex !important; } }
.ctaWrap.m3Slim .m3AskBtns .pgBtn.ghost{ background: #fff; }
.m3SendOne{ margin-top: 18px; max-width: 70ch; color: var(--m-ink-2); }
.m3SendOne .pgBtn{ margin-top: 8px; }
.m3ShareRow{ margin-top: 14px; }
.m3QStack{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 18px; }
@media (max-width: 767px){ .m3QStack{ grid-template-columns: 1fr; } }
.m3QScroll{ margin-top: 16px; }
.m3Quote blockquote{ margin: 0; }
.m3QMore{ align-self: flex-start; border: 0; background: none; padding: 6px 0; min-height: 44px; font: 700 14px/1.2 var(--m-font); color: var(--m-blue); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.m3ProofLogos{ margin: 6px 0 4px; }
.m3TradeChips{ display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 18px; }
.m3TradeChips span{ font-weight: 700; color: var(--m-ink); margin-right: 4px; }
.m3TradeChips a{ display: inline-flex; align-items: center; min-height: 40px; padding: 8px 14px; border: 1px solid var(--m-line); border-radius: 999px; background: #fff; color: var(--m-ink); text-decoration: none; font-size: 14px; }
.m3TradeChips a:hover{ border-color: var(--m-blue); color: var(--m-blue); }
.m3LedBy{ display: flex; gap: 14px; align-items: flex-start; margin-top: 18px; max-width: 640px; }
.m3LedBy img{ width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex: 0 0 56px; }
.m3LedBy p{ margin: 0; color: var(--m-ink-2); }
.m3LedBy b{ color: var(--m-ink); }
.m3Steps{ list-style: none; counter-reset: st; padding: 0; margin: 18px 0 0; display: grid; gap: 12px; max-width: 760px; }
.m3Step{ counter-increment: st; position: relative; padding: 14px 16px 14px 54px; border: 1px solid var(--m-line); border-radius: var(--m-r); background: #fff; color: var(--m-ink-2); }
.m3Step::before{ content: counter(st); position: absolute; left: 16px; top: 13px; width: 26px; height: 26px; border-radius: 50%; background: var(--tint-bg, #eef2f8); color: var(--tint-ink, #1452a4); font-weight: 700; display: grid; place-items: center; font-size: 14px; }
.m3Step b{ color: var(--m-ink); }
.m3SubT{ margin: 26px 0 8px; font: 700 20px/1.3 var(--m-font); color: var(--m-ink); }
.m3CostList{ margin: 8px 0 0; padding-left: 20px; max-width: 760px; color: var(--m-ink-2); }
.m3CostList li{ margin: 6px 0; }
.m3CostEnd{ margin-top: 14px; max-width: 760px; }
.m3LmBox{ margin-top: 12px; border: 1px solid var(--m-line); border-radius: var(--m-r); background: #fff; }
.m3LmBox > summary{ cursor: pointer; list-style: none; padding: 16px 18px; min-height: 44px; font: 700 17px/1.3 var(--m-font); color: var(--m-ink); display: flex; justify-content: space-between; }
.m3LmBox > summary::-webkit-details-marker{ display: none; }
.m3LmBox > summary::after{ content: "+"; color: var(--m-blue); }
.m3LmBox[open] > summary::after{ content: "\2212"; }
.m3LmIn{ padding: 0 18px 18px; }
.m3LmIn > .pgWrap{ padding: 0 !important; max-width: none; }
section.m3Joined{ padding-top: 0 !important; border-top: 0 !important; }
section.m3Joined::before{ display: none !important; }
.m3FaqSec .faqSide{ max-width: 860px; }
.m3MidAsk form{ max-width: 520px; margin-top: 16px; }
.m3DigLine{ margin-top: 10px; }
.m3FaqSec .faqA{ height: 0; overflow: hidden; }
.m3FaqSec .faqA p{ margin: 0; padding: 0 18px 16px; max-width: 72ch; }
.m3MidAsk .m3CtaForm, .m3MidAsk form{ margin: 18px 0 0 !important; max-width: 520px !important; width: 100%; grid-column: auto !important; }
.ctaWrap.m3Slim .ctaInner{ grid-template-columns: 1fr !important; }
.ctaWrap.m3Slim .ctaSide{ max-width: none !important; }
.ctaWrap.m3Slim .m3Promise{ color: #fff; margin-top: 12px; }
.m3CostList{ list-style: disc !important; }
.m3CostList li{ display: list-item !important; }
.m3StartCost a, .m3CostEnd a{ color: var(--m-blue); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
figure.m3WorkTile{ max-width: 560px; margin: 18px 0 0; }
figure.m3WorkTile img{ border-radius: var(--m-r); }
body.isM3 .m3MidAsk form.m3CtaForm.pgForm{ display: grid !important; grid-template-columns: 1fr !important; gap: 10px !important; margin: 18px 0 0 !important;
    max-width: 520px !important; padding: 18px; border-radius: var(--m-r-lg); background: #fff; border: 1px solid var(--m-line); float: none !important; position: static !important; justify-self: start !important; }
body.isM3 .m3MidAsk .m3CtaForm .m3QuickTitle{ margin: 0; font: 700 16px/1.35 var(--m-font); color: var(--m-ink); }
.m3DigWrap{ padding-top: 10px !important; }
.m3DigWrap .m3DigLine{ margin: 0; }
.m3NoScroll.m3Two{ grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
@media (min-width: 768px){ .m3NoScroll.m3Two{ grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } }
.m3H2Line{ font-weight: 700; color: var(--m-ink); margin: 0 0 8px; }
.m3Define{ padding: 12px 14px; border-left: 3px solid var(--tint-ink, #1452a4); background: var(--tint-bg, #eef2f8); border-radius: 0 var(--m-r) var(--m-r) 0; color: var(--m-ink); }
.m3Kinds{ margin-top: 22px; }
.m3KindGrid{ margin-top: 12px; }
.m3TextBtn{ border: 0; background: none; padding: 8px 0; min-height: 44px; font: 600 15px/1.3 var(--m-font); color: var(--m-blue); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; text-align: left; }
.m3Invite, .m3NotIncl, .m3LeadIn{ margin-top: 16px; max-width: 72ch; color: var(--m-ink-2); }
.m3Nearest{ margin: 14px 0 0; padding: 12px 14px; border: 1px dashed var(--m-line); border-radius: var(--m-r); max-width: 760px; color: var(--m-ink-2); }
.m3Placeholder{ margin: 16px 0 0; max-width: 560px; }
.m3Placeholder > div{ height: 180px; border-radius: var(--m-r); background: repeating-linear-gradient(45deg, #eceff4, #eceff4 10px, #e3e7ee 10px, #e3e7ee 20px); }
.m3Placeholder figcaption{ margin-top: 6px; font-size: 13px; color: var(--m-ink-2); }
.m3CtaLine{ color: #fff; opacity: .92; margin: 6px 0 0; font-size: 17px; }
.ctaWrap.m3Slim.m3HasForm .m3CtaForm{ display: grid !important; max-width: 520px; margin-top: 18px; }
.m3LmT{ margin: 26px 0 10px; font: 700 19px/1.3 var(--m-font); color: var(--m-ink); border-top: 1px solid var(--m-line); padding-top: 18px; }
.m3LmT:first-child{ margin-top: 6px; border-top: 0; padding-top: 0; }
/* flow v3 (03 review): on phones only the "Sections" button, not the open list as well; chips wrap */
@media (max-width: 1099px){ body.m3FlowV3 .m3TocBox{ display: none !important; } }
body.m3FlowV3 .pgHero .m3Chip{ white-space: normal; }
.m3StepStack{ display: grid !important; grid-template-columns: 1fr !important; gap: 8px !important; counter-reset: fs; }
.m3StepStack > .pgCard{ padding: 12px 14px 12px 50px !important; position: relative; min-height: 0 !important; counter-increment: fs; }
.m3StepStack > .pgCard::before{ content: counter(fs); position: absolute; left: 14px; top: 12px; width: 24px; height: 24px; border-radius: 50%; background: var(--tint-bg, #eef2f8); color: var(--tint-ink, #1452a4); font-weight: 700; display: grid; place-items: center; font-size: 13px; }
.m3StepStack .pgCardTop{ display: none !important; }
.m3RuleList > .pgCard{ min-height: 0 !important; padding: 12px 14px !important; }
.m3RuleList .pgCardTop{ display: none !important; }
.m3TypeGrid{ display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; }
.m3TypeGrid > :last-child:nth-child(odd){ grid-column: 1 / -1; }
@media (min-width: 1100px){ .m3TypeGrid{ grid-template-columns: repeat(5, minmax(0, 1fr)) !important; } .m3TypeGrid > :last-child:nth-child(odd){ grid-column: auto; } }
.m3TypePic{ margin: 0 0 10px !important; }
.m3TypePic > div{ height: auto !important; aspect-ratio: 4 / 3; }
.m3TypePic figcaption{ font-size: 12px !important; }
.m3PicRow{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 767px){ .m3PicRow{ grid-template-columns: 1fr; } }
.m3PicRow .m3Placeholder{ margin: 0; max-width: none; }
.m3PicRow .m3Placeholder > div{ height: auto; aspect-ratio: 4 / 3; }
.m3Answer{ margin-top: 12px; }
.m3Chooser{ margin: 10px 0 14px; max-width: 760px; }
tr.m3MoreHidden[hidden]{ display: none !important; }
body.isM3 .pgCards .pgGrid.m3TypeGrid{ grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
body.isM3 .pgCards .pgGrid.m3TypeGrid > .pgCard{ display: block !important; }
@media (min-width: 1100px){ body.isM3 .pgCards .pgGrid.m3TypeGrid{ grid-template-columns: repeat(5, minmax(0, 1fr)) !important; } }
@media (max-width: 767px){ .m3PicRow .m3Placeholder > div{ aspect-ratio: 16 / 7; } .m3TypePic > div{ aspect-ratio: 16 / 10; } }
/* flow v3 cuts (03): compact problem list, two-column cost list, compact photo strip, comparison cards */
.m3Compact .pgGrid{ grid-template-columns: 1fr !important; gap: 8px !important; }
.m3Compact .pgCard{ padding: 12px 16px !important; min-height: 0 !important; }
.m3Compact .pgCard h3, .m3Compact .pgCard .peProblemQ{ margin: 0 0 2px !important; font-size: 16px !important; }
.m3Compact .pgCard p{ margin: 0 !important; font-size: 15px !important; }
.m3Compact .pgCardTop{ display: none !important; }
@media (min-width: 768px){ .m3CostList.m3Cols2{ columns: 2; column-gap: 28px; max-width: none; } .m3CostList.m3Cols2 li{ break-inside: avoid; } }
.m3PicRow.m3Strip{ grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 8px; max-width: 560px; }
.m3PicRow.m3Strip .m3Placeholder > div{ aspect-ratio: 4 / 3 !important; height: auto !important; }
.m3PicRow.m3Strip .m3Placeholder figcaption{ font-size: 11px; line-height: 1.3; }
.m3PicRow.m3Two{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 767px){ .m3PicRow.m3Two{ grid-template-columns: 1fr; } }
body.isM3 .pgGrid.m3CmpGrid{ grid-template-columns: 1fr !important; gap: 10px !important; max-width: 820px; }
.m3CmpCard{ padding: 14px 16px !important; min-height: 0 !important; }
.m3CmpCard h3{ margin: 0 0 6px !important; font-size: 17px !important; }
.m3CmpCard p{ margin: 4px 0 0 !important; font-size: 15px; color: var(--m-ink-2); }
.m3CmpCard p b{ color: var(--m-ink); }
.m3SmallLabel{ font-size: 13px; font-weight: 700; color: var(--m-ink-2); margin: -4px 0 8px; }
.m3Who{ margin: 6px 0 12px; max-width: 820px; }
/* flow v3 (03: 16 screens or fewer on phones): tighter section spacing on phones */
@media (max-width: 767px){ body.m3FlowV3 main > section:not(.pgHero):not(#m3x){ padding-top: 28px !important; padding-bottom: 28px !important; }
    body.m3FlowV3 main > section.m3Joined:not(#m3x){ padding-top: 0 !important; } body.m3FlowV3 .m3Placeholder > div{ height: 120px; } }
/* flow v3 cuts round 2 (03): compact steps, small proof thumbnail, compact comparison card */
.m3StepsCompact{ gap: 6px !important; }
.m3StepsCompact > .pgStep{ padding: 10px 14px !important; min-height: 0 !important; }
.m3StepsCompact .pgStepNum{ font-size: 13px !important; margin: 0 0 2px !important; }
.m3StepTap > summary{ cursor: pointer; list-style: none; font: 700 16px/1.35 var(--m-font); color: var(--m-ink); padding-right: 22px; position: relative; min-height: 28px; }
.m3StepTap > summary::-webkit-details-marker{ display: none; }
.m3StepTap > summary::after{ content: "+"; position: absolute; right: 0; top: 0; color: var(--m-blue); }
.m3StepTap[open] > summary::after{ content: "\2212"; }
.m3StepTap > p{ margin: 6px 0 0 !important; font-size: 15px; color: var(--m-ink-2); }
.m3ProofV3 .m3Placeholder{ display: flex; align-items: center; gap: 12px; max-width: 520px; }
.m3ProofV3 .m3Placeholder > div{ flex: 0 0 96px; width: 96px; height: 64px !important; aspect-ratio: auto !important; }
.m3ProofV3 .m3Placeholder figcaption{ margin: 0; }
.m3CmpBox{ border: 1px solid var(--m-line); border-radius: var(--m-r); background: #fff; max-width: 820px; margin-top: 10px; }
.m3CmpRow{ display: grid; grid-template-columns: 1fr 1fr; gap: 4px 14px; padding: 10px 14px; border-top: 1px solid var(--m-line); font-size: 14px; color: var(--m-ink-2); }
.m3CmpRow:first-child{ border-top: 0; }
.m3CmpL{ grid-column: 1 / -1; color: var(--m-ink); font-size: 15px; }
.m3CmpRow i{ display: block; font-style: normal; font-size: 12px; font-weight: 700; color: var(--tint-ink, #1452a4); }
@media (min-width: 900px){ .m3CmpRow{ grid-template-columns: 180px 1fr 1fr; } .m3CmpL{ grid-column: auto; } }
.m3NoHead > .pgWrap > .m3LeadBig{ margin-top: 0; font: 600 19px/1.4 var(--m-font); color: var(--m-ink); max-width: 760px; }
.m3Office{ margin-top: 16px; padding: 12px 14px; border-radius: var(--m-r); background: var(--m-surface, #f4f6fa); color: var(--m-ink-2); }
.m3LedBy .m3Avatar{ flex: 0 0 48px; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--tint-bg, #eef2f8); color: var(--tint-ink, #1452a4); font-weight: 700; }
.m3Sample{ margin: 16px 0 0; max-width: 760px; }
.m3SampleRow{ display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.m3SampleRow img{ width: 100%; height: auto; border-radius: var(--m-r); border: 1px solid var(--m-line); }
.m3Sample figcaption{ margin-top: 6px; font-size: 13px; color: var(--m-ink-2); }
.m3Sample2{ display: flex; align-items: center; gap: 12px; max-width: 520px; }
.m3Sample2 > div{ flex: 0 0 96px; width: 96px; height: 64px !important; }
body.isM3 .pgCards .pgGrid.m3OneCol{ grid-template-columns: 1fr !important; max-width: 820px; }
@media (min-width: 1100px){ body.isM3 .pgCards .pgGrid.m3TypeGrid.m3Six{ grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } }
.m3TypeGrid.m3Six > .pgCard{ padding: 14px !important; min-height: 0 !important; }
.m3TypeGrid.m3Six .pgCardTop{ display: none !important; }
.m3TypeGrid.m3Six .pgCard h3{ font-size: 15px !important; margin: 0 0 4px !important; }
.m3TypeGrid.m3Six .pgCard p{ font-size: 14px !important; margin: 0 !important; }
.m3StartHere{ border-color: var(--m-blue) !important; }
.m3StartTag{ display: inline-block; margin-bottom: 6px; padding: 2px 10px; border-radius: 999px; background: var(--m-blue); color: #fff; font: 700 12px/1.6 var(--m-font); }
.m3StartLine{ font-size: 14px !important; color: var(--m-ink-2) !important; }
.m3RuleSteps{ list-style: none; counter-reset: ru; padding: 0; margin: 14px 0 0; display: grid; gap: 10px; max-width: 820px; }
.m3RuleSteps > li{ counter-increment: ru; position: relative; padding: 14px 16px 14px 52px; border: 1px solid var(--m-line); border-radius: var(--m-r); background: #fff; }
.m3RuleSteps > li::before{ content: counter(ru); position: absolute; left: 16px; top: 14px; width: 24px; height: 24px; border-radius: 50%; background: var(--tint-bg, #eef2f8); color: var(--tint-ink, #1452a4); font-weight: 700; display: grid; place-items: center; font-size: 13px; }
.m3RuleSteps h3{ margin: 0 0 4px; font: 700 16px/1.35 var(--m-font); color: var(--m-ink); }
.m3RuleSteps p{ margin: 4px 0 0; font-size: 15px; color: var(--m-ink-2); }
.m3RuleSteps .peDeeperSrc, .m3Rules .peDeeperSrc{ font-size: 12.5px !important; color: var(--m-ink-3) !important; overflow-wrap: anywhere; }
/* Shared proof block (Boss redesign 23 Oct): equal cards, logo or monogram on top, quote to about 4 lines + "Read full quote", author row
   pinned to the bottom; one track: 3 in view on wide screens with a counter, 1 + a peek on phones with dots */
.m3QTrack{ display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding: 4px 2px 8px; margin-top: 18px;
    scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.m3QTrack::-webkit-scrollbar{ display: none; }
.m3QTrack > .m3QCard{ flex: 0 0 calc((100% - 32px) / 3); scroll-snap-align: start; }
@media (max-width: 767px){ .m3QTrack > .m3QCard{ flex-basis: 85%; } }
body.isM3 .m3QCard{ display: flex !important; flex-direction: column; gap: 0 !important; margin: 0; padding: 20px !important; background: #fff; border: 1px solid var(--m-line);
    border-radius: var(--m-r-lg); box-shadow: var(--m-shadow); height: auto !important; min-height: 0 !important; }
.m3QTop{ height: 40px; display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.m3QTop img{ max-height: 36px; max-width: 120px; width: auto; height: auto; object-fit: contain; }
.m3QMono{ flex: 0 0 36px; width: 36px; height: 36px; border-radius: 8px; display: grid; place-items: center; background: var(--tint-bg, #eef2f8);
    color: var(--tint-ink, #1452a4); font: 800 13px/1 var(--m-font); letter-spacing: .02em; }
.m3QCo{ font: 700 13px/1.25 var(--m-font); color: var(--m-ink-2); }
body.isM3 .m3QCard blockquote{ margin: 0 !important; font-size: 16px !important; line-height: 1.55 !important; color: var(--m-ink) !important; }
body.isM3 .m3QCard blockquote{ display: block !important; width: 100%; min-width: 0; white-space: normal !important; overflow-wrap: anywhere; position: relative; }
body.isM3 .m3QCard blockquote.isClamp{ max-height: calc(1.55em * 7); overflow: hidden; }
body.isM3 .m3QCard blockquote.isClamp::after{ content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.55em; background: linear-gradient(rgba(255,255,255,0), #fff); }
body.isM3 .m3QCard.isOpen blockquote{ height: auto; overflow: visible; }
body.isM3 .m3QCard.isOpen blockquote::after{ display: none; }
.m3QTrack > .m3QCard{ min-width: 0; }
.m3QCard .m3QMore{ display: block; align-self: flex-start; min-height: 40px; margin: 6px 0 0; padding: 8px 0; border: 0; background: none; cursor: pointer;
    font: 700 14px/1.2 var(--m-font); color: var(--m-blue); text-decoration: underline; text-underline-offset: 3px; }
.m3QCard .m3QMore.isSpacer{ visibility: hidden; }
body.isM3 .m3QCard figcaption{ margin-top: auto !important; padding-top: 14px; border-top: 1px solid var(--m-line); display: flex !important; align-items: flex-start !important; gap: 12px; }
.m3QCard figcaption .m3Avatar{ width: 48px !important; height: 48px !important; flex: 0 0 48px; border-radius: 50%; object-fit: cover; }
.m3QCard figcaption > span{ display: grid; gap: 2px; min-width: 0; }
.m3QCard figcaption b{ color: var(--m-ink); font-size: 15px; line-height: 1.3; }
body.isM3 .m3QCard figcaption small{ font-size: 14px !important; line-height: 1.35 !important; color: var(--m-ink-2) !important; display: -webkit-box !important;
    -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.m3QCard .m3SectorChip{ justify-self: start; margin-top: 4px; }
.m3QNav{ display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; }
.m3QCount{ font: 700 14px/1 var(--m-font); color: var(--m-ink-2); }
.m3QDots{ display: none; gap: 6px; }
.m3QDots button{ width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; background: var(--m-line); cursor: pointer; }
.m3QDots button.isOn{ background: var(--m-blue); width: 20px; border-radius: 999px; }
.m3QArrows{ display: flex; gap: 8px; }
.m3QArrows button{ width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--m-line); background: #fff; cursor: pointer; font-size: 20px; line-height: 1; color: var(--m-ink); }
.m3QArrows button:disabled{ opacity: .35; cursor: default; }
@media (max-width: 767px){ .m3QDots{ display: flex; } .m3QCount{ display: none; } }
/* SANY and other work tiles: a tile, not a full screen (Boss 23 Oct) */
figure.m3WorkTile img{ max-height: 420px; width: auto; max-width: 100%; }
@media (max-width: 767px){ figure.m3WorkTile img{ max-height: 60vh; } }
body.isM3 .m3QTrack > .m3QCard{ flex: 0 0 calc((100% - 32px) / 3) !important; width: auto !important; max-width: none !important; }
@media (max-width: 767px){ body.isM3 .m3QTrack > .m3QCard{ flex: 0 0 85% !important; } }
body.isM3 .peSvcGrid.m3TypeGrid{ display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; }
@media (min-width: 1100px){ body.isM3 .peSvcGrid.m3TypeGrid.m3Six{ grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } }
.peSvcGrid.m3TypeGrid > .peSvcCard{ padding: 14px !important; min-height: 0 !important; }
.peSvcGrid.m3TypeGrid > :last-child:nth-child(odd){ grid-column: 1 / -1; }
.faqA .peDeeperSrc{ font-size: 12.5px; color: var(--m-ink-3); margin-top: -6px; }

/* the user (23 Oct): full quotes; the gap under the block back to normal (Boss) */
body.isM3 main > section.m3IndProof:not(#m3x), body.isM3 main > section.m3ProofV3:not(#m3x){ padding-bottom: 24px !important; }
body.isM3 main > section.m3IndProof + .m3CtaRow, body.isM3 main > section.m3ProofV3 + .m3CtaRow{ margin-top: 0 !important; padding-top: 0 !important; }
/* Guide (flow v3 preview, build-sheets/guide.md): step counter and "Do this:" line, card headings as h3, "you may not need us",
   the belief as one quiet line, and the open "Keep reading" between the two closed boxes of Learn more */
body.m3FlowV3 .m3DocCard > h3{ font: 800 clamp(20px, 2vw, 26px)/1.25 var(--m-font); color: var(--m-ink); margin: 0 0 8px; }
.m3StepTag{ margin: 0 0 4px !important; font: 700 13px/1.2 var(--m-font); color: var(--m-blue); }
.m3DoThis{ margin: 0 0 12px !important; padding: 12px 14px; border-radius: var(--m-r); background: var(--tint-bg, #eef2f8); color: var(--m-ink); }
.m3NotNeed{ margin: 0 0 16px; padding: 14px 16px; max-width: 72ch; border-left: 4px solid var(--t-mint); border-radius: var(--m-r); background: #fff; color: var(--m-ink); }
.m3GuideHow .m3SubT{ margin-top: 22px; }
.m3GuideHow .peDoc, .m3GuideHelp .m3TeamCard{ margin-top: 20px; }
@media (min-width: 900px){ .peDoc.m3Two{ display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .peDoc.m3Two > .m3DocCard{ margin: 0; } }
body.m3FlowV3 .m3Belief .pgWrap{ padding-top: 0; padding-bottom: 0; }
.m3BeliefLine{ margin: 0; font-size: 17px; line-height: 1.5; color: var(--m-ink-2); }
.m3BeliefLine b{ color: var(--m-ink); }
.m3KeepReading{ margin: 24px 0 8px; }
.m3KeepReading .pgRowCols{ margin-top: 10px; }
.m3LmPart{ scroll-margin-top: 90px; }
.m3KeepReading + .peDeeperSummary{ margin-top: 20px; }
/* Field note (flow v3 preview): the template card, the template ask with its "Free" line, the source box under the byline */
.m3TplCard{ margin-top: 18px; padding: 20px; border: 1px solid var(--m-line); border-top: 4px solid var(--t-mint); border-radius: var(--m-r-lg); background: #fff; box-shadow: var(--m-shadow); max-width: 640px; }
.m3TplCard h3{ margin: 8px 0 6px; font: 800 20px/1.3 var(--m-font); color: var(--m-ink); }
.m3TplCard p{ margin: 0 0 4px; }
.m3TplAsk{ display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 14px 0 0 !important; }
.m3TplFree{ font: 600 14px/1.3 var(--m-font); color: var(--m-ink-2); }
.m3TplPair{ display: inline-flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.m3SourceBox{ margin-top: 14px; padding: 12px 14px; max-width: 640px; border-left: 3px solid var(--m-line); font-size: 14px; line-height: 1.5; color: var(--m-ink-2); }
.m3SourceBox p{ margin: 0 0 6px; }
.m3SourceBox p:last-child{ margin-bottom: 0; }
/* Glossary term (flow v3 preview): the definition heading, the "Try it" card, term chips, the agency questions, the folded proof */
.peBox.isDefine .m3DefineH{ margin: 0 0 10px; }
.m3TplCard .m3TplH{ margin: 8px 0 6px; font: 800 clamp(20px, 2.2vw, 26px)/1.25 var(--m-font); color: var(--m-ink); }
.m3TermChips{ display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 14px; }
.m3TermChips a{ display: inline-flex; align-items: center; min-height: 40px; padding: 8px 14px; border: 1px solid var(--m-line); border-radius: 999px;
    background: #fff; font: 700 14px/1.2 var(--m-font); color: var(--m-ink); text-decoration: none; }
.m3PitchQs{ margin: 14px 0 0; padding-left: 22px; max-width: 72ch; }
.m3PitchQs li{ margin: 0 0 8px; color: var(--m-ink); }
.m3GlPitch .m3AskBtns{ margin-top: 16px; }
.m3ProofBox .m3LmIn{ padding: 0 18px 18px; }
/* Tool (flow v3 preview): field hints, the example button, the leads control, the verdict, "Your result" and "What next?" */
.peToolBox .m3FieldHint{ display: block; margin-top: 6px; font: 400 13px/1.45 var(--m-font); color: var(--m-ink-2); }
.m3ExampleRow{ display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 4px 0 0; }
.m3ExampleRow span{ font-size: 14px; color: var(--m-ink-2); }
.m3OptToggle{ min-height: 44px; padding: 8px 0; border: 0; background: none; cursor: pointer; font: 700 15px/1.3 var(--m-font); color: var(--m-blue);
    text-decoration: underline; text-underline-offset: 3px; }
.m3ResultH, .m3NextH{ margin: 22px 0 8px; font: 800 20px/1.3 var(--m-font); color: var(--m-ink); }
.m3Verdict{ margin: 0 0 12px; padding: 12px 14px; border-radius: var(--m-r); background: var(--tint-bg, #eef2f8); font: 700 16px/1.45 var(--m-font); color: var(--m-ink); }
.m3VerdictMore{ margin: 10px 0 0; color: var(--m-ink-2); }
.m3TrustChips{ margin: 0 0 10px; }
.peToolBox .m3FieldHint{ text-transform: none; letter-spacing: normal; }
@media (max-width: 767px){
    .pgHero.m3ToolHero .pgCrumb{ display: none; }
    body.isM3 .pgHero.m3ToolHero{ padding: 84px 0 8px !important; }
    body.isM3 main > section.peTool:not(#m3x){ padding-top: 12px !important; }
    .peTool .pgHead{ margin-bottom: 10px; }
}
/* Pillar (flow v3 preview): the sheet note under the hero asks, the three "how it fits" lines */
.pgHero .m3SheetNote{ margin: 8px 0 0; font: 600 14px/1.4 var(--m-font); color: var(--m-ink-2); }
.m3FitLines{ margin: 14px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; max-width: 72ch; }
.m3FitLines li{ padding: 12px 14px; border-radius: var(--m-r); background: #fff; border: 1px solid var(--m-line); }
/* About (flow v3 preview): the answer and team photo in the hero, the four leaders, the two-way cards */
.pgHero .m3HeroAnswer{ margin: 12px 0 0; max-width: 62ch; font-size: 17px; line-height: 1.55; color: var(--m-ink); }
.pgHero .m3HeroPhoto{ margin: 0; align-self: center; }
.pgHero .m3HeroPhoto img{ width: 100%; height: auto; border-radius: var(--m-r-lg); box-shadow: var(--m-shadow); object-fit: cover; object-position: center 30%; }
.pgHero .m3HeroPhoto figcaption{ margin-top: 8px; font-size: 13px; color: var(--m-ink-2); }
@media (max-width: 767px){ .pgHero .m3HeroPhoto{ margin-top: 18px; } }
.m3Leaders .m3People{ display: grid; gap: 14px; }
@media (min-width: 900px){ .m3Leaders .m3People{ grid-template-columns: 1fr 1fr; } }
.m3DealCards ul{ margin: 6px 0 0; padding-left: 18px; }
.m3DealCards li{ margin: 0 0 6px; font-size: 15px; color: var(--m-ink-2); }
/* Contact (flow v3 preview): "Add details (optional)" inside the form, the "something else" rows */
.contactForm .m3AddDetails{ grid-column: 1 / -1; border: 1px solid var(--m-line); border-radius: var(--m-r); background: #fff; }
.m3AddDetails > summary{ cursor: pointer; list-style: none; min-height: 44px; padding: 12px 16px; font: 700 15px/1.3 var(--m-font); color: var(--m-blue);
    display: flex; justify-content: space-between; align-items: center; }
.m3AddDetails > summary::-webkit-details-marker{ display: none; }
.m3AddDetails > summary::after{ content: "+"; }
.m3AddDetails[open] > summary::after{ content: "\2212"; }
.m3AddDetails .m3AddIn{ display: grid; gap: 14px; padding: 0 16px 16px; }
.m3FieldNote{ margin: -6px 0 0; font-size: 13px; color: var(--m-ink-2); }
.m3ElseRows{ margin: 12px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; max-width: 72ch; }
.m3ElseRows li{ padding: 12px 14px; border: 1px solid var(--m-line); border-radius: var(--m-r); background: #fff; }
.m3UpDown .m3CmpCard p{ margin: 4px 0 0; }
/* Growth-plan page (flow v3 preview): the "Free. No obligation." line, "What we need from you", the Led-by line */
.pgFormFoot .m3FreeLine{ flex-basis: 100%; margin: 8px 0 0; font: 600 14px/1.4 var(--m-font); color: var(--m-ink-2); }
.m3NeedLines{ margin: 12px 0 0; padding-left: 20px; max-width: 72ch; }
.m3NeedLines li{ margin: 0 0 8px; }
.m3TeamCard .m3TeamLine{ margin: 10px 0 0; font-size: 15px; color: var(--m-ink-2); }
.pgGrid.m3OneCol{ grid-template-columns: 1fr !important; }
/* Growth-plan page: the form is the page, so the phone bar has Call and WhatsApp only (03, 24 Oct) */
@media (max-width: 767px){ body.peNoPlanBar .peBar{ grid-template-columns: 1fr 1fr !important; } body.peNoPlanBar .peBar .isCta{ display: none !important; } }

/* D323 home: every other industry behind "Show all", as a compact list (icon, name, one line); all links in the HTML */
.peIndMore{ margin-top: 18px; }
.peIndAll{ list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.peIndAll a{ display: flex; align-items: flex-start; gap: 12px; height: 100%; padding: 12px 14px; border: 1px solid var(--m-line, #e3e8f0); border-radius: var(--m-r-sm, 12px); background: #fff; color: var(--m-ink, #1b2333); text-decoration: none; }
.peIndAll a:hover, .peIndAll a:focus-visible{ border-color: var(--m-blue, #0b5fd9); }
.peIndAll a:focus-visible{ outline: 3px solid var(--m-blue, #0b5fd9); outline-offset: 2px; }
.peIndIco{ flex: 0 0 36px; width: 36px; height: 36px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: var(--tint, #e5f0ff); color: var(--tint-ink, #0b4a9e); }
.peIndIco svg{ width: 20px; height: 20px; }
.peIndAll b{ display: block; font-size: 15px; line-height: 1.3; font-weight: 700; }
.peIndAll small{ display: block; margin-top: 2px; font-size: 13px; line-height: 1.45; color: var(--m-ink-2, #46506a); }
@media (max-width: 1023px){ .peIndAll{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px){ .peIndAll{ grid-template-columns: 1fr; } }

/* D324 proof screenshot: image, caption, source line, disclaimer; a tap opens the full image */
.peShot{ margin: 22px 0; max-width: 860px; }
.peShot img{ display: block; width: auto; max-width: 100%; height: auto; border: 1px solid var(--m-line, #e3e8f0); border-radius: var(--m-r-sm, 12px); background: #fff; }
.peShotZoom{ display: inline-block; cursor: zoom-in; }
.peShotZoom:focus-visible{ outline: 3px solid var(--m-blue, #0b5fd9); outline-offset: 3px; border-radius: 12px; }
.peShot figcaption{ margin-top: 10px; font-size: 15px; line-height: 1.55; color: var(--m-ink-2, #46506a); }
.peShotSrc, .peShotNote{ display: block; margin-top: 4px; font-size: 13px; color: var(--m-ink-3, #6b7489); }
.peToolChips{ margin-top: 14px; }
.peToolNote{ margin: 12px 0 0; max-width: 72ch; font-size: 13px; line-height: 1.5; color: var(--m-ink-3, #6b7489); }
.peShotGrid{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; max-width: 1100px; }
.peShotGrid .peShot{ margin: 0; max-width: none; }
.peShotFoot{ margin: 14px 0 0; font-size: 13px; color: var(--m-ink-3, #6b7489); }
@media (max-width: 767px){ .peShotGrid{ grid-template-columns: 1fr; } }

/* D331 industry hub trim (03b rows, user via Boss 27 Oct) */
.m3FvFold{ margin-top: 16px; border-top: 1px solid var(--m-line); padding-top: 4px; }
.m3FvFold > summary{ display: flex; align-items: center; justify-content: space-between; gap: 8px; cursor: pointer; list-style: none; min-height: 48px; font: 700 16px/1.3 var(--m-font); color: var(--m-ink); }
.m3FvFold > summary::-webkit-details-marker{ display: none; }
.m3FvFold > summary::after{ content: "+"; font-size: 20px; color: var(--m-ink-2); }
.m3FvFold[open] > summary::after{ content: "\2212"; }
.m3FvFold .pgHead{ margin: 8px 0 12px; }
.m3FvFold h3.pgTitle{ font-size: 20px; line-height: 1.3; }
.m3TabsClosed .m3Tab{ background: transparent; }
.m3FvShareLine{ margin: 18px 0 0; font-size: 15px; color: var(--m-ink-2); }
.m3FvShareLine a{ font-weight: 700; }
body.isM3 .pgLinks.m3Compact{ padding-top: 28px; padding-bottom: 28px; }
body.isM3 .pgLinks.m3Compact .pgHead .pgText, body.isM3 .pgLinks.m3Compact .pgRowHead, body.isM3 .pgLinks.m3Compact .pgRow > b{ display: none !important; }
body.isM3 .pgLinks.m3Compact .pgRowCols{ display: flex !important; flex-wrap: wrap; gap: 8px !important; }
body.isM3 .pgLinks.m3Compact .pgRowCol, body.isM3 .pgLinks.m3Compact .pgRows, body.isM3 .pgLinks.m3Compact .pgRows li{ display: contents !important; }
body.isM3 .pgLinks.m3Compact .pgRow{ min-height: 40px; }
.m3ChCompact .peCh + .peCh, .m3ChCompact .peCh{ margin-top: 8px; }
.m3ChCompact .peCh > summary{ padding: 12px 16px; min-height: 48px; }
.m3ChCompact .peCh > summary h3{ font-size: 16px; }

/* D344 "How did you hear about us?" (optional) */
.peHeard .peOpt, .peHeardOther .peOpt{ font-style: normal; font-weight: 400; color: var(--m-ink-3, #6b7489); }
.peHeardOther[hidden]{ display: none !important; }

/* D347 tools block */
.peToolList{ list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 10px; }
.peToolList li{ display: block; font-size: 16px; line-height: 1.6; color: var(--m-ink-2, #46506a); }
.peToolList li b{ color: var(--m-ink, #1b2333); }
.peToolLogo{ height: 20px; width: auto; display: inline-block; vertical-align: -4px; }
.peToolMark, .peToolsBlock .peToolNote{ margin: 12px 0 0; font-size: 13px; color: var(--m-ink-3, #6b7489); }
.peToolMark + .peToolNote{ margin-top: 4px; }

/* D353 A: the static "On this page" list (every template). Full titles, two columns on wide screens, no sticky, no floating button */
body.isM3 .m3TocBox{ max-width: 1160px; margin: 0 auto; padding: 8px 24px 28px; }
@media (min-width: 900px){ body.isM3 .m3TocBox ol{ columns: 2; column-gap: 32px; } }
.m3Toc, .m3SecBtn, .m3SecSheet{ display: none !important; }

/* D353 E: the quote row keeps a fixed card width (never squeezed in a narrow column, never cut at the left edge) and scrolls */
body.isM3 .m3QTrack{ padding: 6px 8px 14px !important; scroll-padding-inline: 8px; margin-left: -8px; margin-right: -8px; }
body.isM3 .m3QTrack > .m3QCard{ flex: 0 0 340px !important; width: 340px !important; max-width: calc(100vw - 64px) !important; }
@media (max-width: 420px){ body.isM3 .m3QTrack > .m3QCard{ flex-basis: calc(100vw - 64px) !important; width: auto !important; } }
.m3QNav .m3QDots{ display: none; }   /* 17+ quotes: the counter and arrows say where you are; a row of 20 dots does not */
@media (max-width: 767px){ .m3QNav .m3QArrows{ display: inline-flex; } }

/* D354 (user, 28 Oct): the six-step page on service, sub-service and industry hub pages (_build/d354.py) */
body.d354 #talk, body.d354 #challenges, body.d354 #faq, body.d354 #good-to-know, body.d354 #cost{ scroll-margin-top: 92px; }
body.isM3 .d354Talk{ background: var(--m-surface); }
.d354TalkGrid{ display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 40px); align-items: start; }
body.isM3 .d354TalkMain .m3QuickForm{ grid-column: auto !important; grid-row: auto !important; justify-self: stretch !important; max-width: none !important; margin: 14px 0 0 !important; }
.d354TalkMain .pgHead{ margin-bottom: 0 !important; }
.d354TalkSide{ background: #fff; border: 1px solid var(--m-line); border-radius: var(--m-r-lg); padding: clamp(18px, 2.4vw, 26px); }
.d354TalkOr{ margin: 0 0 10px; font-weight: 700; color: var(--m-ink) !important; }
.d354TalkBtns{ display: flex; flex-wrap: wrap; gap: 10px; }
.d354TalkBtns .pgBtn{ min-height: 46px; }
body.isM3 .d354NextT{ margin: 22px 0 12px; font-size: 18px !important; }
body.isM3 .d354TalkSide .peNextList{ grid-template-columns: 1fr !important; gap: 10px !important; margin: 0; padding: 0; list-style: none; }
body.isM3 .d354TalkSide .peNextStep{ padding: 14px 16px !important; box-shadow: none !important; background: var(--m-surface) !important; }
body.isM3 .d354TalkSide .peNextStep h3{ font-size: 16px !important; margin: 4px 0 4px; }
.d354TalkSide .peNextStep p, .d354TalkSide .peNextNote{ font-size: 14px; margin: 0; }
.d354TalkSide .peNextNote{ margin-top: 10px; color: var(--m-ink-3) !important; }
@media (max-width: 991px){ .d354TalkGrid{ grid-template-columns: 1fr; } }
/* step 3: one quiet facts line, the ISO line small (CRO row 11, D352) */
body.isM3 .d354Facts{ padding: 6px 0 18px !important; background: transparent; }
body.isM3 .d354Facts .peProofList{ display: flex !important; flex-wrap: wrap; justify-content: center; gap: 6px 0 !important; margin: 0; padding: 0; list-style: none; }
.d354Facts .peProofList li{ padding: 0 14px; font-size: 14px; font-weight: 600; color: var(--m-ink-2); border-left: 1px solid var(--m-line); }
.d354Facts .peProofList li:first-child{ border-left: 0; }
.d354Iso{ margin: 8px 0 0; text-align: center; font-size: 12.5px; color: var(--m-ink-3) !important; }
.d354Facts .peProofMore{ display: block; margin-top: 6px; text-align: center; font-size: 13px; font-weight: 600; }
@media (max-width: 600px){ .d354Facts .peProofList li{ flex: 0 0 50%; border-left: 0; text-align: center; padding: 4px 6px; } }
/* step 5: challenges merged with their answers (D353 F) */
.d354ChGrid{ align-items: start; }
body.isM3 .d354Ch h3.peProblemQ{ margin: 0 0 10px !important; font-size: clamp(17px, 1.5vw, 19px) !important; line-height: 1.35; }
.d354How{ margin-top: 12px; border-top: 1px solid var(--m-line); }
.d354How > summary{ display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; cursor: pointer; list-style: none; font-weight: 700; color: var(--m-blue); }
.d354How > summary::-webkit-details-marker{ display: none; }
.d354How > summary::after{ content: "+"; font-size: 20px; line-height: 1; }
.d354How[open] > summary::after{ content: "\2212"; }
.d354How > summary:focus-visible{ outline: 2px solid var(--m-blue); outline-offset: 2px; border-radius: 6px; }
body.isM3 .d354HowIn{ padding: 0 0 6px !important; background: none !important; border: 0 !important; }
body.isM3 .d354HowIn h4{ margin: 12px 0 6px; font-size: 14px !important; font-weight: 700; color: var(--m-ink) !important; }
.d354HowIn ul, .d354HowIn ol{ margin: 0; padding-left: 20px; }
.d354HowIn li, .d354HowIn p{ font-size: 14.5px; }
.d354Ch .m3Worry{ margin-top: 10px; }
/* hub step 2: every service shown, under the four group names */
.d354Groups .d354N{ font-weight: 500; color: var(--m-ink-3); }
/* step 6: all industries, five cards then one compact list (D353 G) */
.d354IndMore{ margin-top: 24px; }
.d354IndMoreT{ margin: 0 0 8px; font-weight: 700; color: var(--m-ink) !important; }
.d354IndList{ list-style: none; margin: 0; padding: 0; columns: 4 190px; column-gap: 28px; }
.d354IndList li{ break-inside: avoid; border-bottom: 1px solid var(--m-line); }
.d354IndList a{ display: block; padding: 9px 0; font-size: 15px; font-weight: 600; color: var(--m-ink); text-decoration: none; }
.d354IndList a:hover{ color: var(--m-blue); }
@media (max-width: 600px){ .d354IndList{ columns: 2; column-gap: 16px; } .d354IndList a{ font-size: 14px; } }
/* step 6: FAQ on its own, then the closing band (one line, one button to the step-4 form, call, WhatsApp) */
body.isM3 .d354Faq .faqSide{ max-width: 860px; padding: 0 !important; }
body.isM3 .d354Faq .faqTitle{ font-size: clamp(26px, 3vw, 36px) !important; margin: 0 0 16px; }
body.isM3 .d354Close .ctaInner{ display: block !important; }
body.isM3 .d354Close .ctaSide{ max-width: 860px; margin: 0 auto; text-align: center; }
body.isM3 .d354Close .ctaBtns{ justify-content: center; }
.d354CloseLine{ margin: 8px 0 18px; font-size: 16px; }
.d354Parent{ margin-top: 16px; }
/* D354 phones: step-6 sections fold under their heading (lighter.js); the intro's side column works as the heading too */
@media (max-width: 767px){
    body.isM3 .d354Deep.peSecFold{ padding-top: 18px !important; padding-bottom: 18px !important; border-top: 1px solid var(--m-line); }
    body.isM3 .d354Deep.peSecFold .pgHead, body.isM3 .d354Deep.peSecFold .pgIntroSide{ display: flex; justify-content: space-between; align-items: center; gap: 12px; cursor: pointer; margin-bottom: 0 !important; min-height: 44px; }
    body.isM3 .d354Deep.peSecFold .pgHead::after, body.isM3 .d354Deep.peSecFold .pgIntroSide::after{ content: "+"; flex: 0 0 auto; color: var(--m-blue); font: 400 28px/1 var(--m-font, sans-serif); }
    body.isM3 .d354Deep.peSecFold .pgHead[aria-expanded="true"]::after, body.isM3 .d354Deep.peSecFold .pgIntroSide[aria-expanded="true"]::after{ content: "\2212"; }
    body.isM3 .d354Deep.peSecFold .pgHead[aria-expanded="true"], body.isM3 .d354Deep.peSecFold .pgIntroSide[aria-expanded="true"]{ margin-bottom: 14px !important; }
    body.isM3 .d354Deep.peSecFold .pgHead .pgEyebrow, body.isM3 .d354Deep.peSecFold .pgIntroSide .pgEyebrow{ display: none; }
    body.isM3 .d354Deep.peSecFold .pgHead:not([aria-expanded="true"]) > :not(.pgTitle){ display: none; }
    body.isM3 .d354Deep.peSecFold .pgTitle{ font-size: 21px !important; margin: 0 !important; }
    body.isM3 .d354Deep .m3Deco{ display: none; }
}
.d354HeroChips{ margin-top: 14px; }
.d354Talk .peHeardOther[hidden]{ display: none !important; }
.d354Talk .m3QuickForm select{ height: 46px; width: 100%; border-radius: 12px; border: 1px solid var(--m-line); padding: 0 12px; font: 500 15px var(--m-font, sans-serif); background: var(--m-surface); color: var(--m-ink); }
.d354Talk .m3QuickForm .peHeard{ font-size: 13px; font-weight: 600; color: var(--m-ink-2); }
.d354Good .d354Sub{ margin: 0 0 8px; }
@media (max-width: 767px){
    body.isM3 section.d354Deep.isShut .pgWrap > :not(.pgHead):not(.pgIntroSide){ display: none !important; }
}
@media (max-width: 767px){
    body.isM3 section.d354Deep.isShut{ padding-top: 6px !important; padding-bottom: 6px !important; }
    body.isM3 section.d354Deep.isShut .pgWrap{ padding-top: 12px !important; padding-bottom: 12px !important; }
    body.isM3 section.d354Deep.isShut .pgHead > :not(.pgTitle), body.isM3 section.d354Deep.isShut .pgIntroSide > :not(.pgTitle){ display: none !important; }
}
@media (min-width: 768px){ body.isM3 .d354Groups .peSvcGrid{ display: grid !important; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)) !important; } }
.d354Parent{ font-size: 15px; }
.d354Parent a{ font-weight: 700; color: var(--m-blue); text-decoration: underline; text-underline-offset: 3px; }
/* ================================================================
   D354 (user 28 Oct; Boss rulings under D290): the six-step order (_build/d354.py). Guides and posts: the short answer box under
   the hero, one static talk-to-us block; About and Team: the one-line ask; Home: slogan line, priority industries, start here.
   ================================================================ */
body.isM3 .d354Hero .m3Chips{ margin-top: 14px; }
body.isM3 .d354Answer{ padding-top: 8px !important; padding-bottom: 8px !important; }
body.isM3 .d354Box{ max-width: 860px; background: var(--tint); border-radius: var(--m-r-lg); padding: 24px 28px; }
body.isM3 .d354Box .pgEyebrow{ margin-bottom: 6px; }
body.isM3 .d354Box .pgTitle{ font-size: clamp(22px, 2.2vw, 30px) !important; line-height: 1.25 !important; margin: 0 0 10px !important; }
body.isM3 .d354AnswerText{ margin: 0; font-size: 18px; line-height: 1.6; color: var(--m-ink) !important; max-width: 70ch; }
body.isM3 .d354IntroMore{ padding-top: 24px !important; padding-bottom: 8px !important; }
body.isM3 .d354IntroMore .pgProse{ max-width: 72ch; }
@media (max-width: 767px){
    body.isM3 .d354Box{ padding: 18px; border-radius: var(--m-r); }
    body.isM3 .d354AnswerText{ font-size: 17px; }
}
/* the talk-to-us block: words on the left, the 2-field box on the right; one column on phones. Static (no sticky, no pop-up). */
body.isM3 .d354pTalk{ padding: clamp(36px, 5vw, 64px) 0; }
body.isM3 .d354pTalkIn{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: clamp(20px, 4vw, 56px); align-items: start;
    background: var(--m-surface); border: 1px solid var(--m-line); border-radius: var(--m-r-lg); padding: clamp(20px, 3vw, 36px); }
body.isM3 .d354pTalkText .pgTitle{ margin: 4px 0 10px !important; font-size: clamp(24px, 2.4vw, 32px) !important; }
body.isM3 .d354pTalkLine{ margin: 0 0 12px; font-size: 17px; color: var(--m-ink) !important; }
body.isM3 .d354pTalkLink{ margin: 0 0 12px; }
body.isM3 .d354pTalkLink a{ color: var(--m-blue); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
body.isM3 .d354pTalkMore{ margin-top: 8px; border-top: 1px solid var(--m-line); padding-top: 8px; }
body.isM3 .d354pTalkMore > summary{ cursor: pointer; min-height: 44px; display: flex; align-items: center; font-weight: 600; color: var(--m-ink-2); }
body.isM3 .d354pTalkMore .pgProse p{ font-size: 15px; }
body.isM3 form.d354pTalkForm.pgForm{ background: #fff; border: 1px solid var(--m-line); border-radius: var(--m-r); padding: 18px; gap: 12px !important; margin: 0; max-width: none; }
body.isM3 form.d354pTalkForm label.d354pConsent{ display: flex !important; align-items: flex-start; gap: 10px; font-weight: 500 !important; font-size: 14px !important; line-height: 1.45; cursor: pointer; }
body.isM3 form.d354pTalkForm label.d354pConsent input{ width: 20px !important; height: 20px !important; min-width: 20px; padding: 0 !important; margin: 1px 0 0; accent-color: var(--m-blue); }
body.isM3 form.d354pTalkForm label.d354pConsent input.isError{ outline: 2px solid #c62828; outline-offset: 2px; }
body.isM3 .d354pTalkBtns{ display: flex; flex-wrap: wrap; gap: 10px; }
body.isM3 .d354pTalkBtns .pgBtn{ flex: 1 1 160px; justify-content: center; width: auto !important; min-height: 48px; }
body.isM3 .d354pTalkCall{ margin: 0; font-size: 14px; }
body.isM3 .d354pTalkCall a{ color: var(--m-blue); font-weight: 700; white-space: nowrap; }
@media (max-width: 860px){ body.isM3 .d354pTalkIn{ grid-template-columns: 1fr; } }
/* About and Team step 4: one line and one button */
body.isM3 .d354Ask{ padding: 8px 0 clamp(28px, 4vw, 48px); }
body.isM3 .d354AskIn{ display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; background: var(--tint);
    border-radius: var(--m-r-lg); padding: 20px 24px; }
body.isM3 .d354AskIn p{ margin: 0; font-size: 18px; font-weight: 600; color: var(--m-ink) !important; max-width: 52ch; }
/* Home: the slogan under the H1 */
body.isM3 .d354Slogan{ margin: 10px 0 0; font-size: clamp(19px, 1.8vw, 24px); font-weight: 700; line-height: 1.35; color: var(--m-ink) !important; }
body.isM3 .pgHero .d354Slogan + .pgHeroLead{ margin-top: 10px; }
/* Team step 2: the teams, one card each */
body.isM3 .d354Teams{ margin-top: 28px; }
body.isM3 .d354TeamGrid{ display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
body.isM3 .d354TeamCard{ padding: 18px !important; }
body.isM3 .d354TeamCard h3{ font-size: 18px !important; margin: 0 0 6px; }
body.isM3 .d354TeamCard p{ font-size: 14px; margin: 0; }
body.isM3 .d354TeamCard .d354TeamNames{ margin-top: 10px; font-weight: 600; color: var(--m-ink) !important; }
@media (max-width: 1099px){ body.isM3 .d354TeamGrid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px){ body.isM3 .d354TeamGrid{ grid-template-columns: 1fr; } }
/* About step 3: the founder card */
body.isM3 .d354FounderCard{ display: flex; gap: 20px; align-items: center; max-width: 760px; background: #fff; border: 1px solid var(--m-line);
    border-radius: var(--m-r-lg); padding: 20px; }
body.isM3 .d354FounderCard img{ width: 120px; height: 120px; border-radius: 50%; object-fit: cover; flex: 0 0 120px; }
body.isM3 .d354FounderCard p{ margin: 0 0 8px; }
body.isM3 .d354FounderName{ color: var(--m-ink) !important; font-size: 18px; }
@media (max-width: 575px){ body.isM3 .d354FounderCard{ flex-direction: column; align-items: flex-start; } body.isM3 .d354FounderCard img{ width: 96px; height: 96px; flex-basis: 96px; } }
/* the logos inside the trust block */
body.isM3 .d354Logos{ margin: 4px 0 18px; }
/* step 6: deep sections as closed headings (one tap opens; the words stay in the HTML) */
body.isM3 .pgWrap.d354Folded{ display: block !important; }
body.isM3 .d354Fold{ border: 1px solid var(--m-line); border-radius: var(--m-r-lg); background: #fff; }
body.isM3 .d354Fold > summary{ list-style: none; cursor: pointer; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; min-height: 56px;
    padding: 16px 56px 16px 22px; position: relative; }
body.isM3 .d354Fold > summary::-webkit-details-marker{ display: none; }
body.isM3 .d354Fold > summary .pgEyebrow{ flex: 0 0 100%; margin: 0 !important; }
body.isM3 .d354Fold > summary .pgTitle{ margin: 0 !important; font-size: clamp(20px, 2vw, 26px) !important; }
body.isM3 .d354Fold > summary::after{ content: "+"; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px;
    border: 1.5px solid var(--m-line); border-radius: 50%; display: grid; place-items: center; font: 600 18px/1 var(--m-font); color: var(--m-blue); }
body.isM3 .d354Fold[open] > summary::after{ content: "\2212"; }
body.isM3 .d354Fold > summary:focus-visible{ outline: 2px solid var(--m-blue); outline-offset: 2px; border-radius: var(--m-r-lg); }
body.isM3 .d354FoldBody{ padding: 0 22px 22px; }
/* Home hero: the brand chip, the rating line; B17: the contextual box inside the article */
body.isM3 .m3Chip.isBrand{ font-weight: 800; color: var(--m-ink); }
body.isM3 .pgHero .d354BrandChips{ margin: 0 0 14px; }
body.isM3 .d354Rating{ margin: 10px 0 0; font-size: 14px; color: var(--m-ink-2) !important; }
body.isM3 .d354Rating a{ color: var(--m-blue); text-decoration: underline; text-underline-offset: 3px; }
body.isM3 .d354Mid{ margin: 22px 0; padding: 16px 18px; border: 1px solid var(--m-line); border-left: 4px solid var(--m-blue); border-radius: var(--m-r-sm); background: var(--m-surface); }
body.isM3 .d354Mid p{ margin: 0; font-size: 16px; }
body.isM3 .d354Mid .d354MidT{ font-weight: 800; color: var(--m-ink) !important; margin-bottom: 4px; }
body.isM3 .d354Mid a{ color: var(--m-blue); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
body.isM3 .d354AskGuide{ padding: 0 0 8px; }
body.isM3 .d354AskGuide .d354AskIn{ background: var(--m-surface); border: 1px solid var(--m-line); padding: 14px 20px; }
body.isM3 .d354AskGuide .d354AskIn p{ font-size: 16px; }
/* D354 spacing: the answer box, the short ask lines and the answer's extra paragraphs sit close together (":not(#_)" outranks the
   long section-padding rules above without editing them) */
body.isM3 main > section.d354Answer:not(#_){ padding-top: 24px !important; padding-bottom: 8px !important; }
body.isM3 main > section.d354Ask:not(#_){ padding-top: 8px !important; padding-bottom: 32px !important; }
body.isM3 main > section.d354IntroMore:not(#_){ padding-top: 8px !important; }
body.isM3 main > section.d354pTalk:not(#_){ padding-top: clamp(32px, 4vw, 56px) !important; padding-bottom: clamp(32px, 4vw, 56px) !important; }
/* the talk box: not the hero form's 9-row grid placement; the consent tick beside its words */
body.isM3 form.d354pTalkForm.pgForm:not(#_){ grid-column: auto !important; grid-row: auto !important; align-self: start !important; justify-self: stretch !important; box-shadow: none !important; }
body.isM3 form.d354pTalkForm label.d354pConsent:not(#_){ display: flex !important; flex-direction: row !important; align-items: flex-start !important; gap: 10px !important; }
body.isM3 form.d354pTalkForm label.d354pConsent input:not(#_){ flex: 0 0 24px; width: 24px !important; height: 24px !important; }
body.isM3 .d354pTalkMore > summary{ list-style: none; justify-content: space-between; gap: 12px; }
body.isM3 .d354pTalkMore > summary::-webkit-details-marker{ display: none; }
body.isM3 .d354pTalkMore > summary::after{ content: "+"; color: var(--m-blue); font-weight: 700; font-size: 20px; }
body.isM3 .d354pTalkMore[open] > summary::after{ content: "\2212"; }
body.isM3 .pgHero .d354Slogan + .pgHeroLead:not(#_){ margin-top: 12px !important; }
/* D353: the full-quote dialog */
.m3QDialog{ width: min(640px, calc(100vw - 32px)); max-height: calc(100vh - 64px); border: 0; border-radius: 20px; padding: 28px 24px 22px; box-shadow: 0 24px 60px rgb(10 20 40 / 25%); }
.m3QDialog::backdrop{ background: rgb(10 20 40 / 45%); }
.m3QDialog blockquote{ margin: 8px 0 16px; font-size: 17px; line-height: 1.65; color: var(--m-ink, #1b2333); }
.m3QDialog p{ margin: 0; display: grid; gap: 2px; border-top: 1px solid var(--m-line, #e4e8f0); padding-top: 12px; }
.m3QDialog small{ color: var(--m-ink-2, #46506a); font-size: 14px; }
.m3QDClose{ position: absolute; top: 8px; right: 8px; width: 44px; height: 44px; border: 0; background: none; font-size: 28px; line-height: 1; cursor: pointer; color: var(--m-ink-2, #46506a); }
/* D353 (Boss): on phones the bottom bar is the only fixed element: no back-to-top button over it */
@media (max-width: 767px){ .ftTop{ display: none !important; } }

/* D353 D (user 28 Oct: the link "digital marketing agency in kolkata" was smaller than its sentence): plain links inside body
   text take the paragraph's size and weight */
body.isM3 main p a:not([class]), body.isM3 main td a:not([class]), body.isM3 main .pgProse li a:not([class]){ font: inherit !important; }
/* D354 shared blocks, copied verbatim from the service helper (ag/d354-svc) so Home/About/Team match the service pages: step-4 talk, facts line, closing band */
body.isM3 .d354Talk{ background: var(--m-surface); }
.d354TalkGrid{ display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 40px); align-items: start; }
body.isM3 .d354TalkMain .m3QuickForm{ grid-column: auto !important; grid-row: auto !important; justify-self: stretch !important; max-width: none !important; margin: 14px 0 0 !important; }
.d354TalkMain .pgHead{ margin-bottom: 0 !important; }
.d354TalkSide{ background: #fff; border: 1px solid var(--m-line); border-radius: var(--m-r-lg); padding: clamp(18px, 2.4vw, 26px); }
.d354TalkOr{ margin: 0 0 10px; font-weight: 700; color: var(--m-ink) !important; }
.d354TalkBtns{ display: flex; flex-wrap: wrap; gap: 10px; }
.d354TalkBtns .pgBtn{ min-height: 46px; }
body.isM3 .d354NextT{ margin: 22px 0 12px; font-size: 18px !important; }
body.isM3 .d354TalkSide .peNextList{ grid-template-columns: 1fr !important; gap: 10px !important; margin: 0; padding: 0; list-style: none; }
body.isM3 .d354TalkSide .peNextStep{ padding: 14px 16px !important; box-shadow: none !important; background: var(--m-surface) !important; }
body.isM3 .d354TalkSide .peNextStep h3{ font-size: 16px !important; margin: 4px 0 4px; }
.d354TalkSide .peNextStep p, .d354TalkSide .peNextNote{ font-size: 14px; margin: 0; }
.d354TalkSide .peNextNote{ margin-top: 10px; color: var(--m-ink-3) !important; }
@media (max-width: 991px){ .d354TalkGrid{ grid-template-columns: 1fr; } }
/* step 3: one quiet facts line, the ISO line small (CRO row 11, D352) */
body.isM3 .d354Facts{ padding: 6px 0 18px !important; background: transparent; }
body.isM3 .d354Facts .peProofList{ display: flex !important; flex-wrap: wrap; justify-content: center; gap: 6px 0 !important; margin: 0; padding: 0; list-style: none; }
.d354Facts .peProofList li{ padding: 0 14px; font-size: 14px; font-weight: 600; color: var(--m-ink-2); border-left: 1px solid var(--m-line); }
.d354Facts .peProofList li:first-child{ border-left: 0; }
.d354Iso{ margin: 8px 0 0; text-align: center; font-size: 12.5px; color: var(--m-ink-3) !important; }
.d354Facts .peProofMore{ display: block; margin-top: 6px; text-align: center; font-size: 13px; font-weight: 600; }
@media (max-width: 600px){ .d354Facts .peProofList li{ flex: 0 0 50%; border-left: 0; text-align: center; padding: 4px 6px; } }
/* step 5: challenges merged with their answers (D353 F) */
.d354ChGrid{ align-items: start; }
body.isM3 .d354Close .ctaInner{ display: block !important; }
body.isM3 .d354Close .ctaSide{ max-width: 860px; margin: 0 auto; text-align: center; }
body.isM3 .d354Close .ctaBtns{ justify-content: center; }
.d354CloseLine{ margin: 8px 0 18px; font-size: 16px; }
.d354Talk .peHeardOther[hidden]{ display: none !important; }
.d354Talk .m3QuickForm select{ height: 46px; width: 100%; border-radius: 12px; border: 1px solid var(--m-line); padding: 0 12px; font: 500 15px var(--m-font, sans-serif); background: var(--m-surface); color: var(--m-ink); }
.d354Talk .m3QuickForm .peHeard{ font-size: 13px; font-weight: 600; color: var(--m-ink-2); }
.d354Facts .peProofList li{ white-space: nowrap; }
/* D354 step 2 on phones (Boss, 28 Oct): compact rows, name + one line, no tall cards */
@media (max-width: 600px){
    body.isM3 .d354Compact .peSvcGrid:not(#_){ display: grid !important; grid-template-columns: 1fr !important; gap: 8px !important; overflow: visible !important; }
    body.isM3 .d354Compact .peSvcCard:not(#_){ display: grid !important; grid-template-columns: 36px minmax(0, 1fr); column-gap: 12px; align-items: center;
        width: auto !important; min-height: 0 !important; padding: 12px 14px !important; }
    body.isM3 .d354Compact .peSvcCard .peSvcIcon{ grid-row: span 2; width: 36px !important; height: 36px !important; margin: 0 !important; }
    body.isM3 .d354Compact .peSvcCard .peSvcIcon svg{ width: 20px; height: 20px; }
    body.isM3 .d354Compact .peSvcCard h3:not(#_){ margin: 0 !important; font-size: 16px !important; }
    body.isM3 .d354Compact .peSvcCard p:not(#_){ margin: 2px 0 0 !important; font-size: 13.5px !important; line-height: 1.45; }
    body.isM3 .d354Compact .peSvcCard .pePlats, body.isM3 .d354Compact .peSvcCard .pePlat{ display: none !important; }
    body.isM3 .d354Compact .d354TeamGrid{ gap: 8px; }
    body.isM3 .d354Compact .d354TeamCard:not(#_){ padding: 12px 14px !important; }
    body.isM3 .d354Compact .d354TeamCard h3{ font-size: 16px !important; margin: 0 0 2px; }
    body.isM3 .d354Compact .d354TeamCard .d354TeamNames{ margin-top: 4px; }
}
/* ===== Milan B11 (C9, Boss 28 Oct): the shared closing block has one ask. The call-me-back form fills the blue panel;
   call, WhatsApp and the growth plan are text links under it. ===== */
body.isM3 .ctaWrap.m3Close2 .ctaSide{ display: flex !important; flex-direction: column; gap: 0; }
body.isM3 .ctaWrap.m3Close2 form.m3CtaForm.pgForm{ display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; gap: 12px 14px !important;
    width: 100%; max-width: none !important; margin: 22px 0 0 !important; padding: clamp(18px, 2.4vw, 26px) !important; border-radius: var(--m-r-lg) !important;
    background: #fff !important; border: 0 !important; box-shadow: none !important; justify-self: stretch !important; float: none !important; position: static !important; }
body.isM3 .ctaWrap.m3Close2 form.m3CtaForm .m3QuickTitle, body.isM3 .ctaWrap.m3Close2 form.m3CtaForm .m3QuickNote,
body.isM3 .ctaWrap.m3Close2 form.m3CtaForm button[type="submit"]{ grid-column: 1 / -1; }
body.isM3 .ctaWrap.m3Close2 form.m3CtaForm, body.isM3 .ctaWrap.m3Close2 form.m3CtaForm *{ color: var(--m-ink) !important; }
body.isM3 .ctaWrap.m3Close2 form.m3CtaForm label{ display: grid; gap: 6px; font-size: 14px !important; font-weight: 600 !important; text-transform: none !important; letter-spacing: normal !important; }
body.isM3 .ctaWrap.m3Close2 form.m3CtaForm input{ min-height: 48px; font-size: 16px; }
body.isM3 .ctaWrap.m3Close2 form.m3CtaForm button[type="submit"]{ min-height: 50px; color: #fff !important; background: var(--m-blue) !important; font-size: 16px !important; }
body.isM3 .ctaWrap.m3Close2 form.m3CtaForm .m3QuickTitle{ margin: 0; font: 700 17px/1.35 var(--m-font); }
body.isM3 .ctaWrap.m3Close2 form.m3CtaForm .m3QuickNote{ margin: 0; font-size: 13px !important; line-height: 1.5; color: var(--m-ink-2) !important; }
body.isM3 .ctaWrap.m3Close2 form.m3CtaForm .m3QuickNote a{ color: var(--m-blue) !important; text-decoration: underline; }
body.isM3 .ctaWrap.m3Close2 .m3CloseLinks{ display: flex !important; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; margin: 18px 0 0 !important; padding: 0 !important; }
body.isM3 .ctaWrap.m3Close2 .m3CloseLinks > span{ font-size: 15px; opacity: .9; }
body.isM3 .ctaWrap.m3Close2 .m3CloseLinks a, body.isM3 .ctaWrap .m3CloseShare{ display: inline-flex; align-items: center; min-height: 44px; padding: 0 !important; border: 0 !important;
    background: none !important; color: #fff !important; font: 700 15px/1.3 var(--m-font) !important; text-decoration: underline; text-underline-offset: 4px; transform: none !important; }
body.isM3 .ctaWrap .m3ShareRow{ margin: 6px 0 0 !important; }
body.isM3 .ctaWrap .m3ClosePlan{ margin-top: 18px; }
body.isM3 .ctaWrap.m3Close2.m3Slim form.m3CtaForm.pgForm, body.isM3 .ctaWrap.m3Close2.m3Slim .m3CloseLinks{ max-width: 680px !important; }
@media (max-width: 575px){
    body.isM3 .ctaWrap.m3Close2 form.m3CtaForm.pgForm{ grid-template-columns: minmax(0, 1fr) !important; padding: 16px !important; }
    body.isM3 .ctaWrap.m3Close2 .m3CloseLinks{ gap: 0 16px; }
    body.isM3 .ctaWrap.m3Close2 .m3CloseLinks > span{ flex-basis: 100%; }
}
/* Milan B15: careers closes with apply, portfolio and HR (no client form) */
body.isM3 .ctaWrap.m3CloseCareers .m3CloseLine{ margin: 10px 0 0; font-size: 17px; line-height: 1.5; }
body.isM3 .ctaWrap.m3CloseCareers .ctaBtns{ margin-top: 20px !important; }
body.isM3 .ctaWrap.m3CloseCareers .m3CloseHr{ list-style: none; margin: 22px 0 0; padding: 18px 0 0; border-top: 1px solid rgb(255 255 255 / 30%); display: grid; gap: 10px; font-size: 15px; line-height: 1.5; }
body.isM3 .ctaWrap.m3CloseCareers .m3CloseHr a{ text-decoration: underline; text-underline-offset: 3px; font-weight: 700; }

/* ===== Milan B1 / B2 (Boss 28 Oct): on the growth-plan and contact pages the form sits in the first screen, beside the H1 and
   the promise (laptops) or right under them (phones). No breadcrumb, no "Updated" stamp there (B5). ===== */
body.isM3 .pgHero.m3HeroForm{ min-height: 0 !important; padding-bottom: clamp(24px, 4vw, 48px) !important; }
body.isM3 .pgHero.m3HeroForm .pgScrollCue{ display: none !important; }
body.isM3 .pgHero.m3HeroForm .pgHeroInner{ grid-template-columns: minmax(0, 1fr) minmax(0, 520px); align-items: start; row-gap: 0; }
body.isM3 .pgHero.m3HeroForm .pgHeroInner > .m3FormCard{ grid-column: 2 !important; grid-row: 1 / span 12 !important; justify-self: stretch !important; align-self: start;
    margin: 0 !important; padding: clamp(18px, 2.2vw, 28px); border-radius: var(--m-r-lg); background: #fff; border: 1px solid var(--m-line);
    box-shadow: 0 18px 44px rgb(16 32 64 / 10%); scroll-margin-top: 96px; }
body.isM3 .pgHero.m3HeroForm .m3FormCard .pgHead{ margin: 0 0 12px !important; }
body.isM3 .pgHero.m3HeroForm .m3FormCard .pgTitle{ font-size: clamp(22px, 2vw, 28px) !important; line-height: 1.2 !important; margin: 0 0 6px !important; }
body.isM3 .pgHero.m3HeroForm .m3FormCard .pgTitle .pgLine{ display: inline !important; }
body.isM3 .pgHero.m3HeroForm .m3FormCard .pgTitle .pgLine + .pgLine::before{ content: " "; }
body.isM3 .pgHero.m3HeroForm .m3FormCard .pgText{ font-size: 13px !important; line-height: 1.5 !important; color: var(--m-ink-2) !important; margin: 0 !important; }
body.isM3 .pgHero.m3HeroForm .m3FormCard form{ margin: 0 !important; }
body.isM3 .pgHero.m3HeroForm .m3FormCard .m3LinkRow{ margin: 12px 0 0 !important; font-size: 14px; }
body.isM3 .pgHero.m3HeroForm .m3Promise{ margin: 10px 0 0 !important; font: 700 18px/1.4 var(--m-font) !important; color: var(--m-ink) !important; }
body.isM3 .pgHero.m3HeroForm .pgHeroLead{ margin-top: 14px !important; }
.m3HeroTalk{ display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; margin: 14px 0 0 !important; font-size: 15px; color: var(--m-ink-2); }
.m3HeroTalk a{ display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; color: var(--m-blue); text-decoration: underline; text-underline-offset: 3px; }
.m3ReachTop{ margin: 16px 0 0 !important; width: 100%; }
.m3ReachH{ margin: 0 0 4px; font: 700 13px/1.3 var(--m-font); letter-spacing: .04em; text-transform: uppercase; color: var(--m-ink-3); }
body.isM3 .m3ReachTop .pgContactDirect{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 18px; margin: 0; padding: 0; border: 0; background: none; }
body.isM3 .m3ReachTop .pgReach{ display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; align-items: baseline; gap: 8px; min-height: 44px; padding: 8px 0 !important; font-size: 15px; }
body.isM3 .m3ReachTop .pgReach .pgReachK{ font-size: 13px; font-weight: 700; color: var(--m-ink-3); }
body.isM3 .m3ReachTop .pgReach .pgReachV{ font-size: 15px !important; font-weight: 600; line-height: 1.4; color: var(--m-ink); overflow-wrap: anywhere; }
body.isM3 .m3ReachTop .pgReach:nth-of-type(5){ grid-column: 1 / -1; }
.m3MapCard{ display: flex; align-items: center; gap: 14px; margin: 10px 0 0; padding: 8px; max-width: 520px; border: 1px solid var(--m-line); border-radius: var(--m-r); background: #fff; color: var(--m-ink); text-decoration: none; }
.m3MapCard svg{ flex: 0 0 auto; width: 150px; height: auto; border-radius: 10px; }
.m3MapCard > span{ display: grid; gap: 2px; font-size: 14px; font-weight: 700; color: var(--m-blue); }
.m3MapCard > span b{ color: var(--m-ink); font-size: 15px; }
.m3MapCard:hover, .m3MapCard:focus-visible{ border-color: var(--m-blue); }
@media (max-width: 991px){
    body.isM3 .pgHero.m3HeroForm .pgHeroInner{ grid-template-columns: minmax(0, 1fr); }
    body.isM3 .pgHero.m3HeroForm .pgHeroInner > .m3FormCard{ grid-column: 1 !important; grid-row: auto !important; margin: 16px 0 0 !important; width: 100%; box-sizing: border-box; }
}
@media (max-width: 767px){
    body.isM3 .pgHero.m3HeroForm{ padding-top: 84px !important; }
    body.isM3 .pgHero.m3HeroForm .pgHeroSub{ display: none !important; }
    body.isM3 .pgHero.m3HeroForm .m3FormCard{ padding: 16px !important; box-shadow: none !important; }
    body.isM3 .m3ReachTop .pgContactDirect{ grid-template-columns: minmax(0, 1fr); }
    body.isM3 .m3ReachTop .pgReach{ grid-template-columns: 70px minmax(0, 1fr) auto; }
}

/* ===== Milan B13 (C15): industries hub, nine cards with a client logo where one is tagged, then A to Z ===== */
.m3IndH{ margin: 28px 0 12px; font: 800 20px/1.3 var(--m-font); color: var(--m-ink); }
.m3IndH small{ font-weight: 600; color: var(--m-ink-3); font-size: 15px; }
.m3IndCards{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.m3IndCard{ display: grid; grid-template-rows: 48px auto 1fr auto; gap: 8px; padding: 18px; border: 1px solid var(--m-line); border-radius: var(--m-r); background: #fff; color: var(--m-ink); text-decoration: none; min-height: 100%; }
.m3IndCard:hover, .m3IndCard:focus-visible{ border-color: var(--m-blue); box-shadow: 0 10px 26px rgb(16 32 64 / 8%); }
.m3IndLogo{ display: flex; align-items: center; height: 48px; }
.m3IndLogo img{ max-height: 40px; width: auto; max-width: 150px; object-fit: contain; }
.m3IndCard b{ font: 800 18px/1.3 var(--m-font); }
.m3IndCard > span:not(.m3IndLogo){ font-size: 15px; line-height: 1.5; color: var(--m-ink-2); }
.m3IndCard small{ font-size: 13px; color: var(--m-ink-3); }
.m3AzList{ list-style: none; margin: 0; padding: 0; columns: 4 200px; column-gap: 24px; }
.m3AzList li{ break-inside: avoid; }
.m3AzList a{ display: flex; align-items: center; min-height: 40px; font-size: 16px; font-weight: 600; color: var(--m-ink); text-decoration: underline; text-decoration-color: var(--m-line); text-underline-offset: 4px; }
.m3AzList a:hover{ color: var(--m-blue); text-decoration-color: currentColor; }
.m3IndAll{ margin-top: 24px; }
@media (max-width: 991px){ .m3IndCards{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575px){
    .m3IndCards{ grid-template-columns: minmax(0, 1fr); gap: 10px; }
    .m3IndCard{ grid-template-rows: auto; grid-template-columns: minmax(0, 1fr) 96px; padding: 14px; gap: 4px 12px; }
    .m3IndCard .m3IndLogo{ grid-column: 2; grid-row: 1 / span 3; height: auto; justify-content: flex-end; }
    .m3IndCard .m3IndLogo img{ max-width: 96px; max-height: 34px; }
    .m3IndCard > *:not(.m3IndLogo){ grid-column: 1; }
    .m3AzList{ columns: 2; column-gap: 16px; }
    .m3AzList a{ font-size: 15px; min-height: 44px; }
}

/* ===== Milan B16: "Email me this result" (preview only until the Boss's double approval) ===== */
.m3MailMe{ margin: 18px 0 0; padding: 18px; border: 1px solid var(--m-line); border-radius: var(--m-r); background: #fff; }
.m3MailH{ margin: 0 0 4px; font: 800 18px/1.3 var(--m-font); color: var(--m-ink); }
.m3MailMe > p{ margin: 0 0 12px; color: var(--m-ink-2); }
.m3MailForm{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 14px; }
.m3MailForm[hidden], .m3MailMe[hidden]{ display: none !important; }
.m3MailForm .fullRow{ grid-column: 1 / -1; }
.m3MailForm .m3Tick{ display: flex; gap: 10px; align-items: flex-start; font-weight: 500; text-transform: none; letter-spacing: normal; }
.m3MailForm .m3Tick input{ width: 20px; height: 20px; margin-top: 2px; flex: 0 0 20px; }
.m3MailForm .m3Tick.isError{ color: #b3261e; }
.m3KeepLine{ margin: 8px 0 0; font-size: 13px; color: var(--m-ink-3); }
.m3ResultCopy{ white-space: pre-wrap; font: 14px/1.5 var(--m-font); background: #f6f8fb; padding: 12px; border-radius: 10px; }
@media (max-width: 767px){ .m3MailForm{ grid-template-columns: minmax(0, 1fr); } }
/* Milan B1/B2: a compact form in the hero card, so name, phone and the button fit the first screen on a phone */
body.isM3 .m3FormCard .pgForm{ gap: 12px 16px !important; }
body.isM3 .m3FormCard .pgForm label{ gap: 6px !important; font: 600 14px/1.3 var(--m-font) !important; letter-spacing: normal !important; text-transform: none !important; color: var(--m-ink) !important; }
body.isM3 .m3FormCard .pgForm input, body.isM3 .m3FormCard .pgForm select, body.isM3 .m3FormCard .pgForm textarea{ min-height: 46px; padding: 10px 12px !important; border: 1px solid var(--m-line) !important;
    border-radius: var(--m-r-sm) !important; background: #fff !important; font-size: 16px !important; color: var(--m-ink) !important; }
body.isM3 .m3FormCard .pgForm select{ background-position: right 12px center !important; padding-right: 32px !important; }
body.isM3 .m3FormCard .pgForm input:focus, body.isM3 .m3FormCard .pgForm select:focus, body.isM3 .m3FormCard .pgForm textarea:focus{ border-color: var(--m-blue) !important; outline: 2px solid var(--m-blue-soft); }
body.isM3 .m3FormCard .pgForm .isError{ border-color: #b3261e !important; }
body.isM3 .m3FormCard .peOpt{ font-style: normal; font-weight: 500; color: var(--m-ink-3); }
body.isM3 .m3FormCard .m3OptBox > summary, body.isM3 .m3FormCard .m3AddDetails > summary{ min-height: 44px; }
body.isM3 .m3FormCard .pgFormFoot{ gap: 8px 16px !important; }
body.isM3 .m3FormCard .pgFormFoot .pgBtn{ min-height: 50px; }
body.isM3 .m3FormCard .m3FormConsent{ margin: 10px 0 0 !important; font-size: 12.5px !important; line-height: 1.5 !important; color: var(--m-ink-3) !important; }
@media (max-width: 575px){ body.isM3 .m3FormCard .pgFormFoot .pgBtn{ width: 100%; justify-content: center; } }
body.isM3 .ctaWrap.m3Close2 .ctaTitle{ margin-bottom: 0 !important; }
body.isM3 .ctaWrap.m3Close2 form.m3CtaForm button[type="submit"]{ width: 100% !important; justify-self: stretch !important; justify-content: center; }
body.isM3 .ctaWrap.m3Close2 .m3CloseLinks a, body.isM3 .ctaWrap .m3CloseShare, body.isM3 .ctaWrap.m3CloseCareers .m3CloseHr a{ text-decoration: underline !important; text-underline-offset: 4px !important; }
/* contact: the reach list as small label over value, two columns, so it fits beside the form */
body.isM3 .m3ReachTop .pgReach{ display: flex !important; flex-direction: column; align-items: flex-start; gap: 2px; padding: 8px 22px 8px 0 !important; position: relative; border-bottom: 1px solid var(--m-line) !important; }
body.isM3 .m3ReachTop .pgReach .pgReachK{ font: 700 12px/1.3 var(--m-font) !important; letter-spacing: .03em !important; text-transform: uppercase; color: var(--m-ink-3) !important; }
body.isM3 .m3ReachTop .pgReach b{ position: absolute; right: 0; top: 10px; }
body.isM3 .pgHero.m3ToolHero .pgHeroInner{ grid-template-columns: minmax(0, 1fr) !important; }
/* Milan B16: the result form uses the same compact fields as the hero forms */
body.isM3 .m3MailMe [hidden]{ display: none !important; }
body.isM3 .m3MailForm.pgForm{ gap: 12px 16px !important; margin-top: 4px; }
body.isM3 .m3MailForm label{ gap: 6px !important; font: 600 14px/1.35 var(--m-font) !important; letter-spacing: normal !important; text-transform: none !important; color: var(--m-ink) !important; }
body.isM3 .m3MailForm input[type="text"], body.isM3 .m3MailForm input[type="email"], body.isM3 .m3MailForm input[type="tel"]{ min-height: 46px; padding: 10px 12px !important;
    border: 1px solid var(--m-line) !important; border-radius: var(--m-r-sm) !important; background: #fff !important; font-size: 16px !important; color: var(--m-ink) !important; }
body.isM3 .m3MailForm .m3Tick{ flex-direction: row !important; align-items: flex-start !important; font-weight: 500 !important; }
body.isM3 .m3MailForm .m3Tick input{ width: 20px !important; min-height: 0 !important; height: 20px; padding: 0 !important; }
body.isM3 .m3MailForm .m3Tick a{ font: inherit !important; color: var(--m-blue) !important; text-decoration: underline; }
body.isM3 .m3MailForm .m3Tick.isError{ color: #b3261e !important; }
body.isM3 .m3MailForm .m3FieldNote{ margin: -4px 0 0; font-size: 13px; color: var(--m-ink-3); }
body.isM3 .m3MailForm .m3KeepLine a{ font: inherit; color: var(--m-blue); }
body.isM3 .m3MailFoot .pgBtn{ min-height: 48px; }
body.isM3 .m3ReachH, body.isM3 .m3ReachTop .pgReach .pgReachK{ text-transform: none !important; letter-spacing: normal !important; }
body.isM3 .m3ReachH{ font-size: 14px; color: var(--m-ink-2); }

/* D354 round 2 (Boss via 02, 28 Oct): phones reach the step-4 form in about 4 screens (service) / 5 (hub) */
@media (max-width: 767px){
    /* step 2: a compact 2-column list, name + one short line, nothing folded */
    body.isM3.d354 section[data-step="2"] .pgGrid, body.isM3.d354 section[data-step="2"] .peSvcGrid{ display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; gap: 8px !important; }
    body.isM3.d354 section[data-step="2"] .pgCard, body.isM3.d354 section[data-step="2"] .peSvcCard{ padding: 11px 12px !important; min-height: 0 !important; height: auto !important; border-radius: 12px !important; box-shadow: none !important; transform: none !important; display: block !important; }
    body.isM3.d354 section[data-step="2"] .pgCardTop, body.isM3.d354 section[data-step="2"] .pgCardGo, body.isM3.d354 section[data-step="2"] .peSvcIcon,
    body.isM3.d354 section[data-step="2"] .pePlats, body.isM3.d354 section[data-step="2"] .m3Deco{ display: none !important; }
    body.isM3.d354 section[data-step="2"] .pgCard h3, body.isM3.d354 section[data-step="2"] .peSvcCard h3{ font-size: 14.5px !important; line-height: 1.3 !important; margin: 0 0 4px !important; }
    body.isM3.d354 section[data-step="2"] .pgCard p, body.isM3.d354 section[data-step="2"] .peSvcCard p{ font-size: 13px !important; line-height: 1.4 !important; margin: 0 !important;
        display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
    body.isM3.d354 section[data-step="2"] .m3PillarT{ margin: 14px 0 8px !important; font-size: 15px !important; }
    body.isM3.d354 section[data-step="2"] .m3Pillar:first-child .m3PillarT{ margin-top: 4px !important; }
    body.isM3.d354 section[data-step="2"] .pgHead .pgText, body.isM3.d354 section[data-step="2"] .pgHead .peHeadNote{ font-size: 14px !important; }
    /* sub-service step 2 table: each row a compact cell (part + what we do); the "what you receive" line stays in the HTML and on wider screens */
    body.isM3.d354 section[data-step="2"] table.m3CardsOnPhone tbody{ display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
    body.isM3.d354 section[data-step="2"] table.m3CardsOnPhone tr{ margin: 0 !important; padding: 10px 12px !important; box-shadow: none !important; border-radius: 12px !important; }
    body.isM3.d354 section[data-step="2"] table.m3CardsOnPhone td, body.isM3.d354 section[data-step="2"] table.m3CardsOnPhone th{ padding: 0 !important; border: 0 !important; font-size: 13px; line-height: 1.4; }
    body.isM3.d354 section[data-step="2"] table.m3CardsOnPhone tr > :first-child{ font-size: 14.5px !important; font-weight: 700; padding: 0 0 4px !important; }
    body.isM3.d354 section[data-step="2"] table.m3CardsOnPhone td::before{ content: none !important; }
    body.isM3.d354 section[data-step="2"] table.m3CardsOnPhone tr > :nth-child(2){ display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
    body.isM3.d354 section[data-step="2"] table.m3CardsOnPhone tr > :nth-child(n+3){ display: none !important; }
    /* the "On this page" list: two short columns */
    body.isM3.d354 .m3TocBox ol{ columns: 2 !important; column-gap: 14px; padding: 8px 12px !important; }
    body.isM3.d354 .m3TocBox a{ min-height: 36px; padding: 7px 0; font-size: 14px; }
    body.isM3.d354 .m3TocBox a span{ display: none; }
}
/* step 3: one facts line */
.d354Facts .peProofList li{ white-space: nowrap; }
/* hub challenge cards: "This is my problem" is a small text link, same behaviour (fills and jumps to the step-4 form) */
body.isM3 .d354Ch a.m3Worry.d354WorryLink{ display: inline-flex !important; align-items: center; min-height: 32px; margin-top: 8px; padding: 0 !important; background: none !important;
    border: 0 !important; box-shadow: none !important; color: var(--m-blue) !important; font-size: 14px !important; font-weight: 600 !important; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 767px){
    body.isM3 .d354Facts{ padding: 2px 0 10px !important; }
    body.isM3 .d354Facts .pgWrap{ padding-top: 0 !important; padding-bottom: 0 !important; }
    body.isM3 .d354Facts .peProofList{ flex-wrap: nowrap !important; }
    .d354Facts .peProofList li, .d354Facts .peProofList li:first-child{ flex: 0 0 auto; padding: 0 7px; font-size: 12.5px; border-left: 1px solid var(--m-line); text-align: center; }
    .d354Facts .peProofList li:first-child{ border-left: 0; }
    body.isM3.d354 .pgHero .m3Chips{ display: flex !important; flex-wrap: wrap; gap: 6px !important; }
    body.isM3.d354 .pgHero .m3Chip{ font-size: 12.5px !important; padding: 4px 9px !important; min-height: 0 !important; margin: 0 !important; }
    body.isM3.d354 .pgHero .m3Chip svg{ width: 14px; height: 14px; }
    body.isM3.d354 section[data-step="2"] .pgCard, body.isM3.d354 section[data-step="2"] .peSvcCard{ padding: 9px 10px !important; }
    body.isM3.d354 section[data-step="2"] .pgCard h3, body.isM3.d354 section[data-step="2"] .peSvcCard h3{ font-size: 13.5px !important; }
    body.isM3.d354 section[data-step="2"] .pgCard p, body.isM3.d354 section[data-step="2"] .peSvcCard p{ font-size: 12.5px !important; }
    body.isM3.d354 .m3TocBox{ padding-bottom: 12px; }
    body.isM3.d354 .m3TocBox a{ min-height: 32px; padding: 6px 0; font-size: 13.5px; }
}
/* specificity: outranks the phone section-spacing rule (10 :not()s) */
body.isM3 main > section.d354Facts.d354Facts.d354Facts.d354Facts.d354Facts.d354Facts.d354Facts.d354Facts.d354Facts.d354Facts.d354Facts.d354Facts.d354Facts{ padding-top: 4px !important; padding-bottom: 18px !important; min-height: 0 !important; border: 0 !important; }
body.isM3 main > section.d354Facts::before, body.isM3 main > section.d354Facts::after{ display: none !important; }

/* D354 round 3 (Boss, 28 Oct): step 2 shows one complete short line per service, never cut with "..."; compact on desktop too */
body.isM3.d354 section[data-step="2"] .pgCard p.d354HasShort, body.isM3.d354 section[data-step="2"] .peSvcCard p.d354HasShort,
body.isM3.d354 section[data-step="2"] .pgCard > p, body.isM3.d354 section[data-step="2"] .peSvcCard > p{ display: block !important; -webkit-line-clamp: unset !important; overflow: visible !important; }
body.isM3.d354 section[data-step="2"] .pgCard .d354Rest, body.isM3.d354 section[data-step="2"] .peSvcCard .d354Rest{ display: none !important; }
@media (max-width: 767px){
    body.isM3.d354 section[data-step="2"] table.m3CardsOnPhone tr > :nth-child(2){ display: block !important; -webkit-line-clamp: unset !important; overflow: visible !important; }
    body.isM3.d354 section[data-step="2"] table .d354Rest{ display: none !important; }
}
@media (min-width: 768px){
    body.isM3.d354 section[data-step="2"] .pgGrid, body.isM3.d354 section[data-step="2"] .peSvcGrid{ display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 12px !important; }
    body.isM3.d354 section[data-step="2"] .pgCard, body.isM3.d354 section[data-step="2"] .peSvcCard{ padding: 14px 16px !important; min-height: 0 !important; height: auto !important; display: block !important; }
    body.isM3.d354 section[data-step="2"] .pgCardTop, body.isM3.d354 section[data-step="2"] .pgCardGo, body.isM3.d354 section[data-step="2"] .peSvcIcon,
    body.isM3.d354 section[data-step="2"] .pePlats, body.isM3.d354 section[data-step="2"] .m3Deco{ display: none !important; }
    body.isM3.d354 section[data-step="2"] .pgCard h3, body.isM3.d354 section[data-step="2"] .peSvcCard h3{ font-size: 16px !important; margin: 0 0 4px !important; }
    body.isM3.d354 section[data-step="2"] .pgCard p, body.isM3.d354 section[data-step="2"] .peSvcCard p{ font-size: 14px !important; line-height: 1.45 !important; margin: 0 !important; }
    body.isM3.d354 section[data-step="2"] .m3Pillars{ display: block !important; }
    body.isM3.d354 section[data-step="2"] .m3Pillar{ margin: 0 0 6px !important; }
    body.isM3.d354 section[data-step="2"] .m3PillarT{ margin: 16px 0 8px !important; font-size: 16px !important; }
}
/* D354 (city templates, six-step order): the line under the H1, the step-4 ask (one form beside call and WhatsApp),
   the closing ask without its FAQ column; D361: "Top brands in <City>" as plain rows with a small grey source note */
body.isM3 .pgHeroTagline{ margin: -4px 0 14px; font: 600 18px/1.45 var(--m-font); color: var(--m-ink-2); max-width: 38em; }
@media (max-width: 767px){ body.isM3 .pgHeroTagline{ font-size: 16px; margin-bottom: 12px; } }
.m3D354Ask .m3AskGrid{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: 32px; align-items: start; }
@media (max-width: 991px){ .m3D354Ask .m3AskGrid{ grid-template-columns: 1fr; gap: 18px; } }
.m3D354Ask .pgHead{ margin-bottom: 0 !important; }
body.isM3 .m3D354Ask h2.pgTitle{ font-size: clamp(22px, 2.4vw, 30px) !important; line-height: 1.3 !important; max-width: 30ch; }
.m3D354Ask .m3AskBtns{ display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.m3D354Ask .m3AskBtns .pgBtn{ min-height: 48px; }
body.isM3 .m3D354Ask form.m3AskForm.pgForm{ display: grid !important; grid-template-columns: 1fr !important; gap: 12px !important; margin: 0 !important;
    max-width: none !important; width: 100%; padding: 22px; border-radius: var(--m-r-lg); background: #fff; border: 1px solid var(--m-line);
    box-shadow: var(--m-shadow-up); grid-column: auto !important; grid-row: auto !important; justify-self: stretch !important; }
body.isM3 .m3D354Ask .m3AskForm .m3QuickTitle{ margin: 0; font: 700 16px/1.35 var(--m-font); color: var(--m-ink); }
body.isM3 .m3D354Ask .m3AskForm input{ min-height: 48px; }
section.peNext.m3AfterAsk{ padding-top: 8px !important; }
.ctaWrap.m3D354Cta .ctaBtns{ margin-top: 18px; }
.m3IntroRest .pgProse{ max-width: 72ch; }
/* D361 rows */
.m3BrandRows .m3XGrid{ display: block !important; overflow: visible !important; border-top: 1px solid var(--m-line); }
.m3BrandRows .m3XCard{ display: grid !important; grid-template-columns: minmax(140px, 1.1fr) minmax(120px, 1fr) minmax(0, 1.6fr); column-gap: 18px; row-gap: 4px;
    align-items: baseline; background: none !important; border: 0 !important; border-bottom: 1px solid var(--m-line) !important; border-radius: 0 !important;
    box-shadow: none !important; padding: 12px 0 !important; width: auto !important; flex: none !important; min-height: 0 !important; }
.m3BrandRows .m3XCard h3{ font-size: 16px !important; }
.m3BrandRows .m3XCat{ font-size: 14px; }
.m3BrandRows .m3Chans{ gap: 4px 12px; }
.m3BrandRows .m3Chan{ padding: 0; border: 0; background: none; font-size: 14px; }
.m3BrandRows .m3Chan svg{ display: none; }
.m3BrandRows .m3XLead, .m3BrandRows .m3XSrc{ grid-column: 1 / -1; margin: 0; }
.m3BrandRows .m3XSrc{ font-size: 12px; color: var(--m-ink-3); }
@media (max-width: 767px){ .m3BrandRows .m3XCard{ grid-template-columns: 1fr 1fr; } .m3BrandRows .m3Chans{ grid-column: 1 / -1; } }
/* Boss CRO review: step 6 deep sections are closed headings, one tap to open */
.m3D6Fold{ border: 1px solid var(--m-line); border-radius: var(--m-r-lg); background: #fff; }
.m3D6Fold > summary{ list-style: none; cursor: pointer; display: grid; grid-template-columns: minmax(0, 1fr) 32px; column-gap: 12px; align-items: center;
    padding: 16px 18px; min-height: 56px; }
.m3D6Fold > summary::-webkit-details-marker{ display: none; }
.m3D6Fold > summary::after{ content: "+"; grid-column: 2; grid-row: 1 / span 2; width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid var(--m-line);
    display: grid; place-items: center; font: 600 20px/1 var(--m-font); color: var(--m-blue); }
.m3D6Fold[open] > summary::after{ content: "\2212"; }
.m3D6Fold > summary:focus-visible{ outline: 2px solid var(--m-blue); outline-offset: 2px; border-radius: var(--m-r-lg); }
.m3D6Fold > summary .pgEyebrow{ grid-column: 1; margin: 0 0 4px !important; }
body.isM3 .m3D6Fold > summary h2.pgTitle{ grid-column: 1; margin: 0 !important; font-size: clamp(19px, 2vw, 24px) !important; line-height: 1.3 !important; }
.m3D6Fold > summary h2 .pgLine{ display: inline !important; }
.m3D6Body{ padding: 0 18px 18px; }
section.m3D6{ padding-top: 14px !important; padding-bottom: 14px !important; }
section.m3D6.m3HasDeco .m3Deco{ display: none; }
.m3D6Fold > summary .pgEyebrow{ justify-self: start; width: auto !important; max-width: 100%; }
@media (min-width: 992px){ .m3D354Ask .m3AskGrid{ align-items: center; } }
/* D361: "Based in <City>" above "Big advertisers here" (plain rows, office tag, grey source) */
.m3BrandRows .m3XCard h4{ margin: 0; font: 700 16px/1.3 var(--m-font); color: var(--m-ink); }
.m3ListT{ margin: 4px 0 2px !important; font: 700 18px/1.3 var(--m-font) !important; color: var(--m-ink); }
.m3ListNote{ margin: 0 0 10px; font-size: 14px; color: var(--m-ink-2); }
.m3AdvT{ margin-top: 26px; font-weight: 700; color: var(--m-ink); }
.m3HqList + .m3ListNote{ margin-top: 26px; }
.m3OfficeTag{ display: inline-block; padding: 2px 8px; border-radius: 6px; background: var(--m-surface); border: 1px solid var(--m-line); font-size: 12px; color: var(--m-ink-2); }
.m3D6Bare > summary .pgEyebrow{ background: none !important; padding: 0 !important; font: 700 19px/1.3 var(--m-font) !important; color: var(--m-ink) !important; text-transform: none !important; letter-spacing: 0 !important; }
.m3D6Bare > summary .pgEyebrow svg, .m3D6Bare > summary .pgEyebrow i{ display: none; }
.m3D6Body .pgStateSide:empty{ display: none; }
/* step 6: the closed boxes stack as one group (no big gaps, no rules between them); :not(#d354) outranks the long
   main > section:not(...) padding rules without a pile of classes */
body.isM3 main > section:is(.m3D6, .peDeeper, .peBrandNote)[data-step="6"]:not(#d354){ padding-top: 8px !important; padding-bottom: 8px !important; }
body.isM3 main > section[data-step="6"] + section:is(.m3D6, .peDeeper, .peBrandNote):not(#d354){ border-top: 0 !important; }
body.isM3 main > section[data-step="5"] + section[data-step="6"]:not(#d354){ padding-top: clamp(32px, 4vw, 56px) !important; }
/* Boss rules (28 Oct): step 2 on phones is a compact two-column list (name + its one line), all visible; step 3 facts in one line;
   "On this page" as compact chips on phones so the form starts within 4-5 phone screens */
.m3FactsLine{ margin: 12px 0 0; text-align: center; font: 600 14px/1.5 var(--m-font); color: var(--m-ink-2); }
@media (max-width: 767px){
    body.isM3 main > section[data-step="2"]:not(#d354){ padding-top: 28px !important; padding-bottom: 28px !important; }
    body.isM3 main > section[data-step="2"] .pgGrid:not(#d354){ display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; }
    body.isM3 main > section[data-step="2"] .pgGrid > .pgCard:not(#d354){ padding: 10px 12px !important; min-height: 0 !important; border-radius: 12px !important; box-shadow: none !important; gap: 2px !important; }
    body.isM3 main > section[data-step="2"] .pgCard .pgCardTop, body.isM3 main > section[data-step="2"] .pgCard .pgCardGo{ display: none !important; }
    body.isM3 main > section[data-step="2"] .pgCard h3:not(#d354){ font-size: 14px !important; line-height: 1.3 !important; margin: 0 0 2px !important; }
    body.isM3 main > section[data-step="2"] .pgCard p:not(#d354){ font-size: 13.5px !important; line-height: 1.4 !important; margin: 0 !important; color: var(--m-ink-2); }
    body.isM3 main > section[data-step="2"] .pgHead:not(#d354){ margin-bottom: 14px !important; }
    body.isM3 main > section[data-step="2"] .m3Deco{ display: none; }
    body.isM3 nav.m3TocBox[data-step="1"] ol:not(#d354){ display: flex !important; flex-wrap: wrap; gap: 6px; padding: 10px !important; }
    body.isM3 nav.m3TocBox[data-step="1"] li:not(#d354){ border: 0 !important; padding: 0 !important; margin: 0 !important; }
    body.isM3 nav.m3TocBox[data-step="1"] li a:not(#d354){ display: inline-flex !important; min-height: 40px; align-items: center; padding: 4px 10px !important;
        border: 1px solid var(--m-line); border-radius: 999px; font-size: 13px !important; line-height: 1.3 !important; }
    body.isM3 nav.m3TocBox[data-step="1"] li a span{ display: none; }
}
/* design critique: step 6 old "Go deeper" folds look like the new closed boxes (full width, same radius, same +/- mark) */
body.isM3 main > section.peDeeper[data-step="6"] .pgWrap > *:not(#d354){ max-width: none; }
body.isM3 main > section.peDeeper[data-step="6"] .peDeeperBox:not(#d354){ width: 100%; border-radius: var(--m-r-lg) !important; box-shadow: none; }
body.isM3 main > section.peDeeper[data-step="6"] .peDeeperBox > summary:not(#d354){ padding: 16px 18px !important; font-size: clamp(17px, 1.8vw, 20px) !important; min-height: 56px; }
body.isM3 main > section.peDeeper[data-step="6"] .peDeeperBox > summary::after{ content: "+" !important; width: 32px; height: 32px; border: 1.5px solid var(--m-line); border-radius: 50%;
    display: grid; place-items: center; transform: none !important; font: 600 20px/1 var(--m-font); color: var(--m-blue); }
body.isM3 main > section.peDeeper[data-step="6"] .peDeeperBox[open] > summary::after{ content: "\2212" !important; }
body.isM3 main > section.peDeeper[data-step="6"] .peDeeperSummary{ margin: 0 0 6px; font-size: 14px; color: var(--m-ink-2); }
.m3D6Fold{ box-shadow: none; }
/* D354 review fixes (cro, web-design-guidelines, accessibility): the Home chips take two lines on phones, not four; headings
   balance; phone numbers never break; every summary shows a focus ring */
@media (max-width: 600px){
    body.isM3 .pgHero .d354BrandChips{ gap: 6px !important; }
    body.isM3 .pgHero .d354BrandChips .m3Chip:not(#_){ font-size: 12.5px !important; padding: 4px 9px !important; }
    body.isM3 .pgHero .d354BrandChips .m3Chip svg{ width: 14px; height: 14px; }
}
body.isM3 .d354Box .pgTitle, body.isM3 .d354pTalk .pgTitle, body.isM3 .d354Talk .pgTitle, body.isM3 .d354Fold .pgTitle{ text-wrap: balance; }
body.isM3 .d354Call, body.isM3 .d354pTalkCall a{ white-space: nowrap; }
body.isM3 .d354pTalkMore > summary:focus-visible{ outline: 2px solid var(--m-blue); outline-offset: 2px; border-radius: 8px; }
/* the facts line is one quiet line: not the long section padding (":not(#_)" outranks the section-padding rules) */
body.isM3 main > section.d354Facts:not(#_){ padding-top: 6px !important; padding-bottom: 18px !important; }

/* Industry hubs, Events and AI blocks (user, 28 Oct: "keep it open"): every group open, stacked under a small heading */
.m3Stack{ display: grid; gap: 28px; }
.m3StackT{ font-size: 1.05rem; font-weight: 700; margin: 0 0 12px; color: var(--ink, #10233f); }

   D369 header and menu (29 Oct; the user: "too cluttered ... we are known for digital, designing, technology").
   Calm bar; Services = three lead columns (Digital, Design, Technology; priority services first and a little bolder) over a
   quiet row (Advertising, On-ground, Strategy, all services); Industries = the priority trades. Open by button (growth.js:
   aria-expanded, Esc, click outside) or mouse hover; without JS, hover or keyboard focus. Panels sit over the page (no shift).
   ================================================================ */
.hxCol[data-t="sky"]{ --hxT: var(--t-sky); --hxI: var(--i-sky); }
.hxCol[data-t="lavender"]{ --hxT: var(--t-lavender); --hxI: var(--i-lavender); }
.hxCol[data-t="mint"]{ --hxT: var(--t-mint); --hxI: var(--i-mint); }
body.isM3 .headerWrap .headerInner .menuWrap.hxNav > ul{ gap: 28px; }
body.isM3 .headerWrap .headerInner .menuWrap.hxNav, body.isM3 .hxNav > ul > li.hxHas{ position: static; }   /* the Services panel centres on the header bar */
body.isM3 .hxNav > ul > li.hxHas.isInd{ position: relative; }
body.isM3 .hxNav .hxTop{ display: inline-flex; align-items: center; gap: 7px; margin: 0; padding: 12px 0; border: 0; background: none; cursor: pointer;
    font: 600 15px/1.2 var(--m-font) !important; color: var(--m-ink); border-radius: 8px; }
body.isM3 .hxNav .hxTop:hover, body.isM3 .hxNav .hxTop[aria-expanded="true"], body.isM3 .hxNav li.hxHas.isActive > .hxTop{ color: var(--m-blue); }
body.isM3 .hxNav .hxTop:focus-visible, body.isM3 .hxNav .hxPanel a:focus-visible{ outline: 2px solid var(--m-blue); outline-offset: 3px; }
.hxChev{ width: 7px; height: 7px; margin-top: -3px; border: solid currentColor; border-width: 0 1.8px 1.8px 0; transform: rotate(45deg); transition: transform .16s ease, margin .16s ease; }
.hxTop[aria-expanded="true"] .hxChev{ margin-top: 3px; transform: rotate(225deg); }
body.isM3 .hxNav .hxPanel{ position: absolute; top: 100%; left: 50%; z-index: 100; width: min(1120px, calc(100vw - 32px)); box-sizing: border-box;
    background: #fff; border: 1px solid var(--m-line); border-radius: 20px; overflow: hidden; text-align: left;
    box-shadow: 0 24px 56px rgb(27 35 51 / 13%), 0 3px 10px rgb(27 35 51 / 6%);
    opacity: 0; visibility: hidden; transform: translate(-50%, 8px); transition: opacity .16s ease, transform .16s ease, visibility 0s linear .16s; }
body.isM3 .hxNav .hxPanel.hxInd{ top: calc(100% + 14px); width: 560px; }
body.isM3 .hxNav li.hxHas.isOpen > .hxPanel,
html:not(.hxJs) body.isM3 .hxNav li.hxHas:hover > .hxPanel, html:not(.hxJs) body.isM3 .hxNav li.hxHas:focus-within > .hxPanel{
    opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: opacity .16s ease, transform .16s ease, visibility 0s; }
@media (prefers-reduced-motion: reduce){ body.isM3 .hxNav .hxPanel, .hxChev{ transition: none !important; } }
body.isM3 .hxNav .hxPanel ul{ list-style: none; margin: 0; padding: 0; }
body.isM3 .hxNav .hxPanel li{ margin: 0; padding: 0; line-height: 1.3; }
body.isM3 .hxNav .hxPanel a{ text-decoration: none; transition: color .15s ease; }
/* lead columns: Digital is the widest (two short columns of links), Design and Technology one each */
body.isM3 .hxNav .hxLead{ display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 36px; padding: 22px 30px 18px; }
body.isM3 .hxNav .hxGHead{ display: flex; align-items: flex-start; gap: 12px; margin: 0 0 14px; }
body.isM3 .hxNav .hxTile{ flex: none; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 11px; background: var(--hxT); color: var(--hxI); }
body.isM3 .hxNav .hxTile svg{ width: 20px; height: 20px; }
body.isM3 .hxNav .hxGName{ display: block; font: 800 17px/1.25 var(--m-font); color: var(--m-ink); }
body.isM3 .hxNav .hxGName a{ color: inherit !important; }
body.isM3 .hxNav .hxGName a:hover{ color: var(--m-blue) !important; }
body.isM3 .hxNav .hxGHead small{ display: block; margin-top: 2px; font: 500 13.5px/1.35 var(--m-font); color: var(--m-ink-3); }
body.isM3 .hxNav .hxPri{ padding-bottom: 10px !important; margin-bottom: 10px !important; border-bottom: 1px solid var(--m-line); }
body.isM3 .hxNav .hxPri a{ display: block; padding: 5px 0; font: 700 15.5px/1.3 var(--m-font) !important; color: var(--m-ink) !important; }
body.isM3 .hxNav .hxRest a{ display: block; padding: 4px 0; font: 500 14.5px/1.3 var(--m-font) !important; color: var(--m-ink-2) !important; }
body.isM3 .hxNav .hxCol.isMany .hxRest{ columns: 2; column-gap: 28px; }
body.isM3 .hxNav .hxCol li{ break-inside: avoid; }
body.isM3 .hxNav .hxPanel a:hover{ color: var(--m-blue) !important; }
/* second row: Advertising, On-ground, Strategy, the same columns, quieter (no tile, smaller heading, lighter type) */
body.isM3 .hxNav .hxLead.hxSecond{ padding-top: 18px; padding-bottom: 18px; background: var(--m-surface); border-top: 1px solid var(--m-line); }
body.isM3 .hxNav .hxCol.isQuiet .hxTile{ display: none; }
body.isM3 .hxNav .hxCol.isQuiet .hxGHead{ margin-bottom: 8px; display: block; }
body.isM3 .hxNav .hxCol.isQuiet .hxGName{ display: inline; font-size: 15px; font-weight: 700; margin-right: 6px; }
body.isM3 .hxNav .hxCol.isQuiet .hxGHead > span:not(.hxTile){ display: block; line-height: 1.4; }
body.isM3 .hxNav .hxCol.isQuiet .hxGHead small{ display: inline; font-size: 13px; }
body.isM3 .hxNav .hxCol.isQuiet .hxRest a{ padding: 4px 0; font-size: 14px !important; }
body.isM3 .hxNav .hxFoot{ display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 4px 30px 6px; background: var(--m-surface); border-top: 1px solid var(--m-line); }
body.isM3 .hxNav .hxAll{ margin: 0; align-self: end; }
body.isM3 .hxNav .hxAll a{ display: inline-flex; align-items: center; gap: 6px; min-height: 40px; font: 700 14.5px var(--m-font) !important; color: var(--m-blue) !important; white-space: nowrap; }
body.isM3 .hxNav .hxGroup{ display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; margin: 0; padding: 0; font: 500 12.5px/1.4 var(--m-font); color: var(--m-ink-3); }
body.isM3 .hxNav .hxGroup a, body.isM3 .hxNav .hxGroup .hxGroupItem{ font: 600 12.5px var(--m-font) !important; color: var(--m-ink-2) !important; }
/* Industries */
body.isM3 .hxNav .hxInd{ padding: 22px 26px 12px; }
body.isM3 .hxNav .hxIndLine{ margin: 0 0 10px; font: 800 17px/1.25 var(--m-font); color: var(--m-ink); }
body.isM3 .hxNav .hxIndList{ display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; padding-bottom: 8px !important; border-bottom: 1px solid var(--m-line); }
body.isM3 .hxNav .hxIndList a{ display: block; padding: 7px 0; font: 600 15px/1.3 var(--m-font) !important; color: var(--m-ink) !important; }
body.isM3 .hxNav .hxInd .hxAll{ padding-top: 4px; }
@media (min-width: 992px) and (max-width: 1199px){   /* five menu words + call, WhatsApp and the button fit from 992 px */
    body.isM3 .headerWrap{ padding-left: 20px !important; padding-right: 20px !important; }
    body.isM3 .headerWrap .headerInner{ padding-left: 12px !important; padding-right: 12px !important; }
    body.isM3 .headerWrap .headerInner .logoImg img{ height: 32px !important; }
    body.isM3 .headerWrap .headerInner .headerRight{ gap: 14px; }
    body.isM3 .headerWrap .headerInner .menuWrap.hxNav{ gap: 10px; }
    body.isM3 .headerWrap .headerInner .menuWrap.hxNav .menuCta{ padding: 0 16px !important; font-size: 14px !important; }
}
@media (max-width: 1199px){
    body.isM3 .headerWrap .headerInner .menuWrap.hxNav > ul{ gap: 18px; }
    body.isM3 .hxNav .hxTop{ font-size: 14px !important; }
    body.isM3 .hxNav .hxLead{ gap: 24px; padding: 22px 22px 20px; }
    body.isM3 .hxNav .hxFoot{ padding: 4px 22px 6px; }
}
/* phone drawer: the three groups use the tinted rows; priority services first and bolder; a plain "More services" list */
body.isM3 .hxMob details.mnPil li a{ font-weight: 500 !important; color: var(--m-ink-2) !important; }
body.isM3 .hxMob details.mnPil li.isPri a{ font-weight: 700 !important; font-size: 16px !important; color: var(--m-ink) !important; }
body.isM3 .hxMob details.mnPil li.isPri + li:not(.isPri){ border-top: 2px solid var(--m-line); }
body.isM3 .hxMob details.mnPil li.peMobAll a{ font-weight: 700 !important; color: var(--m-blue) !important; }
body.isM3 .hxMob details.mnQuiet > summary{ min-height: 60px; }
body.isM3 .hxMob details.mnQuiet .mxHeadTxt b{ font: 700 17px/1.25 var(--m-font); color: var(--m-ink); }
body.isM3 .hxMob details.mnQuiet .mxHeadTxt small{ font: 500 13px/1.35 var(--m-font); color: var(--m-ink-3); }
body.isM3 .hxMob details.mnQuiet ul{ list-style: none; margin: 0 0 8px; padding: 0 4px; }
body.isM3 .hxMob details.mnQuiet li a{ display: flex; align-items: center; min-height: 46px; font: 500 15px var(--m-font) !important; color: var(--m-ink-2) !important; border-bottom: 1px solid var(--m-line); text-decoration: none; }
body.isM3 .hxMob details.mnQuiet li:last-child a{ border-bottom: 0; }
body.isM3 .hxMob details.mnQuiet li.peMobAll a{ font-weight: 700 !important; color: var(--m-blue) !important; }
body.isM3 .hxMob .mnMore{ padding: 2px 4px; border-bottom: 1px solid var(--m-line); }
body.isM3 .hxMob .mnMoreT{ margin: 0 0 2px; font: 600 13.5px var(--m-font); color: var(--m-ink-3); }
body.isM3 .hxMob .mnMore ul{ list-style: none; margin: 0; padding: 0; }
body.isM3 .hxMob .mnMore li a{ display: flex; align-items: center; gap: 6px; min-height: 46px; font: 600 16px var(--m-font) !important; color: var(--m-ink) !important; text-decoration: none; }
body.isM3 .hxMob .mnMore li.peMobAll a{ color: var(--m-blue) !important; }

/* D369 footer (user via Boss, 29 Oct: "all industry and locations should be on the footer"): four short columns, then every
   industry A-Z and every city hub by group, as plain links. Phones fold each column (lighter.js); desktop shows them open. */
body.isM3 .ftSiteGrid.isAll{ grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 34px 28px; }
body.isM3 .ftSiteGrid.isAll .ftSiteCol.isWide{ grid-column: 1 / -1; padding-top: 26px; border-top: 1px solid var(--m-line); }
body.isM3 .ftSiteGrid.isAll .ftSiteCol li{ margin-bottom: 8px; }
body.isM3 .ftSiteGrid.isAll .ftLink{ font-size: 14px; }
body.isM3 .ftSiteGrid.isAll .ftAll .ftLink{ font-weight: 700; color: var(--m-blue) !important; }
body.isM3 .ftSiteCol.isInds > ul{ columns: 5; column-gap: 28px; }
body.isM3 .ftSiteCol.isInds li{ break-inside: avoid; }
body.isM3 .ftSiteCol.isLocs > ul.ftCityGroups{ display: grid; grid-template-columns: 1fr 1fr 3fr; gap: 0 28px; list-style: none; margin: 0; padding: 0; }
body.isM3 .ftSiteCol.isLocs .ftCityGroup{ margin: 0; }
body.isM3 .ftSiteCol.isLocs .ftCityGroup.isMany > ul{ columns: 3; column-gap: 28px; }
body.isM3 .ftSiteCol.isLocs .ftCityGroup ul{ list-style: none; margin: 0; padding: 0; }
body.isM3 .ftSiteCol.isLocs .ftCityGroup li{ break-inside: avoid; }
body.isM3 .ftSiteCol.isLocs .ftCityT{ margin: 0 0 10px; font: 600 13px/1.3 var(--m-font); color: var(--m-ink-3); }
body.isM3 .ftSiteCol.isLocs > ul > li.ftAll{ grid-column: 1 / -1; margin-top: 6px; }
@media (max-width: 991px){
    body.isM3 .ftSiteGrid.isAll{ grid-template-columns: 1fr 1fr !important; }
    body.isM3 .ftSiteCol.isInds > ul{ columns: 3; }
    body.isM3 .ftSiteCol.isLocs > ul.ftCityGroups{ grid-template-columns: 1fr 1fr; }
    body.isM3 .ftSiteCol.isLocs .ftCityGroup.isMany{ grid-column: 1 / -1; margin-top: 12px; }
}
@media (max-width: 767px){
    body.isM3 .ftSiteGrid.isAll{ grid-template-columns: 1fr !important; gap: 0 !important; }
    body.isM3 .ftSiteGrid.isAll .ftSiteCol.isWide{ padding-top: 0; border-top: 0; }
    body.isM3 .ftSiteCol.isInds > ul, body.isM3 .ftSiteCol.isLocs .ftCityGroup.isMany > ul{ columns: 2; column-gap: 16px; }
    body.isM3 .ftSiteCol.isLocs > ul.ftCityGroups{ grid-template-columns: 1fr; }
    body.isM3 .ftSiteCol.isLocs .ftCityGroup{ margin-top: 10px; }
    body.isM3 .ftSiteCol.isLocs .ftCityGroup.isMany{ margin-top: 10px; }
    body.isM3 .ftSiteCol ul.peFold{ display: none !important; }
}
/* Boss 29 Oct (the user's phone check): team photo + numbers, a compact band right after the hero on core pages */
.d354TeamBand{ padding: 14px 0; }
.d354TeamIn{ display: flex; align-items: center; gap: 16px; }
.d354TeamIn img{ width: 132px; height: 99px; object-fit: cover; border-radius: 10px; flex: none; }
.d354TeamFacts{ list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; font-weight: 700; font-size: .95rem; }
.d354TeamFacts li{ white-space: nowrap; }
.d354TeamLink{ margin: 6px 0 0; font-size: .9rem; }
@media (max-width: 767px){ .d354TeamIn img{ width: 96px; height: 72px; } .d354TeamFacts{ font-size: .88rem; gap: 4px 10px; } }

/* D373 (Boss 29 Oct, the user's phone check): all services and all industries, open lists (d354pages.py d373_*). The shared band
   sits on about 300 pages: plain text links, no cards or images; four group columns on wide screens, stacked groups on phones */
body.isM3 .d373Band .pgTitle{ font-size: clamp(24px, 2.6vw, 32px) !important; }
.d373Cols{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px 32px; }
body.isM3 .d373H{ margin: 0 0 10px; font-size: 16px !important; font-weight: 700; line-height: 1.3; color: var(--m-ink); }
.d373H a{ color: inherit; text-decoration: none; }
.d373H a:hover{ color: var(--m-blue); text-decoration: underline; }
.d373Links, .d373Lines{ list-style: none; margin: 0; padding: 0; }
.d373Links{ display: grid; gap: 4px; }
.d373Links li, .d373Lines li{ margin: 0; padding: 0; font-size: 15px; line-height: 1.45; }
.d373Links li::before, .d373Lines li::before{ content: none; }
.d373Links a, .d373Lines a{ color: var(--m-ink); text-decoration: underline; text-decoration-color: var(--m-line); text-underline-offset: 3px; }
.d373Links a:hover, .d373Lines a:hover{ color: var(--m-blue); text-decoration-color: currentColor; }
.d373Links .isHere, .d373Lines .isHere{ color: var(--m-ink-3); }
.d373Flow{ display: flex; flex-wrap: wrap; gap: 6px 22px; }
.d373Flow .isTop{ font-weight: 700; }
.d373IndBox, .d373CityAll{ margin-top: 28px; }
.d373Group + .d373Group{ margin-top: 28px; }
.d373Lines{ display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px 28px; }
.d373Lines a, .d373Lines .isHere{ font-weight: 700; font-size: 16px; }
.d373Lines li > span:last-child{ display: block; margin-top: 2px; font-size: 14.5px; line-height: 1.5; color: var(--m-ink-2); }
.d373Cards{ display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; margin-bottom: 26px; }
.d373Card{ display: block; padding: 16px 18px; border: 1px solid var(--m-line); border-radius: var(--m-r); background: var(--m-surface); text-decoration: none; }
.d373Card b{ display: block; font-size: 16px; color: var(--m-ink); }
.d373Card span{ display: block; margin-top: 4px; font-size: 14.5px; line-height: 1.5; color: var(--m-ink-2); }
.d373Card:hover{ border-color: var(--m-blue); }
.d373Card:focus-visible, .d373Links a:focus-visible, .d373Lines a:focus-visible{ outline: 2px solid var(--m-blue); outline-offset: 2px; }
.d373More{ margin: 16px 0 0; font-weight: 600; }
@media (max-width: 991px){ .d373Cols{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px){
    .d373Cols{ grid-template-columns: 1fr; gap: 20px; }
    .d373Cols .d373Links{ display: flex; flex-wrap: wrap; gap: 6px 18px; }
    .d373Links li{ padding: 2px 0; }
    .d373Lines{ grid-template-columns: 1fr; gap: 12px; }
    .d373Cards{ grid-template-columns: 1fr; gap: 8px; }
    .d373Card{ padding: 12px 14px; }
}
/* D373 spokes (audit 29 Oct): a service page's live industry and city pages; a city x service page's same-city siblings */
.d373Spokes{ margin-top: 28px; display: grid; gap: 18px; }
body.isM3 main > section.d373Also:not(#_){ padding-top: 4px !important; padding-bottom: 24px !important; }
.d373Also .d373H{ margin-bottom: 8px; }
/* Phone UX (user's iPhone check, 29 Oct), (2) logo strip.
   Cause: with Reduce Motion on (iPhone Settings > Accessibility > Motion), Safari reports prefers-reduced-motion: reduce. The
   old still version kept the logo list one row wide (flex: none), so the strip stood frozen with two logos showing. Now:
   moving strip = its own compositor layer (translate3d, will-change, -webkit- names for older iOS); reduced motion = a still
   grid of every logo, in wrapped rows. */
@-webkit-keyframes m3Marq3{ from{ -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to{ -webkit-transform: translate3d(-50%, 0, 0); transform: translate3d(-50%, 0, 0); } }
@keyframes m3Marq3{ from{ -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to{ -webkit-transform: translate3d(-50%, 0, 0); transform: translate3d(-50%, 0, 0); } }
@media (prefers-reduced-motion: no-preference){
    .m3MarqueeTrack{ -webkit-animation-name: m3Marq3; animation-name: m3Marq3; will-change: transform; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
}
@media (prefers-reduced-motion: reduce){
    .m3Marquee .m3MarqueeTrack{ -webkit-animation: none !important; animation: none !important; -webkit-transform: none !important; transform: none !important; width: auto !important; display: block !important; }
    body.isM3 .m3Marquee.m3Marquee .m3MarqueeTrack > .m3LogoList[aria-hidden], body.isM3 .m3Marquee.m3Marquee .m3LogoList > li.isCopy{ display: none !important; }
    body.isM3 .m3Marquee.m3Marquee .m3LogoList:not([aria-hidden]){ display: grid !important; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 16px 12px !important;
        align-items: center; justify-items: center; width: 100%; flex: none; }
    body.isM3 .m3Marquee.m3Marquee .m3LogoList li{ padding: 0 !important; justify-content: center; min-width: 0; }
    body.isM3 .m3Marquee.m3Marquee .m3LogoList img{ height: 44px !important; max-width: 100% !important; width: auto; object-fit: contain; }
    .m3Marquee.m3Marquee{ overflow: visible; -webkit-mask-image: none !important; mask-image: none !important; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 767px){
    body.isM3 .m3Marquee.m3Marquee .m3LogoList:not([aria-hidden]){ grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 10px !important; }
    body.isM3 .m3Marquee.m3Marquee .m3LogoList img{ height: 32px !important; }
}

/* Phone UX (29 Oct), (4) "On this page" on phones: one "Jump to a section" control (a closed <details>), not a screen of
   pills. Wider screens keep the list as it was; the <details> copy is hidden there. Links work without JS. */
.m3TocJump{ display: none; }
@media (max-width: 767px){
    body.isM3 nav.m3TocBox.m3TocBox.m3TocBox:not(#_){ padding-top: 4px !important; padding-bottom: 12px !important; }
    body.isM3 nav.m3TocBox.m3TocBox.m3TocBox > .m3TocBoxT:not(#_), body.isM3 nav.m3TocBox.m3TocBox.m3TocBox > ol:not(#_){ display: none !important; }
    body.isM3 nav.m3TocBox .m3TocJump{ display: block; border: 1px solid var(--m-line); border-radius: 14px; background: #fff; }
    body.isM3 nav.m3TocBox .m3TocJump > summary{ display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 46px; padding: 0 14px;
        list-style: none; cursor: pointer; font: 700 15px/1.3 var(--m-font); color: var(--m-ink); }
    body.isM3 nav.m3TocBox .m3TocJump > summary::-webkit-details-marker{ display: none; }
    body.isM3 nav.m3TocBox .m3TocJump > summary::after{ content: ""; width: 9px; height: 9px; flex: none; margin: -4px 4px 0 0; border: solid var(--m-blue); border-width: 0 2px 2px 0;
        -webkit-transform: rotate(45deg); transform: rotate(45deg); }
    body.isM3 nav.m3TocBox .m3TocJump[open] > summary::after{ margin-top: 4px; -webkit-transform: rotate(-135deg); transform: rotate(-135deg); }
    body.isM3 nav.m3TocBox .m3TocJump > summary:focus-visible{ outline: 2px solid var(--m-blue); outline-offset: 2px; border-radius: 12px; }
    body.isM3 nav.m3TocBox.m3TocBox.m3TocBox .m3TocJump ol:not(#_){ display: block !important; columns: auto !important; margin: 0; padding: 0 14px 6px !important; border: 0 !important;
        border-top: 1px solid var(--m-line) !important; border-radius: 0 !important; background: none; list-style: none; }
    body.isM3 nav.m3TocBox.m3TocBox.m3TocBox .m3TocJump li:not(#_){ display: block; border: 0 !important; padding: 0 !important; margin: 0 !important; }
    body.isM3 nav.m3TocBox.m3TocBox.m3TocBox .m3TocJump li a:not(#_){ display: flex !important; align-items: center; min-height: 44px; padding: 8px 0 !important; border: 0 !important;
        border-bottom: 1px solid var(--m-line) !important; border-radius: 0 !important; font-size: 15px !important; line-height: 1.35 !important; color: var(--m-ink); background: none !important; }
    body.isM3 nav.m3TocBox.m3TocBox.m3TocBox .m3TocJump li:last-child a:not(#_){ border-bottom: 0 !important; }
}

/* =========================================================

/* D377 (Boss 29 Oct, the user: "a bigger section covering sub-services ... directly jump onto the desired page"): the home
   services directory. Four pillar columns on wide screens (heading links the pillar page; label link + one line per row,
   D364 priorities first and bolder); two columns on tablets; stacked on phones. Plus the hero's one facts line. */
.d354HeroFacts{ margin: 14px 0 0; font-weight: 600; font-size: 15px; line-height: 1.5; color: var(--m-ink-2); }
.d354HeroFacts span{ margin: 0 4px; color: var(--m-ink-3); }
.d377Cols{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px 32px; }
body.isM3 .d377H{ margin: 0 0 12px; padding-bottom: 8px; border-bottom: 2px solid var(--m-blue); font-size: 19px !important; font-weight: 800; line-height: 1.25; }
.d377H a{ color: var(--m-ink); text-decoration: none; }
.d377H a:hover{ color: var(--m-blue); text-decoration: underline; }
.d377List{ list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.d377List li{ margin: 0; padding: 0; }
.d377List li::before{ content: none; }
.d377List a, .d377List b{ display: inline; font-weight: 600; font-size: 15.5px; line-height: 1.35; color: var(--m-ink); text-decoration: underline;
    text-decoration-color: var(--m-line); text-underline-offset: 3px; }
.d377List b{ text-decoration: none; }
.d377List a:hover{ color: var(--m-blue); text-decoration-color: currentColor; }
.d377List a:focus-visible, .d377H a:focus-visible{ outline: 2px solid var(--m-blue); outline-offset: 2px; }
.d377List li > span{ display: block; margin-top: 2px; font-size: 14px; line-height: 1.45; color: var(--m-ink-2); }
@media (max-width: 1100px){ .d377Cols{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px){
    .d377Cols{ grid-template-columns: 1fr; gap: 24px; }
    .d377List{ gap: 10px; }
    .d377List a{ display: inline-block; padding: 2px 0; }
    .d377List li > span{ font-size: 13.5px; }
}
/* D377: the old folded boxes inside Start and cost now sit open under their own heading */
.m3FvOpen{ padding-top: 12px; }
body.isM3 .m3FvOpenH{ margin: 0 0 8px; font: 700 18px/1.3 var(--m-font); color: var(--m-ink); }
.d377List .d377All{ margin-top: 2px; }
.d377List .d377All a{ font-weight: 700; color: var(--m-blue); text-decoration: none; }
.d377List .d377All a:hover{ text-decoration: underline; }

/* D381 (the user, 29 Oct: "industry section should look the same across, why 2 style?"): ONE industry block everywhere, a single
   grid of equal tiles. The name is the tile's title; the one small line is the link (the whole tile is the tap area). */
.peIndGrid{ list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.peIndGrid > li{ margin: 0; }
.peIndGrid li::before{ content: none; }
.peIndGrid > li.peIndTile{ position: relative; display: flex; flex-direction: column; gap: 4px; min-height: 76px; padding: 14px 16px; border: 1px solid var(--m-line);
    border-radius: var(--m-r); background: var(--m-surface); }
.peIndTile .peIndName{ font-weight: 700; font-size: 16px; line-height: 1.3; color: var(--m-ink); }
.peIndTile a, .peIndTile span{ font-size: 14px; line-height: 1.4; }
.peIndTile a{ color: var(--m-blue); text-decoration: none; }
.peIndTile a::after{ content: ""; position: absolute; inset: 0; border-radius: inherit; }
.peIndTile:hover{ border-color: var(--m-blue); }
.peIndTile:hover a{ text-decoration: underline; }
.peIndTile a:focus-visible{ outline: none; }
.peIndTile:focus-within{ outline: 2px solid var(--m-blue); outline-offset: 2px; }
.peIndTile.isPlain span:not(.peIndName){ color: var(--m-ink-3); }
@media (max-width: 767px){
    .peIndGrid{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .peIndGrid > li.peIndTile{ min-height: 0; padding: 12px; }
    .peIndTile .peIndName{ font-size: 15px; }
    .peIndTile a, .peIndTile span{ font-size: 13px; }
}
/* D377: a box that used to fold a whole section now sits open; its old summary is the heading */
body.isM3 .peUnfoldH{ margin: 18px 0 8px; font: 700 18px/1.3 var(--m-font); color: var(--m-ink); list-style: none; }
.peUnfolded > .peUnfoldH::after, .peUnfolded > .peUnfoldH::before{ content: none !important; }

/* Design audit (29 Oct, Boss): on phones the header keeps the logo and the menu only (the bottom bar carries call, WhatsApp and
   the plan), and the bottom bar slides in only once the hero has scrolled away. growth.js sets body.peBarWait while the hero
   shows; with no JS the bar simply stays (a lead path never depends on a script). */
@media (max-width: 767px){
    body.isM3 .headerRight .peHeadCall{ display: none !important; }
    body.peBarWait .peBar{ transform: translateY(115%); visibility: hidden; }
    .peBar{ transition: transform .2s ease, visibility .2s; }
}
@media (prefers-reduced-motion: reduce){ .peBar{ transition: none; } }

/* Boss check 29 Oct (4): the hero facts line breaks only between items, never inside one */
.d354HeroFacts .nw{ white-space: nowrap; }

/* Milan B17 (04's spec; Boss CRO item 8): one quiet box inside a guide, at one third of the body. A plain card in the article
   width: no banner, no form, not sticky. Full article width on phones. */
.peB17{ margin: 22px 0; padding: 16px 18px; border: 1px solid var(--m-line); border-left: 3px solid var(--m-blue); border-radius: var(--m-r); background: var(--m-surface); }
.peB17 p{ margin: 0; font-size: 15.5px; line-height: 1.5; }
.peB17 .peB17T{ margin-bottom: 4px; font-weight: 700; color: var(--m-ink); }
.peB17 a{ color: var(--m-blue); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 767px){ .peB17{ margin: 18px 0; padding: 14px; } }

/* ================================================================
   Design audit quick wins (Boss D383, 29 Oct; growth/audits/skills-audit-2026-10-29/design-ux-a11y.md).
   One block, kept last so it wins over the bundle's older rules.
   ================================================================ */
/* (1) a visible keyboard focus ring everywhere (reset.css switches every outline off); mouse clicks stay clean */
:focus-visible{ outline: 2px solid #0b5fd9 !important; outline-offset: 3px; }
:focus:not(:focus-visible){ outline: none !important; }
.peIndTile a:focus-visible, .peStretch .peCardLink:focus-visible{ outline: none !important; }   /* the whole card shows the ring */
body.isM3 .faqQ:focus-visible, .peScroller .peStretch:focus-within{ outline-offset: -3px !important; }   /* inside a clipped box */
body.isM3 .ctaWrap .ctaSide :focus-visible{ outline-color: #fff !important; }   /* on the blue closing panel */
body.isM3 .pgBtn.primary:focus-visible, body.isM3 .ctaBtn.solid:focus-visible, body.isM3 .ftPlanBtn:focus-visible, body.isM3 .peHookBtn:focus-visible,
body.isM3 .menuCta:focus-visible, body.isM3 .peNudgeBtn.solid:focus-visible, .peBarBtn.isCta:focus-visible,
body.isM3 .ctaWrap.m3Close2 form.m3CtaForm button[type="submit"]:focus-visible{ outline-color: #fff !important; outline-offset: -5px !important; }
body.isM3 .ctaWrap .ctaSide .ctaBtn.solid:focus-visible{ outline-offset: 3px !important; }   /* the white button on the blue panel */

/* (4) one look per control: carousel arrows, "Show all / Show more" buttons, FAQ bars */
body.isM3 .m3QArrows button, body.isM3 .peScrollBtns button{ width: 44px; height: 44px; padding: 0; border-radius: 50%; border: 1px solid var(--m-line);
    background: #fff; color: var(--m-ink); font-size: 20px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
body.isM3 .m3QArrows button:disabled, body.isM3 .peScrollBtns button:disabled{ opacity: .35; cursor: default; }
body.isM3 .peMoreBtn, body.isM3 .m3ShowMore, body.isM3 .faqShowAll{ display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 18px;
    border: 1.5px solid var(--m-line); border-radius: 999px; background: #fff; font: 700 15px/1.2 var(--m-font); letter-spacing: 0; color: var(--m-blue); cursor: pointer; }
body.isM3 .peMoreBtn::after{ color: inherit; font-size: 18px; }
body.isM3 .faqQ{ background: transparent !important; border: 0 !important; border-radius: 0 !important; }   /* no grey browser-button fill */
body.isM3 .faqQ[aria-expanded="true"] span{ color: var(--m-blue); }   /* 5.8:1 (the old #0075ff was 4.2:1) */

/* (4) phone bottom bar: one text size and weight; the plan button stands out by colour only */
@media (max-width: 767px){
    .peBar .peBarBtn, .peBar .peBarBtn.isCta{ font-size: clamp(14px, 4.2vw, 16px) !important; font-weight: 700 !important; }
}

/* (5) compact cookie banner on phones: same words, same three equal buttons in one row (D125) */
@media (max-width: 575px){
    .peConsent{ left: 8px; right: 8px; bottom: 84px; padding: 8px 10px; border-radius: 14px; font: 500 11px/1.3 var(--m-font); }   /* ~150 px tall at 375 */
    .peConsent p, body.isM3 .peConsent p{ margin: 0 0 5px !important; font-size: 12px !important; line-height: 1.32 !important; }   /* the site's p size (17 px) won otherwise */
    body.isM3 .peConsent p a{ font-size: inherit !important; line-height: inherit !important; }   /* the global a{16px} rule */
    /* D386 A3 (Boss 29 Oct): while the hero shows (phone bar hidden) the banner sits on the bottom edge; consent.js moves it to
       the top (.peConsentTop) if the hero's first button would still be under it; after the hero it is back above the bar */
    body.peBarWait .peConsent{ bottom: calc(8px + env(safe-area-inset-bottom, 0px)); }
    body.peBarWait .peConsent.peConsentTop{ top: 8px; bottom: auto; }
    .peConsentBtns{ grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
    .peConsentBtns button{ min-height: 44px; padding: 4px 6px; font-size: 12.5px; line-height: 1.15; }
}

/* (6) phone footer folds: the toggle is a real button inside the heading (lighter.js); same look as before */
.ftSiteTitle.ftFoldH{ margin: 0; padding: 0; border-bottom: 1px solid rgb(255 255 255 / 10%); }
.ftFoldBtn{ display: flex; justify-content: space-between; align-items: center; width: 100%; min-height: 48px; padding: 12px 0; margin: 0; border: 0;
    background: none; font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; text-align: left; cursor: pointer; }
.ftFoldBtn::after{ content: "+"; color: var(--blue, var(--m-blue, #0b5fd9)); font-size: 20px; line-height: 1; }
.ftFoldBtn[aria-expanded="true"]::after{ content: "\2212"; }

/* (7) tap targets of 44 px on phones: more padding, same text size */
@media (max-width: 767px){
    body.isM3 .peTable td a, body.isM3 .peTable th a, body.isM3 .pgRows a, body.isM3 .d373IndHub .d373Links a{ display: inline-flex; align-items: center; min-height: 44px; }
    body.isM3 .m3XSrc a, body.isM3 .m3QuickNote a, form a[href*="privacy-policy"], form a[href*="terms"]{ display: inline-block; padding: 12px 4px; margin: -12px -4px; }
    body.isM3 .ftSiteCol li{ margin-bottom: 0 !important; }
    body.isM3 .ftSiteCol li > a, body.isM3 .ftCityGroup li > a{ display: flex; align-items: center; min-height: 44px; }
    body.isM3 .ftGroup a, body.isM3 .ftGroupNo, body.isM3 footer .ftLegal a{ display: inline-flex; align-items: center; min-height: 44px; }
}

/* (8) footer group strip: AA contrast on #f5f7fb (was 3.57:1 through opacity): label 7.5:1, link notes 6.3:1 */
body.isM3 .ftGroupT, body.isM3 .ftGroup a span, body.isM3 .ftGroupNo > span{ opacity: 1; }
body.isM3 .ftGroupT{ color: #46506a; }
body.isM3 .ftGroup a span, body.isM3 .ftGroupNo > span{ color: #545c6e; }

/* (10) desktop menu: Insights and About open on hover or ArrowDown (growth.js), not on keyboard focus alone, so Tab moves on
   to the next top item; Services and Industries already open only from their button (D369) */
html.hxJs body.isM3 .hxNav li.hasSub:not(:hover):not(.isOpen) > .subMenu{ opacity: 0 !important; visibility: hidden !important; }
html.hxJs body.isM3 .hxNav li.hasSub.isOpen > .subMenu{ opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; }
html.hxJs body.isM3 .hxNav li.hasSub.isOpen > .subMenu li{ opacity: 1 !important; transform: none !important; }