/* DATA PRODUCTS · dp-site.css · global stylesheet (Breakdance: Global Settings > Custom CSS, or one stylesheet) 1. tokens 2. layout wrap 3. header + footer (revision 2) 4. site theme + interactive components */ /* ══ 1. TOKENS ══ */ :root{ --ink:#14243F; --navy:#1A2B4A; --teal:#2F6374; --teal-mid:#4A7C8A; --teal-tint:#EBF2F4; --teal-line:#C3D9DF; --orange:#E05A2B; --orange-cta:#CB4B1E; --orange-dk:#A83E18; --orange-ink:#BC451C; --orange-rgb:224,90,43; --orange-tint:#FFB98A; --paper:#FFFFFF; --paper-2:#F7F8FA; --paper-3:#EFF2F5; --line:#E981; --line:#E2E6EA; --line-soft:#EDF0F2; --muted:#59677A; --muted-2:#5E6A79; --serif:'IBM Plex Serif',Georgia,serif; --sans:'IBM Plex Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; --mono:'IBM Plex Mono',Menlo,Consolas,monospace; --wrap:clamp(1160px,76vw,1440px); --nav-h:66px; --r:6px; } /* ══ 2. WRAP (used by the footer template too) ══ */ .wrap{max-width:var(--wrap);margin:0 auto;padding:0 32px} /* ══ 3. HEADER + FOOTER ══ */ :where(#top,#mnav,footer) a{color:inherit;text-decoration:none} :where(#top,#mnav,footer) ul{list-style:none;margin:0;padding:0} #top{position:sticky;top:0;z-index:900;background:rgba(255,255,255,.95); backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid var(--line-soft);height:var(--nav-h)} .top-in{max-width:1320px;margin:0 auto;padding:0 28px;height:100%; display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:18px} .top-in > .brand{justify-self:start} .top-in > .nav{justify-self:center} .top-in > .top-cta{justify-self:end;margin-left:0} .brand img{height:32px;width:auto} .brand-fb{font-family:var(--serif);font-size:19px;font-weight:600;color:var(--ink);letter-spacing:-.02em} .nav{display:flex;align-items:center;gap:1px} .nav-i{position:relative} .nav-l{display:block;padding:8px 12px;font-size:14.5px;font-weight:450;color:var(--ink); border-radius:4px;white-space:nowrap;transition:color .14s,background .14s;cursor:pointer} .nav-l:hover,.nav-i:hover>.nav-l{color:var(--teal);background:var(--paper-2)} .nav-l.here{color:var(--teal)} .nav-l.caret::after{content:'';display:inline-block;width:5px;height:5px;margin-left:6px; border-right:1.3px solid currentColor;border-bottom:1.3px solid currentColor; transform:translateY(-2px) rotate(45deg);opacity:.45} .menu{display:none;position:absolute;top:calc(100% + 6px);left:0;min-width:240px;background:#fff; border:1px solid var(--line);border-radius:8px;box-shadow:0 14px 44px rgba(20,36,63,.13);padding:8px} .nav-i:hover .menu{display:block} .menu a{display:block;padding:9px 12px;font-size:14.5px;color:var(--ink);border-radius:4px; transition:background .12s,color .12s} .menu a:hover{background:var(--paper-2);color:var(--teal)} .menu a.here{color:var(--teal);background:var(--paper-2)} .menu-h{padding:9px 12px 5px;font-family:var(--mono);font-size:10.5px;letter-spacing:.09em; text-transform:uppercase;color:var(--muted-2)} .menu hr{border:0;border-top:1px solid var(--line-soft);margin:7px 4px} .menu.wide{min-width:660px;display:none;grid-template-columns:1fr 1fr .86fr;gap:4px;padding:16px;right:auto} .nav-i:hover .menu.wide{display:grid} .mcol{display:flex;flex-direction:column;gap:1px} .mcol+.mcol{border-left:1px solid var(--line-soft);padding-left:14px;margin-left:2px} .mcol.feat{background:linear-gradient(165deg,#16283C 0%,#1E3A52 100%);border-radius:8px; padding:20px 18px;border-left:0;margin-left:8px;display:flex;flex-direction:column;gap:0} .mcol.feat .menu-h{color:#8FC5D2;padding-left:15px;margin-bottom:12px} .mcol.feat .menu-h::before{background:var(--orange)} .mcol.feat .feat-card{display:block;padding:14px 15px 15px;border-radius:6px;background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14);transition:background .18s,border-color .18s,transform .18s} .mcol.feat .feat-card:hover{background:rgba(255,255,255,.13);border-color:rgba(143,197,210,.5);transform:translateY(-1px)} .mcol.feat .feat-card b{display:block;font-family:var(--sans);font-size:14.5px;font-weight:600;color:#fff;margin-bottom:4px} .mcol.feat .feat-card span{display:block;font-size:12.5px;line-height:1.5;color:rgba(255,255,255,.72)} .mcol.feat .feat-all{margin-top:auto;padding-top:14px;display:inline-flex;align-items:center;gap:7px; font-family:var(--mono);font-size:11px;letter-spacing:.07em;text-transform:uppercase; color:var(--orange-tint);transition:gap .2s ease,color .16s} .mcol.feat .feat-all:hover{gap:12px;color:#fff} .mcol.feat .mi{display:none} .mcol.feat a::before{display:none} .mcol.feat a:hover{padding-left:inherit} .mi{display:block;padding:9px 11px;border-radius:5px;transition:background .12s} .mi:hover,.mi.here{background:var(--paper-2)} .mcol.feat .mi:hover{background:#fff} .mi b{display:block;font-family:var(--sans);font-size:14.5px;font-weight:500;color:var(--ink);line-height:1.25} .mi.here b{color:var(--teal)} .mi span{display:block;font-size:12.5px;color:var(--muted-2);line-height:1.4;margin-top:1px} .top-cta{display:inline-flex;align-items:center;background:var(--orange-cta);color:#fff; font-size:14.5px;font-weight:500;padding:9px 17px;border-radius:5px;margin-left:8px; white-space:nowrap;transition:background .16s} .top-cta:hover{background:var(--orange-dk)} .burger{display:none;flex-direction:column;gap:5px;padding:8px} .burger span{width:21px;height:1.6px;background:var(--ink);border-radius:2px; transition:transform .25s,opacity .25s} #mnav{display:none;flex-direction:column;background:#fff;border-top:1px solid var(--line); padding:14px 32px 24px;gap:1px;max-height:calc(100vh - var(--nav-h));overflow-y:auto} #mnav.open{display:flex} #mnav a{padding:11px 0;font-size:16px;font-weight:450;color:var(--ink);border-bottom:1px solid var(--line-soft)} #mnav .m-h{font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase; color:var(--muted-2);padding:16px 0 6px;border:0} #mnav a.m-cta{color:#fff;background:var(--orange-cta);font-weight:500;border:0;margin-top:18px; padding:13px 18px;border-radius:5px;text-align:center} .brand-logo{height:36px;width:auto;display:block} .f-logo{height:32px;width:auto;display:block;margin-bottom:18px} @media(max-width:620px){.brand-logo{height:31px}} .f-cta{position:relative;display:flex;flex-direction:column;gap:12px; padding:2px 0 16px;margin-bottom:14px; border-bottom:1px solid rgba(255,255,255,.12)} .f-cta::before{content:'';position:absolute;left:-14px;top:3px;bottom:19px;width:3px; background:linear-gradient(180deg,var(--orange) 0%,rgba(var(--orange-rgb),.35) 100%);border-radius:2px} .f-l a.f-cta-l{display:inline-flex;align-items:center;gap:8px;align-self:flex-start; font-size:15.5px;font-weight:600;line-height:1.35;color:var(--orange-tint); border-bottom:2px solid rgba(var(--orange-rgb),.85);padding-bottom:3px; transition:color .16s,border-color .16s,gap .2s ease} .f-l a.f-cta-l:hover{color:#fff;border-bottom-color:#fff;gap:13px} .f-cta-l svg{flex:none} footer{background:var(--ink);color:rgba(255,255,255,.7);padding:46px 0 0} .f-grid{display:grid;grid-template-columns:1.5fr 1.08fr 1.08fr .92fr 1.04fr; gap:34px 32px;padding-bottom:40px} .f-brand img{height:34px;margin-bottom:16px;opacity:1} .f-bfb{font-family:var(--serif);font-size:20px;font-weight:600;color:#fff; letter-spacing:-.02em;margin-bottom:16px;display:block} .f-tag{font-family:var(--serif);font-size:15.5px;color:rgba(255,255,255,.9); margin-bottom:20px;line-height:1.45} .f-addr{font-size:13.5px;color:rgba(255,255,255,.5);line-height:1.7} .f-soc{display:flex;gap:8px;margin-top:20px} .f-so{width:32px;height:32px;border:1px solid rgba(255,255,255,.16);border-radius:4px; display:flex;align-items:center;justify-content:center;font-size:12px;color:rgba(255,255,255,.62); transition:border-color .16s,color .16s,background .16s} .f-so:hover{border-color:var(--teal-mid);color:#fff;background:rgba(74,124,138,.25)} .f-h{font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase; color:rgba(255,255,255,.60);margin-bottom:16px} .f-l{display:flex;flex-direction:column;gap:10px} .f-l a{font-size:13.5px;color:rgba(255,255,255,.66);transition:color .14s;line-height:1.4} .f-l a:hover{color:#fff} .f-bot{border-top:1px solid rgba(255,255,255,.1);padding:22px 0;display:flex; justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap; font-size:12.5px;color:rgba(255,255,255,.60)} .f-bot nav{display:flex;gap:18px;flex-wrap:wrap} .f-bot a{transition:color .14s} .f-bot a:hover{color:rgba(255,255,255,.8)} .nav-i{position:relative} .nav-i::after{content:'';position:absolute;left:10px;right:10px;bottom:-9px;height:2px; background:var(--orange);transform:scaleX(0);transform-origin:center; transition:transform .24s cubic-bezier(.2,.7,.3,1)} .nav-i:hover::after,.nav-i:focus-within::after{transform:scaleX(1)} .nav-i:hover > .nav-l,.nav-i:focus-within > .nav-l{color:var(--ink)} .nav-l.here{color:var(--ink);font-weight:600} .nav-i:has(> .nav-l.here)::after{transform:scaleX(1)} .nav-l.caret::after{transition:border-color .18s ease,transform .22s ease} .nav-i:hover > .nav-l.caret::after,.nav-i:focus-within > .nav-l.caret::after{ border-color:var(--orange);transform:rotate(-135deg) translateY(-2px)} .menu{border-top:3px solid var(--orange)} .menu-h{position:relative;padding-left:16px} .menu-h::before{content:'';position:absolute;left:0;top:50%;margin-top:-1px;width:9px;height:2px; background:var(--orange)} .menu a,.mi{position:relative;transition:background .16s,padding-left .18s ease,color .16s} .menu > a::before,.mi::before{content:'';position:absolute;left:0;top:8px;bottom:8px;width:3px; background:var(--orange);transform:scaleY(0);transform-origin:center; transition:transform .2s cubic-bezier(.2,.7,.3,1)} .menu > a:hover::before,.menu > a:focus-visible::before,.mi:hover::before,.mi:focus-visible::before{transform:scaleY(1)} .menu > a:hover,.mi:hover{padding-left:13px} .mi:hover b{color:var(--teal)} .mi.here::before,.menu > a[aria-current="page"]::before{transform:scaleY(1)} #mnav .m-h{position:relative;padding-left:15px} #mnav .m-h::before{content:'';position:absolute;left:0;top:50%;margin-top:-1px;width:9px;height:2px; background:var(--orange)} @media(prefers-reduced-motion:reduce){.nav-l::after,.nav-l.caret::before,.menu a,.mi,.menu > a::before,.mi::before{transition:none}} @media(max-width:1100px){.nav{display:none}.burger{display:flex}.f-grid{grid-template-columns:repeat(3,1fr)}} @media(max-width:620px){.f-grid{grid-template-columns:1fr 1fr;gap:36px 24px}} .f-grid > *{min-width:0} @media(max-width:430px){.f-grid{grid-template-columns:1fr}} @media(min-width:901px){.top-in{max-width:var(--wrap);padding:0 32px}#mnav{padding-left:max(32px,calc((100% - var(--wrap))/2 + 32px));padding-right:max(32px,calc((100% - var(--wrap))/2 + 32px))}} .top-in > .burger{grid-column:3} @media(max-width:1180px){.nav{display:none}.burger{display:flex}} .brand-logo{max-width:none;flex:none} .top-cta .cta-l{display:inline} .top-cta .cta-s{display:none} @media(max-width:720px){.top-cta .cta-l{display:none}.top-cta .cta-s{display:inline}#top .top-cta{padding:9px 14px}} @media(max-width:340px){.brand-logo{height:28px}#top .top-cta{padding:8px 11px;font-size:13.5px}} .menu.wide{min-width:820px;grid-template-columns:1fr 1fr 1.02fr} .menu.q{min-width:332px} .mcol.feat .feat-l{display:block;white-space:nowrap;padding:7px 15px 7px 10px;margin-left:5px;font-size:13.8px;font-weight:450;line-height:1.3;color:#fff;border-radius:5px} .mcol.feat .feat-l:hover,.mcol.feat .feat-l:focus-visible{background:rgba(255,255,255,.11);color:#fff} .mcol.feat .feat-all{padding-left:15px} .menu .menu-all{margin-top:auto;display:flex;align-items:center;gap:7px;padding:14px 11px 4px;font-family:var(--mono);font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:#BC451C} .menu .menu-all:hover{background:none;color:#A83E18;gap:12px;padding-left:11px} .menu .menu-all::before{display:none} .menu .soon{display:block;padding:9px 12px;font-size:14.5px;color:var(--muted-2);cursor:default} .f-l .soon{font-size:13.5px;line-height:1.4;color:rgba(255,255,255,.66);cursor:default} /* keyboard access to the menus (carried over from the inner-page header) */ .nav-i:focus-within .menu{display:block} .nav-i:focus-within .menu.wide{display:grid} .nav-l:focus-visible{outline:2px solid var(--orange);outline-offset:3px;border-radius:3px} /* ══════════════════════════════════════════════════════════════════════════════ DATA PRODUCTS · SITE THEME LAYER · October 2026 Carries the approved homepage look to every page. Load AFTER each page's own styles. In Breakdance this is the one global stylesheet (Settings → Custom Code, or insert-stylesheet). Every selector is scoped to .dp-page.dp-page (the page wrapper) so nothing leaks into the WordPress admin or third-party widgets, and so it wins over the page styles without !important. What it does, in order: 1. Tokens: the homepage palette becomes the site palette 2. Hero: the homepage data field behind every page hero 3. Accents: orange is for action and wayfinding; teal carries emphasis 4. On-page navigation: one sticky bar on every long page 5. Sticky conversion bar: the homepage's dark bar, site-wide 6. Header fix for the assessment pages 7. Interactive components (stepper, disclosure, fit check, picker) ══════════════════════════════════════════════════════════════════════════════ */ /* ── 1. TOKENS ───────────────────────────────────────────────────────────── */ .dp-page{ --ink:#14243F; --deep:#14243F; --navy:#1A2B4A; --teal:#2F6374; --teal-dk:#2F6374; --teal-mid:#4A7C8A; --tl:#8FC5D2; /* teal on dark surfaces */ --peach:#FFB98A; /* orange text on dark surfaces (eyebrows, links) */ --field:#0A1B29; /* hero field background */ --orange-rgb:224,90,43; --orange-tint:#FFB98A; } /* ── 2. HEROES: ONE SIGNATURE, FOUR FAMILIES ───────────────────────────────── The homepage owns the full data field. Every other family keeps its own hero and borrows the field only as a quiet signature, or not at all: homepage dark, full field, carousel, pointer-reactive (homepage file) practices dark engineering look (their own gradient); the field runs slowly behind the figure only, masked away from the copy starter services light product-sheet look; the field is drawn in teal ink, behind the figure card only case studies white editorial look, italic headline accent; no field assessments, contact, sitemap their own heroes, unchanged The field never sits behind the headline, ignores the cursor on inner pages, is hidden on phones, and freezes under reduced motion. */ .dp-page.dp-page .dp-hero{position:relative;isolation:isolate;overflow:hidden} .dp-hero > .dp-hero-bg{position:absolute;inset:0;z-index:0;pointer-events:none} .dp-hero > .dp-hero-bg canvas{position:absolute;inset:0;width:100%;height:100%;display:block} .dp-hero > :not(.dp-hero-bg){position:relative;z-index:1} /* the field is masked to the figure side, so the copy column stays clean */ .dp-hero--practice > .dp-hero-bg,.dp-hero--starter > .dp-hero-bg{ -webkit-mask-image:linear-gradient(90deg,transparent 0%,transparent 42%,#000 66%,#000 100%); mask-image:linear-gradient(90deg,transparent 0%,transparent 42%,#000 66%,#000 100%)} @media (max-width:1100px){ .dp-hero--practice > .dp-hero-bg,.dp-hero--starter > .dp-hero-bg{ -webkit-mask-image:linear-gradient(180deg,transparent 0%,transparent 55%,#000 85%); mask-image:linear-gradient(180deg,transparent 0%,transparent 55%,#000 85%)}} @media (max-width:720px){.dp-hero > .dp-hero-bg{display:none}} /* ══ PRACTICES · "capability" ══════════════════════════════════════════════ Light blueprint hero (cool grid paper) where the dark figure panel is the one dark object, so only the homepage keeps a dark hero. Numbered sections, cool grey bands, a five-link section bar. */ .dp-page.dp-page .dp-hero--practice{color:var(--ink);border-bottom:1px solid #DCE6EA; background: linear-gradient(rgba(47,99,116,.07) 1px,transparent 1px) 0 0/32px 32px, linear-gradient(90deg,rgba(47,99,116,.07) 1px,transparent 1px) 0 0/32px 32px, linear-gradient(180deg,#EEF4F6 0%,#F7FAFB 100%)} .dp-page.dp-page .dp-hero--practice::before{display:none} .dp-page.dp-page .dp-hero--practice h1{color:var(--ink)} .dp-page.dp-page .dp-hero--practice h1 em{color:var(--teal)} .dp-page.dp-page .dp-hero--practice .lede{color:var(--muted)} .dp-page.dp-page .dp-hero--practice .kicker{color:var(--teal)} .dp-page.dp-page .dp-hero--practice .kicker::before{background:var(--orange)} .dp-page.dp-page .dp-hero--practice .crumb,.dp-page.dp-page .dp-hero--practice .crumb a{color:var(--muted-2)} .dp-page.dp-page .dp-hero--practice .tlink{color:var(--teal-dk);border-color:var(--teal-line)} .dp-page.dp-page .dp-hero--practice :is(.senior,.assure,.aside,.note,.fine,p.sm,.hero-note){color:var(--muted)} .dp-page.dp-page .dp-hero--practice .senior b{color:var(--ink)} .dp-page.dp-page .dp-hero--practice .hx{position:relative;z-index:1;box-shadow:0 30px 70px rgba(20,36,63,.28)} .dp-page.dp-f-practice .band.alt{background:#F2F6F7} .dp-page.dp-f-practice main{counter-reset:dpsec} .dp-page.dp-f-practice section.band:not(.close) .head > .kicker{gap:12px} .dp-page.dp-f-practice section.band:not(.close) .head > .kicker::before{counter-increment:dpsec; content:counter(dpsec,decimal-leading-zero);width:auto;height:auto;background:none;transform:none; padding:3px 7px;border:1px solid var(--teal-line);border-radius:4px;font-size:11px;letter-spacing:.06em;color:var(--teal)} .dp-page.dp-f-practice section.band.dark:not(.close) .head > .kicker::before{border-color:rgba(143,197,210,.4);color:var(--tl)} /* ══ STARTER SERVICES · "product sheet" ════════════════════════════════════ Warm light hero with an "At a glance" offer card, centred section heads with tag-style labels, warm bands. Reads like a product page, which these are. */ .dp-page.dp-page .dp-hero--starter{background:#FAF7F2;border-bottom:1px solid #EFE8DD} .dp-page.dp-page .dp-hero--starter h1 em{color:var(--teal);font-style:normal} .dp-page.dp-page .dp-hero--starter .hero-r{background:#fff;border:1px solid #EFE8DD;border-radius:20px;padding:16px 16px 6px; box-shadow:0 24px 60px rgba(20,36,63,.10);gap:14px} .dp-page.dp-page .dp-hero--starter .hero-r::before{content:'At a glance';font:500 10.5px var(--mono);letter-spacing:.12em; text-transform:uppercase;color:var(--muted-2);padding:4px 6px 0} .dp-page.dp-page .dp-hero--starter .dp-figcard{background:none;border:0;border-radius:12px;padding:0;box-shadow:none} .dp-page.dp-page .dp-hero--starter .dp-figcard > svg{display:block;width:100%;height:auto;max-width:none;box-shadow:none} .dp-page.dp-page .dp-hero--starter .hero-r > svg{width:100%;height:auto;box-shadow:none} .dp-page.dp-page .dp-hero--starter .facts{margin:0 6px} .dp-page.dp-f-starter .band.alt{background:#FAF7F2} /* the starter family's dark bands are deep teal, not navy */ .dp-page.dp-f-starter .band.dark{background:#143A44} .dp-page.dp-f-starter .band.dark .dp-st-tab i{background:#143A44} .dp-page.dp-f-starter .sec-head{display:block;text-align:center;max-width:820px;margin-left:auto;margin-right:auto} .dp-page.dp-f-starter .sec-head h2{max-width:24ch;margin:0 auto} .dp-page.dp-f-starter .sec-head :is(.sub,.lede){margin:16px auto 0;max-width:62ch} .dp-page.dp-f-starter .band .sec-head > .kicker{display:inline-flex;align-items:center;gap:9px;margin:0 0 18px; padding:6px 13px 6px 11px;border-radius:999px;background:#fff;border:1px solid #EAE3D8;font-size:11px} .dp-page.dp-f-starter .band .sec-head > .kicker::before{width:6px;height:6px;border-radius:50%;background:var(--orange);transform:none} .dp-page.dp-f-starter .band.dark .sec-head > .kicker{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16)} /* ══ CASE STUDIES ══════════════════════════════════════════════════════════ Their own hero as designed (white, with the navy impact panel on the right) and their own section bar. Only the headline accent follows the site colour rule. */ .dp-page.dp-page .dp-hero--story h1 em,.dp-page.dp-page .dp-hero--storyhub h1 em{color:var(--teal);font-style:italic;background:none;animation:none} .dp-page.dp-page .dp-hero--story .mstrip b{color:var(--teal)} /* ── 3. ACCENTS ────────────────────────────────────────────────────────────── The homepage rule: orange is for action and wayfinding (buttons, links that convert, the rule that marks where you are). Teal carries emphasis. So section labels and emphasised words in headings move from orange to teal. */ /* applies to the families whose labels were orange; the homepage-family pages (assessments, sitemap) already follow the rule */ .dp-page:is(.dp-f-practice,.dp-f-starter,.dp-f-story,.dp-f-storyhub,.dp-f-contact) .kicker:not(.hero .kicker):not(.dark .kicker){color:var(--teal)} .dp-page:is(.dp-f-starter,.dp-f-story,.dp-f-storyhub) .hero .kicker{color:var(--teal)} .dp-page:is(.dp-f-practice,.dp-f-starter,.dp-f-story,.dp-f-storyhub,.dp-f-contact) .dark .kicker{color:var(--tl)} .dp-page:is(.dp-f-practice,.dp-f-starter,.dp-f-story,.dp-f-storyhub,.dp-f-contact) :is(h2,h3) em:not(.dark em){font-style:normal;color:var(--teal);background:none} .dp-page:is(.dp-f-practice,.dp-f-starter,.dp-f-story,.dp-f-storyhub,.dp-f-contact) .dark :is(h2,h3) em{font-style:normal;color:var(--tl);background:none} .dp-page.dp-page .band.dark{background:var(--ink)} /* orange-filled call-to-action bands become the homepage's teal strip with an orange button */ .dp-page.dp-page .cta-bar{background:var(--teal-tint);border:1px solid var(--teal-line);color:var(--ink)} .dp-page.dp-page .cta-bar p{color:var(--ink)} .dp-page.dp-page .cta-bar .btn-w{background:var(--orange-cta);color:#fff;border-color:transparent} .dp-page.dp-page .cta-bar .btn-w:hover{background:var(--orange-dk);color:#fff} /* stat numerals and step numbers: teal, as on the homepage (they were orange) */ .dp-page.dp-page :is(.comp i,.proof-metric strong,.sec .n,.step .n,.pc .n,.pq .n,.tbl td.n,.cs .ev b,.evx-q .big b,.evx-r .big b,.env-in li b,.bda b){color:var(--teal)} .dp-page.dp-page .dark :is(.proof-metric strong,.sec .n,.step .n,.pc .n,.pq .n,.cs .ev b,.evx-q .big b,.evx-r .big b,.env-in li b,.bda b){color:var(--tl)} /* ── 4. ON-PAGE NAVIGATION ─────────────────────────────────────────────────── Five links at most, sentence case, one action. Practices: a section bar with an "On this page" label. Starter services: a product bar (service name, links, duration and fee, action). Phones: one "Jump to" menu naming the current section; the bottom bar carries the action. */ .dp-page.dp-page .dp-onpage{position:sticky;top:var(--nav-h,66px);z-index:60;background:rgba(255,255,255,.98); -webkit-backdrop-filter:saturate(180%) blur(12px);backdrop-filter:saturate(180%) blur(12px); border-bottom:1px solid var(--line-soft);transition:box-shadow .2s} .dp-page.dp-page .dp-onpage.dp-stuck{box-shadow:0 8px 24px rgba(20,36,63,.07)} .dp-onpage .wrap{display:flex;align-items:center;gap:22px;min-height:54px} .dp-onpage .dp-op-lbl{flex:none;font:500 10.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2); padding-right:18px;border-right:1px solid var(--line)} .dp-onpage .dp-op-name{flex:none;font-family:var(--serif);font-size:17px;font-weight:500;color:var(--ink);letter-spacing:-.01em;white-space:nowrap} .dp-onpage .dp-op-links{display:flex;align-items:center;gap:2px;flex:1;min-width:0} .dp-onpage--product .dp-op-links{justify-content:center} .dp-page.dp-page .dp-onpage .dp-op-links a{position:relative;padding:17px 12px;font:500 14px var(--sans);letter-spacing:0;text-transform:none; color:var(--muted);text-decoration:none;white-space:nowrap;transition:color .16s} .dp-onpage .dp-op-links a::after{content:'';position:absolute;left:12px;right:12px;bottom:-1px;height:2px;background:var(--orange); transform:scaleX(0);transform-origin:left;transition:transform .26s cubic-bezier(.2,.7,.3,1)} .dp-page.dp-page .dp-onpage .dp-op-links a:hover,.dp-page.dp-page .dp-onpage .dp-op-links a[aria-current]{color:var(--ink)} .dp-onpage .dp-op-links a:hover::after,.dp-onpage .dp-op-links a[aria-current]::after{transform:scaleX(1)} .dp-onpage .dp-op-meta{flex:none;font:400 11.5px var(--mono);letter-spacing:.04em;color:var(--muted-2);white-space:nowrap} .dp-page.dp-page .dp-onpage .dp-op-cta{flex:none;padding:8px 18px;border-radius:999px;background:var(--ink);color:#fff; font:500 14px var(--sans);white-space:nowrap;text-decoration:none;transition:background .16s} .dp-page.dp-page .dp-onpage .dp-op-cta:hover{background:#0B1D2E;color:#fff} .dp-onpage .dp-op-toggle{display:none} @media (max-width:1240px){.dp-onpage .dp-op-meta{display:none}} @media (max-width:1040px){.dp-onpage .dp-op-lbl{display:none}.dp-page.dp-page .dp-onpage .dp-op-links a{padding-left:9px;padding-right:9px;font-size:13.5px} .dp-onpage .dp-op-links a::after{left:9px;right:9px}.dp-onpage--product .dp-op-links{justify-content:flex-start}} @media (max-width:880px){.dp-onpage--product .dp-op-name{display:none}} @media (max-width:760px){ .dp-onpage .wrap{min-height:48px;gap:12px;position:relative} .dp-page.dp-page .dp-onpage .dp-op-cta,.dp-onpage .dp-op-name{display:none} .dp-page.dp-page .dp-onpage .dp-op-toggle{display:flex;align-items:center;gap:10px;flex:1;min-width:0;height:48px;padding:0;background:none;border:0; font:inherit;color:var(--ink);cursor:pointer;text-align:left} .dp-op-toggle small{font:500 10.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2)} .dp-op-toggle span{font-size:15px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .dp-op-toggle::after{content:'';margin-left:auto;width:8px;height:8px;border-right:1.6px solid var(--ink);border-bottom:1.6px solid var(--ink); transform:translateY(-3px) rotate(45deg);transition:transform .2s} .dp-onpage.is-open .dp-op-toggle::after{transform:translateY(2px) rotate(-135deg)} .dp-onpage .dp-op-links{display:none} .dp-onpage.is-open .dp-op-links{display:flex;flex-direction:column;align-items:stretch;gap:0;position:absolute;top:100%;left:0;right:0; background:#fff;border-bottom:1px solid var(--line);box-shadow:0 18px 30px rgba(20,36,63,.12);padding:4px 24px 10px} .dp-page.dp-page .dp-onpage.is-open .dp-op-links a{padding:13px 0 13px 14px;font-size:15.5px;border-bottom:1px solid var(--line-soft)} .dp-page.dp-page .dp-onpage.is-open .dp-op-links a:last-child{border-bottom:0} .dp-onpage.is-open .dp-op-links a::after{left:0;right:auto;top:12px;bottom:12px;width:3px;height:auto;transform:scaleY(0)} .dp-onpage.is-open .dp-op-links a[aria-current]::after{transform:scaleY(1)} } /* a jump from the bar lands the section heading below the header and the bar */ .dp-page.dp-page section[id],.dp-page.dp-page [id].sec{scroll-margin-top:calc(var(--nav-h,66px) + 64px)} /* ── 5. STICKY CONVERSION BAR ──────────────────────────────────────────────── The homepage's dark bar replaces the white one on inner pages. */ .dp-page.dp-page .sticky{background:var(--ink);color:#fff;border-top:1px solid rgba(255,255,255,.1); box-shadow:0 -6px 30px rgba(20,36,63,.16)} .dp-page.dp-page .sticky p{color:rgba(255,255,255,.8);font-weight:300} .dp-page.dp-page .sticky p b{color:#fff;font-weight:500} .dp-page.dp-page .sticky .x{color:rgba(255,255,255,.45)} .dp-page.dp-page .sticky .x:hover{color:#fff} .dp-page.dp-page .sticky .btn-o{color:#fff;border-color:rgba(255,255,255,.34)} .dp-page.dp-page .sticky .btn-o:hover{background:rgba(255,255,255,.1);color:#fff} .dp-page.dp-page .sticky .m{color:#fff} /* practices float a pill on phones: keep it a pill */ @media (max-width:720px){ .dp-page.dp-f-practice .sticky{background:none;border:0;box-shadow:none} /* phones: one line, one button; the label repeats the button on case studies */ .dp-page.dp-page .sticky .m{display:none} .dp-page.dp-page .sticky .btn{white-space:nowrap;padding:12px 18px} .dp-page:not(.dp-f-practice) .sticky .r{flex:1;justify-content:space-between} .dp-page:not(.dp-f-practice) .sticky .btn-p{flex:1;justify-content:center} } /* ── 6. HEADER FIX ─────────────────────────────────────────────────────────── Header revision 2 gave the Business Priorities panel the class "menu q". The assessment pages already style their question rows as .q{display:flex}, which left that panel permanently open over the page. Re-scope it to the header. */ #top .nav .menu.q{display:none} #top .nav .nav-i:hover .menu.q,#top .nav .nav-i:focus-within .menu.q{display:block} /* ── 7. INTERACTIVE COMPONENTS ─────────────────────────────────────────────── Styles for the four components in dp-theme.js. Everything sits behind .is-on, which the script adds, so a page without the script shows the full content. */ @keyframes dpIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} .dp-page.dp-page .dp-in{animation:dpIn .45s cubic-bezier(.2,.7,.3,1)} /* 7a. Stepper: numbered steps become a rail with one step open */ .dp-page.dp-page .dp-stepper.is-on{display:block} .dp-st-rail{position:relative;display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:6px;margin:0 0 24px} .dp-st-track{position:absolute;top:16px;left:calc(50% / var(--n));right:calc(50% / var(--n));height:2px;background:var(--line);z-index:0} .dp-st-fill{display:block;height:100%;background:linear-gradient(90deg,var(--orange),var(--teal-mid)); transform:scaleX(var(--p,0));transform-origin:left;transition:transform .55s cubic-bezier(.32,.72,.3,1)} .dp-page.dp-page .dp-st-tab{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:10px; padding:0 4px 4px;background:none;border:0;cursor:pointer;text-align:center;color:var(--muted);font:inherit} .dp-st-tab i{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;font:500 12px/1 var(--mono);font-style:normal; background:var(--paper);border:1.5px solid var(--teal-line);color:var(--muted-2); transition:background .25s,border-color .25s,color .25s,box-shadow .25s,transform .25s} .dp-st-tab span{font-size:13.5px;line-height:1.3;font-weight:500;transition:color .2s} .dp-st-tab:hover i{border-color:var(--teal);transform:translateY(-2px)} .dp-st-tab:hover span{color:var(--ink)} .dp-st-tab.is-done i{background:var(--teal);border-color:var(--teal);color:#fff} .dp-st-tab[aria-selected="true"] i{background:var(--orange);border-color:var(--orange);color:#fff;box-shadow:0 0 0 5px rgba(224,90,43,.18)} .dp-st-tab[aria-selected="true"] span{color:var(--ink);font-weight:600} .dp-st-tab:focus-visible{outline:2px solid var(--orange);outline-offset:4px;border-radius:6px} .dp-st-panels{display:grid} .dp-stepper:not(.dp-stepper--story) .dp-st-panel{grid-area:1/1} .dp-stepper:not(.dp-stepper--story) .dp-st-panel:not(.is-active){visibility:hidden;opacity:0;pointer-events:none} .dp-page.dp-page .dp-stepper .dp-st-panel.step{display:block;padding:26px 28px 24px;border:1px solid var(--line); border-radius:12px;background:var(--paper)} .dp-page.dp-page .dp-stepper .dp-st-panel.step .n{display:none} .dp-st-nav{display:flex;align-items:center;justify-content:space-between;gap:12px 18px;flex-wrap:wrap;margin-top:16px} .dp-page.dp-page .dp-st-prev{background:none;border:0;padding:6px 0;cursor:pointer;font:500 11.5px var(--mono);letter-spacing:.08em; text-transform:uppercase;color:var(--muted-2)} .dp-page.dp-page .dp-st-prev:disabled{opacity:.35;cursor:default} .dp-st-count{font:400 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2);margin-right:auto} .dp-page.dp-page .dp-st-next,.dp-page.dp-page .dp-st-end{display:inline-flex;align-items:center;gap:8px;background:none;border:0;padding:4px 0 3px;cursor:pointer; font:600 15px var(--sans);color:var(--orange-ink);border-bottom:1.5px solid rgba(224,90,43,.4);transition:gap .2s,border-color .2s;text-decoration:none} .dp-page.dp-page .dp-st-next:hover,.dp-page.dp-page .dp-st-end:hover{gap:12px;border-bottom-color:var(--orange)} .dp-page.dp-page .dp-st-next[hidden],.dp-page.dp-page .dp-st-end[hidden]{display:none} .dp-st-nl{font-weight:400;opacity:.75} /* on dark bands */ .dark .dp-st-track{background:rgba(255,255,255,.16)} .dark .dp-st-tab{color:rgba(255,255,255,.62)} .dark .dp-st-tab i{background:var(--ink);border-color:rgba(255,255,255,.28);color:rgba(255,255,255,.72)} .dark .dp-st-tab:hover span,.dark .dp-st-tab[aria-selected="true"] span{color:#fff} .dark .dp-st-tab:hover i{border-color:var(--tl)} .dark .dp-st-tab.is-done i{background:var(--tl);border-color:var(--tl);color:var(--ink)} .dark .dp-st-tab[aria-selected="true"] i{background:var(--orange);border-color:var(--orange);color:#fff;box-shadow:0 0 0 5px rgba(224,90,43,.25)} .dp-stepper[style*="--n:6"] .dp-st-tab span,.dp-st-rail[style*="--n: 6"] .dp-st-tab span{font-size:12.5px} .dp-page.dp-page .dark .dp-stepper .dp-st-panel.step{background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.14)} .dp-page.dp-page .dark .dp-st-prev,.dark .dp-st-count{color:rgba(255,255,255,.6)} .dp-page.dp-page .dark .dp-st-next,.dp-page.dp-page .dark .dp-st-end{color:var(--peach);border-bottom-color:rgba(255,185,138,.45)} .dp-page.dp-page .dark .dp-st-next:hover{border-bottom-color:#fff;color:#fff} /* case studies: the story reads as three parts */ .dp-stepper--story .dp-st-rail{max-width:620px;margin-bottom:36px} .dp-page.dp-page .dp-stepper--story .dp-st-panel[hidden]{display:none} .dp-page.dp-page .dp-stepper--story .sec{grid-template-columns:minmax(0,1fr);padding:0;border-top:0;gap:0} .dp-page.dp-page .dp-stepper--story .sec .n{display:none} .dp-stepper--story .dp-st-nav{margin-top:34px;padding-top:20px;border-top:1px solid var(--line)} /* on desktop the rail stands in the left column the story already had */ @media (min-width:1101px){ .dp-page.dp-page .dp-stepper--story.is-on{display:grid;grid-template-columns:200px minmax(0,1fr);column-gap:40px;align-items:start} .dp-stepper--story .dp-st-rail{grid-column:1;grid-row:1 / span 2;display:flex;flex-direction:column;gap:26px;max-width:none;margin:0; position:sticky;top:calc(var(--nav-h,66px) + 80px)} .dp-stepper--story .dp-st-track{left:16px;right:auto;top:17px;bottom:17px;width:2px;height:auto} .dp-stepper--story .dp-st-fill{transform:scaleY(var(--p,0));transform-origin:top;background:linear-gradient(180deg,var(--orange),var(--teal-mid))} .dp-page.dp-page .dp-stepper--story .dp-st-tab{flex-direction:row;align-items:center;gap:14px;text-align:left;padding:0} .dp-stepper--story .dp-st-tab span{font-size:14.5px} .dp-stepper--story .dp-st-panels,.dp-stepper--story .dp-st-nav{grid-column:2} .dp-stepper--story .dp-st-nav{margin-top:30px} } /* the stepper rotates on its own; a thin bar under the active step shows the time left */ .dp-stepper.is-auto .dp-st-tab[aria-selected="true"] span{position:relative} .dp-stepper.is-auto .dp-st-tab[aria-selected="true"]::after{content:'';position:absolute;left:20%;right:20%;bottom:-6px;height:2px; background:var(--orange);transform-origin:left;animation:dpTimer var(--dwell,7000ms) linear forwards} .dp-stepper.is-auto.is-paused .dp-st-tab[aria-selected="true"]::after{animation-play-state:paused} @keyframes dpTimer{from{transform:scaleX(0)}to{transform:scaleX(1)}} .dp-st-play{background:none;border:0;cursor:pointer;font:500 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted-2);padding:6px 0} .dark .dp-st-play{color:rgba(255,255,255,.6)} /* the method column travels with the criteria panel beside it */ @media (min-width:1101px){.dp-page.dp-page .lens > .dp-stepper.is-on{position:sticky;top:calc(var(--nav-h,66px) + 74px)}} /* 7b. Disclosure: a secondary block collapsed behind its heading */ .dp-page.dp-page .dp-disclosure.is-on [hidden]{display:none} .dp-page.dp-page .dp-disclosure.is-on .hood-h{margin-bottom:0} .dp-page.dp-page .dp-disclosure.is-open .hood-h{margin-bottom:22px} .dp-page.dp-page .dp-dc-btn{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 24px;align-items:center;width:100%; padding:4px 0;background:none;border:0;text-align:left;color:inherit;font:inherit;cursor:pointer} .dp-dc-btn > *:not(.dp-dc-cue){grid-column:1} .dp-dc-cue{grid-column:2;grid-row:1 / span 2;display:inline-flex;align-items:center;gap:9px;padding:8px 14px;border-radius:999px; font:500 11px var(--mono);font-style:normal;letter-spacing:.1em;text-transform:uppercase; border:1px solid var(--line);color:var(--muted);transition:border-color .2s,color .2s,background .2s} .dp-dc-cue::after{content:'';width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor; transform:translateY(-2px) rotate(45deg);transition:transform .25s} .dp-disclosure.is-open .dp-dc-cue::after{transform:translateY(2px) rotate(-135deg)} .dp-dc-btn:hover .dp-dc-cue{border-color:var(--orange);color:var(--orange-ink)} .dark .dp-dc-cue{border-color:rgba(255,255,255,.28);color:rgba(255,255,255,.78)} .dark .dp-dc-btn:hover .dp-dc-cue{border-color:var(--peach);color:#fff;background:rgba(255,255,255,.06)} /* 7c. Fit check: tick what applies, get a verdict */ .dp-page.dp-page .dp-fitcheck .dp-fc-hint{grid-column:1 / -1;margin:0 0 -6px;font-size:15.5px;color:var(--muted)} .dp-fc-hint b{color:var(--ink);font-weight:600} .dp-page.dp-page .dp-fitcheck li[role="checkbox"]{cursor:pointer;margin-left:-12px;padding:10px 12px 10px 44px;border-radius:8px; transition:background .15s,color .15s;user-select:none} .dp-page.dp-page .dp-fitcheck li[role="checkbox"]::before{left:12px;top:12px;width:20px;height:20px;border-radius:6px;background:#fff; border:1.5px solid var(--teal-line);transform:none;transition:background .15s,border-color .15s} .dp-page.dp-page .dp-fitcheck .fit-card.not li[role="checkbox"]::before{border-color:var(--silver,#C0C8D0);background:#fff} .dp-page.dp-page .dp-fitcheck li[role="checkbox"]:hover{background:var(--paper-2);color:var(--ink)} .dp-page.dp-page .dp-fitcheck li[role="checkbox"]:hover::before{transform:none;border-color:var(--teal)} .dp-page.dp-page .dp-fitcheck li[aria-checked="true"]{background:var(--teal-tint);color:var(--ink)} .dp-page.dp-page .dp-fitcheck li[aria-checked="true"]::before,.dp-page.dp-page .dp-fitcheck .fit-card.not li[aria-checked="true"]::before{ background:var(--teal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat; border-color:var(--teal)} .dp-page.dp-page .dp-fitcheck .fit-card.not li[aria-checked="true"]{background:#F1F2F4} .dp-page.dp-page .dp-fitcheck .fit-card.not li[aria-checked="true"]::before{background-color:var(--muted-2);border-color:var(--muted-2)} .dp-page.dp-page .dp-fitcheck li[role="checkbox"]:focus-visible{outline:2px solid var(--orange);outline-offset:2px} .dp-page.dp-page .dp-fitcheck .fit-card:hover{transform:none} .dp-fc-out{margin-top:20px;padding:22px 26px 24px;border:1px solid var(--line);border-radius:12px;background:#fff; transition:background .3s,border-color .3s} .dp-fc-out.is-fit{background:var(--teal-tint);border-color:var(--teal-line)} .dp-fc-out.is-elsewhere{background:#FBF6F3;border-color:rgba(224,90,43,.28)} .dp-fc-meter{height:5px;border-radius:3px;background:var(--line-soft);overflow:hidden;margin-bottom:16px} .dp-fc-meter span{display:block;height:100%;background:var(--teal);transform:scaleX(var(--g));transform-origin:left; transition:transform .5s cubic-bezier(.32,.72,.3,1)} .dp-fc-meter.is-warn{background:rgba(224,90,43,.28)} .dp-fc-msg{font-size:15.5px;line-height:1.55;color:var(--muted);margin:0} .dp-fc-msg b{font-family:var(--serif);font-size:20px;font-weight:500;color:var(--ink);letter-spacing:-.01em;margin-right:4px} .dp-fc-out.is-idle .dp-fc-msg b{font-size:17px} .dp-fc-row{display:flex;align-items:center;justify-content:space-between;gap:14px 22px;flex-wrap:wrap;margin-top:14px} .dp-fc-row .dp-fc-msg{flex:1 1 320px} .dp-page.dp-page .dp-fc-go{flex:none} .dp-fc-list{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:8px} .dp-fc-list li{position:relative;padding-left:22px;font-size:15px;line-height:1.55;color:var(--ink)} .dp-fc-list li::before{content:'';position:absolute;left:2px;top:.62em;width:10px;height:2px;background:var(--orange)} .dp-fc-list a,.dp-page.dp-page .dp-fc-alt{color:var(--orange-ink);font-weight:600;border-bottom:1px solid rgba(224,90,43,.35);text-decoration:none} .dp-page.dp-page .dp-fc-alt{display:inline-flex;align-items:center;gap:7px;font-size:15px;transition:gap .2s} .dp-page.dp-page .dp-fc-alt:hover{gap:11px;border-bottom-color:var(--orange)} /* 7d. Picker: "which sounds like you?" in place of three side-by-side cards */ .dp-pk-lead{font:500 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2);margin:0 0 12px} .dp-pk-q{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:14px} .dp-page.dp-page .dp-pk-tab{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:14px;padding:20px 22px 18px; text-align:left;font:inherit;background:#fff;border:1px solid var(--line);border-radius:12px;cursor:pointer;overflow:hidden; transition:transform .22s,box-shadow .22s,border-color .2s} .dp-pk-tab::before{content:'';position:absolute;left:0;right:0;top:0;height:3px;background:var(--orange);transform:scaleX(0); transform-origin:left;transition:transform .3s cubic-bezier(.2,.7,.3,1)} .dp-pk-tab:hover{border-color:var(--teal-line);transform:translateY(-2px)} .dp-pk-tab[aria-selected="true"]{border-color:transparent;box-shadow:0 14px 36px rgba(20,36,63,.12)} .dp-pk-tab[aria-selected="true"]::before{transform:scaleX(1)} .dp-pk-tab:focus-visible{outline:2px solid var(--orange);outline-offset:3px} .dp-pk-qq{font-family:var(--serif);font-size:18px;line-height:1.32;color:var(--ink);letter-spacing:-.01em} .dp-pk-nm{font:500 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted-2)} .dp-pk-nm em{font-style:normal;color:var(--orange-ink);margin-left:6px;white-space:nowrap} .dp-pk-tab[aria-selected="true"] .dp-pk-nm{color:var(--teal)} .dp-page.dp-page .dp-picker.is-on{display:block} .dp-page.dp-page .dp-picker.is-on .offer{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 56px;align-items:start;padding:38px 42px 40px} .dp-page.dp-page .dp-picker.is-on .offer[hidden]{display:none} .dp-page.dp-page .dp-picker.is-on .offer.dp-of-one{grid-template-columns:minmax(0,1fr)} .dp-page.dp-page .dp-picker .dp-of-r > :first-child{margin-top:0} .dp-page.dp-page .dp-picker .offer h3{margin-top:0} .dp-page.dp-page .dp-picker.is-on .offer > .dp-of-l > .step{display:none} /* the chooser already asked the question */ @media (max-width:900px){ .dp-pk-q{grid-template-columns:1fr;gap:8px} .dp-page.dp-page .dp-pk-tab{flex-direction:row;align-items:baseline;padding:14px 16px;gap:12px} .dp-pk-qq{font-size:16px;flex:1} .dp-pk-nm{display:none} .dp-page.dp-page .dp-picker.is-on .offer{grid-template-columns:minmax(0,1fr);padding:28px 22px} .dp-page.dp-page .dp-picker .dp-of-r{margin-top:18px} .dp-st-tab span{font-size:12px} } @media (max-width:560px){ .dp-st-tab span{display:none} .dp-st-tab[aria-selected="true"] span{display:block;font-size:12px} .dp-page.dp-page .dp-stepper .dp-st-panel.step{padding:20px 18px} } @media (prefers-reduced-motion:reduce){ .dp-page.dp-page .dp-in{animation:none} .dp-st-fill,.dp-st-tab i,.dp-fc-meter span,.dp-pk-tab,.dp-pk-tab::before{transition:none} } @media (prefers-reduced-motion:reduce){ .dp-onpage a::after{transition:none} } /* ── 8. HEADER MENUS ───────────────────────────────────────────────────────── The panels opened 6 px below their label, so a trackpad crossing that gap closed them. An invisible bridge covers the gap, and the global script keeps a panel open for a moment after the pointer leaves (.dp-open). */ #top .nav .menu::after{content:'';position:absolute;left:-12px;right:-12px;top:-16px;height:16px} #top .nav .nav-i.dp-open .menu{display:block} #top .nav .nav-i.dp-open .menu.wide{display:grid} #top .nav .nav-i.dp-open::after{transform:scaleX(1)}