/* wereno-header.css — the two-row product header, on every page of the site.
 *
 * Standalone on purpose. Most of the site does not load wereno-products.css,
 * so the handful of tokens this needs are declared here rather than inherited;
 * without that the bar renders as bare markup, which is exactly what happened
 * the first time it shipped.
 *
 * Row one is the theme's own menu carrying the three product names, so the
 * sticky behaviour, the scrolled state and the mobile drawer keep working.
 * Row two is new markup: the sections of whatever you are in, in that
 * product's colour. */
.wr-ctxbar{
  --wr-line:#000000E6;
  --wr-ink:#141414;
  --wr-body:#4A5252;
}

/* ── rows ───────────────────────────────────────────────────────────────
   Row one is the theme's own menu, carrying the three product names
   instead of the site sections. Row two is context: the sections of
   whatever you are in, in that product's colour.

   Row one is styled through the theme's existing menu markup rather than
   replacing it, so the sticky behaviour, the mobile drawer and the
   scrolled state all keep working. */
.wr-prodtab > a{position:relative}
.wr-prodtab > a .ui-menu-item-wrapper{position:relative;padding-left:15px}
.wr-prodtab > a .ui-menu-item-wrapper::before{
  content:"";position:absolute;left:0;top:50%;margin-top:-4px;
  width:8px;height:8px;border-radius:3px;opacity:.45;
  transition:opacity .16s ease}
