:root{ --indigo-ink:#141634;--indigo-electric:#5A5CF0;--citron:#D8FF4A;--midnight:#161A33; --slate:#5A6178;--mist:#F4F5FB;--border-indigo:#E2E4F3;--footer-ink:#0C0E22; --hairline:#E5E7EB;--white:#FFFFFF; --indigo-electric-12:rgba(90,92,240,.12);--indigo-electric-24:rgba(90,92,240,.24); --indigo-ink-72:rgba(20,22,52,.72);--indigo-ink-08:rgba(20,22,52,.08); --white-08:rgba(255,255,255,.08);--white-16:rgba(255,255,255,.16);--white-64:rgba(255,255,255,.64); --surface-page:var(--white);--surface-wash:var(--mist);--surface-dark:var(--indigo-ink); --surface-footer:var(--footer-ink);--surface-card:var(--white);--surface-card-dark:rgba(255,255,255,.06); --text-heading:var(--midnight);--text-body:var(--slate);--text-on-dark:var(--white); --text-on-dark-muted:var(--white-64);--text-eyebrow:var(--indigo-electric); --text-link:var(--indigo-electric);--text-link-hover:var(--indigo-ink); --border-card:var(--border-indigo);--border-divider:var(--hairline);--border-on-dark:var(--white-16); --ring-popular:var(--citron); --action-primary-bg:var(--citron);--action-primary-text:var(--indigo-ink);--action-primary-bg-hover:#C9F52F; --action-secondary-bg:transparent;--action-secondary-text:var(--white);--action-secondary-border:var(--white-16); --action-dark-bg:var(--indigo-ink);--action-dark-text:var(--white);--focus-ring:var(--indigo-electric); --font-display:'Bricolage Grotesque','Archivo','Helvetica Neue',Arial,sans-serif; --font-body:'Instrument Sans','Helvetica Neue',Arial,sans-serif; --font-size-hero:clamp(36px,5.6vw,64px);--font-size-h1:clamp(32px,4.6vw,52px); --font-size-h2:clamp(28px,3.6vw,40px);--font-size-h3:clamp(22px,2.2vw,26px); --font-size-h4:20px;--font-size-lead:20px;--font-size-body:17px;--font-size-small:15px; --font-size-eyebrow:13px;--font-size-price:44px; --weight-regular:400;--weight-medium:500;--weight-semibold:600;--weight-bold:700;--weight-black:800; --leading-display:1.05;--leading-heading:1.15;--leading-body:1.7;--leading-tight:1.4; --tracking-display:-0.02em;--tracking-eyebrow:0.08em; --measure-body:68ch;--measure-legal:720px; --space-1:8px;--space-2:16px;--space-3:24px;--space-4:32px;--space-5:48px;--space-6:64px;--space-7:96px; --section-y:96px;--section-y-mobile:56px;--container:1180px;--container-narrow:860px; --nav-height:76px;--gutter:24px; --radius-card:16px;--radius-button:12px;--radius-input:8px;--radius-pill:999px; --radius-tile:20px;--radius-media:16px;--aspect-screenshot:12/5; --shadow-soft:0 8px 30px rgba(20,22,52,.08);--shadow-raised:0 18px 50px rgba(20,22,52,.12); --hero-glow:radial-gradient(60% 60% at 70% 30%,rgba(90,92,240,.45) 0%,rgba(90,92,240,0) 70%); --veil-photo:linear-gradient(rgba(20,22,52,.72),rgba(20,22,52,.72));--grain-opacity:.05; --duration-fast:120ms;--duration:150ms;--duration-slow:240ms; --ease:ease;--ease-out:cubic-bezier(.2,.6,.2,1);--lift-hover:-2px;--ticker-duration:38s; } @media screen and (max-width:900px){:root{--section-y:var(--section-y-mobile)}} /* Grid utilities. Every track is minmax(0,1fr), never bare 1fr: a bare fr is minmax(auto,1fr), so one long unbreakable string steals width from its sibling. */ .pmw-grid-2,.pmw-grid-3,.pmw-grid-4,.pmw-split,.pmw-split-wide,.pmw-footer-grid,.pmw-hero-grid{display:grid;min-width:0} .pmw-grid-2>*,.pmw-grid-3>*,.pmw-grid-4>*,.pmw-split>*,.pmw-split-wide>*,.pmw-footer-grid>*,.pmw-hero-grid>*{min-width:0} .pmw-grid-2{grid-template-columns:repeat(2,minmax(0,1fr))} .pmw-grid-3{grid-template-columns:repeat(3,minmax(0,1fr))} .pmw-grid-4{grid-template-columns:repeat(4,minmax(0,1fr))} .pmw-split{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)} .pmw-split-wide{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr)} .pmw-footer-grid{grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr))} .pmw-hero-grid{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)} @media screen and (max-width:1040px){ .pmw-grid-4{grid-template-columns:repeat(2,minmax(0,1fr))} .pmw-hero-grid,.pmw-grid-2,.pmw-split,.pmw-split-wide{grid-template-columns:minmax(0,1fr)}} @media screen and (max-width:900px){ .pmw-grid-3{grid-template-columns:repeat(2,minmax(0,1fr))} .pmw-footer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}} @media screen and (max-width:640px){ .pmw-grid-2,.pmw-grid-3,.pmw-grid-4,.pmw-footer-grid{grid-template-columns:minmax(0,1fr)}} ::selection{background:var(--citron);color:var(--indigo-ink)} :focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px} /* ---------- Global nav (Theme Builder header, layout 14) ---------- */ .pmw-nav{position:fixed;top:0;left:0;right:0;z-index:9999;height:var(--nav-height); display:flex;align-items:center;padding:0 var(--gutter);background:transparent; border-bottom:1px solid transparent; transition:background var(--duration-slow) var(--ease),border-color var(--duration-slow) var(--ease)} .pmw-nav.is-scrolled{background:rgba(255,255,255,.92); backdrop-filter:saturate(140%) blur(12px);-webkit-backdrop-filter:saturate(140%) blur(12px); border-bottom-color:var(--border-card)} .pmw-nav-inner{display:flex;align-items:center;gap:var(--space-4);width:100%; max-width:var(--container);margin:0 auto;min-width:0} .pmw-lockup{display:inline-flex;align-items:center;gap:10px;text-decoration:none; font-family:var(--font-display);font-size:19px;letter-spacing:var(--tracking-display); line-height:1.1;color:var(--white);min-width:0;flex-shrink:1} .pmw-nav.is-scrolled .pmw-lockup{color:var(--midnight)} .pmw-mark{width:32px;height:32px;border-radius:12px;flex:0 0 auto;display:block} /* The between the two halves is the only break opportunity: two adjacent spans do not create one, so the name would otherwise be one unbreakable run. */ .pmw-wm-a{font-weight:800;white-space:nowrap} .pmw-wm-b{font-weight:400;white-space:nowrap} .pmw-nav-links{display:flex;gap:var(--space-3);margin-left:auto;min-width:0} .pmw-nav-link{font-family:var(--font-body);font-size:15px;font-weight:500; text-decoration:none;padding:6px 2px;white-space:nowrap;color:var(--white); border-bottom:2px solid transparent} .pmw-nav.is-scrolled .pmw-nav-link{color:var(--midnight)} .pmw-nav-link:hover{border-bottom-color:currentColor;text-decoration:none} .pmw-nav-link.is-active{color:var(--citron);border-bottom-color:currentColor} .pmw-nav.is-scrolled .pmw-nav-link.is-active{color:var(--indigo-electric)} .pmw-btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-body); font-weight:500;border-radius:var(--radius-button);border:1px solid transparent; text-decoration:none;cursor:pointer; transition:background var(--duration) var(--ease),color var(--duration) var(--ease)} .pmw-btn:hover{text-decoration:none} .pmw-btn-primary{background:var(--action-primary-bg);color:var(--action-primary-text)} .pmw-btn-primary:hover{background:var(--action-primary-bg-hover);color:var(--action-primary-text)} .pmw-btn-sm{font-size:14px;padding:9px 16px} .pmw-btn-lg{font-size:16px;padding:16px 28px} .pmw-burger{display:none;background:none;border:0;padding:6px;cursor:pointer; margin-left:auto;color:var(--white);line-height:0} .pmw-nav.is-scrolled .pmw-burger{color:var(--midnight)} .pmw-burger .pmw-ico-x{display:none} .pmw-burger.is-open .pmw-ico-menu{display:none} .pmw-burger.is-open .pmw-ico-x{display:block} .pmw-overlay{display:none} /* Media queries MUST keep the space after "and" or browsers ignore them (ยง11). */ @media screen and (max-width:1040px){ .pmw-nav-links{display:none} .pmw-nav-cta{display:none} .pmw-burger{display:block} .pmw-overlay{position:fixed;inset:var(--nav-height) 0 auto;z-index:9998; box-sizing:border-box;background:var(--surface-page); border-bottom:1px solid var(--border-card);box-shadow:var(--shadow-soft); padding:var(--space-4) var(--gutter) var(--space-5); grid-template-columns:minmax(0,1fr);gap:var(--space-2)} .pmw-overlay.is-open{display:grid} .pmw-ov-link{font-family:var(--font-display);font-weight:700;font-size:24px; letter-spacing:-.01em;text-decoration:none;color:var(--midnight);padding:10px 0; border-bottom:1px solid var(--border-divider)} .pmw-ov-link.is-active{color:var(--indigo-electric)} .pmw-ov-cta{justify-content:center;margin-top:var(--space-2)} } body.pmw-nav-open{overflow:hidden} /* Pages whose first section is NOT a dark hero need to clear the fixed nav. */ .pmw-below-nav{padding-top:var(--nav-height)} /* Skip link. Divi wraps the text module, so lift the whole wrapper out of flow or it reserves height above the fixed nav. */ .pmw-skip-wrap{position:absolute!important;top:0;left:0;width:0;height:0; margin:0!important;padding:0!important;overflow:visible;z-index:10000} .pmw-skip-wrap .et_pb_text_inner p{margin:0} .pmw-skip{position:absolute;left:-9999px;top:0;white-space:nowrap; background:var(--citron);color:var(--indigo-ink);padding:10px 16px; border-radius:var(--radius-button);font-family:var(--font-body);font-size:15px; font-weight:500;text-decoration:none} .pmw-skip:focus{left:12px;top:12px} /* Transparent-nav white text only reads over a dark hero. Every page in this design has one, but any page that does not needs this modifier or the whole lockup and link row goes white-on-white and vanishes (playbook s8). */ .pmw-nav--light .pmw-lockup, .pmw-nav--light .pmw-nav-link, .pmw-nav--light .pmw-burger{color:var(--midnight)} .pmw-nav--light .pmw-nav-link.is-active{color:var(--indigo-electric)} /* ---------- Global footer (Theme Builder footer, layout 16) ---------- */ .pmw-footer{background:var(--surface-footer);color:var(--text-on-dark-muted); padding:var(--space-6) var(--gutter) var(--space-4); font-family:var(--font-body);font-size:var(--font-size-body);line-height:var(--leading-body)} .pmw-footer-inner{max-width:var(--container);margin:0 auto} .pmw-footer-grid{gap:var(--space-5)} .pmw-footer-lockup{display:inline-flex;align-items:center;gap:10px;text-decoration:none; font-family:var(--font-display);font-size:22px;letter-spacing:var(--tracking-display); line-height:1.1;color:var(--white);min-width:0} .pmw-footer-mark{width:37px;height:37px;border-radius:14px;flex:0 0 auto;display:block} .pmw-footer-blurb{margin:var(--space-3) 0 0;font-size:15px;line-height:1.7;max-width:34ch} .pmw-footer-h{font-size:13px;font-weight:500;letter-spacing:var(--tracking-eyebrow); text-transform:uppercase;color:var(--white);margin:0 0 var(--space-2)} .pmw-footer-list{list-style:none;margin:0;padding:0;display:grid;gap:10px} .pmw-footer-list a{font-size:15px;color:var(--text-on-dark-muted);text-decoration:none} .pmw-footer-list a:hover{color:var(--white);text-decoration:underline;text-underline-offset:3px} .pmw-footer-legal{border-top:1px solid var(--border-on-dark);margin-top:var(--space-5); padding-top:var(--space-3);font-size:13px;line-height:1.7;max-width:100ch} /* The footer section carries the dark background natively; the legal block is a native text module, so it needs its own colour rather than inheriting. */ .pmw-footer-legal, .pmw-footer-legal p{color:var(--text-on-dark-muted)!important;font-size:13px;line-height:1.7;margin:0} .pmw-footer-legal{border-top:1px solid var(--border-on-dark);padding-top:var(--space-3); margin-top:var(--space-5)!important;max-width:100ch} .pmw-footer-grid{gap:var(--space-5)} /* ---------- Dark hero. Fully native: glow + grain are pure CSS, so no code module is needed and the H1 stays a real editable heading module. ---------- */ .pmw-hero{position:relative;overflow:hidden;background:var(--surface-dark)} .pmw-hero::before{content:'';position:absolute;inset:0;pointer-events:none; background:var(--hero-glow)} .pmw-hero::after{content:'';position:absolute;inset:0;pointer-events:none; opacity:var(--grain-opacity); background-image:url("data:image/svg+xml;utf8,")} .pmw-hero .et_pb_row{position:relative;z-index:1} .pmw-eyebrow,.pmw-eyebrow p{color:#A9AAFF!important;font-family:var(--font-body); font-size:var(--font-size-eyebrow);font-weight:500;letter-spacing:var(--tracking-eyebrow); text-transform:uppercase;margin:0 0 var(--space-2)!important} .pmw-h1,.pmw-h1 h1{font-family:var(--font-display)!important;font-weight:800!important; font-size:var(--font-size-hero)!important;line-height:var(--leading-display)!important; letter-spacing:var(--tracking-display)!important;color:var(--white)!important; margin:0 0 var(--space-3)!important;max-width:20ch} .pmw-lead,.pmw-lead p{color:var(--text-on-dark-muted)!important; font-size:var(--font-size-lead)!important;line-height:1.6!important; max-width:58ch;margin:0 0 var(--space-4)!important} .pmw-ticks,.pmw-ticks ul{list-style:none;margin:var(--space-4) 0 0!important;padding:0!important} .pmw-ticks li{display:flex;gap:10px;align-items:flex-start;color:var(--white)!important; font-size:15px;line-height:1.55;margin:0 0 10px!important;padding:0!important} .pmw-ticks li::before{content:'';flex:0 0 auto;width:17px;height:17px;margin-top:3px; background-color:var(--citron); -webkit-mask:url("data:image/svg+xml;utf8,") center/contain no-repeat; mask:url("data:image/svg+xml;utf8,") center/contain no-repeat} @media screen and (max-width:900px){.pmw-ticks{display:block}} /* Divi button override (playbook s21). Divi's own .et_pb_button rules are more specific than a bare class, so the label kept Divi's default link blue even though the Citron background applied. Target a.et_pb_button. and set background-COLOR explicitly (not the background shorthand), plus kill the pseudo-element arrow. */ a.et_pb_button.pmw-btn-primary, a.et_pb_button.pmw-btn-primary:hover{ background-color:var(--action-primary-bg)!important; color:var(--action-primary-text)!important; border:none!important;border-radius:var(--radius-button)!important; font-family:var(--font-body)!important;font-weight:500!important; padding:16px 28px!important;line-height:1.2!important; transition:background-color var(--duration) var(--ease)!important} a.et_pb_button.pmw-btn-primary:hover{background-color:var(--action-primary-bg-hover)!important} a.et_pb_button.pmw-btn-primary::after, a.et_pb_button.pmw-btn-primary::before{content:none!important;display:none!important} a.et_pb_button.pmw-btn-lg{font-size:16px!important} /* Divi's global ul styling adds discs and indent inside code modules, and beats a bare .pmw-footer-list{list-style:none}. Same specificity fight as the buttons. */ ul.pmw-footer-list, ul.pmw-footer-list li{list-style:none!important;list-style-type:none!important} ul.pmw-footer-list{padding-left:0!important;margin-left:0!important} ul.pmw-footer-list li::marker{content:''!important} ul.pmw-footer-list li{padding-left:0!important;margin-left:0!important} /* ================= Section furniture ================= */ .pmw-eyebrow-l,.pmw-eyebrow-l p{color:var(--text-eyebrow)!important;font-family:var(--font-body); font-size:var(--font-size-eyebrow);font-weight:500;letter-spacing:var(--tracking-eyebrow); text-transform:uppercase;margin:0 0 var(--space-2)!important} .pmw-h2,.pmw-h2 h2{font-family:var(--font-display)!important;font-weight:700!important; font-size:var(--font-size-h2)!important;line-height:var(--leading-heading)!important; letter-spacing:var(--tracking-display)!important;color:var(--text-heading)!important; margin:0!important;max-width:760px} .pmw-h2-d,.pmw-h2-d h2{color:var(--white)!important} .pmw-sub,.pmw-sub p{font-size:var(--font-size-lead)!important;line-height:1.6!important; color:var(--text-body)!important;max-width:760px;margin:var(--space-2) 0 var(--space-5)!important} .pmw-sub-d,.pmw-sub-d p{color:var(--text-on-dark-muted)!important} /* ================= Ticker ================= Six copies animating to -16.666667%: two copies at -50% leaves a blank band on a wide monitor once one copy is narrower than the viewport (playbook s21). */ @keyframes pmw-ticker{from{transform:translateX(0)}to{transform:translateX(-16.666667%)}} .pmw-ticker{background:var(--surface-dark);border-top:1px solid var(--border-on-dark); border-bottom:1px solid var(--border-on-dark);overflow:hidden;padding:18px 0} .pmw-ticker-track{display:flex;width:max-content; animation:pmw-ticker var(--ticker-duration) linear infinite; font-family:var(--font-body);font-size:15px;font-weight:500;color:var(--white)} .pmw-ticker-run{display:inline-flex;white-space:nowrap} .pmw-ticker-run span{display:inline-flex;align-items:center;white-space:nowrap} .pmw-ticker-sep{color:var(--citron);padding:0 18px} @media (prefers-reduced-motion:reduce){.pmw-ticker-track{animation:none}} /* ================= Cards ================= */ .pmw-card{background:var(--surface-card);border:1px solid var(--border-card); border-radius:var(--radius-card);padding:var(--space-4);box-shadow:var(--shadow-soft); transition:transform var(--duration) var(--ease)} .pmw-card:hover{transform:translateY(var(--lift-hover))} .pmw-card-flat{box-shadow:none} .pmw-card h3{font-family:var(--font-display);font-weight:700;font-size:20px; letter-spacing:-.01em;color:var(--text-heading);margin:var(--space-2) 0 8px} .pmw-card p{margin:0;font-size:16px;line-height:1.65;color:var(--text-body)} .pmw-ico{display:block;width:26px;height:26px;background-color:var(--indigo-electric)} .pmw-grid-3,.pmw-grid-2{gap:var(--space-3)} /* ================= Tick list on light ================= */ ul.pmw-tick-list{list-style:none!important;margin:0!important;padding:0!important;display:grid;gap:var(--space-2)} ul.pmw-tick-list li{display:flex;gap:10px;align-items:flex-start;font-size:15px; line-height:1.55;color:var(--text-body);margin:0!important;padding:0!important; list-style:none!important} ul.pmw-tick-list li::marker{content:''!important} ul.pmw-tick-list li::before{content:'';flex:0 0 auto;width:17px;height:17px;margin-top:3px; background-color:var(--indigo-electric); -webkit-mask:url("data:image/svg+xml;utf8,") center/contain no-repeat; mask:url("data:image/svg+xml;utf8,") center/contain no-repeat} /* ================= Cost comparison ================= */ .pmw-cost{background:var(--surface-card);border:1px solid var(--border-card); border-radius:var(--radius-card);padding:var(--space-4);box-shadow:var(--shadow-soft);min-width:0} .pmw-cost-row{margin-bottom:var(--space-3)} .pmw-cost-head{display:flex;flex-wrap:wrap;justify-content:space-between; align-items:baseline;gap:4px var(--space-3);margin-bottom:10px} .pmw-cost-head span{font-size:15px;color:var(--text-body);min-width:0;overflow-wrap:anywhere} .pmw-cost-head b{font-family:var(--font-display);font-weight:700;font-size:22px; letter-spacing:-.01em;color:var(--text-heading);min-width:0;overflow-wrap:anywhere} .pmw-cost-bar{height:14px;border-radius:var(--radius-pill);background:var(--border-card)} .pmw-cost-fill{height:100%;border-radius:var(--radius-pill)} .pmw-cost-note{margin:var(--space-2) 0 0;font-size:15px;color:var(--text-body)} /* ================= Packages ================= */ .pmw-pkgs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-3); align-items:stretch;padding-top:var(--space-2)} @media screen and (max-width:980px){.pmw-pkgs{grid-template-columns:repeat(2,minmax(0,1fr))}} @media screen and (max-width:600px){.pmw-pkgs{grid-template-columns:minmax(0,1fr)}} .pmw-pkg{position:relative;display:flex;flex-direction:column;min-width:0; background:var(--surface-card);border:1px solid var(--border-card); border-radius:var(--radius-card);padding:var(--space-4);box-shadow:var(--shadow-soft)} .pmw-pkg--pop{border:2px solid var(--ring-popular);box-shadow:var(--shadow-raised); transform:translateY(-12px);padding-top:var(--space-5)} .pmw-pkg-badge{position:absolute;top:-14px;left:var(--space-4);background:var(--citron); color:var(--indigo-ink);font-family:var(--font-body);font-size:13px;font-weight:500; padding:5px 14px;border-radius:var(--radius-pill)} .pmw-pkg-name{font-family:var(--font-display);font-weight:700;font-size:var(--font-size-h3); letter-spacing:-.01em;color:var(--text-heading)} .pmw-pkg-strap{font-size:15px;color:var(--text-body);margin-top:2px} .pmw-pkg-price{display:flex;align-items:flex-end;flex-wrap:wrap;gap:4px 8px;min-width:0; margin:var(--space-3) 0 2px} .pmw-pkg-price b{font-family:var(--font-display);font-weight:800;line-height:1; font-size:clamp(34px,3.4vw,var(--font-size-price));letter-spacing:var(--tracking-display); color:var(--text-heading)} .pmw-pkg-price i{font-style:normal;font-size:15px;color:var(--text-body); padding-bottom:4px;white-space:nowrap} .pmw-pkg-pages{font-size:15px;font-weight:500;color:var(--indigo-electric)} .pmw-pkg-best{font-size:15px;line-height:1.6;color:var(--text-body);margin:var(--space-3) 0 0} .pmw-pkg-rule{border:0;border-top:1px solid var(--border-divider);margin:var(--space-3) 0} .pmw-pkg-spacer{flex:1;min-height:var(--space-3)} .pmw-pkg-foot{font-size:13px;font-style:italic;color:var(--text-body); margin-top:var(--space-2);text-align:center} .pmw-btn-dark{background:var(--action-dark-bg);color:var(--action-dark-text)} .pmw-btn-dark:hover{background:#1D204A;color:var(--action-dark-text)} .pmw-btn-full{width:100%;justify-content:center;margin-top:var(--space-3)} .pmw-billing{font-size:13px;line-height:1.65;font-style:italic;color:var(--text-body); max-width:900px;margin:var(--space-5) auto 0;text-align:center} /* ================= Steps ================= */ ol.pmw-steps{list-style:none!important;margin:0!important;padding:0!important;display:grid; grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-4)} @media screen and (max-width:900px){ol.pmw-steps{grid-template-columns:minmax(0,1fr)}} ol.pmw-steps li{list-style:none!important;margin:0!important;padding:var(--space-3) 0 0!important; border-top:1px solid var(--border-divider)} ol.pmw-steps li::marker{content:''!important} .pmw-step-n{font-family:var(--font-display);font-weight:800;font-size:20px;line-height:1; letter-spacing:-.02em;color:var(--indigo-electric);margin-bottom:10px} ol.pmw-steps h3{font-family:var(--font-display);font-weight:700;font-size:var(--font-size-h4); letter-spacing:0;color:var(--text-heading);margin:0 0 8px} ol.pmw-steps p{margin:0;font-size:16px;line-height:1.65;color:var(--text-body)} /* ================= FAQ ================= Native
/: accessible, keyboard-operable, zero JS, and it costs nothing on page load. */ .pmw-faq{border-top:1px solid var(--border-divider)} .pmw-faq details{border-bottom:1px solid var(--border-divider)} .pmw-faq summary{list-style:none;cursor:pointer;display:flex;gap:var(--space-3); align-items:center;justify-content:space-between;padding:var(--space-3) 0; font-family:var(--font-display);font-weight:700;font-size:19px;letter-spacing:-.01em; color:var(--text-heading)} .pmw-faq summary::-webkit-details-marker{display:none} .pmw-faq summary::after{content:'+';font-family:var(--font-body);font-size:24px; font-weight:400;line-height:1;color:var(--indigo-electric);flex:0 0 auto} .pmw-faq details[open] summary::after{content:'\2212'} .pmw-faq p{margin:0 0 var(--space-3);max-width:70ch;font-size:16px;line-height:1.7; color:var(--text-body)} /* ================= Sister brands ================= */ a.pmw-brand{display:block;text-decoration:none;background:var(--surface-card); border:1px solid var(--border-card);border-radius:var(--radius-card); padding:var(--space-4);box-shadow:var(--shadow-soft); transition:transform var(--duration) var(--ease)} a.pmw-brand:hover{transform:translateY(var(--lift-hover));text-decoration:none} .pmw-brand-d{font-family:var(--font-display);font-weight:800;letter-spacing:-.02em; font-size:clamp(17px,1.8vw,21px);color:var(--text-heading);overflow-wrap:anywhere} a.pmw-brand p{margin:var(--space-2) 0 var(--space-3);font-size:15px;line-height:1.6; color:var(--text-body)} .pmw-brand-go{display:inline-flex;align-items:center;gap:8px;font-size:15px; font-weight:500;color:var(--indigo-electric)} /* ================= Closing CTA band ================= */ .pmw-cta{position:relative;overflow:hidden;background:var(--surface-dark)} .pmw-cta::before{content:'';position:absolute;inset:0;pointer-events:none; background:var(--hero-glow);opacity:.7} .pmw-cta .et_pb_row{position:relative;z-index:1} .pmw-center,.pmw-center p{text-align:center} .pmw-btnrow{display:flex;gap:var(--space-2);justify-content:center;flex-wrap:wrap; margin-top:var(--space-4)} .pmw-btn-ghost{background:transparent;color:var(--white); border:1px solid var(--action-secondary-border)} .pmw-btn-ghost:hover{background:var(--white-08);border-color:var(--white-64);color:var(--white)} .pmw-note{font-size:14px;line-height:1.6;color:var(--text-body); margin:var(--space-3) 0 0;max-width:84ch} /* Separator as a pseudo-element keeps the six duplicated runs small in markup. */ .pmw-ticker-run span::after{content:'\2726';color:var(--citron);padding:0 18px} /* Bar widths/colours as classes: inline style="" is rejected by divi-set-content unless allow_inline_styles is opted into, which we deliberately do not do. */ .pmw-cost-fill--agency{width:100%;background:var(--indigo-ink)} .pmw-cost-fill--ours{width:9%;background:var(--citron)} .pmw-prose{font-size:17px;line-height:1.7;color:var(--text-body);margin:0} .pmw-prose,.pmw-prose p{font-size:17px!important;line-height:1.7!important;color:var(--text-body)!important} /* Centred CTA band: the max-width on headings/sub would otherwise keep the block left-aligned even with text-align:center (playbook s6). */ .pmw-center.pmw-h2,.pmw-center.pmw-h2 h2, .pmw-center.pmw-sub,.pmw-center.pmw-sub p{margin-left:auto!important;margin-right:auto!important; text-align:center!important} .pmw-cta .pmw-sub,.pmw-cta .pmw-sub p{margin-bottom:0!important} /* ================= Media tiles / demo cards ================= aspect-ratio + explicit width/height on the img reserves the box before the file lands, so lazy-loaded rows below the fold do not cause CLS (s10/s14). */ .pmw-media{position:relative;aspect-ratio:12/5;overflow:hidden;background:var(--mist); border-bottom:1px solid var(--border-card)} .pmw-media img{width:100%;height:100%;object-fit:cover;display:block} a.pmw-tile,a.pmw-demo{display:block;text-decoration:none;background:var(--surface-card); border:1px solid var(--border-card);border-radius:var(--radius-card);overflow:hidden; transition:transform var(--duration) var(--ease),box-shadow var(--duration) var(--ease)} a.pmw-demo{box-shadow:var(--shadow-soft)} a.pmw-tile:hover,a.pmw-demo:hover{transform:translateY(var(--lift-hover)); box-shadow:var(--shadow-soft);text-decoration:none} .pmw-tile-body{padding:var(--space-3)} .pmw-tile-body h3{font-family:var(--font-display);font-weight:700;font-size:18px; letter-spacing:-.01em;color:var(--text-heading);margin:0 0 6px} .pmw-tile-body p{margin:0;font-size:15px;line-height:1.55;color:var(--text-body)} .pmw-demo-label{font-family:var(--font-body);font-size:13px;font-weight:500; letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--indigo-electric)} .pmw-tile-body h3.pmw-demo-title{font-size:20px;margin:8px 0 4px} .pmw-demo-go,.pmw-link{display:inline-flex;align-items:center;gap:8px; font-size:15px;font-weight:500;color:var(--indigo-electric);text-decoration:none} .pmw-demo-go{margin-top:var(--space-3)} .pmw-link{margin-top:var(--space-3)} /* ================= HERO: photography behind the Indigo Ink veil ================= Brand rule: a FLAT 72% veil, not a gradient scrim. Layer order is top-first in the shorthand, so the electric glow sits over the veil, which sits over the photo. */ .pmw-hero{background-image:url(/wp-content/uploads/2026/08/hero-trades.jpg); background-size:cover;background-position:center 42%;background-repeat:no-repeat} .pmw-hero::before{background: radial-gradient(58% 58% at 74% 26%,rgba(90,92,240,.42) 0%,rgba(90,92,240,0) 68%), linear-gradient(rgba(20,22,52,.72),rgba(20,22,52,.72))} /* ================= Softer page surface ================= Pure #FFF full-bleed is what reads cheap, especially butting straight up against the dark hero. Keep pure white for CARDS so they lift, and drop the page surface to a cool off-white. Divi paints .et_pb_section white by default, so reset it and let the body colour through (no !important: the per-module rules that set the mist and dark sections are more specific and must still win). */ :root{--surface-page:#FAFBFD} body{background-color:var(--surface-page)} .et_pb_section{background-color:transparent} /* Soft riser under a dark section instead of a hard edge into light. */ .pmw-after-dark{background: linear-gradient(180deg,rgba(20,22,52,.055) 0%,rgba(20,22,52,0) 260px), var(--surface-page)} /* Cards now sit on off-white, so give them a touch more lift. */ .pmw-card,.pmw-pkg,.pmw-cost,a.pmw-tile,a.pmw-demo,a.pmw-brand{background:var(--white)} /* ---- Hero veil, corrected ---- A flat 72% film assumes a photo with reasonable density. hero-trades is very high-key (pale wood, blown-out windows) so 72% left it washed grey-lilac and broke the "every hero is dark" rule. Instead MULTIPLY the photo into Indigo Ink first: that crushes the highlights into brand hue and keeps shadow texture, which is what makes a brand photo hero read expensive rather than hazy. A lighter flat film then guarantees text contrast. Net density is well past 72%, deliberately - the brand's stated goal is a dark hero with readable white text. */ .pmw-hero{background-image: linear-gradient(rgba(20,22,52,.62),rgba(20,22,52,.62)), url(/wp-content/uploads/2026/08/hero-trades.jpg); background-blend-mode:multiply,normal; background-size:cover;background-position:center 42%;background-repeat:no-repeat} .pmw-hero::before{background: radial-gradient(56% 56% at 76% 24%,rgba(90,92,240,.40) 0%,rgba(90,92,240,0) 66%), linear-gradient(102deg,rgba(20,22,52,.55) 0%,rgba(20,22,52,.34) 58%,rgba(20,22,52,.30) 100%)} /* Settle the join into the ticker so the photo does not stop dead on a hard line. */ .pmw-hero::after{background-image: linear-gradient(to bottom,rgba(20,22,52,0) 78%,rgba(20,22,52,.55) 100%), url("data:image/svg+xml;utf8,"); opacity:1} /* Correction: the rule above wrongly forced the grain layer to opacity 1. Grain must stay at 5% (--grain-opacity); the bottom fade belongs in ::before. */ .pmw-hero::after{background-image: url("data:image/svg+xml;utf8,"); opacity:var(--grain-opacity)} .pmw-hero::before{background: linear-gradient(to bottom,rgba(20,22,52,0) 76%,rgba(20,22,52,.45) 100%), radial-gradient(56% 56% at 76% 24%,rgba(90,92,240,.40) 0%,rgba(90,92,240,0) 66%), linear-gradient(102deg,rgba(20,22,52,.55) 0%,rgba(20,22,52,.34) 58%,rgba(20,22,52,.30) 100%)} /* Second pass: .62 multiply still left the centre-right saw/background pale, so the hero read grey rather than Indigo Ink and the left-dark/right-light split looked uneven. Crush the highlights harder and flatten the directional falloff so the whole band is dark; the photo becomes texture, not subject. */ .pmw-hero{background-image: linear-gradient(rgba(20,22,52,.74),rgba(20,22,52,.74)), url(/wp-content/uploads/2026/08/hero-trades.jpg); background-blend-mode:multiply,normal} .pmw-hero::before{background: linear-gradient(to bottom,rgba(20,22,52,0) 74%,rgba(20,22,52,.5) 100%), radial-gradient(58% 58% at 76% 26%,rgba(90,92,240,.46) 0%,rgba(90,92,240,0) 68%), linear-gradient(102deg,rgba(20,22,52,.52) 0%,rgba(20,22,52,.44) 60%,rgba(20,22,52,.42) 100%)} /* ---- Hero photo swap: hero-trades -> hero-builder ---- hero-trades put a carpenter (and his face) in the left third, directly under the H1. hero-builder is a wide site shot: plain left third (concrete, materials, fence) with both subjects centre and right, so it sits under left-aligned copy properly and reads as depth rather than a competing picture. */ .pmw-hero{background-image: linear-gradient(rgba(20,22,52,.74),rgba(20,22,52,.74)), url(/wp-content/uploads/2026/08/hero-builder.jpg); background-blend-mode:multiply,normal; background-position:center 46%} /* ---- Mobile ---- cover on a narrow, tall viewport zooms hard into the centre, and at desktop film density nothing was legible. Pan right so the wheelbarrow/building side shows instead of a blank patch of concrete, and lift the film ~8% so the photo actually registers. Text still sits on Indigo Ink well past contrast requirements. */ @media screen and (max-width:900px){ .pmw-hero{background-image: linear-gradient(rgba(20,22,52,.66),rgba(20,22,52,.66)), url(/wp-content/uploads/2026/08/hero-builder.jpg); background-position:62% center} .pmw-hero::before{background: linear-gradient(to bottom,rgba(20,22,52,0) 74%,rgba(20,22,52,.5) 100%), radial-gradient(70% 50% at 70% 18%,rgba(90,92,240,.40) 0%,rgba(90,92,240,0) 70%), linear-gradient(180deg,rgba(20,22,52,.34) 0%,rgba(20,22,52,.42) 100%)} } /* ---- Dark -> light transition, third pass ---- Previous attempt (.055 over 260px) was far too weak. The problem is a ~90 point luminance jump at a hard horizontal line; a near-invisible tint cannot soften that. This carries a clearly visible cool grey down over 520px in four stops so the eye is led out of the dark rather than hitting a cut, plus a soft shadow under the ticker so the dark band reads as sitting ABOVE the light section instead of being butt-joined to it. */ .pmw-after-dark{background: linear-gradient(180deg, rgba(20,22,52,.17) 0px, rgba(20,22,52,.09) 150px, rgba(20,22,52,.032) 330px, rgba(20,22,52,0) 520px), var(--surface-page)} .pmw-ticker{box-shadow:0 26px 46px -14px rgba(12,14,34,.55)} /* ================= HERO: sculpted light field, no photography ================= Photography is dropped (client call, 2026-08-07). A dark hero looks flat when it is a single flat fill with a timid glow - not because it lacks a photo. Four things give it dimension: 1. the BASE is a diagonal tonal shift, not one flat colour 2. a strong, clearly-placed light source off-centre top-right 3. a cool counter-pool bottom-left so the field is not lit from one side only 4. a vignette pulling the corners down, which focuses the copy Layer order is top-first: bottom fade > primary light > counter-pool > vignette, so the vignette sits UNDER the glow and cannot mute it. */ .pmw-hero{background-image:none; background:linear-gradient(158deg,#1B1E46 0%,#141634 48%,#0F1126 100%)} .pmw-hero::before{background: linear-gradient(to bottom,rgba(15,17,38,0) 68%,rgba(15,17,38,.8) 100%), radial-gradient(62% 74% at 78% 18%,rgba(105,107,255,.62) 0%,rgba(90,92,240,.20) 44%,rgba(90,92,240,0) 74%), radial-gradient(52% 62% at 10% 94%,rgba(76,62,205,.30) 0%,rgba(76,62,205,0) 72%), radial-gradient(118% 88% at 46% 44%,rgba(8,9,26,0) 38%,rgba(8,9,26,.52) 100%)} /* A touch more grain now there is no photo texture doing that job. */ .pmw-hero::after{opacity:.075} @media screen and (max-width:900px){ .pmw-hero{background:linear-gradient(168deg,#1B1E46 0%,#141634 52%,#0F1126 100%)} .pmw-hero::before{background: linear-gradient(to bottom,rgba(15,17,38,0) 66%,rgba(15,17,38,.8) 100%), radial-gradient(96% 46% at 78% 12%,rgba(105,107,255,.60) 0%,rgba(90,92,240,.18) 46%,rgba(90,92,240,0) 76%), radial-gradient(90% 40% at 8% 96%,rgba(76,62,205,.28) 0%,rgba(76,62,205,0) 74%), radial-gradient(130% 80% at 50% 46%,rgba(8,9,26,0) 40%,rgba(8,9,26,.5) 100%)} } /* ================= Nav: frost to INDIGO, never white ================= The scrolled nav was rgba(255,255,255,.92) with the link colour flipping to Midnight. A white bar dropping in over a dark site is the harsh, cheap-looking moment. Frost to Indigo Ink instead: the bar stays part of the brand, the type never flips colour, and there is no white flash at the scroll threshold. */ .pmw-nav.is-scrolled{ background-color:rgba(17,19,44,.86); backdrop-filter:saturate(160%) blur(16px); -webkit-backdrop-filter:saturate(160%) blur(16px); border-bottom-color:rgba(255,255,255,.10); box-shadow:0 12px 34px -14px rgba(8,9,26,.65)} /* Type stays white in BOTH states - no colour switch at the threshold. */ .pmw-nav.is-scrolled .pmw-lockup, .pmw-nav.is-scrolled .pmw-nav-link, .pmw-nav.is-scrolled .pmw-burger{color:var(--white)} .pmw-nav.is-scrolled .pmw-nav-link.is-active{color:var(--citron)} /* Mobile overlay follows the same rule rather than being a white sheet. */ @media screen and (max-width:1040px){ .pmw-overlay{background:rgba(17,19,44,.97); backdrop-filter:saturate(160%) blur(16px); -webkit-backdrop-filter:saturate(160%) blur(16px); border-bottom-color:rgba(255,255,255,.12); box-shadow:0 18px 40px -16px rgba(8,9,26,.7)} .pmw-ov-link{color:var(--white);border-bottom-color:rgba(255,255,255,.12)} .pmw-ov-link.is-active{color:var(--citron)} } /* ================= HERO: ambient light drift ================= Restructured into three layers so the light can move on its own: section = static base gradient ::before = the LIGHT only, oversized and slowly drifting (GPU transform) ::after = vignette + bottom fade + grain, static, painted over the light Grain opacity now lives inside the SVG (opacity='.09') rather than on the element, so ::after can carry the vignette at full strength in the same layer. Deliberately NOT scroll-linked: background-attachment:fixed is janky and ignored on iOS, and a JS parallax would mean adding a code module to a hero that is currently 100% native. A 34s ease-in-out alternate drift reads as alive without anything moving frame-to-frame that you are trying to read. Nothing that holds text moves at all. */ .pmw-hero::before{inset:-16%; background: radial-gradient(62% 74% at 78% 18%,rgba(105,107,255,.62) 0%,rgba(90,92,240,.20) 44%,rgba(90,92,240,0) 74%), radial-gradient(52% 62% at 10% 94%,rgba(76,62,205,.32) 0%,rgba(76,62,205,0) 72%); will-change:transform; animation:pmw-hero-drift 34s ease-in-out infinite alternate} @keyframes pmw-hero-drift{ from{transform:translate3d(0,0,0) scale(1)} to{transform:translate3d(-3.2%,2.2%,0) scale(1.09)}} .pmw-hero::after{inset:0;opacity:1; background: linear-gradient(to bottom,rgba(15,17,38,0) 68%,rgba(15,17,38,.8) 100%), radial-gradient(118% 88% at 46% 44%,rgba(8,9,26,0) 38%,rgba(8,9,26,.52) 100%), url("data:image/svg+xml;utf8,")} @media screen and (max-width:900px){ .pmw-hero::before{inset:-18%; background: radial-gradient(96% 46% at 78% 12%,rgba(105,107,255,.60) 0%,rgba(90,92,240,.18) 46%,rgba(90,92,240,0) 76%), radial-gradient(90% 40% at 8% 96%,rgba(76,62,205,.30) 0%,rgba(76,62,205,0) 74%)} .pmw-hero::after{background: linear-gradient(to bottom,rgba(15,17,38,0) 66%,rgba(15,17,38,.8) 100%), radial-gradient(130% 80% at 50% 46%,rgba(8,9,26,0) 40%,rgba(8,9,26,.5) 100%), url("data:image/svg+xml;utf8,")} } /* Non-negotiable: anyone who has asked their OS to reduce motion gets none. */ @media (prefers-reduced-motion:reduce){ .pmw-hero::before{animation:none} .pmw-ticker-track{animation:none} } /* ================= Full-bleed photo band ================= The contained card grids never give the "full width image" moment. This is a true edge-to-edge photo with the copy centred over it. Veil is only ~58% here, NOT the 72%+ the hero needed: hero-cafe is naturally dark and moody, so the photo stays visible instead of going murky. The rule is veil to the photo's density, not to a fixed number. A light-weighted linear gradient behind the text block keeps contrast where the words actually are. */ .pmw-band{position:relative;overflow:hidden; --pmw-band-img:url(/wp-content/uploads/2026/08/hero-cafe.jpg); background-image: linear-gradient(rgba(20,22,52,.58),rgba(20,22,52,.58)), var(--pmw-band-img); background-blend-mode:multiply,normal; background-size:cover;background-position:center 55%} .pmw-band::before{content:'';position:absolute;inset:0;pointer-events:none; background: radial-gradient(75% 120% at 50% 50%,rgba(20,22,52,.42) 0%,rgba(20,22,52,0) 72%), linear-gradient(to bottom,rgba(20,22,52,.5) 0%,rgba(20,22,52,.12) 40%,rgba(20,22,52,.5) 100%)} .pmw-band::after{content:'';position:absolute;inset:0;pointer-events:none; opacity:var(--grain-opacity); background-image:url("data:image/svg+xml;utf8,")} .pmw-band .et_pb_row{position:relative;z-index:1} @media screen and (max-width:900px){ .pmw-band{background-position:58% center} } /* Centre the eyebrow inside the band (the .pmw-center rules only covered h2/sub). */ .pmw-center.pmw-eyebrow,.pmw-center.pmw-eyebrow p{text-align:center!important} /* The band now carries the Industries heading, so the grid that follows it has no header of its own - pull it up so the two read as one block. */ .pmw-band + .et_pb_section{padding-top:64px!important} /* ================= Nav: glass capsule + pill active state ================= Per the CleaningPro reference. The existing