/* servadra2.css — SAP-832-P1E. Scoped design layer for the layout-1 pages (direction A — Banded, hero P0A §8). Loaded ONLY when a page sets $srv2_scope before includes/header.php. servadra.css is untouched. Every selector begins with .srv2 (marker on ). Built from srv2-* components; scroll (never fixed) hero backgrounds; no forced-priority declarations. Section 8 = named srv2-* rules for the free-report finder + page helpers; section 9 (industry pills) is now srv2-pills* (section 14). */ /* ---- 1. tokens: one palette, one type scale, one spacing scale ---- */ .srv2{--srv2-navy:#0f1b35;--srv2-blue:#315fbb;--srv2-sky:#5eaaf7;--srv2-ice:#a7d2ff;--srv2-amber:#f59e0b; --srv2-ink:#1e293b;--srv2-muted:#566176;--srv2-soft:#f3f7fd;--srv2-line:#e2e9f4;--srv2-white:#fff; --srv2-sans:'Instrument Sans',system-ui,-apple-system,'Segoe UI',sans-serif;--srv2-serif:'Newsreader',Georgia,serif; --srv2-s1:8px;--srv2-s2:16px;--srv2-s3:24px;--srv2-s4:40px;--srv2-s5:64px;--srv2-s6:96px; --srv2-t-h1:clamp(2.2rem,5.4vw,4rem);--srv2-t-h2:clamp(1.75rem,3.2vw,2.5rem);--srv2-t-h3:1.15rem;--srv2-t-body:1.0625rem;--srv2-t-small:.9rem; --srv2-radius:18px;--srv2-shadow:0 18px 44px rgba(15,27,53,.10)} .srv2{font-family:var(--srv2-sans);color:var(--srv2-ink);font-size:var(--srv2-t-body)} /* ---- 2. bands: one rhythm for every section ---- */ .srv2 .srv2-band,.srv2 .op-problem,.srv2 .controlled-solution,.srv2 .governance-assurance,.srv2 .advisors-consultants, .srv2 .partner_trust,.srv2 .partner_section,.srv2 .seo-svc-section,.srv2 .outcome-anchor{padding:var(--srv2-s6) 0;background:var(--srv2-white);background-image:none;border:0} .srv2 .controlled-solution,.srv2 .advisors-consultants,.srv2 .srv2-band--soft{background:var(--srv2-soft)} .srv2 .srv2-band--strip{padding:var(--srv2-s3) 0;background:var(--srv2-white);border-bottom:1px solid var(--srv2-line)} .srv2 .srv2-band--navy,.srv2 .outcome-anchor.srv2-band--navy{background:var(--srv2-navy);color:#fff} .srv2 .srv2-band--cta{background:var(--srv2-navy);color:#fff;padding:var(--srv2-s5) 0;text-align:center} .srv2 .container{max-width:1120px;margin-left:auto;margin-right:auto;padding-left:var(--srv2-s3);padding-right:var(--srv2-s3);box-sizing:border-box} .srv2 .container.narrow,.srv2 .srv2-narrow{max-width:860px;margin-left:auto;margin-right:auto;padding-left:var(--srv2-s3);padding-right:var(--srv2-s3);box-sizing:border-box} .srv2 .seo-svc-wrap{max-width:1120px;margin:0 auto;padding:0 var(--srv2-s3);box-sizing:border-box} .srv2 .srv2-wide{max-width:1120px;margin:0 auto;padding:0 var(--srv2-s3)} /* two-column feature bands (image + copy), single column on phones */ .srv2 .op-problem-wrap,.srv2 .solution-grid,.srv2 .ga-wrap,.srv2 .ac-wrap,.srv2 .partner_trust_wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--srv2-s5);align-items:center} .srv2 .op-problem-media img,.srv2 .ga-media img,.srv2 .ac-media img,.srv2 .partner_trust_media img,.srv2 .solution-card img{display:block;width:100%;height:auto;border-radius:var(--srv2-radius);box-shadow:var(--srv2-shadow)} /* ---- 3. type: centred-heading rhythm, serif-italic second line, one text style ---- */ .srv2 .op-problem h2,.srv2 .controlled-solution h2,.srv2 .governance-assurance h2,.srv2 .advisors-consultants h2,.srv2 .partner_trust h2,.srv2 .partner_section h2, .srv2 .seo-svc-h2,.srv2 .srv2-band__title,.srv2 .structure-further h2,.srv2 .outcome-anchor h2{font-family:var(--srv2-sans);font-size:var(--srv2-t-h2);line-height:1.15;font-weight:700;letter-spacing:-.015em;color:var(--srv2-navy);margin:0 0 var(--srv2-s3)} .srv2 .seo-svc-h2,.srv2 .srv2-band__title{text-align:center} .srv2 .op-subline{display:block;font-family:var(--srv2-serif);font-style:italic;font-weight:400;color:var(--srv2-blue)} .srv2 .op-problem p,.srv2 .controlled-solution p,.srv2 .governance-assurance p,.srv2 .advisors-consultants p,.srv2 .partner_trust p,.srv2 .partner_section p,.srv2 .seo-svc-section p{font-size:var(--srv2-t-body);line-height:1.68;color:var(--srv2-ink);margin:0 0 var(--srv2-s2)} .srv2 .seo-svc-lead,.srv2 .channel-line{text-align:center;max-width:760px;margin-left:auto;margin-right:auto;color:var(--srv2-muted)} .srv2 .muted,.srv2 .disclaimer-note{color:var(--srv2-muted);font-size:var(--srv2-t-small)} .srv2 .trust_closure,.srv2 .solution-close{font-weight:600;color:var(--srv2-navy);border-left:3px solid var(--srv2-blue);padding-left:var(--srv2-s2)} .srv2 .pricing-context{background:#fff;border:1px solid var(--srv2-line);border-left:4px solid var(--srv2-blue);border-radius:12px;padding:var(--srv2-s2) var(--srv2-s3);max-width:860px;margin:0 auto;color:var(--srv2-ink);font-size:1rem;line-height:1.6} .srv2 .srv2-eyebrow{font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--srv2-blue);margin:0 0 var(--srv2-s2)} .srv2 .srv2-link{color:var(--srv2-blue);font-weight:600;text-decoration:none;border-bottom:1px solid rgba(49,95,187,.25)} .srv2 .srv2-link:hover{border-bottom-color:var(--srv2-blue)} .srv2 .srv2-link--onnavy{color:var(--srv2-ice);border-bottom-color:rgba(167,210,255,.35)} .srv2 .srv2-em{color:var(--srv2-blue);font-weight:700} .srv2 .srv2-more{margin-top:var(--srv2-s2);font-size:1rem} .srv2 .srv2-img{display:block;width:100%;max-width:600px;height:auto;margin:0 auto;border-radius:var(--srv2-radius)} /* lists: quiet check-style bullets, one list language */ .srv2 .op-problem ul,.srv2 .controlled-solution ul,.srv2 .advisors-consultants ul,.srv2 .partner_section_lines{list-style:none;margin:0 0 var(--srv2-s3);padding:0;display:grid;gap:12px} .srv2 .op-problem li,.srv2 .controlled-solution li,.srv2 .advisors-consultants li,.srv2 .partner_section_lines p{position:relative;padding:12px 16px 12px 44px;margin:0;background:#fff;border:1px solid var(--srv2-line);border-radius:12px;font-size:1rem;line-height:1.55;color:var(--srv2-ink)} .srv2 .controlled-solution li,.srv2 .advisors-consultants li{background:#fff} .srv2 .op-problem li::before,.srv2 .controlled-solution li::before,.srv2 .advisors-consultants li::before,.srv2 .partner_section_lines p::before{content:"";position:absolute;left:16px;top:1.05em;width:14px;height:14px;border-radius:50%;background:var(--srv2-blue);box-shadow:inset 0 0 0 4px #dbe7fb} .srv2 .governance-assurance ul{margin:0 0 var(--srv2-s3);padding-left:1.2em} /* cards */ .srv2 .diff-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--srv2-s3);margin-top:var(--srv2-s4)} .srv2 .diff-card,.srv2 .srv2-card{background:#fff;border:1px solid var(--srv2-line);border-radius:var(--srv2-radius);padding:var(--srv2-s3);box-shadow:0 8px 24px rgba(15,27,53,.06)} .srv2 .diff-card h3,.srv2 .srv2-card__title{font-size:var(--srv2-t-h3);font-weight:700;color:var(--srv2-navy);margin:var(--srv2-s1) 0} .srv2 .diff-card p,.srv2 .srv2-card__text{font-size:.98rem;line-height:1.6;color:var(--srv2-muted);margin:0} .srv2 .diff-icon{width:44px;height:44px;display:flex;align-items:center;justify-content:center;border-radius:12px;background:var(--srv2-soft);font-size:1.3rem} /* trust strip, chips, triple */ .srv2 .srv2-badges{display:flex;justify-content:center;gap:var(--srv2-s3);flex-wrap:wrap} .srv2 .srv2-badge{display:flex;align-items:center;gap:10px;font-weight:600;font-size:.92rem;color:var(--srv2-muted)} .srv2 .srv2-chips{display:flex;flex-wrap:wrap;gap:10px;justify-content:center} .srv2 .srv2-chip{display:inline-flex;align-items:center;min-height:44px;box-sizing:border-box;padding:10px 18px;border:1px solid var(--srv2-line);border-radius:999px;background:#fff;font-size:.92rem;font-weight:600;color:var(--srv2-navy);text-decoration:none} .srv2 .srv2-chip:hover{border-color:var(--srv2-blue);color:var(--srv2-blue)} .srv2 .srv2-triple{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--srv2-s4)} .srv2 .srv2-triple__item{text-align:center;padding:0 var(--srv2-s2)} .srv2 .srv2-triple__item+.srv2-triple__item{border-left:1px solid rgba(167,210,255,.22)} .srv2 .srv2-triple__head{font-family:var(--srv2-serif);font-style:italic;font-size:1.6rem;color:var(--srv2-ice);margin:0 0 var(--srv2-s1)} .srv2 .srv2-triple__text{font-size:1rem;line-height:1.6;color:rgba(255,255,255,.82);margin:0} .srv2 .srv2-band__title.srv2-band__title--onnavy,.srv2 .outcome-anchor .srv2-band__title--onnavy{color:#fff;margin-bottom:var(--srv2-s4)} /* closing bands */ .srv2 .primary-cta,.srv2 .structure-further{position:relative;isolation:isolate;padding:var(--srv2-s6) 0;background:var(--srv2-navy);color:#fff;text-align:center;overflow:hidden} .srv2 .primary-cta{background:linear-gradient(180deg,var(--srv2-navy) 0%,#16274a 100%)} .srv2 .cta-overlay,.srv2 .structure-further-bg,.srv2 .structure-further-overlay{display:none} .srv2 .structure-further h2,.srv2 .primary-cta h2{color:#fff} .srv2 .structure-further-copy p{color:rgba(255,255,255,.86);text-align:center;margin:0 0 var(--srv2-s3)} .srv2 .srv2-band--cta .srv2-cta-note,.srv2 .primary-cta .srv2-cta-note,.srv2 .structure-further .srv2-cta-note{color:rgba(255,255,255,.7)} /* ---- 4. hero (P0A §8): centred, colour image, navy veil, serif-italic second line, pill buttons; built from srv2-hero* so the old forced-priority mobile rules in servadra.css never match ---- */ .srv2 .srv2-hero{position:relative;isolation:isolate;display:flex;align-items:center;justify-content:center;text-align:center;color:#fff;overflow:hidden;background:var(--srv2-navy);min-height:100vh;padding:var(--srv2-s6) 0 var(--srv2-s5);box-sizing:border-box} .srv2 .srv2-hero .srv2-hero__img{position:absolute;inset:0;width:100%;height:100%;z-index:-2;object-fit:cover;object-position:50% 42%;filter:brightness(.74) contrast(1.04)} .srv2 .srv2-hero__veil{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(15,27,53,.62) 0%,rgba(15,27,53,.16) 40%,rgba(15,27,53,.55) 78%,var(--srv2-navy) 100%)} .srv2 .srv2-hero__inner{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;max-width:820px;padding:0 var(--srv2-s3);box-sizing:border-box} .srv2 .srv2-hero h1{margin:0;font-size:var(--srv2-t-h1);line-height:1.06;font-weight:700;letter-spacing:-.02em;color:#fff} .srv2 .srv2-h1-a{display:block;color:#fff} .srv2 .srv2-h1-b{display:block;font-family:var(--srv2-serif);font-style:italic;font-weight:300;color:var(--srv2-ice)} .srv2 .srv2-hero__sub{max-width:640px;margin:var(--srv2-s3) 0 0;font-size:1.1rem;line-height:1.6;color:rgba(255,255,255,.92)} .srv2 .srv2-hero .hero-sub-emphasis{display:block;margin-top:.6rem;font-weight:600;color:#fff} .srv2 .srv2-hero .hero-support{max-width:620px;margin:var(--srv2-s2) 0 var(--srv2-s3);font-size:.98rem;color:rgba(255,255,255,.78)} .srv2 .srv2-hero .hero-trust-strip{order:-1;margin:0 0 var(--srv2-s2);color:var(--srv2-ice);font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;font-weight:600} .srv2 .srv2-hero .hero-msr-teaser{margin:var(--srv2-s2) 0 0} .srv2 .srv2-hero .hero-msr-teaser a{color:rgba(255,255,255,.8);text-decoration:none;border-bottom:1px solid rgba(255,255,255,.3)} .srv2 .srv2-hero .hero-msr-teaser a:hover{border-color:var(--srv2-amber)} /* inner pages: banded hero (image via modifier class, scroll not fixed) */ .srv2 .srv2-hero--band{min-height:64vh;padding:120px 0 88px;background-size:cover;background-position:center} .srv2 .srv2-hero--helps{background-image:url('/site/assets/images/how-servadra-helps-hero.png')} .srv2 .srv2-hero--spots{background-image:url('/site/assets/images/howservadraworks1.png')} .srv2 .srv2-hero--ads,.srv2 .srv2-hero--social{background-image:url('/site/assets/images/servadra_commercials_hero.png')} .srv2 .srv2-hero--band .srv2-hero__veil{z-index:0;background:linear-gradient(180deg,rgba(15,27,53,.78) 0%,rgba(15,27,53,.62) 60%,var(--srv2-navy) 100%)} .srv2 .srv2-hero--band h1{font-size:clamp(2rem,4.6vw,3.3rem);line-height:1.12} /* ---- 5. mobile (servadra.css breakpoint is 900px; phone target 390x844): single column, readable scale, CTA in first view ---- */ @media (max-width:900px){ .srv2{--srv2-s6:56px;--srv2-s5:40px} .srv2 .op-problem-wrap,.srv2 .solution-grid,.srv2 .ga-wrap,.srv2 .ac-wrap,.srv2 .partner_trust_wrap{grid-template-columns:1fr;gap:var(--srv2-s4)} .srv2 .srv2-triple{grid-template-columns:1fr;gap:var(--srv2-s3)} .srv2 .srv2-triple__item+.srv2-triple__item{border-left:0;border-top:1px solid rgba(167,210,255,.22);padding-top:var(--srv2-s3)} .srv2 .srv2-hero{min-height:auto;padding:104px 0 var(--srv2-s5)} .srv2 .srv2-hero--band{min-height:auto;padding:104px 0 var(--srv2-s5)} .srv2 .srv2-hero__sub{font-size:1rem} .srv2 .srv2-hero .hero-trust-strip{letter-spacing:.14em;font-size:.72rem} .srv2 .sd-cta-group{flex-direction:column;gap:12px;width:100%} .srv2 .srv2-cta{min-width:0;width:100%;max-width:340px;min-height:48px;box-sizing:border-box} .srv2 .diff-grid{grid-template-columns:1fr} .srv2 .srv2-badges{gap:var(--srv2-s2);flex-direction:column;align-items:flex-start} .srv2 .container,.srv2 .container.narrow,.srv2 .srv2-narrow,.srv2 .srv2-wide,.srv2 .seo-svc-wrap{padding-left:var(--srv2-s2);padding-right:var(--srv2-s2)} } @media (max-width:430px){ .srv2 .srv2-hero h1{font-size:clamp(2rem,9.4vw,2.6rem)} } /* ---- 6. buttons: fully rounded pills. primary = brand blue; secondary = white, translucent outline on dark bands ---- */ .srv2 .sd-cta-group{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;align-items:center} .srv2 .srv2-cta{display:inline-flex;align-items:center;justify-content:center;position:relative;overflow:hidden;min-width:240px;gap:10px;padding:15px 28px;border-radius:999px;text-decoration:none;font-family:var(--srv2-sans);font-size:16px;font-weight:700;line-height:1.2;box-sizing:border-box;cursor:pointer;transition:transform .22s ease,box-shadow .22s ease,background .22s ease,border-color .22s ease} .srv2 .srv2-cta--primary{background:var(--srv2-blue);color:#fff;border:1px solid var(--srv2-blue);box-shadow:0 8px 24px rgba(15,27,53,.28)} .srv2 .srv2-cta--primary:hover{background:#2a52a3;border-color:#2a52a3;transform:translateY(-2px);box-shadow:0 12px 28px rgba(15,27,53,.36)} .srv2 .srv2-cta--primary:focus-visible{outline:2px solid var(--srv2-amber);outline-offset:3px} .srv2 .srv2-cta--secondary{background:#fff;color:var(--srv2-navy);border:1px solid var(--srv2-blue);box-shadow:0 8px 24px rgba(15,27,53,.10)} .srv2 .srv2-cta--secondary:hover{background:#f5f9ff;transform:translateY(-2px);box-shadow:0 12px 28px rgba(15,27,53,.18)} .srv2 .srv2-hero .srv2-cta--secondary,.srv2 .srv2-hero .srv2-cta--secondary,.srv2 .primary-cta .srv2-cta--secondary{background:rgba(255,255,255,.10);color:#fff;border-color:rgba(255,255,255,.55);box-shadow:none} .srv2 .srv2-hero .srv2-cta--secondary:hover,.srv2 .srv2-hero .srv2-cta--secondary:hover,.srv2 .primary-cta .srv2-cta--secondary:hover{background:rgba(255,255,255,.20)} .srv2 .srv2-cta__shine{position:absolute;top:0;left:-120%;width:70%;height:100%;background:linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.28) 50%,rgba(255,255,255,0) 100%);transform:skewX(-20deg);transition:left .65s ease;pointer-events:none} .srv2 .srv2-cta:hover .srv2-cta__shine{left:140%} .srv2 .srv2-cta-note{margin-top:14px;text-align:center;color:#6b7280;font-size:13px;font-weight:400} /* ---- 7. header nav: white/blue pill ---- */ .srv2 .site-header .nav-link.nav-cta{border-radius:999px;background:#fff;color:var(--srv2-blue);border:1px solid var(--srv2-blue);padding:9px 18px;font-weight:600} /* ---- 8. srv2-* helpers (finder form + page parts); replace the former single-use s2* rules ---- */ .srv2 p.srv2-gap-top{margin-top:12px} .srv2 .srv2-cta-tagline{margin:0 0 16px;font-size:1.05rem;font-weight:600;letter-spacing:0.2px} .srv2 .srv2-slr-center{text-align:center} .srv2 .srv2-checklist{list-style:none;padding:0;margin:0;display:grid;gap:14px} .srv2 .srv2-slr-consent-text{font-size:13px;color:#94a3b8;line-height:1.5} .srv2 .srv2-slr-head{text-align:center;margin-bottom:32px} .srv2 .srv2-slr-title{color:#fff;font-size:clamp(22px,4vw,30px);margin:0 0 10px;line-height:1.3} .srv2 .srv2-slr-consent{display:flex;align-items:flex-start;gap:10px;cursor:pointer;margin-bottom:20px} .srv2 .srv2-amber-link{color:#f59e0b} .srv2 .srv2-slr-done-title{color:#fff;font-size:22px;margin:0 0 10px} .srv2 .srv2-slr-back{background:transparent;border:1px solid #2d4068;color:#94a3b8;border-radius:9px;padding:12px 24px;font-size:14px;cursor:pointer} .srv2 .srv2-slr-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px} .srv2 .srv2-head-gap{margin-bottom:24px} .srv2 p.srv2-closing-line{margin-top:20px} .srv2 p.srv2-callout{font-weight:700;font-size:1.15rem;color:#0f1b35} .srv2 .srv2-slr-error{color:#f87171;font-size:13px;text-align:center;margin:10px 0 0;display:none} .srv2 .srv2-body-p{font-size:1rem;color:#374151;line-height:1.6;margin:0} .srv2 .srv2-slr-actions{display:flex;gap:12px;align-items:center;justify-content:center;flex-wrap:wrap} .srv2 .srv2-slr-input{width:100%;box-sizing:border-box;background:#1e2d4a;border:1px solid #2d4068;border-radius:9px;padding:11px 13px;color:#e2e8f0;font-size:14px;font-family:inherit;outline:none} .srv2 .srv2-slr-submit{background:#f59e0b;color:#0f1b35;border:none;border-radius:9px;padding:14px 40px;font-size:16px;font-weight:700;cursor:pointer;transition:opacity 0.2s} .srv2 p.srv2-caption{width:100%;max-width:380px;text-align:center;font-size:12px;color:#9ca3af;margin:8px auto 0} .srv2 .srv2-h2-sm{font-size:1.6rem;margin:0 0 16px} .srv2 .srv2-slr-option-text{font-size:14px;color:#cbd5e1;line-height:1.5} .srv2 .srv2-sample-img{max-width:380px} .srv2 .srv2-slr-next{background:#f59e0b;color:#0f1b35;border:none;border-radius:9px;padding:14px 40px;font-size:16px;font-weight:700;cursor:pointer;opacity:0.45;pointer-events:none;transition:opacity 0.2s} .srv2 .srv2-slr-wrap{max-width:760px;margin:0 auto;padding:0 20px} .srv2 .srv2-slr-fine{color:#64748b;font-size:13px;margin:0} .srv2 .srv2-body-lead{font-size:1rem;color:#374151;line-height:1.6;margin:0 0 20px} .srv2 .srv2-slr-consent-box{margin-top:3px;accent-color:#f59e0b;width:15px;height:15px;flex-shrink:0} .srv2 .srv2-slr-sub{color:#94a3b8;font-size:15px;margin:0} .srv2 .srv2-checklist-lg{list-style:none;padding:0;margin:0 0 20px;display:grid;gap:14px} .srv2 .srv2-slr-done-text{color:#94a3b8;font-size:15px;margin:0 0 6px} .srv2 .srv2-slr-label{display:block;font-size:12px;color:#94a3b8;margin-bottom:5px;font-weight:600} .srv2 .srv2-hidden{display:none} .srv2 .srv2-slr-textarea{width:100%;box-sizing:border-box;background:#1e2d4a;border:1px solid #2d4068;border-radius:9px;padding:12px 14px;color:#e2e8f0;font-size:14px;font-family:inherit;resize:vertical;outline:none;margin-bottom:16px} .srv2 .srv2-slr-done{display:none;text-align:center;padding:20px 0} .srv2 .srv2-slr-hint{color:#64748b;font-size:12px;margin:10px 0 0} .srv2 .srv2-slr-option{display:flex;align-items:flex-start;gap:10px;background:#1e2d4a;border:1px solid #2d4068;border-radius:9px;padding:12px 14px;cursor:pointer;transition:border-color 0.2s,background 0.2s} .srv2 .srv2-media-col{margin-top:24px;flex-direction:column;align-items:center} .srv2 .srv2-slr-options{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:10px;margin-bottom:18px} .srv2 .srv2-slr-tick{font-size:48px;margin-bottom:16px} .srv2 .srv2-slr-check{margin-top:2px;accent-color:#f59e0b;width:16px;height:16px;flex-shrink:0} .srv2 .srv2-slr-finder{background:#0f1b35;padding:52px 0 48px;display:none} .srv2 .srv2-slr-kicker{font-size:11px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:#f59e0b;margin:0 0 10px} .srv2 .srv2-cta-line{margin:0 0 20px;font-size:1.5rem;font-weight:700;line-height:1.3} /* ---- 10. BUG-730: heading treatment, balanced grids, tight bands, capped media (appearance only) ---- */ /* inner-page band heroes fill the first screen on desktop (same as the index hero), so the fixed cookie strip covers only the hero at load */ @media (min-width:901px){.srv2 .srv2-hero--band{min-height:max(520px,calc(100vh - 70px))}} /* band-hero H1: wide enough that the italic second line does not orphan a word; balanced wrapping on both lines */ .srv2 .srv2-hero--band .srv2-hero__inner{max-width:1000px} .srv2 .srv2-hero--band h1{font-size:clamp(2rem,3.9vw,3.1rem)} .srv2 .srv2-hero h1 .srv2-h1-a,.srv2 .srv2-hero h1 .srv2-h1-b{text-wrap:balance} /* white bands, one rhythm: the page-local nth-child(even) grey is neutralised; soft bands are opt-in (srv2-band--soft) */ .srv2 .seo-svc-section:nth-child(n){background:var(--srv2-white)} .srv2 .seo-svc-section.srv2-band--soft:nth-child(n){background:var(--srv2-soft)} .srv2 .seo-svc-section{padding:var(--srv2-s5) 0} .srv2 .seo-svc-section .seo-svc-lead{margin:0 auto var(--srv2-s4)} /* one-line text bands: no 96px slabs around a single sentence; centred, one measure */ .srv2 .seo-svc-section.srv2-band--tight{padding:var(--srv2-s4) 0} .srv2 .seo-svc-section.srv2-band--note{padding:var(--srv2-s2) 0} .srv2 .seo-svc-section .pricing-context{margin:0 auto;max-width:860px} .srv2 .seo-svc-section .channel-line{margin:0 auto;max-width:760px;text-align:center} .srv2 .seo-svc-section .disclaimer-note,.srv2 .seo-svc-section .pricing-refer{margin:0 auto;max-width:860px;text-align:center} /* balanced grids: every row full (6 and 3 cards = 3-up; 8 cards = 4-up / 2-up / 1-up) */ @media (min-width:901px){.srv2 .diff-grid{grid-template-columns:repeat(3,minmax(0,1fr))}} .srv2 .srv2-card-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px} @media (max-width:1100px){.srv2 .srv2-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:560px){.srv2 .srv2-card-grid{grid-template-columns:1fr}} /* two-column media: portrait art is capped and scaled proportionally, never dominating its band */ .srv2 .op-problem-media img,.srv2 .ga-media img,.srv2 .ac-media img,.srv2 .partner_trust_media img,.srv2 .solution-card img{width:auto;max-width:100%;height:auto;max-height:540px;margin-left:auto;margin-right:auto} /* report sample keeps its own 380px cap (declared after the generic media rule above) */ .srv2 .partner_trust_media img.srv2-sample-img{width:100%;max-width:380px;max-height:none;margin-left:0;margin-right:0} /* related-guides strip: label centred over the chips, wide enough for one balanced row */ .srv2 .srv2-band--strip .srv2-narrow{max-width:1120px} .srv2 .srv2-band--strip .srv2-eyebrow{text-align:center} /* ---- 11. SAP-832-P2 — layout 2 (content / corporate). Appended only; every selector is rooted .srv2; uses classes that no layout-1 page carries, except the shared band classes above which are not modified. ---- */ /* hero variants for the band hero */ .srv2 .srv2-hero--plain{background:var(--srv2-navy)} .srv2 .srv2-l2 .srv2-hero--plain .srv2-hero__veil{background:linear-gradient(180deg,rgba(15,27,53,.3),rgba(15,27,53,.55))} .srv2 .srv2-hero__copy{max-width:720px;margin:var(--srv2-s3) auto 0} .srv2 .srv2-hero__copy p{margin:6px 0;font-size:1.02rem;line-height:1.6;color:rgba(255,255,255,.88)} .srv2 .srv2-l2 .srv2-hero__sub+.srv2-hero__sub{margin-top:var(--srv2-s2)} .srv2 .srv2-eyebrow--onnavy{color:var(--srv2-ice);text-align:center} .srv2 .srv2-l2 .srv2-hero .sd-cta-group{margin-top:var(--srv2-s4)} .srv2 .srv2-l2 .srv2-hero .srv2-cta-note{color:rgba(255,255,255,.75)} /* utilities that replace the former inline styles */ .srv2 .srv2-center{text-align:center} .srv2 .srv2-h2--spaced{margin-bottom:var(--srv2-s4)} .srv2 .srv2-copy{color:var(--srv2-ink);line-height:1.75;margin:0} .srv2 .srv2-copy--lg{margin-bottom:var(--srv2-s3)} .srv2 .srv2-copy--gap{margin:var(--srv2-s3) 0} .srv2 .srv2-copy--top{margin:var(--srv2-s3) 0 0;color:var(--srv2-muted)} .srv2 .srv2-l2 .srv2-band--tight{padding:var(--srv2-s4) 0} .srv2 .srv2-l2 .srv2-band--cta>*{max-width:860px;margin-left:auto;margin-right:auto;padding-left:var(--srv2-s3);padding-right:var(--srv2-s3);box-sizing:border-box} .srv2 .srv2-cta-title{color:#fff;font-size:var(--srv2-t-h2);line-height:1.15;font-weight:700;margin:0 0 var(--srv2-s2)} .srv2 .srv2-cta-lead{color:rgba(255,255,255,.82);margin:0 auto var(--srv2-s3);max-width:640px} .srv2 .srv2-footnote-ref{color:var(--srv2-muted);font-size:.8em;vertical-align:super;text-decoration:none} .srv2 .srv2-narrow-760{max-width:760px;margin:0 auto} .srv2 .srv2-narrow-640{max-width:640px} .srv2 .srv2-wide-1180{max-width:1180px} .srv2 .srv2-mt-18{margin-top:18px} .srv2 .srv2-mt-20{margin-top:20px} .srv2 .srv2-mt-24{margin-top:24px} .srv2 .srv2-mb-8{margin-bottom:8px} .srv2 .srv2-mb-16{margin-bottom:16px} .srv2 .srv2-flush{margin:0} .srv2 .srv2-fineprint{font-size:.8rem;color:var(--srv2-muted);margin-top:var(--srv2-s3);text-align:center} .srv2 .srv2-fineprint--left{text-align:left;font-size:.85rem;line-height:1.6} .srv2 .srv2-figure{text-align:center;margin:var(--srv2-s3) 0} .srv2 .srv2-figure__img{max-width:480px;width:100%;height:auto;border-radius:var(--srv2-radius)} .srv2 .srv2-figure__cap{font-size:.85rem;color:var(--srv2-muted);margin-top:8px} .srv2 .srv2-media-frame{max-width:420px;width:100%;margin:0 auto;display:flex;justify-content:center;align-items:center} .srv2 .srv2-media-img{display:block;width:100%;max-width:420px;height:auto;object-fit:contain;border-radius:16px} .srv2 .srv2-link--strong{font-weight:700} .srv2 .srv2-link--plain{font-weight:500;border-bottom:0} .srv2 .srv2-grid-cta{grid-column:1/-1;background:var(--srv2-navy);color:#fff;padding:var(--srv2-s3) var(--srv2-s2);text-align:center;border-radius:var(--srv2-radius);margin:var(--srv2-s1) 0} .srv2 .srv2-l2 .srv2-band--strip.srv2-band--soft{background:var(--srv2-soft)} /* page sections of layout 2: one rhythm (white / soft bands, navy closing band), one heading + text style */ .srv2 .srv-section-alt,.srv2 .flow-section,.srv2 .structure-value-scout,.srv2 .structure-stability,.srv2 .inv-section:nth-of-type(even),.srv2 .commercial-monitoring,.srv2 .commercial-first30{background:var(--srv2-soft)} .srv2 .structure-meridian,.srv2 .structure-steward,.srv2 .structure-control,.srv2 .structure-why,.srv2 .commercial-structured,.srv2 .commercial-escalation,.srv2 .inv-section,.srv2 .partner_contact,.srv2 .seo-section,.srv2 .scenario-library-section{background:var(--srv2-white)} .srv2 .srv-section-alt,.srv2 .flow-section,.srv2 .structure-meridian,.srv2 .structure-value-scout,.srv2 .structure-steward,.srv2 .structure-control,.srv2 .structure-stability,.srv2 .structure-why, .srv2 .commercial-structured,.srv2 .commercial-monitoring,.srv2 .commercial-escalation,.srv2 .commercial-first30,.srv2 .inv-section,.srv2 .partner_contact,.srv2 .seo-section,.srv2 .scenario-library-section{padding:var(--srv2-s5) 0;border:0;background-image:none} .srv2 .srv-cta-dark,.srv2 .seo-svc-final,.srv2 .inv-cta-banner{background:var(--srv2-navy);color:#fff;text-align:center;padding:var(--srv2-s5) 0} .srv2 .srv-cta-dark h2,.srv2 .seo-svc-final h2,.srv2 .inv-cta-banner h2{color:#fff} .srv2 .srv-cta-dark p,.srv2 .seo-svc-final p,.srv2 .inv-cta-banner p{color:rgba(255,255,255,.82)} .srv2 .srv-section-alt h2,.srv2 .flow-section h2,.srv2 .structure-meridian h2,.srv2 .structure-value-scout h2,.srv2 .structure-steward h2,.srv2 .structure-control h2,.srv2 .structure-stability h2,.srv2 .structure-why h2, .srv2 .commercial-structured h2,.srv2 .commercial-monitoring h2,.srv2 .commercial-escalation h2,.srv2 .commercial-first30 h2,.srv2 .inv-section h2,.srv2 .partner_contact h2,.srv2 .seo-section h2,.srv2 .scenario-library-section h2{font-family:var(--srv2-sans);font-size:var(--srv2-t-h2);line-height:1.15;font-weight:700;letter-spacing:-.015em;color:var(--srv2-navy);margin:0 0 var(--srv2-s3)} .srv2 .srv-section-alt p,.srv2 .flow-section p,.srv2 .structure-meridian p,.srv2 .structure-value-scout p,.srv2 .structure-steward p,.srv2 .structure-control p,.srv2 .structure-stability p,.srv2 .structure-why p, .srv2 .commercial-structured p,.srv2 .commercial-monitoring p,.srv2 .commercial-escalation p,.srv2 .commercial-first30 p,.srv2 .inv-section p,.srv2 .seo-section p{font-size:var(--srv2-t-body);line-height:1.68;color:var(--srv2-ink)} .srv2 .seo-wrap{max-width:1120px;margin:0 auto;padding:0 var(--srv2-s3);box-sizing:border-box} @media (max-width:900px){ .srv2 .srv2-hero__copy{margin-top:var(--srv2-s2)} .srv2 .srv2-l2 .srv2-band--tight{padding:var(--srv2-s3) 0} .srv2 .seo-wrap{padding:0 var(--srv2-s2)} } /* ---- 12. layout 2 — review round 1 (all rules rooted at .srv2 .srv2-l2, i.e. layout-2 pages only) ---- */ /* portrait art beside copy is capped and scaled proportionally, never dominating its band */ .srv2 .srv2-l2 .partner_section_media img,.srv2 .srv2-l2 .structured-media img,.srv2 .srv2-l2 .monitoring-media img,.srv2 .srv2-l2 .escalation-media img,.srv2 .srv2-l2 .first30-media img, .srv2 .srv2-l2 .meridian-media img,.srv2 .srv2-l2 .value-scout-media img,.srv2 .srv2-l2 .steward-media img,.srv2 .srv2-l2 .flow-media img,.srv2 .srv2-l2 .control-media img, .srv2 .srv2-l2 .stability-media img,.srv2 .srv2-l2 .why-media img,.srv2 .srv2-l2 .ac-media img{display:block;width:auto;max-width:100%;height:auto;max-height:540px;margin-left:auto;margin-right:auto;border-radius:var(--srv2-radius);box-shadow:var(--srv2-shadow)} /* package cards: 5 cards = a full first row of 3 and a full second row of 2 (never a single orphan card) */ .srv2 .srv2-l2 .pkg-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:20px;align-items:stretch;margin-bottom:var(--srv2-s4)} .srv2 .srv2-l2 .pkg-grid>*{grid-column:span 2} .srv2 .srv2-l2 .pkg-grid>*:nth-child(n+4){grid-column:span 3} @media (max-width:1100px){ .srv2 .srv2-l2 .pkg-grid{grid-template-columns:repeat(2,minmax(0,1fr))} .srv2 .srv2-l2 .pkg-grid>*,.srv2 .srv2-l2 .pkg-grid>*:nth-child(n+4){grid-column:auto} .srv2 .srv2-l2 .pkg-grid>*:last-child:nth-child(odd){grid-column:1/-1} } @media (max-width:640px){ .srv2 .srv2-l2 .pkg-grid{grid-template-columns:1fr} .srv2 .srv2-l2 .pkg-grid>*,.srv2 .srv2-l2 .pkg-grid>*:last-child:nth-child(odd){grid-column:auto} } /* seo-ranking-service "why different": copy and art top-aligned; the three proof cards run full width of the copy column instead of three slivers */ .srv2 .srv2-l2 #why-different .partner_trust_wrap{align-items:start} .srv2 .srv2-l2 #why-different .diff-grid{grid-template-columns:1fr;gap:var(--srv2-s2);margin-top:var(--srv2-s3)} /* phones: the band hero fills the first screen (as on desktop) so the fixed cookie strip covers only the hero at load */ @media (max-width:900px){ .srv2 .srv2-l2 .srv2-hero--band{min-height:100svh} } /* ---- 13. layout 2 — review round 3: seo-ranking-service "why different" band on wide screens: art and lead copy side by side, the three proof cards full width beneath (no empty column under the art). Rooted at .srv2 .srv2-l2 #why-different. ---- */ @media (min-width:901px){ .srv2 .srv2-l2 #why-different .partner_trust_content{display:contents} .srv2 .srv2-l2 #why-different .partner_trust_wrap{align-items:center;row-gap:var(--srv2-s3)} .srv2 .srv2-l2 #why-different .partner_trust_media{grid-column:1;grid-row:1/span 2} .srv2 .srv2-l2 #why-different .partner_trust_content>h2,.srv2 .srv2-l2 #why-different .partner_trust_content>p{grid-column:2} .srv2 .srv2-l2 #why-different .diff-grid{grid-column:1/-1;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:var(--srv2-s2)} } /* ---- 14. BUG-730 round 2 (appearance only): pills strip (was legacy s2*), tighter band rhythm, Related Questions restyle, reserved image boxes ---- */ .srv2 .industry-pills.srv2-pills{background:#ffffff;padding:18px 0 22px;border-bottom:1px solid #eee} .srv2 .srv2-pills .srv2-pills__inner{max-width:980px;margin:0 auto;padding:0 20px;text-align:center} .srv2 .srv2-pills .srv2-pills__label{font-size:13px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:#6b7280;margin:0 0 14px} .srv2 .srv2-pills .srv2-pills__row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;max-width:820px;margin:0 auto} .srv2 .srv2-pills .srv2-pills__pill{text-align:center} @media (max-width:560px){.srv2 .srv2-pills .srv2-pills__row{grid-template-columns:repeat(2,minmax(0,1fr));max-width:420px}} .srv2 .srv2-pills .srv2-pills__pill{background:#f9fafb;border:1px solid #e5e7eb;border-radius:999px;padding:8px 16px;font-size:14px;font-weight:600;color:#0f1b35} /* desktop rhythm: 56px top/bottom per band (was 96/64) so no blank band between content exceeds ~120px */ @media (min-width:901px){ .srv2 .srv2-band,.srv2 .op-problem,.srv2 .controlled-solution,.srv2 .governance-assurance,.srv2 .advisors-consultants,.srv2 .partner_trust,.srv2 .partner_section,.srv2 .outcome-anchor,.srv2 .seo-svc-section{padding-top:56px;padding-bottom:56px} .srv2 .seo-svc-section.srv2-band--tight{padding-top:40px;padding-bottom:40px} .srv2 .seo-svc-section.srv2-band--note{padding-top:16px;padding-bottom:16px} } /* spots "Fewer missed signals": one centred narrow list with even spacing, no trailing margins */ .srv2 .partner_section .partner_section_lines{max-width:760px;margin:0 auto 12px} .srv2 .partner_section .partner_section_lines+p.srv2-closing-line{margin-top:var(--srv2-s3);margin-bottom:0;text-align:center} .srv2 .partner_section>.container>p:first-of-type{text-align:center} .srv2 .partner_section .partner_section_lines:last-of-type{margin-bottom:0} .srv2 .partner_section .partner_section_lines p{text-align:left} /* the shared .referral_model_content adds a 60px bottom margin inside partner_section bands */ .srv2 .partner_section .referral_model_content{margin-bottom:0} /* Related Questions (includes/dynamic-faq.php, shared: styled from here only) */ .srv2 .dynamic-faq{background:var(--srv2-white);padding:56px var(--srv2-s3);margin:0} .srv2 .dynamic-faq h2{font-family:var(--srv2-sans);font-size:var(--srv2-t-h2);line-height:1.15;font-weight:700;letter-spacing:-.015em;color:var(--srv2-navy);text-align:center;max-width:860px;margin:0 auto var(--srv2-s4)} .srv2 .dynamic-faq details{max-width:860px;margin:0 auto 12px;background:#fff;border:1px solid var(--srv2-line);border-radius:12px;box-shadow:0 8px 24px rgba(15,27,53,.06);overflow:hidden} .srv2 .dynamic-faq summary{padding:16px 20px;font-family:var(--srv2-sans);font-size:1rem;font-weight:600;line-height:1.45;color:var(--srv2-navy)} .srv2 .dynamic-faq summary::after{content:"";width:9px;height:9px;margin-left:16px;font-size:0;border-right:2px solid var(--srv2-blue);border-bottom:2px solid var(--srv2-blue);transform:rotate(45deg) translateY(-2px);transition:transform .2s ease} .srv2 .dynamic-faq details[open]>summary::after{content:"";transform:rotate(-135deg) translateY(-2px)} .srv2 .dynamic-faq details[open]>summary{border-bottom:1px solid var(--srv2-line);background:var(--srv2-soft)} .srv2 .dynamic-faq details p{padding:14px 20px 18px;font-size:1rem;line-height:1.68;color:var(--srv2-ink)} @media (max-width:900px){.srv2 .dynamic-faq{padding:40px var(--srv2-s2)}} /* reserved image boxes (lazy images): aspect-ratio + width matching the 540px cap, so height is known before load */ .srv2 .op-problem-media img[src$="/flow1.png"],.srv2 .op-problem-media img[src$="/servada-workflow.png"],.srv2 .ga-media img[src$="/flow1.png"],.srv2 .partner_trust_media img[src$="/flow1.png"],.srv2 .partner_trust_media img[src$="/servada-workflow.png"]{aspect-ratio:2/3;width:min(100%,360px)} .srv2 .op-problem-media img[src$="/servadra_operational_problem.png"],.srv2 .op-problem-media img[src$="/servadra_operational_problem2.png"],.srv2 .partner_trust_media img[src$="/servadra_operational_problem.png"],.srv2 .partner_trust_media img[src$="/servadra_operational_problem2.png"],.srv2 .partner_trust_media img[src$="/monitoring_behaviour_control.png"],.srv2 .partner_trust_media img[src$="/common-problems.png"],.srv2 .partner_trust_media img[src$="/why-servadra-stays-controlled.png"],.srv2 .ga-media img[src$="/monitoring_behaviour_control.png"],.srv2 .ga-media img[src$="/why-servadra-stays-controlled.png"]{aspect-ratio:3/2;width:min(100%,810px)} .srv2 .ac-media img[src$="/servadra_advisors_consultants.png"],.srv2 .ga-media img[src$="/servadra_govenance_assurance.png"]{aspect-ratio:1/1;width:min(100%,540px)} .srv2 .partner_trust_media img.srv2-sample-img{aspect-ratio:1190/1684} /* ---- 15. BUG-740: layout-2 finish (appearance only) ---- */ /* Short-copy heroes size to their content instead of filling the viewport. */ @media (min-width:901px){ .srv2 .srv2-l2 #hero,.srv2 .srv2-l2 #contact-header,.srv2 .srv2-l2 #faq-hero{min-height:520px} } /* FAQ emits the protected component without its legacy inline presentation; these scoped rules provide the layout-1 pill treatment while the component source remains untouched. */ .srv2 .srv2-l2 .srv2-faq-cta-group{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:16px;margin-top:28px} .srv2 .srv2-l2 .srv2-faq-cta{display:inline-flex;align-items:center;justify-content:center;min-width:220px;padding:14px 24px;border-radius:999px;text-decoration:none;font-size:16px;font-weight:700;line-height:1.2;box-sizing:border-box;transition:background .2s ease,border-color .2s ease,box-shadow .2s ease} .srv2 .srv2-l2 .srv2-faq-cta--primary{background:var(--srv2-blue);color:#fff;border:1px solid var(--srv2-blue);box-shadow:0 10px 28px rgba(47,111,228,.28)} .srv2 .srv2-l2 .srv2-faq-cta--primary:hover{background:#245fc9;border-color:#245fc9;box-shadow:0 12px 30px rgba(47,111,228,.36)} .srv2 .srv2-l2 .srv2-faq-cta--secondary{background:#fff;color:var(--srv2-navy);border:1px solid var(--srv2-blue);box-shadow:none} .srv2 .srv2-l2 .srv2-faq-cta--secondary:hover{background:var(--srv2-soft)} .srv2 .srv2-l2 #faq-hero .srv2-faq-cta--secondary{background:transparent;color:#fff;border-color:rgba(255,255,255,.58)} .srv2 .srv2-l2 #faq-hero .srv2-faq-cta--secondary:hover{background:rgba(255,255,255,.12);border-color:#fff} /* FAQ rows use the approved bordered-card language with a quiet directional chevron. */ .srv2 .srv2-l2 .faq-item{position:relative;margin:0 0 14px;padding:20px 54px 20px 22px;background:#fff;border:1px solid var(--srv2-line);border-radius:14px;box-shadow:0 8px 24px rgba(15,27,53,.06)} .srv2 .srv2-l2 .faq-item::after{content:"";position:absolute;top:24px;right:24px;width:9px;height:9px;border-right:2px solid var(--srv2-blue);border-bottom:2px solid var(--srv2-blue);transform:rotate(45deg)} .srv2 .srv2-l2 .faq-item h3{margin:0 0 10px;font-family:var(--srv2-sans);font-size:1.05rem;line-height:1.4;color:var(--srv2-navy)} .srv2 .srv2-l2 .faq-item p{margin:0;font-size:var(--srv2-t-body);line-height:1.65;color:var(--srv2-ink)} .srv2 .srv2-l2 #faq-hero~.seo-section{padding-top:48px;padding-bottom:48px} .srv2 .srv2-l2 #faq-hero~.seo-section:last-of-type{padding-top:28px;padding-bottom:28px} .srv2 .srv2-l2 .dynamic-faq{padding:40px 0} /* Investor sections become alternating bands with one clear grouped card per section. */ .srv2 .srv2-l2 .inv-section{padding:64px 0;background:var(--srv2-white)} .srv2 .srv2-l2 #where-servadra-fits,.srv2 .srv2-l2 #how-servadra-is-different,.srv2 .srv2-l2 #commercial-direction{background:var(--srv2-soft)} .srv2 .srv2-l2 .inv-container{max-width:1040px;padding:34px 40px;background:#fff;border:1px solid var(--srv2-line);border-radius:18px;box-shadow:0 12px 34px rgba(15,27,53,.07);box-sizing:border-box} .srv2 .srv2-l2 .inv-container>h2:first-child{padding-bottom:16px;border-bottom:1px solid var(--srv2-line)} .srv2 .srv2-l2 .inv-container li{margin-bottom:8px;padding:10px 14px 10px 34px;background:var(--srv2-soft);border:1px solid var(--srv2-line);border-radius:10px} .srv2 .srv2-l2 .inv-container li::before{left:14px;top:10px;color:var(--srv2-blue)} @media (max-width:640px){ .srv2 .srv2-l2 #hero{min-height:520px} .srv2 .srv2-l2 #contact-header{min-height:500px} .srv2 .srv2-l2 #faq-hero{min-height:620px} .srv2 .srv2-l2 #partner-hero .srv2-hero__inner{transform:translateY(-96px)} .srv2 .srv2-l2 #hero-investor-overview .srv2-hero__inner{transform:translateY(-42px)} .srv2 .srv2-l2 #faq-hero .srv2-hero__inner{transform:translateY(-42px)} .srv2 .srv2-l2 #hero-seo-ranking .srv2-hero__inner{transform:translateY(-28px)} .srv2 .srv2-l2 .faq-item{padding:18px 46px 18px 18px} .srv2 .srv2-l2 .faq-item::after{top:22px;right:20px} .srv2 .srv2-l2 #faq-hero~.seo-section{padding-top:34px;padding-bottom:34px} .srv2 .srv2-l2 #faq-hero~.seo-section:last-of-type{padding-top:22px;padding-bottom:22px} .srv2 .srv2-l2 .dynamic-faq{padding:28px 0} .srv2 .srv2-l2 .inv-section{padding:38px 16px} .srv2 .srv2-l2 .inv-container{padding:24px 20px} .srv2 .srv2-l2 .srv2-faq-cta-group{flex-direction:column;align-items:stretch} .srv2 .srv2-l2 .srv2-faq-cta{width:100%;min-width:0} } /* ---- 13. layout 3 — scenario pages (rooted .srv2 .srv2-l3; SAP-832-P2B-scen3, 2026-09-22) ---- */ .srv2 .srv2-l3 .srv2-hero__bgwrap{position:absolute;inset:0;z-index:-2;overflow:hidden} .srv2 .srv2-l3 .srv2-hero__bgwrap .srv2-hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 42%;filter:brightness(.74) contrast(1.04)} .srv2 .srv2-l3 .srv2-hero{min-height:88vh} .srv2 .srv2-l3 .srv-scenario-tags{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:var(--srv2-s3) 0 0} .srv2 .srv2-l3 .srv-scenario-tag{display:inline-flex;align-items:center;min-height:36px;box-sizing:border-box;padding:6px 16px;border:1px solid rgba(255,255,255,.35);border-radius:999px;background:rgba(255,255,255,.08);font-size:.82rem;font-weight:600;color:#fff;text-decoration:none} .srv2 .srv2-l3 .srv-scenario-tag:hover{background:rgba(255,255,255,.18);border-color:#fff} /* Family B — .scenario-hero* kept (own markup), styled to the same banded look under l3 */ .srv2 .srv2-l3 .scenario-hero{position:relative;isolation:isolate;display:flex;align-items:center;justify-content:center;text-align:center;color:#fff;overflow:hidden;background:var(--srv2-navy);min-height:88vh;padding:var(--srv2-s6) 0 var(--srv2-s5);box-sizing:border-box} .srv2 .srv2-l3 .scenario-hero-bg{position:absolute;inset:0;z-index:-2;overflow:hidden} .srv2 .srv2-l3 .scenario-hero-bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 42%;filter:brightness(.74) contrast(1.04)} .srv2 .srv2-l3 .scenario-hero-overlay{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(15,27,53,.62) 0%,rgba(15,27,53,.16) 40%,rgba(15,27,53,.55) 78%,var(--srv2-navy) 100%)} .srv2 .srv2-l3 .scenario-hero-inner{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;max-width:820px;padding:0 var(--srv2-s3);box-sizing:border-box} .srv2 .srv2-l3 .scenario-breadcrumb{order:-1;margin:0 0 var(--srv2-s2);color:var(--srv2-ice);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600} .srv2 .srv2-l3 .scenario-breadcrumb a{color:var(--srv2-ice);text-decoration:none} .srv2 .srv2-l3 .scenario-breadcrumb a:hover{text-decoration:underline} .srv2 .srv2-l3 .scenario-hero h1{margin:0;font-size:var(--srv2-t-h1);line-height:1.06;font-weight:700;letter-spacing:-.02em;color:#fff} .srv2 .srv2-l3 .scenario-hero-subtitle{max-width:640px;margin:var(--srv2-s3) 0 0;font-size:1.1rem;line-height:1.6;color:rgba(255,255,255,.92)} .srv2 .srv2-l3 .scenario-hero-text{max-width:620px;margin:var(--srv2-s2) 0 var(--srv2-s3)} .srv2 .srv2-l3 .scenario-hero-text p{font-size:.98rem;line-height:1.6;color:rgba(255,255,255,.78);margin:0 0 8px} /* body-content rhythm, both families */ .srv2 .srv2-l3 .srv-section,.srv2 .srv2-l3 .scenario_content_section{padding:var(--srv2-s6) 0;background:var(--srv2-white)} .srv2 .srv2-l3 .srv-section-alt{padding:var(--srv2-s6) 0;background:var(--srv2-soft)} .srv2 .srv2-l3 .srv-narrow,.srv2 .srv2-l3 .scenario_content_section .container.narrow{max-width:860px;margin:0 auto} .srv2 .srv2-l3 .srv-section h2,.srv2 .srv2-l3 .srv-section-alt h2,.srv2 .srv2-l3 .scenario_section_block h2{font-family:var(--srv2-sans);font-size:var(--srv2-t-h2);line-height:1.15;font-weight:700;letter-spacing:-.015em;color:var(--srv2-navy);margin:0 0 var(--srv2-s3)} .srv2 .srv2-l3 .srv-section p,.srv2 .srv2-l3 .srv-section-alt p,.srv2 .srv2-l3 .scenario_section_block p{font-size:var(--srv2-t-body);line-height:1.68;color:var(--srv2-ink);margin:0 0 var(--srv2-s2)} .srv2 .srv2-l3 .srv-bullet-list{list-style:none;margin:0 0 var(--srv2-s3);padding:0;display:grid;gap:12px} .srv2 .srv2-l3 .srv-bullet-list li{position:relative;padding:12px 16px 12px 44px;margin:0;background:#fff;border:1px solid var(--srv2-line);border-radius:12px;font-size:1rem;line-height:1.55;color:var(--srv2-ink)} .srv2 .srv2-l3 .srv-bullet-list li:before{content:"";position:absolute;left:16px;top:1.05em;width:14px;height:14px;border-radius:50%;background:var(--srv2-blue);box-shadow:inset 0 0 0 4px #dbe7fb} .srv2 .srv2-l3 .srv-result-block{background:var(--srv2-navy);color:#fff;padding:var(--srv2-s5) var(--srv2-s3);border-radius:var(--srv2-radius);text-align:center;margin:var(--srv2-s4) 0;box-shadow:var(--srv2-shadow)} .srv2 .srv2-l3 .srv-related-link{background:#fff;border:1px solid var(--srv2-line);border-radius:12px;padding:var(--srv2-s2) var(--srv2-s3);text-decoration:none;color:var(--srv2-navy);font-weight:600;font-size:.9rem;box-shadow:0 4px 14px rgba(15,27,53,.05)} .srv2 .srv2-l3 .srv-related-link:hover{border-color:var(--srv2-blue);color:var(--srv2-blue)} .srv2 .srv2-l3 .srv-cta-dark,.srv2 .srv2-l3 .scenario_nav_section,.srv2 .srv2-l3 .srv2-band--cta{background:var(--srv2-navy);color:#fff;text-align:center;padding:var(--srv2-s5) 0} .srv2 .srv2-l3 .srv2-band--cta p{margin:0 0 var(--srv2-s3);opacity:.85} .srv2 .srv2-l3 .scenario_nav_section .btn.secondary{display:inline-flex;align-items:center;min-height:44px;padding:10px 22px;border:1px solid rgba(255,255,255,.4);border-radius:999px;color:#fff;text-decoration:none;font-weight:600} .srv2 .srv2-l3 .scenario_nav_section .btn.secondary:hover{background:rgba(255,255,255,.12);border-color:#fff} @media(max-width:430px){ .srv2 .srv2-l3 .srv2-hero,.srv2 .srv2-l3 .scenario-hero{min-height:auto;padding:var(--srv2-s5) 0 var(--srv2-s4)} .srv2 .srv2-l3 .srv-result-block{padding:var(--srv2-s4) var(--srv2-s2)} } /* ---- 14. layout 4 — form pages (rooted .srv2 .srv2-l4; SAP-832-P3-forms6, 2026-09-22) ---- */ .srv2 .srv2-l4 .srv2-hero__bgwrap{position:absolute;inset:0;z-index:-2;overflow:hidden} .srv2 .srv2-l4 .srv2-hero__bgwrap .srv2-hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 42%;filter:brightness(.74) contrast(1.04)} .srv2 .srv2-l4 .srv2-hero{min-height:70vh} /* booking-request-demo.php — .promo-* kept (no bg image, own design), styled to the token system under l4 */ .srv2 .srv2-l4 .promo-hero{background:var(--srv2-navy);color:#fff;text-align:center;padding:var(--srv2-s6) var(--srv2-s3);box-sizing:border-box} .srv2 .srv2-l4 .promo-hero-inner{max-width:820px;margin:0 auto} .srv2 .srv2-l4 .promo-kicker{font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--srv2-ice);margin:0 0 var(--srv2-s2)} .srv2 .srv2-l4 .promo-hero h1{margin:0 0 var(--srv2-s3);font-size:var(--srv2-t-h1);line-height:1.1;font-weight:700;letter-spacing:-.02em;color:#fff} .srv2 .srv2-l4 .promo-hero-sub{max-width:640px;margin:0 auto var(--srv2-s2);font-size:1.05rem;line-height:1.6;color:rgba(255,255,255,.9)} .srv2 .srv2-l4 .promo-hero-note{max-width:600px;margin:0 auto var(--srv2-s3);font-size:.92rem;color:rgba(255,255,255,.75)} .srv2 .srv2-l4 .promo-btn-row{display:flex;flex-wrap:wrap;gap:16px;justify-content:center} .srv2 .srv2-l4 .promo-btn.promo-btn-primary{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:14px 28px;border-radius:999px;background:var(--srv2-sky);color:var(--srv2-navy);border:1px solid var(--srv2-sky);text-decoration:none;font-weight:700} .srv2 .srv2-l4 .promo-btn.promo-btn-primary:hover{background:var(--srv2-ice)} .srv2 .srv2-l4 .promo-btn.promo-btn-secondary{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:14px 28px;border-radius:999px;background:transparent;color:#fff;border:1px solid rgba(255,255,255,.5);text-decoration:none;font-weight:700} .srv2 .srv2-l4 .promo-btn.promo-btn-secondary:hover{background:rgba(255,255,255,.12);border-color:#fff} /* extend-trial.php — .ext-* kept (no hero, narrow utility card), token-aligned typography under l4 */ .srv2 .srv2-l4 .ext-wrap h1{font-family:var(--srv2-sans);letter-spacing:-.01em} .srv2 .srv2-l4 .ext-wrap .srv2-h1-b{font-family:var(--srv2-serif);font-style:italic;font-weight:400;color:var(--srv2-blue)} .srv2 .srv2-l4 .ext-wrap .srv2-h1-a{color:var(--srv2-navy)} .srv2 .srv2-l4 .ext-card{border-radius:var(--srv2-radius);box-shadow:var(--srv2-shadow)} @media(max-width:430px){ .srv2 .srv2-l4 .srv2-hero{min-height:auto;padding:var(--srv2-s5) 0 var(--srv2-s4)} .srv2 .srv2-l4 .promo-hero{padding:var(--srv2-s5) var(--srv2-s2)} } /* ---- 15. layout 6 — legal pages, typography-only (rooted .srv2 .srv2-l6; SAP-832-P3-forms6, 2026-09-22, no hero, no banding, no comp) ---- */ .srv2 .srv2-l6{max-width:820px;margin:0 auto;padding:var(--srv2-s5) var(--srv2-s3) var(--srv2-s6);box-sizing:border-box} .srv2 .srv2-l6 h1,.srv2 .srv2-l6 .srv2-legal-h1{font-family:var(--srv2-sans);font-size:clamp(1.9rem,4vw,2.6rem);line-height:1.15;font-weight:700;letter-spacing:-.015em;color:var(--srv2-navy);margin:0 0 var(--srv2-s3)} .srv2 .srv2-l6 h2,.srv2 .srv2-l6 .srv2-legal-h2{font-family:var(--srv2-sans);font-size:1.4rem;line-height:1.25;font-weight:700;color:var(--srv2-navy);margin:var(--srv2-s5) 0 var(--srv2-s2);padding-top:var(--srv2-s2);border-top:1px solid var(--srv2-line)} .srv2 .srv2-l6 h2:first-of-type{border-top:0;padding-top:0;margin-top:var(--srv2-s2)} .srv2 .srv2-l6 p{font-size:var(--srv2-t-body);line-height:1.7;color:var(--srv2-ink);margin:0 0 var(--srv2-s2)} .srv2 .srv2-l6 ul,.srv2 .srv2-l6 ol{margin:0 0 var(--srv2-s2);padding-left:1.3em;color:var(--srv2-ink);line-height:1.65} .srv2 .srv2-l6 li{margin-bottom:6px} .srv2 .srv2-l6 a{color:var(--srv2-blue);text-decoration:underline;text-decoration-color:rgba(49,95,187,.35)} .srv2 .srv2-l6 a:hover{text-decoration-color:var(--srv2-blue)} .srv2 .srv2-l6 strong{color:var(--srv2-navy)} @media(max-width:430px){ .srv2 .srv2-l6{padding:var(--srv2-s4) var(--srv2-s2) var(--srv2-s5)} }