/* The white look (Sam, 24 Oct 2026): white page, crisp near-black type, light headlines with one or two
   heavy words, hairline rules, soft white cards, a bare nav (the mark and one link), and orange kept for the main call
   to action. Taken from the feel of a reel Sam liked, not from that site's words, logo or layouts.

   Layered after wl.css (the cream look) and the pages' own style blocks: build-preview.py (white is the
   default look) links it at the end of every working page's head. At the end of this file are the
   compact Home and the one-page Services sections (24 Oct 2026), which only this look styles, so the
   cream look (build-preview.py --look cream) no longer suits those two pages. The optional preview
   switch (build-preview.py --switch, tools/preview-lookswitch.html) turns this sheet off with
   media="not all".

   Colours, all from the logo's two plus neutrals:
   - ink #171C20, a near-black with the logo slate's hue, for text and dark buttons (17.2:1 on white)
   - soft #6B757C for the lighter words of a mixed-weight headline (4.7:1, so it passes at any size)
   - grey #5B656D for small grey text (6.0:1), as in wl.css
   - hairlines rgba(23,28,32,.12); bands #F5F6F7; cards white with a soft shadow
   - orange #FD5722 only on the main call to action and small accents; small orange text #BC3005
     (5.9:1 on white), text on orange #1F262B (4.8:1), as in wl.css
   - footer orange #FD5722 with #1F262B text, as in the cream look (24 Oct 2026; the near-black #111518 is kept as --wl-foot) */

/* Poppins Light for the lighter headline words (SIL OFL; Google Fonts' latin subset, v4.004 like the
   other three weights; licence in assets/fonts/poppins/OFL.txt) */
@font-face{font-family:Poppins;src:url(../fonts/poppins/poppins-latin-300.woff2) format("woff2");font-weight:300;font-style:normal;font-display:swap}

