body{margin:0;background:var(--paper)}
/* only the page frame fills the screen; editor previews wrap each block in .hp and size to it */
body>.hp{min-height:100vh}

/* skip link: hidden until focused */
.skip-link{position:absolute;left:0;top:0;z-index:100;background:var(--ink);color:var(--paper);padding:12px 18px;font-family:var(--display);font-weight:500;font-size:14px;text-decoration:none;transform:translateY(-120%)}
.skip-link:focus{transform:none;outline:2px solid var(--green);outline-offset:-4px}
/* footer link columns sit in a nav that does not take part in the grid */
.hp footer .footer-nav{display:contents}

/* header logo link and menu toggle */
.hp .topnav .brand{display:flex;align-items:center;border:0;background:none}
.hp .topnav .l a{color:inherit;text-decoration:none}
.hp .topnav .l a:hover,.hp .topnav .l a.on{color:var(--ink)}
.hp footer .footer-legal{display:flex;gap:14px}
.hp footer .footer-legal a{display:inline;padding:0;color:#ffffff99}
.menu-toggle{display:none;width:44px;height:44px;padding:0;border:0;background:transparent;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:5px}
.menu-toggle span{display:block;width:22px;height:2px;background:var(--ink);border-radius:2px}
.menu-panel{background:var(--paper);border-bottom:1px solid var(--line);padding:8px 24px 20px;position:relative;z-index:3}
.menu-panel[hidden]{display:none}
.menu-panel>a:not(.btn){display:block;font-family:var(--display);font-weight:500;font-size:18px;color:var(--ink);text-decoration:none;padding:14px 0;border-bottom:1px solid var(--line)}
.menu-panel>a.on{color:var(--deep-text)}
.menu-panel .btn{margin-top:16px;justify-content:center}
/* header CTA: the short label shows only on small phones (Ruling L); the link's aria-label keeps the full name */
.hp .topnav>.btn .cta-short{display:none}
@media (max-width:900px){
  .menu-toggle{display:flex}
  .hp .topnav{padding:12px 20px;gap:12px}
  .hp .topnav .brand,.menu-toggle{flex-shrink:0}
  .hp .topnav>.btn{white-space:nowrap;margin-left:auto}
}
@media (max-width:420px){
  .hp .topnav>.btn .cta-long{display:none}
  .hp .topnav>.btn .cta-short{display:inline}
}
@media (min-width:901px){
  .menu-panel{display:none}
}

/* breadcrumbs (Unrivaled Signal markup in the mockup look) */
.hp .crumbs nav{all:unset;display:block;margin-bottom:16px}
.hp .crumbs .usig-breadcrumbs__list{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;margin:0;padding:0;list-style:none;font-size:13.5px;color:#0B0B0B99}
.hp .crumbs .usig-breadcrumbs__item{display:inline-flex;align-items:center;gap:8px;margin:0;padding:0;list-style:none}
.hp .crumbs .usig-breadcrumbs__item::marker{content:""}
.hp .crumbs .usig-breadcrumbs__item a{color:inherit;text-decoration:none}
.hp .crumbs .usig-breadcrumbs__item a:hover{color:var(--ink)}
.hp .crumbs [aria-current="page"]{font-weight:500;color:var(--ink)}
.hp .crumbs .usig-breadcrumbs__sep{font-size:0;display:inline-block;width:10px;height:10px;opacity:.5;margin:0}
.hp .crumbs .usig-breadcrumbs__sep::before{content:"";display:block;width:10px;height:10px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13.2 4.8l7.2 7.2-7.2 7.2-1.4-1.4 4.8-4.8H3.6v-2h13l-4.8-4.8z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13.2 4.8l7.2 7.2-7.2 7.2-1.4-1.4 4.8-4.8H3.6v-2h13l-4.8-4.8z'/%3E%3C/svg%3E") center/contain no-repeat}

/* long-form layout (from the article mockup) */
.hp .ahero{max-width:900px;margin:0 auto;padding:60px 32px 34px;text-align:center;position:relative}
.hp .ahero .hero{display:block;padding:0}
.hp .ahero .hero > div{display:flex;flex-direction:column;align-items:center}
.hp .ahero h1{font-size:50px;max-width:860px;margin:14px 0 14px}
.hp .ahero .lead{max-width:660px;margin:0 auto 22px}
.hp .longform{display:grid;grid-template-columns:220px 1fr 300px;gap:44px;align-items:start}
.hp .longform--no-toc{grid-template-columns:1fr 300px}
/* Legal pages (page.php, um_is_legal_page): the contents list and the article only, centred */
.hp .longform--plain{grid-template-columns:220px minmax(0,680px);justify-content:center}
.hp .longform--plain.longform--no-toc{grid-template-columns:minmax(0,680px)}
.hp .toc{position:sticky;top:24px;font-size:14px}
.hp .toc .eyebrow{margin-bottom:12px}
.hp .toc a{display:block;color:#0B0B0B99;text-decoration:none;padding:7px 0 7px 14px;border-left:2px solid var(--line);transition:color .2s,border-color .2s}
.hp .toc a:hover{color:var(--ink)}
.hp .toc a.on{color:var(--ink);border-color:var(--green);font-weight:500}
.hp .article{font-size:17px;line-height:1.7;max-width:680px;--font-satoshi:Satoshi;--font-instrument-serif:Fractul}
.hp .article h2{font-size:32px;margin:0 0 12px;scroll-margin-top:90px}
.hp .article h2:not(:first-child){margin-top:44px}
.hp .article h3{font-size:21px;font-weight:500;letter-spacing:-.02em;margin:26px 0 8px}
.hp .article p{color:#0B0B0Bcc;margin:0 0 14px}
.hp .article a{text-decoration:underline;text-decoration-color:#39B54A66;text-underline-offset:3px}
.hp .article strong{color:var(--ink);font-weight:500}
.hp .wp-block-um-longform .article ul{list-style:none;padding:0;margin:0 0 16px}
.hp .wp-block-um-longform .article ul li{display:flex;gap:10px;padding:6px 0;color:#0B0B0Bcc}
.hp .wp-block-um-longform .article ul li svg{width:17px;height:17px;color:var(--green);flex:none;margin-top:5px}
.hp .wp-block-um-longform .article ul li b{color:var(--ink);font-weight:500}
/* Scoped to the long-form block so plain long-form pages (page.php) keep ordinary bullets and numbers. Core list items have no svg, so draw the same check icon (sprite i-check) with a mask. Their text and <b> are loose inline children, so they stay in normal flow instead of becoming flex items. */
.hp .wp-block-um-longform .article ul li:not(:has(> svg)){display:block;position:relative;padding-left:27px}
.hp .wp-block-um-longform .article ul li:not(:has(> svg))::before{content:"";position:absolute;left:0;top:11px;width:17px;height:17px;background:var(--green);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 1a11 11 0 1 1 0 22 11 11 0 0 1 0-22zm5.2 7.3l-1.4-1.4-5.3 5.3-2.3-2.3-1.4 1.4 3.7 3.7z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 1a11 11 0 1 1 0 22 11 11 0 0 1 0-22zm5.2 7.3l-1.4-1.4-5.3 5.3-2.3-2.3-1.4 1.4 3.7 3.7z'/%3E%3C/svg%3E") center/contain no-repeat}
.hp .wp-block-um-longform .article ul li strong{color:var(--ink);font-weight:500}
.hp .article figure{margin:26px 0;padding:18px;background:#fff;border:1px solid var(--line);border-radius:16px}
.hp .article figcaption{font-size:13.5px;color:#0B0B0B99;margin-top:10px;text-align:center}
.hp .aside{position:sticky;top:24px;display:flex;flex-direction:column;gap:14px}
.hp .aside .talk{padding:24px}
@media (max-width:1060px){.hp .longform,.hp .longform--no-toc,.hp .longform--plain,.hp .longform--plain.longform--no-toc{grid-template-columns:1fr}.hp .toc,.hp .aside{position:static}.hp .toc{display:none}.hp .aside{max-width:680px}}
@media (max-width:900px){.hp .ahero h1{font-size:34px}.hp .ahero{padding:44px 20px 26px}.hp .article h2{font-size:26px}.hp .article figure{padding:10px}}

/* 404 and the search form */
.hp .notfound .ahero{padding-bottom:70px}
.hp .search-form{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid #0B0B0B26;border-radius:999px;padding:8px 8px 8px 20px;width:min(560px,100%);margin:6px 0 26px;box-shadow:0 18px 40px -28px #0B0B0B55}
.hp .search-form:focus-within{border-color:var(--green);box-shadow:0 0 0 4px #39B54A26}
.hp .search-form label{flex:1;display:flex}
.hp .search-form .search-field{all:unset;flex:1;font-size:16px;text-align:left;min-width:0}
.hp .search-form .search-submit{border:0;border-radius:999px;background:var(--green);color:var(--ink);font:inherit;font-weight:500;font-size:14.5px;padding:10px 18px;cursor:pointer}
.hp .search-form .search-submit:hover{background:#4fcb60}

/* contrast fixes for small text */
/* small green text uses --deep-text for WCAG AA; icons and large numbers keep --deep.
   These overrides are for light backgrounds only. Dark sections rely on brand.css's
   .dark ... rules, which win on specificity, so any new dark section must carry .dark
   or its own eyebrow and tag override. */
.hp .eyebrow,.hp .tag,.hp .article a,.hp .toc .eyebrow,.hp .ver,.hp .cats span,.hp .up,.hp .ok,.hp .fld label i,.hp .mt em,.hp .fstepno,.hp .alts b,.hp .atab .who4,.hp .redir .r .st.good{color:var(--deep-text)}
/* marquee eyebrow: brand.css has 50% ink (3.6:1 on paper); b3 is about 6:1 */
.hp .mq .eyebrow{color:#0B0B0Bb3}
/* footer text contrast override lives here because brand.css is a copy of the mockup */
.hp footer .base{color:#ffffffa6}
.hp .aside .crow a{color:inherit;text-decoration:none}
.hp .aside .crow a:hover,.hp .share button:hover,.hp .loadmore:hover,.hp .stat a:hover,.hp .src:hover{color:var(--deep-text)}

/* search results */
.hp .search-results{list-style:none;margin:0;padding:0;max-width:760px;display:grid;gap:28px}
.hp .search-result h3{margin:8px 0 6px}
.hp .search-result h3 a{color:var(--ink);text-decoration:none}
.hp .search-result h3 a:hover{color:var(--deep-text)}
.hp .search-result p{margin:0;color:var(--muted)}
.hp main:focus{outline:none}

/* Hero entrance runs in CSS from first paint, so the largest text never waits on the bundle.
   The head script adds .js only when motion is allowed. */
@keyframes um-rise{from{opacity:0;transform:translateY(18px)}}
@keyframes um-mask{from{clip-path:inset(0 0 100% 0);transform:translateY(24px)}to{clip-path:inset(0);transform:none}}
@media (prefers-reduced-motion: no-preference){
.js .herosec .hero > div:first-child > *{animation:um-rise .7s cubic-bezier(.215,.61,.355,1) backwards}
.js .herosec .hero > div:first-child > h1{animation:um-mask 1s cubic-bezier(.16,1,.3,1) backwards}
.js .herosec .hero > div:first-child > :nth-child(1){animation-delay:0s}
.js .herosec .hero > div:first-child > :nth-child(2){animation-delay:.08s}
.js .herosec .hero > div:first-child > :nth-child(3){animation-delay:.18s}
.js .herosec .hero > div:first-child > :nth-child(4){animation-delay:.26s}
.js .herosec .hero > div:first-child > :nth-child(5){animation-delay:.34s}
.js .herosec .hero > div:first-child > :nth-child(n+6){animation-delay:.42s}
}

/* services bento: the mockup's span.go and span.pill are real anchors here */
.hp a.go{color:inherit}
.hp a.go,.hp a.pill{text-decoration:none}

/* reviews pause button (Ruling M): shown only once the motion core runs, so never under reduced motion or without JS */
.hp .um-pause{display:none;align-items:center;gap:8px;min-height:32px;padding:6px 14px;border:1px solid var(--line);border-radius:999px;background:transparent;color:var(--muted);font:500 13px/1 var(--display);cursor:pointer;transition:color .2s,border-color .2s}
.hp.motion-ready .um-pause{display:inline-flex}
.hp .um-pause:hover{color:var(--ink);border-color:#0B0B0B40}
.hp .um-pause:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.hp .um-pause-ic{display:block;box-sizing:border-box;width:8px;height:10px;border-left:3px solid currentColor;border-right:3px solid currentColor}
.hp .um-pause[data-paused] .um-pause-ic{width:0;height:0;border-style:solid;border-width:5px 0 5px 8px;border-color:transparent transparent transparent currentColor}
@media (prefers-reduced-motion:reduce){.hp .um-pause{display:none!important}}
/* reviews: the button sits on its own row under the quotes, at the right */
.hp .qs .um-pause{grid-column:1/-1;justify-self:end}
/* the logo marquee pauses for keyboard focus as it does for hover */
.hp .mq:focus-within .track{animation-play-state:paused}

/* Visually hidden text for screen readers, such as the "opens in a new tab" cue from um_link (Ruling P) */
.screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute!important;width:1px;word-wrap:normal!important}
.screen-reader-text:focus{background:#fff;clip:auto!important;clip-path:none;color:var(--ink);display:block;height:auto;left:5px;padding:12px 20px;top:5px;width:auto;z-index:100000}

/* Process step titles are H3 (under the section H2), styled exactly as brand.css styles .step h4 */
.hp .step h3{font-size:21px;font-weight:500;letter-spacing:-.02em;margin:0}
/* Breadcrumbs aligned left in the service and location heroes (um_breadcrumbs( 'crumbs--left' )) */
.hp .crumbs.crumbs--left .usig-breadcrumbs__list{justify-content:flex-start}

/* Ruling R20: the brand.css .float chips float once, not forever. The fl keyframes only set the
   50% step, so each cycle starts and ends at the chip's own position and it comes to rest there
   with no jump. Plain chips run 4.8s, and .b chips start .4s later and run 4.4s, so every chip
   ends by 4.8s. brand.css stays verbatim, and its reduced-motion rule still turns them off. */
.hp .float{animation-duration:4.8s;animation-iteration-count:1}
.hp .float.b{animation-delay:.4s;animation-duration:4.4s}

/* Form states shared by the contact and audit forms (inc/form-markup.php, assets/src/forms).
   None of these classes are in the mockup, which faked the send. */
.hp .fcard .flabel i{color:var(--deep-text)}
/* Choices are real fieldsets with a legend, styled as the mockup's span.flabel. */
.hp .fcard fieldset.fld{border:0;margin:0;padding:0;min-width:0}
.hp .fcard legend.flabel{padding:0;float:none;width:auto}
/* Errors. The slot under each field is empty until form.js fills it. */
.hp .fcard .ferr{margin:6px 0 0;font-size:13px;color:#B42318}
.hp .fcard .ferr:empty{display:none}
.hp .fcard .fld [aria-invalid="true"]{border-color:#B42318}
.hp .fcard .fld [role="radiogroup"][aria-invalid="true"] .opt span{border-color:#B42318}
.hp .fcard .ferror{margin-top:16px;padding:12px 14px;border-radius:10px;background:#FEF3F2;border:1px solid #FDA29B;color:#B42318;font-size:14px}
.hp .fcard .ferror[hidden]{display:none}
.hp .fcard .ferror:focus{outline:none}
.hp .fcard .ferror:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.hp .fcard .fnojs{margin:16px 0 0;font-size:14px;color:var(--ink)}
.hp .fcard .fnote a{color:inherit;text-decoration:underline}
.hp .fcard [type=submit][disabled]{cursor:progress;opacity:.75}
.hp .fcard .fdone h3:focus{outline:none}
.hp .fcard .fdone h3:focus-visible{outline:2px solid var(--green);outline-offset:4px}
/* The honeypot is off screen and out of the tab order. */
.hp .um-hp{position:absolute!important;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}

/* Print shows every entrance at its end state. The scroll reveals hide items inline (opacity 0, a small
   offset, heading lines pushed below their masks) until they scroll into view, so a page printed before
   it is scrolled would print blank text. core/reveal.js also clears those inline styles on beforeprint. */
@media print{
.hp .article :is(h2,h3,p,ul),
.hp :is(.head p,.lead,.eyebrow,.tag,.ctas,.proof,.also,.crumbs),
.hp :is(.bento .svc,.qs .q,.prods .prod,.strip > div,.faq details,.rev .gcard,.incl .inc,.plans .plan,.stats .stat,.related .rel,.thrive .tc,.workwrap .site,.team .mem,.nums .num),
.hp .herosec .hero > div:first-child > *,
.hp .fimg{opacity:1!important;transform:none!important;clip-path:none!important;animation:none!important}
.hp :is(h1,h2) [style*="translate"]{transform:none!important}
.hp [style*="opacity"]{opacity:1!important}
}