/* Service pages v2 (page-templates/tpl-service-v2.php, inc/service-v2.php): Email & SMS, Social Media. Loads after services-hub-v2.css (kit), seo-v2.css (awards row, process steps) and seo-sub-v2.css (hero fan, rails, review cards, step cards). Scoped to .svc2 inside .sv2. Part above "below the fold" is inlined in . Reveal policy: nothing hidden on load, no entrances, transitions <= 150 ms. Rails: native scroll, no scrollbar, round arrows (hv2-rail.js). */ .svc2 .ssub-h1{max-width:16ch} .svc2-logos .sv2-logos__m{filter:none} .svc2-logo--tiktok img{height:30px!important;width:auto} /* Email hero H1 (Mike 2026-09-28): exactly two lines on desktop, "Win customers back with" / "Email & SMS." */ .svc2--email-marketing .ssub-h1{max-width:none;font-size:clamp(34px,3.6vw,54px)} @media (min-width:1100px){.svc2--email-marketing .ssub-h1 .svc2-h1a{white-space:nowrap}} /* awards row + platform partners in one row (no separate partner strip) */ .svc2 .svc2-awards{grid-template-columns:repeat(var(--n,5),minmax(0,1fr));gap:18px 20px} .svc2 .svc2-awards__pt img{width:84px;height:40px;object-fit:contain;object-position:left center} @media (max-width:1200px){.svc2 .svc2-awards{grid-template-columns:repeat(3,minmax(0,1fr))}} @media (max-width:640px){.svc2 .svc2-awards{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 14px}.svc2 .svc2-awards__pt img{width:64px;height:34px}} /* PPC hero (Mike 2026-09-28): the SEO page's hero photo (.sv2-hero__pic, caption pill), here the Google panel photo, with the three fan cases as a mini stat row across the photo's foot (hero.photo in the config). */ .svc2--ppc-marketing .ssub-h1{max-width:none;font-size:clamp(34px,3.5vw,52px)} @media (min-width:1100px){.svc2--ppc-marketing .ssub-h1 .svc2-h1a{white-space:nowrap}} .svc2--web-design .ssub-h1{max-width:none;font-size:clamp(34px,3.5vw,52px)} @media (min-width:1100px){.svc2--web-design .ssub-h1 .svc2-h1a{white-space:nowrap}} @media (min-width:1200px){.svc2--web-design .svc2-awards{grid-template-columns:repeat(5,minmax(0,1fr))}} .svc2-hpic{margin-bottom:34px} /* Social hero video (hero.video): poster = frame background, video fades in (150 ms) once it plays */ .svc2-hvidf{background:var(--navy2) center/cover no-repeat} .svc2-hvid{display:block;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .15s} .svc2-hvid.is-on{opacity:1} @media (prefers-reduced-motion:reduce){.svc2-hvid{transition:none}} .svc2-hfan{position:absolute;left:18px;right:18px;bottom:-40px;z-index:2;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px} .svc2-hfan li{display:grid;min-width:0} .svc2-hfan__c{display:grid;align-content:start;gap:4px;min-width:0;background:rgba(var(--ss-navy-rgb),.94);border:1px solid rgba(255,255,255,.14);border-radius:16px;padding:14px 16px 13px;box-shadow:0 20px 44px rgba(0,0,0,.42);transition:border-color .15s} .svc2-hfan__c:hover{border-color:var(--gold)} .svc2-hfan__c b{font-size:28px;font-weight:700;letter-spacing:-.03em;line-height:1;color:var(--gold);background:var(--ss-gold-shine);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;width:fit-content} .svc2-hfan__c span{font-size:13px;font-weight:700;line-height:1.3;color:#fff} .svc2-hfan__c i{font-style:normal;font-size:12px;line-height:1.3;color:var(--mist);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} @media (min-width:1200px){.svc2--ppc-marketing .svc2-awards{grid-template-columns:repeat(4,minmax(0,1fr))}} /* 4 ranking badges; partners moved to #svc2-partners (2026-09-28) */ .svc2 #svc2-partners .sv2-head{margin-bottom:40px} .svc2 #svc2-partners .sv2-center .sv2-h2 .hl{display:block;width:fit-content;margin-inline:auto} @media (max-width:760px){.svc2 #svc2-partners .sv2-head{margin-bottom:28px}} @media (max-width:560px){ .svc2-hpic{margin-bottom:0} .svc2-hfan{position:relative;left:auto;right:auto;bottom:auto;margin:-34px 8px 0;gap:8px} .svc2-hfan__c{padding:10px 10px 9px;border-radius:12px} .svc2-hfan__c b{font-size:20px} .svc2-hfan__c span{font-size:11.5px} .svc2-hfan__c i{font-size:10.5px} } /* Web Design hero collage (hero.collage, template-parts/svc2-hero-collage.php, Mike 2026-09-28): six of our best site builds as overlapping browser windows in the hero photo frame, static (no motion, no hover content). Back row 1-3, front row 4-6, 5 = front centre with the gold ring. Phones: the front row only. */ .svc2-hpic .sv2-hero__main{position:relative} .svc2-hpic .sv2-hero__cap{z-index:5} .svc2-hcol{position:absolute;inset:0;z-index:0;overflow:hidden;background:radial-gradient(120% 90% at 50% 0%,#0a4270 0%,var(--ss-navy) 45%,var(--ss-navy-deep) 100%)} .svc2-hcol::before{content:"";position:absolute;left:50%;top:56%;width:64%;height:50%;transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgba(var(--ss-gold-rgb),.26),rgba(var(--ss-gold-rgb),0));pointer-events:none} .svc2-hcol__w{position:absolute;display:block;width:37%;border-radius:9px;overflow:hidden;background:#fff;border:1px solid rgba(255,255,255,.18);box-shadow:0 18px 38px rgba(0,12,24,.55),0 3px 8px rgba(0,12,24,.35)} .svc2-hcol__bar{display:flex;align-items:center;gap:4px;height:13px;padding:0 7px;background:#e9eef3;border-bottom:1px solid #d5dde5} .svc2-hcol__bar i{width:5px;height:5px;border-radius:50%;background:var(--ss-on-navy)} .svc2-hcol__bar i:first-child{background:var(--ss-gold)} .svc2-hcol__img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top center} .svc2-hcol__w--1{left:4%;top:12%;transform:rotate(-4deg);z-index:1} .svc2-hcol__w--2{left:31.5%;top:7%;transform:rotate(1.5deg);z-index:1} .svc2-hcol__w--3{left:59%;top:11%;transform:rotate(4deg);z-index:1} .svc2-hcol__w--4{left:3%;top:44%;transform:rotate(3deg);z-index:2} .svc2-hcol__w--5{left:29%;top:37%;width:42%;transform:rotate(-1.5deg);z-index:3;border:2px solid var(--ss-gold);box-shadow:0 26px 54px rgba(0,12,24,.65),0 0 0 6px rgba(var(--ss-gold-rgb),.14)} .svc2-hcol__w--6{left:60%;top:45%;transform:rotate(-3deg);z-index:2} @media (max-width:560px){ .svc2-hcol__w{width:48%;border-radius:7px} .svc2-hcol__bar{height:9px;padding:0 5px;gap:3px} .svc2-hcol__bar i{width:4px;height:4px} .svc2-hcol__w--1,.svc2-hcol__w--2,.svc2-hcol__w--3{display:none} .svc2-hcol__w--4{left:0;top:20%;transform:rotate(-3deg)} .svc2-hcol__w--5{left:23%;top:25%;width:54%;transform:rotate(0)} .svc2-hcol__w--6{left:52%;top:18%;transform:rotate(3deg)} } /* Reviews rail under the hero (config order "reviews_rail:", template-parts/seo-v2-reviews.php; PPC 2026-09-28) = the /organic-seo/ rail: white band 26px on top, one centred line of heading, the homepage looping rail (hv2-rail.js, hover arrows), industry-page review cards. Copy of the .seo2 rules in seo-v2.css, scoped to the section (the results and examples rails on these pages use .hv2-rail__track too). Above the fold: the inline geometry script needs them. */ .svc2 #svc2-reviews.ex2-rc--standalone{background:#fff;color:var(--ink);padding:26px 0 16px;line-height:1.6} .svc2 .s-rv-h{font-size:clamp(19px,1.45vw,24px);letter-spacing:-.01em;line-height:1.2;white-space:nowrap} @media (max-width:900px){.svc2 .s-rv-h{white-space:normal}} .svc2 .s-rv-sec .ex2-rc__card{height:auto;box-shadow:0 14px 30px rgba(var(--ss-navy-deep-rgb),.18)} .svc2 .s-rv-sec .hv2-rail{--gut:32px;--cw:282px;position:relative;margin-top:-8px} @media (max-width:900px){.svc2 .s-rv-sec .hv2-rail{--gut:24px}} @media (max-width:560px){.svc2 .s-rv-sec .hv2-rail{--gut:16px;--cw:76vw}} .svc2 .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} .svc2 .s-rv-sec .hv2-rail__track::-webkit-scrollbar{display:none} .svc2 .s-rv-sec .hv2-rail__track:focus-visible{outline:3px solid var(--gold);outline-offset:-3px} .svc2 .s-rv-sec .hv2-rail__track.is-drag{scroll-snap-type:none;cursor:grabbing;user-select:none} .svc2 .s-rv-sec .hv2-rail__track.is-drag a{pointer-events:none} .svc2 .s-rv-sec .hv2-rail__item{scroll-snap-align:start;display:grid;min-width:0} .svc2 .s-rv-sec .hv2-rail:before,.svc2 .s-rv-sec .hv2-rail:after{content:"";position:absolute;top:0;bottom:0;width:56px;z-index:2;pointer-events:none;transition:opacity .15s} .svc2 .s-rv-sec .hv2-rail:before{left:0;background:linear-gradient(90deg,#fff,rgba(255,255,255,0));opacity:0} .svc2 .s-rv-sec .hv2-rail:after{right:0;background:linear-gradient(270deg,#fff,rgba(255,255,255,0))} .svc2 .s-rv-sec .hv2-rail.is-scrolled:before{opacity:1} .svc2 .s-rv-sec .hv2-rail.is-end:after{opacity:0} .svc2 .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} .svc2 .s-rv-sec .hv2-rail__btn svg{width:18px;height:18px} .svc2 .s-rv-sec .hv2-rail__btn--prev{left:76px} .svc2 .s-rv-sec .hv2-rail__btn--next{right:76px} .svc2 .s-rv-sec .hv2-rail:hover .hv2-rail__btn,.svc2 .s-rv-sec .hv2-rail:focus-within .hv2-rail__btn{opacity:1} .svc2 .s-rv-sec .hv2-rail__btn:hover{background:var(--gold);color:var(--ss-navy);border-color:var(--gold)} .svc2 .s-rv-sec .hv2-rail .hv2-rail__btn:disabled{opacity:0;pointer-events:none} @media (hover:none),(max-width:760px){.svc2 .s-rv-sec .hv2-rail__btn{display:none}} /* ==== below the fold ==== */ /* ---------- platform band (Email: Klaviyo) ---------- */ .svc2-pl{background:#fff} .svc2-pl__in{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:64px;align-items:center} .svc2-pl__badge{display:grid;justify-items:center;gap:14px;background:var(--ss-navy-deep);border-radius:24px;padding:48px 32px;background-image:var(--ss-glow-gold-soft)} .svc2-pl__badge img{width:min(300px,80%);height:auto} .svc2-pl__src{font-size:12.5px;color:var(--mist);text-align:center;max-width:32ch} .svc2-pl__copy{display:grid;gap:18px;justify-items:start} .svc2-pl__copy .sv2-h2 .hl{display:block;width:fit-content} .svc2-pl__proof{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;width:100%} .svc2-pl__proof li{display:grid;gap:4px;background:var(--ground);border-radius:16px;padding:16px 18px} .svc2-pl__proof b{font-size:30px;font-weight:800;letter-spacing:-.03em;line-height:1;color:var(--gold-ink)} .svc2-pl__proof span{font-size:14.5px;color:var(--ink2);line-height:1.45} .svc2-pl__proof a{color:var(--ink);font-weight:700;border-bottom:1.5px solid var(--gold)} .svc2-pl__also{display:grid;gap:10px;width:100%;border-top:1px solid var(--line);padding-top:16px} .svc2-pl__also>p{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink3)} .svc2-pl__also ul{display:flex;flex-wrap:wrap;gap:12px} .svc2-pl__also li{display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:14px;padding:10px 16px 10px 12px;background:#fff} .svc2-pl__also img{height:34px;width:auto} .svc2-pl__also li.is-dark img{background:var(--ss-navy-deep);border-radius:8px;padding:6px 8px;height:40px} .svc2-pl__also span{display:grid;font-size:13px;color:var(--ink3);line-height:1.3} .svc2-pl__also span b{font-size:15px;color:var(--ink)} @media (max-width:1000px){.svc2-pl__in{grid-template-columns:1fr;gap:36px}.svc2-pl__badge{padding:36px 24px}} @media (max-width:560px){.svc2-pl__proof{grid-template-columns:1fr}.svc2-pl__also li{flex:1 1 100%}} /* ---------- results: more case chips ---------- */ .svc2-more{margin-top:40px;border-top:1px solid var(--navy-line);padding-top:28px} .svc2-more__h{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--mist);margin-bottom:16px} .svc2-chips{display:flex;flex-wrap:wrap;gap:10px} .svc2-chips a{display:inline-flex;align-items:baseline;gap:8px;border:1px solid var(--navy-line);background:var(--navy2);border-radius:999px;padding:8px 16px;font-size:14px;color:#fff;transition:border-color .15s} .svc2-chips a:hover{border-color:var(--gold)} .svc2-chips span{font-size:13px;color:var(--gold)} .svc2-chips__all a{border-color:rgba(var(--ss-gold-rgb),.55);background:transparent} .svc2-chips__all b{color:var(--gold)} .svc2-chips__all span{color:#fff} @media (max-width:560px){.svc2-chips{gap:8px}.svc2-chips a{padding:6px 12px;font-size:13px;gap:6px}.svc2-chips span{font-size:12px}} /* ---------- examples rail ---------- */ .svc2-ex .ssub-arr{border-color:rgba(var(--ss-navy-deep-rgb),.25);color:var(--ss-navy-deep)} .svc2-ex .ssub-arr:hover:not(:disabled){border-color:var(--gold-ink);color:var(--gold-ink)} .svc2-extrack{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none;padding:2px 0 6px;overscroll-behavior-x:contain;align-items:flex-start} .svc2-extrack::-webkit-scrollbar{display:none;height:0} .svc2-extrack>li{flex:0 0 calc((100cqw - 60px)/4);min-width:0;scroll-snap-align:start} .svc2-extrack--tall>li{flex-basis:calc((100cqw - 80px)/5)} .svc2-x{display:grid;gap:12px} .svc2-x__m{position:relative;display:block;border-radius:18px;overflow:hidden;background:var(--ss-navy-deep);aspect-ratio:1/1;box-shadow:0 16px 34px -18px rgba(var(--ss-navy-deep-rgb),.5);border:1px solid transparent;transition:border-color .15s} a.svc2-x__m:hover{border-color:var(--gold)} .svc2-extrack--tall .svc2-x__m{aspect-ratio:9/16} .svc2-x__m video,.svc2-x__m img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .svc2-x--image .svc2-x__m{background:#fff} .svc2-x--image .svc2-x__m img{object-position:50% 0} .svc2-x__tag{position:absolute;left:10px;top:10px;z-index:1;background:rgba(var(--ss-navy-deep-rgb),.84);color:#fff;font-size:11px;font-weight:700;letter-spacing:.04em;padding:5px 10px;border-radius:99px} .svc2-x figcaption{display:grid;gap:2px;font-size:13.5px;line-height:1.4;color:var(--ink2)} .svc2-x figcaption b{font-size:15px;color:var(--ink)} .svc2-x figcaption em{font-style:normal;font-weight:700;color:var(--gold-ink)} @media (max-width:1100px){.svc2-extrack>li{flex-basis:calc((100cqw - 40px)/3)}.svc2-extrack--tall>li{flex-basis:calc((100cqw - 60px)/4)}} @media (max-width:800px){.svc2-extrack>li{flex-basis:calc((100cqw - 20px)/2)}.svc2-extrack--tall>li{flex-basis:calc((100cqw - 40px)/3)}} @media (max-width:560px){.svc2-extrack{gap:14px}.svc2-extrack>li{flex-basis:72cqw}.svc2-extrack--tall>li{flex-basis:56cqw}} /* ---------- what we do (child pages) ---------- */ .svc2-kids{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px} .svc2-kid{height:100%;background:#fff;border:1px solid var(--line);border-radius:20px;padding:22px 22px 20px;display:grid;grid-template-rows:auto auto 1fr auto;gap:10px;transition:border-color .15s,box-shadow .15s} .svc2-kid:hover{border-color:var(--gold);box-shadow:0 14px 40px rgba(var(--ss-navy-deep-rgb),.08)} .svc2-kid h3{font-size:20px;font-weight:800;line-height:1.25;margin-top:4px} .svc2-kid p{font-size:15px;color:var(--ink2)} .svc2-kid__tags{display:flex;flex-wrap:wrap;gap:6px} .svc2-kid__tags i{font-style:normal;font-size:12px;font-weight:700;color:var(--ink2);background:var(--ground);border-radius:99px;padding:4px 10px} .svc2-kid__go{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:700;color:var(--ink);border-bottom:2px solid var(--gold);justify-self:start;padding-bottom:2px} .svc2-kid__go svg{width:14px;height:14px} .svc2-also{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 18px;margin-top:28px} .svc2-also li{font-size:14.5px;color:var(--ink2);padding-left:14px;border-left:2px solid var(--gold)} .svc2-also b{color:var(--ink)} .svc2-also__label{margin:36px 0 -16px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink2)} .svc2-also__link a{display:block;color:inherit;text-decoration:none;transition:color .15s} .svc2-also__link a svg{width:13px;height:13px;vertical-align:-1px;color:var(--gold)} .svc2-also__link a:hover{color:var(--ink)} .svc2-also__link a:hover b{color:var(--gold-ink)} @media (max-width:1000px){.svc2-kids,.svc2-also{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:640px){.svc2-kids,.svc2-also{grid-template-columns:1fr}} /* ---------- expert ---------- */ .svc2-xp__top{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:64px;align-items:center} .svc2-xp__photo img{width:100%;max-width:400px;aspect-ratio:1/1;object-fit:cover;object-position:50% 20%;border-radius:24px;margin:0 auto} .svc2-xp__intro{display:grid;gap:16px;justify-items:start} .svc2-xp .sv2-h2 .hl{display:block;width:fit-content} .svc2-xp__who{font-size:15px;font-weight:700;color:#fff} .svc2-xp__who a{border-bottom:1.5px solid rgba(var(--ss-gold-rgb),.6)} .svc2-xp__who span{font-weight:400;color:var(--on-navy)} .svc2-xp__bio{font-size:17.5px;line-height:1.65;color:var(--on-navy);max-width:62ch} .svc2-xp__creds{display:flex;flex-wrap:wrap;gap:8px} .svc2-xp__creds li{display:inline-flex;align-items:center;gap:8px;border:1px solid rgba(var(--ss-gold-rgb),.45);background:rgba(var(--ss-gold-rgb),.08);color:#fff;border-radius:99px;padding:7px 14px;font-size:14px;font-weight:700} .svc2-xp__creds svg{width:13px;height:13px;color:var(--gold)} .svc2-xp__stats{display:flex;flex-wrap:wrap;gap:20px 48px;margin-top:6px} .svc2-xp__stats b{display:block;font-size:36px;font-weight:700;letter-spacing:-.02em;line-height:1;color:#fff} .svc2-xp__stats span{display:block;margin-top:8px;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--mist)} .svc2-xp__links{display:flex;flex-wrap:wrap;gap:14px 26px} .svc2-talks{margin-top:64px} .svc2-talks__h{font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--mist)} .svc2-talktrack{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none;padding:2px 0 6px} .svc2-talktrack::-webkit-scrollbar{display:none;height:0} .svc2-talktrack>li{flex:0 0 calc((100% - 40px)/3);min-width:0;scroll-snap-align:start} .svc2-talk{display:grid;gap:8px;color:#fff} .svc2-talk__im{position:relative;display:block;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:#000;border:1px solid transparent;transition:border-color .15s} .svc2-talk:hover .svc2-talk__im{border-color:var(--gold)} .svc2-talk__im img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .svc2-talk__play{position:absolute;left:12px;bottom:12px;display:inline-flex;align-items:center;gap:7px;padding:7px 12px 7px 10px;border-radius:999px;background:rgba(var(--ss-navy-deep-rgb),.78);font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase} .svc2-talk b{font-size:16px;line-height:1.35;margin-top:6px} .svc2-talk small{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--mist)} @media (max-width:1000px){.svc2-xp__top{grid-template-columns:1fr;gap:28px}.svc2-xp__photo img{max-width:300px;margin:0}.svc2-talktrack>li{flex-basis:calc((100% - 20px)/2)}} @media (max-width:560px){.svc2-talktrack>li{flex-basis:82%}.svc2-xp__stats b{font-size:30px}.svc2-xp__bio{font-size:16.5px}} /* ---------- team (Company-page leader cards) ---------- */ .svc2-proc--line{border-top:1px solid var(--line)} /* ---------- examples: PPC sample-ad cards (the case page's own card, template-parts/case-study-v2-graphic.php; its rules copied from case-study-v2.css and scoped to .svc2-ad, that sheet is not loaded here) ---------- */ .svc2-extrack--ad>li{flex-basis:calc((100cqw - 40px)/3)} .svc2-x--ad .svc2-x__m{aspect-ratio:auto;background:var(--ss-navy-deep);background-image:radial-gradient(120% 80% at 50% 0,rgba(var(--ss-gold-rgb),.12),transparent 60%);display:grid;place-items:center;min-height:100%} .svc2-extrack--ad .svc2-x--image .svc2-x__m{aspect-ratio:auto;height:100%;min-height:300px} .svc2-extrack--ad .svc2-x--image .svc2-x__m img{object-position:50% 50%} .svc2-extrack--ad{align-items:stretch} .svc2-extrack--ad .svc2-x{height:100%;grid-template-rows:1fr auto} .svc2-ad{display:block;width:100%;padding:34px 18px 0} /* the examples rail sizes its media to the tile (.svc2-x__m img = cover); the ad card's own small images keep their size */ .svc2-x--ad .svc2-x__m img{position:static;inset:auto;width:auto;height:auto;object-fit:contain} .svc2-x--ad .svc2-ad .cs2-adcard__mic{width:9px} .svc2-x--ad .svc2-ad .cs2-adchip img{width:16px;height:16px} .svc2-ad .cs2-gfx{position:relative;width:100%;margin:0 auto} @media (max-width:1100px){.svc2-extrack--ad>li{flex-basis:calc((100cqw - 20px)/2)}} @media (max-width:560px){.svc2-extrack--ad>li{flex-basis:88cqw}.svc2-ad{padding:30px 8px 0}} .svc2-ad .cs2-gfx--ppc{max-width:560px;aspect-ratio:auto;display:grid;place-items:center;padding:30px 10px 70px} .svc2-ad .cs2-adglow{position:absolute;left:50%;top:50%;width:420px;max-width:90%;height:320px;transform:translate(-50%, -50%);background:radial-gradient(closest-side, rgba(var(--ss-gold-rgb),.28), transparent);filter:blur(24px);pointer-events:none} .svc2-ad .cs2-adcard{position:relative;z-index:1;width:100%;max-width:500px;padding:22px 24px 20px;border-radius:16px;background:#fff;color:#202124;font-family:Arial, Helvetica, sans-serif;text-align:left;transform:rotate(-4deg);box-shadow:0 40px 80px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .4), 0 0 60px rgba(var(--ss-gold-rgb),.18)} .svc2-ad .cs2-adcard__browser{display:flex;gap:6px;margin:-8px 0 14px} .svc2-ad .cs2-adcard__browser i{width:9px;height:9px;border-radius:50%;background:#e2e5ea} .svc2-ad .cs2-adcard__search{display:flex;align-items:center;gap:8px;margin-bottom:14px;padding:8px 12px;border:1px solid #dfe1e5;border-radius:22px;box-shadow:0 1px 4px rgba(32, 33, 36, .18);font-size:12.5px;line-height:1.2} .svc2-ad .cs2-adcard__search svg{flex:none;width:14px;height:14px} .svc2-ad .cs2-adcard__query{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .svc2-ad .cs2-adcard__mic{flex:none;width:9px;height:auto} .svc2-ad .cs2-adcard__sponsored{margin:0 0 8px;color:#202124;font-size:11px;font-weight:700;line-height:1.2} .svc2-ad .cs2-adcard__site{display:flex;align-items:center;gap:8px} .svc2-ad .cs2-adcard__site > svg{flex:none;width:3px;height:13px;margin-left:auto} .svc2-ad .cs2-adcard__fav{flex:none;display:flex;align-items:center;justify-content:center;width:24px;height:24px;overflow:hidden;border:1px solid #e5e7eb;border-radius:50%;background:#fff;color:var(--ss-navy);font:800 10px/1 Arial, sans-serif} .svc2-ad .cs2-adcard__fav--dark{background:#101c33} .svc2-ad .cs2-adcard__fav img{max-width:84%;max-height:84%;object-fit:contain} .svc2-ad .cs2-adcard__who{min-width:0;font-size:11px;line-height:1.25} .svc2-ad .cs2-adcard__name{display:block;color:#202124} .svc2-ad .cs2-adcard__who small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#4d5156;font-size:10px} .svc2-ad .cs2-adcard__headline{margin:8px 0 4px;color:#b07d00;font-size:20px;font-weight:400;line-height:1.3} .svc2-ad .cs2-adcard__desc{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;margin:0;color:#4d5156;font-size:12.5px;line-height:1.45} .svc2-ad .cs2-adcard__links{display:grid;grid-template-columns:1fr 1fr;gap:12px 22px;margin-top:14px;padding-top:12px;border-top:1px solid #eee} .svc2-ad .cs2-adcard__links > div{min-width:0} .svc2-ad .cs2-adcard__links b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#1a0dab;font-size:13.5px;font-weight:400;line-height:1.3} .svc2-ad .cs2-adcard__links span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#4d5156;font-size:11.5px;line-height:1.35} .svc2-ad .cs2-adchip{position:absolute;z-index:3;left:0;bottom:22px;display:flex;align-items:center;gap:10px;max-width:92%;padding:9px 16px;overflow:hidden;border:1.5px solid var(--ss-gold);border-radius:999px;background:#0f1a2e;color:#fff;font-size:13.5px;line-height:1.2;white-space:nowrap;text-overflow:ellipsis;box-shadow:0 12px 30px rgba(0, 0, 0, .4)} .svc2-ad .cs2-adchip img{flex:none;width:16px;height:16px} @media (max-width:575.98px){.svc2-ad .cs2-gfx--ppc{padding:16px 4px 64px}.svc2-ad .cs2-adcard{padding:18px 16px 16px;transform:rotate(-3deg)}.svc2-ad .cs2-adcard__headline{font-size:17px}.svc2-ad .cs2-adcard__links{gap:10px 14px}} .svc2-ad .cs2-adcard--meta{transform:rotate(3deg)} .svc2-ad .cs2-adcard--meta .cs2-adcard__who small{color:#65676b} .svc2-ad .cs2-adcard__post{margin:10px 0 12px;color:#050505;font-size:13.5px;line-height:1.45;-webkit-line-clamp:3} .svc2-ad .cs2-adcard__media{height:190px;margin:0 -24px;background:#e9ecef center / cover no-repeat} .svc2-ad .cs2-adcard__cta{display:flex;align-items:center;gap:14px;margin:0 -24px;padding:12px 24px;background:#f0f2f5} .svc2-ad .cs2-adcard__cta-text{min-width:0;flex:1 1 auto} .svc2-ad .cs2-adcard__cta-text b{display:block;overflow:hidden;color:#65676b;font-size:10.5px;font-weight:400;letter-spacing:.04em;text-overflow:ellipsis;text-transform:uppercase;white-space:nowrap} .svc2-ad .cs2-adcard__cta-text span{display:block;overflow:hidden;color:#050505;font-size:13.5px;font-weight:700;line-height:1.3;text-overflow:ellipsis;white-space:nowrap} .svc2-ad .cs2-adcard__btn{flex:none;padding:8px 14px;border-radius:6px;background:#e4e6eb;color:#050505;font-size:13px;font-weight:700;line-height:1} .svc2-ad .cs2-adcard__react{display:flex;justify-content:space-between;margin-top:10px;padding-top:10px;border-top:1px solid #e4e6eb;color:#65676b;font-size:12px;font-weight:600} .svc2-ad .cs2-gfx--meta .cs2-adchip{left:auto;right:0} @media (max-width:575.98px){.svc2-ad .cs2-adcard--meta{transform:rotate(2deg)}.svc2-ad .cs2-adcard__media,.svc2-ad .cs2-adcard__cta{margin:0 -16px}.svc2-ad .cs2-adcard__cta{padding:10px 16px}} /* ---------- Web Design (2026-09-28): site screenshots in a browser frame (examples.items type "site") + grouped "what we do" ---------- */ .svc2-extrack--site>li{flex-basis:calc((100cqw - 40px)/3)} .svc2-x--site .svc2-x__m{aspect-ratio:auto;background:#fff;border:1px solid rgba(var(--ss-navy-deep-rgb),.12);border-radius:14px} a.svc2-x--site .svc2-x__m:hover,.svc2-x--site a.svc2-x__m:hover{border-color:var(--gold)} .svc2-site{display:block} .svc2-site__bar{display:flex;align-items:center;gap:6px;height:30px;padding:0 12px;background:var(--ss-ground);border-bottom:1px solid rgba(var(--ss-navy-deep-rgb),.08)} .svc2-site__bar i{width:9px;height:9px;border-radius:50%;background:var(--ss-line-strong);flex:0 0 auto} .svc2-site__bar em{flex:1 1 auto;min-width:0;margin-left:8px;height:18px;line-height:18px;border-radius:99px;background:#fff;color:var(--ss-ink-2);font-style:normal;font-size:11px;padding:0 10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .svc2-x--site .svc2-x__m img{position:static;inset:auto;display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:50% 0} .svc2-x--site .svc2-x__tag{top:auto;bottom:10px} @media (max-width:1100px){.svc2-extrack--site>li{flex-basis:calc((100cqw - 20px)/2)}} @media (max-width:560px){.svc2-extrack--site>li{flex-basis:84cqw}} .svc2-kgrp{font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink2);margin:34px 0 14px;display:flex;align-items:center;gap:12px} .svc2-kgrp::after{content:"";flex:1 1 auto;height:1px;background:var(--line)} .ssub-head+.svc2-kgrp{margin-top:0} .svc2-kids--sm{grid-template-columns:repeat(6,minmax(0,1fr));gap:10px} .svc2-kid--sm{grid-template-rows:auto 1fr auto;gap:2px;padding:12px 14px;border-radius:14px} .svc2-kid--sm b{font-size:15px;font-weight:700;color:var(--ink)} .svc2-kid--sm span{font-size:12.5px;color:var(--ink2)} .svc2-kid--sm svg{width:12px;height:12px;margin-top:4px;color:var(--ink)} @media (max-width:1000px){.svc2-kids--sm{grid-template-columns:repeat(3,minmax(0,1fr))}} @media (max-width:640px){.svc2-kids--sm{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (min-width:1101px){.svc2--web-design .s-steps{grid-template-columns:repeat(6,minmax(0,1fr))}} /* ---------- /ppc-marketing/ order + rhythm (config "order", Mike 2026-09-28 "match the order a bit like the SEO page") ---------- hero -> reviews rail (white) -> team (grey) -> PPC for your business (white) -> platform tabs + extras (grey) -> results (dark) with the client logos at its foot -> examples (grey) -> Client Hub reports (white) -> FAQ. Spacing = the /organic-seo/ values (seo-v2.css "page rhythm" rules). */ /* last card row -> team content 64px (12px track + 16px band + 36px); team content -> next heading 72px (32px + 40px) */ .svc2--ppc-marketing #svc2-team{padding-block:36px 32px} .svc2--ppc-marketing #ppc-types{padding-top:40px} @media (max-width:760px){.svc2--ppc-marketing #svc2-team{padding-block:28px 28px}.svc2--ppc-marketing #ppc-types{padding-top:36px}} /* partners band (dark) -> team: the team keeps its 36px top, so the partners side carries the rest of the ~136px seam (seam rule, services-hub-v2.css) */ .svc2--ppc-marketing #svc2-partners{padding-bottom:100px} @media (max-width:760px){.svc2--ppc-marketing #svc2-partners{padding-bottom:60px}} /* client logos at the foot of the dark results band (hairline = the band's own border-top): last line -> hairline 40px, hairline -> heading 32px, heading -> logos 24px, logos -> band end 40px */ .svc2--ppc-marketing #svc2-results{padding-bottom:40px} .svc2--ppc-marketing #svc2-clients{padding:32px 0 40px} .svc2--ppc-marketing #svc2-clients .ex2-logos-h{margin-bottom:24px} @media (max-width:760px){.svc2--ppc-marketing #svc2-results{padding-bottom:32px}.svc2--ppc-marketing #svc2-clients{padding:28px 0 32px}.svc2--ppc-marketing #svc2-clients .ex2-logos-h{margin-bottom:20px}} /* Client Hub reports: white band, full 104px top, intro -> cards 28px, card grid -> FAQ card 64px (40 + 24) */ .svc2 #svc2-reports.s-hubg-sec{border-top:0;padding-bottom:40px} @media (min-width:761px){.svc2 #svc2-reports.s-hubg-sec{padding-top:104px}} @media (max-width:760px){.svc2 #svc2-reports.s-hubg-sec{padding-bottom:32px}} .svc2 #svc2-reports .sv2-head{margin-bottom:28px} .svc2 #svc2-reports .sv2-center .sv2-h2 .hl{margin-inline:auto} .svc2--ppc-marketing #svc2-faq.ss-faq{padding:24px 0 64px} .svc2--ppc-marketing #svc2-faq .ss-faq__box{--faq-bpad:44px} .svc2--ppc-marketing #svc2-faq .ss-faq__head{margin-bottom:24px} /* extras + landing pages as their own white band (config order "extras", Mike 2026-09-28): standard 104px band, no top margin; the landing-pages card turns grey so it still reads as a card on white */ .svc2 .svc2-ext-sec .svc2-ext{margin-top:0} .svc2 .svc2-ext-sec .svc2-ext__lps{background:var(--ground)} /* results rail -> logo band seam (Mike 2026-09-28: 'See all' sat too high, too much space below it): link 44px under the cards, band bottom 56px; the logo band keeps its own 56px top */ .svc2 .ssub-res .ssub-more{margin-top:44px} .svc2 .ssub-res.sv2-sec{padding-bottom:56px} @media (max-width:760px){.svc2 .ssub-res .ssub-more{margin-top:32px}.svc2 .ssub-res.sv2-sec{padding-bottom:44px}}