:root{
  --wl-ink:#171C20;--wl-soft:#6B757C;--wl-band:#F5F6F7;--wl-line:rgba(23,28,32,.12);--wl-foot:#111518;
  --wl-card-shadow:0 1px 2px rgba(23,28,32,.05),0 .75em 2.25em -.75em rgba(23,28,32,.16);
  --wl-card-shadow-hover:0 1px 2px rgba(23,28,32,.06),0 1.25em 3em -1em rgba(23,28,32,.24);
  --wl-radius:1.25em;--wl-radius-s:.75em;
  /* heading colours; dark and photo sections swap them for white below */
  --wl-h:var(--wl-ink);--wl-h-soft:var(--wl-soft);
  /* Metric's swatches by role: the page and every cream panel turn white, the darker cream bands a
     faint cool grey, black the ink, the brown and cream line colours neutral hairlines */
  --swatch--tan:#FFFFFF;--swatch--dark-tan:var(--wl-band);--swatch--black:var(--wl-ink);
  --swatch--stroke:#DDE1E4;--swatch--brown-20:var(--wl-line);--swatch--grey:var(--wl-grey-ink);--swatch--light-grey:var(--wl-band)}
body{background-color:#fff;color:var(--wl-ink)}

/* ---------- Headlines ----------
   Sentence case and light, as in the reel: big headings in Poppins Light, with the word or two that
   matter heavy and near-black (a .wl-hw span; the closing call to action's outlined second line, and
   the second halves Home already wraps, count too). In the cream look the span has no rule, so it
   shows exactly as before. */
h1,h2,h3,h4,h5,h6{text-transform:none;letter-spacing:-.01em}
h1::first-letter,h2::first-letter,h3::first-letter,h4::first-letter{text-transform:uppercase}
:is(.heading-78,.heading-64,.heading-56,.heading-48,.heading-40){font-weight:300;letter-spacing:-.03em;line-height:1.12}
:is(.heading-78,.heading-64,.heading-56,.heading-48,.heading-40):has(.wl-hw,.is-text-stroke),
.home-testimonials_heading h3,.home-careers_heading h3{color:var(--wl-h-soft)}
.wl-hw,.home-testimonials_heading .wl-nowrap,.home-careers_heading .wl-nowrap{font-weight:600;color:var(--wl-h);letter-spacing:-.035em}
.is-text-stroke{-webkit-text-stroke-width:0;-webkit-text-fill-color:currentColor;background:none;font-weight:600;color:var(--wl-h);letter-spacing:-.035em}
/* card, list and step titles stay solid: semibold near-black, a touch tighter */
:is(.heading-24,.heading-20){letter-spacing:-.015em}
/* the mono labels keep their capitals ([01] WHITE LODGE, [ 01/06 ]) */
.labels,h3.labels{text-transform:uppercase}
/* Metric's capitals elsewhere (nav, buttons, chips, footer links, filters) go to sentence case, with
   the first letter raised ("send us the details" is typed in small letters). On desktop Metric's hover
   script splits button and link words into letters, which ::first-letter cannot reach, so the first
   letter's own class is raised too. */
.nav-link,.btn-primary,.footer-link,.text-size-20.is-capitalize,.projects_category_item,.project_category_item,
.home-projects_industry_item-wrapper,.project-hero_industry-wrapper,.services-info_menu_title,.industry-label{text-transform:none}
:is(.btn-label-16,.btn-label-16-hover,.link-text,.link-text-hover) .gsap_split_word1 .gsap_split_letter1,
:is(.btn-label-16,.btn-label-16-hover,.link-text,.link-text-hover)::first-letter,
.text-size-20.is-capitalize::first-letter,.industry-label::first-letter{text-transform:uppercase}

/* Dark and photo sections keep white text, with the softer words in a translucent white */
.section-cta,.section-services-expertise,.section-services-hero,.section-projects-hero,.section-contact-hero,
.section-project-hero,.section-indigenous-hero,.home-projects_item_industry{--wl-h:#fff;--wl-h-soft:rgba(255,255,255,.8)}

/* The Home hero stays as it is (Sam, 24 Oct 2026): its title is set like Harry's logo lockup
   (capitals, semibold, the wide-tracked second line), so it keeps that here. The nav floating over it
   and the postcode bar under the title take the new look. */
.section-home-hero :is(h1,.heading-78){text-transform:uppercase;font-weight:600;letter-spacing:normal;line-height:1.2}
.section-home-hero .wl-hero-sub{letter-spacing:.24em}

/* ---------- Nav: no bar (Sam, 24 Oct 2026) ----------
   "white hwader still hasnt gone, remove get free quote on right and move services there too". The
   white pill is gone (no background, border or shadow) and so is the header's Free quote button on
   every page (the hero postcode bar, the phone call bar and the Free quote links elsewhere stay):
   the mark on the left, Services on the right, at every width. The phone menu goes with it, since
   one link fits beside the mark. The old pill is in _archive/white-lodge-header-pill-2026-10-24/.
   Colour follows what is under it. Over a photo header (the transparent variant: Home, Services,
   Areas, Free quote) the link is white with a soft shadow and a faint dark fade sits along the top
   of the photo; on the pages that start white (job pages, Privacy) it is the ink. Metric's
   interaction writes the state onto .nav-menu as an inline colour: cream at the top of a photo
   header, black once the nav slides back in on scroll-up, and that is what is matched here.
   On scroll-up the nav comes back over the page with nothing behind it (no haze since 24 Oct 2026). */
.navbar .padding-section-24{padding-top:1em;padding-bottom:1em}
.nav-menu-wrapperr{padding:0;border-radius:0;background:none;border:0;box-shadow:none;
  -webkit-backdrop-filter:none;backdrop-filter:none}
.nav-button,.nav-careers-mobile,.navbar .w-nav-button{display:none!important}
.brand.w-nav-brand{height:2em;max-width:5em}
.brand.w-nav-brand img{object-position:0 50%}
/* no scroll-up background at all (Sam, 24 Oct 2026: "remove the white glow that comes down from top
   of header with scroll"). The haze it replaced (rgba(255,255,255,.86), blur 10px, masked to fade out
   below the row) is in _archive/white-lodge-header-pill-2026-10-24/README.md */
.nav-bg[class]{background:none!important;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none}
/* over a photo header, before the nav has been scrolled: a faint dark fade along the top of the photo */
.navbar:where(.w-variant-50276db6-4bff-6aa3-21f8-ff5ca3cfc626):not(:has(.nav-menu[style*="rgb(29, 29, 29)"]))::before{
  content:"";position:absolute;left:0;right:0;top:0;height:9em;pointer-events:none;
  background:linear-gradient(180deg,rgba(15,20,24,.42) 0%,rgba(15,20,24,.16) 55%,rgba(15,20,24,0) 100%)}
/* the one link, on the right at every width. [class] and !important lift these over Metric's
   collapsed phone menu (hidden below 992px) and wl.css's inline-colour catches */
.navbar .nav-menu[class],.navbar .nav-menu[class][style]{display:block!important;position:static;height:auto;
  background:none!important;overflow:visible;margin-left:auto;color:var(--wl-ink)!important;text-shadow:none}
.navbar .nav-menu-item{width:auto;height:auto;min-height:0;margin-left:auto;padding:0;flex-direction:row;
  justify-content:flex-end;align-items:center;overflow:visible;position:static}
.navbar .nav-links-wrapper{position:static;transform:none;flex-direction:row;align-items:center}
.navbar .nav-link{font-size:1.0625rem;font-weight:500;line-height:1.2;letter-spacing:0;white-space:nowrap;
  padding:.75em .25em;margin-right:-.25em;color:inherit}
.navbar .nav-link .link-text-hover{top:.75em;bottom:.75em;left:.25em}
.navbar .nav-link:focus-visible{outline:2px solid currentColor;outline-offset:2px;border-radius:4px}
/* white over a photo header */
.navbar:where(.w-variant-50276db6-4bff-6aa3-21f8-ff5ca3cfc626) .nav-menu[class]:not([style*="rgb(29, 29, 29)"]){
  color:#fff!important;text-shadow:0 1px 2px rgba(15,20,24,.55),0 0 14px rgba(15,20,24,.35)}
.navbar:where(.w-variant-50276db6-4bff-6aa3-21f8-ff5ca3cfc626):not(:has(.nav-menu[style*="rgb(29, 29, 29)"])) .nav-blue-logo{
  filter:drop-shadow(0 1px 3px rgba(15,20,24,.45))}
/* the orange mark everywhere (Metric swaps in its white one over photos) */
.nav-menu-logo[class]{display:none!important}
.nav-blue-logo[class],.nav-blue-logo[class][style]{opacity:1!important;display:block!important}
.nav-white-logo[class],.nav-white-logo[class][style]{display:none!important}

/* ---------- Buttons: pills ----------
   Every button is a near-black pill with white text; orange is kept for the main call to action (the
   closing section's first button, the side cards' Free quote, the quote flow, the sticky bar's Free
   quote). Second buttons are outline pills. The text-only variant (View service and the like) stays
   text, in the ink, with its arrow in a small near-black disc. */
.btn-primary{color:#fff;border-radius:999px;letter-spacing:0}
.btn-primary :is(.btn-label-16,.btn-label-16-hover){font-weight:500}
.btn-bg,.btn-arrow-bg{border-radius:999px;background-color:var(--wl-ink)}
.btn-primary:where(.w-variant-1054fcb9-1d08-fcca-8799-4d937b4b7710){color:var(--wl-ink)}
.btn-primary:where(.w-variant-1054fcb9-1d08-fcca-8799-4d937b4b7710) .btn-arrow{color:#fff}
.btn-bg.w-variant-ab2fd1ab-63f8-5814-07b4-42a47da33434{background-color:transparent;box-shadow:inset 0 0 0 1px currentColor}
.btn-primary:has(.btn-bg.w-variant-ab2fd1ab-63f8-5814-07b4-42a47da33434){color:var(--wl-ink)}
.section-cta .cta_btn>.btn-primary,.career-cta_btn .btn-primary,.project-scope_cta_btn .btn-primary,.career-hero_btn .btn-primary{color:var(--wl-on-orange)}
:is(.section-cta .cta_btn>.btn-primary,.career-cta_btn .btn-primary,.project-scope_cta_btn .btn-primary,.career-hero_btn .btn-primary) .btn-bg{background-color:var(--swatch--blue)}
.section-cta .cta_btn-secondary .btn-primary{color:#fff}
.section-cta .cta_btn-secondary .btn-bg{background-color:transparent;box-shadow:inset 0 0 0 1px rgba(255,255,255,.75)}
.btn-primary:focus-visible{outline:2px solid var(--wl-ink);outline-offset:3px}
.section-cta .btn-primary:focus-visible{outline-color:#fff}
/* Projects and Home's carousel arrows: round */
.home-projects_btn .btn-primary,.home-projects_btn .btn-bg{border-radius:999px}

/* ---------- Chips (job tags) ----------
   Neutral pills, sentence case. Over a photo (cards, job headers) they are frosted white. */
.project_category_item,.projects_category_item{border-radius:999px;background-color:var(--wl-band);color:var(--wl-ink);
  font-weight:500;letter-spacing:0;box-shadow:inset 0 0 0 1px var(--wl-line)}
:is(.projects-featured_item,.project-hero_wrapper) :is(.project_category_item,.projects_category_item){background-color:rgba(255,255,255,.92);box-shadow:none}
.home-projects_industry_item-wrapper,.project-hero_industry-wrapper{border-radius:999px;letter-spacing:0}

/* ---------- Cards: white, generous corners, a soft shadow ---------- */
.home-testimonials_item,.wl-review-card,:where(.wl-review-card){background-color:#fff;border-radius:var(--wl-radius);box-shadow:var(--wl-card-shadow)}
@media (hover:hover){.wl-review-card:hover{box-shadow:var(--wl-card-shadow-hover)}}
.home-projects_item_wrapper,.project-explore_item_wrapper{background-color:#fff;border-radius:var(--wl-radius);box-shadow:var(--wl-card-shadow)}
.career_cta,.project-scope_cta{border:0;border-radius:var(--wl-radius);background-color:#fff;box-shadow:var(--wl-card-shadow)}
.home-projects_item_img,.project-explore_item_img,.projects-featured_item.swiper-slide,.projects_item_img,.wl-job-card_img,
.services-info_item_img,.career-hero_img,.careers-contact_img,.home-about_video_item-2,.home-careers_item,.project-hero_bg-wrapper{border-radius:var(--wl-radius)}
.wl-review-card :is(p,.text-size-16,.text-size-18){color:#3E474E}

/* ---------- Home ---------- */
/* Recent projects: on the white page, not over a blurred photo */
.home-projects_bg-slider{display:none}
.home-projects_text-wrapper{color:var(--wl-ink)}
.section-home-projects .home-projects_pagination{color:var(--wl-grey-ink)}
/* Reviews: the faint band, white cards */
.section-home-testimonials{background-color:var(--wl-band)}
/* Instagram eyebrow: the handle in the small grey, its icon keeps the orange as a small accent */
.wl-ig-eyebrow .labels{color:var(--wl-grey-ink)}

/* ---------- Services ---------- */
/* the Groundwork video fades into the page colour on scroll; IX2 writes the cream inline. wl.css
   already maps it to the page colour; caught here too so the white look never depends on that */
.services-expertise_bg-overlay[style*="rgb(255, 245, 232)"]{background-color:#fff!important}
/* the Groundwork heading's changing last line is the heavy part */
.services-expertise_heading .expertise-text{font-weight:600;letter-spacing:-.035em}
.services-info_menu_title{background-color:#fff}
.services-info_menu_number{color:var(--wl-orange-ink)}

/* Patios & Paving's "How we build it" drawing (wl-layers.css): its warm cream sky becomes a faint cool
   one. That sheet is linked in the page body, after this one, hence "body" for the extra weight. */
body .wl-layers{border-color:var(--wl-line);border-radius:var(--wl-radius-s);background:#F7F8F9}
body .wl-layers_scene{background:#F7F8F9}
body .wl-layers_bar{background:#fff}

/* ---------- Projects ---------- */
.projects_item{border-bottom-color:var(--wl-line)}
.industry-radio-field{border-radius:999px}
.radio-button{border-radius:999px}
.radio-button.w--redirected-checked,.radio-button.w--redirected-focus{background-color:var(--wl-ink);border-radius:999px}
/* the page's own style block paints the chosen filter's label #1D1D1D, which would vanish on the ink pill */
.projects-filter_wrapper .industry-radio-field input:checked~.industry-label{color:#fff!important}
.industry-label{font-weight:500}

/* ---------- Free quote page ---------- */
/* The top (24 Oct 2026, Sam: "just have get free quote then the box to put post code, like how it is
   on hero"): the heading, then the postcode bar on the photo exactly as Home's (white pill, 44em
   wide; on phones a rounded box, the label over the field and button). No card round it: once the
   postcode is checked the steps open in a white card in the bar's place, and Change or Back on the
   first step bring the bar back (wl-postcode.js eases the height between the two). */
.section-contact-hero .contact-hero_form_wrapper{width:100%;max-width:44em;margin-left:auto;margin-right:auto;padding:0;
  border-radius:0;background:none;box-shadow:none}
.section-contact-hero .contact-hero_fields_wrapper{padding:0;gap:0}
.section-contact-hero .wl-pc-inline{max-width:none}
.section-contact-hero .wl-pc-inline .wl-pcbar{padding:.4375em;background:#fff;border-radius:999px;box-shadow:0 1.25em 2.5em -1em rgba(15,20,24,.45)}
.section-contact-hero .wl-pc-inline :is(.wl-pcbar_label,.wl-pcbar_status){padding-left:.75em}
.section-contact-hero .wl-pc.is-inline{padding:.25em 2em 1.75em;border-radius:1.5em;background:#fff;
  box-shadow:0 2em 4.5em -1em rgba(10,14,17,.6),0 .375em 1em rgba(10,14,17,.18)}
.section-contact-hero .wl-pc.is-inline .wl-pc_progress{margin-top:1.25em}
/* with scripts off, the call line sits on the photo */
.section-contact-hero [data-wl-postcode]>noscript>p,.section-contact-hero [data-wl-postcode]>noscript a{color:#fff}
@media screen and (max-width:767px){
  .section-contact-hero .wl-pc-inline .wl-pcbar{grid-template-columns:minmax(0,1fr) auto;border-radius:1.25em;padding:.75em}
  .section-contact-hero .wl-pc-inline :is(.wl-pcbar_label,.wl-pcbar_status){padding:0 .125em}
  .section-contact-hero .wl-pc-inline .wl-pcbar_input{grid-column:1;grid-row:2;min-height:0}
  .section-contact-hero .wl-pc-inline .wl-pcbar_btn{grid-column:2;grid-row:2;min-height:0}
  .section-contact-hero .wl-pc-inline .wl-pcbar_status{grid-column:1/-1}
  .section-contact-hero .wl-pc-inline .wl-pcbar.is-error .wl-pcbar_msg{grid-row:3}
  .section-contact-hero .wl-pc.is-inline{padding:.25em 1.25em 1.5em;border-radius:1.25em}
}
@media screen and (min-width:360px) and (max-width:370.98px){
  .section-contact-hero .wl-pcbar_input{padding-left:.5em;padding-right:.5em}
  .section-contact-hero .wl-pcbar_btn{padding-left:.875em;padding-right:.875em}
}
@media screen and (max-width:359px){
  .section-contact-hero .wl-pc-inline .wl-pcbar{grid-template-columns:minmax(0,1fr)}
  .section-contact-hero .wl-pc-inline .wl-pcbar_input{min-height:3.25em}
  .section-contact-hero .wl-pc-inline .wl-pcbar_btn{grid-column:1;grid-row:3;min-height:3.25em}
  .section-contact-hero .wl-pc-inline .wl-pcbar.is-error .wl-pcbar_msg{grid-row:4}
}
/* What happens next: numbered steps on the white page, in the reel's way (a small orange number, the
   step in semibold, hairlines between), in place of outlined boxes over a dark photo */
.section-careers-expectation{background-color:#fff;color:var(--wl-ink)}
.section-careers-expectation .careers-expectation_bg-img{display:none}
.section-careers-expectation .careers-expectation_item_wrapper{border:0;border-top:1px solid var(--wl-line);border-radius:0;background:none;
  padding-left:0;padding-right:0}
.section-careers-expectation .careers-expectation_item_wrapper:last-child{border-bottom:1px solid var(--wl-line)}
.section-careers-expectation .careers-expectation_item_number{color:var(--wl-orange-ink)}
.section-careers-expectation :is(.careers-expectation_item_heading,.careers-expectation_item_heading h4){color:var(--wl-ink);font-weight:600}
.section-careers-expectation .careers-expectation_subheading{color:var(--wl-grey-ink)}
/* Common questions: white cards with soft shadows on the faint band */
.wl-faq_item{border:0;border-radius:var(--wl-radius-s);box-shadow:var(--wl-card-shadow)}
.wl-faq .dropdown-toggle{border-radius:var(--wl-radius-s)}
.wl-faq_q .dropdown-toggle{font-weight:500}

/* ---------- Job pages and service pages: the side card ----------
   "Want something similar?" holds "something similar?" together with a no-break space; set in the
   cream look's capitals it ran 9px past a 320px screen (an old wl.css bug, 24 Oct 2026). In this
   look it fits the screen, and below 480px the card's padding and the heading step down so it also
   fits inside the card. */
@media screen and (max-width:479px){
  .project-scope_cta,.career_cta{padding-left:1.5em;padding-right:1.5em}
  :is(.project-scope_cta_heading,.career-cta_heading) .heading-40{font-size:min(var(--_responsive-variables---heading--h-40),8vw)}
}

/* ---------- Before and after sliders (assets/css/wl-ba.css, 24 Oct 2026) ----------
   Same behaviour; the frame gets the look's corners, the tags and the switch become pills, titles
   go to sentence case. The before tag is the ink, the after tag white, both small capitals so they
   read over any photo. */
.wl-ba-slider_frame{border-radius:var(--wl-radius);background-color:var(--wl-band)}
.wl-ba-slider_tag{border-radius:999px;padding:.6em 1em;letter-spacing:.06em;font-weight:600;box-shadow:0 1px 8px rgba(23,28,32,.3)}
.wl-ba-slider_tag.is-before{background-color:var(--wl-ink);color:#fff}
.wl-ba-slider_tag.is-after{background-color:#fff;color:var(--wl-ink)}
.wl-ba-slider_handle{color:var(--wl-ink);box-shadow:0 2px 12px rgba(23,28,32,.35)}
.wl-ba-head_title{color:var(--wl-ink);font-weight:300;letter-spacing:-.03em;line-height:1.12;text-transform:none}
.wl-ba-toggle{border-radius:999px;background-color:var(--wl-band);box-shadow:inset 0 0 0 1px var(--wl-line)}
.wl-ba-toggle_btn{border-radius:999px;text-transform:none;font-weight:500;color:#4E575E}
.wl-ba-toggle_btn:hover{color:var(--wl-ink)}
.wl-ba-toggle_btn[aria-pressed="true"]{background-color:var(--wl-ink);color:#fff}
.wl-ba-toggle_btn:focus-visible{outline-color:var(--wl-ink)}
.wl-ba-card_problem{border-radius:999px;padding:.5em .875em;background-color:rgba(23,28,32,.86);color:#fff;font-weight:500}
.wl-ba-card_title{color:var(--wl-ink);text-transform:none;letter-spacing:-.015em}
.wl-ba-card_meta{color:var(--wl-grey-ink)}
/* the Before and After labels on side-by-side job photos (wl.css's .wl-ba, the tag chip class) */
.project-gallery_item .wl-ba{border-radius:999px;background-color:var(--wl-ink);color:#fff;box-shadow:0 1px 8px rgba(23,28,32,.3);
  text-transform:uppercase;letter-spacing:.06em}

/* ---------- The quote flow and the job check (wl.css "Postcode checker", wl-postcode.js) ----------
   White card with generous corners; options are soft-cornered tiles that lift on hover and take an
   ink outline when chosen (the orange is kept for the buttons that move the visitor on: Check my
   area, Get my free quote and Book my free quote visit). Questions are light, like the headlines. */
.wl-pcbar{border-radius:999px;padding:.4375em;box-shadow:0 1.25em 2.5em -1em rgba(15,20,24,.45)}
.wl-pcbar_input,.wl-pc_input{border-color:#D3D8DC;border-radius:999px;background:#fff}
.wl-pc_input{border-radius:.75em}
/* Focus (24 Oct 2026, Sam: the ink outline was "harsh"; then "get rid of the orange haze"): just a thin mid-grey edge, no ring */
.wl-pcbar_input:focus,.wl-pc_input:focus{outline:0;border-color:#A9B1B7;box-shadow:none}
.btn-primary:is(.wl-pcbar_btn,.wl-pc_submit,.wl-pc_book){color:var(--wl-on-orange)}
.btn-primary:is(.wl-pcbar_btn,.wl-pc_submit,.wl-pc_book) .btn-bg{background-color:var(--swatch--blue)}
.btn-primary:is(.wl-pcbar_btn,.wl-pc_submit,.wl-pc_book) .btn-label-16{font-weight:600}
.btn-primary:is(.wl-pcbar_btn,.wl-pc_submit,.wl-pc_book):focus-visible{outline:2px solid var(--wl-ink);outline-offset:2px}
.wl-pc-inline .wl-pcbar{border-radius:0;padding:0;box-shadow:none}
@media screen and (max-width:767px){
  .wl-pcbar{border-radius:1.25em;padding:.75em}
}
.wl-pc_sheet{border-radius:1.5em;background:#fff}
.wl-pc_progress{border-radius:999px;background:var(--wl-band)}
/* the floating card's corners are rounder here, so the progress line sits inside them as a thin pill */
.wl-pc:not(.is-inline) .wl-pc_progress{left:1.5em;right:1.5em;top:.75em}
.wl-pc_progress-fill{background:var(--wl-ink)}
.wl-pc_q{font-weight:300;letter-spacing:-.025em;line-height:1.15;text-transform:none;font-size:1.75em}
.wl-pc_q::first-letter{text-transform:uppercase}
.wl-pc_count{font-size:.875em}
.wl-pc_opt,.wl-pc_time{border-color:rgba(23,28,32,.12);border-radius:.875em;background:#fff;box-shadow:0 1px 2px rgba(23,28,32,.04);
  font-weight:500;color:var(--wl-ink)}
.wl-pc_time{border-radius:999px}
.wl-pc_opt:hover,.wl-pc_time:hover{border-color:rgba(23,28,32,.3);box-shadow:var(--wl-card-shadow)}
.wl-pc_opt[aria-pressed="true"]{border-color:var(--wl-ink);box-shadow:inset 0 0 0 1px var(--wl-ink);background:#fff}
.wl-pc_time[aria-pressed="true"]{background:var(--wl-ink);border-color:var(--wl-ink);color:#fff}
.wl-pc_wa{border-top-color:var(--wl-line)}
.wl-pc_wa-btn{border-color:rgba(23,28,32,.2);border-radius:999px;color:var(--wl-ink);font-weight:500}
.wl-pc_wa-btn:hover{border-color:var(--wl-ink);background:var(--wl-band)}
.wl-pc_wa-btn:focus-visible{outline:2px solid var(--wl-ink);outline-offset:2px}
.wl-pc_ico{color:var(--wl-ink)}
.wl-pc_pic{border-radius:.625em}
.wl-pc_opt-sub{color:var(--wl-grey-ink)}
.wl-pc_result{border-radius:.875em;background:var(--wl-band)}
.wl-pc_change{border-radius:999px;background:var(--wl-ink);color:#fff;text-transform:none;letter-spacing:0;font-size:.8125em;padding:.5em .95em}
.wl-pc_change:hover{background:#2C343A}
.wl-pc_back,.wl-pc_redo{text-transform:none;letter-spacing:0;font-weight:500;border-radius:999px}
.wl-pc_back:hover,.wl-pc_redo:hover{color:var(--wl-ink);background:var(--wl-band)}
.wl-pc_close{border-radius:999px}
.wl-pc_close:hover{background:var(--wl-band)}
.wl-pc_match-spin{border-color:rgba(23,28,32,.12);border-top-color:var(--wl-ink)}
.wl-pc_step.is-match .wl-pc_q{font-size:1.5em;letter-spacing:-.02em}
/* the result card: the service name a step smaller, its "Sounds like" lead-in as a plain grey line */
.wl-pc_q.wl-pc_res-name{font-size:1.5em}
.wl-pc_res-k{text-transform:none;letter-spacing:0;font-weight:500;font-size:.5833em}
.wl-pc_price{border-radius:.875em;background:var(--wl-band)}
.wl-pc_price-from{font-weight:300;font-size:1.875em;letter-spacing:-.03em}
.wl-pc_price-k,.wl-pc_told-h{text-transform:none;letter-spacing:0;font-weight:500}
.wl-pc_job-img{border-radius:.75em}
.wl-pc_done-close{border-radius:999px;background:var(--wl-ink);color:#fff;text-transform:none;font-weight:500}
.wl-pc_done-close:hover{background:#2C343A}
.wl-pc_done-icon,.wl-pcbar_tick{color:#1E7B3A}

/* ---------- Sticky Call / Free quote bar (phones and tablets) ---------- */
@media (max-width:991px){
  .wl-sticky{background:rgba(255,255,255,.92);-webkit-backdrop-filter:saturate(1.4) blur(16px);backdrop-filter:saturate(1.4) blur(16px);
    border-top:1px solid var(--wl-line);box-shadow:0 -8px 24px -12px rgba(23,28,32,.25)}
  .wl-sticky a{border-radius:999px;text-transform:none;font-weight:600}
  .wl-sticky_message{background:var(--wl-ink);color:#fff}
  .wl-sticky_quote{background:var(--swatch--blue);color:var(--wl-on-orange)}
}

/* ---------- Footer: orange again (24 Oct 2026, Sam on the live near-black one: "i think this
   section should go back to orange") ----------
   The colours are the cream look's (versions/2026-10-24-cream-look/): Metric's footer background,
   the logo orange (--swatch--blue, #FD5722), with every word, label, icon and the wordmark in the
   deep slate wl.css puts on orange (--wl-on-orange, #1F262B, 4.8:1), and the bottom line in the
   cream look's cream (#FFF5E8; in this look --swatch--tan is white). The near-black was
   --wl-foot (#111518), kept in :root in case it comes back. The links keep this look's sentence
   case and weight. */
.footer-link{font-weight:500}
.footer_bottom{border-top-color:#FFF5E8}
.section-footer a:focus-visible{outline:2px solid var(--wl-on-orange);outline-offset:3px}
/* Harry's email (24 Oct 2026) may break at its <wbr>s in the narrow phone column; the link's text layers are nowrap */
.wl-foot-email .link-text,.wl-foot-email .link-text-hover,.wl-contact-email .link-text,.wl-contact-email .link-text-hover{white-space:normal}
/* an email address stays in small letters: no capitals from Metric's link style, no sentence-case capital on its first letter */
:is(.wl-foot-email,.wl-contact-email) :is(.link-text,.link-text-hover),:is(.wl-foot-email,.wl-contact-email){text-transform:none!important}
:is(.wl-foot-email,.wl-contact-email) :is(.link-text,.link-text-hover)::first-letter,
:is(.wl-foot-email,.wl-contact-email) :is(.link-text,.link-text-hover) .gsap_split_word1 .gsap_split_letter1{text-transform:none}

/* ==========================================================================================
   Compact Home (24 Oct 2026, Sam: "I don't like the big bulkiness"; approved "yeah, publish this").
   Layout only: every photo, video and word stays, every feature keeps working. The bulk was
   Metric's layout (240px section paddings, 64px headings, full-width photo blocks), so this
   block shrinks the spacing and the type scale and puts text and pictures side by side. The
   section tokens below are shared with the Services page. The cta band and footer rules apply on
   every page, so the whole site matches.
   ========================================================================================== */
:root{--wl-sec:6em;--wl-sec-s:4.5em;--wl-head:2.75em}
@media screen and (max-width:991px){:root{--wl-sec:4.5em;--wl-sec-s:3.5em;--wl-head:2.25em}}
@media screen and (max-width:767px){:root{--wl-sec:3.5em;--wl-sec-s:2.75em;--wl-head:2em}}

/* Section headings: one size, a step down from Metric's 64px */
:is(.section-home-about,.section-home-map,.section-home-testimonials) h3.heading-64,
.section-home-careers h3.heading-56,.section-cta h3.heading-64{font-size:var(--wl-head)}

/* --- About: Harry, a circle photo beside the words (Sam, 24 Oct 2026: "i want a bit on home about harry
   with a circle photo of him on one side"). The old pair of pictures (the j22 lawn loop and the j20 pond
   photo) is in _archive/white-lodge-home-about-photos-2026-10-24/. Until Harry sends a photo the circle
   holds the White Lodge mark on a soft fill (.is-placeholder); a real photo fills the circle
   (object-fit: cover) at the figure's --wl-about-focus. --- */
.wl-about{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:clamp(3rem,6vw,6rem);max-width:68rem;margin:0 auto}
.wl-about_photo{width:clamp(17.5rem,24vw,21.25rem);aspect-ratio:1;margin:0;border-radius:50%;overflow:hidden;
  background:linear-gradient(180deg,#F8F9FA 0%,#EEF0F2 100%);box-shadow:inset 0 0 0 1px var(--wl-line)}
.wl-about_img{display:block;width:100%;height:100%;object-fit:cover;object-position:var(--wl-about-focus,50% 35%)}
.wl-about_img.is-placeholder{object-fit:cover;object-position:50% 50%;padding:0}  /* a blank profile silhouette until Harry's photo comes */
.wl-about .home-about_text-wrapper{flex-direction:column;align-items:flex-start;gap:1.5em}
.wl-about .home-about_heading{max-width:none}
.wl-about .wl-about_text{display:flex;flex-direction:column;gap:.75em;max-width:34em;padding:0;border:0;align-self:flex-start}
.wl-about_text p{margin:0;font-size:1.125em;line-height:1.6;color:#3E474E}
@media screen and (max-width:767px){
  .wl-about{grid-template-columns:minmax(0,1fr);justify-items:center;gap:2rem;text-align:center}
  .wl-about_photo{width:12.5rem}
  .wl-about .home-about_text-wrapper{align-items:center}
  .wl-about .wl-about_text{align-items:center;align-self:center}
  .wl-about_text p{font-size:1.0625em}
}


/* --- Map: heading beside a smaller map, much shorter --- */
.section-home-map .padding-section-240{padding-top:var(--wl-sec-s);padding-bottom:var(--wl-sec)}
@media screen and (min-width:992px){
  .section-home-map .home-map_wrapper{align-items:center;gap:4em}
  .section-home-map .home-map_text{flex:1 1 0}
  .section-home-map .home-map_map{flex:0 0 36em;max-width:36em}
}
@media screen and (max-width:991px){.section-home-map .home-map_map{max-width:36em}}

/* --- Reviews: smaller, lighter cards --- */
.section-home-testimonials .padding-section-96{padding-top:var(--wl-sec);padding-bottom:var(--wl-sec)}
.home-testimonials_wrapper{gap:2.5em}
.section-home-testimonials .home-testimonials_list{align-items:stretch}
.section-home-testimonials .home-testimonials_item{max-width:20em;padding:1.5em;gap:1.5em;margin-left:.5em;margin-right:.5em;
  box-shadow:0 0 0 1px rgba(23,28,32,.06)}
.section-home-testimonials .wl-review-card :is(p,.text-size-16,.text-size-18){font-size:.9375em;line-height:1.55}
.section-home-testimonials .wl-review_top{margin-bottom:1em}
@media screen and (max-width:767px){.section-home-testimonials .home-testimonials_item{max-width:17.5em;padding:1.25em}}

/* --- Instagram: the phone videos at a smaller size beside the words --- */
.section-home-careers .padding-section-240{padding-top:var(--wl-sec);padding-bottom:var(--wl-sec)}
.home-careers_wrapper{padding-bottom:0;gap:4em;justify-content:space-between}
.home-careers_text-wrapper{max-width:30em}
.home-careers_subheading .text-size-20{font-size:1.125em;line-height:1.55;color:#3E474E}
/* the line under the heading came off (24 Oct 2026, Sam: "or here"), so the button keeps its own gap */
.home-careers_btn{margin-top:1.75em}
@media screen and (min-width:992px){
  .home-careers_slider{max-width:24em;margin-right:4em}
  .home-careers_item.swiper-slide{max-width:18.5em;height:30.75em}
}
@media screen and (max-width:991px){
  .home-careers_wrapper{gap:2.5em}
  .home-careers_item.swiper-slide{max-width:14em}
}

/* --- Home gallery (24 Oct 2026, Sam: "i want some of the before and after sliders on the home page,
   like in the original reference video"): straight after "How can we help?", the four before and after
   sliders, four across, two on tablets, one on phones. The markup is between the wl-gal markers in
   pages/index.html. Its Finished view, switch and problem chips came off the same day (Sam's notes on
   the live build); they are archived in ~/Downloads/Claude/_archive/white-lodge-home-gallery-finished-view-2026-10-24/. --- */
.wl-gal{background:#fff;color:var(--wl-ink)}
.wl-gal_head{margin-bottom:2em}
.wl-gal_h{margin:0;font-family:var(--font-family--heading);font-size:var(--wl-head);font-weight:300;line-height:1.1;
  letter-spacing:-.03em;text-transform:none;color:var(--wl-soft)}
.wl-gal_h b{font-weight:600;letter-spacing:-.035em;color:var(--wl-ink)}
.wl-gal_grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:2em 1.25em}
.wl-gal .wl-ba-slider{--wl-ba-ratio:1!important}
.wl-gal .wl-ba-card_body{margin-top:.875em;gap:.25em}
.wl-gal .wl-ba-card_title{font-size:1.0625em;line-height:1.3}
.wl-gal .wl-ba-card_meta{color:var(--wl-grey-ink)}
@media screen and (max-width:991px){.wl-gal_grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media screen and (max-width:767px){
  .wl-gal_head{margin-bottom:1.5em}
  .wl-gal_grid{grid-template-columns:minmax(0,1fr);gap:1.75em}
  .wl-gal .wl-ba-slider{--wl-ba-ratio:4/3!important}
}

/* --- The free quote band: the same photo, about half the height --- */
.section-cta .padding-section-t478-b240{padding-top:16em;padding-bottom:6em}
.section-cta .cta_bg-overlay{height:14em;top:0}
.section-cta .cta_bg-overlay._02{display:none}
@media screen and (max-width:767px){
  .section-cta .padding-section-t478-b240{padding-top:12em;padding-bottom:4.5em}
  .section-cta .cta_bg-overlay{height:10em}
}

/* --- Footer: shorter, with the WHITE LODGE wordmark across its full width (Sam, 24 Oct 2026: "i preffered
   the big white lodge footer"; it was cut to half width earlier the same day) --- */
.section-footer .padding-section-80{padding-top:4em;padding-bottom:2em}
.footer_wrapper{gap:0}
.footer_links{margin-bottom:4.5em}
.footer_metric_logo{max-width:none;margin-top:0;margin-bottom:3em}
@media screen and (max-width:767px){
  .section-footer .padding-section-80{padding-top:3em}
  .footer_links{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:2.25em 1.5em;align-items:start}
  .footer_link_list.is-mobile-gap-32{gap:.75em}
  /* the Instagram icon sits in Metric's top-right corner, over the second column's label: give it its own row */
  .footer_links{padding-right:0}
  .footer_social_wrapper{position:static;grid-column:1/-1;align-items:flex-start}
  /* the labels cannot wrap ("[02]&nbsp;Services", "working&nbsp;across") and were too wide for a column at
     Metric's letter spacing; under 375px wide the links go to one column */
  .footer_link_title .labels,.footer_location_title .labels{letter-spacing:.16em}
}
@media screen and (max-width:374px){.footer_links{grid-template-columns:minmax(0,1fr)}}

/* ==========================================================================================
   One Services page (24 Oct 2026, Sam: "one little bit for each"): a short section per service with
   its jobs, in pages/services.html between the wl-svc markers. The ids (patios-and-paving,
   driveways, brickwork-and-garden-walls, garden-design-and-build, fencing-and-decking,
   garden-structures) are what Home's "How can we help?" cards and the footer link to.
   ========================================================================================== */
/* the hero, a little shorter */
.section-services-hero .padding-section-t135{padding-top:5em}
.services-hero_wrapper{gap:1em}

/* the row of jumps under the hero */
.wl-svc-jump{padding:2em 0 .5em}
.wl-svc-jump_list{display:flex;flex-wrap:wrap;gap:.5em}
.wl-svc-jump_link{display:inline-flex;align-items:center;min-height:2.75em;padding:.5em 1.125em;border-radius:999px;
  background-color:var(--wl-band);color:var(--wl-ink);font-size:.9375em;font-weight:500;line-height:1.2;text-decoration:none;
  transition:background-color .2s ease,color .2s ease}
.wl-svc-jump_link:hover{background-color:var(--wl-ink);color:#fff}
.wl-svc-jump_link:focus-visible{outline:2px solid var(--wl-ink);outline-offset:2px}

/* each service, since Sam's "these way too wordy" (24 Oct 2026): its name and one line, with "Get a
   free quote" across from them, then its photos in one row. The long copy that was here is archived
   in ~/Downloads/Claude/_archive/white-lodge-services-long-copy-2026-10-24/. On phones it reads name,
   line, photos, button (the DOM order). */
.wl-svc{padding:var(--wl-sec-s) 0;scroll-margin-top:5.5em}
.wl-svc+.wl-svc{border-top:1px solid var(--wl-line)}
.wl-svc_grid{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"text quote" "work work";
  gap:2em 3em;align-items:end}
.wl-svc_text{grid-area:text;display:flex;flex-direction:column;align-items:flex-start;gap:.75em;max-width:40em}
.wl-svc_text .labels{color:var(--wl-grey-ink)}
.wl-svc_title{margin:0;font-size:var(--wl-head)!important;color:var(--wl-ink)}
.wl-svc_sub{margin:0;font-size:1.125em;line-height:1.5;color:#3E474E}
.wl-svc_quote{grid-area:quote;justify-self:end;display:inline-flex;align-items:center;gap:.625em;padding:.25em 0;
  color:var(--wl-ink);font-weight:600;text-decoration:none;white-space:nowrap}
.wl-svc_quote-icon{display:inline-flex;align-items:center;justify-content:center;width:2em;height:2em;border-radius:50%;
  background-color:var(--swatch--blue);color:var(--wl-on-orange)}
.wl-svc_quote:hover span:first-child{text-decoration:underline;text-underline-offset:.2em}
.wl-svc_quote:focus-visible{outline:2px solid var(--wl-ink);outline-offset:3px;border-radius:.25em}
/* what each service covers, in Harry's own list (24 Oct 2026): small quiet chips, not sentences */
.wl-svc_chips{display:flex;flex-wrap:wrap;gap:.375em;margin:.25em 0 0;padding:0;list-style:none}
.wl-svc_chips>li{margin:0;padding:.3125em .75em;border:1px solid var(--wl-line);border-radius:999px;background:#fff;
  color:#3E474E;font-size:.8125em;font-weight:500;line-height:1.3}
/* a section with no photos yet (Repairs & cleaning): the words and the button, one row */
.wl-svc_grid.is-words{grid-template-areas:"text quote"}
/* the groundwork, one line after the last section */
.wl-svc-ground{padding:0 0 var(--wl-sec-s)}
.wl-svc-ground_text{margin:0;padding-top:1.5em;border-top:1px solid var(--wl-line);color:var(--wl-grey-ink);font-size:1em;line-height:1.5}

/* the photos: the slider(s) first, then the job cards, all one height in one row. --wl-svc-h is
   that height: 20em, or less where the row would not fit (the fullest section, two square sliders
   and two 4:5 cards, is 3.6 heights wide plus three gaps) */
.wl-svc_work{grid-area:work;min-width:0;container-type:inline-size;display:flex;align-items:flex-start;gap:1.25em}
.wl-svc_work>ul{--wl-svc-h:min(20em,calc((100cqw - 3.75em) / 3.6));display:flex;align-items:flex-start;gap:1.25em;
  margin:0;padding:0;list-style:none}
.wl-svc .wl-ba-grid>li{flex:none;width:var(--wl-svc-h)}
.wl-svc .wl-ba-slider{--wl-ba-ratio:1!important}
.wl-svc .wl-ba-card_body{margin-top:.75em;gap:.25em}
.wl-svc .wl-ba-card_title,.wl-svc_jobs .heading-24{font-size:1em;line-height:1.3;font-weight:600;letter-spacing:-.01em;text-transform:none}
.wl-svc .wl-ba-card_meta,.wl-svc_jobs .text-size-16{font-size:.875em;color:var(--wl-grey-ink)}
.wl-svc_jobs>li{flex:none;width:calc(var(--wl-svc-h) * .8)}
.wl-svc_jobs .wl-job-card{gap:.75em}
.wl-svc_jobs .wl-job-card_img{aspect-ratio:4/5;border-radius:.75em}
.wl-svc_jobs .wl-job-card_img img{width:100%;height:100%;object-fit:cover}
/* a section whose only photo is one job (Garden structures) shows it wider; Driveways' one card is
   a gate, so it stays card-sized */
.wl-svc_work:not(:has(.wl-ba-grid)) .wl-svc_jobs:not(.is-small)>li:only-child{width:calc(var(--wl-svc-h) * 1.5)}
.wl-svc_work:not(:has(.wl-ba-grid)) .wl-svc_jobs:not(.is-small)>li:only-child .wl-job-card_img{aspect-ratio:3/2}

@media screen and (max-width:991px){
  .wl-svc{scroll-margin-top:5em}
  .wl-svc_work{container-type:normal;flex-direction:column;gap:1.75em}
  .wl-svc_work>ul{width:100%}
  .wl-svc .wl-ba-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:1.25em}
  .wl-svc .wl-ba-grid>li{width:auto}
  .wl-svc .wl-ba-grid:not(:has(>li:nth-child(2))) .wl-ba-slider{--wl-ba-ratio:3/2!important}
  .wl-svc_work>.wl-svc_jobs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.25em}
  .wl-svc_jobs>li,.wl-svc_work:not(:has(.wl-ba-grid)) .wl-svc_jobs:not(.is-small)>li:only-child{width:auto}
  .wl-svc_work:not(:has(.wl-ba-grid)) .wl-svc_jobs:not(.is-small):has(>li:only-child){grid-template-columns:minmax(0,1fr)}
}
@media screen and (max-width:767px){
  .wl-svc_grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"text" "work" "quote";gap:1.5em}
  .wl-svc_grid.is-words{grid-template-areas:"text" "quote"}
  .wl-svc_quote{justify-self:start}
  .wl-svc-jump{padding-top:1.5em}
  .wl-svc-jump_list{flex-wrap:nowrap;overflow-x:auto;margin:0 -1em;padding:0 1em .25em;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .wl-svc-jump_list::-webkit-scrollbar{display:none}
  .wl-svc-jump_link{flex:none}
  .wl-svc .wl-ba-grid{grid-template-columns:minmax(0,1fr);gap:1.75em}
  .wl-svc .wl-ba-grid .wl-ba-slider{--wl-ba-ratio:4/3!important}
  .wl-svc_work>.wl-svc_jobs{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25em .875em}
}

/* ==========================================================================================
   One white page, one rhythm (24 Oct 2026)
   Sam on the live Home: "need to decide whay we doing with backbground cos this bit is grey but rest is
   white", then "sections feel a bit cramped, verify spacing". Every content section is white (the
   orange footer and the photo heroes and photo bands keep theirs), so the space alone separates the
   sections, and every section takes the same numbers:
   --wl-pad   each section's space above and below its content, so two sections sit 2 x --wl-pad apart
   --wl-hgap  a section's heading (or heading block) to its content
   --wl-gut   the gap between cards in a row
   The cards that sat on the grey keep their edge with the help cards' soft shadow (--wl-card-shadow). */
:root{--wl-pad:88px;--wl-hgap:68px;--wl-gut:36px}
@media screen and (max-width:991px){:root{--wl-pad:72px;--wl-hgap:52px;--wl-gut:24px}}
@media screen and (max-width:767px){:root{--wl-pad:52px;--wl-hgap:40px;--wl-gut:18px}}
/* the older names follow it, so rules written with them keep the rhythm */
:root,:root[class]{--wl-sec:var(--wl-pad);--wl-sec-s:var(--wl-pad)}

/* white, not the grey band (Home reviews, Areas towns, Free quote's "Rather talk it through?" and common
   questions, and the review band on job pages) */
.section-home-testimonials,.section-indigenous-partners,.section-contact-info,.wl-faq,.section-project-review,.wl-proof{background-color:#fff!important}
.section-indigenous-partners .indigenous-partners_item,.section-contact-info .contact-info_item_wrapper{background-color:#fff}

/* section padding: the content sections, Home to Free quote */
.wl-need .container-1360.wl-need_pad,
.wl-gal,
.section-home-about .padding-section-240,.section-home-map .padding-section-240,
.section-home-testimonials .padding-section-96,.section-home-careers .padding-section-240,
.section-project-scope .padding-section-240,.section-project-gallery .padding-section-240,
.section-project-explore .padding-section-t240-b50,.section-project-review .padding-section-96,
.section-indigenous-partners .padding-section-64,.section-indigenous-respect .padding-section-240,
.section-contact-info .padding-section-112,.section-careers-expectation .careers-expectation_wrapper,
.wl-faq .padding-section-112{padding-top:var(--wl-pad)!important;padding-bottom:var(--wl-pad)!important}
.wl-svc{padding-top:var(--wl-pad);padding-bottom:var(--wl-pad)}
.wl-svc-ground{padding:0 0 var(--wl-pad)}

/* heading to content */
.wl-need .wl-need_h{margin-bottom:var(--wl-hgap)}
.wl-gal_head{margin-bottom:var(--wl-hgap)}
.home-testimonials_wrapper{gap:var(--wl-hgap)}
.wl-svc_grid{row-gap:calc(var(--wl-hgap) * .6)}

/* card gutters */
.wl-need .wl-need_list{gap:var(--wl-gut)}
.wl-gal_grid{gap:calc(var(--wl-gut) * 1.5) var(--wl-gut)}
.wl-svc_work,.wl-svc_work>ul{gap:var(--wl-gut)}
.wl-svc_work>ul{--wl-svc-h:min(20em,calc((100cqw - 3 * var(--wl-gut)) / 3.2))}
.section-home-testimonials .home-testimonials_item{margin-left:calc(var(--wl-gut) / 2);margin-right:calc(var(--wl-gut) / 2)}

/* card captions: a little more room under the picture and between the title and the line under it */
.wl-ba-card_body{margin-top:1.375em;gap:.625em}
.wl-gal .wl-ba-card_body{gap:.5em}
.wl-job-card{gap:1.125em}
.wl-job-card_text{gap:.5em}
.wl-svc_jobs .wl-job-card{gap:1em}
.wl-svc .wl-job-card_text{gap:.375em}
@media screen and (max-width:991px){
  .wl-svc_work>.wl-svc_jobs{gap:var(--wl-gut)}
}
@media screen and (max-width:767px){
  .wl-svc_grid{gap:1.5em}
  .wl-svc_work>.wl-svc_jobs{gap:var(--wl-gut) var(--wl-gut)}
  .wl-gal_grid{gap:calc(var(--wl-gut) * 2) var(--wl-gut)}
}

/* ---------- Quote card: step 3 fits without scrolling (Sam, 24 Oct 2026: "fix this so all fits and dont need to scroll") ----------
   Tighter rhythm through the card, and on wider screens name and phone share a row (email and Best
   time keep full rows). Measured: the card's body no longer scrolls at 1440x800, 1366x768 or 1280x720,
   nor on a 390x844 phone; only very short phones (about 700px tall or less) still scroll inside it. */
.wl-pc_body{padding-top:1.5em;padding-bottom:1.5em}
.wl-pc_steps{margin-top:1em}
.wl-pc_q{margin-bottom:.75em}
.wl-pc_methods{margin-bottom:1em}
.wl-pc_fields{gap:.75em}
.wl-pc_field{gap:.3em}
.wl-pc_input{height:2.75em}
.wl-pc_time{min-height:2.5em}
.wl-pc_privacy{margin-top:.875em}
.wl-pc_wa{margin-top:.875em;padding-top:.875em}
.wl-pc_foot{margin-top:1em}
.wl-pc_submit{min-height:3.25em}
@media screen and (min-width:768px){
  .wl-pc_fields:has([data-field="phone"]){grid-template-columns:repeat(2,minmax(0,1fr));column-gap:1em}
  .wl-pc_fields>:not([data-field="name"]):not([data-field="phone"]){grid-column:1/-1}
}
@media screen and (max-width:767px){
  .wl-pc_body{padding-top:1.125em;padding-bottom:1.125em}
  .wl-pc_count{margin-bottom:.25em}
  .wl-pc_fields{gap:.625em}
  .wl-pc_privacy{font-size:.75em}
  .wl-pc_wa{gap:.5em .75em}
  .wl-pc_wa-lead{font-size:.875em}
}

/* ---------- Back link: job pages and Services (Sam, 24 Oct 2026: "neeed back button from within job or service") ----------
   A quiet pill above the job's photo card, in the ink; on the Services photo header it is white. */
.wl-back{display:inline-flex;align-items:center;gap:.45em;min-height:2.75em;margin:0 0 1.25em -.25em;padding:.5em 1.1em .5em .85em;
  border:1px solid rgba(23,28,32,.16);border-radius:999px;background:#fff;color:var(--wl-ink);font-size:1rem;font-weight:500;line-height:1;
  text-decoration:none;transition:border-color .15s ease,background-color .15s ease}
.wl-back svg{width:1.125em;height:1.125em;flex:none}
.wl-back:hover{border-color:var(--wl-ink);background:var(--wl-band)}
.wl-back:focus-visible{outline:2px solid var(--wl-ink);outline-offset:2px}
.wl-back.is-light{position:relative;z-index:2;border-color:rgba(255,255,255,.55);background:rgba(15,20,24,.18);color:#fff;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.wl-back.is-light:hover{border-color:#fff;background:rgba(15,20,24,.32)}
.wl-back.is-light:focus-visible{outline-color:#fff}
.services-hero_wrapper:has(>.wl-back){display:flex;flex-direction:column;align-items:flex-start}
@media screen and (max-width:767px){.wl-back{margin-bottom:1em;font-size:.9375rem}}

/* ---------- Alternating bands (Sam, 24 Oct 2026: "the sections having some kind of design difference, whether
   thats a difference in background, a line break, we need someway of breaking them up a bit", with a
   reference site whose sections alternate plain and a soft background with a faint dot grid) ----------
   Every other content section has a faint dot grid on white (no grey since Sam's next note); the rest are plain white.
   This replaces the "one white page" rule above for these sections: it was the stray single grey
   section Sam disliked, not a deliberate rhythm. Cards on a band are white with the soft shadow.
   Home: How can we help (white), Harry (band), Before and after (white), map (band), reviews (white),
   Instagram (band). Services: the seven sections alternate, the first white. Job pages: the write-up
   and its side card (band), photos (white), the review (band), more jobs (white). Areas: the towns
   (band). Free quote: "Rather talk it through?" and the common questions (band). */
:root{--wl-dots:radial-gradient(circle,rgba(23,28,32,.13) 1px,transparent 1.4px) 0 0/22px 22px}
.section-home-about,.section-home-map,.section-home-careers,
.wl-svc:nth-of-type(odd),
.section-project-scope,.section-project-review.wl-proof,
.section-indigenous-partners,
.section-contact-info,.wl-faq{background:var(--wl-dots),#fff!important}  /* dots on white, no grey (Sam: "for the dot bits dont make background grey too, just the dots") */
.section-project-review .padding-section-96{background:none}
.section-indigenous-partners .indigenous-partners_item,.section-contact-info .contact-info_item_wrapper{background-color:#fff}
@media screen and (max-width:767px){:root{--wl-dots:radial-gradient(circle,rgba(23,28,32,.12) 1px,transparent 1.4px) 0 0/18px 18px}}

/* ---------- Services header on phones (Sam, 24 Oct 2026: "i feel like this bit could look better on mobile") ----------
   It filled more than the whole screen, with Back and the heading on the left but the line under it
   centred, and an empty half below. On phones it is now a shorter photo (about two thirds of the
   screen) with the words at its foot, all left-aligned like the desktop, over a darker fade so they
   read. Back sits just above the heading with the words (25 Oct 2026, Sam: floating up by the logo it was "in a weird spot"). */
@media screen and (max-width:767px){
  .section-services-hero{min-height:0!important;height:auto!important}
  .section-services-hero .padding-section-t135{padding-top:0;padding-bottom:0}
  .services-hero_wrapper{position:relative;min-height:68svh!important;height:auto!important;justify-content:flex-end;align-items:flex-start;
    text-align:left;gap:.75em;padding:7.5rem 0 2.25rem}
  .services-hero_wrapper>.wl-back{position:static;margin:0 0 .5em}
  .services-hero_heading,.services-hero_subheading,.services-hero_subheading h2{text-align:left;margin-left:0}
  .services-hero_subheading h2{font-size:1.0625rem;line-height:1.5;max-width:22em}
  .section-services-hero .services-hero_bg .bg-img_overlay{background:linear-gradient(180deg,rgba(0,0,0,.3) 0%,rgba(0,0,0,.2) 35%,rgba(0,0,0,.62) 100%)}
}

/* job pages: no rule under the write-up (Sam, 24 Oct 2026, on a phone: "don't need line here"); the band and
   the side card's own shadow already set the card apart */
.section-project-scope .project-scope_text-wrapper{border-bottom:0!important}

/* hero subtitles: no drop shadow (Sam, 24 Oct 2026: "remove shadow from subtitle, looks weird"); Services and
   Areas use it. The photo's dark overlay keeps the white line readable */
.is-drop-shadow,.is-drop-shadow *{text-shadow:none!important}

/* hero subtitles: Metric draws the subtitle's shadow as a filter, not a text-shadow (Sam: "remove shadow from subtitle") */
.is-drop-shadow{filter:none!important}

/* ---------- Dark reviews (Sam, 24 Oct 2026: "feel like reviews are one of the secrtions that needs some kind of
   differentiator behind them cos the review cards dont stand out", then "maybe we do try darker sections like
   this site too", with a reference whose dark sections carry a faint light dot grid) ----------
   Home's reviews and the review on each job page sit on the near-black ink with faint light dots, so the
   white cards stand out; the heading turns light. */
.section-home-testimonials,.section-project-review.wl-proof{
  background:radial-gradient(circle,rgba(255,255,255,.1) 1px,transparent 1.4px) 0 0/22px 22px,var(--wl-ink)!important;color:#fff}
.section-home-testimonials .home-testimonials_heading h3,.wl-proof :is(h2,h3):not(.wl-review-card *){color:rgba(255,255,255,.6)!important}
.section-home-testimonials :is(.wl-hw,.wl-nowrap),.wl-proof :is(h2,h3):not(.wl-review-card *) :is(.wl-hw,b,strong){color:#fff!important}
.section-home-testimonials :is(.home-testimonials_item,.wl-review-card),.wl-proof .wl-review-card{box-shadow:0 1.5em 3em -1.5em rgba(0,0,0,.6)}
.wl-proof .wl-proof_more a,.wl-proof :is(p,.labels):not(.wl-review-card *){color:rgba(255,255,255,.75)}
.wl-proof .wl-proof_more a{color:#FF9A70}
@media screen and (max-width:767px){
  .section-home-testimonials,.section-project-review.wl-proof{background:radial-gradient(circle,rgba(255,255,255,.1) 1px,transparent 1.4px) 0 0/18px 18px,var(--wl-ink)!important}
}
/* inside the white cards the words stay ink; the job page's "[ 02/02 ]" counter loses its white box */
.section-home-testimonials .wl-review-card,.wl-proof .wl-review-card{color:var(--wl-ink)}
.section-home-testimonials .wl-review-card .wl-review_link,.wl-proof .wl-review-card .wl-review_link{color:var(--wl-ink)!important}
.wl-proof .project_pagination{background:none!important;color:rgba(255,255,255,.6)}

/* never two dotted sections back to back, even when the colour changes (Sam, 24 Oct 2026: "we shouldn't do back
   to back dots, even if colour background changes"). Home runs white, dots (Harry), white (before and after),
   dots (map), dark plain (reviews), white (Instagram); job pages: dots (write-up), white (photos), dark plain
   (review), white (more jobs). So the dark reviews carry no dots, and Instagram is plain white. */
.section-home-testimonials,.section-project-review.wl-proof{background:var(--wl-ink)!important}
.section-home-careers{background:#fff!important}

/* a second dark section on Home (Sam, 24 Oct 2026: "i do feel like we need another dark background though"):
   Before and after, so Home runs white, dots (Harry), DARK (before and after), dots (map), DARK (reviews),
   white (Instagram); no two dark or dotted sections touch. Plain ink like the reviews, no dots. */
.wl-gal{background:var(--wl-ink)!important;color:#fff}
.wl-gal .wl-gal_h{color:rgba(255,255,255,.6)!important}
.wl-gal .wl-gal_h b{color:#fff!important}
.wl-gal .wl-ba-card_title{color:#fff}
.wl-gal .wl-ba-card_body:hover .wl-ba-card_link{color:#FF9A70}
.wl-gal .wl-ba-card_link:focus-visible::after{outline-color:#fff}
.wl-gal .wl-ba-card_meta{color:rgba(255,255,255,.65)}

/* --- "Built by Sam Raeburn" straight under the WHITE LODGE wordmark, larger than the small print and not bold
   (Sam, 28 Oct 2026: "making my Built by Sam more obvious"; then "Site by"). It was the last item in .footer_bottom.
   Its left edge lines up with the foot of the W (2.66% of the wordmark's width in, measured at 800 to 1440px), not the
   W's top corner. At 991px and below the wordmark moves to the top of the footer (order:-9999), so the credit follows it. --- */
.footer_metric_logo{margin-bottom:1em}
.wl-built{margin:0 0 2.5em;padding-left:2.66%;font-size:1.25rem;font-weight:400;line-height:1.3;letter-spacing:.01em;color:inherit}
.wl-built a{color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em}
.wl-built a:hover{text-decoration-thickness:2px}
@media screen and (max-width:767px){.footer_metric_logo{margin-bottom:.75em}.wl-built{font-size:1.0625rem;margin-bottom:2em}}
@media screen and (max-width:991px){.wl-built{order:-9998}}

/* --- Job page before and after (30 Oct 2026, Harry: "when you go into each job maybe one of the first things you see
   is the before and after"). Its own section straight after the header photo, the Home gallery's heading, the slider
   square and capped to the screen height. Markup: tools/ba-sliders.py top_section(), between the wl-ba:top markers. --- */
.wl-ba-top{background:#fff;color:var(--wl-ink);padding:5em 0 1em}
.wl-ba-top_head{margin-bottom:var(--wl-hgap,2em)}
.wl-ba-top_hint{margin:.75em 0 0;font-size:1rem;line-height:1.5;color:var(--wl-grey-ink)}
.wl-ba-top .wl-ba-feature{width:min(100%,calc(78vh * var(--wl-ba-ratio,1)));margin:0 auto}
/* desktop: the heading on the left, the square slider on the right, so the row has no empty half */
@media screen and (min-width:992px){
  .wl-ba-top .container-1360{display:grid;grid-template-columns:minmax(0,1fr) min(78vh,60%);gap:3em;align-items:start}
  .wl-ba-top_head{margin:0;padding-top:.25em}
  .wl-ba-top .wl-ba-feature{width:100%}
}
@media screen and (max-width:767px){.wl-ba-top{padding:3em 0 .5em}.wl-ba-top .wl-ba-feature{width:100%}}

/* The Services panel in the header (Sam, 6 Nov 2026: no overview page; "could be more slick"). Home's eight cards, small,
   in two columns. Opens on hover where there is a mouse, and on a tap or click anywhere (wl-sticky.js sets .is-open). */
.wl-menu{position:relative}
.wl-menu_btn{display:inline-flex;align-items:center;gap:.4em;padding:.55em .85em;margin:0;border:0;border-radius:999px;background:transparent;
  color:inherit;font:inherit;font-size:1.0625rem;font-weight:500;line-height:1.2;white-space:nowrap;cursor:pointer;text-shadow:inherit;
  transition:background-color .2s ease}
.wl-menu_btn:focus-visible{outline:2px solid currentColor;outline-offset:2px}
.wl-menu_chev{transition:transform .3s cubic-bezier(.16,1,.3,1)}
.wl-menu.is-open .wl-menu_btn{background-color:color-mix(in srgb,currentColor 14%,transparent)}
.wl-menu.is-open .wl-menu_chev{transform:rotate(180deg)}
.wl-menu_list{position:absolute;top:calc(100% + .625em);right:0;z-index:50;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.25em;
  width:min(39rem,calc(100vw - 2rem));max-height:calc(100svh - 5.5rem);overflow-y:auto;margin:0;padding:.625em;list-style:none;border-radius:1.25rem;
  background:#fff;box-shadow:0 2rem 4rem -1rem rgba(15,20,24,.4),0 .5rem 1rem -.5rem rgba(15,20,24,.16),0 0 0 1px rgba(15,20,24,.05);text-shadow:none;
  opacity:0;visibility:hidden;transform:translateY(-.5rem) scale(.975);transform-origin:top right;
  transition:opacity .16s ease,transform .16s ease,visibility 0s linear .16s}
/* no dead gap between the button and the panel, so the mouse can cross it */
.wl-menu_list::before{content:"";position:absolute;left:0;right:0;top:-.75em;height:.75em}
.wl-menu_list>li{margin:0;opacity:0;transform:translateY(.375rem);transition:opacity .12s ease,transform .12s ease}
.wl-menu_link[class]{display:flex;align-items:center;gap:.875rem;height:100%;padding:.5rem .75rem .5rem .5rem;border-radius:.875rem;color:var(--wl-ink)!important;
  font-size:.9375rem;font-weight:500;line-height:1.25;text-decoration:none;transition:background-color .18s ease}
.wl-menu_icon{flex:none;display:block;width:3.25rem;height:3.25rem;padding:.1875rem;border-radius:.625rem;background:#F1F3F5;transition:background-color .18s ease}
.wl-menu_icon img{display:block;width:100%;height:100%;object-fit:contain;transition:transform .35s cubic-bezier(.16,1,.3,1)}
.wl-menu_link:hover,.wl-menu_link:focus-visible{background-color:#F6F7F8;outline:0}
.wl-menu_link:hover .wl-menu_icon,.wl-menu_link:focus-visible .wl-menu_icon{background-color:#FFE7DE}
.wl-menu_link:hover .wl-menu_icon img,.wl-menu_link:focus-visible .wl-menu_icon img{transform:scale(1.12) translateY(-.0625rem)}
.wl-menu_link[aria-current]{font-weight:700}
.wl-menu_link[aria-current] .wl-menu_icon{background-color:#FFE7DE}
.wl-menu.is-open .wl-menu_list,.wl-menu:focus-within .wl-menu_list{opacity:1;visibility:visible;transform:none;
  transition:opacity .22s ease,transform .38s cubic-bezier(.16,1,.3,1),visibility 0s}
.wl-menu.is-open .wl-menu_list>li,.wl-menu:focus-within .wl-menu_list>li{opacity:1;transform:none;
  transition:opacity .28s ease var(--wl-d,0s),transform .42s cubic-bezier(.16,1,.3,1) var(--wl-d,0s)}
@media (hover:hover){
  .wl-menu:hover .wl-menu_btn{background-color:color-mix(in srgb,currentColor 14%,transparent)}
  .wl-menu:hover .wl-menu_chev{transform:rotate(180deg)}
  .wl-menu:hover .wl-menu_list{opacity:1;visibility:visible;transform:none;transition:opacity .22s ease,transform .38s cubic-bezier(.16,1,.3,1),visibility 0s}
  .wl-menu:hover .wl-menu_list>li{opacity:1;transform:none;transition:opacity .28s ease var(--wl-d,0s),transform .42s cubic-bezier(.16,1,.3,1) var(--wl-d,0s)}
}
/* the cards arrive one after another, row by row */
.wl-menu_list>li:nth-child(1),.wl-menu_list>li:nth-child(2){--wl-d:.03s}
.wl-menu_list>li:nth-child(3),.wl-menu_list>li:nth-child(4){--wl-d:.07s}
.wl-menu_list>li:nth-child(5),.wl-menu_list>li:nth-child(6){--wl-d:.11s}
.wl-menu_list>li:nth-child(7),.wl-menu_list>li:nth-child(8){--wl-d:.15s}
@media (max-width:640px){
  .wl-menu_list{grid-template-columns:minmax(0,1fr);gap:.125em;padding:.5em}
  .wl-menu_icon{width:2.75rem;height:2.75rem}
  .wl-menu_link[class]{font-size:1rem;padding:.375rem .625rem .375rem .375rem}
}
@media (prefers-reduced-motion:reduce){
  .wl-menu_list,.wl-menu_list>li,.wl-menu_chev,.wl-menu_icon img{transition:none!important}
  .wl-menu_list{transform:none}.wl-menu_list>li{transform:none}
}

/* A service's own page (6 Nov 2026): every job, a full grid rather than the old page's single row */
.wl-svc--page .wl-svc_grid{grid-template-areas:"text quote" "work work"}
.wl-svc--page .wl-svc_work>.wl-svc_jobs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));width:100%;gap:2.25em var(--wl-gut)}
.wl-svc--page .wl-svc_jobs>li,.wl-svc--page .wl-svc_work:not(:has(.wl-ba-grid)) .wl-svc_jobs:not(.is-small)>li:only-child{width:auto}
.wl-svc--page .wl-svc_jobs:has(>li:only-child)>li{grid-column:span 2}
.wl-svc--page + .wl-svc-ground .wl-svc-ground_text{border-top:0;padding-top:0}
@media (max-width:991px){.wl-svc--page .wl-svc_work>.wl-svc_jobs{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:767px){
  .wl-svc--page .wl-svc_grid{grid-template-areas:"text" "work" "quote"}
  .wl-svc--page .wl-svc_work>.wl-svc_jobs{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5em .875em}
}

/* The quote form's first question carries Home's illustrations (Sam, 6 Nov 2026) */
.wl-pc_opt.has-icon{justify-content:flex-start;gap:.75em;padding:.4375em .875em .4375em .4375em;text-align:left}
.wl-pc_opt.has-icon::after{margin-left:auto}
.wl-pc_icon{flex:none;display:block;width:3em;height:3em;padding:.125em;border-radius:.625em;background:#F1F3F5;transition:background-color .18s ease}
.wl-pc_icon img{display:block;width:100%;height:100%;object-fit:contain;transition:transform .35s cubic-bezier(.16,1,.3,1)}
.wl-pc_opt-name{min-width:0;line-height:1.25}
.wl-pc_opt.has-icon:hover .wl-pc_icon,.wl-pc_opt.has-icon[aria-pressed="true"] .wl-pc_icon{background-color:#FFE7DE}
.wl-pc_opt.has-icon:hover .wl-pc_icon img{transform:scale(1.1)}
@media (max-width:479px){
  .wl-pc_opt.has-icon{gap:.5em;padding:.375em .5em .375em .375em;font-size:.875em}
  .wl-pc_opt.has-icon::after{display:none}
  .wl-pc_icon{width:2.5em;height:2.5em}
}
@media (prefers-reduced-motion:reduce){.wl-pc_icon img{transition:none}.wl-pc_opt.has-icon:hover .wl-pc_icon img{transform:none}}