/* White Lodge brand overrides, loaded on every page after the Webflow CSS */
/* Poppins, the face in Harry's logo lettering (SIL OFL, see assets/fonts/poppins/OFL.txt).
   Replaces Metric's Geom Graphic and Arial Nova, which are commercial and licensed to Metric.
   Azeret Mono (the bracketed labels) is OFL already and stays. */
@font-face{font-family:Poppins;src:url(../fonts/poppins/poppins-latin-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Poppins;src:url(../fonts/poppins/poppins-latin-600.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:Poppins;src:url(../fonts/poppins/poppins-latin-700.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}
/* The logo's colours, sampled from Harry's lockup (1 Oct 2026): slate #303A42 and orange #FD5722.
   They take over Metric's swatches by role: slate replaces Metric's black (the text, dark buttons
   and icons), orange its blue. The page keeps Metric's own cream, darker cream and line grey: the
   logo's cool off-white (#EDEFF1) read as plain white and cheapened the page next to theirs (Sam,
   3 Oct 2026). Sam, 1 Oct 2026: the page stays light; only what was black turns slate. */
:root{--swatch--blue:#FD5722;--swatch--black:#303A42;--swatch--tan:#FFF5E8;--swatch--dark-tan:#EEE1D3;
--swatch--stroke:#CECECE;--wl-on-orange:#1F262B;--wl-orange-ink:#BC3005;--wl-grey-ink:#5B656D;
--font-family--heading:Poppins,Arial,sans-serif;--font-family--body:Poppins,Arial,sans-serif}

/* Text on orange is a deeper slate. Off-white on #FD5722 is 2.8:1 and the logo slate 3.7:1, both
   under WCAG AA for small text; #1F262B is 4.8:1. */
.footer_wrapper,.loader_wrapper,.career-dropdown_list_wrapper,
.project_category_item,.projects_category_item,.btn-primary{color:var(--wl-on-orange)}
/* .nav-menu is only an orange panel at 991px and below (the phone menu). Above that it is the bar
   of links, and the see-through variant over a photo header keeps the light text. */
@media screen and (max-width:991px){
.nav-menu,.nav-menu:where(.w-variant-50276db6-4bff-6aa3-21f8-ff5ca3cfc626){color:var(--wl-on-orange)!important}}
/* Scrolling up slides in the light nav bar, and the interaction writes Metric's black and cream
   onto the links as literal colours, which no variable reaches. Match the finished values. */
.nav-menu[style*="rgb(29, 29, 29)"],.lottie-animation[style*="rgb(29, 29, 29)"]{color:var(--swatch--black)!important}
.nav-menu[style*="rgb(255, 245, 232)"],.lottie-animation[style*="rgb(255, 245, 232)"]{color:var(--swatch--tan)!important}
/* Services: on scroll the patio video fades to Metric's cream, the same way */
.services-expertise_bg-overlay[style*="rgb(255, 245, 232)"]{background-color:var(--swatch--tan)!important}
/* Nav mark over a photo header: Metric shows its white logo here and swaps to its dark logo once
   the light nav bar scrolls in, writing the swap as inline opacity (checked against the Metric
   original, 3 Oct 2026). Sam wants the orange mark instead of white over the photo, so pin the
   orange (.nav-blue-logo) on and the white one off throughout this variant, overriding that inline
   opacity with !important; the nav-bg slide and navbar show/hide on scroll are untouched. */
.nav-blue-logo:where(.w-variant-50276db6-4bff-6aa3-21f8-ff5ca3cfc626){opacity:1!important;display:block!important}
.nav-white-logo:where(.w-variant-50276db6-4bff-6aa3-21f8-ff5ca3cfc626){opacity:0!important;display:none!important}
/* Opening the phone menu writes inline display:none on both marks and shows .nav-menu-logo (the
   cream mark) on the orange panel. The pin above kept the orange mark showing, orange on orange
   above the cream one, so let the menu's hide through (it is the only time display:none is written) */
.nav-blue-logo:where(.w-variant-50276db6-4bff-6aa3-21f8-ff5ca3cfc626)[style*="display: none"]{display:none!important}
/* Phones and tablets: Metric sets the brand box to height:auto below 992px, which suits its wide
   wordmark (140x20, a 59px nav) but stood our near-square mark 64px tall and the nav 96px, with the
   menu panel running off the bottom of the screen. Cap the box so the nav is Metric's height again
   (3 Oct 2026); the marks are object-fit:contain, so they keep their shape, held to the left. */
@media screen and (max-width:991px){
  .brand.w-nav-brand{height:2em}
  .brand.w-nav-brand img{object-position:0 50%}
}

/* Icons with colours drawn into the SVG, which any CSS fill beats. Metric's blue (play, pause and
   form-tick glyphs) and black become slate; its cream becomes the off-white. The pause bars on How
   we work sit on an orange disc, so they take the on-orange slate. */
svg [fill="#0057A5" i],svg [fill="#1D1D1D" i]{fill:var(--swatch--black)}
.embed-pause-icon svg [fill="#1D1D1D" i]{fill:var(--wl-on-orange)}
svg [fill="#FFF5E8" i]{fill:var(--swatch--tan)}
/* Icons the page agents coloured with the earlier orange guess follow the logo orange */
svg [fill="#F95827" i]{fill:var(--swatch--blue)}
/* Button and card arrows are drawn in Metric's cream; they follow the text colour round them, so
   the arrow on an orange button is the same dark slate as its label */
svg [stroke="#FFF5E8" i]{stroke:currentColor}
/* buttons whose background is not orange: the dark-fill variant (slate now) keeps light text, and
   the text-only variant (no fill) uses the darker orange that passes on the light page */
.btn-primary:has(.btn-bg.w-variant-ab2fd1ab-63f8-5814-07b4-42a47da33434){color:var(--swatch--tan)}
.btn-primary:where(.w-variant-1054fcb9-1d08-fcca-8799-4d937b4b7710){color:var(--wl-orange-ink)}
/* Text Metric set in its blue reads on the light page only in the darker orange (logo orange on
   the off-white is 2.8:1) */
.about-teams_item,.about-teams_item_name,.careers-contact_eyebrow,.careers-reels_btn-name,
.project-scope_share_list{color:var(--wl-orange-ink)}
/* Services page tabs: Webflow's default tab text is near-black #222 */
.services_tab_link{color:var(--swatch--black)}
/* photo darkening behind the closing call to action, in deep slate rather than black */
.cta_img-overlay{background-color:#262F3699}
/* Best-work page headers (3 Oct 2026): the photo is the point, so the heading is kept readable by a
   slightly darker overlay rather than by choosing a duller photo. Areas sets its own in the page. */
.section-services-hero .services-hero_bg .bg-img_overlay{background-color:rgba(0,0,0,.4)}
/* Services "Groundwork" video (loop-sleeper-wall, 3 Oct 2026): sunlit timber is brighter than the old
   lawn loop, so its overlay goes from 35% to 45% black to keep the heading readable. */
.services-expertise_video .services-hero_bg .bg-img_overlay.is-30{background-color:rgba(0,0,0,.45)}

/* Metric's grey #898b8d, darkened to a slate grey #5B656D (5.1:1) so it reads on the off-white */
.about-built_pagination,.about-teams_item_title,.about-values_heading,
.careers-invest_item_number,.careers-positions_total,.home-scope_item_pagination,.indigenous-partners_eyebrow,
.industry-radio-field,.industry-radio-field:hover,.project_pagination,.projects-featured_pagination,
.projects-filter_total,.services-info_item_pagination,.services-problem_item_number,.services-projects_total{color:var(--wl-grey-ink)}

/* The nav layout (one link on the right, no phone menu, no Free quote button) is in wl-look-white.css,
   "Nav: no bar" (24 Oct 2026). The phone-menu sizing and the desktop centring that stood here are in
   _archive/white-lodge-header-pill-2026-10-24/. */

/* Headings share their words evenly between lines. Poppins is narrower than Metric's face, so more
   words fit on a heading's first line and the last one or two were left alone on the next ("HARD
   LANDSCAPING, START TO / FINISH"). Sam, 3 Oct 2026: level the lines out the way Metric's sit. */
h1,h2,h3,h4,h5,h6{text-wrap:balance}

/* Jobs map, 3 Oct 2026: one orange pin per town over an inline SVG of East Kent. The markup comes
   from tools/make-map.py (paste tools/map/jobs-map.html into any page), the behaviour from
   assets/js/wl-map.js, so Home and Areas can carry the same map. Sam, 3 Oct 2026: no box, no border,
   no key, no list, no sea fill and no credit under it (the OGL credit is in the page footer). The
   map sits straight on the page's cream: the page is the sea, East Kent is the palette's dark tan
   with a fine dashed slate inland edge, the land beyond it is the page cream, the coastline a fine
   slate line, and the cut edges fade into the page so it never reads as a framed picture. Orange
   is for the pins only. The card opens beside the pin on desktop and sits under the map below
   768px, so it never runs off a phone screen. */
.wl-map{--map-sea:var(--swatch--dark-tan);--map-land:var(--swatch--tan);--map-area:var(--swatch--dark-tan);--map-coast:#303A42;--map-line:rgba(48,58,66,.16);position:relative;color:var(--swatch--black)}
.wl-map_canvas{position:relative;width:100%;overflow:hidden;-webkit-user-select:none;user-select:none}
.wl-map_svg{position:absolute;inset:0;width:100%;height:100%;display:block;
-webkit-mask-image:linear-gradient(to right,transparent,#000 9%,#000 93%,transparent),linear-gradient(to bottom,transparent,#000 9%,#000 91%,transparent);
-webkit-mask-composite:source-in;mask-image:linear-gradient(to right,transparent,#000 9%,#000 93%,transparent),linear-gradient(to bottom,transparent,#000 9%,#000 91%,transparent);
mask-composite:intersect}
.wl-map_land{fill:var(--map-area)}
.wl-map_context{fill:var(--map-land)}
.wl-map_area-edge{fill:none;stroke:var(--map-coast);stroke-opacity:.3;stroke-width:1;stroke-dasharray:4 4;vector-effect:non-scaling-stroke}
.wl-map_coast{fill:none;stroke:var(--map-coast);stroke-opacity:.6;stroke-width:1;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.wl-map_labels,.wl-map_pins{position:absolute;inset:0}
.wl-map_labels{pointer-events:none}
.wl-map_label{position:absolute;font-size:12px;line-height:1;white-space:nowrap;color:var(--swatch--black);
text-shadow:0 0 2px var(--map-land),0 0 2px var(--map-land),0 0 3px var(--map-land)}
.wl-map_label.is-e{transform:translate(12px,calc(-50% - 13px))}
.wl-map_label.is-w{transform:translate(calc(-100% - 12px),calc(-50% - 13px))}
.wl-map_label.is-n{transform:translate(-50%,calc(-100% - 30px))}
.wl-map_label.is-s{transform:translate(-50%,7px)}
.wl-map_pin{position:absolute;z-index:1;width:36px;height:40px;margin:0;padding:0;border:0;background:none;cursor:pointer;
transform:translate(-50%,-100%);-webkit-tap-highlight-color:transparent}
.wl-map_pin[hidden]{display:none}
.wl-map_pin-icon{--s:18px;position:absolute;left:50%;bottom:calc(var(--s)*.207 + 1px);width:var(--s);height:var(--s);
margin-left:calc(var(--s)/-2);background:var(--swatch--blue);border:1.5px solid var(--wl-orange-ink);border-radius:50% 50% 50% 0;
transform:rotate(-45deg);box-shadow:-1px 2px 3px rgba(48,58,66,.22);transition:transform .15s ease,background-color .15s ease}
.wl-map_pin-icon::after{content:"";position:absolute;left:50%;top:50%;width:32%;height:32%;border-radius:50%;
background:var(--swatch--tan);transform:translate(-50%,-50%)}
.wl-map_pin.is-m .wl-map_pin-icon{--s:21px}
.wl-map_pin.is-l .wl-map_pin-icon{--s:24px}
.wl-map_pin:hover .wl-map_pin-icon,.wl-map_pin:focus-visible .wl-map_pin-icon,.wl-map_pin.is-active .wl-map_pin-icon{background:var(--wl-orange-ink);transform:rotate(-45deg) scale(1.12)}
.wl-map_pin.is-active{z-index:2}
.wl-map_pin:focus{outline:none}
.wl-map_pin:focus-visible{outline:2px solid var(--swatch--black);outline-offset:-2px;border-radius:6px}
.wl-map_card{position:absolute;z-index:6;left:0;top:0;width:340px;max-width:calc(100% - 16px);overflow:auto;overscroll-behavior:contain;
background:var(--swatch--tan);border:1px solid var(--map-line);box-shadow:0 18px 40px -14px rgba(48,58,66,.4);padding:18px 18px 16px;
text-align:left;animation:wl-map-in .16s ease-out}
.wl-map_card[hidden]{display:none}
.wl-map_card:focus{outline:none}
.wl-map_card:focus-visible{outline:2px solid var(--swatch--black);outline-offset:2px}
@keyframes wl-map-in{from{opacity:0;transform:translateY(4px)}}
.wl-map_card-close{position:absolute;top:6px;right:6px;width:36px;height:36px;padding:0;border:0;background:none;cursor:pointer;color:var(--swatch--black)}
.wl-map_card-close span::before,.wl-map_card-close span::after{content:"";position:absolute;left:11px;top:17px;width:14px;height:1.5px;
background:currentColor;transform:rotate(45deg)}
.wl-map_card-close span::after{transform:rotate(-45deg)}
.wl-map_card-close:hover{color:var(--wl-orange-ink)}
.wl-map_card-close:focus-visible{outline:2px solid var(--swatch--black);outline-offset:-4px}
.wl-map_town+.wl-map_town{margin-top:16px;padding-top:16px;border-top:1px solid var(--map-line)}
.wl-map_town-name{margin:0 36px 0 0;font-family:var(--font-family--heading);font-size:20px;line-height:1.2;font-weight:600}
.wl-map_town+.wl-map_town .wl-map_town-name{margin-right:0}
.wl-map_town-note{margin:4px 0 0;font-size:14px;line-height:1.4;color:var(--wl-orange-ink)}
.wl-map_jobs{margin:12px 0 0;padding:0;list-style:none;display:grid;gap:10px}
.wl-map_job{display:grid;grid-template-columns:64px minmax(0,1fr);gap:12px;align-items:center}
.wl-map_job-img{display:block;width:64px;height:64px;object-fit:cover;background:var(--map-sea)}
/* a job whose photos are not exported yet: text only, lined up with the titles beside photos */
.wl-map_job.is-text{grid-template-columns:minmax(0,1fr)}
.wl-map_jobs:has(img) .wl-map_job.is-text{grid-template-columns:64px minmax(0,1fr)}
.wl-map_jobs:has(img) .wl-map_job.is-text .wl-map_job-text{grid-column:2}
.wl-map_job-title{margin:0;font-size:15px;line-height:1.35;font-weight:500}
.wl-map_job-meta{margin:2px 0 0;font-size:13px;line-height:1.4;color:var(--wl-grey-ink)}
.wl-map_job-link{display:inline-block;margin-top:2px;font-size:13px;line-height:1.4;font-weight:600;color:var(--wl-orange-ink);
text-decoration:underline;text-underline-offset:3px}
.wl-map_quote{margin:14px 0 0;padding:0}
.wl-map_quote-text{margin:0;padding:0;border:0;font-size:15px;line-height:1.5;font-style:normal;color:var(--swatch--black)}
.wl-map_quote-source{margin-top:6px;font-size:13px;line-height:1.4;color:var(--wl-grey-ink);text-align:left}
.wl-map_quote-source a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.wl-map_quote-source a:hover,.wl-map_job-link:hover{color:var(--swatch--black)}
.wl-map_visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media screen and (max-width:767px){
.wl-map_card{position:relative;left:auto!important;top:auto!important;width:auto;max-width:none;max-height:none!important;margin-top:12px;
box-shadow:none;overflow:visible}
.wl-map_label{font-size:10px}
.wl-map_label.is-wide-only{display:none}
.wl-map_label.is-e{transform:translate(9px,calc(-50% - 10px))}
.wl-map_label.is-w{transform:translate(calc(-100% - 9px),calc(-50% - 10px))}
.wl-map_label.is-n{transform:translate(-50%,calc(-100% - 23px))}
.wl-map_pin-icon{--s:15px}
.wl-map_pin.is-m .wl-map_pin-icon{--s:17px}
.wl-map_pin.is-l .wl-map_pin-icon{--s:19px}}
@media (prefers-reduced-motion:reduce){.wl-map_card{animation:none}.wl-map_pin-icon{transition:none}}

/* Review cards, 3 Oct 2026. Home's reviews section and the six service pages share one definition, so
   a review looks the same wherever it appears. Quotes are verbatim from docs/reviews.json, trimmed only
   with "...", attributed by place, never by name. Home keeps only its carousel rules in its own
   <style id="wl-page-reviews">. */
/* Stars: inline SVG from the #wl-stars5 sprite each page carries once, at the top of its reviews
   section. The base row is the empty stars; .wl-stars_on is clipped to rating / out_of (inline
   width), so 4/5 shows four. */
.wl-sprite{position:absolute;width:0;height:0;overflow:hidden}
.wl-stars{display:inline-flex;align-items:center;gap:.625em;line-height:1;color:var(--swatch--black)}
.wl-stars_row{position:relative;display:block;flex:none;width:5.5em;height:1.1em;color:var(--swatch--brown-20)}
.wl-stars_on{position:absolute;top:0;bottom:0;left:0;overflow:hidden;color:var(--wl-orange-ink)}
.wl-stars_svg{display:block;width:5.5em;height:1.1em;max-width:none}
.wl-stars_score{font-family:var(--font-family--heading);font-weight:var(--font-weight--font-weight-600);font-size:.875em;letter-spacing:.02em}
/* Stars and score on the left, the platform's icon on the right */
.wl-review_top{display:flex;align-items:center;justify-content:space-between;gap:1em;margin-bottom:var(--_responsive-variables---spacing--24)}
/* Platform icons, 3 Oct 2026 (Sam: "just use the simple icon for each thing"). Every review card on the
   site (Home, the service pages, the project pages) shows the platform's own favicon mark, never its
   wordmark: the Checkatrade C and tick, the MyBuilder hammer disc and the Google G, in their own
   colours, drawn from #wl-icon-* symbols in the page's sprite (Home's sprite is the master copy; the
   service pages carry the same symbols, and tools/new-project-pages.py copies them from Home). One
   square size for all three (1.5em, 24px on a 16px card); each symbol's viewBox is set so the mark
   itself is about 92% of the box (the Checkatrade C is, as its tick reaches the corner; the MyBuilder
   disc and the Google G are padded to match), so the three read the same size. The span carries the
   platform's name for screen readers (role="img", aria-label). The old wordmark rules (.wl-platform,
   .wl-platform--*) were removed the same day, once no page used them. */
.wl-platform-icon{display:flex;flex:none;align-items:center;line-height:0}
.wl-platform-icon svg{display:block;width:1.5em;height:1.5em;max-width:none}
/* Service pages: the job as the customer titled it on the review site, verbatim, so each card shows
   which service it is about */
.wl-review_job{margin:0 0 var(--_responsive-variables---spacing--12);font-family:var(--font-family--heading);font-size:var(--_responsive-variables---paragraph--text-16);font-weight:var(--font-weight--font-weight-600);line-height:1.4;color:var(--wl-grey-ink)}
/* The whole card links to the review: the place name is the link, stretched over the card */
.wl-review_link{color:inherit;text-decoration:none}
.wl-review_link::after{content:"";position:absolute;inset:0;z-index:1;cursor:pointer}
.wl-review-card{transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s ease}
@media (hover:hover){
.wl-review-card:hover{transform:translateY(-.25em);box-shadow:0 .75em 2em rgba(48,58,66,.12)}
.wl-review-card:hover .wl-review_link{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em}}
@supports selector(:has(*)){
.wl-review_link:focus-visible{outline:none}
.wl-review-card:has(.wl-review_link:focus-visible){outline:2px solid var(--wl-orange-ink);outline-offset:3px}}
@media (prefers-reduced-motion:reduce){.wl-review-card{scroll-snap-align:start;transition:none}.wl-review-card:hover{transform:none}}
/* The card box. Home's cards also carry Metric's .home-testimonials_item, which draws this same box
   with its own tablet and phone sizes; :where() keeps these rules at zero specificity so Metric's win
   there. The service pages' Webflow CSS has no card (nor .heading-20), so there these draw it. The place
   name is scoped to .wl-proof instead, because Webflow's bare h4 rule (48px) outranks :where(). */
:where(.wl-review-card){position:relative;display:flex;flex-flow:column;justify-content:space-between;align-items:flex-start;gap:3.4375em;
padding:var(--_responsive-variables---spacing--40);background-color:var(--swatch--tan);border-radius:.625em;overflow:hidden}
:where(.wl-review-card .home-testimonials_name){display:flex;flex-flow:column;justify-content:flex-start;align-items:flex-start;gap:var(--_responsive-variables---spacing--12)}
.wl-proof .wl-review-card .heading-20{font-family:var(--font-family--heading);font-size:var(--_responsive-variables---heading--h-20);line-height:1.2;font-weight:var(--font-weight--font-weight-600)}
@media screen and (max-width:991px){:where(.wl-review-card){padding:var(--_responsive-variables---spacing--24)}}

/* Service pages' hero photo on tablet and phone (mobile audit, 3 Oct 2026). Below 992px Metric's
   career hero is a 3:2 landscape strip under the title. Our photos are mostly 3:4 portrait, so they
   stood 477px tall at 390 (960px at 768) and pushed "The job" off the first screen. Cropped to Metric's
   3:2 here; desktop keeps its 668x683 cover box. */
@media screen and (max-width:991px){.career-hero_img img{aspect-ratio:3/2;height:auto;object-fit:cover}}

/* Service pages: proof for that one service (Sam, 3 Oct 2026), in place of the "Why White Lodge" block
   all six shared (archived in _archive/white-lodge-page-trims-2026-10-03/service--why-white-lodge.html).
   Reviews about the service, then cards linking to its project pages. Home keeps the overall review
   carousel (docs/page-roles.md). A darker band, like Home's reviews, so the cream cards stand out. */
.wl-proof{background-color:var(--swatch--dark-tan)}
.wl-proof_wrapper{display:flex;flex-direction:column;gap:var(--_responsive-variables---spacing--80)}
.wl-proof_block{display:flex;flex-direction:column;gap:var(--_responsive-variables---spacing--40)}
.wl-proof_list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--_responsive-variables---spacing--24);margin:0;padding:0;list-style:none}
.wl-proof_list>li{display:flex;min-width:0}
.wl-proof_list .wl-review-card{width:100%}
.wl-proof_more{margin:0}
.wl-proof_more a{color:var(--wl-orange-ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em}
.wl-proof_more a:hover{text-decoration-thickness:2px}
/* Job cards: the project's cover photo from the Projects grid, and only that photo (one home per photo;
   the cover may repeat only on a card that links to its own project page), its title, place and year.
   The whole card links to the project. */
.wl-job-card{position:relative;display:flex;flex-direction:column;gap:var(--_responsive-variables---spacing--16);width:100%}
.wl-job-card_img{aspect-ratio:4/3;border-radius:.625em;overflow:hidden;background-color:var(--swatch--tan)}
.wl-job-card_img img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.wl-job-card_text{display:flex;flex-direction:column;gap:var(--_responsive-variables---spacing--8)}
.wl-job-card_text h4,.wl-job-card_text p{margin:0}
.wl-job-card_link{color:inherit;text-decoration:none}
.wl-job-card_link::after{content:"";position:absolute;inset:0;z-index:1}
@media (hover:hover){
.wl-job-card:hover .wl-job-card_img img{transform:scale(1.04)}
.wl-job-card:hover .wl-job-card_link{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em}}
@supports selector(:has(*)){
.wl-job-card_link:focus-visible{outline:none}
.wl-job-card:has(.wl-job-card_link:focus-visible){outline:2px solid var(--wl-orange-ink);outline-offset:4px;border-radius:.625em}}
@media (prefers-reduced-motion:reduce){.wl-job-card_img img{transition:none}.wl-job-card:hover .wl-job-card_img img{transform:none}}
@media screen and (max-width:991px){
.wl-proof_list{grid-template-columns:repeat(2,minmax(0,1fr))}
.wl-proof_more{text-align:center}}
/* Phones: each list is a row that scrolls sideways, with the next card peeking in */
@media screen and (max-width:767px){
.wl-proof_wrapper{gap:var(--_responsive-variables---spacing--40)}
.wl-proof_block{gap:var(--_responsive-variables---spacing--24)}
.wl-proof_list{display:flex;gap:var(--_responsive-variables---spacing--16);overflow-x:auto;overscroll-behavior-x:contain;
scroll-snap-type:x mandatory;scroll-padding-inline:4px;padding:4px 4px 1em;margin:-4px -4px 0}
.wl-proof_list>li{flex:0 0 calc(100% - 2em);scroll-snap-align:start}
.wl-proof_list>li:only-child{flex-basis:100%}
/* Metric's phone padding for these cards, so the stars and logo still fit on one line at 390px;
   on a narrower phone the logo drops under the stars rather than spilling out of the card */
.wl-proof .wl-review-card{padding-left:var(--_responsive-variables---spacing--16);padding-right:var(--_responsive-variables---spacing--16)}
.wl-proof .wl-review_top{flex-wrap:wrap;row-gap:.75em}}
/* Project pages, 3 Oct 2026: the job's own review is a single card, so its list is one column, wider
   than a grid cell but kept to a readable line length */
.wl-proof_list.is-single{grid-template-columns:minmax(0,1fr);max-width:56rem}

/* Sticky "Call Harry / Free quote" bar, phones and tablets only (assets/js/wl-sticky.js, Sam 3 Oct
   2026). Free quote matches the site's .btn-primary: brand orange, #1F262B label at 600, 4px corners, 51px tall. */
.wl-sticky{display:none}
@media (max-width:991px){
  .wl-sticky{position:fixed;left:0;right:0;bottom:0;z-index:990;display:flex;gap:8px;
    padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:var(--swatch--tan,#FFF5E8);
    border-top:1px solid var(--swatch--stroke,#CECECE);box-shadow:0 -6px 20px rgba(48,58,66,.12);
    transform:translateY(110%);visibility:hidden;transition:transform .35s ease,visibility 0s linear .35s}
  .wl-sticky.is-on{transform:none;visibility:visible;transition:transform .35s ease,visibility 0s}
  .wl-sticky a{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;height:51px;
    border-radius:4px;font-family:Poppins,Arial,sans-serif;font-size:16px;font-weight:600;line-height:1;
    text-transform:uppercase;text-decoration:none}
  .wl-sticky a svg{flex:none}
  .wl-sticky a{white-space:nowrap}
  .wl-sticky_message{background:var(--swatch--black,#303A42);color:#FFF}
  .wl-sticky_quote{background:var(--swatch--blue,#FD5722);color:#1F262B}
}
/* "MESSAGE HARRY" at 16px fills a 375px phone's half of the bar; below 360px it would wrap and push
   the glyph out of the button, so the labels step down together there */
@media (max-width:359px){
  .wl-sticky a{font-size:13px;gap:6px}
  .wl-sticky a svg{width:18px;height:18px}
}
@media (max-width:991px) and (prefers-reduced-motion:reduce){
  .wl-sticky,.wl-sticky.is-on{transition:none}
}
/* Before and after labels on job page photos (Sam, 4 Oct 2026: a before must be unmistakable).
   The label is the hero's tag chip (.project_category_item.heading-12 in the markup: orange, with
   the deep slate text set at the top of this file, capitals), pinned top left with a soft shadow so
   it holds on pale paving and sky alike. A before always sits straight before the after of the same
   spot and starts a row, so the pair reads in order on every screen (check_pairs in
   tools/new-project-pages.py). The alt text carries the word for screen readers. */
.project-gallery_item .wl-ba{position:absolute;top:1em;left:1em;z-index:2;line-height:1.2;
  pointer-events:none;box-shadow:0 1px 6px rgba(31,38,43,.35)}
/* Postcode checker and stepped quote flow (Sam, 16 Oct 2026): "Do we cover your area?" and the three
   steps after it, built by assets/js/wl-postcode.js, which also has the covered list and the why.
   Home floats the steps in a card that lifts out of the bar under the hero title (the bar's place
   there is the "wl-page-postcode" style block in pages/index.html); the Free quote page shows the
   same bar and steps inline, in place of the old form. Sizes are in em, so they scale with the
   page's own type like the nav's Free quote button (Metric's body text is 1.111vw from 992 to
   1440px), with a floor so the form stays readable. Buttons reuse the site's .btn-primary; fields
   follow the old quote form's (1px #CECECE, 4px corners, orange on focus) on white. */
/* The bar: on Home a cream panel under the title, on the Free quote page bare, in the page's card */
.wl-pcbar{position:relative;font-size:max(1em,13px);
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;column-gap:.5em;padding:.5em;
  background:var(--swatch--tan);border-radius:.5em;box-shadow:0 1.25em 2.5em -1em rgba(15,20,24,.55);
  color:var(--swatch--black);text-align:left;text-transform:none;letter-spacing:normal}
/* hidden while the card is up; no transitions, or .btn-bg (transition:all) lingers 0.3s beside the card */
.wl-pcbar[hidden]{display:none}
.wl-pcbar.is-lifted,.wl-pcbar.is-lifted *{visibility:hidden!important;transition:none!important}
.wl-pcbar_label{grid-column:1;grid-row:1;margin:0;padding:0 .5em 0 .75em;font-family:var(--font-family--heading);font-size:1em;
  font-weight:600;line-height:1.25;white-space:nowrap;cursor:text;transition:opacity .12s ease}
.wl-pcbar_input,.wl-pc_input{width:100%;min-width:0;margin:0;border:1px solid var(--swatch--stroke);border-radius:.25em;background:#fff;
  font-family:var(--font-family--body);font-size:1.125em;font-weight:400;line-height:1.2;color:var(--swatch--black);box-shadow:none;outline:none;
  -webkit-appearance:none;appearance:none;transition:border-color .15s ease,box-shadow .15s ease}
.wl-pcbar_input{grid-column:2;grid-row:1;align-self:stretch;padding:.5em .875em;text-transform:uppercase;letter-spacing:.03em}
.wl-pcbar_input::placeholder,.wl-pc_input::placeholder{color:var(--wl-grey-ink);opacity:1;text-transform:none;letter-spacing:normal}
.wl-pcbar_input:focus,.wl-pc_input:focus{border-color:var(--swatch--blue);box-shadow:0 0 0 1px var(--swatch--blue)}
.wl-pcbar_btn,.wl-pc_submit{margin:0;border:0;background:none;font:inherit;line-height:1;white-space:nowrap;cursor:pointer;-webkit-appearance:none;appearance:none}
.wl-pcbar_btn{grid-column:3;grid-row:1;align-self:stretch}
.wl-pcbar_btn:focus-visible,.wl-pc_submit:focus-visible{outline:2px solid var(--swatch--black);outline-offset:2px}
/* While the check runs, the question answers itself: "Do we cover your area?" fades to "Checking
   CT14..." and then the tick and "Yes, we cover CT14", in the question's own place. The field and the
   button stay exactly as they are, the postcode still showing. (Until 24 Oct 2026 the status sat over
   the field and button, which hid the field's border and left its edges showing faintly: Sam, "the
   box where you type in, it cuts whilst it's searching".) contain:size keeps the status out of the
   bar's measuring, so it can never widen the question's column or deepen its row; the longest line,
   "Yes, we cover CT14" with the tick, is narrower than the question at every width. The question fades
   out before the status fades in, so the two never show on top of each other. */
.wl-pcbar_status{grid-column:1;grid-row:1;align-self:stretch;z-index:3;contain:size;display:flex;align-items:center;gap:.5em;
  padding:0 .5em 0 .75em;font-family:var(--font-family--heading);font-size:1em;font-weight:600;line-height:1.25;white-space:nowrap;
  pointer-events:none;opacity:0;visibility:hidden;transition:opacity .18s ease,visibility 0s linear .18s}
.wl-pcbar.is-checking .wl-pcbar_status{opacity:1;visibility:visible;transition:opacity .16s ease .12s}
.wl-pcbar.is-checking .wl-pcbar_label{opacity:0}
.wl-pcbar_spin{flex:none;width:1.125em;height:1.125em;border:2px solid rgba(48,58,66,.18);border-top-color:var(--swatch--blue);border-radius:50%;
  animation:wl-pc-spin .7s linear infinite}
.wl-pcbar_tick{display:none;flex:none;width:1.25em;height:1.25em;color:#1E7B3A}
.wl-pcbar.is-covered .wl-pcbar_spin{display:none}
.wl-pcbar.is-covered .wl-pcbar_tick{display:block;animation:wl-pc-pop .32s cubic-bezier(.2,.8,.2,1.25) both}
/* the message line is for screen readers until it is an error, which shows in the bar, no popup */
.wl-pcbar_msg,.wl-pc_vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.wl-pcbar.is-error .wl-pcbar_msg{position:static!important;grid-column:1/-1;grid-row:2;width:auto;height:auto;margin:.5em .25em .125em .75em;
  overflow:visible;clip:auto;white-space:normal;font-size:.875em;font-weight:600;line-height:1.4;color:var(--wl-orange-ink)}
.wl-pcbar.is-error .wl-pcbar_input{border-color:var(--wl-orange-ink)}
@media screen and (max-width:767px){
  .wl-pcbar{grid-template-columns:minmax(0,1fr) auto;row-gap:.5em;padding:.75em}
  .wl-pcbar_label{grid-column:1/-1;padding:0 .125em;white-space:normal}
  .wl-pcbar_input{grid-column:1;grid-row:2;padding-left:.75em;padding-right:.75em;font-size:1em}
  .wl-pcbar_btn{grid-column:2;grid-row:2;padding-left:1.125em;padding-right:1.125em}
  .wl-pcbar_status{grid-column:1/-1;padding:0 .125em}
  .wl-pcbar.is-error .wl-pcbar_msg{grid-row:3;margin:0 .125em}
}
@media screen and (max-width:359px){
  .wl-pcbar{grid-template-columns:minmax(0,1fr)}
  .wl-pcbar_input{min-height:3.25em}
  .wl-pcbar_btn{grid-column:1;grid-row:3;min-height:3.25em}
  .wl-pcbar.is-error .wl-pcbar_msg{grid-row:4}
}
/* The card: fixed in the visual viewport (--wl-pc-top and --wl-pc-h, set by the script), so on a
   phone it never runs under the toolbar or the keyboard; it scrolls inside itself when it must. The
   cream .wl-pc_sheet is what grows out of the bar; the content fades in over it. */
.wl-pc{position:fixed;z-index:1200;left:0;right:0;top:var(--wl-pc-top,0px);height:var(--wl-pc-h,100%);display:flex;align-items:center;
  justify-content:center;padding:1.5em;font-size:max(1em,14px);color:var(--swatch--black);text-align:left}
.wl-pc[hidden]{display:none}
.wl-pc_scrim{position:fixed;inset:0;background:rgba(20,26,30,.55);-webkit-tap-highlight-color:transparent}
.wl-pc_card{position:relative;display:flex;flex-direction:column;width:min(34em,100%);max-height:calc(var(--wl-pc-h,100vh) - 3em)}
.wl-pc_card:focus{outline:none}
.wl-pc_sheet{position:absolute;inset:0;border-radius:.75em;background:var(--swatch--tan);transform-origin:0 0;
  box-shadow:0 2em 4.5em -1em rgba(10,14,17,.6),0 .375em 1em rgba(10,14,17,.18)}
.wl-pc_inner{position:relative;display:flex;flex-direction:column;flex:1 1 auto;min-height:0}
.wl-pc_progress{position:absolute;z-index:2;left:0;right:0;top:0;height:4px;overflow:hidden;border-radius:.75em .75em 0 0;background:var(--swatch--dark-tan)}
.wl-pc_progress-fill{display:block;height:100%;background:var(--swatch--blue);transform:scaleX(.25);transform-origin:0 50%;
  transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.wl-pc_close{position:absolute;z-index:3;top:.75em;right:.75em;width:2.75em;height:2.75em;margin:0;padding:0;border:0;border-radius:.25em;
  background:none;color:var(--swatch--black);cursor:pointer}
.wl-pc_close span::before,.wl-pc_close span::after{content:"";position:absolute;left:50%;top:50%;width:1.125em;height:2px;margin:-1px 0 0 -.5625em;
  background:currentColor;transform:rotate(45deg)}
.wl-pc_close span::after{transform:rotate(-45deg)}
.wl-pc_close:hover{background:rgba(48,58,66,.08)}
.wl-pc_body{position:relative;flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  padding:1.75em 2em 1.75em}
.wl-pc_head{display:flex;align-items:center;flex-wrap:wrap;gap:.5em .75em;min-height:2.75em;padding-right:3em}
.wl-pc_pc{display:flex;align-items:center;gap:.375em;margin:0;font-family:var(--font-family--heading);font-size:1.125em;font-weight:600;
  line-height:1.2;letter-spacing:.03em}
.wl-pc_pin{flex:none;width:1.2em;height:1.2em;color:var(--swatch--blue)}
.wl-pc_change{position:relative;margin:0;padding:.45em .8em;border:0;border-radius:.25em;background:var(--swatch--black);color:var(--swatch--tan);
  font-family:var(--font-family--heading);font-size:.75em;font-weight:600;line-height:1.2;letter-spacing:.06em;text-transform:uppercase;cursor:pointer}
.wl-pc_change::after{content:"";position:absolute;inset:-.6em -.3em}
.wl-pc_change:hover{background:var(--wl-on-orange)}
.wl-pc_change[hidden],.wl-pc_foot[hidden],.wl-pc_back[hidden],.wl-pc_submit[hidden],.wl-pc_err[hidden],.wl-pc_fail[hidden],.wl-pc_step[hidden]{display:none}
.wl-pc_result{display:flex;align-items:flex-start;gap:.625em;margin:.75em 0 0;padding:.75em .875em;border-radius:.375em;
  background:rgba(48,58,66,.07);font-size:.9375em;line-height:1.45}
.wl-pc_result.is-covered{background:rgba(30,123,58,.09);font-weight:600}
.wl-pc_result svg{flex:none;width:1.375em;height:1.375em}
.wl-pc_icon-yes{display:none;color:#1E7B3A}
.wl-pc_icon-out{display:block;color:var(--swatch--black)}
.wl-pc_result.is-covered .wl-pc_icon-yes{display:block}
.wl-pc_result.is-covered .wl-pc_icon-out{display:none}
.wl-pc_steps{position:relative;margin-top:1.5em}
.wl-pc_steps.is-moving,.wl-pc_card.is-moving .wl-pc_body{overflow:hidden}
/* the result line shows when the card opens after a check, then steps aside once the visitor moves
   on (the postcode and Change stay at the top); the thank-you has its own tick */
.wl-pc:not(.is-fresh) .wl-pc_result{display:none}
.wl-pc_step.is-leaving{position:absolute;left:0;right:0;top:0}
.wl-pc_count{margin:0 0 .5em;color:var(--wl-grey-ink)}
.wl-pc_q{margin:0 0 1em;font-family:var(--font-family--heading);font-size:1.5em;font-weight:600;line-height:1.2;letter-spacing:0;
  text-transform:uppercase;color:var(--swatch--black)}
.wl-pc_q:focus{outline:none}
.wl-pc_opts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5em}
.wl-pc_opts.is-list{grid-template-columns:minmax(0,1fr)}
.wl-pc_opt{display:flex;align-items:center;justify-content:space-between;gap:.75em;min-height:3.5em;margin:0;padding:.75em 1em;
  border:1px solid rgba(48,58,66,.22);border-radius:.25em;background:#fff;color:var(--swatch--black);font-family:var(--font-family--heading);
  font-size:1em;font-weight:600;line-height:1.25;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent;
  transition:border-color .15s ease,box-shadow .15s ease,background-color .15s ease,transform .1s ease}
.wl-pc_opt:last-child:nth-child(odd){grid-column:1/-1}
.wl-pc_opt::after{content:"";flex:none;width:.45em;height:.45em;margin-right:.2em;border-top:1.5px solid currentColor;border-right:1.5px solid currentColor;
  transform:rotate(45deg);opacity:.5}
.wl-pc_opt:hover{border-color:var(--swatch--black)}
.wl-pc_opt[aria-pressed="true"]{border-color:var(--swatch--blue);box-shadow:inset 0 0 0 1px var(--swatch--blue);background:#FFEFE6}
.wl-pc_opt:active{transform:scale(.985)}
.wl-pc_opt:focus-visible,.wl-pc_time:focus-visible,.wl-pc_back:focus-visible,.wl-pc_change:focus-visible,.wl-pc_close:focus-visible,
.wl-pc_done-close:focus-visible,.wl-pc a:focus-visible{outline:2px solid var(--swatch--black);outline-offset:2px}
.wl-pc_fields{display:grid;gap:1em}
.wl-pc_field{display:flex;flex-direction:column;gap:.4em;margin:0}
.wl-pc_field label,.wl-pc_label{margin:0;font-family:var(--font-family--heading);font-size:1em;font-weight:700;line-height:1.3;color:var(--swatch--black)}
.wl-pc_optional{font-weight:400;color:var(--wl-grey-ink)}
.wl-pc_input{height:3em;padding:.5em .875em}
.wl-pc_input[aria-invalid="true"]{border-color:var(--wl-orange-ink)}
.wl-pc_err,.wl-pc_fail{margin:0;font-size:.875em;font-weight:600;line-height:1.4;color:var(--wl-orange-ink)}
.wl-pc_fail{margin-top:1em}
.wl-pc_times{display:flex;flex-wrap:wrap;gap:.5em}
.wl-pc_time{min-height:2.75em;margin:0;padding:.5em 1.1em;border:1px solid rgba(48,58,66,.22);border-radius:.25em;background:#fff;color:var(--swatch--black);
  font-family:var(--font-family--heading);font-size:.9375em;font-weight:600;line-height:1.2;cursor:pointer;-webkit-tap-highlight-color:transparent;
  transition:background-color .15s ease,border-color .15s ease,color .15s ease}
.wl-pc_time:hover{border-color:var(--swatch--black)}
.wl-pc_time[aria-pressed="true"]{background:var(--swatch--black);border-color:var(--swatch--black);color:var(--swatch--tan)}
/* step 3's one-tap choice of how Harry gets back to you (24 Oct 2026): the Best time chips' look,
   three equal chips on one row at every width; the choice hides Best time and the optional marks */
.wl-pc_methods{display:flex;gap:.5em;margin:0 0 1.25em}
.wl-pc_methods .wl-pc_method{flex:1 1 0;min-width:0;padding-left:.5em;padding-right:.5em;text-align:center;white-space:nowrap}
/* small phones: equal thirds clip "WhatsApp" (about 90px each at 320), so each chip takes its own width */
@media screen and (max-width:479px){.wl-pc_methods .wl-pc_method{flex:1 1 auto;padding-left:.75em;padding-right:.75em}}
.wl-pc_field[hidden],.wl-pc_optional[hidden]{display:none}
.wl-pc_privacy{margin:1.25em 0 0;font-size:.8125em;line-height:1.5;color:var(--wl-grey-ink)}
/* "Rather message Harry now?": a WhatsApp chat with only the job type typed in, under the form */
.wl-pc_wa{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.625em 1em;margin:1.25em 0 0;padding-top:1.25em;
  border-top:1px solid rgba(48,58,66,.12)}
.wl-pc_wa-lead{margin:0;font-size:.9375em;line-height:1.4;color:var(--wl-grey-ink)}
.wl-pc_wa-btn{display:inline-flex;align-items:center;gap:.5em;min-height:2.75em;padding:.5em 1.125em;border:1px solid rgba(48,58,66,.3);
  border-radius:.25em;background:#fff;color:var(--swatch--black);font-family:var(--font-family--heading);font-size:.9375em;font-weight:600;
  line-height:1.2;text-decoration:none;white-space:nowrap;transition:border-color .15s ease,background-color .15s ease}
.wl-pc_wa-btn:hover{border-color:var(--swatch--black)}
.wl-pc_wa-icon{flex:none;width:1.25em;height:1.25em}
.wl-pc_privacy a,.wl-pc_call a{color:var(--swatch--black);text-decoration:underline;text-underline-offset:.2em}
.wl-pc_foot{display:flex;align-items:center;justify-content:space-between;gap:1em;margin-top:1.5em}
.wl-pc_back{display:inline-flex;align-items:center;gap:.45em;min-height:2.75em;margin:0 0 0 -.5em;padding:0 .5em;border:0;border-radius:.25em;
  background:none;color:var(--swatch--black);font-family:var(--font-family--heading);font-size:.875em;font-weight:600;line-height:1;
  letter-spacing:.04em;text-transform:uppercase;cursor:pointer}
.wl-pc_back svg{width:1.1em;height:1.1em}
.wl-pc_back:hover{color:var(--wl-orange-ink)}
.wl-pc_submit{margin-left:auto;min-height:3.5em}
.wl-pc_submit[aria-disabled="true"]{cursor:progress;opacity:.8}
.wl-pc_step.is-done{padding:.25em 0 .25em;text-align:center}
.wl-pc_done-icon{display:block;width:3.5em;height:3.5em;margin:0 auto 1em;color:#1E7B3A}
.wl-pc_step.is-done .wl-pc_q{margin-bottom:.5em}
.wl-pc_done-text{margin:0 auto;max-width:24em;font-size:1.125em;line-height:1.5}
.wl-pc_call{margin:1em 0 0;font-size:.9375em;line-height:1.5;color:var(--wl-grey-ink)}
.wl-pc_call a{font-weight:600;white-space:nowrap}
.wl-pc_done-close{min-height:3.25em;margin:1.75em auto 0;padding:0 2em;border:0;border-radius:.25em;background:var(--swatch--black);color:var(--swatch--tan);
  font-family:var(--font-family--heading);font-size:1em;font-weight:600;line-height:1;text-transform:uppercase;cursor:pointer}
.wl-pc_done-close:hover{background:var(--wl-on-orange)}
@media screen and (max-width:767px){
  .wl-pc{padding:.75em}
  .wl-pc_card{width:100%;max-height:calc(var(--wl-pc-h,100vh) - 1.5em)}
  .wl-pc_body{padding:1.25em 1.125em 1.25em}
  .wl-pc_q{font-size:1.25em}
  .wl-pc_steps{margin-top:1.25em}
  .wl-pc_opt{min-height:3.25em;padding:.625em .875em;font-size:.9375em}
}
/* below 360px Back and "Get my free quote" no longer fit side by side (the button ran past the
   card), so the button takes its own full-width row under Back */
@media screen and (max-width:359px){
  .wl-pc_foot{flex-wrap:wrap}
  .wl-pc_submit{flex:1 1 100%;margin-left:0}
}
/* The Free quote page: the same bar and steps inline, in the page's own cream card, so no panel
   round the bar, no overlay, no close and no inner scroll. The script swaps the bar for the steps
   and eases the mount's height (.is-moving) as it does. */
.wl-pc-inline{width:100%;max-width:38em;margin:0 auto;text-align:left}
.wl-pc-inline.is-moving{overflow:hidden}
.wl-pc-inline .wl-pcbar{padding:0;background:none;border-radius:0;box-shadow:none}
.wl-pc-inline .wl-pcbar_label,.wl-pc-inline .wl-pcbar_status{padding-left:0}
/* the page's card leaves the inline flow narrower than Home's card, so on a phone the field and
   button stack, as Home's do below 360px (side by side, "Your postcode" was cut off below about
   400px), and "Get my free quote" takes its own row under Back (it ran past the card below 375px) */
@media screen and (max-width:479px){
  .wl-pc-inline .wl-pcbar{grid-template-columns:minmax(0,1fr)}
  .wl-pc-inline .wl-pcbar_input{min-height:3.25em}
  .wl-pc-inline .wl-pcbar_btn{grid-column:1;grid-row:3;min-height:3.25em}
  .wl-pc-inline .wl-pcbar_status{grid-column:1/-1}
  .wl-pc-inline .wl-pcbar.is-error .wl-pcbar_msg{grid-row:4}
  .wl-pc-inline .wl-pc_foot{flex-wrap:wrap}
  .wl-pc-inline .wl-pc_submit{flex:1 1 100%;margin-left:0}
}
.wl-pc.is-inline{position:relative;z-index:auto;left:auto;right:auto;top:auto;height:auto;padding:0}
.wl-pc.is-inline .wl-pc_card{width:100%;max-height:none}
.wl-pc.is-inline .wl-pc_progress{position:relative;border-radius:2px}
.wl-pc.is-inline .wl-pc_body{overflow:visible;padding:1.25em 0 0}
.wl-pc.is-inline .wl-pc_card.is-moving .wl-pc_body{overflow:hidden}
.wl-pc.is-inline .wl-pc_head{padding-right:0}
/* the page behind the card stays put (the script also stops Lenis) */
html.wl-pc-lock{overflow:hidden!important;scrollbar-gutter:stable}
@keyframes wl-pc-spin{to{transform:rotate(360deg)}}
@keyframes wl-pc-pop{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .wl-pcbar_spin{display:none}
  .wl-pcbar.is-covered .wl-pcbar_tick{animation:none}
  .wl-pcbar_status,.wl-pcbar_label,.wl-pc_progress-fill,.wl-pc_opt,.wl-pc_time,.wl-pcbar_input,.wl-pc_input{transition:none}
  .wl-pc_opt:active{transform:none}
}