:root{--ink:#171614;--paper:#f3efe6;--panel:#fffdf8;--line:#e2d9c5;--muted:#57524a;--accent:#7a5c12;--accent-dark:#5e470e;--accent-light:#d8b768;--gold:#b8963f;--radius:10px;--display-weight:800;--display-font:'Gabarito';--body-font:'Nunito Sans';}
/* lwkit base.css: the Loomwest site standard, tokenised. Every colour, font and radius is a variable set
   by the build from the site's theme; nothing brand-specific lives here. Components: the header with the
   hamburger on the LEFT on desktop and on the RIGHT on a phone, pill navigation, the slide-in panel of pill
   links that opens from the hamburger's own side with its own close button, the sticky action bar on phones, buttons, sections, cards,
   the service menu with search and category chips, the gallery with a lightbox, the before/after slider,
   the contact form, the footer, and the scroll reveal. */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
html,body{overflow-x:clip}
body{font-family:var(--body-font),system-ui,sans-serif;color:var(--ink);background:var(--paper);line-height:1.6;font-size:16.5px;-webkit-font-smoothing:antialiased}
h1,h2,h3,.display{font-family:var(--display-font),Georgia,serif;font-weight:var(--display-weight,700);line-height:1.1;letter-spacing:-.01em}
h1{font-size:clamp(38px,5.6vw,68px)} h2{font-size:clamp(28px,3.6vw,44px)} h3{font-size:clamp(20px,2.2vw,26px)}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
.wrap{width:min(1120px,92vw);margin:0 auto}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.skip{position:absolute;left:8px;top:-70px;z-index:100;background:var(--accent);color:#fff;padding:10px 16px;border-radius:6px} .skip:focus{top:8px}
section[id]{scroll-margin-top:84px}

/* header: hamburger left, wordmark, pills across the top, one action on the right */
header.site{position:sticky;top:0;z-index:60;background:color-mix(in srgb,var(--paper) 90%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
header.site .wrap{display:flex;align-items:center;height:70px;gap:14px}
.logo{display:flex;align-items:center;gap:10px;font-family:var(--display-font),Georgia,serif;font-size:22px;font-weight:700;letter-spacing:.02em;color:var(--ink);white-space:nowrap;min-width:0;overflow:hidden;text-overflow:ellipsis}
.logo img{height:38px;width:auto}
.logo .short,.hdr-cta .short{display:none} @media(max-width:560px){.logo .full,.hdr-cta .full{display:none} .logo .short,.hdr-cta .short{display:inline}}
/* The hamburger glyph is placed, not centred (2026-09-17). The old build centred three 2px arms in a flex
   column, so their position was (content height - glyph height) / 2: a division whose inputs changed with the
   button size, the header height and the 1px border, and which could land a hairline on a half pixel. That
   renders faint or eaten on a real phone while looking perfect in an emulator, which is what Andre saw. Now
   each arm states its own whole-pixel offset from the button's top edge, so there is no division left to
   round: no gap, no justify-content, no border inside the box, and appearance:none so no UA button padding
   can creep back in. The arms sit at 10/18/26 in a 44px box, which is 2px higher than centred and leaves 16px
   of clear button beneath the bottom arm: Andre's "slide it up a little". Travel for the X is 8px because the
   arm tops are 8px apart; if those offsets ever change, the travel changes with them or the X misses centre.
   Parity rule: the button height must match the header row height in parity or align-items:center puts the
   whole button on a half pixel. 44 against rows of 70 and 64 gives whole 13px and 10px offsets. */
.tog{position:relative;display:block;width:44px;height:44px;overflow:visible;line-height:0;background:none;border:0;border-radius:12px;cursor:pointer;padding:0;order:-1;flex:none;-webkit-appearance:none;appearance:none}
.tog:hover{background:color-mix(in srgb,var(--ink) 6%,transparent)}
.tog span{position:absolute;left:11px;right:11px;height:2px;border-radius:2px;background:var(--ink);transition:transform .35s ease,opacity .3s ease;transform-origin:center}
.tog span:nth-child(1){top:10px} .tog span:nth-child(2){top:18px;background:var(--accent)} .tog span:nth-child(3){top:26px}
.tog[aria-expanded="true"] span:nth-child(1){transform:translateY(8px) rotate(45deg)} .tog[aria-expanded="true"] span:nth-child(2){opacity:0;transform:scaleX(.2)} .tog[aria-expanded="true"] span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
.pills{display:flex;gap:6px;margin:0 auto;align-items:center;justify-content:center;flex-wrap:wrap}
.pills a{padding:8px 15px;border-radius:999px;border:1px solid var(--line);font-size:13px;letter-spacing:.04em;color:var(--ink);background:color-mix(in srgb,var(--panel) 60%,transparent);transition:.25s;white-space:nowrap}
.pills a:hover{border-color:var(--accent);color:var(--accent)} .pills a.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.hdr-cta{margin-left:auto;white-space:nowrap;flex:none}
@media(max-width:980px){.pills{display:none}}
@media(max-width:560px){header.site .wrap{height:64px;gap:10px} .logo{font-size:18px} .logo img{height:32px} .hdr-cta{padding:9px 14px;font-size:12.5px}}
/* the narrow-screen override is width only: the arms stay 22px wide and keep their whole-pixel offsets */
@media(max-width:400px){.logo{font-size:16px} .hdr-cta{padding:8px 12px;font-size:12px} .tog{width:40px} .tog span{left:9px;right:9px}}

/* the slide-in panel: pages, sections of this page, the actions, the hours */
#menu-scrim{position:fixed;inset:0;background:color-mix(in srgb,var(--ink) 45%,transparent);z-index:64;opacity:0;pointer-events:none;transition:opacity .35s} #menu-scrim.open{opacity:1;pointer-events:auto}
/* closed, the panel is also visibility:hidden (after its slide-out ends), so its links and its close button are not
   tab stops or screen-reader content while it sits off-screen (2026-10-06) */
#menu-panel{position:fixed;top:0;left:0;bottom:0;width:min(330px,86vw);background:var(--paper);border-right:1px solid var(--line);z-index:65;padding:88px 22px 30px;transform:translateX(-103%);visibility:hidden;transition:transform .42s cubic-bezier(.33,.02,.2,1),visibility 0s linear .42s;overflow-y:auto}
#menu-panel.open{transform:translateX(0);visibility:visible;transition-delay:0s}
/* The panel's own close button (2026-10-06, found on the Trilogy and Lujan & Lee previews). The open panel covers the
   header, so the hamburger (an X while the menu is open) sat underneath it and an open menu had no visible way to close
   it, only a tap outside, Escape or a link. This X is the panel's first control, 44px like the hamburger, at the panel's
   top corner on the side it opens from (top left on desktop, top right on a phone, in the mobile block below) and level
   with the hamburger's row, so it lands where the pointer or thumb already is. Its margins give back exactly the room
   it takes (88px of panel padding: 13 above the button, 44 of button, 31 below), so nothing else in the panel moves.
   It is sticky, so it stays in reach when a long panel scrolls. A sticky offset counts from the panel's CONTENT edge,
   inside the 88px of padding, so top is -75px (88 - 75 = 13); a browser that counted from the padding edge instead
   would simply let the button scroll away with the panel, never misplace it at rest. Pill-styled in the theme's tokens. */
#menu-panel .menu-x{position:sticky;top:-75px;z-index:1;display:flex;align-items:center;justify-content:center;width:44px;height:44px;margin:-75px 0 31px;padding:0;border:1px solid var(--line);border-radius:999px;background:var(--paper);color:var(--ink);cursor:pointer;-webkit-appearance:none;appearance:none;transition:border-color .2s,color .2s}
#menu-panel .menu-x svg{display:block;width:20px;height:20px}
#menu-panel .menu-x:hover{border-color:var(--accent);color:var(--accent)}
#menu-panel .sub{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--accent);margin:22px 0 10px;padding-left:16px} #menu-panel .sub:first-child,#menu-panel .menu-x+.sub{margin-top:0}
#menu-panel a{display:flex;align-items:center;justify-content:space-between;padding:12px 18px;margin:0 0 8px;border-radius:999px;border:1px solid var(--line);background:color-mix(in srgb,var(--panel) 60%,transparent);font-family:var(--display-font),Georgia,serif;font-size:18px;line-height:1.1;color:var(--ink);opacity:0;transform:translateX(-8px);transition:opacity .3s ease .08s,transform .3s ease .08s,background .2s,border-color .2s,color .2s}
#menu-panel.open a{opacity:1;transform:none} #menu-panel a:hover{border-color:var(--accent);color:var(--accent)} #menu-panel a.here{background:var(--ink);color:var(--paper);border-color:var(--ink)}
#menu-panel a.small{font-family:var(--body-font),sans-serif;font-size:14px;letter-spacing:.02em;padding:11px 18px;margin-bottom:6px}
#menu-panel a.small.go{background:var(--accent);color:#fff;border-color:var(--accent)} #menu-panel a.small.go:hover{background:var(--accent-dark);border-color:var(--accent-dark)}
#menu-panel .mh{margin-top:22px;padding-top:16px;border-top:1px solid var(--line);font-size:13.5px;color:var(--muted)} #menu-panel .mh b{display:block;font-size:11px;letter-spacing:2.2px;text-transform:uppercase;color:var(--accent);margin-bottom:8px} #menu-panel .mh span{display:block;padding:2px 0}
/* The scroll lock while the menu is open sits on the ROOT, never on body (2026-10-08). html and body are both
   overflow-x:clip, so the old body.menu-open{overflow:hidden} made body a scroll container of its own: the sticky
   header then stuck to body, which never scrolls, and slid out of view behind the panel on a menu opened mid-page,
   while the page itself still scrolled under the scrim. Hidden on html is carried to the viewport, which stays the
   scroll container: the header stays stuck where it was, the scroll position is never touched (nothing saved or
   restored, so nothing jumps on open or close), and the page behind cannot be scrolled (desktop, Android Chrome,
   iOS Safari 16 and later). base.js sets both classes; body.menu-open stays for site styles that key off it.
   .menu-gutter (set only when the page had a classic scrollbar) keeps its width reserved, so a desktop page does not
   shift sideways when the scrollbar goes. A gesture that starts on the scrim never pans the page, and a panel
   scrolled to its end does not hand the scroll on to the page behind it. */
html.menu-open{overflow:hidden} html.menu-open.menu-gutter{scrollbar-gutter:stable}
#menu-scrim{touch-action:none} #menu-panel{overscroll-behavior:contain}
/* Mobile right-hand navigation (Andre 2026-09-17, amending the 9/7 nav standard). A phone is held in one hand
   and the thumb reaches the right side, so below the width where the top pill row stops showing, the
   hamburger and its panel move to the right. The breakpoint is tied to .pills going away rather than to a
   guessed phone width, so the button moves on exactly the screens where it is the whole navigation and the
   two can never drift apart. Desktop does not move. This is order and CSS only; the button stays first in the
   DOM so keyboard and screen-reader order still meet the menu before the wordmark.
   This block MUST stay after the #menu-panel rules above: the specificity is identical, so source order is
   the only thing deciding which wins. The header's free space is handed to the logo here rather than relying
   on .hdr-cta's auto margin, because the header CTA is optional in a built site and without it order:1 alone
   would leave the toggle sitting next to the wordmark. No sideways scroll: #menu-panel is position:fixed, so
   its off-screen transform adds nothing to the document's scrollable width. */
@media(max-width:980px){
  .tog{order:1}
  .logo{margin-right:auto} .hdr-cta{margin-left:0}
  #menu-panel{left:auto;right:0;border-right:0;border-left:1px solid var(--line);transform:translateX(103%)}
  #menu-panel.open{transform:translateX(0)}
  #menu-panel a{transform:translateX(8px)} #menu-panel.open a{transform:none}
  #menu-panel .menu-x{margin-left:auto}
}
/* the phone header row is 64px, so the hamburger sits 10px down rather than 13, and the close button follows it */
@media(max-width:560px){#menu-panel .menu-x{top:-78px;margin-top:-78px;margin-bottom:34px}}

/* the sticky action bar on phones: never covers a hero, always reachable */
#stickybar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:50;gap:10px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:color-mix(in srgb,var(--paper) 96%,transparent);border-top:1px solid var(--line);box-shadow:0 -6px 18px color-mix(in srgb,var(--ink) 10%,transparent)}
#stickybar a{flex:1 1 0;min-height:44px;display:flex;align-items:center;justify-content:center;font:700 16px var(--display-font),Georgia,serif;border-radius:10px}
#stickybar .sb-main{background:var(--accent);color:#fff} #stickybar .sb-call{color:var(--accent-dark);border:2px solid var(--accent-dark)}
/* the search pill (Karson's idea, 2026-09-12): a third pill that opens the site's service search from anywhere */
#stickybar .sb-search{flex:0 0 auto;min-width:48px;padding:0 12px;color:var(--ink);border:2px solid var(--line);background:var(--panel)} #stickybar .sb-search svg{width:18px;height:18px}
@media(max-width:820px){#stickybar{display:flex} body{padding-bottom:74px}}

/* buttons, sections, cards */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:14px 24px;border-radius:var(--radius-pill,999px);font-weight:600;font-size:15px;letter-spacing:.02em;transition:.25s;border:1px solid transparent;cursor:pointer;min-height:44px}
.btn.solid{background:var(--accent);color:#fff} .btn.solid:hover{background:var(--accent-dark)}
.btn.ghost{border-color:var(--ink);color:var(--ink)} .btn.ghost:hover{background:var(--ink);color:var(--paper)}
.btn.sm{padding:9px 16px;font-size:13px;min-height:0}
section{padding:88px 0} @media(max-width:820px){section{padding:60px 0}}
section.alt{background:var(--panel);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
section.band{background:var(--ink);color:var(--paper)} section.band .kick{color:var(--accent-light,var(--accent))} section.band .lede{color:color-mix(in srgb,var(--paper) 82%,transparent)}
/* ghost buttons on the dark band (2026-09-15): ink on ink was invisible; paper border and text, as in the hero */
section.band .btn.ghost{border-color:color-mix(in srgb,var(--paper) 70%,transparent);color:var(--paper)} section.band .btn.ghost:hover{background:var(--paper);color:var(--ink)}
/* heading rhythm (2026-09-15, Andre, from his phone): the kick, the heading and the paragraph under it each get room to breathe, the same few
   pixels at every width. These used to be inline styles in the build (14px under a heading, 16 or 18px above the copy); they live here now so a
   site's extra_css can tune them. The hero keeps its own spacing, and the menu's category heads keep theirs (.cathead, further down). */
.kick{font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--accent);margin-bottom:18px;font-weight:700} .hero .kick{margin-bottom:14px}
.lede{font-size:clamp(17px,1.5vw,20px);color:var(--muted);max-width:62ch} h2+.lede,h3+.lede{margin-top:18px}
.copy{margin-top:22px} .copy:first-child{margin-top:0} .copy p{max-width:68ch;margin-bottom:14px;color:var(--muted)} .copy p:last-child{margin-bottom:0}
/* .sec-head, a bespoke heading block inside an html section (a span.kick, the h2, then a paragraph, as the Pastelaria pages use it): the same rhythm */
.sec-head .kick{display:block} .sec-head h2{margin-bottom:18px}

/* The heading underline gauge (Andre's spec, 2026-08-27, from South County; into the kit 2026-09-17).
   Every section heading carries an underline that draws itself in on load and then tracks scroll: the
   further a heading has climbed the screen, the fuller its own line. The selector is written once in
   lwkit/__init__.py (ULINE_PARTS) and substituted into this file and into base.js, so the look and the
   driver cannot drift apart and no heading needs a hand-added class. The colour is the theme's, never a
   hard-coded one, and only a transform ever changes, so scrolling costs no layout and no text repaint. */
:root{--uline-a:var(--accent);--uline-b:color-mix(in srgb,var(--accent) 28%,transparent)}
/* on ink (the dark band) and over a hero photo, the light end of the accent carries instead */
section.band,.hero:not(.plain){--uline-a:var(--accent-light,var(--accent));--uline-b:color-mix(in srgb,var(--accent-light,var(--accent)) 26%,transparent)}
/* the line ends where the words end, never at the column edge; a heading too long for its column still
   wraps as normal and the line then spans the column, which is the two-line case, not a broken one */
section>.wrap>h1:not(.no-uline),section>.wrap>h2:not(.no-uline),section>.wrap>h3:not(.no-uline),section>.wrap>.fold>h2:not(.no-uline),section>.wrap>.fold>h3:not(.no-uline),section>.wrap>.ctr>h1:not(.no-uline),section>.wrap>.ctr>h2:not(.no-uline),section>.wrap>.ctr>h3:not(.no-uline),section>.wrap>.grid2>div>h1:not(.no-uline),section>.wrap>.grid2>div>h2:not(.no-uline),section>.wrap>.grid2>div>h3:not(.no-uline),.cathead>h2:not(.no-uline),.cathead>h3:not(.no-uline),.sec-head>h1:not(.no-uline),.sec-head>h2:not(.no-uline),.sec-head>h3:not(.no-uline),.uline:not(.no-uline){width:max-content;max-width:100%}
/* the hero keeps its own line length: the rule above is more specific than .hero h1, so re-assert it */
section.hero>.wrap>h1{max-width:min(14ch,100%)}
/* the h1 now has a line under it, so the lede needs the same room beneath a heading that h2 and h3 already had */
h1+.lede{margin-top:18px}
/* A text column beside a photo must be allowed to shrink below the heading's max-content width, or the
   heading's column swallows the row and the photo column collapses to nothing (Max's site, 2026-08-27). */
.grid2>*,.sec-head,.copy{min-width:0}
/* a centred set (the cta) centres the words, so the line has to be centred under them as well */
.ctr>h1,.ctr>h2,.ctr>h3{margin-inline:auto}
section>.wrap>h1:not(.no-uline)::after,section>.wrap>h2:not(.no-uline)::after,section>.wrap>h3:not(.no-uline)::after,section>.wrap>.fold>h2:not(.no-uline)::after,section>.wrap>.fold>h3:not(.no-uline)::after,section>.wrap>.ctr>h1:not(.no-uline)::after,section>.wrap>.ctr>h2:not(.no-uline)::after,section>.wrap>.ctr>h3:not(.no-uline)::after,section>.wrap>.grid2>div>h1:not(.no-uline)::after,section>.wrap>.grid2>div>h2:not(.no-uline)::after,section>.wrap>.grid2>div>h3:not(.no-uline)::after,.cathead>h2:not(.no-uline)::after,.cathead>h3:not(.no-uline)::after,.sec-head>h1:not(.no-uline)::after,.sec-head>h2:not(.no-uline)::after,.sec-head>h3:not(.no-uline)::after,.uline:not(.no-uline)::after{content:"";display:block;width:100%;height:3px;margin-top:14px;border-radius:2px;background:linear-gradient(90deg,var(--uline-a),var(--uline-b));transform:scaleX(var(--up,0));transform-origin:left;transition:transform .16s linear}
/* asked for nothing to move: the underline is simply there, complete and still */
@media(prefers-reduced-motion:reduce){section>.wrap>h1:not(.no-uline)::after,section>.wrap>h2:not(.no-uline)::after,section>.wrap>h3:not(.no-uline)::after,section>.wrap>.fold>h2:not(.no-uline)::after,section>.wrap>.fold>h3:not(.no-uline)::after,section>.wrap>.ctr>h1:not(.no-uline)::after,section>.wrap>.ctr>h2:not(.no-uline)::after,section>.wrap>.ctr>h3:not(.no-uline)::after,section>.wrap>.grid2>div>h1:not(.no-uline)::after,section>.wrap>.grid2>div>h2:not(.no-uline)::after,section>.wrap>.grid2>div>h3:not(.no-uline)::after,.cathead>h2:not(.no-uline)::after,.cathead>h3:not(.no-uline)::after,.sec-head>h1:not(.no-uline)::after,.sec-head>h2:not(.no-uline)::after,.sec-head>h3:not(.no-uline)::after,.uline:not(.no-uline)::after{transform:scaleX(1);transition:none}}
.hero{position:relative;min-height:78vh;display:grid;align-items:end;color:#fff;overflow:hidden;padding:0}
.hero.plain{min-height:0;color:var(--ink);align-items:start}
.hero .bg{position:absolute;inset:0;background:var(--ink) center/cover no-repeat}
.hero .bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,color-mix(in srgb,var(--ink) 15%,transparent),color-mix(in srgb,var(--ink) 72%,transparent) 70%,color-mix(in srgb,var(--ink) 92%,transparent))}
.hero .wrap{position:relative;padding:110px 0 70px} .hero.plain .wrap{padding:70px 0 20px}
.hero h1{max-width:14ch;text-wrap:balance} .hero .lede{color:color-mix(in srgb,#fff 88%,transparent)} .hero.plain .lede{color:var(--muted)}
.hero .row{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.hero .btn.ghost{border-color:color-mix(in srgb,#fff 70%,transparent);color:#fff} .hero .btn.ghost:hover{background:#fff;color:var(--ink)}
.hero.plain .btn.ghost{border-color:var(--ink);color:var(--ink)}
.hero .note{margin-top:22px;font-size:14px;opacity:.85}
/* the cta set, centred (2026-09-15): the lede's 62ch box needs auto margins under a centred heading, and the button row is a flex row here */
.ctr{text-align:center} .ctr .lede{margin-left:auto;margin-right:auto} .ctr .row{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:28px}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px;margin-top:36px}
.card{display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:0 10px 30px color-mix(in srgb,var(--ink) 8%,transparent);transition:transform .4s ease,box-shadow .4s ease}
a.card:hover{transform:translateY(-4px);box-shadow:0 18px 40px color-mix(in srgb,var(--ink) 16%,transparent)}
/* cards respond (2026-10-12): hover, keyboard focus and press on every card that does something */
a.card:focus-visible,.lwlb-card:focus-within{outline:3px solid var(--accent);outline-offset:3px}
a.card:active,.lwlb-card:active{transform:translateY(-1px) scale(.995);transition-duration:.08s}
.lwlb-card:hover{transform:translateY(-4px);box-shadow:0 18px 40px color-mix(in srgb,var(--ink) 16%,transparent)}
@media(prefers-reduced-motion:reduce){a.card,a.card:hover,a.card:active,.lwlb-card,.lwlb-card:hover,.lwlb-card:active{transform:none}}
.card .imgbox{aspect-ratio:4/3;overflow:hidden;background:var(--line)} .card .imgbox img{width:100%;height:100%;object-fit:cover}
.card .t{padding:20px 22px 24px} .card h3{margin-bottom:6px} .card p{font-size:15px;color:var(--muted)}
.grid2{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:center} @media(max-width:900px){.grid2{grid-template-columns:1fr;gap:28px}}
.ph{border-radius:var(--radius);overflow:hidden;background:var(--line);box-shadow:0 24px 60px color-mix(in srgb,var(--ink) 18%,transparent);line-height:0}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:22px;margin-top:36px}
.fact{border-top:1px solid color-mix(in srgb,currentColor 25%,transparent);padding-top:16px} .fact b{display:block;font-family:var(--display-font),Georgia,serif;font-size:40px;color:var(--accent-light,var(--accent))} .fact span{font-size:14px;opacity:.8}
.reviews{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;margin-top:36px}
.rev{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:24px} .rev .stars{color:var(--gold,#c9a45c);letter-spacing:2px;margin-bottom:10px} .rev p{font-size:15.5px} .rev .who{margin-top:12px;font-size:13px;color:var(--muted)}
.info{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px;margin-top:36px}
.info div{padding:22px;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel)} .info b{display:block;font-family:var(--display-font),Georgia,serif;font-size:22px;margin-bottom:6px} .info p{font-size:15px;color:var(--muted);overflow-wrap:anywhere}
/* map links (2026-09-15): the street address opens Google Maps, the small link beside it opens Apple Maps; underlined so they read as links inside text */
.maplink{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px} .maplink:not(.alt){margin-right:6px}
.maplink.alt{font-size:12px;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
/* the gap sits on the address's trailing edge, not the Apple link's leading edge: a start margin indented the link by 6px whenever it wrapped onto its
   own line, and mid-line after the zip it read as offset (Andre, on his phone, 2026-09-15). On phones the Apple link takes its own line, flush with the
   address above and the line below; the <br> the build puts after it is dropped there, or it would leave a blank line. */
@media(max-width:560px){.maplink.alt{display:block;margin-top:2px} .maplink.alt+br{display:none}}

/* the service menu with search, predictive suggestions and category chips */
.svc-search{margin-top:28px;display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.svc-box{position:relative;flex:1;min-width:260px}
.svc-box input{width:100%;padding:14px 20px;border:1px solid var(--line);border-radius:999px;background:var(--panel);font:inherit;font-size:15px;color:var(--ink);box-shadow:0 8px 24px color-mix(in srgb,var(--ink) 6%,transparent)}
.svc-count{font-size:13px;color:var(--muted);letter-spacing:.04em}
.svc-sug{position:absolute;left:0;right:0;top:calc(100% + 8px);background:var(--panel);border:1px solid var(--line);border-radius:18px;box-shadow:0 18px 50px color-mix(in srgb,var(--ink) 16%,transparent);list-style:none;margin:0;padding:8px;z-index:30;max-height:340px;overflow:auto}
.svc-sug[hidden]{display:none}
.svc-sug li{display:grid;grid-template-columns:1fr auto;gap:2px 12px;padding:10px 12px;border-radius:12px;cursor:pointer;align-items:baseline} .svc-sug li:hover,.svc-sug li.sel{background:color-mix(in srgb,var(--accent) 12%,transparent)}
.svc-sug .n{font-family:var(--display-font),Georgia,serif;font-size:18px} .svc-sug .n mark{background:color-mix(in srgb,var(--accent) 30%,transparent);color:inherit;border-radius:3px;padding:0 1px}
.svc-sug .c{font-size:12px;color:var(--muted);letter-spacing:.04em} .svc-sug .p{font-family:var(--display-font),Georgia,serif;font-size:17px;color:var(--accent-dark)}
.svc-cats{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.chip{padding:8px 14px;border-radius:999px;border:1px solid var(--line);background:color-mix(in srgb,var(--panel) 60%,transparent);font:inherit;font-size:13px;color:var(--ink);cursor:pointer;letter-spacing:.03em;transition:.2s} .chip:hover{border-color:var(--accent);color:var(--accent)} .chip.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.svc-empty{padding:40px 0;color:var(--muted);font-size:17px}
.cathead{margin:60px 0 18px} .cathead:first-of-type{margin-top:0} .cathead h2{margin-bottom:8px} .cathead .lede{margin-top:0}
.menu{display:grid;grid-template-columns:1fr}
.mrow{display:grid;grid-template-columns:1fr auto auto;gap:18px;align-items:baseline;padding:16px 0;border-top:1px solid var(--line)}
.mrow .n{font-family:var(--display-font),Georgia,serif;font-size:21px} .mrow .d{font-size:14px;color:var(--muted);grid-column:1/-1;margin-top:-6px;max-width:70ch}
.mrow .m{font-size:13px;color:var(--muted);letter-spacing:.04em} .mrow .p{font-family:var(--display-font),Georgia,serif;font-size:21px;color:var(--accent-dark)}
@media(max-width:620px){.mrow{grid-template-columns:1fr auto} .mrow .m{display:none}}
/* menu thumbnails (2026-09-15): a 58px picture slot per row when the section has thumbs; a blank slot shows the item's initial on a tint */
.menu.thumbs .mrow{grid-template-columns:58px 1fr auto auto;align-items:center} .menu.thumbs .mrow .d{grid-column:2/-1}
.mrow .th{grid-row:1/2;width:58px;height:58px;border-radius:12px;border:1px solid var(--line);overflow:hidden;background:var(--panel);display:grid;place-items:center;user-select:none} .mrow .th img{width:100%;height:100%;object-fit:cover}
.mrow .th.blank{background:color-mix(in srgb,var(--accent) 12%,var(--panel));color:var(--accent-dark);font-family:var(--display-font),Georgia,serif;font-weight:var(--display-weight,700);font-size:24px;line-height:1}
@media(max-width:620px){.menu.thumbs .mrow{grid-template-columns:58px 1fr auto}}
.mrow.hit{background:color-mix(in srgb,var(--accent) 18%,transparent);border-radius:12px;box-shadow:0 0 0 8px color-mix(in srgb,var(--accent) 18%,transparent);animation:hitfade 3s ease forwards} @keyframes hitfade{to{background:transparent;box-shadow:none}}
.hide{display:none!important}

/* gallery (the lightbox is the shared lightbox.css, 2026-10-12) */
.gal{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:30px}
@media(max-width:900px){.gal{grid-template-columns:repeat(2,1fr);gap:14px}} @media(max-width:520px){.gal{grid-template-columns:1fr}}
.gal .shot{position:relative;aspect-ratio:1;border-radius:var(--radius);overflow:hidden;background:var(--line);box-shadow:0 16px 42px color-mix(in srgb,var(--ink) 12%,transparent)}
.gal .shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* before / after slider: pointer-driven, no loop, native on touch */
.ba{position:relative;aspect-ratio:16/10;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);box-shadow:0 10px 30px color-mix(in srgb,var(--ink) 16%,transparent);touch-action:none;cursor:ew-resize;--cut:50%;margin-top:30px}
.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.ba .before{clip-path:inset(0 calc(100% - var(--cut)) 0 0)}
.ba .handle{position:absolute;top:0;bottom:0;left:var(--cut);width:0;pointer-events:none}
.ba .handle::before{content:"";position:absolute;top:0;bottom:0;left:-1.5px;width:3px;background:var(--accent);box-shadow:0 0 0 1px rgba(255,255,255,.5)}
.ba .grip{position:absolute;top:50%;left:0;transform:translate(-50%,-50%);width:46px;height:46px;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 18px color-mix(in srgb,var(--ink) 32%,transparent)}
.ba .tag{position:absolute;top:12px;font-size:11px;letter-spacing:1.5px;text-transform:uppercase;padding:4px 9px;border-radius:5px;background:color-mix(in srgb,var(--ink) 62%,transparent);color:#fff;pointer-events:none} .ba .tag.b{left:12px} .ba .tag.a{right:12px}

/* the contact form */
.form{max-width:720px;margin-top:30px} .fgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px 16px;margin-bottom:18px} .fgrid .wide{grid-column:1/-1}
.form label{display:block;font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:700} .form label span{display:block;margin-bottom:6px}
.form input,.form textarea{width:100%;padding:13px 14px;border-radius:10px;border:1px solid var(--line);background:var(--panel);color:var(--ink);font:inherit;font-size:16px;outline:none}
.form input:focus,.form textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 28%,transparent)}
.form textarea{min-height:120px;resize:vertical}
.form .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.form .status{margin-top:14px;font-size:15px;min-height:1.3em;color:var(--muted)} .form.sent .fgrid,.form.sent .btn{display:none} .form.sent .status{font-size:17px;color:var(--ink)}
.form .consent{margin-top:14px;font-size:13.5px;line-height:1.55;color:var(--muted);max-width:62ch} .form .consent a{color:var(--accent-dark);text-decoration:underline} .form.sent .consent{display:none}
@media(max-width:640px){.fgrid{grid-template-columns:1fr}}

/* footer */
footer.site{background:var(--ink);color:color-mix(in srgb,var(--paper) 80%,transparent);padding:56px 0 40px;font-size:14px}
footer.site .wrap{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:30px} @media(max-width:900px){footer.site .wrap{grid-template-columns:1fr 1fr}} @media(max-width:520px){footer.site .wrap{grid-template-columns:1fr}}
/* the footer headings are h2 since 2026-10-12 (heading order, K9) and look exactly as the h4 did */
footer.site .fh{color:var(--paper);font-family:var(--display-font),Georgia,serif;font-size:20px;font-weight:700;line-height:1.6;letter-spacing:normal;margin-bottom:10px} footer.site a:hover{color:var(--accent-light,var(--accent))} footer.site .tag{letter-spacing:.2em;text-transform:uppercase;font-size:11px;color:var(--accent-light,var(--accent));margin-top:14px}
/* footer links are tap targets of 44px on phones and tablets (K9, 2026-10-12: axe's target-size found 5 to 6 per page at 17px);
   on a desktop they keep their line with 28px of height, over WCAG 2.2's 24px */
footer.site p a{display:inline-flex;align-items:center;min-height:28px} @media(max-width:900px),(pointer:coarse){footer.site p a{min-height:44px}}
/* the faq section (K10, 2026-10-12): every question and its answer open on the page */
.faq{display:grid;gap:26px;margin-top:34px;max-width:76ch} .faq-item h3{font-size:clamp(19px,2vw,23px);margin-bottom:8px} .faq-item p{color:var(--muted)}
section.band .faq-item p{color:color-mix(in srgb,var(--paper) 82%,transparent)}
footer.site .credit{grid-column:1/-1;margin-top:20px;padding-top:16px;border-top:1px solid color-mix(in srgb,var(--paper) 15%,transparent);font-size:12.5px;opacity:.7}

/* scroll reveal, and nothing moves for people who asked for nothing to move */
.rv{opacity:0;transform:translateY(16px);transition:opacity .9s ease,transform .9s ease} .rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important} .rv{opacity:1;transform:none} html{scroll-behavior:auto}}

/* fold.css (shared, tools/lwkit/fold.css) */
/* fold v2: plus-minus (2026-10-01) */
/* fold.css: styles for the Loomwest fold standard (fold.js). Colours inherit from the site; override the custom
   properties per site if needed. Open by default; the button reads as part of the heading, with a small "Fold" or
   "Open" hint and a plus or minus at the right.
   v2 (Andre 2026-10-01 morning): the chevron became a plus and minus in a small rounded square, the look of the
   Command Center's "Records out of sync" toggle: a minus while the section is open (the hint reads "Fold"), a plus
   while it is folded (the hint reads "Open"). The button's aria-expanded drives it; the icon itself is aria-hidden. */
.fold-head { margin: 0; }
.fold-btn {
  all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 12px; width: 100%;
  min-height: 44px; cursor: pointer; font: inherit; color: inherit; text-align: left;
}
.fold-btn:focus-visible { outline: 3px solid var(--fold-focus, currentColor); outline-offset: 4px; border-radius: 4px; }
.fold-label { flex: 1 1 auto; }
.fold-hint {
  flex: 0 0 auto; font-size: .8rem; font-weight: 600; letter-spacing: .02em; opacity: .75;
  font-family: var(--fold-hint-font, inherit); text-transform: none;
}
/* the plus and minus: a 24px square with a 1px border (so the 22px inside centres a 2px bar on whole pixels) and two
   bars drawn in the icon's own colour; the upright bar is there only while folded */
.fold-icon {
  flex: 0 0 auto; position: relative; box-sizing: border-box; width: 24px; height: 24px; margin-right: 2px;
  border: 1px solid currentColor; border-color: color-mix(in srgb, currentColor 55%, transparent); border-radius: 7px;
}
.fold-icon::before, .fold-icon::after {
  content: ""; position: absolute; left: 6px; top: 10px; width: 10px; height: 2px; border-radius: 1px;
  background: currentColor; transition: transform .2s ease;
}
.fold-icon::after { transform: rotate(90deg) scaleX(0); }
.fold-btn[aria-expanded="false"] .fold-icon::after { transform: rotate(90deg); }
.fold-btn:hover .fold-icon { background: color-mix(in srgb, currentColor 10%, transparent); }
.fold-summary { margin: 6px 0 0; opacity: .8; font-size: .95em; }
.fold-all-wrap { display: flex; justify-content: flex-end; margin: 0 0 10px; }
.fold-all {
  all: unset; box-sizing: border-box; cursor: pointer; min-height: 44px; display: inline-flex; align-items: center;
  padding: 0 14px; border: 1.5px solid currentColor; border-radius: 999px; font: inherit; font-size: .9rem; font-weight: 600;
}
.fold-all:focus-visible { outline: 3px solid var(--fold-focus, currentColor); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .fold-icon::after { transition: none; } }
@media print { .fold-body[hidden] { display: block !important; } .fold-btn .fold-hint, .fold-btn .fold-icon, .fold-all-wrap { display: none; } }

/* lwkit fold skin (2026-10-01): the shared fold.css above, in the theme's colours and fonts */
:root{--fold-focus:var(--accent)}
.fold-head .fold-btn{gap:14px}
.fold-head .fold-hint{margin-left:auto;font-family:var(--body-font),system-ui,sans-serif;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);opacity:1}
.fold-head .fold-icon{color:var(--accent);margin-right:6px}
section.band .fold-head .fold-hint{color:color-mix(in srgb,var(--paper) 80%,transparent)} section.band .fold-head .fold-icon{color:var(--accent-light,var(--accent))}
.fold-summary{max-width:62ch;margin:14px 0 0;color:var(--muted);font-size:16px;opacity:1}
section.band .fold-summary{color:color-mix(in srgb,var(--paper) 82%,transparent)}
.fold-body>.lede:first-child{margin-top:18px}
.fold-all-wrap{margin:0 0 18px}
.fold-all{font-family:var(--body-font),system-ui,sans-serif;font-size:14px;color:var(--ink)} section.band .fold-all{color:var(--paper)}
section>.wrap>h1.fold-head:not(.no-uline),section>.wrap>h2.fold-head:not(.no-uline),section>.wrap>h3.fold-head:not(.no-uline),section>.wrap>.fold>h2.fold-head:not(.no-uline),section>.wrap>.fold>h3.fold-head:not(.no-uline),section>.wrap>.ctr>h1.fold-head:not(.no-uline),section>.wrap>.ctr>h2.fold-head:not(.no-uline),section>.wrap>.ctr>h3.fold-head:not(.no-uline),section>.wrap>.grid2>div>h1.fold-head:not(.no-uline),section>.wrap>.grid2>div>h2.fold-head:not(.no-uline),section>.wrap>.grid2>div>h3.fold-head:not(.no-uline),.cathead>h2.fold-head:not(.no-uline),.cathead>h3.fold-head:not(.no-uline),.sec-head>h1.fold-head:not(.no-uline),.sec-head>h2.fold-head:not(.no-uline),.sec-head>h3.fold-head:not(.no-uline),.uline.fold-head:not(.no-uline){width:auto}
section>.wrap>h1.fold-head:not(.no-uline)::after,section>.wrap>h2.fold-head:not(.no-uline)::after,section>.wrap>h3.fold-head:not(.no-uline)::after,section>.wrap>.fold>h2.fold-head:not(.no-uline)::after,section>.wrap>.fold>h3.fold-head:not(.no-uline)::after,section>.wrap>.ctr>h1.fold-head:not(.no-uline)::after,section>.wrap>.ctr>h2.fold-head:not(.no-uline)::after,section>.wrap>.ctr>h3.fold-head:not(.no-uline)::after,section>.wrap>.grid2>div>h1.fold-head:not(.no-uline)::after,section>.wrap>.grid2>div>h2.fold-head:not(.no-uline)::after,section>.wrap>.grid2>div>h3.fold-head:not(.no-uline)::after,.cathead>h2.fold-head:not(.no-uline)::after,.cathead>h3.fold-head:not(.no-uline)::after,.sec-head>h1.fold-head:not(.no-uline)::after,.sec-head>h2.fold-head:not(.no-uline)::after,.sec-head>h3.fold-head:not(.no-uline)::after,.uline.fold-head:not(.no-uline)::after{content:none}
section>.wrap>h1.fold-head:not(.no-uline)>.fold-btn>.fold-label,section>.wrap>h2.fold-head:not(.no-uline)>.fold-btn>.fold-label,section>.wrap>h3.fold-head:not(.no-uline)>.fold-btn>.fold-label,section>.wrap>.fold>h2.fold-head:not(.no-uline)>.fold-btn>.fold-label,section>.wrap>.fold>h3.fold-head:not(.no-uline)>.fold-btn>.fold-label,section>.wrap>.ctr>h1.fold-head:not(.no-uline)>.fold-btn>.fold-label,section>.wrap>.ctr>h2.fold-head:not(.no-uline)>.fold-btn>.fold-label,section>.wrap>.ctr>h3.fold-head:not(.no-uline)>.fold-btn>.fold-label,section>.wrap>.grid2>div>h1.fold-head:not(.no-uline)>.fold-btn>.fold-label,section>.wrap>.grid2>div>h2.fold-head:not(.no-uline)>.fold-btn>.fold-label,section>.wrap>.grid2>div>h3.fold-head:not(.no-uline)>.fold-btn>.fold-label,.cathead>h2.fold-head:not(.no-uline)>.fold-btn>.fold-label,.cathead>h3.fold-head:not(.no-uline)>.fold-btn>.fold-label,.sec-head>h1.fold-head:not(.no-uline)>.fold-btn>.fold-label,.sec-head>h2.fold-head:not(.no-uline)>.fold-btn>.fold-label,.sec-head>h3.fold-head:not(.no-uline)>.fold-btn>.fold-label,.uline.fold-head:not(.no-uline)>.fold-btn>.fold-label{display:block;flex:0 1 auto;min-width:0}
section>.wrap>h1.fold-head:not(.no-uline)>.fold-btn>.fold-label::after,section>.wrap>h2.fold-head:not(.no-uline)>.fold-btn>.fold-label::after,section>.wrap>h3.fold-head:not(.no-uline)>.fold-btn>.fold-label::after,section>.wrap>.fold>h2.fold-head:not(.no-uline)>.fold-btn>.fold-label::after,section>.wrap>.fold>h3.fold-head:not(.no-uline)>.fold-btn>.fold-label::after,section>.wrap>.ctr>h1.fold-head:not(.no-uline)>.fold-btn>.fold-label::after,section>.wrap>.ctr>h2.fold-head:not(.no-uline)>.fold-btn>.fold-label::after,section>.wrap>.ctr>h3.fold-head:not(.no-uline)>.fold-btn>.fold-label::after,section>.wrap>.grid2>div>h1.fold-head:not(.no-uline)>.fold-btn>.fold-label::after,section>.wrap>.grid2>div>h2.fold-head:not(.no-uline)>.fold-btn>.fold-label::after,section>.wrap>.grid2>div>h3.fold-head:not(.no-uline)>.fold-btn>.fold-label::after,.cathead>h2.fold-head:not(.no-uline)>.fold-btn>.fold-label::after,.cathead>h3.fold-head:not(.no-uline)>.fold-btn>.fold-label::after,.sec-head>h1.fold-head:not(.no-uline)>.fold-btn>.fold-label::after,.sec-head>h2.fold-head:not(.no-uline)>.fold-btn>.fold-label::after,.sec-head>h3.fold-head:not(.no-uline)>.fold-btn>.fold-label::after,.uline.fold-head:not(.no-uline)>.fold-btn>.fold-label::after{content:"";display:block;width:100%;height:3px;margin-top:14px;border-radius:2px;background:linear-gradient(90deg,var(--uline-a),var(--uline-b));transform:scaleX(var(--up,0));transform-origin:left;transition:transform .16s linear}
@media(prefers-reduced-motion:reduce){section>.wrap>h1.fold-head:not(.no-uline)>.fold-btn>.fold-label::after,section>.wrap>h2.fold-head:not(.no-uline)>.fold-btn>.fold-label::after,section>.wrap>h3.fold-head:not(.no-uline)>.fold-btn>.fold-label::after,section>.wrap>.fold>h2.fold-head:not(.no-uline)>.fold-btn>.fold-label::after,section>.wrap>.fold>h3.fold-head:not(.no-uline)>.fold-btn>.fold-label::after,section>.wrap>.ctr>h1.fold-head:not(.no-uline)>.fold-btn>.fold-label::after,section>.wrap>.ctr>h2.fold-head:not(.no-uline)>.fold-btn>.fold-label::after,section>.wrap>.ctr>h3.fold-head:not(.no-uline)>.fold-btn>.fold-label::after,section>.wrap>.grid2>div>h1.fold-head:not(.no-uline)>.fold-btn>.fold-label::after,section>.wrap>.grid2>div>h2.fold-head:not(.no-uline)>.fold-btn>.fold-label::after,section>.wrap>.grid2>div>h3.fold-head:not(.no-uline)>.fold-btn>.fold-label::after,.cathead>h2.fold-head:not(.no-uline)>.fold-btn>.fold-label::after,.cathead>h3.fold-head:not(.no-uline)>.fold-btn>.fold-label::after,.sec-head>h1.fold-head:not(.no-uline)>.fold-btn>.fold-label::after,.sec-head>h2.fold-head:not(.no-uline)>.fold-btn>.fold-label::after,.sec-head>h3.fold-head:not(.no-uline)>.fold-btn>.fold-label::after,.uline.fold-head:not(.no-uline)>.fold-btn>.fold-label::after{transform:scaleX(1);transition:none}}

/* lightbox.css (shared, tools/lwkit/lightbox.css) */
/* lightbox.css: the viewer for lightbox.js (Loomwest "pictures zoom and cards respond", 2026-10-12). Colours come from
   --lwlb-* variables with neutral fallbacks, so any site can skin it; frames keep Rav's 6 to 10 px corners. */
.lwlb-zoom{cursor:zoom-in}
.lwlb-zoom:focus-visible{outline:3px solid var(--lwlb-focus,#2f6fed);outline-offset:3px}
.lwlb-card{cursor:zoom-in}
.lwlb-open,.lwlb-open body{overflow:hidden}
.lwlb{position:fixed;inset:0;z-index:2147483000;display:none;align-items:center;justify-content:center;flex-direction:column;
  padding:56px 64px 72px;background:var(--lwlb-bg,rgba(12,13,14,.94));color:var(--lwlb-fg,#f4f4f2);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.lwlb:not([hidden]){display:flex}
.lwlb-in{animation:lwlb-in .22s ease-out}
@keyframes lwlb-in{from{opacity:0}to{opacity:1}}
.lwlb-stage{position:relative;flex:1 1 auto;width:100%;min-height:0;display:flex;align-items:center;justify-content:center;overflow:hidden;touch-action:none}
.lwlb-img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;border-radius:var(--lwlb-radius,8px);
  box-shadow:0 30px 90px rgba(0,0,0,.5);cursor:zoom-in;transition:transform .18s ease-out;user-select:none;-webkit-user-drag:none}
.lwlb-zoomed .lwlb-img{cursor:grab;transition:none}
.lwlb-cap{margin:14px 0 0;max-width:72ch;text-align:center;font:400 14px/1.45 var(--lwlb-font,system-ui,sans-serif);color:var(--lwlb-muted,rgba(244,244,242,.78))}
.lwlb-cap:empty{display:none}
.lwlb-n{position:absolute;top:22px;left:24px;font:600 13px/1 var(--lwlb-font,system-ui,sans-serif);letter-spacing:.06em;color:var(--lwlb-muted,rgba(244,244,242,.78))}
.lwlb-b{position:absolute;display:flex;align-items:center;justify-content:center;width:46px;height:46px;padding:0;border:1px solid rgba(255,255,255,.35);
  border-radius:var(--lwlb-btn-radius,8px);background:rgba(255,255,255,.12);color:#fff;font:400 30px/1 system-ui,sans-serif;cursor:pointer;transition:background-color .15s}
.lwlb-b:hover{background:rgba(255,255,255,.24)}
.lwlb-b:focus-visible{outline:3px solid var(--lwlb-focus,#fff);outline-offset:2px}
.lwlb-b[hidden]{display:none}
.lwlb-x{top:14px;right:16px;font-size:28px}
.lwlb-prev{left:12px;top:50%;margin-top:-23px}
.lwlb-next{right:12px;top:50%;margin-top:-23px}
@media (max-width:640px){.lwlb{padding:60px 10px 70px}.lwlb-prev,.lwlb-next{top:auto;bottom:14px;margin-top:0}.lwlb-prev{left:calc(50% - 56px)}.lwlb-next{right:calc(50% - 56px)}}
@media (prefers-reduced-motion:reduce){.lwlb-in{animation:none}.lwlb-img,.lwlb-b{transition:none}}

/* lwkit lightbox skin (2026-10-12): the shared lightbox.css above, in the theme's colours and fonts */
:root{--lwlb-bg:color-mix(in srgb,var(--ink) 94%,transparent);--lwlb-focus:var(--accent);--lwlb-radius:min(var(--radius),10px);--lwlb-font:var(--body-font),system-ui,sans-serif}

/* text selection (lwkit selection_css, 6.43:1, WCAG AA 4.5:1): a site's own ::selection after this wins */
::selection{background:#b8963f;color:#171614}

/* theme */
.hero{min-height:0} .hero .wrap{padding:90px 0 60px} .hero h1{font-size:clamp(34px,5vw,56px)} section{padding:72px 0} @media(max-width:820px){section{padding:52px 0}}
/* site */
/* the Trilogy and Lujan & Lee pair (2026-10-06): large readable type, high contrast, plain sections */
body{font-size:18px;line-height:1.65}
.lede{font-size:clamp(19px,1.7vw,21px);color:var(--ink)}
.prose p{font-size:18px;color:var(--ink);max-width:66ch} .prose p+p{margin-top:14px}
.prose a,.card .t a.tlink,.lede a{color:var(--accent-dark);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px}
.prose a:hover,.card .t a.tlink:hover{color:var(--accent)}
.kick{font-size:13px;letter-spacing:.18em}
.pills a{font-size:15px;padding:9px 16px}
.btn{font-size:17px;padding:14px 24px;min-height:52px;text-align:center}
.btn.sm{font-size:15px;padding:10px 18px;min-height:44px}
.hero.plain .note{font-size:16.5px;opacity:1;color:var(--muted);margin-top:20px}
.hero.split .wrap{padding:64px 0 60px} .hero.split .grid2{align-items:center} .hero.split h1{max-width:16ch}
.hero .pic img{width:100%;height:auto;border-radius:var(--radius)}
.hero .pic.slot img{border:1px solid var(--line)}
.sec-head .lede{margin-top:0}
.card .t{padding:22px 24px 26px} .card h3{margin-bottom:10px} .card p,.card li{font-size:17px;color:var(--ink)} .card p+p{margin-top:12px}
.card ul{margin:8px 0 0 1.2em} .card li{margin:5px 0;padding-left:2px}
.card .row{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.card .imgbox{background:var(--panel);border-bottom:1px solid var(--line)}
.cards.two{grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))}
/* on a phone the buttons in a card take the card's full width, so a long email address stays on one line */
@media(max-width:560px){.card .t{padding:20px 18px 22px} .card .row .btn{width:100%;padding:14px 10px;font-size:16px}
  section.band .ctr .row .btn{width:100%;padding:14px 10px;font-size:16px}}
.grid2 .pic img{width:100%;height:auto;border-radius:var(--radius);border:1px solid var(--line)}
.info b{font-size:20px} .info p{font-size:17px;color:var(--ink)}
.info p a:not(.maplink){color:var(--accent-dark);text-decoration:underline;text-underline-offset:3px}
.fact b{font-size:34px;line-height:1.15} .fact span{font-size:16px;opacity:1;display:block;margin-top:6px}
section.band .fact span{color:color-mix(in srgb,var(--paper) 90%,transparent)}
footer.site{font-size:16px} footer.site .credit{font-size:14px;opacity:.9}
footer.site p a,footer.site .fnav a{text-decoration:underline;text-underline-offset:3px}
footer.site h2.fh{color:var(--paper);font-family:var(--display-font),Georgia,serif;font-size:20px;line-height:1.2;margin-bottom:10px;letter-spacing:0}
footer.site .fnav{list-style:none} footer.site .fnav li{margin:0 0 8px}
footer.site .rel{margin-top:14px}
footer.site .fnav a{display:inline-block;padding:8px 0}
footer.site .fnav li{margin:0}
/* a hyphenated word never breaks at its hyphen ("community-" / "based") */
.nw{white-space:nowrap}
/* the facts band: two by two on a phone rather than four tall rows */
@media(max-width:620px){.facts{grid-template-columns:1fr 1fr;gap:18px 16px} .fact b{font-size:25px}}
/* contact: beside the map on a desktop, the details after the address sit two by two */
@media(min-width:901px){.lw-visit>.info~.info{grid-template-columns:1fr 1fr}}
/* the client's own logo is shown as it is, never in a box */
.grid2 .pic.brand img{border:0;border-radius:0}
#menu-panel a.small{font-size:16px} #menu-panel .sub{font-size:12.5px} #menu-panel .mh{font-size:15px}
.maplink.alt{font-size:13px}
/* the wordmark lockup in the header (set in the site's own type) */
.logo.lockup{gap:12px}
.lockup .mark{height:36px;width:auto;flex:none}
.lockup .wm{display:flex;flex-direction:column;line-height:1.05;min-width:0}
.lockup .w1{font-size:23px;letter-spacing:.01em}
.lockup .w2{font-family:var(--body-font),system-ui,sans-serif;font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-top:4px}
@media(max-width:560px){.lockup .mark{height:30px} .lockup .w1{font-size:20px} .lockup .w2{font-size:10px;letter-spacing:.12em}}
/* on the narrowest phones the header keeps the wordmark and the menu; the main button is always in the bar at the foot of the screen */
@media(max-width:400px){header.site .hdr-cta{display:none}}
/* accessibility pass (2026-10-22, from the accessScan report management asked for): a link or button reached by the keyboard
   always stops clear of the sticky header and, on a phone, of the bar at the foot of the screen (WCAG 2.4.11, technique C43).
   scroll-padding on the page replaces the kit's scroll-margin on sections, so a jump to a section lands where it did. */
html{scroll-padding-top:84px}
section[id]{scroll-margin-top:0}
@media(max-width:820px){html{scroll-padding-bottom:84px}}
/* words for screen readers only (the email links say they open the email app) */
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
/* the skip link stays in place and appears when the keyboard reaches it, rather than waiting above the top of the page */
.skip{top:8px}
.skip:not(:focus){width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* Lujan & Lee v2 (2026-10-17): the Bento grid. Black and gold from the logo, Gabarito (a sturdy workwear grotesque) over
   Nunito Sans; one idea per tile, tiles of different sizes, bold numbers and short labels. Cards and tiles at 10px, buttons
   and tabs at the soft-square 8px (Rav's rule). Accessibility first: every text pair measured at AA or better. */
:root{--tile-gap:14px;--r-tile:10px;--r-btn:8px;--gold:#b8963f}
body{background:var(--paper)}
h1,h2,h3{letter-spacing:-.015em}
h2{font-size:clamp(30px,3.6vw,46px)}
.bento{margin-top:0} .sec-head{margin-bottom:30px}
.kick{font-family:var(--body-font),system-ui,sans-serif;font-weight:700;color:var(--accent-dark)}

/* header: the wordmark in Gabarito; the tabs are small boxed tiles with a gold square, never round pills */
.lockup .w1{font-family:var(--display-font),system-ui,sans-serif;font-weight:800;letter-spacing:-.01em}
.lockup .amp{color:var(--accent)}
.pills{gap:6px}
.pills a{display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:0 14px;border-radius:var(--r-btn);border:1px solid var(--line);background:var(--panel);font-family:var(--body-font),system-ui,sans-serif;font-weight:700;font-size:15px;letter-spacing:.01em;color:var(--ink)}
.pills a::before{content:"";width:8px;height:8px;border-radius:2px;background:var(--gold);flex:none}
.pills a:hover{border-color:var(--ink);color:var(--ink);background:var(--paper)}
.pills a.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.tog{border-radius:var(--r-btn)}
#menu-panel a{border-radius:var(--r-btn);font-family:var(--display-font),system-ui,sans-serif;font-weight:700}
#menu-panel a.small{font-family:var(--body-font),system-ui,sans-serif}
#menu-panel .menu-x{border-radius:var(--r-btn)}
#stickybar a{border-radius:var(--r-btn);font-family:var(--display-font),system-ui,sans-serif}

/* buttons: gold with black words (6.4:1), black with gold words, or an outline */
.btn{border-radius:var(--r-btn);font-family:var(--display-font),system-ui,sans-serif;font-weight:700;letter-spacing:.01em}
.btn.solid,#stickybar .sb-main,#menu-panel a.small.go{background:var(--gold);color:var(--ink);border:1px solid var(--gold)}
.btn.solid:hover,#stickybar .sb-main:hover,#menu-panel a.small.go:hover{background:#d8b768;border-color:#d8b768;color:var(--ink)}
.btn.dark{background:var(--ink);color:#e9dcb6;border:1px solid var(--ink)} .btn.dark:hover{background:#2c2925}
.btn.ghost{border:2px solid var(--ink);color:var(--ink)} .btn.ghost:hover{background:var(--ink);color:var(--paper)}
#stickybar .sb-call{border-color:var(--ink);color:var(--ink)}

/* the grid itself */
.bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--tile-gap)}
.tile{position:relative;border-radius:var(--r-tile);background:var(--panel);border:1px solid var(--line);padding:28px;overflow:hidden;min-width:0;margin:0}
.tile.ink{background:var(--ink);color:#f3efe6;border-color:var(--ink)}
.tile.ink .kick{color:#d8b768}
.tile.gold{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.tile.gold .kick{color:var(--ink)}
figure.tile{padding:0;background:var(--line);min-height:220px}
/* the picture fills its tile; the grid, not the photo's own shape, sets the tile's size */
figure.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;border-radius:0}
figure.tile figcaption{position:absolute;left:12px;bottom:12px;max-width:calc(100% - 24px);background:var(--ink);color:#f3efe6;font-size:15px;line-height:1.4;padding:8px 12px;border-radius:6px}
.tile.lwlb-card{cursor:zoom-in}
figure.tile:hover img{transform:scale(1.02)} figure.tile img{transition:transform .5s ease}
@media(prefers-reduced-motion:reduce){figure.tile:hover img{transform:none}}

/* the hero: the logo, the raking photo (Megan 10/16: on top), the headline on black with the gold leaves, three small facts */
.hero.bento-hero .wrap{padding:22px 0 8px}
.b-hero .t-logo{grid-column:1/6;grid-row:1;display:grid;place-items:center;padding:22px 26px;background:#fffdf8}
.b-hero .t-logo img{width:100%;max-width:440px;height:auto}
.b-hero .t-photo{grid-column:6/13;grid-row:1/3;min-height:560px}
.b-hero .t-photo img{object-position:50% 45%}
.b-hero .t-head{grid-column:1/6;grid-row:2;padding:66px 30px 70px}
.b-hero .t-head .t-in{position:relative;z-index:1}
.b-hero h1{font-size:clamp(34px,3.3vw,46px);max-width:none;color:#fff;line-height:1.08}
.hero.plain .b-hero .t-head .lede{color:#e9e3d6;font-size:18px;margin-top:16px}
.b-hero .row{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.b-hero .t-head .btn.ghost{border-color:#f3efe6;color:#f3efe6} .b-hero .t-head .btn.ghost:hover{background:#f3efe6;color:var(--ink)}
.b-hero .t-mini{grid-row:3;display:flex;flex-direction:column;justify-content:center;gap:4px;padding:20px 22px}
.b-hero .m1{grid-column:1/5} .b-hero .m2{grid-column:5/9} .b-hero .m3{grid-column:9/13}
.t-mini b{font-family:var(--display-font),system-ui,sans-serif;font-size:24px;line-height:1.1;font-weight:800}
.t-mini span{font-size:16px;color:var(--muted)} .t-mini.gold span{color:var(--ink)}
/* the leaves live in the black tile's top and bottom bands, clear of every word */
.hero{--dc:var(--gold)}
.t-head .drift{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;color:var(--dc)}
.drift .tr{position:absolute;left:calc(var(--s)*-1);top:var(--y);width:calc(100% + var(--s));height:var(--s);opacity:var(--a);animation:drift-x var(--t) linear var(--o) infinite paused}
.drift svg{display:block;width:var(--s);height:var(--s);overflow:visible;animation:drift-leaf var(--f) ease-in-out var(--o) infinite alternate paused}
.drift.on .tr,.drift.on svg{animation-play-state:running}
@keyframes drift-x{from{transform:translate3d(0,0,0)}to{transform:translate3d(100%,0,0)}}
@keyframes drift-leaf{0%{transform:translate3d(0,-7px,0) rotate(-22deg)}100%{transform:translate3d(0,7px,0) rotate(16deg)}}
@media(prefers-reduced-motion:reduce){.drift .tr{transform:translate3d(var(--r),0,0)}}
.drift .ln{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.drift .lf{fill:currentColor;fill-opacity:.12;stroke:currentColor;stroke-width:1.5;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.drift .tr:nth-child(1){--s:30px;--y:14px;--t:60s;--o:-14s;--f:7s;--a:.85;--r:18%}
.drift .tr:nth-child(2){--s:24px;--y:24px;--t:52s;--o:-36s;--f:6s;--a:.7;--r:66%}
.drift .tr:nth-child(3){--s:28px;--y:calc(100% - 46px);--t:58s;--o:-44s;--f:8s;--a:.8;--r:44%}
.drift .tr:nth-child(4){--s:22px;--y:calc(100% - 38px);--t:48s;--o:-12s;--f:6.5s;--a:.7;--r:12%}
.drift-toggle{position:absolute;z-index:2;right:12px;bottom:12px;width:44px;height:44px;display:grid;place-items:center;padding:0;border-radius:var(--r-btn);border:1px solid #8a8170;background:var(--ink);color:#f3efe6;cursor:pointer;-webkit-appearance:none;appearance:none;transition:border-color .2s,color .2s}
.drift-toggle:hover{border-color:#d8b768;color:#d8b768}
.drift-toggle:focus-visible{outline:3px solid #d8b768;outline-offset:2px}
.drift-toggle[hidden]{display:none}
.drift-toggle svg{width:14px;height:14px;display:block}
.drift-toggle .i-play,.drift-toggle[data-state=paused] .i-pause{display:none}
.drift-toggle[data-state=paused] .i-play{display:inline}
.drift-toggle .vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.tile.ink a:focus-visible,.tile.ink .btn:focus-visible{outline-color:#d8b768}

/* about: the flower garden big (Megan's favourite), the year, the words */
#about{padding-top:64px}
.b-about .t-garden{grid-column:1/9;grid-row:1/3;min-height:520px}
.b-about .t-year{grid-column:9/13;grid-row:1;display:flex;flex-direction:column;justify-content:flex-end;gap:10px}
.num{font-family:var(--display-font),system-ui,sans-serif;font-weight:800;font-size:clamp(56px,6vw,84px);line-height:.9;color:#d8b768;letter-spacing:-.03em}
.t-year span{font-size:17px;color:#e9e3d6}
.b-about .t-about{grid-column:9/13;grid-row:2}
.t-about p{font-size:18px;color:var(--ink)} .t-about p+p{margin-top:12px}
.t-about a{color:var(--accent-dark);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px}

/* services: the duties, the crew at work, the county, the choice, and piecework as the extra tile at the bottom */
section.alt{background:#ebe5d8;border-color:var(--line)}
.b-serv .t-list{grid-column:1/6;grid-row:1/3;display:flex;flex-direction:column;justify-content:space-between;gap:24px}
.t-list h3{font-size:30px;color:#fff}
.duties{list-style:none;counter-reset:d;display:grid;gap:4px}
.duties li{counter-increment:d;display:flex;align-items:baseline;gap:14px;font-size:21px;font-weight:600;padding:12px 0;border-top:1px solid #3a362f;color:#f3efe6}
.duties li::before{content:counter(d,decimal-leading-zero);font-family:var(--display-font),system-ui,sans-serif;font-weight:800;font-size:18px;color:#d8b768;min-width:2ch}
.b-serv .t-p1{grid-column:6/9;grid-row:1/3;min-height:460px}
.b-serv .t-p2{grid-column:9/13;grid-row:1;min-height:220px}
.b-serv .t-county{grid-column:9/13;grid-row:2;display:flex;flex-direction:column;justify-content:center;gap:6px}
.t-county b{font-family:var(--display-font),system-ui,sans-serif;font-size:26px;line-height:1.1;font-weight:800}
.t-county span{font-size:17px}
.b-serv .t-choose{grid-column:1/5;grid-row:3;display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.t-choose h3{font-size:26px} .t-choose p{font-size:17.5px;color:var(--ink)} .t-choose .btn{margin-top:6px}
.b-serv .t-p3{grid-column:5/9;grid-row:3;min-height:280px}
.b-serv .t-p4{grid-column:9/13;grid-row:3;min-height:280px}
.b-serv .t-piece{grid-column:1/13;grid-row:4;display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:18px 28px;align-items:center;border:2px solid var(--ink);background:var(--paper)}
.pw-head .kick{display:block;margin-bottom:8px} .pw-head h3{font-size:28px}
.pw{list-style:none;display:flex;flex-wrap:wrap;gap:10px}
.pw li{font-size:17px;font-weight:600;padding:10px 14px;border-radius:var(--r-btn);background:var(--panel);border:1px solid var(--line)}

/* the estimate: one big gold tile */
#estimate{padding:64px 0}
.t-cta{padding:52px 48px;display:grid;justify-items:start}
.t-cta h2{color:var(--ink)} .t-cta .lede{color:var(--ink);max-width:56ch;margin-top:14px;font-size:19px}
.t-cta .row{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.t-cta .btn.ghost:hover{background:var(--ink);color:#e9dcb6}

/* contact: the kit's details as tiles beside the map */
#contact .info>div{border-radius:var(--r-tile);background:var(--panel)}
#contact .info b{font-family:var(--display-font),system-ui,sans-serif;font-weight:800}
.lw-map-box{border-radius:var(--r-tile)}
footer.site .tag{color:#d8b768}

/* tablet: two columns of tiles */
@media(max-width:980px){
  .b-hero .t-logo{grid-column:1/13;grid-row:auto}
  .b-hero .t-photo{grid-column:1/13;grid-row:auto;min-height:0;aspect-ratio:4/3}
  .b-hero .t-head{grid-column:1/13;grid-row:auto}
  .b-hero .t-mini{grid-row:auto}
  .b-hero .m1{grid-column:1/7} .b-hero .m2{grid-column:7/13} .b-hero .m3{grid-column:1/13}
  .b-about .t-garden{grid-column:1/13;grid-row:auto;min-height:0;aspect-ratio:4/3}
  .b-about .t-year,.b-about .t-about{grid-column:span 6;grid-row:auto}
  .b-serv .t-list{grid-column:1/8;grid-row:auto} .b-serv .t-p1{grid-column:8/13;grid-row:auto;min-height:0}
  .b-serv .t-p2{grid-column:1/8;grid-row:auto;min-height:240px} .b-serv .t-county{grid-column:8/13;grid-row:auto}
  .b-serv .t-choose{grid-column:1/13;grid-row:auto} .b-serv .t-p3,.b-serv .t-p4{grid-column:span 6;grid-row:auto;min-height:260px}
  .b-serv .t-piece{grid-row:auto;grid-template-columns:1fr}
}
/* phone: one column; the logo, then the raking photo, then the headline */
@media(max-width:620px){
  :root{--tile-gap:10px}
  .tile{padding:22px 20px}
  .hero.bento-hero .wrap{padding:14px 0 4px}
  .b-hero .t-logo{padding:16px 18px} .b-hero .t-logo img{max-width:320px}
  .b-hero .t-head{padding:54px 20px 64px}
  .b-hero h1{font-size:34px}
  .b-hero .row .btn{width:100%}
  .b-hero .m1,.b-hero .m2,.b-hero .m3{grid-column:1/13}
  .b-about .t-year,.b-about .t-about,.b-serv .t-list,.b-serv .t-p1,.b-serv .t-p2,.b-serv .t-county,.b-serv .t-p3,.b-serv .t-p4{grid-column:1/13}
  .b-serv .t-p1,.b-serv .t-p4{aspect-ratio:3/4;min-height:0} .b-serv .t-p2,.b-serv .t-p3{aspect-ratio:4/3;min-height:0}
  .b-hero .t-photo{aspect-ratio:1/1} .b-hero .t-photo img{object-position:50% 12%}
  .duties li{font-size:19px}
  .t-cta{padding:32px 22px} .t-cta .row .btn{width:100%}
  figure.tile figcaption{font-size:14px}
}
/* text selection: the logo's gold with black words, 6.4:1 (Andre 2026-10-14; tools/selection_color.py) */
::selection{background:#b8963f;color:#171614}
.tile.gold ::selection,.tile.gold::selection{background:#171614;color:#e9dcb6}
/* focus rings that stay visible on every tile and on the black footer (non-text contrast, WCAG 1.4.11) */
.tile.gold :focus-visible{outline-color:var(--ink)} footer.site :focus-visible{outline-color:#d8b768}

/* ===== the interactives (2026-10-18, Andre: "personalized cursor icons and some interactives pertaining to the site and
   services they offer, make each interactive different"): the hero leaves, the leaf pointer, Rake the yard, Build your
   estimate and the Piecework line. All black and gold, cards at 8 to 10px, buttons at 8px, 44px targets, every motion
   static for reduced motion, and each one shows its plain content when scripts are off. ===== */
.ll-vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.rk-kick[hidden],.rk-hint[hidden],.rk-ctrl[hidden],.est[hidden],.pw-hint[hidden],.pw-line[hidden]{display:none!important}
/* the leaf drawings (symbols written by the script): gold body, darker gold edge and veins */
.llb{fill:currentColor;stroke:var(--lf-edge,#5e470e);stroke-width:1.4;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.llv{fill:none;stroke:var(--lf-vein,#5e470e);stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;opacity:.85}

/* 1. the hero leaves: background only. One layer behind every hero tile (it shows in the page margins), one inside the
   black tile under its words; leaves fade out before they reach any tile, words or button, and never take a click */
.leaf-field{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
/* every hero tile is drawn above the leaves, so a picture always covers them (the leaves also fade before reaching one) */
.hero.lv-on .b-hero>.tile{z-index:1}
.leaf-field .lv{position:absolute;left:0;top:0;opacity:0;will-change:transform,opacity}
.leaf-field .lv{filter:drop-shadow(0 1.5px 1.5px rgba(23,22,20,.38))}
.leaf-field .lv,.rk-leaf{background:center/100% 100% no-repeat}
.leaf-field svg,.rk-leaf svg,.ll-cur svg{display:block;width:100%;height:100%;overflow:visible}
.hero.lv-on .t-head .drift{display:none}

/* 2. the leaf pointer: a small gold leaf that trails the pointer and tilts as it moves, a rake over anything clickable;
   desktop mice only, never for touch or reduced motion, and the system cursor stays as it is */
.ll-cur{position:fixed;left:0;top:0;width:0;height:0;pointer-events:none;z-index:2147483600;opacity:0;transition:opacity .2s;--tilt:0deg}
.ll-cur.on{opacity:1}
.ll-cur svg{position:absolute;transition:opacity .16s,transform .16s}
.ll-cur .c-leaf{left:-2px;top:-22px;width:24px;height:24px;transform-origin:2px 22px;transform:rotate(calc(90deg + var(--tilt)));--lf-edge:#171614;--lf-vein:#171614;color:#b8963f}
.ll-cur .c-rake{left:-2px;top:-2px;width:28px;height:28px;transform-origin:7px 7px;transform:rotate(calc(var(--tilt) * .5)) scale(.6);opacity:0}
.ll-cur.rake .c-leaf{opacity:0;transform:rotate(calc(90deg + var(--tilt))) scale(.6)}
.ll-cur.rake .c-rake{opacity:1;transform:rotate(calc(var(--tilt) * .5))}
@media (hover:none),(pointer:coarse),(prefers-reduced-motion:reduce){.ll-cur{display:none}}

/* 3a. Rake the yard: the black services tile becomes a lawn under fallen leaves; dragging across it (or the button) rakes
   them into a pile in the corner and shows the duties and the estimate link. With no script it is the plain list. */
.b-serv .t-list.rk-on{justify-content:flex-start;gap:16px}
.rk-head .kick{display:block;margin-bottom:8px}
.rk-hint{font-size:16.5px;line-height:1.5;color:#e9e3d6;margin-top:10px}
.rk-lawn{position:relative;overflow:hidden;border-radius:8px;border:1px solid #3a362f;padding:4px 16px 14px;
  background:#1f1d19 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='44' viewBox='0 0 56 44'%3E%3Cg fill='none' stroke='%2333301f' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M4 42c1-5 0-9-2-12M11 43c0-6 2-10 5-12M19 42c-1-4-3-7-6-9M28 43c1-6 3-9 6-11M36 42c0-5-1-8-3-11M44 43c1-4 3-7 6-8M24 21c1-4 0-7-2-9M40 19c-1-3-3-5-5-6M9 17c1-3 3-5 5-6M51 15c0-3-1-5-3-7'/%3E%3C/g%3E%3C/svg%3E") repeat}
.rk-lawn .duties li:first-child{border-top:0}
.rk-on .rk-lawn{touch-action:pan-y;-webkit-user-select:none;user-select:none;cursor:grab}
.rk-on .rk-lawn.drag{cursor:grabbing}
.rk-leaves{position:absolute;inset:0;pointer-events:none;z-index:2;--lf-edge:#5e470e;--lf-vein:#4a380b}
.rk-leaf{position:absolute;left:0;top:0;transition:transform .6s cubic-bezier(.2,.75,.25,1)}
.rk-foot{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px;margin-top:12px}
.rk-cta{position:relative;z-index:3;white-space:nowrap}
.rk-bed{display:none}
.rk-on .rk-bed{display:block;flex:0 0 132px;height:76px;margin-left:auto}
.rk-on .rk-cta{visibility:hidden;opacity:0;transition:opacity .4s,visibility 0s .4s}
.rk-on.rk-done .rk-cta{visibility:visible;opacity:1;transition:opacity .4s}
.rk-ctrl{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px}
.t-list .rk-btn{background:transparent;color:#f3efe6;border:1px solid #8a8170}
.t-list .rk-btn:hover{border-color:#d8b768;color:#d8b768;background:#24221e}
.t-list .rk-btn:focus-visible,.t-list .rk-cta:focus-visible{outline:3px solid #d8b768;outline-offset:2px}

/* 3b. Build your estimate: the duties, how often and the property as tick boxes; the request is written out live and
   goes into an email to the business (the same address as the Email button) or onto the clipboard. No form, no server. */
.t-cta .cta-main{display:grid;justify-items:start;align-content:start}
.t-cta.est-on{grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:44px;row-gap:28px;align-items:start;justify-items:stretch}
.est{background:var(--ink);color:#f3efe6;border-radius:8px;padding:26px 26px 22px;display:grid;gap:20px;min-width:0}
.est-top h3{font-size:24px;color:#fff;line-height:1.15}
.est-top p{font-size:16.5px;line-height:1.5;color:#e9e3d6;margin-top:8px}
.est fieldset{border:0;margin:0;padding:0;min-width:0}
.est legend,.est-ml{display:block;padding:0;margin-bottom:10px;font-family:var(--body-font),system-ui,sans-serif;font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#d8b768}
.est-opts{display:flex;flex-wrap:wrap;gap:8px}
.est-o{position:relative;display:inline-flex;min-width:0}
/* the tick boxes are the real checkboxes and radio buttons, drawn in the site's style (2026-10-22: no invisible control
   for a screen reader to find); the whole pill is the label, so a tap anywhere on it ticks the box */
.est-o input{-webkit-appearance:none;appearance:none;position:absolute;left:15px;top:50%;width:16px;height:16px;margin:-8px 0 0;box-sizing:border-box;border:2px solid #d8b768;border-radius:3px;background:transparent center/11px no-repeat;cursor:pointer;z-index:1}
.est-o span{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:8px 14px 8px 40px;cursor:pointer;border-radius:var(--r-btn);border:1px solid #8a8170;font-size:16px;font-weight:600;line-height:1.25;color:#f3efe6;transition:background-color .15s,border-color .15s,color .15s}
.est-o:hover span{border-color:#d8b768}
.est-o input:checked+span{background:#b8963f;border-color:#b8963f;color:#171614}
.est-o input[type=checkbox]:checked{border-color:#171614;background-color:#171614;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.5 5 9.2 10 3' fill='none' stroke='%23d8b768' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.est-o input[type=radio]:checked{border-color:#171614;background:#171614;box-shadow:inset 0 0 0 3px #b8963f}
.tile.gold .est :focus-visible{outline:3px solid #d8b768;outline-offset:2px}
.tile.gold .est-o input:focus-visible+span{outline:3px solid #d8b768;outline-offset:2px}
.est textarea{display:block;width:100%;min-height:236px;resize:none;overflow:hidden;font:inherit;font-size:16px;line-height:1.5;color:#f3efe6;background:#24221e;border:1px solid #8a8170;border-radius:6px;padding:12px 14px}
.est-act{display:flex;flex-wrap:wrap;gap:10px}
.t-cta .est .est-copy{background:transparent;border:2px solid #f3efe6;color:#f3efe6}
.t-cta .est .est-copy:hover{background:#f3efe6;color:var(--ink)}
.est-note{font-size:15px;line-height:1.5;color:#cfc8b8}
.est-status{font-size:15.5px;font-weight:700;color:#d8b768;align-self:center}

/* 3c. the Piecework line: a small conveyor; each tap folds the box, slides the flyer into the envelope, seals it, then
   packs it, checks it and sorts it onto the stack, lighting up the matching service */
.b-serv .t-piece.pw-on{grid-template-columns:minmax(0,4fr) minmax(0,8fr);align-items:start;row-gap:14px}
.t-piece.pw-on .pw-head{grid-column:1;grid-row:1}
.t-piece.pw-on .pw-hint{grid-column:1;grid-row:2}
.t-piece.pw-on .pw{grid-column:1;grid-row:3}
.t-piece.pw-on .pw-line{grid-column:2;grid-row:1/5}
.pw-hint{font-size:16.5px;line-height:1.5;color:var(--ink)}
.pw li{transition:background-color .2s,color .2s,border-color .2s}
.pw li.on{background:var(--ink);color:#e9dcb6;border-color:var(--ink)}
.pw-line{display:grid;gap:12px;min-width:0}
.pw-stage{border-radius:8px;border:1px solid var(--line);background:var(--panel);padding:8px 8px 0;cursor:pointer;-webkit-tap-highlight-color:transparent}
.pw-scene{display:block;width:100%;height:auto}
.pw-ctrl{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px}
.pw-count{font-size:16px;font-weight:700;color:var(--ink)}
.pw-scene .pw-card{fill:#d8b768;stroke:#171614;stroke-width:1.5;vector-effect:non-scaling-stroke}
.pw-scene .pw-face{fill:#e9dcb6;stroke:#171614;stroke-width:1.5;vector-effect:non-scaling-stroke}
.pw-scene .pw-bel{fill:#171614}
.pw-scene .pw-dash{stroke:#6b6355;stroke-width:3;stroke-dasharray:10 14}
.pw-scene .pw-roll{fill:#b8963f;stroke:#171614;stroke-width:1.5;vector-effect:non-scaling-stroke}
.pw-scene .pw-leg{stroke:#171614;stroke-width:6;stroke-linecap:round}
.pw-scene .pw-envb{fill:#fffdf8;stroke:#171614;stroke-width:1.5;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.pw-scene .pw-flap{fill:#e9dcb6;stroke:#171614;stroke-width:1.5;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.pw-scene .pw-paper{fill:#fff;stroke:#171614;stroke-width:1.5;vector-effect:non-scaling-stroke}
.pw-scene .pw-text{fill:none;stroke:#b8963f;stroke-width:3;stroke-linecap:round}
.pw-scene .pw-seal{fill:#b8963f;stroke:#171614;stroke-width:1.5;vector-effect:non-scaling-stroke}
.pw-scene .pw-chk-o{fill:none;stroke:#171614;stroke-width:10;stroke-linecap:round;stroke-linejoin:round}
.pw-scene .pw-chk-i{fill:none;stroke:#d8b768;stroke-width:5;stroke-linecap:round;stroke-linejoin:round}

@media(max-width:980px){
  .t-cta.est-on{grid-template-columns:1fr}
  .b-serv .t-piece.pw-on{grid-template-columns:1fr}
  .t-piece.pw-on .pw-head,.t-piece.pw-on .pw-hint,.t-piece.pw-on .pw,.t-piece.pw-on .pw-line{grid-column:1;grid-row:auto}
  .t-piece.pw-on .pw-line{order:3} .t-piece.pw-on .pw{order:4}
}
@media(min-width:981px){.t-cta.est-on{overflow:visible} .t-cta.est-on .cta-main{position:sticky;top:104px}}
@media(max-width:620px){
  .est{padding:22px 16px 18px}
  .est-act .btn{width:100%}
  .rk-lawn{padding:2px 12px 12px}
  .rk-on .rk-bed{flex-basis:120px}
  .pw-ctrl .btn{width:100%}
  .pw{gap:8px} .pw li{font-size:16px;padding:9px 12px}
}