/* =====================================================================================
   Brand Elite - AI DIGITAL MARKETING SERVICES (ai-digital-marketing-services-in-bangalore/index.php). LOCKED 28 Sep 2026.
   Loaded after css/about.css (the inner-page base: sections, heading block, cards, orbit, hero, process, logos)
   and css/system.css (tokens, the Home form and Home FAQ). Breakpoints 1180 / 900 / 600 / 430 (DESIGN.md 5d).
   1 Hero - 2 What is AI DM - 3 Services - 4 Package band + proof strip - 5 Process (about.css) - 6 Tools
   - 7 Why us - 8 Industries - 9 Home form - 10 Home FAQ
   ===================================================================================== */

.sv-ic{width:22px;height:22px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sv-page .ab-dark :focus-visible{outline-color:#f78913}
.sv-page .ab-light :focus-visible,.sv-page .ab-light2 :focus-visible{outline-color:var(--navy)}

/* shared: orange "Explore" text link at the foot of a card + tick list */
.sv-more{display:inline-flex;align-items:center;gap:8px;margin-top:auto;padding-top:20px;font-size:var(--fs-body);font-weight:600;color:#c2410c}
.sv-more .sv-ic{width:18px;height:18px;transition:translate .45s var(--ease)}
.sv-ticks{list-style:none;margin:16px 0 0;padding:14px 0 0;border-top:1px dashed rgba(16,25,40,.14);display:flex;flex-direction:column;gap:8px}
.sv-ticks li{display:flex;align-items:flex-start;gap:10px;font-size:var(--fs-body);line-height:1.45;color:var(--text-body)}
.sv-ticks .sv-ic{width:18px;height:18px;margin-top:2px;color:var(--orange)}

/* ---------- 1. HERO orbit: 5 boxes, the shared policies / Contact look (.o3-five + .o3-ic in css/about.css, sv_orbit_boxes()) ---------- */

/* ---------- 2. WHAT IS AI DIGITAL MARKETING: SEO text left, "How we use AI" card right ---------- */
.aidm-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(32px,4.4vw,80px);align-items:start}
@media (max-width:1179.98px){.aidm-grid{grid-template-columns:1fr}}
.aidm-copy{max-width:46em}
.ab .aidm-copy h3{margin-top:clamp(28px,3vw,40px)}
.ab .aidm-copy h3+p{margin-top:12px}
.aidm-card h3{margin:0}
.aidm-card ul{list-style:none;margin:24px 0 0;padding:0;display:flex;flex-direction:column;gap:20px}
.aidm-card li{display:flex;align-items:flex-start;gap:16px}
.aidm-card .ab-ic{width:48px;height:48px;border-radius:14px;color:#e0580b}
.aidm-card .ab-ic .sv-ic{width:24px;height:24px}
.ab .aidm-card h4{margin:2px 0 0;font-size:var(--fs-body);font-weight:700;line-height:1.35;color:var(--navy)}
.ab .aidm-card li p{margin-top:4px}
@media (hover:hover){.aidm-card:hover{transform:none}}   /* a reading card, not a link: no lift */

/* ---------- 3. SERVICES (navy, like the Home Services section): 3 goal rows of picture cards ---------- */
.sv-groups{display:flex;flex-direction:column;gap:clamp(40px,5vw,72px)}
.sv-grp-hd{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 16px;margin-bottom:24px}
.sv-num{font-size:var(--fs-label);font-weight:700;letter-spacing:.12em;color:#c2410c}
.ab .sv-grp-hd p{flex-basis:100%;max-width:44em}
@media (min-width:900px){.ab .sv-grp-hd p{flex-basis:auto}.sv-grp-hd{border-bottom:1px solid rgba(16,25,40,.1);padding-bottom:14px}}
.sv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2vw,28px)}
@media (max-width:1179.98px){.sv-grid{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.sv-grid{grid-template-columns:1fr}}
.sv-card{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid rgba(16,25,40,.06);border-radius:26px;overflow:hidden;box-shadow:0 26px 44px -18px rgba(30,64,130,.28),0 4px 10px rgba(30,64,130,.06);transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.sv-im{aspect-ratio:380/178;overflow:hidden;background:#dfe7f2}
.sv-im img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.sv-body{position:relative;display:flex;flex-direction:column;flex:1;padding:34px clamp(20px,2vw,28px) 26px}
.sv-badge{position:absolute;top:-26px;left:clamp(20px,2vw,28px);width:52px;height:52px;border-radius:16px;display:flex;align-items:center;justify-content:center;background:var(--grad);color:#fff;box-shadow:0 12px 24px -8px rgba(244,106,16,.6)}
.sv-badge .sv-ic{width:24px;height:24px}
.ab .sv-card h4{margin:0;font-size:var(--fs-h3);font-weight:700;line-height:1.3;color:var(--navy)}
.sv-card h4 a{color:inherit}
.sv-card h4 a::after{content:"";position:absolute;inset:0;z-index:2}   /* whole card clickable */
.sv-card h4 a:focus-visible{outline:none}
.sv-card:focus-within{outline:2px solid var(--navy);outline-offset:3px}
.ab .sv-card p{margin-top:8px}
.ab-dark .sv-grp-hd{border-bottom-color:rgba(232,240,252,.14)}
.ab-dark .sv-num{color:#f78913}
.ab-dark .sv-card p{color:var(--text-body)}
.ab-dark .sv-card:focus-within{outline-color:#f78913}
@media (hover:hover){
  .sv-card:hover{transform:translateY(-6px);box-shadow:0 36px 56px -20px rgba(30,64,130,.34),0 4px 10px rgba(30,64,130,.06)}
  .sv-card:hover .sv-im img{transform:scale(1.025)}
  .sv-card:hover .sv-more .sv-ic{translate:4px 0}
}

/* ---------- 4. FULL PACKAGE BAND (navy space card) + PROOF STRIP (white card) ---------- */
.sv-pack{position:relative;overflow:hidden;border-radius:30px;padding:clamp(28px,4vw,64px);box-shadow:0 36px 60px -24px rgba(16,25,40,.55)}
.sv-pack-in{position:relative;z-index:2;display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(28px,4vw,72px);align-items:center}
@media (max-width:1179.98px){.sv-pack-in{grid-template-columns:1fr}}
.ab .sv-pack-chip{display:inline-flex;align-items:center;gap:10px;margin:0 0 20px;padding:8px 16px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(232,240,252,.14);font-size:var(--fs-label);font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#fff}
.sv-pack-chip .dot{width:8px;height:8px;border-radius:50%;background:#1fae6b;box-shadow:0 0 0 4px rgba(31,174,107,.25)}
.sv-pack-ticks{list-style:none;margin:24px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:14px 28px}
@media (max-width:600px){.sv-pack-ticks{grid-template-columns:1fr}}
.sv-pack-ticks li{display:flex;align-items:flex-start;gap:10px;font-size:var(--fs-body);line-height:1.45;color:var(--text-on-dark)}
.sv-pack-ticks .sv-ic{width:20px;height:20px;margin-top:1px;color:#f78913}
.sv-pack .hero-cta{margin-top:32px}
.sv-pack-orbit{width:min(100%,380px)}
.sv-pack-orbit .sv-dot{position:absolute;z-index:3;translate:-50% -50%;width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--grad);color:#fff;box-shadow:0 0 0 5px rgba(244,106,16,.14)}
.sv-pack-orbit .sv-dot .sv-ic{width:18px;height:18px}
@media (max-width:1179.98px){.sv-pack-orbit{width:min(calc(100% - 40px),320px);margin-top:12px}}
@media (max-width:600px){.sv-pack-orbit .bp{display:none}}

.sv-packsec .sv-proof{margin-top:clamp(40px,4.4vw,72px)}
.sv-proof{background:#fff;border:1px solid rgba(16,25,40,.06);border-radius:28px;box-shadow:0 26px 44px -18px rgba(30,64,130,.28),0 4px 10px rgba(30,64,130,.06);overflow:hidden}
.sv-stats{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr)}
.sv-stats li{display:flex;flex-direction:column;justify-content:center;gap:6px;padding:clamp(20px,2.4vw,32px) clamp(18px,2vw,32px)}
.sv-stats li+li{border-left:1px solid rgba(16,25,40,.08)}
.sv-stats b{font-size:var(--fs-h2);font-weight:700;line-height:1;letter-spacing:-.02em;color:var(--navy)}
.sv-stats li>span{font-size:var(--fs-label);font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--text-body)}
.sv-stats .sv-g{flex-direction:row;align-items:center;gap:14px}
.sv-stats .sv-g>span:last-child{display:flex;flex-direction:column;gap:6px;text-transform:none;letter-spacing:0}
.sv-stats .g-disc{flex:none;width:52px;height:52px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 1px rgba(16,25,40,.1)}
.sv-stats .g-disc .rv-g{width:28px;height:28px}
@media (max-width:1179.98px){.sv-stats{grid-template-columns:1fr 1fr}.sv-stats li:nth-child(3){border-left:0}.sv-stats li:nth-child(n+3){border-top:1px solid rgba(16,25,40,.08)}}
.sv-proof-logos{border-top:1px solid rgba(16,25,40,.08);padding:18px 0 4px;background:#f8fafd}
.ab .sv-proof-k{margin:0 0 6px;text-align:center;font-size:var(--fs-label);font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--text-body)}
.sv-proof .lg-tile{width:clamp(140px,11vw,180px);height:clamp(70px,5.6vw,88px);box-shadow:none}

/* ---------- 5. PROCESS: the About process layout (.b-procw, css/about.css), no extra rules ---------- */

/* ---------- 6. TOOLS: five white group cards, each with logo tiles (logo + name) ---------- */
.sv-tools-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(14px,1.6vw,22px);align-items:start}
@media (max-width:1179.98px){.sv-tools-grid{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.sv-tools-grid{grid-template-columns:1fr}}
.sv-tool-grp{background:#fff;border:1px solid rgba(16,25,40,.06);border-radius:22px;padding:20px;box-shadow:0 18px 34px -20px rgba(30,64,130,.3)}
.ab .sv-tool-grp h3{margin:0 0 14px;font-size:var(--fs-label);font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#c2410c}
.sv-tool-grp ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.sv-tool-grp li{display:flex;align-items:center;gap:12px;min-height:56px;padding:8px 12px;border-radius:14px;background:#f8fafd;border:1px solid #e1e7f0}
.sv-tool-grp img{flex:none;width:72px;height:32px;object-fit:contain;object-position:left center}
.sv-tool-grp li span{font-size:var(--fs-label);font-weight:600;line-height:1.3;color:var(--navy)}

/* ---------- 7. WHY US: six glass cards on navy, 3 x 2 (2 x 3 below 1180, 1 column on phones) ---------- */
.sv-why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,1.8vw,24px)}
@media (max-width:1179.98px){.sv-why-grid{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.sv-why-grid{grid-template-columns:1fr}}
.sv-why-card{padding:clamp(22px,2vw,30px);border-radius:24px}
.sv-why-card .top{display:flex;align-items:center;justify-content:space-between}
.sv-why-card .n{font-size:var(--fs-label);font-weight:700;letter-spacing:.12em;color:#f78913}
.ab .sv-why-card h3{margin-top:20px}
.ab .sv-why-card p{margin-top:8px}
/* exactly the process cards' hover (.ab-card:hover in css/about.css): lift 6px + the same shadow, eased over .4s (Lohith, 29 Sep 2026).
   The card is also a scroll reveal (.ab-rv), whose transition would replace this one, so both are listed here:
   the reveal keeps its stagger delay, the hover reacts at once. */
.sv-why-card,.js .sv-why-card.ab-rv{transition:opacity .9s var(--ease) calc(var(--i,0) * 90ms),translate .9s var(--ease) calc(var(--i,0) * 90ms),transform .4s var(--ease),box-shadow .4s var(--ease)}
@media (hover:hover){.sv-why-card:hover{transform:translateY(-6px);box-shadow:0 36px 56px -20px rgba(30,64,130,.34),0 4px 10px rgba(30,64,130,.06)}}
@media (prefers-reduced-motion:reduce){.sv-why-card,.js .sv-why-card.ab-rv{transition:none}.sv-why-card:hover{transform:none}}

/* ---------- 8. AI DIGITAL MARKETING FOR YOUR INDUSTRY (option 1 "Photo Cards", locked 28 Sep 2026): 4 x 2 cards, no results ---------- */
.aidm-ind1{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,1.8vw,24px)}
@media (max-width:1179.98px){.aidm-ind1{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.aidm-ind1{grid-template-columns:1fr}}
.aidm-ind1-card{display:flex;flex-direction:column;background:#fff;border:1px solid rgba(16,25,40,.06);border-radius:24px;overflow:hidden;box-shadow:0 26px 44px -18px rgba(30,64,130,.28),0 4px 10px rgba(30,64,130,.06);transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
/* photos are portrait crops: shown square on every screen (wider shapes cut the jewellery and hospital photos badly);
   each photo has its own focus point (object-position, set inline from $aidm_ind), checked with a crop simulation */
.aidm-ind1-ph{aspect-ratio:20/17;overflow:hidden;background:#dfe7f2}   /* 15% lower than square (Lohith, 28 Sep 2026) */
.aidm-ind1-ph img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.aidm-ind1-body{position:relative;display:flex;flex-direction:column;flex:1;padding:34px clamp(18px,1.6vw,24px) 22px}
.aidm-ind1-body .sv-badge{left:clamp(18px,1.6vw,24px)}
.ab .aidm-ind1-body h3{font-size:var(--fs-h3);line-height:1.3}
.ab .aidm-ind1-body p{margin-top:8px}
/* ---------- CLICKABLE-CARD STANDARD (DESIGN.md "Clickable cards", Lohith 29 Sep 2026): service/type cards (.sv-card) and
   industry cards (.aidm-ind1-card) behave the same, like the Home service cards (.cb in css/system.css):
   1 the whole card opens its page (the title link is stretched over the card; the photo links too),
   2 hovering anywhere on the card: lift 6px + shadow, photo zoom, title turns dark orange #c2410c,
   3 keyboard: a ring round the whole card, 4 reduced motion: no lift or zoom, the colour change stays. ---------- */
.sv-card h4 a,.aidm-ind1-body h3 a{color:inherit;text-decoration:none;transition:color .3s var(--ease)}
@media (hover:hover){.sv-card:hover h4 a,.aidm-ind1-card:hover h3 a{color:#c2410c}}
.aidm-ind1-body h3 a::after{content:"";position:absolute;inset:0;z-index:2}   /* the card body opens the industry page */
.aidm-ind1-cta{position:relative;z-index:3}                                     /* the button stays on top and keeps its own focus style */
a.aidm-ind1-ph,a.sv-im{display:block}                                           /* the photo is a link to the same page */
.aidm-ind1-body h3 a:focus-visible{outline:none}
.aidm-ind1-card:focus-within{outline:2px solid var(--navy);outline-offset:3px}   /* same rule as .sv-card:focus-within */
@media (prefers-reduced-motion:reduce){.sv-card:hover,.aidm-ind1-card:hover{transform:none}.sv-card:hover .sv-im img,.sv-card:hover .wd-mock,.aidm-ind1-card:hover .aidm-ind1-ph img{transform:none}}
.aidm-ind1-cta{margin-top:auto;padding-top:18px}
.aidm-ind1-cta .ab-btn2{width:100%}
.aidm-ind1-more{align-items:flex-start;justify-content:center;padding:clamp(24px,2.4vw,34px);background:#fff4ec;border-color:rgba(244,106,16,.28)}
.ab .aidm-ind1-more h3{font-size:var(--fs-h3);text-transform:uppercase;letter-spacing:.02em}
.ab .aidm-ind1-more p{margin-top:8px}
.aidm-ind1-more .hero-cta{margin-top:20px}
@media (hover:hover){.aidm-ind1-card:hover{transform:translateY(-6px)}.aidm-ind1-card:hover .aidm-ind1-ph img{transform:scale(1.025)}}
/* "many more" card background (like Lohith's reference image): a light dotted world map, orange dot cluster top-left,
   a small target top-right, a small ring bottom-left and a halftone corner bottom-right; content sits above */
.aidm-ind1-more{position:relative;overflow:hidden;isolation:isolate}
.aidm-ind1-more>h3,.aidm-ind1-more>p,.aidm-ind1-more>.hero-cta,.aidm-ind1-more>.aidm-globe{position:relative;z-index:1}
.aidm-more-map{position:absolute;left:-4%;top:30%;width:108%;height:auto;aspect-ratio:2/1;z-index:0;opacity:.22;pointer-events:none}
.aidm-more-map path{fill:none;stroke:#f46a10;stroke-width:.55;stroke-linecap:round}
.aidm-more-fx i{position:absolute;z-index:0;pointer-events:none}
.aidm-more-fx .dots{left:16px;top:16px;width:22px;height:22px;background:radial-gradient(circle,#f46a10 1.6px,transparent 2.2px) 0 0/8px 8px;opacity:.7}
.aidm-more-fx .target{right:18px;top:18px;width:16px;height:16px;border-radius:50%;border:2px solid rgba(244,106,16,.7);background:radial-gradient(circle,rgba(244,106,16,.8) 2px,transparent 2.5px)}
.aidm-more-fx .ring{left:22px;bottom:22px;width:12px;height:12px;border-radius:50%;border:2px solid rgba(244,106,16,.6)}
.aidm-more-fx .half{right:0;bottom:0;width:150px;height:120px;background:radial-gradient(circle,#f46a10 1.7px,transparent 2.2px) 0 0/10px 10px;-webkit-mask-image:radial-gradient(circle at 100% 100%,#000 0%,transparent 72%);mask-image:radial-gradient(circle at 100% 100%,#000 0%,transparent 72%);opacity:.55}
/* the globe: orange disc inside a dashed orbit with two small x marks, "play button" pulse rings */
.aidm-globe{flex:none;width:96px;aspect-ratio:1;margin:30px 0 42px 30px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--grad);color:#fff;box-shadow:0 0 0 10px rgba(244,106,16,.1),0 20px 40px -12px rgba(244,106,16,.55)}
/* very light pulse (Lohith: subtle, smooth): thin faint rings, slow, spreading only a little.
   js/system.js plays endless loops at 2.5x, so 12.5s here = one calm 5s pulse on screen (delay 6.25s = 2.5s) */
.aidm-globe::before,.aidm-globe::after{content:"";position:absolute;inset:0;border-radius:50%;border:1.5px solid rgba(244,106,16,.3);opacity:0;animation:aidmpulse 12.5s cubic-bezier(.22,.61,.36,1) infinite}
.aidm-globe::after{animation-delay:6.25s}
@keyframes aidmpulse{0%{transform:scale(1);opacity:0}15%{opacity:.8}100%{transform:scale(1.4);opacity:0}}
.aidm-globe .orb{position:absolute;inset:-24px;border-radius:50%;border:1.5px dashed rgba(244,106,16,.45)}
.aidm-globe .orb b{position:absolute;width:10px;height:10px}
.aidm-globe .orb b::before,.aidm-globe .orb b::after{content:"";position:absolute;left:4px;top:-1px;width:2px;height:12px;border-radius:1px;background:#f46a10;transform:rotate(45deg)}
.aidm-globe .orb b::after{transform:rotate(-45deg)}
.aidm-globe .orb .x1{right:6px;top:10px}
.aidm-globe .orb .x2{right:-2px;bottom:22px}
.aidm-globe>.sv-ic{position:relative;width:54%;height:54%;stroke-width:1.6}
@media (prefers-reduced-motion:reduce){.aidm-globe::before,.aidm-globe::after{animation:none;opacity:0}}


/* ---------- 9. FORM: the Home form section exactly (Home spacing, no short-screen shrinking) + reply promise and 3 steps on the left ---------- */
.aidm-promise{display:inline-flex;align-items:center;flex-wrap:wrap;gap:10px;margin:28px 0 0;padding:10px 18px;border-radius:999px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.32);font-size:var(--fs-body);color:#fff}
.aidm-promise b{font-weight:700}
.aidm-promise .dot{position:relative;width:9px;height:9px;border-radius:50%;background:#1fae6b;box-shadow:0 0 0 2px #fff}
.aidm-promise .dot::after{content:"";position:absolute;inset:0;border-radius:50%;background:#1fae6b;animation:livedot 2s ease-out infinite}
.aidm-flow{list-style:none;margin:32px 0 0;padding:0;display:flex;flex-direction:column;gap:22px;max-width:34em}
.aidm-flow li{display:flex;gap:16px;align-items:flex-start}
.aidm-flow .n{flex:none;width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#fff;color:#c2410c;font-weight:700;font-size:var(--fs-h3);box-shadow:0 10px 20px -8px rgba(60,20,4,.5)}
.ctafc .aidm-flow h3{margin:4px 0 0;font-size:var(--fs-h3);font-weight:600;letter-spacing:0;line-height:1.3;color:#fff}
.ctafc .aidm-flow p{margin:4px 0 0;font-size:var(--fs-body);line-height:1.55;color:rgba(255,244,232,.92)}
/* the Earth sits bottom-right behind the card, exactly like the Contact page (.ct-earth) */
.aidm-earth{position:absolute;right:-150px;bottom:-170px;width:460px;height:460px;object-fit:contain;pointer-events:none;filter:brightness(.8) saturate(.92);opacity:.9;animation:ctafcearthspin 90s linear infinite}
@media (max-width:1023.98px){.aidm-earth{width:240px;height:240px;right:-80px;bottom:-80px}}
@media (prefers-reduced-motion:reduce){.aidm-promise .dot::after,.aidm-earth{animation:none}}


/* ---------- 10. FAQ: the Home FAQ section (css/sections-extra.css + css/system.css), no extra rules ---------- */

/* ---------- 11. BY INDUSTRY + IN BANGALORE: dark block that reads as the top of the footer (mirrors the footer's space gradient), divider below ---------- */
.aidm-pre{position:relative;background:radial-gradient(130% 110% at 50% 100%,#132a57 0%,#0b1a3d 48%,#050a18 100%);color:var(--text-on-dark)}
.aidm-pre::after{content:"";position:absolute;left:var(--pad);right:var(--pad);bottom:0;border-top:1px solid rgba(232,240,252,.16)}
.aidm-pre-in{padding:var(--space-section) var(--pad) clamp(40px,5vw,64px);display:flex;flex-direction:column;gap:clamp(36px,4vw,56px)}
.aidm-pre-h{margin:0 0 20px;font-size:var(--fs-label);font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:rgba(232,240,252,.72)}
.aidm-pre-list{list-style:none;margin:0;padding:0;font-size:var(--fs-label);line-height:1.9;color:var(--text-on-dark-muted)}
.aidm-pre-list li{display:inline}
.aidm-pre-list li+li::before{content:"\00b7";margin:0 8px;font-weight:700;color:rgba(247,137,19,.85)}
.aidm-pre-list a{color:var(--text-on-dark-muted);text-decoration:none;transition:color .25s}
@media (hover:hover){.aidm-pre-list a:hover{color:#f78913}}
.aidm-pre-list a:focus-visible{outline:2px solid #f78913;outline-offset:2px;border-radius:4px}
/* closed lists show exactly 3 lines on every service page, whatever the length of the service name (Lohith, 29 Sep 2026);
   every link stays in the page (Google reads them) and "Show all" opens the rest. A link hidden below the cut opens the list when it gets keyboard focus. */
.aidm-pre-list:not(.open){display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden;max-height:calc(3 * 1.7em)}
.aidm-pre-more{display:inline-flex;align-items:center;gap:6px;min-height:44px;margin-top:6px;padding:0;border:0;background:none;font:inherit;font-size:var(--fs-label);font-weight:600;color:#f78913;cursor:pointer}
.aidm-pre-more svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .35s var(--ease)}
.aidm-pre-more[aria-expanded="true"] svg{transform:rotate(180deg)}
@media (hover:hover){.aidm-pre-more:hover span{text-decoration:underline;text-underline-offset:3px}}
.aidm-pre-more:focus-visible{outline:2px solid #f78913;outline-offset:2px;border-radius:4px}
/* phones: headings, links and the Show all button centred (Lohith, 28 Sep 2026, every page with this block) */
@media (max-width:600px){.aidm-pre-blk{text-align:center}.aidm-pre-more{justify-content:center}}

/* proof strip: every stat gets a round icon badge, like the Google G (Lohith, 28 Sep 2026) */
.sv-stats .sv-sti{background:linear-gradient(140deg,#fff2e6,#ffe1c7);box-shadow:none;color:#e0580b}
.sv-stats .sv-sti .sv-ic{width:26px;height:26px}
/* phones: 2 stats per row (Lohith); the icon sits above the number so each half fits a 160px column */
@media (max-width:600px){
  .sv-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sv-stats li{padding:20px 10px}
  .sv-stats .sv-g{flex-direction:column;align-items:center;text-align:center;gap:10px}
  .sv-stats .sv-g>span:last-child{align-items:center}
  .sv-stats .g-disc{width:46px;height:46px}
}
/* phones: the hero is centred by the shared rule in css/about.css (every inner page) */
.sv-stats small{display:block;font-size:var(--fs-label);font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--text-body)}

/* ---------- 2 (v2, 28 Sep 2026). WHAT IS AI DIGITAL MARKETING: one screen from 900px; text + AI/people line left, 8 cards 2 x 4 right ---------- */
@media (min-width:900px){.aidm-sec{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding-top:clamp(24px,5vh,72px);padding-bottom:clamp(24px,5vh,72px)}
  .aidm-sec .ab-h2{font-size:min(var(--fs-h2),6.4vh)}}
.ab .aidm-intro{margin-top:var(--gap-rule-lead)}
.ab-hd+.aidm-intro{margin-top:clamp(16px,3vh,32px)}
.aidm1-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,4.4vw,80px);align-items:center}
@media (max-width:1179.98px){.aidm1-grid{grid-template-columns:1fr}}
.aidm1-tiles{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,1.6vw,24px)}
@media (max-width:600px){.aidm1-tiles{grid-template-columns:1fr}}
.aidm1-tiles li{display:flex;align-items:flex-start;gap:14px;padding:clamp(14px,2.2vh,22px) clamp(16px,1.4vw,22px);background:#fff;border:1px solid rgba(16,25,40,.06);border-radius:22px;box-shadow:0 18px 34px -20px rgba(30,64,130,.3);transition:transform .4s var(--ease)}
.aidm1-tiles .ab-ic{width:48px;height:48px;border-radius:14px;color:#e0580b}
.aidm1-tiles .ab-ic .sv-ic{width:24px;height:24px}
.ab .aidm1-tiles h3{font-size:var(--fs-h3)}
.ab .aidm1-tiles p{margin-top:4px}
@media (hover:hover){.aidm1-tiles li:hover{transform:translateY(-5px)}}
/* the AI + people line: two round badges joined by a dashed orange line (class names prefixed: .team belongs to Home) */
.aidm-duo{position:relative;display:flex;flex-direction:column;gap:clamp(10px,1.8vh,16px);margin-top:clamp(16px,3vh,28px)}
.aidm-duo::before{content:"";position:absolute;left:21px;top:22px;bottom:22px;border-left:2px dashed rgba(244,106,16,.5)}
.ab .aidm-duo p{position:relative;display:flex;align-items:center;gap:16px;margin:0;font-size:var(--fs-lead);font-weight:600;line-height:1.3;color:var(--navy)}
.aidm-duo .ic{position:relative;z-index:1;flex:none;width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;box-shadow:0 0 0 6px #eaf1fa}
.aidm-duo .ic.duo-ai{background:var(--navy)}.aidm-duo .ic.duo-team{background:var(--grad)}
.aidm-duo .ai-ic,.aidm-duo .sv-ic{width:22px;height:22px;stroke:#fff}
/* drawn service-card pictures on the hub's industry + area pages (same rules as css/wd.css, 17 Oct 2026) */
.wd-mock{display:block;width:100%;height:100%;transition:transform 1.2s var(--ease)}
@media (hover:hover){.sv-card:hover .wd-mock{transform:scale(1.025)}}
@media (prefers-reduced-motion:reduce){.sv-card:hover .wd-mock{transform:none}}

/* area links: a 24px tap target without moving the text (inline padding; pre-launch audit, 18 Oct 2026) */
.aidm-pre-list a{padding:4px 0}