/* Services hub (/digital-marketing-services/, page-templates/tpl-services-hub-v2.php, root .sv2.dmh): hub-only sections of
   the 2026-09-29 reorganize. Loads after the shared kit (services-hub-v2.css) and cs-fan.css (inc/services-hub-v2.php
   ss_sv2_sheets('hub')); the part above "==== below the fold ====" is inlined in <head>. Everything scoped to .dmh.
   Hero = the industry-page hero as built on /organic-seo/ai-search-optimization/ (.ais-*): top strip, eyebrow, H1 with
   gold phrase, proof chips, gold CTA, case fan (template-parts/cs-fan.php), then the real rankings row (.sv2-awards, the
   /organic-seo/ strip). Reviews rail = the /organic-seo/ rail (template-parts/seo-v2-reviews.php, #dm-reviews).
   Rhythm: every band .sv2-sec (104 / 68); the reviews rail keeps the house tight spacing. Motion: hovers <= 150 ms. */

/* ---------- hero ---------- */
.dmh-top{border-bottom:1px solid rgba(255,255,255,.08);background:rgba(var(--ss-navy-deep-rgb),.55)}
.dmh-top p{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 12px;margin:0;padding:9px 0;font-size:13px;line-height:1.45;color:var(--ss-on-navy);text-align:center}
.dmh-top strong{color:var(--ss-gold);font-weight:700}
.dmh-top i{font-style:normal;opacity:.45}
.dmh-top span{white-space:nowrap}
.dmh-hero__in{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:56px;align-items:center;padding-block:52px 64px}
.dmh-hero__in--solo{grid-template-columns:minmax(0,1fr)}
.dmh-hero__copy{display:grid;justify-items:start;min-width:0}
.dmh-hero .ss-eyebrow{margin:0}
.dmh-hero h1{margin:18px 0 16px}
.dmh-hero .sv2-promise{margin:0 0 10px}
.dmh-tagline{max-width:34em;font-size:18px;line-height:1.55;color:var(--ss-on-navy)}
.dmh-proof{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;width:100%;max-width:640px;margin-top:26px}
.dmh-proof li{display:grid;align-content:start;gap:5px;min-width:0;padding:14px 16px;border:1px solid rgba(255,255,255,.12);border-radius:16px;background:rgba(255,255,255,.04)}
.dmh-proof b{display:flex;align-items:center;gap:4px;font-size:26px;font-weight:700;line-height:1.05;letter-spacing:-.02em;color:var(--ss-gold);white-space:nowrap;font-variant-numeric:tabular-nums}
.dmh-star{font-size:.72em;line-height:1}
.dmh-proof span{font-size:13px;line-height:1.35;color:var(--ss-on-navy)}
.dmh-hero .sv2-ctas{margin-top:28px}
.dmh-hero__vis{display:flex;justify-content:center;min-width:0}
/* rankings row (the /organic-seo/ awards strip) */
.dmh .sv2-awards{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px 26px;padding-block:26px}
.dmh .sv2-awards li,.dmh .sv2-awards a{display:flex;gap:12px;align-items:center;min-width:0}
.dmh .sv2-awards img{height:64px;width:58px;object-fit:contain;flex:none}
.dmh .sv2-awards span{font-size:13px;line-height:1.35;color:var(--on-navy)}
.dmh .sv2-awards b{display:block;color:#fff;font-size:14px}
@media (max-width:1100px){.dmh-proof b{font-size:22px}.dmh .sv2-awards{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:1000px){.dmh-hero__in{grid-template-columns:minmax(0,1fr);gap:40px;padding-block:40px 56px}}
@media (max-width:620px){.dmh .sv2-awards{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 14px}.dmh .sv2-awards img{height:54px;width:48px}}
@media (max-width:560px){
  .dmh-top p{font-size:12px;gap:2px 8px}
  .dmh-hero h1{font-size:40px}
  .dmh-tagline{font-size:17px}
  .dmh-proof{grid-template-columns:minmax(0,1fr);gap:8px}
  .dmh-proof li{grid-template-columns:auto minmax(0,1fr);align-items:center;gap:14px;padding:12px 14px}
  .dmh-proof b{font-size:22px;min-width:74px}
  .dmh-hero .sv2-ctas .sv2-btn{width:100%}
  .dmh-hero__vis .szig-fan{height:250px}
}

/* ---------- reviews rail (white, under the hero): the /organic-seo/ rail rules, scoped ---------- */
.dmh #dm-reviews.ex2-rc--standalone{background:#fff;color:var(--ink);padding:26px 0 20px;line-height:1.6}
.dmh .s-rv-head{display:grid;justify-items:center;text-align:center;margin-bottom:12px}
.dmh .s-rv-h{font-size:clamp(19px,1.45vw,24px);letter-spacing:-.01em;line-height:1.2;white-space:nowrap}
@media (max-width:900px){.dmh .s-rv-h{white-space:normal}}
.dmh .s-rv-sec .ex2-rc__card{height:auto;box-shadow:0 14px 30px rgba(var(--ss-navy-deep-rgb),.18)}
.dmh .s-rv-sec .hv2-rail{--gut:32px;--cw:282px;position:relative;margin-top:-8px}
@media (max-width:900px){.dmh .s-rv-sec .hv2-rail{--gut:24px}}
@media (max-width:560px){.dmh .s-rv-sec .hv2-rail{--gut:16px;--cw:76vw}}
.dmh .s-rv-sec .hv2-rail__track{--pad:var(--gut);display:grid;grid-auto-flow:column;grid-auto-columns:var(--cw);gap:var(--gap,20px);margin:0;padding:8px var(--pad) 12px;list-style:none;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:none;scroll-padding-inline:var(--pad);scrollbar-width:none}
.dmh .s-rv-sec .hv2-rail__track::-webkit-scrollbar{display:none}
.dmh .s-rv-sec .hv2-rail__track:focus-visible{outline:3px solid var(--gold);outline-offset:-3px}
.dmh .s-rv-sec .hv2-rail__track.is-drag{scroll-snap-type:none;cursor:grabbing;user-select:none}
.dmh .s-rv-sec .hv2-rail__track.is-drag a{pointer-events:none}
.dmh .s-rv-sec .hv2-rail__item{scroll-snap-align:start;display:grid;min-width:0}
.dmh .s-rv-sec .hv2-rail:before,.dmh .s-rv-sec .hv2-rail:after{content:"";position:absolute;top:0;bottom:0;width:56px;z-index:2;pointer-events:none;transition:opacity .15s}
.dmh .s-rv-sec .hv2-rail:before{left:0;background:linear-gradient(90deg,#fff,rgba(255,255,255,0));opacity:0}
.dmh .s-rv-sec .hv2-rail:after{right:0;background:linear-gradient(270deg,#fff,rgba(255,255,255,0))}
.dmh .s-rv-sec .hv2-rail.is-scrolled:before{opacity:1}
.dmh .s-rv-sec .hv2-rail.is-end:after{opacity:0}
.dmh .s-rv-sec .hv2-rail__btn{position:absolute;top:calc(50% - 2px);transform:translateY(-50%);z-index:3;width:48px;height:48px;padding:0;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--ss-navy);box-shadow:0 6px 18px rgba(var(--ss-navy-deep-rgb),.18);display:grid;place-items:center;cursor:pointer;opacity:0;transition:opacity .15s,background .15s}
.dmh .s-rv-sec .hv2-rail__btn svg{width:18px;height:18px}
.dmh .s-rv-sec .hv2-rail__btn--prev{left:76px}
.dmh .s-rv-sec .hv2-rail__btn--next{right:76px}
.dmh .s-rv-sec .hv2-rail:hover .hv2-rail__btn,.dmh .s-rv-sec .hv2-rail:focus-within .hv2-rail__btn{opacity:1}
.dmh .s-rv-sec .hv2-rail .hv2-rail__btn:disabled{opacity:0;pointer-events:none}
@media (hover:none),(max-width:760px){.dmh .s-rv-sec .hv2-rail__btn{display:none}}
/* Visible breadcrumb trail removed site-wide 2026-10-01 (BreadcrumbList schema kept, Yoast): the copy keeps the trail row (21px) as space so the first element sits where the trail ended. */
.dmh-hero__copy{padding-top:21px}
@media (max-width:767.98px){main .dmh-hero .dmh-hero__in{padding-top:16px}}

/* ==== below the fold ==== */

/* ---------- results rail (navy): shared .ss-bleed full-bleed looping rail (ss-rail.css + hv2-rail.js), kit case cards ---------- */
.dmh-rail__track{display:grid;grid-auto-flow:column;grid-auto-columns:300px;gap:20px;list-style:none;margin:0;padding-block:6px 14px}
.dmh-rail__track>li{display:grid;min-width:0}
.dmh-rail .sv2-case{height:100%}
@media (max-width:560px){.dmh-rail__track{grid-auto-columns:78vw;gap:14px}}
.dmh-more{display:flex;justify-content:center;margin-top:36px}
.dmh-res.sv2-sec{padding-bottom:64px}
@media (max-width:760px){.dmh-res.sv2-sec{padding-bottom:44px}.dmh-more{margin-top:28px}}

/* ---------- team roster (10 x 9 faces, template-parts/services-hub-team-grid.php roster): the mosaic's height ~ the copy's;
   tablets let the tiles shrink; phones show 8 x 5 (40 faces) instead of a tall column ---------- */
.dmh .sv2-tg{gap:72px}
@media (min-width:1101px){.dmh .sv2-tg__copy{max-width:540px}} /* copy height ~ the 10 x 9 mosaic's */
@media (max-width:1100px) and (min-width:901px){.dmh .sv2-tg{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:40px}}
@media (max-width:600px){
  .dmh .sv2-tg__faces{grid-template-columns:repeat(8,minmax(0,1fr))!important;gap:3px!important}
  .dmh .sv2-tg__faces>li{max-width:none!important}
  .dmh .sv2-tg__faces>li:nth-child(n+41){display:none!important}
}


/* ---------- Client Hub grid (white): quiet trust note under the grid ---------- */
.dmh .s-hubg__note{margin-top:28px;text-align:center;font-size:14px;color:var(--ink3)}

/* ---------- Client Hub grid (white): no hairline / reduced top on the next navy band (the kit's --open rule is for navy grids) ---------- */
.dmh .dmh-hubg+.sv2-dark{border-top:0}
/* reports grid -> dark band: padding from the shared seam rule (services-hub-v2.css "Section seams") */