.wr-prodtab--wereno > a .ui-menu-item-wrapper::before{background:#7CD656}
.wr-prodtab--capital > a .ui-menu-item-wrapper::before{background:#FDC313}
.wr-prodtab--renobot > a .ui-menu-item-wrapper::before{background:#35C4F0}
.wr-prodtab--handyman > a .ui-menu-item-wrapper::before{background:#FF003F}
.wr-prodtab--opsonic > a .ui-menu-item-wrapper::before{background:#FD6E00}
.wr-prodtab.current_page_item > a .ui-menu-item-wrapper::before{opacity:1}
.wr-prodtab.current_page_item > a{font-weight:600}

/* row two */
.wr-ctxbar{
  border-top:2px solid var(--wr-line);
  border-bottom:2px solid var(--wr-line);
  background:#E4F6DC}
.wr-ctxbar--capital{background:#FFF4D6}
.wr-ctxbar--renobot{background:#E7F8FD}
.wr-ctxbar--handyman{background:#FFE8ED}
.wr-ctxbar--opsonic{background:#FFF1E6}
.wr-ctxbar__in{
  display:flex;align-items:center;gap:16px;
  width:95%;max-width:1176px;margin-inline:auto;
  overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.wr-ctxbar__in::-webkit-scrollbar{display:none}

.wr-ctxbar__k{
  flex:0 0 auto;font-family:"Nanum Pen Script",cursive;font-size:19px;
  line-height:1;color:var(--wr-body);white-space:nowrap;padding-right:2px}

.wr-ctxbar__links{display:flex;align-items:center;gap:2px;flex:0 0 auto}
.wr-ctxbar__links a{
  flex:0 0 auto;font-family:"Outfit",sans-serif;font-size:14.5px;font-weight:500;
  letter-spacing:-.01em;color:var(--wr-body);text-decoration:none;
  padding:12px 12px;border-bottom:3px solid transparent;white-space:nowrap;
  transition:color .14s ease,border-color .14s ease}
.wr-ctxbar__links a:hover{color:var(--wr-ink)}
.wr-ctxbar__links a[aria-current]{color:var(--wr-ink)}
.wr-ctxbar--wereno .wr-ctxbar__links a[aria-current]{border-bottom-color:#7CD656}
.wr-ctxbar--capital .wr-ctxbar__links a[aria-current]{border-bottom-color:#FDC313}
.wr-ctxbar--renobot .wr-ctxbar__links a[aria-current]{border-bottom-color:#35C4F0}
.wr-ctxbar--handyman .wr-ctxbar__links a[aria-current]{border-bottom-color:#FF003F}
.wr-ctxbar--opsonic .wr-ctxbar__links a[aria-current]{border-bottom-color:#FD6E00}
.wr-ctxbar__links a:focus-visible{outline:2px solid var(--wr-ink);outline-offset:-2px}

.wr-ctxbar__cta{
  flex:0 0 auto;margin-left:auto;
  font-family:"Outfit",sans-serif;font-size:14px;font-weight:500;
  color:var(--wr-ink);text-decoration:none;white-space:nowrap;
  border:2px solid var(--wr-line);border-radius:999px;padding:6px 15px;
  box-shadow:0 3px 0 0 rgba(0,0,0,.9)}
.wr-ctxbar--wereno .wr-ctxbar__cta{background:#7CD656}
.wr-ctxbar--capital .wr-ctxbar__cta{background:#FDC313}
.wr-ctxbar--renobot .wr-ctxbar__cta{background:#35C4F0}
.wr-ctxbar--handyman .wr-ctxbar__cta{background:#FF003F}
.wr-ctxbar--opsonic .wr-ctxbar__cta{background:#FD6E00}
.wr-ctxbar__cta:focus-visible{outline:2px solid var(--wr-ink);outline-offset:3px}

@media(max-width:900px){
  .wr-ctxbar__in{gap:10px;width:92%}
  .wr-ctxbar__k{display:none}
  .wr-ctxbar__links a{font-size:13.5px;padding:11px 9px}
  .wr-ctxbar__cta{font-size:13px;padding:5px 12px}
}
@media(prefers-reduced-motion:reduce){
  .wr-ctxbar__links a,.wr-prodtab > a .ui-menu-item-wrapper::before{transition:none}
}

/* ── clearance ──────────────────────────────────────────────────────────
   The bar is nested inside the theme's header wrapper, so the theme's own
   sticky handling and its hide-on-scroll transform carry both rows as one
   object. Nothing here positions the bar: it is simply the second row of
   the header, and it cannot disagree with the first about where the header
   is. Tracking that by hand is what put the bar over the logo.

   The wrapper is painted out of flow, so the page underneath clears it with
   its own padding. That padding was sized for one row; the bar adds a
   second, and this makes up the difference. */
html:has(.wr-ctxbar) #content.uicore-content{padding-top:57px}
@media(max-width:1024px){ html:has(.wr-ctxbar) #content.uicore-content{padding-top:53px} }

/* Below the header's own z-index of 11 regardless, so the two rows can never
   fight over which paints on top. */
.wr-ctxbar{z-index:10}

/* ── refinements from visual QA ─────────────────────────────────────────
   Each of these was invisible in the geometry and obvious on a screenshot. */

/* 1. The tint matched the hero directly beneath it, so the bar read as two
      black hairlines ruled across an unbroken field rather than a band. The
      wash is roughly doubled, and an inset shade gives it depth even against
      an identical backdrop. */
.wr-ctxbar--wereno{background:#CFEFC0}
.wr-ctxbar--capital{background:#FFE9A8}
.wr-ctxbar--renobot{background:#CFEEFA}
.wr-ctxbar--handyman{background:#FFD8E2}
.wr-ctxbar{box-shadow:inset 0 -7px 14px -12px rgba(0,0,0,.4)}

/* 2. On a phone the pill was inside the scrolling strip, so the row's call to
      action sat off-screen with nothing to say it was there. The links scroll;
      the pill is pinned in its own column and never moves. The mask fades a
      cut-off link instead of guillotining it mid-word. */
.wr-ctxbar__in{display:grid;grid-template-columns:auto 1fr auto;overflow:visible}
.wr-ctxbar__links{
  overflow-x:auto;scrollbar-width:none;min-width:0;
  scroll-padding-inline-end:16px;
  -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 26px),transparent);
          mask-image:linear-gradient(to right,#000 calc(100% - 26px),transparent);
}
.wr-ctxbar__links::-webkit-scrollbar{display:none}
.wr-ctxbar__cta{margin-left:0}

/* 3. The current section's underline was welded to the bar's bottom rule, so
      it read as sinking into the border rather than underlining the word. */
.wr-ctxbar__links a{padding-bottom:14px;border-bottom-width:0}
.wr-ctxbar__links a[aria-current]{position:relative}
.wr-ctxbar__links a[aria-current]::after{
  content:"";position:absolute;left:12px;right:12px;bottom:7px;height:3px;border-radius:2px}
.wr-ctxbar--wereno .wr-ctxbar__links a[aria-current]::after{background:#7CD656}
.wr-ctxbar--capital .wr-ctxbar__links a[aria-current]::after{background:#FDC313}
.wr-ctxbar--renobot .wr-ctxbar__links a[aria-current]::after{background:#35C4F0}
.wr-ctxbar--handyman .wr-ctxbar__links a[aria-current]::after{background:#FF003F}
.wr-ctxbar--opsonic .wr-ctxbar__links a[aria-current]::after{background:#FD6E00}

/* 4. Nothing said which product you were in: all three names rendered at the
      same weight, and the active square was a shade apart from the inactive
      ones rather than obviously different. */
/* The theme sets the weight on the inner span, so a rule on the <a> is
   inherited-over rather than applied. Both are set. */
.wr-prodtab > a,.wr-prodtab > a .ui-menu-item-wrapper{font-weight:500}
.wr-prodtab.current_page_item > a,
.wr-prodtab.current_page_item > a .ui-menu-item-wrapper{font-weight:700}
.wr-prodtab > a .ui-menu-item-wrapper::before{opacity:.28}
.wr-prodtab.current_page_item > a .ui-menu-item-wrapper::before{opacity:1;width:9px;height:9px}

@media(max-width:600px){
  .wr-ctxbar__in{grid-template-columns:1fr auto}
}


/* ── two header fixes ───────────────────────────────────────────────────────
 * 1. THE GAPS. The theme puts justify-content:space-between on this nav, so the
 *    four section links were spread across the full 895px column: 381px of
 *    links and 514px of gap. They are a menu, not a distributed toolbar, so
 *    they pack from the left and the column's spare width stays spare.
 *
 *    The selector is doubled on purpose. The theme's rule is `.uicore-navbar nav`
 *    at (0,1,1) and a bare `.wr-ctxbar__links` is (0,1,0), so it lost on
 *    specificity no matter what order the sheets load in. (0,2,0) wins.
 */
.wr-ctxbar .wr-ctxbar__links{justify-content:flex-start}

/*
 * 2. THE BLEED. The theme header is uicore-transparent: its white backdrop is
 *    painted by ::before at opacity 0 and faded in on scroll, so at rest the
 *    page shows straight through it. That was fine when every page sat on the
 *    same ground, and stopped being fine the moment a product page opened on a
 *    pink, amber or blue hero, which then ran up behind the logo.
 *
 *    EVERY page now gets the backdrop at rest, not just the product pages.
 *    The two-row bar sits under the logo on all of them, and a transparent
 *    header meant WeReno's own pages read as a different component from the
 *    other three. Scrolled behaviour is untouched: the theme is already taking
 *    it to 1, so this only removes the fade-in.
 *
 *    Same specificity story. The theme hides it with
 *    `.uicore-navbar.uicore-transparent .uicore-header-wrapper::before` at
 *    (0,3,0); `body .uicore-header-wrapper::before` is (0,1,2) and would lose.
 *    Naming both theme classes alongside the body takes it to (0,3,1).
 */
body .uicore-navbar.uicore-transparent .uicore-header-wrapper::before{opacity:1}


/* ── the "you are in X" underline ───────────────────────────────────────────
 * The same hand-drawn stroke the Capital hero puts under "Owner's Rep": the
 * theme's own highlighted-text SVG, reused here at label size. It is a <svg>
 * rather than a border because the whole point is that it is not a straight
 * line. preserveAspectRatio="none" lets one path stretch to any word length.
 */
/* The product name is set in the brand sans, not the handwriting the rest of the
   label uses. Nanum Pen Script's capital C is barely taller than its lowercase
   one, so "Capital" read as "capital" and looked like a typo. It also gives the
   line a nicer break: the aside is handwritten, the product name is the product
   name. */
.wr-ctxbar__u{
  position:relative;display:inline-block;color:var(--wr-ink);
  font-family:"Outfit",system-ui,sans-serif;font-size:15px;font-weight:600;
  letter-spacing:-.01em;margin-left:3px}
.wr-ctxbar__uline{
  position:absolute;left:-2px;right:-2px;bottom:-8px;width:calc(100% + 4px);
  height:10px;overflow:visible;pointer-events:none}
.wr-ctxbar__uline path{fill:none;stroke-linecap:round;stroke-width:3;
  vector-effect:non-scaling-stroke}
.wr-ctxbar--wereno   .wr-ctxbar__uline path{stroke:#7CD656}
.wr-ctxbar--capital  .wr-ctxbar__uline path{stroke:#FDC313}
.wr-ctxbar--renobot  .wr-ctxbar__uline path{stroke:#35C4F0}
.wr-ctxbar--handyman .wr-ctxbar__uline path{stroke:#FF003F}
.wr-ctxbar--opsonic .wr-ctxbar__uline path{stroke:#FD6E00}

/* ── the section links are pills ────────────────────────────────────────────
 * Same shape as the Early access button at the other end of the bar: 2px rule,
 * fully rounded, hard shadow. Every one of them carries the outline; only the
 * current one is filled, so the bar reads as a set of choices with one taken
 * rather than as four words with a mark under one.
 *
 * The bar's height is pinned because #content's top padding is a hard 57px
 * further up this file. Letting the pills resize the bar would slide every
 * product page under its own header.
 */
/* 52 and not 56: the bar carries a 2px rule top and bottom, so this is the inner
   height and the outer box lands back on the 56px the #content offset above is
   tuned against. Setting 56 here made it 60 and slid every product page 4px
   under its own header. */
.wr-ctxbar__in{min-height:52px}
/* overflow-x:auto forces overflow-y to compute to auto as well, so the scroll
   container was clipping the active pill's border and its 3px shadow top and
   bottom. The padding gives them room inside the scroller; the negative margin
   keeps the row optically where it was. */
.wr-ctxbar .wr-ctxbar__links{
  gap:8px;align-items:center;
  /* SAFE centre, and the keyword is doing real work.
     This row is also overflow-x:auto. A plain `center` on an overflowing flex
     container spills the excess past BOTH edges, and scrollLeft floors at 0, so
     whatever went off the start edge cannot be scrolled back to: at 390px the
     capital bar put its own "Overview" pill at left -118 with no way to reach
     it, on all sixteen product pages. `safe` drops to start alignment the moment
     the content stops fitting, which is exactly the case that was broken, and
     leaves the centred look everywhere it fits.
     It also repairs itself in old browsers: an unrecognised `safe center` makes
     the whole declaration invalid, so the cascade falls back to the
     justify-content:flex-start set at §1 above, which is the behaviour we want
     anyway. That §1 rule and this one are both (0,2,0), which is how `center`
     came to silently undo it here in the first place. */
  justify-content:safe center;
  padding:6px 2px 9px;margin-block:-6px -9px}
.wr-ctxbar .wr-ctxbar__links a{
  padding:6px 15px;border:2px solid var(--wr-line);border-radius:999px;
  background:transparent;color:var(--wr-ink);
  transition:background-color .14s ease,box-shadow .14s ease,transform .14s ease}
.wr-ctxbar .wr-ctxbar__links a:hover,
.wr-ctxbar .wr-ctxbar__links a:focus-visible{
  box-shadow:0 3px 0 0 rgba(0,0,0,.9);transform:translateY(-1px)}
.wr-ctxbar .wr-ctxbar__links a[aria-current]{
  font-weight:600;box-shadow:0 3px 0 0 rgba(0,0,0,.9)}
.wr-ctxbar--wereno   .wr-ctxbar__links a[aria-current]{background:#7CD656}
.wr-ctxbar--capital  .wr-ctxbar__links a[aria-current]{background:#FDC313}
.wr-ctxbar--renobot  .wr-ctxbar__links a[aria-current]{background:#35C4F0}
.wr-ctxbar--handyman .wr-ctxbar__links a[aria-current]{background:#FF003F}
.wr-ctxbar--opsonic  .wr-ctxbar__links a[aria-current]{background:#FD6E00}
/* the old treatment was a rule under the word; the fill replaces it */
.wr-ctxbar .wr-ctxbar__links a[aria-current]::after{display:none}

/* ── the footer's product signup ────────────────────────────────────────────
 * Product pages swap the theme footer's newsletter box for a button that opens
 * the same wizard the rest of the page uses. The footer sits OUTSIDE the .hm /
 * .rb wrapper, so it cannot inherit the product colour the way everything else
 * does and each one is named here.
 */
.wr-foot-cta{margin:6px 0 2px}
body.elementor-kit-8 .wr-foot-cta .wr-btn--renobot{background:#35C4F0}
body.elementor-kit-8 .wr-foot-cta .wr-btn--capital{background:#FDC313}
body.elementor-kit-8 .wr-foot-cta .wr-btn--handyman{background:#FF003F}
body.elementor-kit-8 .wr-foot-cta .wr-btn{color:#141414;border:2px solid #000000E6;
  border-radius:999px;box-shadow:0 3px 0 0 rgba(0,0,0,.9);padding:12px 20px;font-size:15px}
body.elementor-kit-8 .wr-foot-cta .wr-btn:hover{transform:translateY(-1px)}
/* 767px, because that is where the theme centres the rest of the footer: the
   logo, the email, the number and the cities all move to the middle and the
   button was the one thing left hanging off the left edge under a centred
   "Subscribe to our newsletter". */
@media(max-width:767px){
  .wr-foot-cta{text-align:center}
}

/* ══════════════════════════════════════════════════════════════════════════
   THE PORTAL: one modal, two jobs

   Client Login and Get Started ask the same question in two tenses. "Which of
   the four is yours?" is the answer to both, so it is one component with two
   configurations rather than two modals that drift apart.

   It lives in wereno-header.css and wereno-forms.js because those are the two
   files already loaded on all 38 pages, and the header's Client Login is on
   every one of them. A new pair of files would have meant 38 edits to add two
   <link> and <script> tags, and 38 more the next time one moved.
   ══════════════════════════════════════════════════════════════════════════ */
#wr-portal{
  position:fixed;inset:0;z-index:100000;display:flex;align-items:center;
  justify-content:center;padding:22px;
  background:rgba(12,16,14,.62);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);
  opacity:0;transition:opacity .22s ease}
#wr-portal[hidden]{display:none !important}
#wr-portal.is-open{opacity:1}
.wr-portal__panel{
  width:min(1120px,100%);max-height:92vh;overflow:auto;overscroll-behavior:contain;
  background:#FBF6EF;border:3px solid #000000E6;border-radius:20px;
  box-shadow:0 14px 0 0 rgba(0,0,0,.9);
  transform:translateY(16px) scale(.985);transition:transform .24s cubic-bezier(.2,.8,.3,1)}
#wr-portal.is-open .wr-portal__panel{transform:none}

/* the head is WeReno's, in WeReno's green, because the question it asks is the
   company's and not any one product's */
.wr-portal__head{
  /* NOT flex-wrap. The close button is the last item, so wrapping dropped it
     onto its own line under the title on a phone and left it floating in the
     middle of the band. The title shrinks instead. */
  position:relative;display:flex;align-items:center;gap:18px;flex-wrap:nowrap;
  /* White, not the house green. The logo carries its own green highlight
     behind "reno", which simply vanished into a green band and left the
     wordmark reading as two mismatched halves. On white it reads the way it
     does in the site header, which is the only place anyone has seen it. */
  padding:20px 26px;background:#fff;border-bottom:3px solid #000000E6;
  border-radius:16px 16px 0 0}
.wr-portal__panel:focus{outline:none}
.wr-portal__logo{height:38px;width:auto;flex:0 0 auto}
.wr-portal__t{
  min-width:0;
  margin:0;font-family:"Outfit",sans-serif;font-size:21px;font-weight:600;
  letter-spacing:-.02em;color:#141414;line-height:1.2}
.wr-portal__t small{
  display:block;font-size:14.5px;font-weight:400;letter-spacing:-.005em;
  color:rgba(20,20,20,.72);margin-top:2px}
.wr-portal__x{
  margin-left:auto;flex:0 0 auto;width:40px;height:40px;border-radius:999px;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  background:#DEE8E8;border:2.5px solid #000000E6;box-shadow:0 3px 0 0 rgba(0,0,0,.9);
  font-size:19px;line-height:1;color:#141414;padding:0}
.wr-portal__x:hover{transform:translateY(-1px);box-shadow:0 4px 0 0 rgba(0,0,0,.9)}
.wr-portal__x:active{transform:translateY(2px);box-shadow:0 1px 0 0 rgba(0,0,0,.9)}
.wr-portal__x:focus-visible{outline:3px solid #141414;outline-offset:3px}

.wr-portal__grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:16px;padding:26px}

.wr-pcard{
  display:flex;flex-direction:column;min-width:0;
  background:#fff;border:3px solid #000000E6;border-radius:16px;
  box-shadow:0 6px 0 0 rgba(0,0,0,.9);overflow:hidden;
  transition:transform .16s ease, box-shadow .16s ease}
.wr-pcard:hover{transform:translateY(-3px);box-shadow:0 9px 0 0 rgba(0,0,0,.9)}
/* the band carries the product's own colour, which is the fastest way a reader
   tells the four apart: they already know the robots by hue from the hero */
.wr-pcard__band{
  display:flex;align-items:flex-end;justify-content:center;
  height:104px;background:var(--pc);border-bottom:3px solid #000000E6;position:relative}
.wr-pcard__bot{height:98px;width:auto;margin-bottom:-2px;filter:drop-shadow(0 4px 7px rgba(0,0,0,.22))}
/* Column, not row. See the note in wereno-forms.js: side by side was never
   consistent, it just looked it on the one card whose name wrapped. */
.wr-pcard__row{display:flex;flex-direction:column;align-items:flex-start;gap:7px}
.wr-pcard__b{
  flex:0 0 auto;
  font-family:"Outfit",sans-serif;font-size:10.5px;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;color:#141414;
  background:var(--pc);border:2px solid #000000E6;border-radius:999px;
  padding:2px 9px;white-space:nowrap}
.wr-pcard__in{display:flex;flex-direction:column;flex:1 1 auto;padding:16px 16px 18px;gap:10px}
.wr-pcard__n{
  margin:0;font-family:"Outfit",sans-serif;font-size:19px;font-weight:600;
  letter-spacing:-.02em;color:#141414;line-height:1.15}
.wr-pcard__who{
  margin:0;font-family:"Outfit",sans-serif;font-size:13px;font-weight:600;
  letter-spacing:.01em;color:rgba(20,20,20,.56);line-height:1.35}
.wr-pcard__l{list-style:none;margin:0;padding:0;flex:1 1 auto}
.wr-pcard__l li{
  position:relative;padding-left:17px;margin-bottom:7px;
  font-family:"Outfit",sans-serif;font-size:14px;line-height:1.45;color:rgba(20,20,20,.75)}
.wr-pcard__l li:last-child{margin-bottom:0}
.wr-pcard__l li::before{
  content:"";position:absolute;left:0;top:.56em;width:7px;height:7px;
  border-radius:2px;background:var(--pc)}
.wr-pcard__go{
  display:block;margin-top:2px;text-align:center;text-decoration:none;
  font-family:"Outfit",sans-serif;font-size:14px;font-weight:600;color:#141414;
  background:var(--pc);border:2.5px solid #000000E6;border-radius:9px;
  padding:10px 12px;box-shadow:0 4px 0 0 rgba(0,0,0,.9);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  transition:transform .14s ease, box-shadow .14s ease}
.wr-pcard__go:hover{transform:translateY(-2px);box-shadow:0 6px 0 0 rgba(0,0,0,.9);color:#141414}
.wr-pcard__go:active{transform:translateY(2px);box-shadow:0 1px 0 0 rgba(0,0,0,.9)}
.wr-pcard__go:focus-visible{outline:3px solid #141414;outline-offset:3px}
.wr-portal__foot{
  padding:0 26px 24px;margin:0;
  font-family:"Outfit",sans-serif;font-size:14px;line-height:1.6;color:rgba(20,20,20,.62)}

/* ── the phone: all four cards on one screen ────────────────────────────────
 * The modal exists to answer "which of the four is yours", and a reader who
 * has to scroll to see the fourth cannot compare them. At the desktop
 * proportions the cards measured 515px on a 390px phone and the panel needed
 * 552px of scrolling to show them all, so the answer was never on screen at
 * once. Every number below is the desktop one cut to whatever makes two rows
 * fit inside 92vh, and the third bullet is dropped rather than shrunk: two
 * lines a reader actually reads beat three they scroll past.
 */
@media(max-width:900px){
  #wr-portal{padding:10px}
  .wr-portal__panel{max-height:96vh}
  .wr-portal__grid{grid-template-columns:1fr 1fr;gap:10px;padding:12px}
  .wr-portal__head{padding:11px 14px;gap:11px;border-radius:14px 14px 0 0}
  .wr-portal__logo{height:26px}
  .wr-portal__t{font-size:16px}
  .wr-portal__t small{font-size:12px;margin-top:1px}
  .wr-portal__x{width:34px;height:34px;font-size:16px}
  .wr-pcard{border-radius:13px;box-shadow:0 4px 0 0 rgba(0,0,0,.9)}
  .wr-pcard__band{height:62px}
  .wr-pcard__bot{height:58px}
  .wr-pcard__in{padding:9px 10px 11px;gap:5px}
  .wr-pcard__row{gap:5px}
  .wr-pcard__n{font-size:15.5px}
  .wr-pcard__b{font-size:9.5px;padding:1px 7px}
  .wr-pcard__who{font-size:11.5px;line-height:1.3}
  .wr-pcard__l li{font-size:12px;line-height:1.35;padding-left:14px;margin-bottom:4px}
  .wr-pcard__l li::before{width:6px;height:6px;top:.5em}
  /* two, not three. The third is the one that pushed the fourth card off. */
  .wr-pcard__l li:nth-child(n+3){display:none}
  /* it WRAPS here. "Meet Handyman" plus an arrow does not fit one line in half
     of a 390px phone, and an ellipsis on a button that names the destination
     turns it into "Meet Handyman ..." */
  .wr-pcard__go{font-size:12px;padding:7px 6px;white-space:normal;line-height:1.2;border-radius:8px;
    box-shadow:0 3px 0 0 rgba(0,0,0,.9)}
  .wr-portal__foot{padding:0 12px 12px;font-size:11.5px;line-height:1.45}
}
@media(max-width:420px){
  .wr-pcard__who{font-size:11px}
  .wr-pcard__l li{font-size:11.5px}
  .wr-pcard__go{font-size:11.5px}
}
/* Most phones are shorter than 880px of viewport, and at that height there is
   no arrangement that fits four cards AND a footnote. The footnote is what
   goes: it is the one thing here a reader does not need in order to choose.
   730px was the first guess and it missed the two most common sizes on the
   market, 390x844 and 390x740, by a mile. */
@media(max-width:900px) and (max-height:880px){
  .wr-portal__foot{display:none}
  .wr-pcard__band{height:50px}
  .wr-pcard__bot{height:46px}
  .wr-portal__head{padding:8px 12px;gap:9px}
  .wr-portal__logo{height:23px}
  .wr-portal__t{font-size:15px}
  .wr-pcard__in{padding:8px 9px 10px;gap:4px}
}

/* And a last tier for the short ones: 375x667 and 360x640 are still in the
   wild and no amount of trimming fits two bullets, a band and a button twice
   over into 640px. The SECOND bullet goes rather than the "who it is for"
   line, because on a screen this size the question is still which of the four
   is mine, and the who line is the answer to it. */
@media(max-width:900px) and (max-height:800px){
  .wr-pcard__l li:nth-child(n+2){display:none}
  .wr-pcard__band{height:44px}
  .wr-pcard__bot{height:40px}
  .wr-pcard__who{font-size:11px;line-height:1.25}
  .wr-pcard__go{padding:6px 5px}
}
@media(prefers-reduced-motion:reduce){
  #wr-portal,.wr-portal__panel,.wr-pcard,.wr-pcard__go,.wr-portal__x{transition:none}
}

/* ── the context bar scrolls, and says so ───────────────────────────────────
 * Below 720px the CTA is moved into the scroller by wereno-forms.js, so the
 * row becomes one list of pills ending in the action rather than a list that
 * is cut off next to a button that is not. The arrows are the affordance: a
 * horizontal scroller with no control reads as a row that happens to be
 * clipped, and on a phone there is no hover to discover it with.
 */
.wr-ctxbar__in{position:relative}
.wr-ctxbar__arw{
  position:absolute;top:50%;z-index:4;transform:translateY(-50%);
  width:28px;height:28px;padding:0;display:none;
  align-items:center;justify-content:center;cursor:pointer;
  background:#FBF6EF;border:2px solid var(--wr-line,#000000E6);border-radius:999px;
  box-shadow:0 2px 0 0 rgba(0,0,0,.9);
  font-family:"Outfit",sans-serif;font-size:17px;font-weight:700;line-height:1;
  color:var(--wr-ink,#141414)}
.wr-ctxbar__arw[hidden]{display:none !important}
.wr-ctxbar__arw--prev{left:-4px}
.wr-ctxbar__arw--next{right:-4px}
.wr-ctxbar__arw:active{transform:translateY(calc(-50% + 2px));box-shadow:0 0 0 0 rgba(0,0,0,.9)}
.wr-ctxbar__arw:focus-visible{outline:3px solid var(--wr-ink,#141414);outline-offset:2px}

@media(max-width:720px){
  .wr-ctxbar__arw{display:flex}
  /* room for the two arrows to sit over, rather than on top of, the pills */
  .wr-ctxbar__links{padding-inline:26px}
  /* the CTA is inside the scroller now, so it stops being a grid column */
  .wr-ctxbar__in{grid-template-columns:1fr}
  .wr-ctxbar__links > .wr-ctxbar__cta{flex:0 0 auto;margin-left:4px}
  /* No mask by default. It is applied per edge, by wereno-forms.js, only when
     that edge actually has something hidden behind it. A gradient on a side
     with nothing to reveal is just a white glow over a visible pill. */
  .wr-ctxbar__links{-webkit-mask-image:none;mask-image:none}
  .wr-ctxbar__links.is-fade-l{
    -webkit-mask-image:linear-gradient(to right,transparent 0,#000 24px);
            mask-image:linear-gradient(to right,transparent 0,#000 24px)}
  .wr-ctxbar__links.is-fade-r{
    -webkit-mask-image:linear-gradient(to left,transparent 0,#000 24px);
            mask-image:linear-gradient(to left,transparent 0,#000 24px)}
  .wr-ctxbar__links.is-fade-l.is-fade-r{
    -webkit-mask-image:linear-gradient(to right,transparent 0,#000 24px,#000 calc(100% - 24px),transparent);
            mask-image:linear-gradient(to right,transparent 0,#000 24px,#000 calc(100% - 24px),transparent)}
}

/* The portal buttons kept the quote wizard's arrow icon and lost the one rule
   that sized it: a.wrq-open .wrq-open-ic is (0,2,1) and scoped to a class that
   no longer exists on them, so the SVG fell back to filling its box and the
   button rendered 134 wide by 136 TALL. */
a[data-wr-portal]{display:inline-flex;align-items:center;justify-content:center;gap:8px}
a[data-wr-portal] .wrq-open-ic{width:17px;height:17px;flex:0 0 auto}

/* The guard rail. One sentence, quoted identically wherever historical work
   appears, never paraphrased: a paraphrase is where the claim drifts. It is
   not a disclaimer. A company whose agents delivered a thousand projects is
   one more AI company; a company whose PEOPLE delivered them and then built
   the agents is the only kind that can honestly say what WeReno now says. */
.wr-rail{
  max-width:74ch;margin:18px 0 0;padding:14px 18px;
  border-left:5px solid #7CD656;background:rgba(20,20,20,.035);border-radius:0 10px 10px 0;
  font-family:"Outfit",sans-serif;font-size:16px;line-height:1.6;color:rgba(20,20,20,.78)}


/* ── the header logo sizes itself by HEIGHT ─────────────────────────────────
 * The theme sets `.uicore-logo{height:inherit;max-width:unset}` and nothing at
 * all for width, so the logo used to take its width from the file. Once every
 * image on the site was given its intrinsic width and height (for layout
 * shift), that attribute became the used width and the logo rendered 1028px
 * wide at 28px tall: a flat smear across the whole header, on every page.
 *
 * max-width:unset is why this one broke and nothing else did. Everywhere else
 * the theme's `max-width:100%` clamped the attribute back down.
 */
.uicore-logo{width:auto}

/* The post byline used to be two links into WordPress archives that listed the
   same three posts as /blog. The links are gone; the words stay, and they need
   to keep the colour the theme gave the anchor rather than reverting to body
   text halfway through a line. */
.wr-byline{color:inherit}

/* ── the one line out of a case study ───────────────────────────────────────
 * Nine case studies linked to the case-study index, the quote form and three
 * siblings, and never once to the product that ran them. This is that link,
 * sitting between the story and the related-project strip.
 */
.wr-cs-more{max-width:1140px;margin:0 auto;padding:28px 22px 4px}
.wr-cs-more p{margin:0;font-family:"Outfit",system-ui,sans-serif;
  font-size:16px;line-height:1.5;color:rgba(20,20,20,.62)}
.wr-cs-more a{color:#141414;font-weight:600;text-decoration:none;
  box-shadow:inset 0 -2px 0 0 #7CD656;transition:box-shadow .15s ease}
.wr-cs-more a:hover{box-shadow:inset 0 -12px 0 0 #7CD656}
@media(max-width:767px){.wr-cs-more{padding:20px 18px 2px}.wr-cs-more p{font-size:15px}}

/* A one-line rail under a section heading, pointing at the hub the section is
   a sample of. The homepage showed four case studies and four products and
   linked to none of the pages that hold the rest together.
 *
 * The modifier is not laziness. color:inherit was the first attempt and it
 * does not work here: the theme sets a colour on every <p>, so inherit
 * resolved to near-black on the case-study band, which sits on rgb(39,39,39).
 * Only the heading in that band is light, and it is light because of a rule
 * of its own. So the ground is named. */
/* It sits AFTER the grid it belongs to, not under the heading: look at the
   four cards, then follow the link to the rest. Its own rhythm, because the
   Elementor widget above it ends flush and the one below it starts flush, so
   with no margin of its own it read as a stray line of text jammed between
   two blocks. */
/* PILLS, not underlined text. As a line of underlined words this had to be
   spaced against whatever Elementor widget happened to sit above and below it
   on four different pages, and it read as a stray sentence in every one of
   them. A pill is self-contained: it looks deliberate wherever it lands, it
   is the same control the context bar and the product badges already use, and
   the spacing around it stops being load-bearing.
 *
 * PADDING for the rhythm, not margin. A margin collapses into the widget
 * above, which on /portfolio put the row inside the previous block's box and
 * one pixel under its last line. */
.wr-hub{max-width:1140px;margin:0 auto;padding:34px 22px 38px;
  display:flex;flex-wrap:wrap;gap:12px;justify-content:center;
  font-family:"Outfit",system-ui,sans-serif}
@media(max-width:767px){.wr-hub{padding:26px 18px 30px;gap:10px}}
.wr-hub a{
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 18px;border:2px solid var(--wr-line,#000000E6);border-radius:999px;
  background:#fff;color:#141414;font-size:15px;font-weight:600;letter-spacing:-.01em;
  text-decoration:none;box-shadow:0 3px 0 0 rgba(0,0,0,.9);
  transition:transform .14s ease, box-shadow .14s ease, background .14s ease}
.wr-hub a::after{content:"\2192";font-weight:700}
.wr-hub a:hover{transform:translateY(-2px);box-shadow:0 5px 0 0 rgba(0,0,0,.9);
  background:#7CD656;color:#141414}
.wr-hub a:active{transform:translateY(2px);box-shadow:0 1px 0 0 rgba(0,0,0,.9)}
.wr-hub a:focus-visible{outline:3px solid #141414;outline-offset:3px}
/* on the near-black case-study band the white pill would glare; the border is
   what carries it there instead */
.wr-hub--dark a{background:transparent;border-color:rgba(255,255,255,.55);color:#fff;
  box-shadow:none}
.wr-hub--dark a:hover{background:#7CD656;border-color:#000000E6;color:#141414;
  box-shadow:0 5px 0 0 rgba(0,0,0,.9)}
.wr-hub--dark a:focus-visible{outline-color:#fff}
@media(max-width:767px){.wr-hub{font-size:15px;padding:0 18px}}