/* shared.css */
/* Shared components for all three directions. Each direction sets the tokens. */
@font-face{font-family:"Sohne";src:url(fonts/Sohne-Leicht.woff2) format("woff2");font-weight:300;font-display:swap}
@font-face{font-family:"Sohne";src:url(fonts/Sohne-Buch.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Sohne";src:url(fonts/Sohne-Kraftig.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Sohne";src:url(fonts/Sohne-Halbfett.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Oswald";src:url(fonts/Oswald-latin.woff2) format("woff2");font-weight:200 700;font-display:swap}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--f);font-weight:400;font-size:17px;line-height:1.55;overflow-x:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--focus,var(--ink));outline-offset:3px}
.wrap{max-width:var(--wrap,1360px);margin:0 auto;padding:0 var(--gut)}
:root{--gut:clamp(16px,3.6vw,48px);--ease:cubic-bezier(.16,1,.3,1);--ease-io:cubic-bezier(.65,0,.35,1)}
.skip{position:absolute;left:-9999px;top:8px;z-index:200;background:var(--ink);color:var(--bg);padding:10px 16px}
.skip:focus{left:8px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;height:54px;padding:0 26px;border-radius:var(--btn-r,999px);font-weight:500;font-size:16px;letter-spacing:-.01em;white-space:nowrap;transition:background .45s var(--ease),color .45s var(--ease),border-color .45s var(--ease),transform .45s var(--ease)}
.btn svg{width:15px;height:15px;transition:transform .6s var(--ease)}
.btn:hover svg{transform:translateX(3px)}
.btn-ink{background:var(--ink);color:var(--on-ink)}
.btn-ink:hover{background:var(--ink-h)}
.btn-acc{background:var(--accent);color:var(--on-accent)}
.btn-acc:hover{background:var(--accent-h)}
.btn-ghost{border:1px solid var(--rule-2);color:var(--ink)}
.btn-ghost:hover{border-color:var(--ink)}

/* header + mobile nav */
.hdr{position:sticky;top:0;z-index:50;background:var(--hdr-bg);backdrop-filter:saturate(1.4) blur(12px);-webkit-backdrop-filter:saturate(1.4) blur(12px);transition:box-shadow .3s}
.hdr.scrolled{box-shadow:0 1px 0 var(--rule)}
.hdr::after{content:"";position:absolute;left:0;bottom:-1px;height:1.5px;width:var(--sp,0);background:var(--ink);opacity:.5}
.hdr-in{display:flex;align-items:center;height:var(--hdr-h,84px);gap:28px}
.nav{display:flex;gap:2px;margin-left:auto}
.nav>a,.nav>button{color:var(--mute);padding:10px 13px;border-radius:999px;display:inline-flex;align-items:center;gap:7px;font-weight:500;font-size:15.5px;transition:color .2s,background .2s}
.nav>a:hover,.nav>button:hover,.nav>button[aria-expanded="true"]{color:var(--ink)}
.nav>button[aria-expanded="true"]{background:var(--bg-2)}
.nav .chev{width:10px;height:6px;transition:transform .25s var(--ease)}
.nav>button[aria-expanded="true"] .chev{transform:rotate(180deg)}
.hdr-r{display:flex;align-items:center;gap:20px}
.hdr-ph{font-size:15.5px;font-weight:500;white-space:nowrap}
.hdr .btn{height:46px;padding:0 20px;font-size:15px}
.burger{display:none;margin-left:auto;width:46px;height:46px;border-radius:50%;border:1px solid var(--rule-2);position:relative;flex:none}
.burger i{position:absolute;left:14px;right:14px;height:1.5px;background:var(--ink);transition:transform .3s,top .3s}
.burger i:first-child{top:18px}.burger i:last-child{top:26px}
.menu-open .burger i:first-child{top:22px;transform:rotate(45deg)}
.menu-open .burger i:last-child{top:22px;transform:rotate(-45deg)}
.mnav{position:fixed;inset:var(--hdr-h,84px) 0 0;z-index:49;background:var(--bg);padding:16px var(--gut) 40px;display:flex;flex-direction:column;opacity:0;pointer-events:none;transition:opacity .25s;overflow-y:auto}
.menu-open .mnav{opacity:1;pointer-events:auto}
.menu-open{overflow:hidden}
.mnav a.l{font-family:var(--fd);font-size:30px;font-weight:var(--fd-w,600);letter-spacing:var(--fd-ls,-.03em);padding:12px 0;border-bottom:1px solid var(--rule)}
.mnav .btn{margin-top:14px}
.mnav .btn:first-of-type{margin-top:28px}

/* brand mark */
.mark{display:block;flex:none}
.logo{display:flex;align-items:center;gap:12px;flex:none;color:var(--ink)}
.logo .mark{width:40px;height:40px}

/* mega menu */
.mm{position:absolute;left:0;right:0;top:100%;background:var(--bg);border-top:1px solid var(--rule);box-shadow:0 50px 70px -40px rgba(10,16,12,.35);opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .2s,transform .3s var(--ease),visibility 0s linear .3s}
.mm.open{opacity:1;visibility:visible;transform:none;transition:opacity .2s,transform .3s var(--ease)}
.mm-in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,3.6fr) minmax(0,3.2fr);gap:20px;padding-top:26px;padding-bottom:30px}
.mm-label{font-size:15px;font-weight:600;color:var(--ink);margin:0 0 10px 14px}
.mm-list{display:grid;gap:2px}
.mm-list.c2{grid-template-columns:1fr 1fr}
.mm-list a{display:grid;grid-template-columns:30px 1fr;gap:6px;padding:11px 14px;border-radius:var(--r,0);transition:background .15s}
.mm-list.c2 a{grid-template-columns:1fr}
.mm-list a:hover,.mm-list a.on{background:var(--card)}
.mm-n{font-size:12.5px;color:var(--mute);padding-top:3px;font-variant-numeric:tabular-nums}
/* services menu: two columns of grouped rows, each led by RK's own drawing */
.mm-grp{grid-template-columns:1fr 1fr;gap:0 6px;align-items:start}
.mm-col{display:grid;gap:2px;align-content:start}
.mm-g{font-size:12.5px;color:var(--mute);margin:14px 14px 2px}
.mm-col>.mm-g:first-child{margin-top:0}
.mm-grp a{grid-template-columns:34px 1fr;gap:10px;align-items:start}
.mm-ic svg{display:block;width:34px;height:34px;color:var(--ink);transition:transform .5s var(--ease)}
.mm-grp a:hover .mm-ic svg,.mm-grp a.on .mm-ic svg{transform:translateY(-1px) scale(1.04)}
.mm-list b{display:block;font-weight:500;font-size:16.5px;letter-spacing:-.01em}
.mm-list small{display:block;font-size:13.5px;color:var(--mute);margin-top:1px}
.mm-all{display:inline-flex;align-items:center;gap:8px;margin:12px 0 0 14px;font-size:14.5px;font-weight:500;color:var(--mute)}
.mm-all:hover{color:var(--ink)}
.mm-all svg{width:13px;height:13px}
.mm-prev{position:relative;overflow:hidden;background:var(--bg-2);min-height:380px;margin:0;border-radius:var(--r,0)}
.mm-prev img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.04);transition:opacity .45s,transform 1.2s var(--ease)}
.mm-prev img.on{opacity:1;transform:none}
.mm-prev::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(8,12,9,.8))}
.mm-prev figcaption{position:absolute;left:18px;bottom:16px;z-index:1;color:#fff;font-weight:500;font-size:20px;letter-spacing:-.02em}
.mm-mapbox{background:var(--bg-2);display:flex;align-items:center;justify-content:center;padding:10px;border-radius:var(--r,0)}
.mm-mapbox .map{width:100%;max-width:320px}
.mm-cta{background:var(--dark);color:#fff;padding:26px;display:flex;flex-direction:column;border-radius:var(--r,0)}
.mm-cta h3{font-family:var(--fd);font-weight:var(--fd-w,600);font-size:26px;letter-spacing:var(--fd-ls,-.025em);line-height:1.1}
.mm-cta ul{list-style:none;display:grid;gap:10px;margin:20px 0 26px;font-size:15px;color:rgba(255,255,255,.84)}
.mm-cta li{display:flex;align-items:baseline;gap:10px}
.mm-cta li::before{content:"";width:9px;height:5px;flex:none;border-left:1.6px solid var(--accent-l);border-bottom:1.6px solid var(--accent-l);transform:translateY(-3px) rotate(-45deg)}
.mm-cta .btn{margin-top:auto;width:100%;height:50px}
.mm-cta .or{text-align:center;font-size:13.5px;color:rgba(255,255,255,.72);margin-top:12px}
.mm-cta .or a{color:#fff;text-decoration:underline;text-underline-offset:3px}

/* map */
.map svg{display:block;width:100%;height:auto;overflow:visible}
.map .m-road{fill:none;stroke:var(--map-road);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.map .m-road.loop{stroke-dasharray:3 4}
.map .m-rl{font:500 9.5px var(--f);fill:var(--map-mute);letter-spacing:.04em}
.map .t circle{fill:var(--map-dot)}
.map .t text{font:400 11px var(--f);fill:var(--map-mute)}
.map .t.hub text{font:500 12.5px var(--f);fill:var(--map-ink)}
.map .base rect{fill:var(--accent-l);stroke:var(--map-ink);stroke-width:1.2}
.map .base text{font-weight:600}
.map .pulse{fill:none;stroke:var(--accent-l);stroke-width:2;transform-box:fill-box;transform-origin:center;animation:pulse 2.6s var(--ease) infinite}
@keyframes pulse{from{opacity:.9;transform:scale(.4)}to{opacity:0;transform:scale(2.4)}}

/* before / after */
.slider{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--bg-2);cursor:ew-resize;user-select:none;touch-action:pan-y;border-radius:var(--r,0)}
.slider img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.slider .before{clip-path:inset(0 calc(100% - var(--x)) 0 0)}
.slider .lab{position:absolute;top:16px;font-size:13px;font-weight:500;background:rgba(255,255,255,.94);color:#151a16;padding:6px 11px;border-radius:999px}
.slider .lab.l{left:16px}.slider .lab.r{right:16px;background:#151a16;color:#fff}
.slider .handle{position:absolute;top:0;bottom:0;left:var(--x);width:2px;margin-left:-1px;background:#fff}
.slider .knob{position:absolute;top:50%;left:50%;width:54px;height:54px;margin:-27px 0 0 -27px;border-radius:50%;background:#fff;color:#151a16;display:grid;place-items:center;box-shadow:0 10px 30px -8px rgba(0,0,0,.45);transition:transform .6s var(--ease),box-shadow .6s var(--ease)}
.slider:hover .knob{transform:scale(1.05);box-shadow:0 14px 36px -8px rgba(0,0,0,.5)}
.slider.glide .before{transition:clip-path 1.1s var(--ease)}
.slider.glide .handle{transition:left 1.1s var(--ease)}
.slider .knob svg{width:20px;height:20px}
.slider .hint{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);font-size:13px;font-weight:500;color:#fff;background:rgba(10,14,11,.72);padding:7px 12px;border-radius:999px;transition:opacity .9s var(--ease);pointer-events:none;white-space:nowrap}
.slider.used .hint{opacity:0}

/* booking flow */
body.bk-lock{overflow:hidden}
.bk{position:fixed;inset:0;z-index:100;display:grid;grid-template-columns:5fr 7fr;background:var(--bg);color:var(--ink);opacity:0;visibility:hidden;transition:opacity .35s var(--ease),visibility 0s linear .35s}
.bk.open{opacity:1;visibility:visible;transition:opacity .35s var(--ease)}
.bk-media{position:relative;overflow:hidden;background:var(--dark)}
.bk-media .ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.05);transition:opacity .8s var(--ease),transform 2s var(--ease)}
.bk-media .ph.on{opacity:1;transform:none}
.bk-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,12,9,.55),rgba(8,12,9,0) 22%,rgba(8,12,9,0) 48%,rgba(8,12,9,.88));pointer-events:none}
.bk-logo{position:absolute;left:32px;top:26px;z-index:2;display:flex;align-items:center;gap:12px;color:#fff;font-size:15px;font-weight:500;line-height:1.2}
.bk-logo .mark{width:52px;height:auto}
.bk-logo p span{display:block;color:rgba(255,255,255,.78);font-weight:400;font-size:13px}  /* the old text lockup; the wordmark lockup styles itself */
.bk-cap{position:absolute;left:32px;right:32px;bottom:32px;z-index:2;color:#fff;transition:opacity .4s}
.bk-cap p{font-size:clamp(20px,1.7vw,26px);line-height:1.3;letter-spacing:-.02em;font-weight:500;max-width:22em}
.bk-cap span{display:block;margin-top:12px;font-size:14px;color:rgba(255,255,255,.8)}
.bk-main{display:flex;flex-direction:column;min-height:0;overflow-y:auto;overscroll-behavior:contain}
.bk-top{display:flex;align-items:center;gap:20px;padding:22px clamp(20px,4vw,48px);position:sticky;top:0;background:var(--bg);z-index:2}
.bk-ic{width:44px;height:44px;border-radius:50%;border:1px solid var(--rule-2);display:grid;place-items:center;flex:none;transition:border-color .2s,opacity .2s}
.bk-ic svg{width:15px;height:15px}
.bk-ic:hover{border-color:var(--ink)}
.bk-ic.off{opacity:0;pointer-events:none}
.bk-prog{flex:1;height:3px;background:var(--rule);position:relative;overflow:hidden}
.bk-prog i{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--ink);transition:width .5s var(--ease)}
.bk-count{font-size:14px;color:var(--mute);font-weight:500;min-width:54px;text-align:right}
.bk-body{flex:1;display:flex;align-items:center;padding:16px clamp(20px,6vw,104px) 64px}
.bk-step{width:100%;max-width:640px;outline:0}
.bk-step.enter{animation:bkIn .45s var(--ease)}
@keyframes bkIn{from{opacity:0;transform:translateY(14px)}}
.bk-step h2{font-family:var(--fd);font-weight:var(--fd-w,600);text-transform:var(--fd-tt,none);font-size:clamp(30px,3.2vw,48px);letter-spacing:var(--fd-ls,-.035em);line-height:1.06;margin-top:14px}
.bk-hint{color:var(--mute);font-size:17px;margin:14px 0 30px;max-width:34em}
.bo-grid{display:grid;gap:10px}
.bo-grid.c2{grid-template-columns:1fr 1fr}
.bo{display:flex;align-items:center;gap:16px;width:100%;text-align:left;padding:13px 18px 13px 14px;min-height:64px;background:var(--card);border:1px solid var(--rule);border-radius:var(--r,0);transition:border-color .15s,box-shadow .15s}
.bo:hover{border-color:var(--ink)}
.bo kbd{font:inherit;font-size:12.5px;font-weight:500;width:28px;height:28px;flex:none;display:grid;place-items:center;border:1px solid var(--rule-2);color:var(--mute);border-radius:calc(var(--r,0px)/2);transition:all .15s}
.bo b{display:block;font-weight:500;font-size:17px;letter-spacing:-.01em;line-height:1.25}
.bo small{display:block;color:var(--mute);font-size:14px;margin-top:2px;line-height:1.35}
.bo.on{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.bo.on kbd{background:var(--ink);border-color:var(--ink);color:var(--on-ink)}
.bo.multi.on kbd{font-size:0}
.bo.multi.on kbd::after{content:"";width:10px;height:5px;border-left:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-1px) rotate(-45deg)}
.bk-act{display:flex;align-items:center;gap:16px;margin-top:34px;flex-wrap:wrap}
.bk-act .btn[disabled]{opacity:.35;pointer-events:none}
.bk-act .k{font-size:14px;color:var(--mute)}
.bk-act .k kbd{font:inherit;font-size:12px;border:1px solid var(--rule-2);padding:2px 7px;margin-left:4px;color:var(--ink)}
.bf-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px 28px}
.bf.full{grid-column:1/-1}
.bf label{display:block;font-size:14px;font-weight:500}
.bf label i{font-style:normal;font-weight:400;color:var(--mute)}
.bf input,.bf select,.bf textarea{display:block;width:100%;border:0;border-bottom:1.5px solid var(--rule-2);background:transparent;font:inherit;font-size:20px;letter-spacing:-.01em;padding:10px 0;color:var(--ink);border-radius:0;outline:0;transition:border-color .2s;appearance:none;-webkit-appearance:none}
.bf select{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23555' stroke-width='1.5'/%3E%3C/svg%3E") right 2px center/12px no-repeat;cursor:pointer}
.bf textarea{resize:none;min-height:120px;font-size:19px;line-height:1.45}
.bf ::placeholder{color:var(--ph)}
.bf input:focus,.bf select:focus,.bf textarea:focus{border-color:var(--ink)}
.bf.bad input,.bf.bad select{border-color:#a3341a}
.bf em{display:none;font-style:normal;font-size:13px;color:#a3341a;margin-top:6px}
.bf.bad em{display:block}
.bchips{margin-top:30px}
.bchips>span{display:block;font-size:14px;font-weight:500}
.bchips div{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.bchip{height:42px;padding:0 18px;border-radius:999px;border:1px solid var(--rule-2);font-weight:500;font-size:15px;background:var(--card);transition:all .15s}
.bchip:hover{border-color:var(--ink)}
.bchip.on{background:var(--ink);color:var(--on-ink);border-color:var(--ink)}
.sum{border-top:1px solid var(--ink);margin-top:6px}
.sum-row{display:grid;grid-template-columns:150px 1fr auto;gap:20px;padding:13px 0;border-bottom:1px solid var(--rule);font-size:16px;align-items:baseline}
.sum-row span{color:var(--mute);font-size:14.5px}
.sum-row button{font-size:14px;font-weight:500;color:var(--mute);text-decoration:underline;text-underline-offset:3px}
.sum-row button:hover{color:var(--ink)}
.bk-legal{font-size:13px;color:var(--mute);margin-top:18px;max-width:42em;line-height:1.5}
.bk-done .tick{width:60px;height:60px;background:var(--ink);color:var(--on-ink);display:grid;place-items:center;margin-bottom:28px;border-radius:var(--r,0)}
.bk-done .tick svg{width:24px;height:24px}
.nx{list-style:none;border-top:1px solid var(--ink);margin-top:8px}
.nx li{display:grid;grid-template-columns:44px 1fr;padding:16px 0;border-bottom:1px solid var(--rule)}
.nx li i{font-style:normal;font-weight:500;color:var(--mute)}
.nx b{display:block;font-weight:500}
.nx span{color:var(--mute);font-size:15px}

/* chat + desktop dock */
/* contact dock: one glass pill. Call and chat always; "Book a consultation" glides out once you're past the hero */
.dock{--dk-ease:cubic-bezier(.32,.72,0,1);position:fixed;right:20px;bottom:20px;z-index:80;display:flex;align-items:center;gap:6px;padding:6px;border-radius:999px;color:#fff;
  background:linear-gradient(160deg,rgba(255,255,255,.09),rgba(255,255,255,.01) 50%),rgba(16,22,18,.86);-webkit-backdrop-filter:blur(22px) saturate(1.6);backdrop-filter:blur(22px) saturate(1.6);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),inset 0 1px 0 rgba(255,255,255,.18),0 20px 44px -16px rgba(0,0,0,.55);
  transform:translateY(0);transition:transform .6s var(--dk-ease),opacity .4s}
.bk-lock .dock{transform:translateY(140%);opacity:0}
.dk-cta{display:grid;grid-template-columns:0fr;transition:grid-template-columns .65s var(--dk-ease)}
.dk-cta>div{overflow:hidden;min-width:0}
.dock.wide .dk-cta{grid-template-columns:1fr}
.dk-book{display:inline-flex;align-items:center;gap:10px;height:48px;padding:0 8px 0 20px;border-radius:999px;white-space:nowrap;
  background:var(--accent-l);color:var(--on-accent-l);font-size:15px;font-weight:600;letter-spacing:-.01em;
  opacity:0;transform:translateX(14px) scale(.96);transform-origin:right center;transition:opacity .35s ease,transform .65s var(--dk-ease),background .25s,filter .25s}
.dock.wide .dk-book{opacity:1;transform:none;transition-delay:.08s,.04s,0s,0s}
.dk-ar{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:rgba(0,0,0,.1);transition:transform .35s var(--dk-ease),background .25s}
.dk-ar svg{width:14px;height:14px}
.dk-book:hover{filter:brightness(1.06)}
.dk-book:hover .dk-ar{transform:translateX(3px);background:rgba(0,0,0,.16)}
.dk-btn{position:relative;flex:none;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;color:#fff;background:rgba(255,255,255,.09);
  transition:background .25s,transform .35s var(--dk-ease),box-shadow .25s}
.dk-btn:hover{background:rgba(255,255,255,.18)}
.dk-btn:active,.dk-book:active{transform:scale(.95)}
.dk-btn:focus-visible,.dk-book:focus-visible{outline:2px solid #fff;outline-offset:2px}
.dk-btn>svg{width:21px;height:21px;grid-area:1/1}
.dk-call>svg{width:19px;height:19px}
.chat-fab .ic-c,.chat-fab .ic-x{transition:opacity .25s,transform .45s var(--dk-ease)}
.chat-fab .ic-x{opacity:0;transform:rotate(-90deg) scale(.6)}
.chat-open .chat-fab{background:#fff;color:#111}
.chat-open .chat-fab .ic-c{opacity:0;transform:rotate(90deg) scale(.6)}
.chat-open .chat-fab .ic-x{opacity:1;transform:none}
/* small "office is in" dot, sits on the bubble's corner */
.dk-dot{position:absolute;top:11px;right:10px;width:8px;height:8px;border-radius:50%;background:#7BD88F;box-shadow:0 0 0 2px rgba(20,28,22,.9)}
.dk-dot::after{content:"";position:absolute;inset:0;border-radius:50%;background:#7BD88F;animation:dkPing 2.8s cubic-bezier(0,0,.2,1) 1.2s 3}
@keyframes dkPing{0%{transform:scale(1);opacity:.7}80%,100%{transform:scale(2.6);opacity:0}}
.chat-open .dk-dot{display:none}
/* tooltips */
.dk-tip{position:absolute;bottom:calc(100% + 12px);right:50%;transform:translate(50%,6px);padding:7px 11px;border-radius:9px;white-space:nowrap;pointer-events:none;
  background:rgba(14,20,16,.86);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);color:#fff;font-size:13px;font-weight:500;opacity:0;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),0 10px 24px -10px rgba(0,0,0,.5);transition:opacity .2s,transform .35s var(--dk-ease)}
.dk-btn:hover .dk-tip,.dk-btn:focus-visible .dk-tip{opacity:1;transform:translate(50%,0);transition-delay:.15s}
.chat-open .chat-fab .dk-tip{display:none}
@media (prefers-reduced-motion:reduce){.dock,.dk-cta,.dk-book,.dk-btn,.chat-fab .ic-c,.chat-fab .ic-x,.dk-tip{transition:none}.dk-dot::after{animation:none}}
.chat-tease{position:fixed;right:20px;bottom:90px;z-index:80;width:320px;display:grid;grid-template-columns:40px 1fr;gap:12px;align-items:start;background:var(--card);color:var(--ink);padding:16px 44px 16px 16px;font-size:15px;line-height:1.4;box-shadow:0 20px 44px -18px rgba(0,0,0,.4);border-radius:var(--r,0);opacity:0;transform:translateY(8px);pointer-events:none;transition:opacity .35s,transform .35s var(--ease);cursor:pointer}
.chat-tease.show{opacity:1;transform:none;pointer-events:auto}
.chat-tease .av{width:40px;height:40px;border-radius:50%;background:var(--dark);color:#fff;display:grid;place-items:center}
.chat-tease .av .mark{width:30px;height:auto}
.chat-tease b{display:block;font-weight:500;margin-bottom:2px}
.chat-tease span{color:var(--mute)}
.chat-tease button{position:absolute;top:10px;right:10px;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;color:var(--mute)}
.chat-tease button:hover{background:var(--bg-2)}
.chat-tease button svg{width:11px;height:11px}
.chat-panel{position:fixed;right:20px;bottom:90px;z-index:90;width:384px;height:min(610px,calc(100vh - 124px));background:var(--card);color:var(--ink);box-shadow:0 40px 90px -24px rgba(0,0,0,.5);display:flex;flex-direction:column;overflow:hidden;border-radius:var(--r,0);opacity:0;transform:translateY(14px) scale(.98);transform-origin:bottom right;visibility:hidden;transition:opacity .25s,transform .35s var(--ease),visibility 0s linear .35s}
.chat-open .chat-panel{opacity:1;transform:none;visibility:visible;transition:opacity .25s,transform .35s var(--ease)}
.chat-hd{display:flex;align-items:center;gap:12px;padding:16px 14px 16px 18px;background:var(--dark);color:#fff}
.chat-av{width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.1);display:grid;place-items:center;flex:none;position:relative}
.chat-av .mark{width:30px;height:auto}
.chat-av::after{content:"";position:absolute;right:0;bottom:1px;width:11px;height:11px;border-radius:50%;background:#4cc27a;border:2px solid var(--dark)}
.chat-hd b{display:block;font-weight:500;font-size:15.5px}
.chat-hd small{display:block;font-size:13px;color:rgba(255,255,255,.74)}
.chat-hd button{margin-left:auto;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.1);display:grid;place-items:center}
.chat-hd button:hover{background:rgba(255,255,255,.18)}
.chat-hd button svg{width:12px;height:12px}
.chat-log{flex:1;overflow-y:auto;padding:18px 16px 8px;display:flex;flex-direction:column;gap:10px;background:var(--bg)}
.msg{max-width:84%;padding:11px 14px;font-size:15px;line-height:1.45;border-radius:var(--r,0);animation:bkIn .3s var(--ease)}
.msg.bot{background:var(--card);border:1px solid var(--rule);align-self:flex-start}
.msg.me{background:var(--ink);color:var(--on-ink);align-self:flex-end}
.msg a{text-decoration:underline;text-underline-offset:3px;font-weight:500}
.msg.typing{display:flex;gap:4px;padding:15px 16px}
.msg.typing i{width:6px;height:6px;border-radius:50%;background:var(--mute);animation:dot 1s infinite}
.msg.typing i:nth-child(2){animation-delay:.15s}.msg.typing i:nth-child(3){animation-delay:.3s}
@keyframes dot{0%,60%,100%{opacity:.35;transform:none}30%{opacity:1;transform:translateY(-3px)}}
.chat-quick{display:flex;flex-direction:column;align-items:flex-end;gap:6px;padding:4px 16px 14px;background:var(--bg)}
.chat-quick:empty{display:none}
.chat-quick button{border:1px solid var(--ink);border-radius:999px;padding:8px 14px;font-size:14px;font-weight:500;background:var(--card);animation:bkIn .3s var(--ease) both}
.chat-quick button:hover{background:var(--ink);color:var(--on-ink)}
.chat-in{display:flex;gap:8px;padding:12px;border-top:1px solid var(--rule)}
.chat-in input{flex:1;min-width:0;height:44px;border:1px solid var(--rule-2);border-radius:999px;padding:0 16px;font:inherit;font-size:15px;outline:0;color:var(--ink);background:var(--card)}
.chat-in input:focus{border-color:var(--ink)}
.chat-in button{width:44px;height:44px;border-radius:50%;background:var(--ink);color:var(--on-ink);display:grid;place-items:center;flex:none}
.chat-in button svg{width:16px;height:16px}
.chat-note{font-size:12px;color:var(--mute);text-align:center;padding:0 12px 10px}

/* mobile call / chat bar */
.mbar{display:none}

/* A/B/C switcher */
.demo{position:fixed;left:16px;bottom:16px;z-index:40;background:#111512;color:#fff;font-size:12.5px;font-weight:500;padding:5px 5px 5px 14px;border-radius:999px;display:flex;align-items:center;gap:6px;font-family:"Sohne",system-ui,sans-serif;opacity:0;transform:translateY(8px);pointer-events:none;transition:opacity .3s,transform .3s;box-shadow:0 10px 30px -10px rgba(0,0,0,.5)}
.demo.show{opacity:1;transform:none;pointer-events:auto}
.demo>span{margin-right:4px;color:rgba(255,255,255,.82)}
.demo a{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;font-weight:600;color:rgba(255,255,255,.82)}
.demo a.on{background:#fff;color:#111512}
.demo a:not(.on):hover{background:rgba(255,255,255,.14);color:#fff}
.demo a.pitch{width:auto;padding:0 10px;border-radius:999px;font-weight:500}

/* concept-image note */
.ci-note{font-size:12.5px;color:var(--mute)}
.ph-note{display:inline-block;font-size:11.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;background:#fff3c4;color:#5a4300;padding:2px 7px;border-radius:4px;vertical-align:middle}

/* reveal */
.rv{opacity:0;transform:translateY(14px);transition:opacity 1.1s var(--ease) var(--d,0s),transform 1.5s var(--ease) var(--d,0s)}
.rv.in{opacity:1;transform:none}
.mask{display:block;overflow:hidden;padding-bottom:.2em;margin-bottom:-.2em}  /* room for descenders (y, g) inside the reveal mask */
.mask>span{display:block;transform:translateY(108%);animation:rise 1.5s var(--ease) .15s forwards}
.mask+.mask>span{animation-delay:.22s}
.mask+.mask+.mask>span{animation-delay:.34s}
@keyframes rise{to{transform:none}}
.intro{animation:intro 1.4s var(--ease) both}
@keyframes intro{from{opacity:0;transform:translateY(10px)}}
@media (prefers-reduced-motion:reduce){.intro,.mask>span{animation:none;transform:none}.rv{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}.map .pulse{animation:none}}

/* responsive (shared parts) */
@media (max-width:1180px){
  .nav,.hdr-r .hdr-ph{display:none}
  .burger{display:block;margin-left:0}
  .hdr-r{margin-left:auto}
  .mm{display:none}
}
@media (max-width:900px){
  .bk{grid-template-columns:1fr}
  .bk-media{display:none}
}
@media (max-width:640px){
  body{font-size:16px}
  .hdr-r .btn{display:none}
  .dock,.chat-tease{display:none}
  .chat-panel{right:0;left:0;bottom:0;width:auto;height:min(82vh,640px);border-radius:16px 16px 0 0;z-index:110}
  .mbar{display:grid;grid-template-columns:48px 48px 1fr;gap:6px;position:fixed;left:12px;right:12px;bottom:max(12px,env(safe-area-inset-bottom));z-index:85;padding:6px;border-radius:999px;
    background:linear-gradient(160deg,rgba(255,255,255,.09),rgba(255,255,255,.01) 50%),rgba(16,22,18,.88);-webkit-backdrop-filter:blur(22px) saturate(1.6);backdrop-filter:blur(22px) saturate(1.6);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),0 16px 34px -12px rgba(0,0,0,.5);transform:translateY(140%);transition:transform .6s cubic-bezier(.32,.72,0,1)}
  .mbar.show{transform:none}
  .mbar.hide,.chat-open .mbar,.bk-lock .mbar,.menu-open .mbar{transform:translateY(140%)}
  .mbar .call{width:48px;height:48px;padding:0;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:0;background:rgba(255,255,255,.1);transition:transform .3s}
  .mbar .call:active,.mbar .go:active{transform:scale(.95)}
  .mbar .call svg{width:19px;height:19px}
  .mbar .go{height:48px;border-radius:999px;display:grid;place-items:center;background:var(--accent-l);color:var(--on-accent-l);font-weight:600;font-size:15px;transition:transform .3s}
  .demo{bottom:76px;left:10px}
  .demo>span{display:none}
  .bf-grid,.bo-grid.c2{grid-template-columns:1fr}
  .sum-row{grid-template-columns:1fr auto}
  .sum-row span{grid-column:1/-1}
  .bk-body{padding:8px 18px 48px;align-items:flex-start}
  .bk-top{padding:14px 16px}
}

/* hero lead form (visible on load) */
.hf{display:grid;grid-template-columns:1fr 1fr;gap:12px;background:var(--card);color:var(--ink);padding:28px;border-radius:var(--r,0)}
.hf .full{grid-column:1/-1}
.hf-t{grid-column:1/-1;font-family:var(--fd);font-weight:var(--fd-w,600);text-transform:var(--fd-tt,none);letter-spacing:var(--fd-ls,-.02em);font-size:26px;line-height:1.1}
.hf-s{grid-column:1/-1;font-size:14.5px;color:var(--mute);margin:-4px 0 6px}
.hf-f span{display:block;font-size:13px;font-weight:500;margin-bottom:5px}
.hf-f input,.hf-f select{width:100%;height:50px;border:1px solid var(--rule-2);border-radius:var(--r,0);background:var(--card);padding:0 14px;font:inherit;font-size:16px;color:var(--ink);appearance:none;-webkit-appearance:none}
.hf-f select{background:var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23555' stroke-width='1.5'/%3E%3C/svg%3E") right 14px center/12px no-repeat}
.hf-f input:focus,.hf-f select:focus{outline:2px solid var(--ink);outline-offset:0;border-color:var(--ink)}
.hf-f ::placeholder{color:var(--ph)}
.hf .btn{height:54px;margin-top:4px;border-radius:var(--btn-r,999px)}
.hf-n{grid-column:1/-1;text-align:center;font-size:14px;color:var(--mute)}
.hf-n a{color:var(--ink);font-weight:600}
@media (max-width:640px){.hf{padding:22px 18px;grid-template-columns:1fr}.hf-f{grid-column:1/-1}}

/* ---- one-question-per-screen consultation flow ---- */
@media (min-width:901px){.bk{grid-template-columns:4fr 8fr}}
.bk-body{align-items:center;padding:24px clamp(20px,7vw,120px) 56px}
.bk-step{max-width:680px}
.tf-q{font-family:var(--fd);font-weight:var(--fd-w,600);text-transform:var(--fd-tt,none);letter-spacing:var(--fd-ls,-.03em);font-size:clamp(28px,3vw,44px);line-height:1.08;display:flex;gap:14px;align-items:baseline}
.tf-n{flex:none;display:inline-flex;align-items:center;gap:6px;font-family:var(--f);font-size:15px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--mute);transform:translateY(-.35em)}
.tf-n::after{content:"→"}
.tf-hint{color:var(--mute);font-size:17px;margin:12px 0 0;max-width:34em}
.tf-opts{display:grid;gap:10px;margin-top:28px}
.tf-opts.many{grid-template-columns:1fr 1fr}
.tf-o{position:relative;display:flex;align-items:center;gap:14px;width:100%;min-height:68px;padding:12px 44px 12px 14px;text-align:left;background:var(--card);border:1.5px solid var(--rule-2);border-radius:var(--r,6px);transition:border-color .15s,background .15s,transform .15s}
.tf-o:hover{border-color:var(--ink);transform:translateY(-1px)}
.tf-o kbd{font:inherit;font-size:12.5px;font-weight:600;width:28px;height:28px;flex:none;display:grid;place-items:center;border:1.5px solid var(--rule-2);border-radius:calc(var(--r,6px)/1.5);color:var(--mute);background:var(--bg)}
.tf-o b{display:block;font-weight:600;font-size:17px;line-height:1.25}
.tf-o small{display:block;color:var(--mute);font-size:14px;margin-top:2px;line-height:1.35}
.tf-tick{position:absolute;right:16px;top:50%;width:12px;height:7px;margin-top:-5px;border-left:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:rotate(-45deg) scale(0);transition:transform .2s}
.tf-o.on{border-color:var(--ink);background:color-mix(in srgb,var(--card) 88%,var(--ink))}
.tf-o.on kbd{background:var(--ink);border-color:var(--ink);color:var(--on-ink)}
.tf-o.on .tf-tick{transform:rotate(-45deg) scale(1)}
.tf-o.flash{animation:tfFlash .36s steps(2,jump-none) 1}
@keyframes tfFlash{50%{background:var(--card)}}
.tf-in{margin-top:30px}
.tf-in input{width:100%;border:0;border-bottom:2px solid var(--rule-2);background:transparent;font:inherit;font-size:clamp(26px,2.6vw,36px);letter-spacing:-.01em;padding:8px 0 12px;color:var(--ink);border-radius:0;outline:0}
.tf-in input:focus{border-color:var(--ink)}
.tf-in input::placeholder{color:var(--ph)}
.tf-in em{display:block;min-height:22px;font-style:normal;font-size:14px;color:#a3341a;margin-top:8px}
.tf-chips{display:flex;gap:8px;margin-top:4px}
.tf-chip{height:42px;padding:0 18px;border-radius:999px;border:1.5px solid var(--rule-2);font-weight:500;font-size:15px;background:var(--card)}
.tf-chip.on{background:var(--ink);color:var(--on-ink);border-color:var(--ink)}
.tf-act{display:flex;align-items:center;gap:16px;margin-top:28px;flex-wrap:wrap}
.tf-act .btn{height:54px}
.tf-act .btn svg{width:16px;height:16px}
.tf-k{font-size:14px;color:var(--mute)}
.tf-k kbd{font:inherit;font-weight:600;color:var(--ink)}
.tf-recap{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin-top:40px;padding-top:18px;border-top:1px solid var(--rule)}
.tf-recap button{font-size:13px;color:var(--mute);border:1px solid var(--rule);border-radius:999px;padding:5px 12px;background:var(--card)}
.tf-recap button:hover{color:var(--ink);border-color:var(--ink)}
.bk-done .tf-q{display:block}
@media (max-width:640px){
  .bk-body{padding:8px 18px 120px}
  .tf-q{font-size:28px;flex-direction:column;gap:6px}
  .tf-n{transform:none}
  .tf-opts.many{grid-template-columns:1fr}
  .tf-o{min-height:60px}
  .tf-k{display:none}
  .tf-step-text .tf-act,.bk-step:has(.tf-in) .tf-act{position:fixed;left:0;right:0;bottom:0;margin:0;padding:12px 18px calc(12px + env(safe-area-inset-bottom));background:var(--bg);border-top:1px solid var(--rule)}
  .bk-step:has(.tf-in) .tf-act .btn{flex:1}
  .tf-recap{margin-top:28px}
}

/* ---- hero starter: one question, tap to begin ---- */
.hs{background:var(--card);color:var(--ink);padding:26px 26px 20px;border-radius:var(--r,0)}
.hs-t{font-family:var(--fd);font-weight:var(--fd-w,600);text-transform:var(--fd-tt,none);letter-spacing:var(--fd-ls,-.02em);font-size:26px;line-height:1.1}
.hs-s{display:flex;justify-content:space-between;gap:12px;font-size:13.5px;color:var(--mute);margin:6px 0 18px}
.hs-g{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.hs-g button{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:58px;padding:10px 14px;text-align:left;font-weight:600;font-size:15.5px;line-height:1.2;background:var(--bg);border:1.5px solid var(--rule);border-radius:var(--r,0);color:var(--ink);transition:border-color .15s,background .15s}
.hs-g button svg{width:14px;height:14px;flex:none;opacity:.45;transition:opacity .15s,transform .2s}
.hs-g button:hover{border-color:var(--ink);background:var(--card)}
.hs-g button:hover svg{opacity:1;transform:translateX(2px)}
.hs-n{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:16px;padding-top:14px;border-top:1px solid var(--rule);font-size:14px;color:var(--mute)}
.hs-n a{color:var(--ink);font-weight:600}
@media (max-width:640px){.hs{padding:22px 18px 16px}.hs-g button{min-height:56px;font-size:15px}}

/* booking: day + time pickers */
.tf-days{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin-top:28px}
.tf-day{display:flex;flex-direction:column;align-items:center;gap:2px;padding:12px 4px 10px;background:var(--card);border:1.5px solid var(--rule-2);border-radius:var(--r,6px);transition:border-color .15s,transform .15s}
.tf-day span{font-size:13px;font-weight:600;color:var(--mute);text-transform:uppercase;letter-spacing:.06em}
.tf-day b{font-family:var(--fd);font-weight:700;font-size:28px;line-height:1.1}
.tf-day small{font-size:13px;color:var(--mute)}
.tf-day em{font-style:normal;font-size:12px;margin-top:6px;color:var(--mute)}
.tf-day:hover{border-color:var(--ink);transform:translateY(-1px)}
.tf-day.on{background:var(--ink);border-color:var(--ink);color:var(--on-ink)}
.tf-day.on span,.tf-day.on small,.tf-day.on em{color:var(--on-ink);opacity:.85}
.tf-times{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:28px}
.tf-time{height:60px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-weight:600;font-size:17px;background:var(--card);border:1.5px solid var(--rule-2);border-radius:var(--r,6px)}
.tf-time:hover:not([disabled]){border-color:var(--ink)}
.tf-time.on{background:var(--ink);border-color:var(--ink);color:var(--on-ink)}
.tf-time[disabled]{opacity:.45;cursor:not-allowed;text-decoration:line-through}
.tf-time small{font-size:11.5px;font-weight:500;text-decoration:none}
.tf-tz{margin-top:16px;font-size:14px;color:var(--mute)}
.tf-tz a,.tf-link{color:var(--ink);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.tf-ok{min-height:22px;margin-top:4px;font-size:15px;font-weight:600;color:var(--ink)}
.tf-appt{margin:22px 0 10px;padding:18px 20px;border:1.5px solid var(--ink);border-radius:var(--r,6px);background:var(--card)}
.tf-appt b{display:block;font-family:var(--fd);font-weight:var(--fd-w,600);text-transform:var(--fd-tt,none);font-size:24px;line-height:1.15}
.tf-appt span{display:block;color:var(--mute);font-size:15px;margin-top:4px}
@media (max-width:640px){.tf-days{grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}.tf-day{padding:10px 2px 8px}.tf-day b{font-size:22px}.tf-day em{display:none}.tf-times{grid-template-columns:1fr 1fr}}


/* before/after gallery */
.bag-h{display:flex;justify-content:space-between;align-items:end;gap:20px 48px;flex-wrap:wrap;margin-bottom:28px}
.bag-h p{color:var(--mute);font-size:17px;max-width:30em}
.bag-in{display:grid;grid-template-columns:minmax(0,8fr) minmax(280px,4fr);gap:clamp(20px,3vw,40px);align-items:start}
.bag-s{aspect-ratio:4/3}
.bag-s img{transition:opacity .7s var(--ease-io)}
.bag-s.swap img{opacity:0}
.bag-tabs{display:grid;gap:8px}
.bag-t{display:block;width:100%;text-align:left;padding:14px 16px;border:1.5px solid var(--rule-2);border-radius:var(--r,0);background:var(--card);transition:border-color .15s}
.bag-t b{display:block;font-weight:600;font-size:16.5px}
.bag-t span{display:block;font-size:13.5px;color:var(--mute);margin-top:2px}
.bag-t:hover{border-color:var(--ink)}
.bag-t.on{border-color:var(--ink);background:var(--ink);color:var(--on-ink)}
.bag-t.on span{color:var(--on-ink);opacity:.8}
.bag-d{margin-top:22px;padding-top:18px;border-top:1px solid var(--rule-2)}
.bag-d>b{display:block;font-family:var(--fd);font-weight:var(--fd-w,600);text-transform:var(--fd-tt,none);font-size:22px}
.bag-d>span{display:block;font-size:14px;color:var(--mute);margin-top:2px}
.bag-d p{margin-top:10px;font-size:15.5px}
.bag-d dl{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.bag-d dt{font-size:12.5px;color:var(--mute)}
.bag-d dd{font-size:15px;font-weight:600}
.bag-n{margin-top:16px;font-size:12.5px;color:var(--mute)}
@media (max-width:960px){.bag-in{grid-template-columns:1fr}.bag-tabs{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.bag-s{aspect-ratio:4/3.3}.bag-t{padding:10px 12px}.bag-t b{font-size:15px}.bag-t span{display:none}}
@media (min-width:961px){.bag-tabs{grid-template-columns:1fr}}
/* collapsible hero quiz (A): the question shows on load, choices open on hover, focus or tap */
.hs-x{display:grid;grid-template-rows:1fr}
.hs-x>div{overflow:hidden;min-height:0}
.hs-c .hs-s{margin-bottom:0}
.hs-c .hs-g{margin-top:18px}
.hs-tog{display:none}
@media (min-width:641px){
  .hs-c{position:relative;cursor:default}
  .hs-c .hs-t{padding-right:52px}
  .hs-tog{display:grid;place-items:center;position:absolute;top:24px;right:22px;width:38px;height:38px;border-radius:50%;background:var(--ink);color:var(--on-ink,#fff);transition:transform .5s var(--ease)}
  .hs-tog svg{width:16px;height:16px}
  .hs-c .hs-x{grid-template-rows:0fr;transition:grid-template-rows .55s var(--ease)}
  .hs-c .hs-g button{opacity:0;transform:translateY(8px);transition:border-color .2s,background-color .2s,opacity .45s var(--ease),transform .45s var(--ease)}
  .hs-c:is(:hover,:focus-within,.open) .hs-x{grid-template-rows:1fr}
  .hs-c:is(:hover,:focus-within,.open) .hs-g button{opacity:1;transform:none}
  .hs-c:is(:hover,:focus-within,.open) .hs-tog{transform:rotate(180deg)}
  .hs-c:is(:hover,:focus-within,.open) .hs-g button:nth-child(2){transition-delay:0s,0s,.04s,.04s}
  .hs-c:is(:hover,:focus-within,.open) .hs-g button:nth-child(3){transition-delay:0s,0s,.08s,.08s}
  .hs-c:is(:hover,:focus-within,.open) .hs-g button:nth-child(4){transition-delay:0s,0s,.12s,.12s}
  .hs-c:is(:hover,:focus-within,.open) .hs-g button:nth-child(5){transition-delay:0s,0s,.16s,.16s}
  .hs-c:is(:hover,:focus-within,.open) .hs-g button:nth-child(6){transition-delay:0s,0s,.2s,.2s}
}
@media (prefers-reduced-motion:reduce){.hs-c .hs-x,.hs-c .hs-g button,.hs-tog{transition:none}}
/* motion (assets/motion.js): lights-on hero, image reveals, heading rises */
.hero-bg .lit{position:absolute;inset:0;opacity:0;transition:opacity 3.2s cubic-bezier(.45,0,.2,1)}
.lights-on .hero-bg .lit{opacity:1}
.m-on .m-img:not(.rv){opacity:0;transition:opacity 1.4s var(--ease) var(--d,0s)}
.m-on .m-img.in{opacity:1}
:where(.m-on .m-img:not(.in)) img{transform:scale(1.045)}
:where(.m-on .m-img) img{transition:transform 2.4s var(--ease)}
.m-on .m-h{opacity:0;transform:translateY(12px);transition:opacity 1.2s var(--ease),transform 1.5s var(--ease)}
.m-on .m-h.in{opacity:1;transform:none}
@supports (animation-timeline:view()){
  :where(.m-on .m-par.in) img{transform:scale(1.08)}
  .m-on .m-par img{animation:mPar linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
  .m-on .fx-cta.m-par>img{animation-timeline:view()}
}
@keyframes mPar{from{translate:0 -3%}to{translate:0 3%}}
@media (prefers-reduced-motion:reduce){.hero-bg .lit{transition:none}.m-img,.m-h{clip-path:none!important;transform:none!important;opacity:1!important}}

/* chat panel matches the dock: rounded glass card that rises from it */
.chat-panel{border-radius:20px;overflow:hidden;transform-origin:bottom right;box-shadow:0 0 0 1px rgba(0,0,0,.06),0 40px 90px -24px rgba(0,0,0,.5)}
.chat-panel:not(.x){transform:translateY(14px) scale(.96)}
.chat-open .chat-panel{transform:none;transition:opacity .3s,transform .55s cubic-bezier(.32,.72,0,1)}
.chat-tease{border-radius:16px}
@media (max-width:640px){.chat-panel{border-radius:20px 20px 0 0}}
@media (min-width:641px){#chatClose{display:none}}
/* booking: live times, booking state, details after booking */
.tf-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0}
.tf-load{display:flex;align-items:center;gap:12px;color:var(--mute);font-size:16px;padding:18px 0}
.tf-load i{width:18px;height:18px;border-radius:50%;border:2px solid var(--rule-2);border-top-color:var(--ink);animation:tfSpin .9s linear infinite}
@keyframes tfSpin{to{transform:rotate(360deg)}}
.tf-booking{font-size:19px;color:var(--ink);padding:32px 0}
.tf-first{display:grid;grid-template-columns:1fr 36px;align-items:center;gap:2px 14px;width:100%;text-align:left;padding:16px 16px 16px 18px;margin:6px 0 4px;background:var(--ink);color:var(--bg);border-radius:var(--r,10px);transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.tf-first small{grid-column:1;font-size:13px;opacity:.7}
.tf-first b{grid-column:1;font-size:19px;font-weight:600;letter-spacing:-.015em}
.tf-first .ar{grid-column:2;grid-row:1/3;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.14)}
.tf-first .ar svg{width:15px;height:15px}
@media (hover:hover){.tf-first:hover{transform:translateY(-1px);box-shadow:0 14px 30px -16px rgba(0,0,0,.5)}}
.tf-or{font-size:14px;color:var(--mute);margin:18px 0 10px}
.tf-note{font-size:15px;font-weight:500;color:#8a3b12;background:#fbefe7;padding:10px 14px;border-radius:var(--r,8px);margin-bottom:14px}
.tf-cal-err a{text-decoration:underline}
.tf-more{display:grid;gap:14px;margin:22px 0 6px;padding:20px;border:1px solid var(--rule-2);border-radius:var(--r,10px);background:var(--card)}
.tf-sub{font-weight:600;font-size:16px}
.tf-more label{display:grid;gap:6px;font-size:14px;color:var(--mute)}
.tf-more label i{font-style:normal;opacity:.8}
.tf-more input{font:inherit;font-size:17px;color:var(--ink);background:transparent;border:0;border-bottom:1.5px solid var(--rule-2);padding:8px 0;border-radius:0;outline:0;transition:border-color .3s var(--ease)}
.tf-more input:focus{border-color:var(--ink)}
.tf-more-a{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.tf-more .btn{height:46px;padding:0 20px;font-size:15px}
.tf-saved{font-size:14.5px;color:var(--mute)}
.tf-more.done input{color:var(--mute)}
@media (prefers-reduced-motion:reduce){.tf-load i{animation-duration:2.4s}}
/* booking: address + ZIP on one screen, optional email under the phone */
.tf-where{display:grid;grid-template-columns:minmax(0,1fr);gap:22px}
.tf-where .tf-zip input{max-width:220px}
.tf-where label{display:grid;gap:6px;font-size:13.5px;color:var(--mute)}
.tf-where input{width:100%}
.tf-opt{display:grid;gap:6px;margin-top:18px;font-size:13.5px;color:var(--mute)}
.tf-opt i{font-style:normal;opacity:.8}
.tf-opt input{font:inherit;font-size:18px;color:var(--ink);background:transparent;border:0;border-bottom:1.5px solid var(--rule-2);padding:8px 0;border-radius:0;outline:0;transition:border-color .3s var(--ease)}
.tf-opt input:focus{border-color:var(--ink)}
/* booking side panel: slow crossfade, a gentle drift, and a quiet rating line */
.bk-media .ph{transition:opacity 1.4s var(--ease-io),transform 7s var(--ease)}
.bk-media .ph.on{transform:scale(1.035)}
.bk-cap{transition:opacity .5s var(--ease-io)}
.bk-cap p{font-weight:400}
.bk-rate{position:absolute;left:32px;top:92px;z-index:2;display:flex;align-items:center;gap:8px;color:rgba(255,255,255,.86);font-size:13px;font-weight:500}
.bk-rate .stars{display:inline-flex}
@media (prefers-reduced-motion:reduce){.bk-media .ph,.bk-media .ph.on{transform:none;transition:opacity .01s}}
/* booking form type scale: one size per role, every step (desktop / phone) */
#bk{--t-in:24px;--t-em:20px;--t-body:17px;--t-sm:15px;--t-xs:14px;--t-micro:12px}
@media (max-width:640px){#bk{--t-in:22px}}
#bk .tf-in input,#bk .tf-opt input{font-size:var(--t-in);font-weight:400;letter-spacing:-.01em;line-height:1.3;padding:8px 0 10px;border-bottom-width:1.5px}
#bk .tf-where{gap:24px}
#bk .tf-where label,#bk .tf-opt{gap:4px;font-size:var(--t-xs);color:var(--mute)}
#bk .tf-where label span,#bk .tf-opt span{font-size:var(--t-xs)}
#bk .tf-opt{margin-top:24px}
#bk .tf-hint,#bk .tf-o b,#bk .tf-time,#bk .nx b{font-size:var(--t-body)}
#bk .tf-o small,#bk .tf-appt span,#bk .nx span{font-size:var(--t-sm)}
#bk .tf-first b,#bk .tf-appt b{font-size:var(--t-em)}
#bk #tfErr,#bk .tf-tz,#bk .tf-or,#bk #bkCount,#bk .tf-k,#bk .tf-first small,#bk .tf-day small,#bk .tf-n,#bk .tf-note{font-size:var(--t-xs)}
#bk .tf-o kbd,#bk .tf-day span,#bk .tf-day em,#bk .bk-legal{font-size:var(--t-micro)}
/* booking calendar: month grid with the times beside it (stacked on phones), like the Meta funnel */
#bk .tf-cal-wrap{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(20px,3vw,40px);align-items:start;margin-top:28px}
#bk .tf-cal{background:var(--card);border:1.5px solid var(--rule-2);border-radius:var(--r,10px);padding:16px 16px 18px}
#bk .tf-cal-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
#bk .tf-cal-h b{font-size:var(--t-body);font-weight:600}
#bk .tf-cal-n{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;color:var(--ink);transition:background .35s var(--ease)}
#bk .tf-cal-n svg{width:16px;height:16px}
#bk .tf-cal-n:hover:not([disabled]){background:var(--bg-2)}
#bk .tf-cal-n[disabled]{opacity:.25;cursor:default}
#bk .tf-cal-g{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;text-align:center}
#bk .tf-cal-g i{font-style:normal;font-size:var(--t-micro);font-weight:600;color:var(--mute);padding-bottom:6px}
#bk .tf-cal-g span,#bk .tf-cal-g .tf-day{aspect-ratio:1;display:grid;place-items:center;font-size:var(--t-sm);border-radius:50%}
#bk .tf-cal-g span.off{color:var(--mute);opacity:.45}
#bk .tf-cal-g .tf-day{display:grid;flex-direction:initial;padding:0;border:0;background:var(--bg-2);font-weight:600;color:var(--ink);transition:background .35s var(--ease),color .35s var(--ease)}
#bk .tf-cal-g .tf-day:hover{background:var(--rule-2)}
#bk .tf-cal-g .tf-day.on{background:var(--ink);color:var(--on-ink)}
#bk .tf-slots-h{font-size:var(--t-body);font-weight:600;margin-bottom:12px}
#bk .tf-slots .tf-times{grid-template-columns:1fr 1fr;margin-top:0;gap:8px}
#bk .tf-slots .tf-time{height:52px;font-size:var(--t-body)}
#bk .tf-slots .tf-note{margin-bottom:12px}
@media (max-width:900px){#bk .tf-cal-wrap{grid-template-columns:1fr}}
@media (max-width:640px){#bk .tf-slots .tf-times{grid-template-columns:1fr 1fr}}
/* booking panel: a deeper fade behind the logo and rating so they read on any photo; review stars in one amber everywhere */
:root{--star:#F5A623}
.bk-media::after{background:linear-gradient(180deg,rgba(8,12,9,.82),rgba(8,12,9,.5) 14%,rgba(8,12,9,0) 30%,rgba(8,12,9,0) 52%,rgba(8,12,9,.9))}
.bk-logo,.bk-rate{text-shadow:0 1px 10px rgba(0,0,0,.35)}
.bk-rate .stars svg{fill:var(--star)}
/* the form names itself in its top bar */
.bk-title{font-size:var(--t-xs,14px);font-weight:600;white-space:nowrap;letter-spacing:-.005em}
@media (max-width:640px){.bk-title{font-size:13px}}
/* booking form spacing rhythm: hint → 32 → fields (20 apart) → 32 → button; errors take room only when shown */
#bk .tf-in{margin-top:32px}
#bk .tf-where{gap:20px}
#bk .tf-opt{margin-top:20px}
#bk .tf-in em{min-height:0;margin-top:2px}
#bk .tf-in em:empty{display:none}
#bk .tf-act{margin-top:32px}
#bk .bk-legal{margin-top:16px}
/* phones: steps fade in without moving, so the pinned button never rides along with the step during the change */
@media (max-width:640px){.bk-step.enter{animation:bkFade .45s var(--ease) both}}
@keyframes bkFade{from{opacity:0}}
/* visit calendar, v2: one card, the weeks that matter on the left, that day's times on the right, a clear Book button below */
#bk .tf-sched{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);margin-top:32px;background:var(--card);border:1px solid var(--rule-2);border-radius:18px;box-shadow:0 1px 2px rgba(20,26,22,.04),0 18px 40px -28px rgba(20,26,22,.25);overflow:hidden}
#bk .tf-sched .tf-cal{background:none;border:0;border-radius:0;padding:24px 24px 26px;box-shadow:none}
#bk .tf-cal-h{font-size:var(--t-body);font-weight:600;letter-spacing:-.01em;margin:0 0 16px}
#bk .tf-sched .tf-cal-g{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px 2px}
#bk .tf-sched .tf-cal-g i{font-style:normal;font-size:var(--t-micro);font-weight:500;color:var(--mute);text-align:center;padding-bottom:4px}
#bk .tf-sched .tf-cal-g span,#bk .tf-sched .tf-cal-g .tf-day{position:relative;height:44px;width:44px;justify-self:center;display:grid;place-items:center;border-radius:50%;font-size:var(--t-sm);line-height:1;padding:0;border:0;aspect-ratio:auto}
#bk .tf-sched .tf-cal-g small{position:absolute;top:-2px;left:50%;transform:translateX(-50%);font-size:10px;font-weight:600;color:var(--mute);letter-spacing:.02em}
#bk .tf-sched .tf-cal-g span.off{color:var(--mute);opacity:.38}
#bk .tf-sched .tf-cal-g .tf-day{background:transparent;color:var(--ink);font-weight:600;transition:background .35s var(--ease),color .35s var(--ease)}
#bk .tf-sched .tf-cal-g .tf-day::after{content:"";position:absolute;bottom:7px;left:50%;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:var(--accent,#3f6b3a)}
#bk .tf-sched .tf-cal-g .tf-day:hover{background:var(--bg-2)}
#bk .tf-sched .tf-cal-g .tf-day.on{background:var(--ink);color:var(--on-ink)}
#bk .tf-sched .tf-cal-g .tf-day.on::after{background:var(--on-ink)}
#bk .tf-sched .tf-slots{border-left:1px solid var(--rule);padding:24px 24px 26px;max-height:420px;overflow-y:auto;overscroll-behavior:contain}
#bk .tf-sched .tf-slots-h{font-size:var(--t-body);font-weight:600;letter-spacing:-.01em;margin:0 0 14px}
#bk .tf-grp{font-size:var(--t-micro);font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--mute);margin:16px 0 8px}
#bk .tf-slots-h+.tf-grp,#bk .tf-note+.tf-grp{margin-top:0}
#bk .tf-sched .tf-times{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0}
#bk .tf-sched .tf-time{height:42px;font-size:var(--t-sm);font-weight:600;background:transparent;border:1px solid var(--rule-2);border-radius:10px;color:var(--ink);transition:border-color .35s var(--ease),background .35s var(--ease),color .35s var(--ease)}
#bk .tf-sched .tf-time:hover{border-color:var(--ink)}
#bk .tf-sched .tf-time.on{background:var(--ink);border-color:var(--ink);color:var(--on-ink)}
#bk .tf-book{margin-top:24px}
#bk .tf-book .btn{min-width:260px;transition:opacity .45s var(--ease),background .45s var(--ease)}
#bk .tf-book:not(.on) .btn{opacity:.35;pointer-events:none}
@media (max-width:900px){
  #bk .tf-sched{grid-template-columns:1fr}
  #bk .tf-sched .tf-slots{border-left:0;border-top:1px solid var(--rule);max-height:none;overflow:visible}
}
@media (max-width:640px){
  #bk .tf-sched{margin-top:24px;border-radius:14px}
  #bk .tf-sched .tf-cal,#bk .tf-sched .tf-slots{padding:18px 16px 20px}
  #bk .tf-sched .tf-cal-g span,#bk .tf-sched .tf-cal-g .tf-day{width:40px;height:40px}
  #bk .tf-book{position:fixed;left:0;right:0;bottom:0;margin:0;padding:12px 18px calc(12px + env(safe-area-inset-bottom));background:var(--bg);border-top:1px solid var(--rule);z-index:3}
  #bk .tf-book .btn{width:100%}
  #bk .bk-step:has(.tf-book){padding-bottom:96px}
}
/* what to expect, under the calendar on desktop; the times column shows every slot */
#bk .tf-sched .tf-slots{max-height:none;overflow:visible}
#bk .tf-expect{list-style:none;margin:24px 0 0;padding:20px 0 0;border-top:1px solid var(--rule);display:grid;gap:14px}
#bk .tf-expect li{display:grid;gap:2px;padding-left:18px;position:relative}
#bk .tf-expect li::before{content:"";position:absolute;left:0;top:7px;width:6px;height:6px;border-radius:50%;background:var(--accent,#3f6b3a)}
#bk .tf-expect b{font-size:var(--t-sm);font-weight:600}
#bk .tf-expect span{font-size:var(--t-xs);color:var(--mute);line-height:1.45}
@media (max-width:900px){#bk .tf-expect{display:none}}
/* visit calendar, simple variant (?cal=simple): two labeled rows of big buttons, nothing else */
#bk .tf-simple{margin-top:32px}
#bk .tf-lab{font-size:var(--t-body);font-weight:600;margin:0 0 12px}
#bk .tf-sdays+.tf-lab{margin-top:28px}
#bk .tf-sdays{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:10px}
#bk .tf-sdays .tf-day{gap:2px;padding:12px 4px;border:1.5px solid var(--rule-2);border-radius:12px;background:var(--card);transform:none}
#bk .tf-sdays .tf-day span,#bk .tf-sdays .tf-day small{font-size:var(--t-xs);font-weight:600;text-transform:none;letter-spacing:0;color:var(--mute)}
#bk .tf-sdays .tf-day b{font-size:26px}
#bk .tf-sdays .tf-day:hover{border-color:var(--ink)}
#bk .tf-sdays .tf-day.on{background:var(--ink);border-color:var(--ink);color:var(--on-ink)}
#bk .tf-sdays .tf-day.on span,#bk .tf-sdays .tf-day.on small{color:var(--on-ink);opacity:.85}
#bk .tf-simple .tf-times{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px;margin:0}
#bk .tf-simple .tf-time{height:54px;font-size:var(--t-body);border-radius:12px}
#bk .tf-simple .tf-note{margin-bottom:12px}
@media (max-width:640px){#bk .tf-sdays{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}#bk .tf-sdays .tf-day b{font-size:22px}#bk .tf-simple .tf-times{grid-template-columns:1fr 1fr}}
/* confirmation: the booked time, then proof: their kind of project, a review about the visit, and the trust points */
#bk .dn .dn-head{display:flex;align-items:center;gap:14px}
#bk .dn .dn-tick{flex:none;width:40px;height:40px;border-radius:50%;background:var(--ink);color:var(--on-ink);display:grid;place-items:center}
#bk .dn .dn-tick svg{width:20px;height:20px}
#bk .dn .tf-q{margin:0}
#bk .dn-appt{margin-top:28px;padding:22px 24px;background:var(--card);border:1px solid var(--rule-2);border-radius:16px}
#bk .dn-when{font-family:var(--fd);font-weight:var(--fd-w,600);font-size:var(--t-em);line-height:1.2;letter-spacing:-.01em}
#bk .dn-what{margin-top:6px;font-size:var(--t-sm);color:var(--ink)}
#bk .dn-sms{margin-top:14px;padding-top:14px;border-top:1px solid var(--rule);font-size:var(--t-sm);color:var(--mute);line-height:1.5}
#bk .dn-cal{display:inline-flex;align-items:center;gap:6px;margin-top:12px;font-size:var(--t-sm);font-weight:600;color:var(--ink);text-decoration:underline;text-underline-offset:3px}
#bk .dn-h{margin:36px 0 12px;font-size:var(--t-body);font-weight:600}
#bk .dn-ph{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
#bk .dn-ph figure{margin:0}
#bk .dn-ph img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:12px;background:var(--bg-2)}
#bk .dn-ph figcaption{margin-top:6px;font-size:var(--t-xs);color:var(--mute);line-height:1.35}
#bk .dn-rev{margin:28px 0 0;padding:0}
#bk .dn-stars{color:var(--star,#F5A623);letter-spacing:2px;font-size:var(--t-sm)}
#bk .dn-rev p{margin-top:8px;font-size:var(--t-body);line-height:1.5;color:var(--ink)}
#bk .dn-rev cite{display:block;margin-top:8px;font-style:normal;font-size:var(--t-xs);color:var(--mute)}
#bk .dn-trust{list-style:none;margin:28px 0 0;padding:20px 0 0;border-top:1px solid var(--rule);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
#bk .dn-trust li{display:flex;flex-direction:column;gap:2px;font-size:var(--t-xs);color:var(--mute);line-height:1.35}
#bk .dn-trust b{font-size:var(--t-body);font-weight:600;color:var(--ink)}
#bk .dn-trust b span{color:var(--star,#F5A623)}
#bk .dn-foot{margin-top:24px;font-size:var(--t-sm);color:var(--mute)}
#bk .dn-foot a{color:var(--ink);font-weight:600;text-decoration:underline;text-underline-offset:3px}
@media (max-width:640px){
  #bk .dn-appt{padding:18px 18px}
  #bk .dn-ph{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  #bk .dn-ph figcaption{display:none}
  #bk .dn-trust{grid-template-columns:1fr 1fr;gap:18px 12px}
}
/* Meet Rob: dark band, his head follows the cursor across five angles */
.mr{background:var(--ink,#142019);color:#fff;padding:clamp(72px,9vw,120px) 0}
.mr-in{max-width:1200px;margin:0 auto;padding:0 clamp(20px,4vw,40px);display:grid;grid-template-columns:1fr minmax(0,520px);gap:clamp(40px,6vw,80px);align-items:center}
.mr-h{white-space:nowrap;font-size:clamp(56px,7vw,104px);font-weight:600;line-height:.88;letter-spacing:-.05em;margin:0}
.mr-h span{color:var(--accent,#94C83D)}
.mr-lead{margin-top:28px;font-size:clamp(17px,1.5vw,20px);line-height:1.55;color:rgba(255,255,255,.82);max-width:470px}
.mr-facts{list-style:none;margin:32px 0 0;padding:24px 0 0;border-top:1px solid rgba(255,255,255,.16);display:flex;gap:32px;flex-wrap:wrap}
.mr-facts b{display:block;font-size:26px;font-weight:600;letter-spacing:-.02em;color:#fff}
.mr-facts span{font-size:14px;color:rgba(255,255,255,.6)}
.mr-star{font-style:normal;color:var(--star,#F5A623);font-size:20px}
.mr-stage{position:relative;margin:0;aspect-ratio:928/1152;border-radius:8px;overflow:hidden;background:#0c130f}
.mr-f{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .45s var(--ease,cubic-bezier(.16,1,.3,1))}
.mr-f.on{opacity:1}
.mr-stage figcaption{position:absolute;left:22px;bottom:20px;font-size:15px;color:#fff;text-shadow:0 1px 10px rgba(0,0,0,.55)}
.mr-stage figcaption b{display:block;font-size:20px}
@media (max-width:900px){.mr-in{grid-template-columns:1fr}.mr-stage{max-width:520px}}
/* Rob's story, chapter by chapter */
.rs-ch{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(32px,5vw,64px);align-items:center;margin-top:clamp(48px,7vw,88px)}
.rs-ch:nth-of-type(even){grid-template-columns:1fr 1.25fr}
.rs-ch:nth-of-type(even) figure{order:2}
.rs-ch figure{margin:0}
.rs-ch img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:6px;display:block}
.rs-yr{font-size:15px;font-weight:600;color:#3f6b3a}
.rs-ch h3{margin-top:10px;font-size:clamp(28px,3vw,38px);font-weight:600;line-height:1.08;letter-spacing:-.025em}
.rs-ch h3+p{margin-top:16px;font-size:18px;line-height:1.6}
.rs-q{margin:22px 0 0;padding:18px 20px;background:var(--card,#fff);border-radius:10px}
.rs-q p{margin-top:6px;font-size:16px;line-height:1.5}
.rs-q cite{display:block;margin-top:8px;font-style:normal;font-size:13px;color:var(--mute)}
.rs .pg-note{margin-top:48px}
@media (max-width:900px){.rs-ch,.rs-ch:nth-of-type(even){grid-template-columns:1fr}.rs-ch:nth-of-type(even) figure{order:0}}
@media (max-width:640px){.mr-facts{gap:16px;flex-wrap:nowrap}.mr-facts li{flex:1}.mr-facts b{font-size:21px}.mr-facts span{font-size:13px}}
/* Meet Rob, one portrait: it settles from a slight zoom as the band scrolls in; a clear way to book with him */
.mr-stage{box-shadow:0 40px 80px -40px rgba(0,0,0,.6)}
.mr-stage .mr-f{opacity:1;transform:scale(1.06);transition:transform 1.8s var(--ease,cubic-bezier(.16,1,.3,1))}
.mr-stage.in .mr-f{transform:none}
.mr-stage::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 62%,rgba(0,0,0,.45));pointer-events:none}
.mr-stage figcaption{z-index:1}
.mr-cta{display:inline-flex;align-items:center;gap:10px;margin-top:36px;background:#fff;color:var(--ink,#142019);border-radius:999px;padding:16px 26px;font-weight:600;font-size:16px;transition:background .35s var(--ease,ease),transform .35s var(--ease,ease)}
.mr-cta:hover{background:var(--accent,#94C83D);transform:translateY(-1px)}
@media (prefers-reduced-motion:reduce){.mr-stage .mr-f{transform:none;transition:none}}
@media (max-width:640px){.mr-cta{width:100%;justify-content:center}}
.mr-facts span{display:block;line-height:1.35;margin-top:4px}
@media (max-width:900px){.mr-stage{order:-1;width:100%;max-width:520px;aspect-ratio:4/4.4}.mr-in{gap:36px}}
/* hero options switcher (only on ?heroes links) */
.hv-sw{position:absolute;z-index:6;left:50%;transform:translateX(-50%);bottom:clamp(16px,3vw,32px);display:flex;align-items:center;gap:4px;padding:6px;border-radius:999px;background:rgba(10,16,12,.62);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.18);color:#fff;font-size:14px;font-weight:600}
.hv-sw span{padding:0 10px;white-space:nowrap}
.hv-sw button{width:36px;height:36px;border-radius:50%;color:#fff;font-size:20px;line-height:1;display:grid;place-items:center;transition:background .3s}
.hv-sw button:hover{background:rgba(255,255,255,.16)}
.hv-sw .hv-re{font-size:16px}
@media (max-width:640px){.hv-sw{left:12px;right:12px;transform:none;top:96px;bottom:auto;justify-content:space-between}}
.hv-sw{flex-direction:column;align-items:stretch;gap:2px;border-radius:18px;padding:6px 8px}
.hv-row{display:flex;align-items:center;gap:2px}
.hv-row b{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.6);width:68px;padding-left:6px}
.hv-row span{flex:1;min-width:190px;text-align:center}
@media (max-width:640px){.hv-sw{flex-direction:column}.hv-row span{min-width:0;font-size:13px}.hv-row b{width:60px}}
/* switcher headlines wrap inside the text column, never under the booking card */
.hero h1.hv-h{white-space:normal;max-width:100%}
.hero h1.hv-h .mask>span{white-space:normal}
@media (max-width:699px){.hero h1.hv-h br{display:none}}

/* a fine film grain over Rob's photos, so the portraits read as photographs rather than flat renders */
.mr-stage::after,.rs-ch figure::after,.grain::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;opacity:.6;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");background-size:200px 200px}
.rs-ch figure,.grain{position:relative;display:block;overflow:hidden}
.mr-stage figcaption{z-index:2}

/* a lighter film grain over every photo (Rob's portraits keep their stronger one above); ::before is free on all of these */
:is(.lv-stage,.bk-media,.slider,.ptop,.post-fig,.hero-bg,.ph-bg,.nc-img,.nc-cta,.ac-card,.pg-card-ph,.pg-feat-ph,.pg-gal figure,.pg-w,.pimg,.rq-ph,.fx-cta,.svx-float,.sv-ph,.jr .ph,.sm-f,.st-f,.pg-svc-ph,.cf-stage)::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:1;opacity:.28;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");background-size:200px 200px}
:is(.pg-card-ph,.pg-feat-ph,.pg-gal figure,.jr .ph,.sm-f,.pg-svc-ph){position:relative}
/* Google's G beside review proof: the plain four-colour mark, always directly before the stars, centred on them */
.gg{display:inline-block;flex:none;width:1.05em;height:1.05em;vertical-align:-.16em}
.gg svg{display:block;width:100%;height:100%}
.gstars{display:inline-flex;align-items:center;gap:.45em;vertical-align:middle;line-height:1}
.gstars .stars{margin:0!important;display:inline-flex}
.gstars .gg{width:14px;height:14px;vertical-align:0}
:is(.pg-rq,.rs-q,.est2-q,.rx-cta blockquote)>.gstars{display:flex;margin-bottom:16px}
.pg-rq>.gstars .gg{width:16px;height:16px}
/* labels and controls that sit on grained photos stay above the grain */
.slider :is(.lab,.handle,.hint),.lv-stage .lv-read,.bk-media :is(.bk-logo,.bk-rate,.bk-cap){z-index:2}

/* how did you hear about us: one column, each answer led by its mark */
#bk .tf-heard{grid-template-columns:1fr;gap:8px;max-width:560px}
#bk .tf-heard .tf-o{min-height:60px}
#bk .tf-ic{flex:none;display:flex;align-items:center;justify-content:center;width:60px;height:28px;color:var(--ink)}
#bk .tf-ic svg{width:24px;height:24px}
#bk .tf-o{--ring:var(--card)}
#bk .tf-o.on{--ring:color-mix(in srgb,var(--card) 88%,var(--ink))}
#bk .tf-ic.st i{position:relative;flex:none;display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;overflow:hidden;box-shadow:0 0 0 2px var(--ring);transition:box-shadow .15s}
#bk .tf-ic.st i+i{margin-left:-6px}
#bk .tf-ic.st i:nth-child(1){z-index:3}
#bk .tf-ic.st i:nth-child(2){z-index:2}
#bk .tf-ic.st i:nth-child(3){z-index:1}
#bk .tf-ic.st i svg{width:14px;height:14px}
#bk .tf-ic.st i[style*="#fff"] svg{width:19px;height:19px}
#bk .tf-ic.st i[style*=transparent] svg{width:24px;height:24px}
#bk .tf-ic.st i[style*=transparent]:last-child{border-radius:7px}
#bk .tf-ic.st i[style*="#fff"]{box-shadow:0 0 0 2px var(--ring),inset 0 0 0 1px var(--rule-2)}
#bk .tf-opt em{font-style:normal;font-size:var(--t-xs);color:#a3341a}
#bk .tf-opt em:empty{display:none}

/* a.css */
/* Direction A: editorial premium. Söhne, limestone and forest, calm and exact. */
:root{
  --bg:#f2efe9;--bg-2:#e6e1d7;--card:#fff;--hdr-bg:rgba(242,239,233,.95);
  --ink:#142019;--ink-h:#000;--on-ink:#fff;--mute:#59625b;--ph:#9aa197;
  --rule:rgba(20,32,25,.12);--rule-2:rgba(20,32,25,.24);--rule-inv:rgba(255,255,255,.14);
  --accent:#bccb8e;--accent-h:#c9d79c;--on-accent:#142019;--accent-l:#bccb8e;--on-accent-l:#142019;
  --dark:#111a14;
  --f:"Sohne","Helvetica Neue",Helvetica,Arial,sans-serif;--fd:var(--f);
  --map-road:#c9c3b6;--map-mute:#5d665f;--map-ink:#142019;--map-dot:#142019;
}
h1,h2,h3{font-weight:600;letter-spacing:-.035em;line-height:1}
h2{font-size:clamp(36px,4.8vw,70px)}
.tag{display:inline-flex;align-items:center;gap:10px;font-size:14px;font-weight:500}
.tag::before{content:"";width:9px;height:9px;background:var(--accent);border-radius:50%}
.logo-t{font-size:15px;line-height:1.15;font-weight:600;letter-spacing:-.015em}
.logo-t span{display:block;color:var(--mute);font-weight:400;font-size:13px;letter-spacing:0}

/* hero */
.hero{padding-top:clamp(32px,3.6vw,52px)}
.hero h1{font-size:clamp(46px,6.6vw,104px);letter-spacing:-.05em;line-height:.93}
.hero-row{display:grid;grid-template-columns:1fr auto;align-items:end;gap:40px}
.hero-side{width:320px;padding-bottom:8px}
.hero-side p{font-size:16.5px;color:var(--mute);line-height:1.5}
.hero-side .btn{margin-top:22px}
.hero-fig{position:relative;margin:clamp(28px,3.2vw,48px) 0 0;height:min(78vh,840px);min-height:540px;overflow:hidden;background:var(--bg-2)}
.hero-fig>img{width:100%;height:100%;object-fit:cover;object-position:50% 60%;transform:scale(1.05);transition:transform 2.4s var(--ease)}
.loaded .hero-fig>img{transform:scale(1)}
.qs{position:absolute;left:var(--gut);bottom:var(--gut);z-index:2;width:420px;background:var(--card);padding:24px 24px 16px;box-shadow:0 30px 60px -30px rgba(10,16,12,.45)}
@media (min-width:1457px){.qs{left:calc((100vw - 1360px)/2 + var(--gut))}}
.qs-h{display:flex;justify-content:space-between;gap:16px;font-size:13px;font-weight:500;color:var(--mute)}
.qs-h span:first-child{display:flex;align-items:center;gap:8px;color:var(--ink)}
.qs-h span:first-child::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent)}
.qs h3{font-size:24px;letter-spacing:-.025em;line-height:1.12;margin:10px 0 16px}
.rows{display:grid;gap:8px}
.row{display:grid;grid-template-columns:1fr 32px;align-items:center;gap:12px;width:100%;text-align:left;padding:12px 12px 12px 16px;border:1px solid var(--rule-2);background:var(--card);color:var(--ink);transition:border-color .2s}
.row b{display:block;font-weight:500;font-size:16px;letter-spacing:-.01em}
.row small{display:block;font-size:13.5px;color:var(--mute);margin-top:1px}
.row .ar{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--rule-2);transition:all .2s}
.row .ar svg{width:13px;height:13px}
.row:hover{border-color:var(--ink)}
.row:hover .ar{background:var(--accent);border-color:var(--accent)}
.qs-more{margin-top:12px;font-size:14.5px;font-weight:500;color:var(--mute);display:inline-flex;align-items:center;gap:8px;text-align:left}
.qs-more svg{width:13px;height:13px}
.qs-more:hover{color:var(--ink)}
.fig-cap{position:absolute;right:var(--gut);bottom:var(--gut);font-size:13px;font-weight:500;color:var(--ink);background:rgba(255,255,255,.9);padding:8px 12px;border-radius:999px}
.specs{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid var(--rule)}
.specs div{padding:30px 24px 32px 0}
.specs div+div{padding-left:24px;border-left:1px solid var(--rule)}
.specs b{display:block;font-size:clamp(30px,3vw,46px);font-weight:300;letter-spacing:-.045em;line-height:1}
.specs b small{font-size:.5em;color:var(--mute);letter-spacing:0;margin-left:2px}
.specs div>span{display:block;margin-top:10px;font-size:14.5px;color:var(--mute);line-height:1.4}

/* section scaffolding */
.sec{padding:clamp(88px,10vw,150px) 0}
.sec-head{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,96px);align-items:end;margin-bottom:clamp(44px,5vw,72px)}
.sec-head .tag{margin-bottom:24px}
.sec-head p{color:var(--mute);font-size:18px;max-width:30em;justify-self:end}

/* services index with a photo that follows the cursor */
.svx{position:relative;border-top:1px solid var(--ink)}
.svx-row{position:relative;display:grid;grid-template-columns:64px minmax(0,1fr) auto 56px;align-items:center;gap:28px;padding:24px 0 26px;border-bottom:1px solid var(--rule-2);transition:opacity .4s var(--ease)}
.svx-n{font-size:14px;color:var(--mute);font-variant-numeric:tabular-nums;font-weight:500}
.svx-t{font-size:clamp(28px,4vw,60px);font-weight:600;letter-spacing:-.045em;line-height:1;transition:transform .9s var(--ease)}
.svx-d{font-size:15px;color:var(--mute);text-align:right;transition:color .3s}
.svx-ar{width:54px;height:54px;border-radius:50%;border:1px solid var(--rule-2);display:grid;place-items:center;transition:background .3s,border-color .3s,transform .5s var(--ease)}
.svx-ar svg{width:16px;height:16px}
.svx-m{display:none}
.svx:hover .svx-row{opacity:.3}
.svx .svx-row:hover{opacity:1}
.svx-row:hover .svx-t{transform:translateX(22px)}
.svx-row:hover .svx-d{color:var(--ink)}
.svx-row:hover .svx-ar{background:var(--accent);border-color:var(--accent);transform:rotate(-45deg)}
.svx-float{position:absolute;top:0;left:0;z-index:4;width:320px;aspect-ratio:4/5;margin:0;pointer-events:none;overflow:hidden;opacity:0;scale:.92;transition:opacity .6s var(--ease),scale .9s var(--ease);box-shadow:0 40px 70px -30px rgba(10,16,12,.5)}
.svx-float.on{opacity:1;scale:1}
.svx-float img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.04);transition:opacity .7s var(--ease-io),transform 1.6s var(--ease)}
.svx-float img.on{opacity:1;transform:none}

/* napkin statement + before/after */
.napkin{background:var(--bg-2)}
.napkin .tag{margin-bottom:28px}
.statement{font-size:clamp(28px,3.5vw,52px);font-weight:300;letter-spacing:-.03em;line-height:1.12;max-width:21em}
.statement em{font-style:normal;color:var(--mute)}
.ba-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(40px,6vw,96px);align-items:end;margin-top:clamp(56px,6vw,96px)}
.ba-dl{border-top:1px solid var(--ink)}
.ba-dl div{display:grid;grid-template-columns:110px 1fr;gap:16px;padding:14px 0;border-bottom:1px solid var(--rule-2);font-size:15.5px}
.ba-dl dt{color:var(--mute)}
.ba-note{margin-top:18px;font-size:13px;color:var(--mute)}

/* process */
.proc-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(40px,7vw,120px);align-items:start}
.proc-sticky{position:sticky;top:110px}
.proc-sticky .tag{margin-bottom:24px}
.pimg{position:relative;aspect-ratio:4/4.6;margin-top:36px;overflow:hidden;background:var(--bg-2)}
.pimg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.03);transition:opacity 1.1s var(--ease-io),transform 2.2s var(--ease)}
.pimg img.on{opacity:1;transform:none}
.pimg .pn{position:absolute;left:16px;bottom:16px;z-index:1;background:var(--card);font-size:13px;font-weight:500;padding:7px 12px;border-radius:999px}
.pstep{padding:44px 0 46px;border-top:1px solid var(--rule-2);color:var(--mute);transition:color .5s var(--ease)}
.pstep .n,.pstep h3{transition:color .5s var(--ease)}
.pstep:last-child{border-bottom:1px solid var(--rule-2)}
.pstep.on{color:var(--ink)}
.pstep:not(.on) p,.pstep:not(.on) .meta span{color:var(--mute)}
.pstep:not(.on) .mimg img{filter:grayscale(.6)}
.pstep .n{display:block;font-size:44px;font-weight:300;letter-spacing:-.04em;line-height:1}
.pstep h3{font-size:clamp(26px,2.4vw,34px);letter-spacing:-.03em;margin:22px 0 14px}
.pstep p{color:#39423b;font-size:17.5px;line-height:1.6;max-width:32em}
.pstep .meta{display:flex;gap:8px;flex-wrap:wrap;margin-top:20px}
.pstep .meta span{font-size:13.5px;font-weight:500;border:1px solid var(--rule-2);padding:6px 12px;border-radius:999px}
.pstep .mimg{display:none}

/* story, timeline, testimonial */
.story-grid{display:grid;grid-template-columns:5fr 7fr;gap:clamp(40px,7vw,120px)}
.year{font-size:clamp(96px,14vw,210px);font-weight:300;letter-spacing:-.065em;line-height:.8}
.year-cap{margin-top:24px;font-size:16px;color:var(--mute);max-width:20em}
.story-txt .tag{margin-bottom:24px}
.story-txt h2{max-width:13em}
.story-txt p.body{margin-top:28px;font-size:19px;line-height:1.6;color:#2b342e;max-width:36em}
.people{display:flex;gap:48px;margin-top:36px;flex-wrap:wrap}
.people b{display:block;font-weight:500;font-size:17px}
.people span{font-size:14.5px;color:var(--mute)}
.tl{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;margin-top:clamp(64px,7vw,104px);padding-top:38px}
.tl-track{position:absolute;left:0;right:0;top:9px;height:1px;background:var(--rule-2)}
.tl-track i{position:absolute;inset:0;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform 2.2s var(--ease)}
.tl.in .tl-track i{transform:none}
.tl-dot{position:absolute;top:-38px;width:19px;height:19px;border-radius:50%;background:var(--bg);border:1px solid var(--rule-2);transition:background .4s,border-color .4s}
.tl-dot::after{content:"";position:absolute;inset:5px;border-radius:50%;background:var(--ink);transform:scale(0);transition:transform .4s var(--ease)}
.tl.in .tl-dot{border-color:var(--ink)}
.tl.in .tl-dot::after{transform:scale(1)}
.tl.in .tl-i:last-child .tl-dot{background:var(--accent);border-color:var(--ink)}
.tl-i{position:relative;opacity:0;transform:translateY(12px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.tl.in .tl-i{opacity:1;transform:none}
.tl-i:nth-child(3),.tl-i:nth-child(3) .tl-dot::after{transition-delay:.45s}
.tl-i:nth-child(4),.tl-i:nth-child(4) .tl-dot::after{transition-delay:.9s}
.tl-i:nth-child(5),.tl-i:nth-child(5) .tl-dot::after{transition-delay:1.35s}
.tl-i b{display:block;font-size:clamp(28px,2.8vw,42px);font-weight:300;letter-spacing:-.04em;line-height:1}
.tl-i p{color:var(--mute);font-size:15.5px;margin-top:12px;max-width:18em}
.rq{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,6vw,96px);align-items:center;margin-top:clamp(72px,8vw,120px)}
.rq-ph{position:relative;aspect-ratio:4/5;overflow:hidden;margin:0;background:var(--bg-2)}
.rq-ph img{width:100%;height:100%;object-fit:cover}
.rq-ph figcaption{position:absolute;left:16px;bottom:16px;display:flex;align-items:center;gap:10px;background:var(--card);padding:10px 14px;font-size:13.5px;font-weight:500}
.stars{display:flex;gap:3px}
.stars svg{width:13px;height:13px;fill:var(--star,#F5A623)}
.rq-body .tag{margin-bottom:28px}
.rq-slides{display:grid}
.rq-s{grid-area:1/1;opacity:0;transform:translateY(6px);transition:opacity 1.2s var(--ease-io),transform 1.6s var(--ease);pointer-events:none}
.rq-s.on{opacity:1;transform:none;pointer-events:auto}
.rq-s p{font-size:clamp(26px,2.7vw,42px);font-weight:300;letter-spacing:-.035em;line-height:1.16;text-indent:-.42em}
.rq-s p::before{content:"\201C"}
.rq-s p::after{content:"\201D"}
.rq-s footer{display:flex;gap:16px;align-items:baseline;margin-top:30px;font-size:15px;flex-wrap:wrap}
.rq-s footer b{font-weight:500}
.rq-s footer span{color:var(--mute)}
.rq-nav{display:flex;align-items:center;gap:10px;margin-top:44px}
.rq-b{width:50px;height:50px;border-radius:50%;border:1px solid var(--rule-2);display:grid;place-items:center;transition:background .2s,border-color .2s}
.rq-b:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.rq-b svg{width:15px;height:15px}
.rq-count{margin-left:14px;font-size:14px;color:var(--mute);font-variant-numeric:tabular-nums}
.rq-count b{color:var(--ink);font-weight:500}
.rq-bar{flex:1;max-width:220px;height:2px;background:var(--rule);margin-left:10px;overflow:hidden}
.rq-bar i{display:block;height:100%;width:100%;background:var(--ink);transform:scaleX(0);transform-origin:left}
.rq-bar i.run{transition:transform 10s linear;transform:none}

/* areas: dark map over contour lines */
.areas{position:relative;overflow:hidden;background:var(--dark);color:#fff}
.areas .topo{position:absolute;inset:0;width:100%;height:100%;color:#fff;opacity:.08;pointer-events:none}
.areas .wrap{position:relative}
.areas-grid{display:grid;grid-template-columns:6fr 6fr;gap:clamp(40px,7vw,120px);align-items:center}
.areas .tag{margin-bottom:24px}
.areas p.l{margin-top:24px;color:rgba(255,255,255,.74);font-size:18px;max-width:26em}
.area-list{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:0 32px;margin-top:40px;border-top:1px solid rgba(255,255,255,.85)}
.area-list li{display:flex;justify-content:space-between;align-items:baseline;padding:15px 0;border-bottom:1px solid var(--rule-inv);font-size:clamp(18px,1.5vw,22px);letter-spacing:-.02em}
.area-list b{font-weight:500}
.area-list li span{font-size:12.5px;font-weight:500;background:var(--accent);color:var(--on-accent);padding:3px 9px;border-radius:999px;letter-spacing:0}
.areas-map{max-width:520px;justify-self:end;width:100%}
.areas{--map-road:#3a4a3f;--map-mute:rgba(255,255,255,.72);--map-ink:#fff;--map-dot:#e8ede6}
.areas .m-rl{fill:#8c9a8f}
.areas-map .cap{display:flex;gap:18px;flex-wrap:wrap;margin-top:12px;font-size:13px;color:rgba(255,255,255,.74)}
.areas-map .cap span{display:flex;align-items:center;gap:7px}
.areas-map .cap i{width:9px;height:9px;background:var(--accent)}
.areas-map .cap i.d{border-radius:50%;background:#e8ede6;width:7px;height:7px}

/* consultation */
.est{background:var(--bg-2)}
.est-grid{display:grid;grid-template-columns:5fr 6fr;gap:clamp(40px,7vw,120px);align-items:start}
.est .tag{margin-bottom:24px}
.est-l>p{color:var(--mute);font-size:18px;margin-top:24px;max-width:24em}
.est-steps{margin-top:48px;border-top:1px solid var(--ink)}
.est-steps div{display:grid;grid-template-columns:48px 1fr;padding:20px 0;border-bottom:1px solid var(--rule-2)}
.est-steps i{font-style:normal;color:var(--mute);font-weight:500}
.est-steps b{display:block;font-weight:500}
.est-steps span{color:var(--mute);font-size:15.5px}
.est-call{margin-top:40px;font-size:15px;color:var(--mute)}
.est-call a{display:block;color:var(--ink);font-size:30px;font-weight:600;letter-spacing:-.03em;margin-top:4px}
.start{background:var(--card);padding:clamp(24px,3.2vw,44px)}
.start .qs-h{margin-bottom:12px}
.start h3{font-size:clamp(26px,2.4vw,34px);letter-spacing:-.03em;line-height:1.08;margin-bottom:8px}
.start p.sub{color:var(--mute);font-size:16px;margin-bottom:24px}
.start .rows{grid-template-columns:1fr 1fr}
.start-foot{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:22px;padding-top:18px;border-top:1px solid var(--rule);font-size:14px;color:var(--mute);flex-wrap:wrap}
.start-foot kbd{font:inherit;font-size:12px;border:1px solid var(--rule-2);padding:1px 6px}

/* journal */
.jr-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);grid-template-rows:auto auto;gap:28px 48px}
.jr{display:block}
.jr .ph{aspect-ratio:3/2;overflow:hidden;background:var(--bg-2)}
.jr img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
.jr:hover img{transform:scale(1.04)}
.jr .meta{display:flex;gap:10px;margin-top:18px;font-size:13.5px;font-weight:500;color:var(--mute)}
.jr .meta b{font-weight:500;color:var(--ink)}
.jr h3{font-size:clamp(20px,1.6vw,24px);letter-spacing:-.02em;line-height:1.2;margin-top:10px}
.jr:first-child{grid-row:1/3}
.jr:first-child .ph{aspect-ratio:4/3.1}
.jr:first-child h3{font-size:clamp(26px,2.5vw,38px);letter-spacing:-.03em}
.jr:not(:first-child){display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);column-gap:24px;align-content:start;padding-bottom:28px;border-bottom:1px solid var(--rule-2)}
.jr:not(:first-child) .ph{grid-row:1/4;aspect-ratio:1}
.jr:not(:first-child)>:not(.ph){grid-column:2}
.jr:not(:first-child) .meta{margin-top:0}

/* faq */
:where(#journal)+.faq{padding-top:0}  /* only after the blog (same background, already ends in padding); :where keeps it weak enough for the phone spacing to win */
.faq-grid{display:grid;grid-template-columns:5fr 7fr;gap:clamp(40px,7vw,120px)}
.faq .tag{margin-bottom:24px}
details{border-bottom:1px solid var(--rule-2)}
details:first-child{border-top:1px solid var(--ink)}
summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:24px;padding:26px 0;font-size:clamp(19px,1.6vw,23px);font-weight:500;letter-spacing:-.02em;line-height:1.3}
summary::-webkit-details-marker{display:none}
summary i{width:22px;height:22px;flex:none;position:relative;margin-top:3px}
summary i::before,summary i::after{content:"";position:absolute;left:3px;right:3px;top:50%;height:1.5px;background:var(--ink);transition:transform .3s var(--ease)}
summary i::after{transform:rotate(90deg)}
details[open] summary i::after{transform:rotate(0)}
details p{padding:0 48px 30px 0;color:var(--mute);font-size:17px;max-width:42em}

/* images unmask as they enter */
.rv .ph,.rv.pimg{transition:none}

/* footer with oversized wordmark */
.fx{background:var(--dark);color:rgba(255,255,255,.74);font-size:15.5px}
.fx-cta{position:relative;min-height:min(80vh,740px);display:flex;align-items:flex-end;overflow:hidden;color:#fff}
.fx-cta>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 45%}
.fx-cta::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,16,12,.2),rgba(10,16,12,.35) 40%,rgba(10,16,12,.94))}
.fx-cta-in{position:relative;z-index:1;width:100%;padding-bottom:clamp(48px,6vw,88px)}
.fx-cta .tag{color:#fff;margin-bottom:22px}
.fx-cta h2{font-size:clamp(46px,7.4vw,118px);letter-spacing:-.052em;line-height:.92}
.fx-act{display:flex;align-items:center;gap:36px;flex-wrap:wrap;margin-top:40px}
.fx-act .btn{height:60px;padding:0 30px;font-size:16.5px}
.fx-ph{font-size:clamp(24px,2.2vw,32px);font-weight:600;letter-spacing:-.03em;line-height:1.1}
.fx-ph small{display:block;font-size:13px;font-weight:400;letter-spacing:0;color:rgba(255,255,255,.78);margin-bottom:4px}
.fx-main{position:relative;overflow:hidden;padding-top:clamp(64px,7vw,104px)}
.fx-grid{display:grid;grid-template-columns:minmax(0,5fr) repeat(2,minmax(0,2fr)) minmax(0,3fr);gap:36px}
.fx-logo{display:flex;align-items:center;gap:14px;color:#fff;font-size:17px;font-weight:600;letter-spacing:-.015em;line-height:1.15}
.fx-logo .mark{width:48px;height:48px}
.fx-logo small{display:block;font-weight:400;font-size:13px;color:rgba(255,255,255,.74);letter-spacing:0}
.fx-brand p{margin-top:22px;max-width:23em;line-height:1.5}
.fx-now{display:flex;align-items:center;gap:10px;font-size:14px;color:rgba(255,255,255,.84)}
.fx-now i{width:8px;height:8px;border-radius:50%;background:#4cc27a;animation:live 2.4s infinite}
@keyframes live{0%{box-shadow:0 0 0 0 rgba(76,194,122,.6)}70%{box-shadow:0 0 0 8px rgba(76,194,122,0)}100%{box-shadow:0 0 0 0 rgba(76,194,122,0)}}
.fx-col{display:flex;flex-direction:column;gap:10px}
.fx-col .fx-h{color:#fff;font-weight:500;font-size:14px;margin-bottom:8px;letter-spacing:0;line-height:1.4}
.fx-col a{width:fit-content;background:linear-gradient(var(--accent),var(--accent)) 0 100%/0 1px no-repeat;transition:color .2s,background-size .35s var(--ease)}
.fx-col a:hover{color:#fff;background-size:100% 1px}
.fx-big{font-size:26px;font-weight:600;letter-spacing:-.03em;color:#fff}
.fx-coord{font-variant-numeric:tabular-nums;color:rgba(255,255,255,.74);font-size:13.5px;margin-top:6px}
.fx-contact .ph-note{margin-left:6px}
.fx-word{margin-top:clamp(20px,3vw,40px);line-height:.74;user-select:none;overflow:hidden}
.fx-word span{display:block;text-align:center;font-weight:600;font-size:clamp(80px,21vw,340px);letter-spacing:-.065em;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.26);background:linear-gradient(90deg,var(--accent),var(--accent)) no-repeat 0 0/0 100%;-webkit-background-clip:text;background-clip:text;transition:background-size 1.6s var(--ease);transform:translateY(8%)}
.fx-word:hover span{background-size:100% 100%}
.fx-bot{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;padding-top:22px;padding-bottom:26px;border-top:1px solid var(--rule-inv);font-size:13px;position:relative;z-index:1;background:var(--dark)}
.fx-top{display:inline-flex;align-items:center;gap:8px;color:#fff;font-weight:500}
.fx-top svg{width:13px;height:13px}

/* responsive */
@media (max-width:1180px){
  .hero-row,.sec-head,.story-grid,.areas-grid,.est-grid,.faq-grid,.ba-grid,.proc-grid{grid-template-columns:1fr}
  .sec-head p{justify-self:start}
  .hero-side{width:auto;max-width:520px}
  .areas-map{justify-self:start}
  .proc-sticky{position:static}
  .pimg{display:none}
  .pstep{color:var(--ink);padding:32px 0}
  .pstep .mimg{display:block;aspect-ratio:16/10;overflow:hidden;margin-bottom:22px}
  .pstep .mimg img{width:100%;height:100%;object-fit:cover}
  .fx-grid{grid-template-columns:1fr 1fr 1fr}
  .fx-brand{grid-column:1/-1}
}
@media (max-width:960px){
  .specs{grid-template-columns:1fr 1fr}
  .specs div:nth-child(3){padding-left:0;border-left:0}
  .specs div:nth-child(n+3){border-top:1px solid var(--rule)}
  .svx-row{grid-template-columns:84px minmax(0,1fr) 44px;gap:4px 18px;padding:18px 0}
  .svx-n{display:none}
  .svx-m{display:block;grid-row:1/3;width:84px;height:84px;object-fit:cover}
  .svx-t{font-size:26px;letter-spacing:-.035em;align-self:end}
  .svx-d{grid-column:2;text-align:left;font-size:14px;align-self:start}
  .svx-ar{grid-column:3;grid-row:1/3;width:44px;height:44px}
  .svx:hover .svx-row{opacity:1}
  .svx-row:hover .svx-t{transform:none}
  .svx-float{display:none}
  .tl{grid-template-columns:1fr 1fr;row-gap:40px}
  .tl-track{display:none}
  .rq{grid-template-columns:1fr}
  .rq-ph{aspect-ratio:16/11}
  .jr-grid{grid-template-columns:1fr}
  .jr:first-child{grid-row:auto}
  .start .rows{grid-template-columns:1fr}
}
@media (max-width:640px){
  .hdr-in{height:70px}
  :root{--hdr-h:70px}
  .logo .mark{width:34px;height:34px}
  .hero{padding-top:28px}
  .hero h1{font-size:44px}
  .hero-side .btn{display:none}
  .hero-fig{height:auto;min-height:0;margin-top:24px;overflow:visible}
  .hero-fig>img{aspect-ratio:4/5;height:auto;object-position:58% 50%}
  .fig-cap{top:16px;bottom:auto;right:16px}
  .qs{position:static;width:auto;padding:24px var(--gut);box-shadow:none;border-bottom:1px solid var(--rule)}
  .specs div{padding:22px 12px 24px 0}
  .specs div:nth-child(even){padding-left:14px}
  .specs div>span{font-size:13.5px}
  .svx-row{grid-template-columns:72px minmax(0,1fr) 40px}
  .svx-m{width:72px;height:72px}
  .svx-t{font-size:21px}
  .svx-ar{width:40px;height:40px}
  .ba-dl div{grid-template-columns:90px 1fr}
  .slider{aspect-ratio:4/3.6}
  .tl{grid-template-columns:1fr;row-gap:28px;padding-top:0}
  .tl-i{padding-left:34px}
  .tl-dot{top:6px;left:0}
  .rq-s p{font-size:24px}
  .rq-nav{margin-top:30px}
  .rq-bar{display:none}
  .area-list{grid-template-columns:1fr}
  .jr:not(:first-child){grid-template-columns:110px minmax(0,1fr)}
  details p{padding-right:0}
  .fx-cta{min-height:560px}
  .fx-act{gap:22px}
  .fx-grid{grid-template-columns:1fr 1fr;gap:32px 20px}
  .fx-contact{grid-column:1/-1}
  .fx-bot{flex-direction:column;align-items:flex-start;gap:8px;padding-bottom:96px}
}

/* ---- v2 hero: contractor-first, form on load ---- */
.logo .mono{width:58px;height:auto;display:block}
.logo-t{font-size:17px;line-height:1.05;font-weight:600;letter-spacing:-.02em}
.logo-t span{font-size:13.5px;color:var(--mute);font-weight:400;margin-top:2px}
.hero{position:relative;padding:0;min-height:min(calc(100vh - 84px),860px);display:flex;align-items:center;overflow:hidden;background:var(--dark);color:#fff}
.hero-bg{position:absolute;inset:0}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:50% 62%;transform:scale(1.06);transition:transform 2.6s var(--ease)}
.loaded .hero-bg img{transform:none}
.hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(9,15,11,.86) 0%,rgba(9,15,11,.7) 42%,rgba(9,15,11,.25) 68%,rgba(9,15,11,.1)),linear-gradient(0deg,rgba(9,15,11,.55),rgba(9,15,11,0) 35%)}
.hero-in{position:relative;z-index:1;width:100%;display:grid;grid-template-columns:minmax(0,1fr) 410px;gap:clamp(32px,4.4vw,72px);align-items:center;padding-top:56px;padding-bottom:56px}
.hero h1{font-size:clamp(46px,5.9vw,92px);letter-spacing:-.05em;line-height:.94;color:#fff;white-space:nowrap}
.hero-copy>p{font-size:clamp(17px,1.35vw,20px);line-height:1.5;color:rgba(255,255,255,.9);max-width:32em;margin-top:28px}
.proof{list-style:none;display:flex;flex-wrap:wrap;gap:10px 28px;margin-top:30px;font-size:15px;color:rgba(255,255,255,.92)}
.proof li{display:flex;align-items:center;gap:10px}
.proof li+li::before{content:"";width:4px;height:4px;border-radius:50%;background:rgba(255,255,255,.5);margin-right:18px}
.proof a{font-weight:600;color:#fff}
.proof .stars svg{width:14px;height:14px;fill:var(--star,#F5A623)}
.hero-form .hf{box-shadow:0 40px 80px -30px rgba(0,0,0,.6)}
.hero .hf-t{font-size:27px}
.specs{border-top:0}
.ba-h{margin-bottom:22px}
@media (max-width:1180px){.hero-in{grid-template-columns:1fr}.hero-form{max-width:560px}.hero{min-height:0}}
@media (max-width:640px){
  .hero{display:block;background:var(--bg);color:var(--ink)}
  .hero-bg{position:relative;height:300px}
  .hero-bg::after{background:linear-gradient(0deg,rgba(9,15,11,.35),rgba(9,15,11,0) 50%)}
  .hero-in{padding-top:26px;padding-bottom:30px;gap:24px}
  .hero h1{font-size:42px;color:var(--ink)}
  .hero-copy>p{color:var(--mute);font-size:16.5px;margin-top:18px}
  .proof{color:var(--ink);font-size:14px;margin-top:20px}.proof a{color:var(--ink)}.proof li+li::before{background:var(--rule-2);margin-right:10px}
  .hero-form .hf{box-shadow:none;border:1px solid var(--rule-2)}
  .logo .mono{width:46px}
}
.svx-n{display:none}
.svx-row{grid-template-columns:minmax(0,1fr) auto 56px}
@media (max-width:960px){.svx-row{grid-template-columns:84px minmax(0,1fr) 44px}}
@media (max-width:640px){.svx-row{grid-template-columns:72px minmax(0,1fr) 40px}}

/* ---- full-image hero with a header that stays clear until you scroll ---- */
.dir-a .hdr{position:fixed;left:0;right:0;top:0;transition:background-color .35s,box-shadow .35s}
.logo .on-dark{display:none}
body.dir-a:not(.mm-on):not(.menu-open) .hdr:not(.scrolled){background:linear-gradient(180deg,rgba(6,10,7,.55),rgba(6,10,7,0));-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none}
body.dir-a:not(.mm-on):not(.menu-open) .hdr:not(.scrolled) .on-light{display:none}
body.dir-a:not(.mm-on):not(.menu-open) .hdr:not(.scrolled) .on-dark{display:block}
body.dir-a:not(.mm-on):not(.menu-open) .hdr:not(.scrolled) .logo-t,
body.dir-a:not(.mm-on):not(.menu-open) .hdr:not(.scrolled) .logo-t span,
body.dir-a:not(.mm-on):not(.menu-open) .hdr:not(.scrolled) .nav>a,
body.dir-a:not(.mm-on):not(.menu-open) .hdr:not(.scrolled) .nav>button,
body.dir-a:not(.mm-on):not(.menu-open) .hdr:not(.scrolled) .hdr-ph{color:#fff}
body.dir-a:not(.mm-on):not(.menu-open) .hdr:not(.scrolled) .hdr .btn-ink,
body.dir-a:not(.mm-on):not(.menu-open) .hdr:not(.scrolled) .hdr-r .btn{background:#fff;color:var(--ink)}
body.dir-a:not(.mm-on):not(.menu-open) .hdr:not(.scrolled) .burger{border-color:rgba(255,255,255,.6)}
body.dir-a:not(.mm-on):not(.menu-open) .hdr:not(.scrolled) .burger i{background:#fff}
body.dir-a:not(.mm-on):not(.menu-open) .hdr:not(.scrolled)::after{opacity:0}
.dir-a .hero{min-height:100vh;min-height:100svh;padding-top:84px}
.dir-a .hero-in{padding-top:40px;padding-bottom:64px}
.hero .hs{box-shadow:0 40px 80px -30px rgba(0,0,0,.6)}
@media (max-width:640px){
  .dir-a .hero{padding-top:0;min-height:0}
  .dir-a .hero-bg{height:420px}
  .hero .hs{box-shadow:none;border:1px solid var(--rule-2)}
}

/* site plan: drawing over the built yard */
.plan-sec{background:var(--bg-2)}
.plan{--clay:#3E6B1F;position:relative;overflow:hidden;height:min(76vh,720px);background:var(--card);cursor:ew-resize;touch-action:pan-y;user-select:none}
.plan .built,.plan-layer,.plan-svg{position:absolute;inset:0;width:100%;height:100%}
.plan .built{object-fit:cover}
.plan-layer{background:#fbfaf6;clip-path:inset(0 0 0 var(--x))}
.plan-svg{display:block}
.plan-svg .pl{fill:none;stroke:var(--ink);stroke-width:1.6;vector-effect:non-scaling-stroke}
.plan-svg .pl.t{stroke-width:.9}
.plan-svg .pl.dim{stroke:var(--clay)}
.plan-svg .paper{fill:#fbfaf6}
.plan-svg .ht{stroke:var(--ink);stroke-width:1;opacity:.45}
.plan-svg .dt{fill:var(--ink);opacity:.3}
.plan-svg .gr{fill:none;stroke:var(--ink);stroke-width:.6;opacity:.08}
.plan-svg .nfill{fill:var(--ink)}
.plan-svg text{font:600 14px var(--f);fill:var(--ink);letter-spacing:.12em}
.plan-svg text.sm{font-size:11.5px;letter-spacing:.14em}
.plan-svg .lbl text:first-child{fill:var(--clay)}
.plan.drawn .draw .pl{stroke-dasharray:2400;stroke-dashoffset:2400;animation:draw 2.6s cubic-bezier(.4,.1,.2,1) .1s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.scan{position:absolute;top:0;bottom:0;left:var(--x);z-index:2;pointer-events:none}
.scan i{position:absolute;top:0;bottom:0;left:-1px;width:2px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.12)}
.scan span{position:absolute;top:20px;font-weight:500;font-size:13px;padding:6px 11px;border-radius:999px;white-space:nowrap}
.scan .s-l{right:12px;background:var(--ink);color:#fff}
.scan .s-r{left:12px;background:#fff;color:var(--ink);box-shadow:0 0 0 1px var(--rule-2)}
.plan-sec .ba-note{margin-top:14px}
@media (max-width:640px){.plan{height:60vh}.scan span{top:12px;font-size:12px}}
@media (prefers-reduced-motion:reduce){.plan.drawn .draw .pl{animation:none}}
/* A hero: the photo leads; the quiz is a compact card that opens on hover */
@media (min-width:901px){
  .dir-a .hero-in{grid-template-columns:minmax(0,1fr) 392px;align-items:center}
  .dir-a .hero-form{min-height:330px}
  .dir-a .hero .hs-c{border-radius:4px;padding:26px 24px 22px;background:rgba(251,250,246,.9);-webkit-backdrop-filter:blur(24px) saturate(1.5);backdrop-filter:blur(24px) saturate(1.5);box-shadow:inset 0 0 0 1px rgba(255,255,255,.5),0 30px 70px -24px rgba(0,0,0,.55)}
  .dir-a .hero .hs-c .hs-t{font-size:23px}
  .dir-a .hero .hs-c .hs-g button{background:rgba(255,255,255,.8);border-color:transparent;box-shadow:inset 0 0 0 1px rgba(20,32,25,.1)}
  .dir-a .hero .hs-c .hs-g button:hover{background:var(--ink);color:#fff}
}
.hero-bg picture{position:absolute;inset:0}
.hero-bg img{object-position:62% 55%}
/* logo lockup: the text sits on the same line as the bottom of the R and K, not centered on the leaf */
.dir-a .logo{align-items:flex-end}
.dir-a .logo-t{line-height:1}
.dir-a .logo-t span{line-height:1;margin-top:5px;margin-bottom:-.2em}
.fx-logo{align-items:flex-end}
.fx-logo>span{line-height:1}
.fx-logo small{line-height:1;margin-top:6px;margin-bottom:-.2em}
/* Rob's logo: modernized R and leaf with PREFERRED LANDSCAPING set wide and heavy (the One Color option's type).
   Both lines sit on the bottom of the R and K. The two fonts are subset to these letters only (about 3KB). */
@font-face{font-family:"RKWM";src:url(fonts/wm-bold.woff2) format("woff2");font-weight:800;font-display:block}
@font-face{font-family:"RKWM";src:url(fonts/wm-sub.woff2) format("woff2");font-weight:500;font-display:block}
.logo-rule{display:none}
.logo-w{display:flex;flex-direction:column;white-space:nowrap;font-family:"RKWM",Archivo,sans-serif;text-transform:uppercase;line-height:.8}
.logo-w b{font-weight:800;font-size:20px;letter-spacing:-.01em;line-height:.74}
.logo-w span{font-weight:500;font-size:9.6px;letter-spacing:.24em;line-height:.74;margin-top:6px;opacity:.85}
.dir-a .logo{gap:4px;color:var(--ink)}
body.dir-a:not(.mm-on):not(.menu-open) .hdr:not(.scrolled) .logo{color:#fff}
.fx-wm{gap:5px;align-items:flex-end;color:#fff}
@media (max-width:640px){.logo-w b{font-size:17px}.logo-w span{font-size:8.2px;margin-top:5px}.dir-a .logo{gap:3px}}
/* A hero quiz: dark smoked glass over the dusk photo */
@media (min-width:641px){
  .dir-a :is(.hero,.phero) .hs-c{border-radius:14px;padding:24px 24px 22px;color:#fff;
    background:linear-gradient(160deg,rgba(255,255,255,.10),rgba(255,255,255,.03) 45%),rgba(12,17,14,.46);
    -webkit-backdrop-filter:blur(26px) saturate(1.6);backdrop-filter:blur(26px) saturate(1.6);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.16),inset 0 1px 0 rgba(255,255,255,.22),0 30px 70px -24px rgba(0,0,0,.6)}
  .dir-a :is(.hero,.phero) .hs-c .hs-t{color:#fff;font-size:23px}
  .dir-a :is(.hero,.phero) .hs-c .hs-s{color:rgba(255,255,255,.82)}
  .dir-a :is(.hero,.phero) .hs-c .hs-tog{background:#fff;color:#111}
  .dir-a :is(.hero,.phero) .hs-c:is(:hover,:focus-within,.open){background:linear-gradient(160deg,rgba(255,255,255,.12),rgba(255,255,255,.04) 45%),rgba(12,17,14,.5)}
  .dir-a :is(.hero,.phero) .hs-c .hs-g button{color:#fff;background:rgba(255,255,255,.08);border:0;border-radius:10px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}
  .dir-a :is(.hero,.phero) .hs-c .hs-g button svg{opacity:.7}
  .dir-a :is(.hero,.phero) .hs-c .hs-g button:hover,.dir-a :is(.hero,.phero) .hs-c .hs-g button:focus-visible{background:#fff;color:#111;box-shadow:none}
}
/* ---- header, no glitches: the solid backdrop fades in as its own layer, logos and text cross-fade instead of swapping ---- */
.dir-a .hdr{isolation:isolate;background:linear-gradient(180deg,rgba(6,10,7,.55),rgba(6,10,7,0))!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;transition:box-shadow .45s var(--ease)}
.dir-a .hdr::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--hdr-bg);-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);opacity:1;transition:opacity .5s var(--ease)}
body.dir-a:not(.mm-on):not(.menu-open) .hdr:not(.scrolled)::before{opacity:0}
.dir-a .logo{position:relative}
.dir-a .logo .mono{display:block!important;transition:opacity .5s var(--ease)}
.dir-a .logo .on-dark{position:absolute;left:0;top:50%;transform:translateY(-50%);opacity:0}
body.dir-a:not(.mm-on):not(.menu-open) .hdr:not(.scrolled) .logo .on-light{opacity:0}
body.dir-a:not(.mm-on):not(.menu-open) .hdr:not(.scrolled) .logo .on-dark{opacity:1}
.dir-a .logo,.dir-a .logo-w b,.dir-a .logo-w span,.dir-a .nav>a,.dir-a .nav>button,.dir-a .hdr-ph,.dir-a .hdr-r .btn,.dir-a .burger,.dir-a .burger i{transition:color .5s var(--ease),background-color .5s var(--ease),border-color .5s var(--ease),opacity .5s var(--ease)}

/* ---- mega menus: the panel unrolls from the header, the page behind dims and blurs, the contents settle in one after another ---- */
.mm-scrim{position:fixed;inset:0;z-index:40;background:rgba(8,12,9,.32);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);opacity:0;pointer-events:none;transition:opacity .5s var(--ease)}
.mm-on .mm-scrim{opacity:1;pointer-events:auto}
.dir-a .mm{border-top:0;border-radius:0 0 22px 22px;box-shadow:0 60px 90px -50px rgba(10,16,12,.45);opacity:0;visibility:hidden;transform:none;
  clip-path:inset(0 0 100% 0);transition:clip-path .6s var(--ease),opacity .35s var(--ease),visibility 0s .6s}
.dir-a .mm.open{opacity:1;visibility:visible;clip-path:inset(0 0 -140px 0);transition:clip-path .6s var(--ease),opacity .25s var(--ease),visibility 0s}
.mm-sw.dir-a .mm{transition:opacity .3s var(--ease),clip-path 0s .3s,visibility 0s .3s}
.mm-sw.dir-a .mm.open{transition:opacity .3s var(--ease) .06s,clip-path 0s,visibility 0s}
.dir-a .mm :is(.mm-label,.mm-list a,.mm-all,.mm-prev,.mm-mapbox,.mm-cta){opacity:0;transform:translateY(10px);transition:opacity .45s var(--ease),transform .6s var(--ease)}
.dir-a .mm.open :is(.mm-label,.mm-list a,.mm-all,.mm-prev,.mm-mapbox,.mm-cta){opacity:1;transform:none}
.dir-a .mm.open .mm-list a:nth-child(1){transition-delay:.06s}.dir-a .mm.open .mm-list a:nth-child(2){transition-delay:.09s}
.dir-a .mm.open .mm-list a:nth-child(3){transition-delay:.12s}.dir-a .mm.open .mm-list a:nth-child(4){transition-delay:.15s}
.dir-a .mm.open .mm-list a:nth-child(5){transition-delay:.18s}.dir-a .mm.open .mm-list a:nth-child(6){transition-delay:.21s}
.dir-a .mm.open .mm-list a:nth-child(n+7){transition-delay:.24s}
.dir-a .mm.open :is(.mm-prev,.mm-mapbox){transition-delay:.12s}.dir-a .mm.open .mm-cta{transition-delay:.2s}.dir-a .mm.open .mm-all{transition-delay:.26s}
.dir-a .mm-list a{border-radius:12px;transition:background .25s,opacity .45s var(--ease),transform .6s var(--ease)}
.dir-a .mm-prev,.dir-a .mm-mapbox,.dir-a .mm-cta{border-radius:16px}
.dir-a .mm-list a:hover b{color:var(--ink)}
.dir-a .nav>button[aria-expanded="true"]{background:rgba(20,32,25,.07)}
@media (prefers-reduced-motion:reduce){.dir-a .mm,.dir-a .mm *,.mm-scrim,.dir-a .hdr::before{transition:none!important}}

/* ---- call dock, collapsed: one clean glass circle, no ring inside a ring ---- */
.dock:not(.wide) .dk-btn{background:transparent}
.dock:not(.wide) .dk-btn:hover{background:rgba(255,255,255,.12)}
.dock .dk-btn{transition:background .35s var(--dk-ease),transform .2s}
/* ---- service area: one clean list, each town with a line about it; hovering a town lights it on the map ---- */
.areas .area-list{display:block;grid-template-columns:none;margin-top:36px;border-top:1px solid rgba(255,255,255,.16)}
.areas .area-list li{display:block;padding:0;border-bottom:1px solid rgba(255,255,255,.12);font-size:inherit}
.areas .area-list li span{background:none;padding:0;border-radius:0;color:inherit;font-size:inherit}
.areas .area-list a{display:grid;grid-template-columns:22px 1fr 18px;align-items:center;gap:14px;padding:18px 12px;margin:0 -12px;border-radius:14px;transition:background .35s var(--ease)}
.areas .area-list a:hover,.areas .area-list a:focus-visible,.areas .area-list a.sel{background:rgba(255,255,255,.06)}
.areas .area-list b{display:block;font-size:clamp(19px,1.6vw,23px);font-weight:500;letter-spacing:-.02em;line-height:1.2}
.areas .area-list small{display:block;margin-top:3px;font-size:14px;color:rgba(255,255,255,.6)}
.areas .area-list a>svg{width:14px;height:14px;opacity:.4;transition:opacity .3s,transform .45s var(--ease)}
.areas .area-list a:hover>svg,.areas .area-list a.sel>svg{opacity:1;transform:translateX(4px)}
.areas .area-list a:hover b{text-decoration:none}
.ar-mk{width:9px;height:9px;border-radius:50%;background:#e8ede6;justify-self:center;transition:transform .35s var(--ease)}
.areas .area-list li.home .ar-mk{width:11px;height:11px;border-radius:2px;background:var(--accent)}
.areas .area-list a:hover .ar-mk,.areas .area-list a.sel .ar-mk{transform:scale(1.35)}
/* the map card in the dark section: glass, not a white box */
.areas .mapc{grid-template-columns:104px 1fr;gap:16px;padding:12px;margin-top:18px;border-radius:16px;color:#fff;
  background:linear-gradient(160deg,rgba(255,255,255,.10),rgba(255,255,255,.03) 50%),rgba(12,17,14,.5);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),0 24px 50px -24px rgba(0,0,0,.6)}
.areas .mapc img{width:104px;height:84px;border-radius:10px}
.areas .mapc small,.areas .mapc p{color:rgba(255,255,255,.66)}
.areas .mapc a{color:#fff}
/* phone action bar: chat is hidden until it's connected, so it's call + book */
@media (max-width:640px){.mbar>*:last-child{white-space:nowrap}}
/* headings never leave one word alone on the last line */
h1,h2,h3,.pg-h{text-wrap:balance}
p{text-wrap:pretty}
/* footer: no ghost wordmark, title block labels in plain case */
.fx-word{display:none}
.tb small{text-transform:none!important;letter-spacing:0!important;font-size:12.5px}
/* touch screens don't need keyboard hints */
@media (hover:none),(max-width:768px){.start-foot kbd,.start-foot span+span,.tf-k{display:none!important}}
/* wide tables scroll sideways on phones instead of getting cut off */
@media (max-width:640px){main table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}}
/* inline arrows stay text-sized */
.pg-inline svg,.pg-note a svg{width:.8em;height:.8em;display:inline-block;vertical-align:baseline;margin-left:3px}
.cut{display:none!important}
.pg-moreb{display:flex;margin:32px auto 0;border-radius:999px;padding:0 26px;height:50px;align-items:center}
.pg-cards{grid-template-columns:repeat(3,minmax(0,1fr))}
.rs-yr{display:none}
@media (max-width:640px){
  html body .pg-rf{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-left:calc(-1 * var(--gut,16px));margin-right:calc(-1 * var(--gut,16px));padding:0 var(--gut,16px)}
  html body .pg-rf::-webkit-scrollbar{display:none}
  html body .pg-rf button{flex:none;white-space:nowrap}  /* html body: pages.css loads later and would wrap the chips again */
  .pg-wgrid-2{grid-template-columns:1fr!important}
}
/* ---- floating dock, one job at a time ----
   At the top of the page the header already offers the phone and "Request a consultation", so the dock stays out of sight.
   Past the hero it slides in as a single "Book a consultation" pill. The call button joins it only where the header hides its phone number (tablets). */
.dock:not(.wide){opacity:0;transform:translateY(140%);pointer-events:none}
.dock .dk-btn{box-shadow:none}
@media (min-width:1181px){.dock .dk-call{display:none}}
/* hero card: centred on the copy block, so it sits beside the intro (clear of the fire pit) instead of floating by the headline; opened, it spans headline to proof row; right edge on the header button's line */
@media (min-width:1181px){
  .dir-a .hero-form{align-self:stretch;min-height:0!important;display:flex;flex-direction:column;justify-content:center}
}

/* ---- menus (concept C, chosen 2026-10-30): dark panel, a list you can read at a glance, one large image, the 3D card; the header turns the panel colour while open ---- */
.dir-a .mm.nc{background:#0E1410;color:#F2F0EA}
.nc-in{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr) minmax(0,.62fr);gap:clamp(16px,1.6vw,24px);padding-top:30px;padding-bottom:30px}
.nc-nav{display:flex;flex-direction:column;min-width:0}
.nc-t{font-size:13px;color:rgba(242,240,234,.5);margin:0 0 14px 12px}
.nc-list{display:grid;gap:0 10px;align-items:start}.nc-list.c2{grid-template-columns:1fr 1fr}
.nc-col{display:grid;gap:2px;align-content:start}
.nc-g{font-size:12.5px;color:rgba(242,240,234,.42);margin:14px 12px 4px}.nc-col>.nc-g:first-child{margin-top:0}
.nc-list a{display:flex;gap:14px;align-items:flex-start;padding:10px 12px;border-radius:12px;transition:background .35s}
.nc-list a.on{background:rgba(242,240,234,.07)}
.nc-ic svg{display:block;width:28px;height:28px;color:rgba(242,240,234,.9);margin-top:1px}
.nc-list b{display:block;font-size:15.5px;font-weight:500;letter-spacing:-.01em;color:#F2F0EA}
.nc-list small{display:block;font-size:13px;line-height:1.4;color:rgba(242,240,234,.55);margin-top:2px}
.nc-list.c1 a{padding:14px 14px}.nc-list.c1 b{font-size:18px}.nc-list.c1 small{font-size:13.5px}
.nc-more{margin-top:auto;padding:18px 0 0 12px}.nc-more a{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:rgba(242,240,234,.72)}.nc-more a:hover{color:#fff}.nc-more svg{width:12px;height:12px}
.nc-img{position:relative;border-radius:18px;overflow:hidden;min-height:420px;background:#1a211c}
.nc-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.04);transition:opacity .6s ease,transform 1.6s cubic-bezier(.2,.7,.2,1)}
.nc-img img.on{opacity:1;transform:none}
.nc-img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,12,9,0) 55%,rgba(8,12,9,.75));pointer-events:none}
.nc-cap{position:absolute;z-index:1;left:22px;right:22px;bottom:20px;display:flex;align-items:flex-end;justify-content:space-between;gap:16px;color:#fff;opacity:0;transform:translateY(6px);transition:opacity .4s,transform .6s cubic-bezier(.2,.7,.2,1);pointer-events:none}
.nc-cap.on{opacity:1;transform:none;pointer-events:auto}
.nc-cap b{font-size:24px;font-weight:600;letter-spacing:-.03em;line-height:1.05}
.nc-cap em{font-style:normal;font-size:14px;font-weight:500;display:inline-flex;align-items:center;gap:8px;white-space:nowrap}.nc-cap svg{width:13px;height:13px}
.nc-cta{position:relative;border-radius:18px;overflow:hidden;color:#fff;display:block;min-height:420px}
.nc-cta img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.6s cubic-bezier(.2,.7,.2,1)}
.nc-cta:hover img{transform:scale(1.03)}
.nc-cta::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,12,9,0) 38%,rgba(8,12,9,.9))}
.nc-cta-b{position:absolute;z-index:1;left:20px;right:20px;bottom:20px;display:grid;gap:8px}
.nc-cta-b b{font-size:20px;line-height:1.12;letter-spacing:-.025em;font-weight:600}
.nc-cta-b small{font-size:13px;line-height:1.45;color:rgba(255,255,255,.72)}
.nc-cta-b em{font-style:normal;margin-top:8px;display:flex;align-items:center;justify-content:center;gap:10px;height:44px;border-radius:999px;background:#C6D9A0;color:#0E1410;font-size:14px;font-weight:600;transition:background .3s}.nc-cta:hover .nc-cta-b em{background:#d4e6b0}.nc-cta-b em svg{width:13px;height:13px}
.dir-a .nc :is(.nc-nav,.nc-img,.nc-cta){opacity:0;transform:translateY(12px);transition:opacity .5s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.dir-a .nc.open :is(.nc-nav,.nc-img,.nc-cta){opacity:1;transform:none}
.dir-a .nc.open .nc-img{transition-delay:.07s}.dir-a .nc.open .nc-cta{transition-delay:.14s}
.dir-a .mm-scrim{background:rgba(8,12,9,.5)}
/* while a menu is open the header turns the panel's colour, so the two read as one dark surface */
body.dir-a.mm-on .hdr{--hdr-bg:#0E1410}
body.dir-a.mm-on .hdr::after{opacity:0}
body.dir-a.mm-on .hdr .logo .on-light{display:block;opacity:0}body.dir-a.mm-on .hdr .logo .on-dark{display:block;opacity:1}
body.dir-a.mm-on .hdr :is(.logo-t,.logo-t span,.logo-w b,.logo-w span,.nav>a,.nav>button,.hdr-ph){color:#F2F0EA}
body.dir-a.mm-on .hdr .hdr-r .btn{background:#F2F0EA;color:#0E1410}
body.dir-a.mm-on .hdr .nav>button[aria-expanded="true"]{background:rgba(242,240,234,.1)}

/* ---- footer: one dark-green surface with a fine grain and faint contour lines; proof and booking first, links second ---- */
.fx2{position:relative;background:#0E1410;color:#F2F0EA;overflow:hidden;isolation:isolate}
.fx2::before{content:"";position:absolute;inset:0;z-index:-1;background:url(tex/topo.svg) center/1400px auto;opacity:.06;filter:invert(1)}
.fx2::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.35;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");background-size:160px}
.fx-main.fx2{padding-top:0}
.fx2-top{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:center;padding-top:clamp(56px,6vw,88px);padding-bottom:clamp(48px,6vw,80px);border-bottom:1px solid rgba(242,240,234,.12)}
.fx2-h{font-size:clamp(38px,4.6vw,72px);line-height:.98;letter-spacing:-.045em;font-weight:600;margin:0}
.fx2-proof{display:inline-flex;align-items:center;gap:10px;margin-top:26px;font-size:15px;color:rgba(242,240,234,.8)}
.fx2-proof b{font-size:17px;color:#fff}.fx2-proof:hover span:last-child{text-decoration:underline;text-underline-offset:3px}
.fx2-card{justify-self:end;width:min(100%,420px);display:grid;gap:12px;padding:26px 26px 22px;border-radius:18px;background:rgba(242,240,234,.05);box-shadow:inset 0 0 0 1px rgba(242,240,234,.12)}
.fx2-card small{font-size:13.5px;color:rgba(242,240,234,.6)}
.fx2-ph{font-size:clamp(28px,2.6vw,36px);font-weight:600;letter-spacing:-.03em;color:#fff;line-height:1}
.fx2-card .btn{width:100%;justify-content:center;height:50px;margin-top:6px}
.fx2-hrs{font-size:13px;line-height:1.45;color:rgba(242,240,234,.55)}
.fx2-grid{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:clamp(28px,4vw,64px);padding-top:clamp(48px,6vw,72px);padding-bottom:clamp(40px,5vw,64px)}
.fx2-brand p{color:rgba(242,240,234,.62);font-size:14.5px;line-height:1.55;max-width:30em;margin-top:18px}
.fx2 .fx-col a{color:rgba(242,240,234,.72)}.fx2 .fx-col a:hover{color:#fff}
.fx2 .fx-h{color:rgba(242,240,234,.45)}
.fx2-word{font-size:clamp(84px,15.5vw,250px);font-weight:600;letter-spacing:-.06em;line-height:.8;white-space:nowrap;text-align:center;color:transparent;-webkit-text-stroke:1px rgba(242,240,234,.14);margin:0 0 -.12em;user-select:none}
.fx2-bot{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:22px;padding-bottom:26px;border-top:1px solid rgba(242,240,234,.12);font-size:13.5px;color:rgba(242,240,234,.55);position:relative;background:#0E1410}
.fx2-bot a{color:rgba(242,240,234,.7)}.fx2-bot a:hover{color:#fff}
.fx2-rc{display:inline-flex;align-items:center;gap:8px}
.fx2-rc-m{width:15px;height:14px;background:currentColor;-webkit-mask:url(revcore-mark.png) center/contain no-repeat;mask:url(revcore-mark.png) center/contain no-repeat}
.fx2-rc-w{text-transform:uppercase;font-family:Arial,Helvetica,sans-serif;letter-spacing:-.04em;font-size:15px;color:#fff}
@media (max-width:900px){.fx2-top{grid-template-columns:1fr;align-items:start}.fx2-card{justify-self:stretch;width:100%}.fx2-grid{grid-template-columns:1fr 1fr}.fx2-brand{grid-column:1/-1}}
@media (max-width:560px){.fx2-grid{grid-template-columns:1fr}.fx2-bot{flex-direction:column;align-items:flex-start}}

/* ---- where we work: a row of tall area cards, each its area page's own photo ---- */
.ac-sec{background:var(--bg)}
.ac-head{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:end;margin-bottom:clamp(32px,4vw,52px)}
.ac-head h2{font-size:clamp(34px,3.8vw,58px);line-height:1;letter-spacing:-.045em;font-weight:600;margin:0}
.ac-head p{font-size:16.5px;line-height:1.55;color:var(--mute);margin:0;max-width:34em}
.ac-head a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.ac-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));grid-auto-flow:column;gap:clamp(10px,1vw,16px)}
.ac-card{position:relative;display:block;aspect-ratio:3/4;border-radius:18px;overflow:hidden;color:#fff;background:#1a211c;isolation:isolate}
.ac-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.4s cubic-bezier(.2,.7,.2,1)}
.ac-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,12,9,0) 40%,rgba(8,12,9,.82));z-index:0}
.ac-card:hover img{transform:scale(1.05)}
.ac-b{position:absolute;z-index:1;left:18px;right:18px;bottom:18px;display:grid;gap:6px}
.ac-b small{font-size:12.5px;color:rgba(255,255,255,.78)}
.ac-home .ac-b small{justify-self:start;background:#C6D9A0;color:#0E1410;font-weight:600;padding:3px 9px;border-radius:999px}
.ac-b b{font-size:clamp(18px,1.45vw,22px);font-weight:600;letter-spacing:-.025em;line-height:1.1}
.ac-b em{font-style:normal;font-size:13px;font-weight:500;display:inline-flex;align-items:center;gap:7px;opacity:0;transform:translateY(6px);transition:opacity .4s,transform .5s cubic-bezier(.2,.7,.2,1)}
.ac-b em svg{width:12px;height:12px}
.ac-card:hover .ac-b em,.ac-card:focus-visible .ac-b em{opacity:1;transform:none}
@media (max-width:1000px){.ac-head{grid-template-columns:1fr}
  .ac-row{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin:0 calc(-1*var(--gut,16px));padding:0 var(--gut,16px) 4px}
  .ac-row::-webkit-scrollbar{display:none}
  .ac-card{flex:0 0 min(62vw,280px);scroll-snap-align:start}
  .ac-b em{opacity:1;transform:none}}
.ac-card img[src*="/modern-"]{object-position:22% 60%}  /* the centre of this photo is black cladding */
/* Booking section: steps and a real review on paper, the hero's dark card beside them */
.est2{background:var(--bg-2);position:relative;overflow:hidden}
.est2-in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(40px,6vw,104px);align-items:center}
.est2-l h2{font-size:clamp(38px,4.4vw,64px);line-height:1.02;letter-spacing:-.035em;max-width:10em}
.est2-lede{color:var(--mute);font-size:18px;margin-top:22px;max-width:25em}
.est2-steps{list-style:none;margin:40px 0 0;padding:0;display:grid;gap:0;border-top:1px solid var(--ink)}
.est2-steps li{display:grid;grid-template-columns:52px 1fr;column-gap:4px;padding:17px 0;border-bottom:1px solid var(--rule-2)}
.est2-steps i{grid-row:span 2;font-style:normal;font-size:13px;font-weight:600;color:var(--accent,#2E5A3C);padding-top:3px;letter-spacing:.02em}
.est2-steps b{font-weight:500;font-size:17px;letter-spacing:-.01em}
.est2-steps span{color:var(--mute);font-size:15px}
.est2-q{margin:36px 0 0;padding:0 0 0 22px;border-left:2px solid var(--star,#F5A623);max-width:30em}
.est2-q blockquote{margin:10px 0 0;font-size:17.5px;line-height:1.5;letter-spacing:-.01em;color:var(--ink)}
.est2-q figcaption{margin-top:10px;font-size:14px;color:var(--mute)}
.dir-a .est2-card{position:relative;border-radius:16px;padding:clamp(26px,3vw,40px);color:#fff;background:#0E1410;
  background:radial-gradient(120% 80% at 100% 0%,rgba(122,150,110,.22),transparent 60%),linear-gradient(160deg,#18211b,#0E1410 60%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),inset 0 1px 0 rgba(255,255,255,.12),0 40px 90px -40px rgba(14,20,16,.7)}
.dir-a .est2-card h3{color:#fff;font-size:clamp(26px,2.4vw,34px);letter-spacing:-.03em;line-height:1.08;margin-bottom:8px}
.dir-a .est2-card p.sub{color:rgba(255,255,255,.72);font-size:16px;margin-bottom:24px}
.dir-a .est2-card .rows{grid-template-columns:1fr 1fr;gap:10px}
.dir-a .est2-card .row{min-height:84px;padding:14px 12px 14px 18px;border:0;border-radius:12px;color:#fff;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);transition:background .25s,color .25s,box-shadow .25s,transform .25s}
.dir-a .est2-card .row small{color:rgba(255,255,255,.62);transition:color .25s}
.dir-a .est2-card .row .ar{border-color:rgba(255,255,255,.22)}
.dir-a .est2-card .row:hover,.dir-a .est2-card .row:focus-visible{background:#fff;color:#111;box-shadow:none;transform:translateY(-2px)}
.dir-a .est2-card .row:hover small,.dir-a .est2-card .row:focus-visible small{color:#5a625c}
.dir-a .est2-card .row:hover .ar,.dir-a .est2-card .row:focus-visible .ar{background:var(--accent-l);color:var(--on-accent-l);border-color:transparent}
.est2-foot{display:flex;justify-content:space-between;align-items:flex-end;gap:16px 24px;flex-wrap:wrap;margin-top:26px;padding-top:22px;border-top:1px solid rgba(255,255,255,.12);font-size:14px;color:rgba(255,255,255,.7)}
.est2-foot>span{display:inline-flex;align-items:center;gap:8px}
.est2-ph{color:#fff;font-size:24px;font-weight:600;letter-spacing:-.03em;line-height:1.1}
.est2-ph small{display:block;font-size:13.5px;font-weight:400;letter-spacing:0;color:rgba(255,255,255,.62);margin-bottom:4px}
.est2-ph:hover{color:var(--accent-l)}
@media (max-width:1024px){.est2-in{grid-template-columns:1fr;align-items:start}.est2-l h2{max-width:none}}
@media (max-width:640px){.dir-a .est2-card .rows{grid-template-columns:1fr}.dir-a .est2-card .row{min-height:0}.est2-steps{margin-top:30px}.est2-foot{align-items:flex-start;flex-direction:column}}
/* the floating dock steps aside where the page already offers booking */
.dock.aside{transform:translateY(140%);opacity:0;pointer-events:none}
/* glint: a soft band of light crosses the Book button now and then */
.dk-book,.mbar .go{position:relative;overflow:hidden;isolation:isolate}
.dk-book::after,.mbar .go::after{content:"";position:absolute;inset:-2px;z-index:-1;pointer-events:none;transform:translateX(-120%) skewX(-18deg);
  background:linear-gradient(90deg,transparent 25%,rgba(255,255,255,.32) 50%,transparent 75%);opacity:0}
.dk-book.shine::after,.mbar .go.shine::after{animation:rkShine 2s cubic-bezier(.45,0,.25,1)}
@keyframes rkShine{0%{transform:translateX(-120%) skewX(-18deg);opacity:1}100%{transform:translateX(120%) skewX(-18deg);opacity:1}}
@media (prefers-reduced-motion:reduce){.dk-book.shine::after,.mbar .go.shine::after{animation:none}}
/* ---- Section heading system: one size everywhere, the heading gets the wide column, the intro sits beside its last line.
   Goal: two lines at most on desktop, three on phones (audit.js checks it). ---- */
:root{--h2:clamp(34px,3.6vw,56px);--h2-side:clamp(30px,2.6vw,42px)}
h2,.pg-h,.ac-head h2,.est2-l h2{font-size:var(--h2);line-height:1.02}
.sec-head{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.sec-head h2{max-width:16em}
.sec-head p{justify-self:start;font-size:17px;line-height:1.55;max-width:30em;margin-bottom:.35em}
.sec-head p a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.est2-l h2{max-width:none}
.faq-grid h2{font-size:var(--h2-side);line-height:1.06}   /* a side heading beside the questions, not a full-width one */
@media (max-width:900px){.sec-head{grid-template-columns:1fr}}
/* The logo lockup outside the header (footer, booking window) copies the header's icon, word sizes and spacing at every
   breakpoint; the word sizes come from the shared .logo-w rules, so only the icon and gap are set here. The footer then
   scales the whole lockup up evenly, so its proportions always match the header. */
.wm-lock{display:inline-flex;align-items:flex-end;gap:4px;color:#fff}
.wm-lock img{display:block;width:58px;height:auto;flex:none}
.wm-lock .logo-w b,.wm-lock .logo-w span{color:#fff}
.fx-wm.wm-lock{zoom:1.25}
@media (max-width:640px){.wm-lock img{width:42px}}
@media (max-width:640px){.fx-cta h2{font-size:min(46px,11.2vw)}}  /* keeps "See your backyard / in 3D before we dig." to two lines down to 320px */
/* ---- Homepage (Oct 2026 redesign): materials sub-heads, recent projects + booking prompt, team strip, value line on the booking card ---- */
.mx-h{display:flex;align-items:baseline;gap:8px 20px;flex-wrap:wrap;margin:clamp(8px,1vw,16px) 0 18px}
.mx-h h3{font-size:clamp(20px,1.6vw,24px);letter-spacing:-.02em}
.mx-h p{color:var(--mute);font-size:15.5px}
.mx-h2{margin-top:clamp(56px,6vw,96px);padding-top:clamp(28px,3vw,40px);border-top:1px solid var(--rule-2)}
.rx-val{list-style:none;padding:0;margin:-8px 0 22px;display:flex;flex-wrap:wrap;gap:8px}
.rx-val li{font-size:13.5px;padding:6px 12px;border-radius:999px;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}
.rx-val li::before{content:"✓";color:var(--accent-l);margin-right:7px}
.rx-cta{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px 56px;align-items:center;margin-top:clamp(40px,4vw,64px);padding-top:clamp(28px,3vw,40px);border-top:1px solid var(--rule-2)}
.rx-cta blockquote{margin:0;max-width:44em}
.rx-cta blockquote p{font-size:18px;line-height:1.5;letter-spacing:-.01em}
.rx-cta footer{margin-top:10px;font-size:14px;color:var(--mute);display:flex;align-items:center}
.rx-cta footer b{color:var(--ink);font-weight:500}
.rx-cta .gstars{margin-bottom:12px}
.rx-cta-b{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.rx-ph{font-size:14.5px;color:var(--mute);text-decoration:underline;text-underline-offset:3px}
.rx-soft{display:inline-flex;align-items:center;gap:8px;margin-top:18px;color:#fff;font-weight:500;font-size:16px;border-bottom:1px solid rgba(255,255,255,.45);padding-bottom:3px}
.rx-soft svg{width:14px;height:14px}.rx-soft:hover{border-color:#fff}
.hero .rx-soft+.proof{margin-top:22px}
.rx-proj .sec-head p a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.rx-team{background:var(--bg-2)}
.rx-team-g{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,28px)}
.rx-team-g figure{margin:0;padding:clamp(24px,2.4vw,34px);background:var(--card);display:flex;flex-direction:column}
.rx-team-g small{font-size:13.5px;color:var(--mute)}
.rx-team-g b{display:block;font-size:clamp(22px,1.9vw,28px);font-weight:600;letter-spacing:-.03em;line-height:1.1;margin:6px 0 22px}
.rx-team-g blockquote{margin:0;flex:1}.rx-team-g blockquote .gstars{display:flex;margin-bottom:12px}
.rx-team-g blockquote p{font-size:16.5px;line-height:1.55}
.rx-team-g figcaption{margin-top:18px;padding-top:14px;border-top:1px solid var(--rule);font-size:14px;color:var(--mute)}
@media (max-width:900px){.rx-cta{grid-template-columns:1fr}.rx-team-g{grid-template-columns:1fr}}
@media (max-width:640px){
  .rx-proj .pg-cards{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 16px;gap:12px;margin:0 -16px;padding:0 16px 6px;scrollbar-width:none}
  .rx-proj .pg-cards::-webkit-scrollbar{display:none}
  .rx-proj .pg-card{flex:0 0 78%;scroll-snap-align:start}
  .rx-cta-b,.rx-cta-b .btn{width:100%}.rx-cta-b .btn{justify-content:center}.rx-cta-b .rx-ph{align-self:center}
}
/* Phone bar: Call and Book side by side, equal weight (the research: many homeowners still prefer to call) */
@media (max-width:640px){
  .mbar{grid-template-columns:1fr 1fr}
  .mbar #mbChat{display:none}
  .mbar a.call{display:flex;align-items:center;justify-content:center;gap:8px;width:auto;height:48px;border-radius:999px;font-weight:600;font-size:15px}
  .mbar a.call svg{width:16px;height:16px}
}
/* Header slims once you scroll (84 → 68px) on screens with the full nav; menus hang from its bottom edge, so they follow */
@media (min-width:901px){
  .hdr-in{transition:height .4s var(--ease)}
  .hdr.scrolled .hdr-in{height:68px}
}
@media (min-width:901px) and (prefers-reduced-motion:reduce){.hdr-in{transition:none}}
/* ---- Reviews panel: score and reviewer list on the left, one card on the right.
   Every card shares one grid cell, so the panel is as tall as the longest review and never jumps between reviews. ---- */
.rv2{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(40px,6vw,96px);align-items:stretch}
.rv2-side{display:flex;flex-direction:column}
.rv2-score{display:flex;align-items:center;gap:18px}
.rv2-score>b{font-size:clamp(64px,6vw,92px);font-weight:600;letter-spacing:-.055em;line-height:.85}
.rv2-score>div{display:flex;flex-direction:column;gap:8px}
.rv2-score>div>span:last-child{font-size:14.5px;color:var(--mute)}
.rv2-tabs{margin-top:clamp(32px,3.4vw,48px);border-top:1px solid var(--ink)}
.rv2-t{position:relative;display:block;width:100%;text-align:left;padding:15px 0 16px;border-bottom:1px solid var(--rule-2);color:var(--ink);opacity:.5;transition:opacity .3s}
.rv2-t:hover,.rv2-t:focus-visible,.rv2-t.on{opacity:1}
.rv2-t b{display:block;font-size:16px;font-weight:600;letter-spacing:-.01em}
.rv2-t span{display:block;margin-top:2px;font-size:14px;color:var(--mute)}
.rv2-t i{position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--ink);transform:scaleX(0);transform-origin:left}
.rv2-t.on i{transform:scaleX(1)}
.rv2-t.on i.run{transform:scaleX(0);animation:rv2Run var(--rv2-ms,9000ms) linear forwards}
@keyframes rv2Run{to{transform:scaleX(1)}}
.rv2-all{margin-top:auto;padding-top:28px;display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:500;text-decoration:underline;text-underline-offset:4px;align-self:flex-start}
.rv2-all svg{width:14px;height:14px}
.rv2-stage{display:grid}
.rv2-c{grid-area:1/1;margin:0;display:flex;flex-direction:column;background:var(--card);border-radius:18px;padding:clamp(30px,3.6vw,56px);
  box-shadow:0 1px 0 rgba(20,32,25,.04),0 30px 60px -40px rgba(20,32,25,.28);opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .6s var(--ease-io),transform .8s var(--ease),visibility 0s .6s}
.rv2-c.on{opacity:1;visibility:visible;transform:none;transition:opacity .6s var(--ease-io),transform .8s var(--ease)}
.rv2-c>.gstars{display:flex}
.rv2-c blockquote{margin:22px 0 0}
.rv2-k{font-size:clamp(25px,2.3vw,34px);font-weight:500;letter-spacing:-.03em;line-height:1.2;color:var(--ink);text-wrap:balance;max-width:24em}
.rv2-full{margin-top:20px;font-size:16.5px;line-height:1.65;color:var(--mute);max-width:42em}
.rv2-c figcaption{margin-top:auto;padding-top:26px;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px}
.rv2-c blockquote+figcaption{border-top:0}
.rv2-c figcaption::before{content:"";flex-basis:100%;height:1px;background:var(--rule);margin-bottom:20px}
.rv2-c figcaption b{font-size:15.5px;font-weight:600}
.rv2-c figcaption span{font-size:14px;color:var(--mute)}
@media (prefers-reduced-motion:reduce){.rv2-c{transition:none}.rv2-t.on i.run{animation:none;transform:scaleX(1)}}
@media (max-width:900px){
  .rv2{grid-template-columns:1fr;gap:0}
  .rv2-side{display:contents}
  .rv2-score{order:1}
  .rv2-tabs{order:2;display:flex;gap:8px;overflow-x:auto;border-top:0;margin:24px -16px 18px;padding:0 16px 4px;scroll-padding:0 16px;scrollbar-width:none}
  .rv2-tabs::-webkit-scrollbar{display:none}
  .rv2-t{flex:none;width:auto;padding:9px 15px;border:1px solid var(--rule-2);border-radius:999px;opacity:1;color:var(--mute)}
  .rv2-t span,.rv2-t i{display:none}
  .rv2-t b{font-size:14.5px;font-weight:500}
  .rv2-t.on{background:var(--ink);border-color:var(--ink);color:#fff}
  .rv2-stage{order:3}
  .rv2-all{order:4;margin-top:0}
  .rv2-score>b{font-size:60px}
  .rv2-k{font-size:23px}
  .rv2-full{font-size:16px}
}
/* reviews panel: the card sizes to the longest review, not to the reviewer list beside it */
.rv2{align-items:start}
.rv2-k{font-size:clamp(26px,2.5vw,38px)}

/* wow.css */
/* Interactive showpieces shared by both directions: project journey (jv) and dawn-to-night lighting (lv). */

/* ---------- project journey ---------- */
.jv-top{display:flex;justify-content:space-between;align-items:end;gap:16px 32px;flex-wrap:wrap;margin-bottom:18px}
.jv-tabs,.lv-tabs{display:flex;gap:8px;flex-wrap:wrap}
.jv-p,.lv-p{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:11px 16px;border:1px solid var(--rule-2);border-radius:var(--r,0);text-align:left;color:var(--mute);transition:border-color .3s,background .3s,color .3s}
.jv-p b,.lv-p b{font-size:15.5px;font-weight:600;color:inherit}
.jv-p span,.lv-p span{font-size:13px}
.jv-p:hover,.lv-p:hover{border-color:var(--ink);color:var(--ink)}
.jv-p.on,.lv-p.on{background:var(--ink);border-color:var(--ink);color:#fff}
.jv-scope{font-size:15px;color:var(--mute);max-width:34em}
.jv-stage{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--dark);border-radius:var(--r,0)}
.jv-set{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity 1s var(--ease-io),visibility 0s 1s}
.jv-set.on{opacity:1;visibility:visible;transition:opacity 1s var(--ease-io)}
.jv-set img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;clip-path:inset(0 100% 0 0)}
.jv-set img.base{clip-path:none}
.jv-set img.wipe{clip-path:inset(0 calc(100% - var(--w,0%)) 0 0)}
.jv-set img.wipe::after{content:""}
.jv-stage::after{content:"";position:absolute;top:0;bottom:0;left:var(--wl,0%);width:2px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.15),0 0 18px rgba(255,255,255,.6);opacity:var(--wo,0);pointer-events:none;transition:opacity .25s}
.jv-cap{position:absolute;left:clamp(14px,2vw,28px);bottom:clamp(14px,2vw,28px);max-width:min(420px,70%);padding:16px 18px;background:rgba(12,18,14,.82);color:#fff;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:var(--r,0);transition:opacity .35s var(--ease),transform .35s var(--ease)}
.jv-cap.swap{opacity:0;transform:translateY(6px)}
.jv-cap b{display:inline-block;font-size:13px;font-weight:600;letter-spacing:.02em;padding:3px 8px;background:#fff;color:var(--ink);border-radius:999px}
.dir-b .jv-cap b{background:var(--lime,#94C83D);border-radius:3px;text-transform:uppercase;font-family:var(--fd);letter-spacing:.06em}
.jv-cap span{margin-left:10px;font-size:13.5px;opacity:.8}
.jv-cap p{margin-top:9px;font-size:15.5px;line-height:1.45}
.jv-rail{padding:26px 6px 6px}
.jv-track{position:relative;height:56px}
.jv-track::before{content:"";position:absolute;left:0;right:0;top:10px;height:2px;background:var(--rule-2)}
.jv-fill{position:absolute;left:0;top:10px;height:2px;width:calc(var(--t,0) * 20%);background:var(--ink)}
.dir-b .jv-fill{background:var(--green)}
.jv-tick{position:absolute;top:0;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:10px;color:var(--mute);font-size:13.5px;font-weight:500;white-space:nowrap}
.jv-tick:first-of-type{transform:none;align-items:flex-start}
.jv-tick:last-of-type{transform:translateX(-100%);align-items:flex-end}
.jv-tick i{width:22px;height:22px;border-radius:50%;background:var(--bg);border:2px solid var(--rule-2);transition:border-color .3s,background .3s,transform .3s}
.jv-tick.done i{border-color:var(--ink);background:var(--ink)}
.dir-b .jv-tick.done i{border-color:var(--green);background:var(--green)}
.jv-tick.on{color:var(--ink)}
.jv-tick.on i{transform:scale(1.2);box-shadow:0 0 0 5px rgba(20,32,25,.12)}
.jv-range{position:absolute;left:-11px;right:-11px;top:-2px;width:calc(100% + 22px);height:34px;margin:0;opacity:0;cursor:ew-resize}
.jv .ba-note{margin-top:8px}
.jv template{display:none}
@media (max-width:640px){
  .jv-cap{position:static;max-width:none;border-radius:0}
  .jv-stage{aspect-ratio:auto;display:flex;flex-direction:column}
  .jv-set{position:relative;aspect-ratio:16/10;inset:auto}
  .jv-set:not(.on){display:none}
  .jv-tick span{font-size:12px;opacity:0;transition:opacity .25s}
  .jv-tick.on span{opacity:1}
}

/* ---------- dawn to night ---------- */
.lv-stage{position:relative;aspect-ratio:16/9;overflow:hidden;background:#0b0f0d;border-radius:var(--r,0)}
.lv-set{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity 1s var(--ease-io),visibility 0s 1s}
.lv-set.on{opacity:1;visibility:visible;transition:opacity 1s var(--ease-io)}
.lv-set img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;will-change:opacity}
.lv-set .lv-day{opacity:1}
.lv-set .lv-nightoff{filter:brightness(.34) saturate(.55) hue-rotate(8deg)}
.lv-read{position:absolute;right:clamp(14px,2vw,26px);top:clamp(14px,2vw,26px);display:flex;flex-direction:column;align-items:flex-end;gap:3px;padding:12px 16px;background:rgba(12,18,14,.7);color:#fff;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:var(--r,0)}
.lv-time{font-size:26px;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1}
.dir-b .lv-time{font-family:var(--fd);letter-spacing:.01em}
.lv-state{font-size:13px;opacity:.8}
.lv-ctl{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:18px 28px;align-items:center;margin-top:20px}
.lv-slide{display:flex;align-items:center;gap:14px}
.lv-ic{font-size:18px;color:var(--mute);line-height:1}
.lv-range{-webkit-appearance:none;appearance:none;flex:1;height:6px;border-radius:999px;cursor:pointer;
  background:linear-gradient(90deg,#9cc3e6 0%,#f2c46d 45%,#e07a52 58%,#2b3a63 78%,#0d1426 100%)}
.lv-range::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;border-radius:50%;background:#fff;border:2px solid var(--ink);box-shadow:0 4px 12px rgba(0,0,0,.25)}
.lv-range::-moz-range-thumb{width:26px;height:26px;border-radius:50%;background:#fff;border:2px solid var(--ink)}
.lv-sw{display:flex;align-items:center;gap:12px;font-weight:600;font-size:15px;color:var(--ink);white-space:nowrap}
.lv-sw i{position:relative;width:52px;height:30px;border-radius:999px;background:var(--rule-2);transition:background .3s}
.lv-sw i::after{content:"";position:absolute;left:3px;top:3px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.25);transition:transform .35s var(--ease)}
.lv-sw[aria-checked="true"] i{background:#E7B85A}
.lv-sw[aria-checked="true"] i::after{transform:translateX(22px)}
@media (max-width:900px){.lv-ctl{grid-template-columns:1fr}.lv-sw{justify-self:start}}
@media (max-width:640px){.lv-time{font-size:20px}.lv-read{padding:9px 12px}}

/* ---------- stone configurator ---------- */
.cf-stage{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--dark);border-radius:var(--r,0)}
.cf-im{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;clip-path:inset(0 0 0 0)}
.cf-im.on{opacity:1}
.cf-im.in{opacity:1;z-index:2;clip-path:inset(0 100% 0 0);animation:cfWipe 1.9s var(--ease-io) forwards}
@keyframes cfWipe{to{clip-path:inset(0 0 0 0)}}
.cf-line{position:absolute;top:0;bottom:0;left:0;width:2px;background:#fff;z-index:3;box-shadow:0 0 16px rgba(255,255,255,.7);opacity:0}
.cf-stage.wiping .cf-line{animation:cfLine 1.9s var(--ease-io) forwards}
@keyframes cfLine{0%{left:0;opacity:1}90%{opacity:1}100%{left:100%;opacity:0}}
.cf-name{position:absolute;left:clamp(14px,2vw,26px);top:clamp(14px,2vw,26px);z-index:4;padding:9px 14px;background:rgba(12,18,14,.78);color:#fff;font-weight:600;font-size:15px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:var(--r,0)}
.cf-ctl{display:flex;justify-content:space-between;align-items:center;gap:16px 28px;flex-wrap:wrap;margin-top:18px}
.cf-sws{display:flex;gap:10px;flex-wrap:wrap}
.cf-sw{display:flex;align-items:center;gap:11px;padding:8px 18px 8px 12px;border:1px solid var(--rule-2);border-radius:var(--r,999px);text-align:left;color:var(--mute);transition:border-color .25s,color .25s,background .25s}
.cf-sw i{flex:none;width:34px;height:34px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
.cf-sw b{display:block;font-size:14.5px;font-weight:600;color:inherit}
.cf-sw small{display:none}
.cf-sw:hover{border-color:var(--ink);color:var(--ink)}
.cf-sw.on{border-color:var(--ink);background:var(--card);color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.cf-sw.on small{display:block;font-size:12.5px;color:var(--mute);margin-top:1px}
.cf-cta{display:inline-flex;align-items:center;gap:10px;font-weight:600;color:var(--ink)}
.cf-cta svg{width:14px;height:14px}
.dir-b .cf-sw{border-radius:4px}
@media (max-width:640px){.cf-sws{flex-wrap:nowrap;overflow-x:auto;margin:0 calc(-1 * var(--gut));padding:2px var(--gut) 6px;scrollbar-width:none}.cf-sw{flex:none}}
@media (prefers-reduced-motion:reduce){.cf-im.in,.cf-stage.wiping .cf-line{animation:none;clip-path:none}}

/* ---------- under-the-patio cutaway ---------- */
.ca{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,3vw,48px);align-items:center}
.ca-fig{background:var(--card);border:1px solid var(--rule);border-radius:var(--r,0);padding:clamp(14px,2vw,28px);box-shadow:0 1px 0 var(--rule)}
.ca-fig svg{display:block;width:100%;height:auto;overflow:visible}
.ca .cl{transition:transform 1.2s var(--ease),opacity .8s var(--ease);transform-box:view-box}
.c-pav{fill:#B5AA98;stroke:#7E7466;stroke-width:1.2}.c-pav-bg{fill:#9D9283}
.c-jnt{fill:#E6DCC8}
.c-bed{fill:#E2CFA3}
.c-base{fill:#B7B3AA}.c-stone{fill:#8E8A82}
.c-fab{fill:#33463A}
.c-clay{fill:#A8532F}.c-clay-l{stroke:#8A4630;stroke-width:1.5}
.c-hatch{stroke:rgba(0,0,0,.18);stroke-width:1}
.c-edge{fill:#2B2F2C}.c-spike{stroke:#2B2F2C;stroke-width:3;stroke-linecap:round}
.c-fall{stroke:var(--ink);stroke-width:1.4}.c-lab{font:500 11.5px var(--f);fill:var(--mute)}
.ca.open .cl[data-i="0"]{transform:translateY(-24px)}.ca.open .cl[data-i="1"]{transform:translateY(-24px)}
.ca.open .cl[data-i="2"]{transform:translateY(-15px)}.ca.open .cl[data-i="3"]{transform:translateY(-7px)}
.ca.open .cl[data-i="4"]{transform:translateY(-2px)}
.ca.open .cl-edge{transform:translateY(-15px)}
.ca.focus .cl{opacity:.72}
.ca.focus .cl.hl{opacity:1;filter:none}

.ca-list{list-style:none;border-top:1px solid var(--rule-2)}
.ca-it{border-bottom:1px solid var(--rule-2)}
.ca-it>button{display:grid;grid-template-columns:30px 1fr;gap:12px;align-items:center;width:100%;padding:13px 0;text-align:left;color:var(--mute);transition:color .25s}
.ca-it>button:hover,.ca-it.on>button{color:var(--ink)}
.ca-sw{width:22px;height:22px;border-radius:4px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.15)}
.ca-sw.c-pav{background:#B5AA98}.ca-sw.c-jnt{background:#E6DCC8}.ca-sw.c-bed{background:#E2CFA3}.ca-sw.c-base{background:#B7B3AA}.ca-sw.c-fab{background:#33463A}.ca-sw.c-clay{background:#B5603F}.ca-sw.c-edge{background:#2B2F2C}
.ca-t b{font-size:16.5px;font-weight:600;color:inherit;margin-right:8px}
.dir-b .ca-t b{font-family:var(--fd);text-transform:uppercase;letter-spacing:.02em;font-weight:500}
.ca-t small{font-size:13.5px;color:var(--mute)}
.ca-more{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--ease)}
.ca-more>div{overflow:hidden;min-height:0;padding-left:42px}
.ca-it.on .ca-more{grid-template-rows:1fr}
.ca-more p{font-size:14.5px;line-height:1.5}
.ca-more .ca-x{color:#9B3D22;padding:6px 0 14px}
.dir-b .ca-more .ca-x{color:#9B3D22}
.m-on .ca:not(.built) .cl{opacity:0;transform:translateY(24px)}
@media (max-width:900px){.ca{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.ca .cl{transition:none}}

/* ---------- service-area map cards ---------- */
.mapx .map .t{cursor:pointer;outline:none}
.mapx .map .t circle,.mapx .map .t rect{transition:transform .3s var(--ease);transform-box:fill-box;transform-origin:center}
.mapx .map .t:hover circle,.mapx .map .t.sel circle{transform:scale(1.9)}
.mapx .map .t.sel text{fill:var(--map-ink);font-weight:600}
.mapx .map .t:focus-visible text{text-decoration:underline}
.map .m-route{fill:none;stroke:var(--accent-l);stroke-width:2;stroke-dasharray:4 5;stroke-linecap:round}
.map .m-route.draw{animation:mRoute 1s var(--ease) both}
@keyframes mRoute{from{stroke-dashoffset:120;opacity:0}to{stroke-dashoffset:0;opacity:1}}
.mapc{display:grid;grid-template-columns:120px 1fr;gap:14px;align-items:center;margin-top:14px;padding:10px;background:var(--card);color:var(--ink);border-radius:var(--r,0);box-shadow:0 18px 40px -22px rgba(0,0,0,.45);opacity:0;transform:translateY(8px);transition:opacity .4s var(--ease),transform .4s var(--ease)}
.mapc.on{opacity:1;transform:none}
.mapc img{width:120px;height:90px;object-fit:cover;border-radius:var(--r,0)}
.mapc small{display:block;font-size:12.5px;color:var(--mute)}
.mapc b{display:block;font-size:19px;font-weight:600;letter-spacing:-.02em;margin-top:2px}
.dir-b .mapc b{font-family:var(--fd);text-transform:uppercase;letter-spacing:.01em;font-weight:500}
.mapc p{font-size:13.5px;line-height:1.4;margin-top:4px;color:var(--mute)}
.mapc a{display:inline-block;font-size:13.5px;font-weight:600;margin-top:6px;color:var(--ink)}
.dir-b .mapc a{color:var(--green)}
@media (max-width:640px){.mapc{grid-template-columns:90px 1fr}.mapc img{width:90px;height:90px}}
@media (prefers-reduced-motion:reduce){.map .m-route.draw{animation:none}.mapx .map .t circle{transition:none}}

/* ---------- project story: pinned, scroll-driven, chapter list on the left ---------- */
.st{position:relative;--pin-top:84px}
.dir-b .st{--pin-top:88px}
.st-pin{position:sticky;top:var(--pin-top);height:calc(100vh - var(--pin-top));display:flex;align-items:center}
.st{height:calc(var(--frames) * 52vh + 100vh)}
.st-grid{display:grid;grid-template-columns:minmax(240px,2.7fr) minmax(0,9.3fr);gap:clamp(24px,3vw,48px);align-items:center;width:100%}
.st-proj b{display:block;font-size:20px;font-weight:600;letter-spacing:-.02em}
.dir-b .st-proj b{font-family:var(--fd);text-transform:uppercase;letter-spacing:.01em;font-weight:500}
.st-proj span{display:block;font-size:14px;color:var(--mute);margin-top:4px;line-height:1.4}
.st-list{list-style:none;margin-top:22px;border-top:1px solid var(--rule-2)}
.st-ch{border-bottom:1px solid var(--rule-2)}
.st-ch>button{display:grid;grid-template-columns:34px 1fr;gap:10px;width:100%;padding:12px 0;text-align:left;color:var(--mute);transition:color .4s var(--ease)}
.st-ch>button:hover,.st-ch.on>button{color:var(--ink)}
.st-no{font-size:12.5px;font-weight:600;font-variant-numeric:tabular-nums;padding-top:3px}
.st-t b{display:block;font-size:17px;font-weight:600;color:inherit;letter-spacing:-.015em}
.dir-b .st-t b{font-family:var(--fd);text-transform:uppercase;letter-spacing:.02em;font-weight:500}
.st-t small{display:block;font-size:13.5px;line-height:1.4;margin-top:2px;max-height:0;overflow:hidden;opacity:0;transition:max-height .5s var(--ease),opacity .4s}
.st-ch.on .st-t small{max-height:60px;opacity:1}
.st-more{display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s var(--ease)}
.st-more>div{overflow:hidden;min-height:0;padding-left:44px}
.st-ch.on .st-more{grid-template-rows:1fr}
.st-cap{display:none;font-size:14.5px;line-height:1.5;padding-bottom:10px}
.st-cap.on,.st-cap-3d{display:block}
.st-dots{display:flex;gap:5px;padding-bottom:14px}
.st-dots em{width:18px;height:3px;border-radius:2px;background:var(--rule-2);transition:background .4s}
.st-dots em.on{background:var(--ink)}
.dir-b .st-dots em.on{background:var(--green)}
.st-prog{height:2px;background:var(--rule);margin-top:18px;overflow:hidden}
.st-prog i{display:block;height:100%;width:100%;background:var(--ink);transform:scaleX(0);transform-origin:left}
.dir-b .st-prog i{background:var(--green)}
.st-stage{position:relative;aspect-ratio:16/9;max-height:calc(100vh - var(--pin-top) - 48px);width:100%;overflow:hidden;background:#0d120f;border-radius:var(--r,0);margin-left:auto}
.st-f{position:absolute;inset:0;margin:0;opacity:0;transition:opacity 1.1s cubic-bezier(.4,0,.2,1);will-change:opacity}
.st-f.on{opacity:1}
.st-f img{width:100%;height:100%;object-fit:cover;display:block}
.st-f.st-3d img{position:absolute;top:34px;left:0;width:100%;height:calc(100% - 34px)}
.st-app{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .6s var(--ease)}
.st-stage.in3d .st-app{opacity:1}
.st-bar{position:absolute;left:0;right:0;top:0;height:34px;display:flex;align-items:center;gap:7px;padding:0 14px;background:#1d2220;color:rgba(255,255,255,.72);font-size:12.5px}
.st-bar i{width:10px;height:10px;border-radius:50%;background:#3a403c}
.st-bar span{margin-left:10px}
.st-cams{position:absolute;left:50%;bottom:18px;z-index:3;transform:translateX(-50%);display:flex;gap:4px;padding:4px;background:rgba(20,24,22,.78);border-radius:999px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);pointer-events:auto}
.st-cam{padding:8px 14px;border-radius:999px;color:rgba(255,255,255,.75);font-size:13px;font-weight:500;transition:background .3s,color .3s}
.st-cam:hover{color:#fff}
.st-cam.on{background:#fff;color:#141816}
.st-cam:disabled{opacity:.35;cursor:not-allowed}
.sm{display:none}
@media (max-width:900px){
  .st{height:auto}
  .st-pin{display:none}
  .sm{display:block}
  .sm-ch{padding:18px 0;border-top:1px solid var(--rule-2)}
  .sm-ch header{display:grid;grid-template-columns:34px 1fr;gap:8px;margin-bottom:12px}
  .sm-ch b{display:block;font-size:17px;font-weight:600}
  .dir-b .sm-ch b{font-family:var(--fd);text-transform:uppercase;font-weight:500;letter-spacing:.02em}
  .sm-ch small{display:block;font-size:14px;color:var(--mute);margin-top:2px}
  .sm-strip{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 calc(-1 * var(--gut));padding:0 var(--gut);scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .sm-strip::-webkit-scrollbar{display:none}
  .sm-f{flex:0 0 86%;margin:0;scroll-snap-align:start}
  .sm-f:only-child{flex-basis:100%}
  .sm-f img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r,0);display:block}
  .sm-f figcaption{font-size:14px;line-height:1.45;color:var(--mute);margin-top:8px}
}
@media (prefers-reduced-motion:reduce){.st-f{transition:none;transform:none}}
.st-note{font-size:12px;line-height:1.4;color:var(--mute);margin-top:14px}

/* pages.css */
/* Inner pages (services, areas, about, reviews, work, process, contact, blog, FAQ, financing). Each direction's tokens drive the look. */

/* page hero: photo with the copy and the first quiz question over it */
.phero{position:relative;display:flex;align-items:flex-end;min-height:min(78vh,760px);overflow:hidden;background:var(--dark);color:#fff}
.phero-short{min-height:min(62vh,600px)}
.ph-bg{position:absolute;inset:0}
.ph-bg img{width:100%;height:100%;object-fit:cover;transform:scale(1.05);transition:transform 2.6s var(--ease)}
.loaded .ph-bg img{transform:none}
.ph-bg img[src*="fireplace"]{object-position:50% 68%}  /* keep the fire in the wide crop */
.ph-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(9,15,11,.84),rgba(9,15,11,.6) 45%,rgba(9,15,11,.18) 75%),linear-gradient(0deg,rgba(9,15,11,.6),rgba(9,15,11,0) 45%)}
.ph-in{position:relative;z-index:1;width:100%;display:grid;grid-template-columns:minmax(0,1fr) 392px;gap:clamp(32px,5vw,90px);align-items:end;padding-top:140px;padding-bottom:clamp(44px,5vw,72px)}
.ph-copy h1{color:#fff;max-width:15em}
.ph-copy p{font-size:clamp(17px,1.3vw,19.5px);line-height:1.5;color:rgba(255,255,255,.88);max-width:34em;margin-top:22px}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:14px;color:rgba(255,255,255,.74);margin-bottom:22px}
.crumbs a{color:rgba(255,255,255,.86)}
.crumbs a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.crumbs i{font-style:normal;opacity:.5}
.ph-form .hs{box-shadow:0 30px 70px -24px rgba(0,0,0,.55)}

/* A: big editorial type, header floats over the photo */
.dir-a .phero{padding-top:84px}
.dir-a .ph-copy h1{font-size:clamp(42px,5vw,80px);letter-spacing:-.048em;line-height:.96}
/* B: condensed uppercase, solid header above */
.dir-b .ph-copy h1{font-size:clamp(40px,4.4vw,72px);line-height:.98}
.dir-b .phero{min-height:min(70vh,680px)}
.dir-b .phero-short{min-height:min(54vh,520px)}
.dir-b .ph-in{padding-top:72px}

/* intro: copy beside an "included" list */
.pg-split{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(40px,7vw,120px);align-items:start}
.pg-body p{font-size:clamp(18px,1.45vw,21px);line-height:1.6;color:var(--ink);max-width:36em}
.pg-body p+p{margin-top:1.1em}
.pg-body .pg-towns{font-size:16px;color:var(--mute)}
.pg-body .pg-towns a{color:var(--ink);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.pg-incl{background:var(--card);padding:clamp(26px,3vw,40px);border-radius:var(--r,0);box-shadow:0 1px 0 var(--rule),0 30px 60px -40px rgba(10,16,12,.35)}
.pg-incl h2{font-size:clamp(24px,2vw,30px);margin-bottom:18px}
.pg-incl ul{list-style:none;margin-bottom:28px}
.pg-incl li{display:grid;grid-template-columns:22px 1fr;gap:10px;padding:11px 0;border-top:1px solid var(--rule);font-size:16px;line-height:1.4}
.pg-incl li svg{width:18px;height:18px;margin-top:1px;color:var(--ink)}
.dir-b .pg-incl li svg{color:var(--green)}
.pg-incl .btn{width:100%}
.dir-b .pg-incl{border-top:5px solid var(--lime)}

.pg-h{font-size:clamp(30px,3.2vw,48px);margin-bottom:clamp(28px,3vw,44px)}
.pg-note{font-size:13.5px;color:var(--mute);margin-top:16px}
.pg-more{display:inline-flex;align-items:center;gap:10px;font-weight:600;font-size:15.5px;color:var(--ink)}
.pg-more svg{width:14px;height:14px;transition:transform .6s var(--ease)}
.pg-more:hover svg{transform:translateX(3px)}

/* three-photo mosaic */
.pg-gal{display:grid;grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr;gap:clamp(10px,1.2vw,18px);height:min(68vh,640px)}
.pg-gal figure{margin:0;overflow:hidden;border-radius:var(--r,0);background:var(--bg-2)}
.pg-gal .pg-g0{grid-row:1/3}
.pg-gal img{width:100%;height:100%;object-fit:cover}

/* single before/after with its notes */
.pg-ba{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:clamp(24px,3vw,48px);align-items:end}
.pg-ba .slider{aspect-ratio:16/11}
.pg-ba-cap b{display:block;font-size:22px;font-weight:600;letter-spacing:-.02em}
.dir-b .pg-ba-cap b{font-family:var(--fd);text-transform:uppercase;font-weight:600;letter-spacing:.01em}
.pg-ba-cap>span{display:block;color:var(--mute);font-size:15px;margin-top:4px}
.pg-ba-cap p{margin-top:16px;line-height:1.6}
.pg-ba-cap dl{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:22px;padding-top:18px;border-top:1px solid var(--rule)}
.pg-ba-cap dt{font-size:13px;color:var(--mute)}
.pg-ba-cap dd{font-weight:600;margin-top:2px}

/* related cards */
.pg-rel-h{display:flex;justify-content:space-between;align-items:end;gap:20px;flex-wrap:wrap;margin-bottom:clamp(28px,3vw,44px)}
.pg-rel-h .pg-h{margin-bottom:0}
.pg-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.4vw,22px)}
.pg-card{display:flex;flex-direction:column;gap:6px}
.pg-card-ph{display:block;aspect-ratio:4/3;overflow:hidden;border-radius:var(--r,0);background:var(--bg-2);margin-bottom:10px}
.pg-card-ph img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
.pg-card:hover .pg-card-ph img,.pg-area:hover img,.pg-post:hover img{transform:scale(1.03)}
.pg-card b{font-size:19px;font-weight:600;letter-spacing:-.02em}
.dir-b .pg-card b,.dir-b .pg-area b{font-family:var(--fd);text-transform:uppercase;letter-spacing:.01em;font-size:20px}
.pg-card small{font-size:14.5px;color:var(--mute);line-height:1.45}

/* services index: big rows */
.pg-svcs{border-top:1px solid var(--rule-2)}
.pg-svc{display:grid;grid-template-columns:clamp(120px,16vw,240px) minmax(0,1fr) 56px;gap:clamp(18px,3vw,44px);align-items:center;padding:clamp(18px,2vw,26px) 0;border-bottom:1px solid var(--rule-2)}
.pg-svc-ph{aspect-ratio:4/3;overflow:hidden;border-radius:var(--r,0);background:var(--bg-2)}
.pg-svc-ph img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
.pg-svc:hover .pg-svc-ph img{transform:scale(1.05)}
.pg-svc-t b{display:block;font-size:clamp(26px,3vw,46px);font-weight:600;letter-spacing:-.04em;line-height:1}
.dir-b .pg-svc-t b{font-family:var(--fd);text-transform:uppercase;letter-spacing:.005em}
.pg-svc-t span{display:block;color:var(--mute);margin-top:10px;max-width:42em;line-height:1.5}
.pg-svc-ar{width:54px;height:54px;border-radius:50%;border:1px solid var(--rule-2);display:grid;place-items:center;transition:background .3s,color .3s}
.dir-b .pg-svc-ar{border-radius:4px}
.pg-svc-ar svg{width:16px;height:16px}
.pg-svc:hover .pg-svc-ar{background:var(--ink);color:var(--on-ink);border-color:var(--ink)}

/* area cards */
.pg-area-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,28px)}
.pg-area{display:flex;flex-direction:column;gap:8px}
.pg-area b{font-size:22px;font-weight:600;letter-spacing:-.025em}
.pg-area small{color:var(--mute);font-size:15px;line-height:1.5}
.pg-area img{transition:transform 1.4s var(--ease)}
.area-links a,.fa-links a{display:flex;justify-content:space-between;align-items:baseline;width:100%;color:inherit}
.area-links a:hover b{text-decoration:underline;text-underline-offset:4px}
.fa-links li{padding:0!important}
.fa-links a{display:flex;align-items:center;justify-content:flex-start;gap:8px;padding:12px 14px}
.fa-links a:hover span{text-decoration:underline;text-underline-offset:3px}
.pg-near-l{font-size:16px;color:var(--mute)}
.pg-near-l a{color:var(--ink);font-weight:600;margin-left:14px;white-space:nowrap}
.pg-near-l a:hover{text-decoration:underline;text-underline-offset:3px}
.sec.pg-near,.fsec.pg-near{padding:0 0 clamp(40px,5vw,72px)}

/* about */
.pg-team{list-style:none}
.pg-team li{display:grid!important;grid-template-columns:44px 1fr!important;grid-template-rows:auto auto;column-gap:14px;align-items:center}
.pg-av{grid-row:1/3;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--bg-2);font-weight:600}
.pg-team b{font-weight:600}
.pg-team li>span:last-child{font-size:14px;color:var(--mute)}
.pg-portrait{margin:36px 0 0}
.pg-ph-slot{aspect-ratio:16/10;display:grid;place-items:center;text-align:center;gap:6px;background:var(--bg-2);border:1px dashed var(--rule-2);border-radius:var(--r,0);color:var(--mute);font-size:15px}
.pg-timeline{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2vw,32px);border-top:2px solid var(--ink)}
.pg-timeline li{padding-top:22px}
.pg-timeline b{display:block;font-size:clamp(26px,2.6vw,40px);font-weight:600;letter-spacing:-.04em}
.dir-b .pg-timeline b{font-family:var(--fd);letter-spacing:0;color:var(--green)}
.pg-timeline p{color:var(--mute);margin-top:10px;line-height:1.5}

/* reviews */
.pg-score-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--rule-2);border-bottom:1px solid var(--rule-2)}
.pg-score-row div{padding:clamp(22px,3vw,40px) 0;display:flex;align-items:baseline;gap:14px}
.pg-score-row div+div{border-left:1px solid var(--rule-2);padding-left:clamp(18px,3vw,40px)}
.pg-score-row b{font-size:clamp(48px,6vw,96px);font-weight:600;letter-spacing:-.05em;line-height:.9}
.dir-b .pg-score-row b{font-family:var(--fd);letter-spacing:0;color:var(--green)}
.pg-score-row span{color:var(--mute);font-size:16px}
.sec.pg-scores,.fsec.pg-scores{padding-bottom:0}
.pg-rqs{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,48px)}
.pg-rq{margin:0;padding:clamp(26px,3vw,44px);background:var(--card);border-radius:var(--r,0);box-shadow:0 1px 0 var(--rule)}
.pg-rq .stars{display:flex;gap:3px;margin-bottom:18px}
.pg-rq .stars svg{width:16px;height:16px;fill:var(--star,#F5A623)}
.pg-rq p{font-size:clamp(18px,1.4vw,21px);line-height:1.55}
.pg-rq footer{margin-top:22px;display:flex;flex-direction:column;gap:2px}
.pg-rq footer span{color:var(--mute);font-size:14.5px}

/* work grid */
.pg-wgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px,1.2vw,18px)}
.pg-w{margin:0;position:relative;overflow:hidden;border-radius:var(--r,0);aspect-ratio:4/3;background:var(--bg-2)}
.pg-w img{width:100%;height:100%;object-fit:cover}
.pg-w figcaption{position:absolute;left:12px;bottom:12px;background:var(--card);color:var(--ink);font-size:13.5px;font-weight:500;padding:7px 11px;border-radius:var(--r,0)}

/* contact */
.pg-ct{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,5vw,80px);align-items:stretch}
.pg-ct-i h2{font-size:clamp(28px,2.6vw,40px)}
.pg-ct-ph{display:block;font-size:clamp(34px,3.6vw,56px);font-weight:600;letter-spacing:-.04em;margin:18px 0 22px}
.dir-b .pg-ct-ph{font-family:var(--fd);letter-spacing:.01em;color:var(--green)}
.pg-ct-i p{margin-top:14px;line-height:1.6;font-size:17px}
.pg-ct-i p a{font-weight:600;display:inline-flex;align-items:center;gap:8px}
.pg-ct-i p a svg{width:14px;height:14px}
.pg-soc a+a{margin-left:18px}
.pg-ct-m{min-height:420px;background:var(--bg-2);border-radius:var(--r,0);overflow:hidden;display:grid;place-items:center;padding:24px}
.pg-ct-m .map{width:100%}

/* blog */
.pg-post-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,2.4vw,36px)}
.pg-post{display:flex;flex-direction:column;gap:12px}
.pg-post-m{display:flex;gap:14px;font-size:13.5px;color:var(--mute)}
.pg-post-m b{color:var(--ink);font-weight:600}
.pg-post h2{font-size:clamp(21px,1.7vw,26px);line-height:1.15;letter-spacing:-.025em}
.dir-b .pg-post h2{font-size:clamp(20px,1.6vw,24px);letter-spacing:.01em}
.pg-post img{transition:transform 1.4s var(--ease)}

/* financing */
.pg-fsteps{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,32px);counter-reset:f}
.pg-fsteps li{counter-increment:f;padding-top:22px;border-top:2px solid var(--ink)}
.pg-fsteps li::before{content:counter(f);display:block;font-size:15px;font-weight:600;color:var(--mute);margin-bottom:14px}
.pg-fsteps b{font-size:22px;font-weight:600;letter-spacing:-.02em}
.dir-b .pg-fsteps b{font-family:var(--fd);text-transform:uppercase;letter-spacing:.01em}
.pg-fsteps p{color:var(--mute);margin-top:10px;line-height:1.55}

/* footers with an extra areas column */
.fx-grid-5{grid-template-columns:minmax(0,4fr) repeat(3,minmax(0,2fr)) minmax(0,3fr)}
.ff-grid-5{grid-template-columns:minmax(0,3fr) repeat(3,minmax(0,2fr)) minmax(0,2.4fr)}
.fx-soc a+a,.ff-soc a+a{margin-left:16px}

/* section rhythm on inner pages */
.inner .sec{padding:clamp(72px,8vw,128px) 0}
.inner .sec.pg-gal-sec,.inner .fsec.pg-gal-sec{padding-top:0}
.inner .pg-intro{background:var(--bg)}
.dir-b.inner .pg-intro,.dir-b.inner .pg-svc-list,.dir-b.inner .pg-areas{background:var(--bg-2)}

@media (max-width:1180px){
  .ph-in{grid-template-columns:1fr;align-items:start}
  .ph-form{max-width:560px}
  .pg-cards{grid-template-columns:1fr 1fr}
  .fx-grid-5,.ff-grid-5{grid-template-columns:1fr 1fr 1fr}
}
@media (max-width:900px){
  .pg-split,.pg-ba,.pg-ct,.pg-rqs{grid-template-columns:1fr}
  .pg-area-grid,.pg-post-grid{grid-template-columns:1fr 1fr}
  .pg-timeline,.pg-fsteps{grid-template-columns:1fr 1fr;row-gap:28px}
  .pg-gal{height:auto;grid-template-columns:1fr 1fr;grid-template-rows:auto}
  .pg-gal .pg-g0{grid-column:1/-1;grid-row:auto;aspect-ratio:16/10}
  .pg-gal figure:not(.pg-g0){aspect-ratio:1}
  .pg-wgrid{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .phero,.phero-short,.dir-b .phero,.dir-b .phero-short{display:block;min-height:0;background:var(--bg);color:var(--ink)}
  .dir-a .phero{padding-top:0}
  .ph-bg{position:relative;height:clamp(260px,62vw,360px)}
  .ph-bg::after{background:linear-gradient(0deg,rgba(9,15,11,.3),rgba(9,15,11,0) 50%),linear-gradient(180deg,rgba(9,15,11,.45),rgba(9,15,11,0) 35%)}
  .ph-in{padding-top:22px;padding-bottom:30px;gap:22px}
  .ph-copy h1,.dir-a .ph-copy h1,.dir-b .ph-copy h1{color:var(--ink);font-size:clamp(32px,9vw,40px)}
  .ph-copy p{color:var(--mute);font-size:16.5px;margin-top:14px}
  .crumbs{color:var(--mute);margin-bottom:14px;font-size:13px}.crumbs a{color:var(--ink)}
  .ph-form .hs{box-shadow:none;border:1px solid var(--rule-2)}
  .pg-cards,.pg-area-grid,.pg-post-grid,.pg-timeline,.pg-fsteps,.pg-wgrid{grid-template-columns:1fr}
  .pg-svc{grid-template-columns:96px minmax(0,1fr);gap:16px}
  .pg-svc-ar{display:none}
  .pg-svc-t span{font-size:14.5px;margin-top:6px}
  .pg-score-row{grid-template-columns:1fr}
  .pg-score-row div+div{border-left:0;border-top:1px solid var(--rule-2);padding-left:0}
  .pg-near-l a{display:inline-block;margin:6px 14px 0 0}
  .fx-grid-5,.ff-grid-5{grid-template-columns:1fr 1fr}
  .pg-ct-m{min-height:280px}
}
@media (prefers-reduced-motion:reduce){.ph-bg img{transform:none;transition:none}}
/* A: the collapsed quiz opens downward, so reserve its open height */

.dir-b.inner .ffaq{padding-top:clamp(72px,8vw,116px)}
.dir-b.inner .pg-gal-sec{padding-top:clamp(56px,6vw,88px)}
.dir-a .ph-copy h1{max-width:none}
.inner .pg-rq-sec{padding-top:clamp(36px,4vw,56px)!important}
/* long service names: let the intro button wrap instead of widening the column */
.pg-split>*{min-width:0}
.pg-incl .btn{white-space:normal;height:auto;min-height:54px;padding-top:14px;padding-bottom:14px;text-align:center;line-height:1.25}
@media (max-width:900px){.pg-split{grid-template-columns:minmax(0,1fr)}}
.pg-near-l{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 18px}.pg-near-l a{margin:0!important;display:inline-block}
/* financing terms */
.pg-fterms{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2vw,32px);margin-top:8px}
.pg-fterms div{padding-top:20px;border-top:2px solid var(--ink)}
.pg-fterms b{display:block;font-size:clamp(34px,4vw,52px);font-weight:600;letter-spacing:-.035em;line-height:1}
.dir-b .pg-fterms b{font-family:var(--fd)}
.pg-fterms span{display:block;color:var(--mute);margin-top:10px;font-size:15px}
.pg-fex{max-width:760px;font-size:14px;line-height:1.6;color:var(--mute);margin:28px 0 24px}
/* HFS's own banner (sent by HFS, 2026-10-30): a small linked partner badge beside the button; the file is 516px wide, so it stays at or under half that */
.pg-hfs{display:flex;flex-wrap:wrap;align-items:center;gap:24px 32px}
.pg-hfs-b{display:block;width:258px;max-width:100%;border-radius:10px;overflow:hidden;border:1px solid var(--rule-2);transition:transform .6s var(--ease)}
.pg-hfs-b:hover{transform:translateY(-2px)}
.pg-hfs-b img{display:block;width:100%;height:auto}
@media (max-width:900px){.pg-fterms{grid-template-columns:1fr 1fr;row-gap:28px}}
/* migrated blog articles */
.pg-article .wrap{display:flex;justify-content:center}
.post-body{max-width:42em;font-size:clamp(17.5px,1.3vw,19.5px);line-height:1.7;color:var(--ink)}
.post-body>*+*{margin-top:1.05em}
.post-body h2{font-size:clamp(26px,2.3vw,34px);line-height:1.15;letter-spacing:-.03em;margin-top:2em}
.post-body h3{font-size:clamp(20px,1.6vw,24px);line-height:1.25;letter-spacing:-.02em;margin-top:1.7em}
.post-body h4{font-size:18px;margin-top:1.5em}
.post-body h2+*,.post-body h3+*,.post-body h4+*{margin-top:.6em}
.post-body ul,.post-body ol{padding-left:1.3em}
.post-body li+li{margin-top:.45em}
.post-body li::marker{color:var(--mute)}
.post-body a{color:inherit;text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:3px}
.post-body a:hover{text-decoration-color:currentColor}
.post-body strong,.post-body b{font-weight:600}
.post-body blockquote{border-left:3px solid var(--accent);padding-left:1em;color:var(--mute)}
.post-body img{display:block;width:100%;height:auto;border-radius:6px;margin:1.6em 0}
.post-body table{width:100%;border-collapse:collapse;font-size:.9em;display:block;overflow-x:auto}
.post-body th,.post-body td{text-align:left;padding:.6em .8em;border-bottom:1px solid rgba(20,32,25,.14);vertical-align:top}
.post-body th{font-weight:600}
@media (min-width:901px){.pg-fterms{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:640px){.pg-fterms{grid-template-columns:1fr}.pg-fterms b{font-size:34px}}
/* small print under the process steps and the home service list */
.proc-small{margin-top:28px;font-size:15px;color:var(--mute);max-width:34em}
.svx-more{margin-top:22px;font-size:15.5px;color:var(--mute)}
.svx-more a{color:var(--ink);font-weight:600;display:inline-flex;align-items:center;gap:6px}
.svx-more a svg{width:14px;height:14px}
.pg-fsteps p a svg{width:14px;height:14px;display:inline-block;vertical-align:-2px;margin-left:4px}
/* real project photos, credentials, project details */
.pg-wgrid-2{grid-template-columns:1fr 1fr}
.pg-work .pg-wgrid{margin-top:22px}
.pg-work .fintro{max-width:62ch}
.pg-h3{font-size:clamp(20px,1.6vw,24px);font-weight:600;letter-spacing:-.02em;margin:clamp(36px,4vw,56px) 0 18px}
.pg-portrait img{width:100%;height:auto;display:block;border-radius:var(--r,0)}
.pg-portrait figcaption{font-size:14px;color:var(--mute);margin-top:10px}
.pg-cred{display:flex;align-items:center;gap:14px;margin-top:24px;padding-top:20px;border-top:1px solid var(--rule);font-size:14.5px;font-weight:500;line-height:1.4}
.pg-cred img{width:76px;height:76px;flex:none;background:#fff;border-radius:6px;padding:4px}
.pg-det{display:grid;gap:10px;margin:20px 0 24px;padding-top:18px;border-top:1px solid var(--rule)}
.pg-det div{display:grid;grid-template-columns:110px 1fr;gap:10px;font-size:15px}
.pg-det dt{color:var(--mute)}
.pg-det dd{margin:0}
.pg-det a{text-decoration:underline;text-underline-offset:3px}
/* reviews */
[hidden]{display:none!important}
.rq-all{display:inline-flex;align-items:center;gap:8px;margin-top:22px;font-size:15px;font-weight:500;text-decoration:underline;text-underline-offset:4px}
.rq-all svg{width:14px;height:14px}
.pg-score-line{display:flex;align-items:center;gap:8px;margin:-6px 0 26px;color:var(--mute);font-size:15px}
.pg-score-line b{color:var(--ink);font-size:17px}
.pg-score-line .stars{display:inline-flex}
.pg-rq-cols{display:grid;gap:clamp(16px,2vw,28px);align-items:start}
.pg-rq-n2{grid-template-columns:1fr 1fr}
.pg-rq-n3{grid-template-columns:repeat(3,minmax(0,1fr))}
.pg-rq-col{display:grid;gap:clamp(16px,2vw,28px);align-content:start}
.pg-rq-cols .pg-rq p{font-size:clamp(16px,1.15vw,18px)}
@media (max-width:900px){.pg-rq-n2,.pg-rq-n3{grid-template-columns:1fr}}
.pg-inline{text-decoration:underline;text-underline-offset:3px;color:var(--ink)}
.pg-rf{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 26px}
.pg-rf button{font:inherit;font-size:14.5px;font-weight:500;padding:9px 15px;border-radius:999px;border:1px solid var(--rule-2);background:transparent;color:var(--ink);cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.pg-rf button span{color:var(--mute);margin-left:4px;font-weight:400}
.pg-rf button:hover{border-color:var(--ink)}
.pg-rf button.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.pg-rf button.on span{color:inherit;opacity:.7}
/* blog: numbered pages under the article grid */
.pg-pager{display:flex;justify-content:center;gap:6px;margin:clamp(40px,5vw,64px) 0 0}
.pg-pager button{font:inherit;font-size:15px;font-weight:500;min-width:44px;height:44px;padding:0 6px;border-radius:999px;border:1px solid transparent;background:transparent;color:var(--ink);cursor:pointer;transition:background .45s var(--ease),color .45s var(--ease),border-color .45s var(--ease)}
.pg-pager button:hover:not(:disabled){border-color:var(--rule-2)}
.pg-pager button[aria-current]{background:var(--ink);color:var(--bg)}
.pg-pager .pg-pp{font-size:20px;border-color:var(--rule-2)}
.pg-pager button:disabled{opacity:.3;cursor:default}
.pg-blead .pg-feat-b h2 a{color:inherit;text-decoration:none}
.pg-blead .pg-feat-b h2 a:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.12em}
.pg-post .pg-post-m{flex-wrap:wrap;row-gap:4px}
/* work page */
.pg-proof-l{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--rule-2);border-bottom:1px solid var(--rule-2)}
.pg-proof-l li{padding:clamp(20px,2.6vw,34px) clamp(14px,2vw,28px) clamp(20px,2.6vw,34px) 0;display:flex;flex-direction:column;gap:6px}
.pg-proof-l li+li{border-left:1px solid var(--rule-2);padding-left:clamp(14px,2vw,28px)}
.pg-proof-l b{font-size:clamp(34px,4vw,60px);font-weight:600;letter-spacing:-.045em;line-height:1}
.pg-proof-l span{color:var(--mute);font-size:15px}
.sec.pg-proof{padding-bottom:0}
.pg-feat-in{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,4vw,64px);align-items:center}
.pg-feat-ph{display:block;aspect-ratio:4/3;overflow:hidden;border-radius:var(--r,0);background:var(--bg-2)}
.pg-feat-ph img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
.pg-feat-ph:hover img{transform:scale(1.02)}
.pg-feat-k{display:block;font-size:14px;color:var(--mute);margin-bottom:12px}
.pg-feat-b h2{font-size:clamp(30px,3.2vw,48px);font-weight:600;letter-spacing:-.035em;line-height:1.05}
.pg-feat-b p{margin:18px 0 20px;font-size:17px;line-height:1.55}
.pg-feat-b ul{list-style:none;margin:0 0 28px;padding:0;display:grid;gap:10px}
.pg-feat-b li{display:flex;gap:10px;align-items:flex-start;font-size:15.5px}
.pg-feat-b li svg{width:16px;height:16px;flex:none;margin-top:3px}
.pg-w-b{display:block;width:100%;height:100%;padding:0;border:0;background:none;cursor:zoom-in}
.pg-wall .pg-w figcaption{pointer-events:none}
.pg-3d .pg-split{align-items:start;margin-bottom:28px}
.lb{position:fixed;inset:0;margin:auto;width:fit-content;height:fit-content;border:0;padding:0;background:transparent;max-width:min(94vw,1500px);max-height:94vh;overflow:visible}
.lb::backdrop{background:rgba(12,16,13,.9)}
.lb figure{margin:0}
.lb img{display:block;max-width:min(94vw,1500px);max-height:84vh;width:auto;height:auto;margin:0 auto;border-radius:4px}
.lb figcaption{color:#fff;font-size:15px;text-align:center;margin-top:12px}
.lb button{position:fixed;background:rgba(255,255,255,.12);color:#fff;border:0;border-radius:999px;width:48px;height:48px;font-size:28px;line-height:1;cursor:pointer}
.lb button:hover{background:rgba(255,255,255,.24)}
.lb-x{top:18px;right:18px}
.lb-n{top:50%;right:18px;transform:translateY(-50%)}
.lb-p{left:18px;right:auto}
@media (max-width:900px){
  .pg-feat-in{grid-template-columns:1fr}
  .pg-proof-l{grid-template-columns:1fr 1fr}
  .pg-proof-l li:nth-child(3){border-left:0;padding-left:0}
  .pg-proof-l li:nth-child(n+3){border-top:1px solid var(--rule-2)}
}

/* calm hover on photo tiles */
.pg-w img{transition:transform 1.4s var(--ease)}
@media (hover:hover){.pg-w-b:hover img{transform:scale(1.025)}}
.pg-rf button{transition:background .45s var(--ease),color .45s var(--ease),border-color .45s var(--ease)}
.lb[open]{animation:lbIn .7s var(--ease)}
.lb[open]::backdrop{animation:lbFade .6s var(--ease-io)}
.lb img{transition:opacity .5s var(--ease-io)}
@keyframes lbIn{from{opacity:0;transform:scale(.98)}}
@keyframes lbFade{from{opacity:0}}
@media (prefers-reduced-motion:reduce){.lb[open],.lb[open]::backdrop{animation:none}}

/* hero booking card. Desktop: the closed card's bottom edge sits on the same line as the intro's last line; opening it grows the card
   upward over the photo (it is positioned, so nothing else moves). Tablet (one column): the card is simply open, so there is nothing to jump. */
@media (min-width:1181px){
  .dir-a .ph-form{align-self:end;position:relative;height:var(--hs-closed,98px)}
  .dir-a .ph-form .hs-c{position:absolute;left:0;right:0;bottom:0}
}
@media (min-width:641px) and (max-width:1180px){
  .dir-a .ph-form .hs-c .hs-x{grid-template-rows:1fr}
  .dir-a .ph-form .hs-c .hs-g button{opacity:1;transform:none}
  .dir-a .ph-form .hs-c .hs-tog{display:none}
  .dir-a .ph-form .hs-c .hs-t{padding-right:0}
}

/* link cards led by RK's drawing (the photo would repeat the hero of the page they open) */
.pg-ic{position:relative;padding:26px 24px 24px;border-radius:18px;background:var(--card,#fff);box-shadow:inset 0 0 0 1px var(--rule-2);gap:8px;min-height:220px;transition:box-shadow .35s,transform .5s cubic-bezier(.2,.7,.2,1)}
.pg-ic:hover{box-shadow:inset 0 0 0 1px var(--ink);transform:translateY(-2px)}
.pg-ic-d svg{display:block;width:46px;height:46px;color:var(--ink);margin-bottom:auto}
.pg-ic-d{flex:1}
.pg-ic b{font-size:20px}
.pg-ic-ar{position:absolute;top:22px;right:22px;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;box-shadow:inset 0 0 0 1px var(--rule-2);transition:background .3s,color .3s}
.pg-ic-ar svg{width:14px;height:14px}
.pg-ic:hover .pg-ic-ar{background:var(--ink);color:#fff;box-shadow:none}
/* Compact header: no photo, for pages people open to do one thing. Dark like the menus and footer, so the header above keeps its light-on-dark look */
.ptop{position:relative;color:#fff;background:radial-gradient(90% 120% at 100% 0%,rgba(122,150,110,.2),transparent 60%),linear-gradient(170deg,#18211b,#0E1410 70%);overflow:hidden}
.ptop-in{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(32px,5vw,88px);align-items:end;padding-top:calc(84px + clamp(36px,4vw,64px));padding-bottom:clamp(40px,4.4vw,64px)}
.ptop h1{color:#fff;font-size:clamp(36px,3.9vw,60px);letter-spacing:-.042em;line-height:1;max-width:17em}
.ptop-l{font-size:clamp(17px,1.25vw,19px);line-height:1.5;color:rgba(255,255,255,.8);max-width:36em;margin-top:18px}
.ptop-l a{color:#fff;text-decoration:underline;text-underline-offset:3px}
.ptop .crumbs{margin-bottom:18px}
.ptop-post h1{font-size:clamp(32px,3.3vw,50px);max-width:22em;line-height:1.04}
.ptop-post .ptop-l{font-size:15px;color:rgba(255,255,255,.66)}
/* contact: everything you came for above the fold */
.ptop-ct .ptop-in{grid-template-columns:minmax(0,1fr) minmax(0,560px);align-items:start}
.ptop-ct .est2-card{box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),inset 0 1px 0 rgba(255,255,255,.16),0 40px 90px -40px rgba(0,0,0,.8);background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.02) 50%),rgba(255,255,255,.03)}
.ct-ph{display:block;margin-top:clamp(28px,3vw,44px);color:#fff;font-size:clamp(34px,3.4vw,52px);font-weight:600;letter-spacing:-.04em;line-height:1}
.ct-ph small{display:block;font-size:14px;font-weight:500;letter-spacing:0;color:rgba(255,255,255,.62);margin-bottom:10px}
.ct-ph:hover{color:var(--accent-l)}
.ct-dl{margin:30px 0 0;display:grid;border-top:1px solid rgba(255,255,255,.14);max-width:34em}
.ct-dl div{display:grid;grid-template-columns:96px 1fr;gap:16px;padding:15px 0;border-bottom:1px solid rgba(255,255,255,.14);font-size:16px}
.ct-dl dt{color:rgba(255,255,255,.56);font-size:14px;padding-top:2px}
.ct-dl dd{margin:0;color:#fff;line-height:1.5}
.ct-dl dd a{color:var(--accent-l);font-size:15px}
.ct-dl .stars{display:inline-flex;margin-right:8px;vertical-align:-1px}
.ct-soc{margin-top:22px}.ct-soc a{color:rgba(255,255,255,.8)}
.ct-map .map{height:clamp(320px,36vw,460px);border-radius:14px;overflow:hidden}
.ct-map p{margin-top:14px;color:var(--mute);font-size:15px}
.inner .pg-contact{padding-bottom:0}
/* reviews: the three scores sit in the header */
.ptop-sc{display:grid;grid-template-columns:repeat(3,auto);gap:0;border:1px solid rgba(255,255,255,.14);border-radius:14px}
.ptop-sc div{padding:18px 26px}.ptop-sc div+div{border-left:1px solid rgba(255,255,255,.14)}
.ptop-sc b{display:block;font-size:clamp(30px,2.6vw,40px);font-weight:600;letter-spacing:-.04em;line-height:1}
.ptop-sc span{display:block;margin-top:6px;font-size:13.5px;color:rgba(255,255,255,.66);white-space:nowrap}
/* FAQ: jump to a topic */
.ptop-j{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
.ptop-j a{padding:9px 15px;border-radius:999px;font-size:14.5px;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);transition:background .2s,color .2s}
.ptop-j a:hover{background:#fff;color:#111}
.inner .faq[id]{scroll-margin-top:90px}
/* financing: apply and the HFS badge up top */
.ptop-act{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.ptop-ghost{color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.35);background:transparent}
.ptop-ghost:hover{background:#fff;color:#111}
.ptop-fine{margin-top:16px;font-size:13.5px;color:rgba(255,255,255,.56)}
.ptop-hfs{display:block;width:clamp(220px,22vw,300px);border-radius:10px;overflow:hidden;box-shadow:0 24px 50px -24px rgba(0,0,0,.7)}
.ptop-hfs img{display:block;width:100%;height:auto}
/* articles: the photo after the opening paragraph */
.post-fig{position:relative;margin:32px 0;border-radius:12px;overflow:hidden}
.post-fig img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
@media (max-width:1024px){.ptop-in,.ptop-ct .ptop-in{grid-template-columns:1fr;align-items:start}.ptop-ct .est2-card{max-width:620px}}
@media (max-width:640px){
  .ptop-in{padding-top:calc(72px + 28px);padding-bottom:36px;gap:28px}
  .ptop h1{font-size:clamp(32px,9vw,40px)}
  .ptop .crumbs{color:rgba(255,255,255,.7);font-size:13px;margin-bottom:14px}.ptop .crumbs a{color:#fff}
  .ptop-l{font-size:16.5px;margin-top:12px}
  .ptop-ct .ptop-in{gap:32px}
  .ct-ph{margin-top:24px}
  .ct-dl div{grid-template-columns:76px 1fr}
  .ptop-sc{grid-template-columns:repeat(3,1fr)}.ptop-sc div{padding:14px 12px}.ptop-sc span{white-space:normal;font-size:12.5px}
  .ptop-act .btn{flex:1 1 100%;justify-content:center}
  .ptop-hfs{width:100%;max-width:340px}
}
.ct-dl dd a{display:inline-flex;align-items:center;gap:6px}.ct-dl dd a svg{width:13px;height:13px;flex:none}
/* right after the compact header the first section starts closer, so content stays in the first screen */
html body .ptop+.sec{padding-top:clamp(40px,5vw,80px)}
.pg-rev .rq{margin-top:0}  /* inner pages have no heading above the review, so no gap for one */
.ct-dl .gstars{margin-right:.55em}  /* plain text follows here, not a flex gap */
.ptop-sc span.gg{display:inline-block;margin:0 .4em 0 0;width:14px;height:14px;vertical-align:-2px}  /* this row styles its spans as block lines */
/* compact header photo: the page's own image, low opacity, washed toward the text side */
.ptop-bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.ptop-bg img{width:100%;height:100%;object-fit:cover;opacity:.34}
.ptop-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(14,20,16,.94) 0%,rgba(14,20,16,.78) 45%,rgba(14,20,16,.5) 100%),linear-gradient(0deg,rgba(14,20,16,.6),rgba(14,20,16,0) 40%)}
@media (max-width:900px){.ptop-bg::after{background:linear-gradient(0deg,rgba(14,20,16,.92),rgba(14,20,16,.7))}}
.pg-team-ph{margin:22px 0 0}
.pg-team-ph img{width:100%;height:auto;display:block;border-radius:var(--r,0)}
.pg-team-ph figcaption{font-size:14px;color:var(--mute);margin-top:8px}
.pg-portrait img{max-width:460px}

/* tex.css */
/* Background textures. One class on <body> picks the texture; it sits behind content on the light sections and scrolls with the page. */
/* Texture as an accent: only on a few light sections, fading in from one corner, kept very faint. */
:is(#services,#journal,.faq,.est,.pg-intro,.pg-svc-list,.pg-areas,.fsv,.ffaq,.fwhy,.fband,.frev){position:relative;isolation:isolate}
:is(#services,#journal,.faq,.est,.pg-intro,.pg-svc-list,.pg-areas,.fsv,.ffaq,.fwhy,.fband,.frev)::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:var(--tex-ink,currentColor);opacity:var(--tex-o,.05);
  -webkit-mask-image:var(--tex),radial-gradient(ellipse 85% 100% at var(--tex-at,100% 0),#000 0%,rgba(0,0,0,.65) 50%,transparent 92%);
          mask-image:var(--tex),radial-gradient(ellipse 85% 100% at var(--tex-at,100% 0),#000 0%,rgba(0,0,0,.65) 50%,transparent 92%);
  -webkit-mask-size:var(--tex-s,900px),100% 100%;mask-size:var(--tex-s,900px),100% 100%;-webkit-mask-repeat:repeat,no-repeat;mask-repeat:repeat,no-repeat;
  -webkit-mask-composite:source-in;mask-composite:intersect}
/* the texture image is decorative: it stays off until the page has loaded (motion.js adds .tex-on) */
html:not(.tex-on) :is(#services,#journal,.faq,.est,.pg-intro,.pg-svc-list,.pg-areas,.fsv,.ffaq,.fwhy,.fband,.frev)::after{display:none}
/* alternate the corner so it never reads as a repeated stamp */
:is(.faq,.ffaq,#journal,.pg-svc-list){--tex-at:0 100%}
.tex-topo{--tex:url(tex/topo.svg);--tex-s:1100px;--tex-o:.14}
.tex-flag{--tex:url(tex/flag.svg);--tex-s:1000px;--tex-o:.13}
.tex-draft{--tex:url(tex/draft.svg);--tex-s:1200px;--tex-o:.14}
.tex-herring{--tex:url(tex/herring.svg);--tex-s:84px;--tex-o:.04}
.tex-oak{--tex:url(tex/oak.svg);--tex-s:2000px;--tex-o:.075}
.tex-dogwood{--tex:url(tex/dogwood.svg);--tex-s:1900px;--tex-o:.065}
.dir-a{--tex-ink:#142019}
.dir-b{--tex-ink:#006938}
/* dark and green sections: the same texture in white, a touch quieter */
.dir-b :is(.fband,.frev){--tex-ink:#fff}
.dir-b .fband{--tex-at:100% 50%}
.dir-b.tex-oak :is(.fband,.frev){--tex-o:.06}.dir-b.tex-flag :is(.fband,.frev){--tex-o:.08}.dir-b.tex-topo :is(.fband,.frev){--tex-o:.09}
.est{--tex-at:0 0}
@media (max-width:640px){:is(#services,#journal,.faq,.est,.pg-intro,.pg-svc-list,.pg-areas,.fsv,.ffaq,.fwhy,.fband,.frev){--tex-s:700px}}
@media print{:is(#services,#journal,.faq,.est,.pg-intro,.pg-svc-list,.pg-areas,.fsv,.ffaq,.fwhy,.fband,.frev)::after{display:none}}

/* B: tinted sections open with a curved bed line, edged in lime like steel landscape edging */
.dir-b :is(.fwhy,.frev,.pg-intro,.pg-svc-list,.pg-areas){position:relative}
.dir-b :is(.fwhy,.pg-intro,.pg-svc-list,.pg-areas)::before,.dir-b .frev::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:clamp(28px,4vw,56px);pointer-events:none;z-index:1;
  background:url(tex/bed-light.svg) 0 0/100% 100% no-repeat;margin-bottom:-1px}
.dir-b .frev::before{background-image:url(tex/bed-dark.svg)}
.dir-b :is(.frev,.pg-svc-list)::before{transform:scaleX(-1)}

/* A: spec viewer. Hotspots on the photo, a spotlight that glides to the active one, and a spec list that opens beside it. */
@property --sx{syntax:"<percentage>";inherits:true;initial-value:50%}
@property --sy{syntax:"<percentage>";inherits:true;initial-value:50%}
.sv{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:clamp(20px,2.4vw,36px);align-items:stretch;transition:--sx .9s var(--ease),--sy .9s var(--ease)}
.sv-ph{position:relative;aspect-ratio:800/537;overflow:hidden;background:var(--dark);align-self:start}
.sv-ph img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.02);transform-origin:var(--sx) var(--sy);transition:transform 1.4s var(--ease)}
.sv.live .sv-ph img{transform:scale(1.06)}
.sv-dim{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .6s var(--ease);
  background:radial-gradient(circle at var(--sx) var(--sy),rgba(8,12,10,0) 0,rgba(8,12,10,0) 90px,rgba(8,12,10,.5) 260px,rgba(8,12,10,.62) 100%)}
.sv.live .sv-dim{opacity:1}
.sv-hs{position:absolute;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;display:grid;place-items:center;cursor:pointer;
  background:rgba(255,255,255,.18);border:1.5px solid rgba(255,255,255,.9);color:#fff;font:600 12px/1 var(--f);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);box-shadow:0 2px 10px rgba(0,0,0,.35);transition:transform .35s var(--ease),background .3s,color .3s}
.sv-hs::after{content:"";position:absolute;inset:-7px;border-radius:50%;border:1.5px solid rgba(255,255,255,.55);opacity:0;transform:scale(.8)}
.sv-hs:hover,.sv-hs:focus-visible{transform:scale(1.12)}
.sv-hs.on{background:#fff;color:var(--ink);transform:scale(1.15)}
.sv-hs.on::after{animation:svPulse 2.2s var(--ease) infinite}
@keyframes svPulse{0%{opacity:.9;transform:scale(.8)}100%{opacity:0;transform:scale(1.7)}}
.sv-tag{position:absolute;left:var(--sx);top:var(--sy);transform:translate(30px,-50%);padding:8px 12px;background:#fff;color:var(--ink);font-size:14px;font-weight:600;letter-spacing:-.01em;white-space:nowrap;
  box-shadow:0 10px 30px -10px rgba(0,0,0,.5);pointer-events:none;opacity:0;transition:opacity .4s var(--ease)}
.sv-tag.l{transform:translate(calc(-100% - 30px),-50%)}
.sv.live .sv-tag.show{opacity:1}
.sv-list{list-style:none;display:flex;flex-direction:column;border-top:1px solid var(--rule-2)}
.sv-it{position:relative;border-bottom:1px solid var(--rule-2)}
.sv-it>button{display:grid;grid-template-columns:34px 1fr;gap:12px;align-items:start;width:100%;padding:18px 0;text-align:left;color:var(--mute);transition:color .3s}
.sv-it>button:hover,.sv-it.on>button{color:var(--ink)}
.sv-n{width:26px;height:26px;border-radius:50%;border:1px solid currentColor;display:grid;place-items:center;font-size:12px;font-weight:600;margin-top:1px;transition:background .3s,color .3s,border-color .3s}
.sv-it.on .sv-n{background:var(--ink);border-color:var(--ink);color:#fff}
.sv-t b{display:block;font-size:19px;font-weight:600;letter-spacing:-.02em;color:inherit}
.sv-t small{display:block;font-size:14.5px;margin-top:3px;line-height:1.4}
.sv-more{display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s var(--ease)}
.sv-more>div{overflow:hidden;min-height:0;padding-left:46px}
.sv-it.on .sv-more{grid-template-rows:1fr}
.sv-more dl{display:grid;gap:8px;padding-bottom:12px}
.sv-more dl div{display:grid;grid-template-columns:70px 1fr;gap:10px;font-size:14px}
.sv-more dt{color:var(--mute)}
.sv-more p{font-size:14.5px;line-height:1.5;padding:12px 0 20px;border-top:1px dashed var(--rule-2)}
.sv-bar{position:absolute;left:0;bottom:-1px;height:2px;width:100%;background:var(--ink);transform:scaleX(0);transform-origin:left}
.sv.auto .sv-it.on .sv-bar{animation:svBar var(--sv-t,5s) linear forwards}
@keyframes svBar{to{transform:scaleX(1)}}
@media (max-width:900px){.sv{grid-template-columns:1fr}.sv-tag{display:none}.sv-hs{width:30px;height:30px;margin:-15px 0 0 -15px}}
@media (prefers-reduced-motion:reduce){.sv,.sv-ph img,.sv-dim{transition:none}.sv-hs.on::after{animation:none}}

/* A: footer title block, like the corner of a landscape drawing */
.tb{display:grid;grid-template-columns:2fr 2fr 1.6fr 1.4fr 70px 90px;border:1px solid rgba(255,255,255,.28);margin-top:56px;color:#fff}
.tb-c{padding:14px 16px;border-left:1px solid rgba(255,255,255,.28);display:flex;flex-direction:column;justify-content:center;gap:5px;min-width:0}
.tb-c:first-child{border-left:0}
.tb small{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.66)}
.tb b{font-weight:500;font-size:15px}
.tb-scale svg{width:100%;max-width:160px;height:18px}
.tb-n{align-items:center}.tb-n svg{width:30px;height:30px}
.tb-sheet b{font-size:26px;font-weight:600;letter-spacing:-.02em}
@media (max-width:900px){.tb{grid-template-columns:1fr 1fr 1fr}.tb-c:nth-child(4){border-left:0}.tb-c:nth-child(n+4){border-top:1px solid rgba(255,255,255,.28)}}
@media (max-width:560px){.tb{grid-template-columns:1fr 1fr}.tb-c{border-left:0;border-top:1px solid rgba(255,255,255,.28)}.tb-c:nth-child(even){border-left:1px solid rgba(255,255,255,.28)}.tb-c:nth-child(-n+2){border-top:0}}
@media (prefers-reduced-motion:reduce){.co .co-svg path{stroke-dashoffset:0!important}}

/* mobile.css */
/* Phones and tablets. Loaded last so it settles the small-screen layout for every page in both directions. */

.hero-short{display:none}

/* ---------- phones ---------- */
@media (max-width:640px){
  /* Heroes stay full-bleed: the photo fills the screen, the headline sits on it,
     and the first booking question follows on the same dark band. */
  html body .hero,html body .vh,html body .phero{--hp:62vh;position:relative;display:block;min-height:0;padding:0;background:var(--dark);color:#fff;overflow:hidden}
  html body.dir-b .phero,html body.dir-b .phero-short,html body.dir-a .phero{display:block;min-height:0;padding:0;background:var(--dark);color:#fff}
  html body .vh{--hp:62vh}
  html body .phero{--hp:62vh}
  html body .phero-short{--hp:56vh}
  @supports (height:1svh){
    html body .hero{--hp:62svh}html body .vh{--hp:62svh}html body .phero{--hp:62svh}html body .phero-short{--hp:56svh}
  }
  html body .hero-bg,html body.dir-a .hero-bg,html body .vh-v,html body .ph-bg{position:absolute;inset:0 0 auto 0;height:var(--hp);overflow:hidden}
  html body .hero-bg img,html body .vh-v img,html body .ph-bg img{object-position:58% 50%}
  /* home hero: phones get a portrait crop already centered on the house */
  html body.dir-a .hero-bg img{object-position:50% 50%}
  html body .hero-bg::after,html body .ph-bg::after{background:linear-gradient(180deg,rgba(9,15,11,.5) 0,rgba(9,15,11,0) 18%,rgba(9,15,11,0) 52%,rgba(9,15,11,.72) 78%,var(--dark) 94%)}
  html body .vh::before{inset:0 0 auto 0;height:var(--hp);background:linear-gradient(180deg,rgba(8,18,11,.2) 0,rgba(8,18,11,0) 26%,rgba(8,18,11,0) 50%,rgba(8,18,11,.8) 78%,var(--dark) 94%)}
  html body .hero-in,html body .vh-in,html body .ph-in{position:relative;z-index:2;display:block;padding:0 var(--gut) 30px}
  html body .hero-copy,html body .vh-copy,html body .ph-copy{min-height:var(--hp);display:flex;flex-direction:column;justify-content:flex-end;padding:96px 0 24px}
  html body .vh-copy{padding-top:40px}
  /* copy overlaps the bottom of the photo instead of sitting under a fixed-height block */
  html body .hero-copy,html body .vh-copy,html body .ph-copy{min-height:0;margin-top:max(150px,calc(var(--hp) - 270px));padding-top:0}
  html body .phero-short .ph-copy{margin-top:calc(var(--hp) - 190px)}
  html body .hero-copy>p.intro{display:none}
  html body .hero-short{display:block}
  html body .phero-short .ph-in{padding-bottom:0}

  html body .hero h1{font-size:clamp(36px,10.4vw,44px);line-height:.98;color:#fff;white-space:normal}
  html body .vh h1{font-size:clamp(36px,10vw,44px);color:#fff}
  html body .ph-copy h1,html body.dir-a .ph-copy h1,html body.dir-b .ph-copy h1{font-size:clamp(30px,8.6vw,38px);color:#fff}
  html body .hero-copy>p,html body .vh-copy>p,html body .ph-copy>p{color:rgba(255,255,255,.86);font-size:15.5px;line-height:1.5;margin-top:14px}
  html body .crumbs{color:rgba(255,255,255,.7);margin-bottom:12px}
  html body .crumbs a{color:#fff}

  /* proof line wraps as one tidy row, no orphaned bullets */
  html body .proof{flex-direction:row;flex-wrap:wrap;gap:8px 16px;margin-top:16px;font-size:13.5px;color:#fff}
  html body .proof li+li::before{display:none}
  html body .proof a{color:#fff;font-weight:600}
  html body .vh-proof{margin-top:18px;padding-top:14px}
  html body .vh-proof>div{border-left-color:rgba(255,255,255,.22)}
  html body .vh-proof dt{color:#fff;font-size:28px}
  html body .vh-proof dd{color:rgba(255,255,255,.78)}

  /* first booking question: glass on the dark band */
  html body :is(.hero,.vh,.phero) .hs{color:#fff;padding:20px 16px 16px;border-radius:16px;border:0;
    background:linear-gradient(160deg,rgba(255,255,255,.10),rgba(255,255,255,.03) 50%),rgba(255,255,255,.04);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),inset 0 1px 0 rgba(255,255,255,.18)}
  html body.dir-b :is(.vh,.phero) .hs{border-radius:8px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),inset 0 3px 0 var(--lime)}
  html body :is(.hero,.vh,.phero) .hs-t{color:#fff;font-size:22px;padding-right:0}
  html body :is(.hero,.vh,.phero) .hs-s{color:rgba(255,255,255,.74);margin-bottom:0}
  html body :is(.hero,.vh,.phero) .hs-g{margin-top:16px;gap:8px}
  html body :is(.hero,.vh,.phero) .hs-g button{min-height:52px;padding:10px 12px;font-size:14.5px;color:#fff;background:rgba(255,255,255,.08);border:0;border-radius:12px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);transition:background .2s,transform .2s}
  html body.dir-b :is(.vh,.phero) .hs-g button{border-radius:6px}
  html body :is(.hero,.vh,.phero) .hs-g button svg{opacity:.7}
  html body.dir-b :is(.vh,.phero) .hs-g button svg{color:var(--lime);opacity:1}
  html body :is(.hero,.vh,.phero) .hs-g button:active{background:#fff;color:#111;transform:scale(.98)}
  html body .hs-tog{display:none}
  html body .ph-form,html body .hero-form,html body .vh-form{max-width:none;margin:0}

  /* logo: keep the full wordmark legible next to the leaf */
  .dir-a .logo{gap:4px}
  .dir-a .logo .mono{width:42px}
  .logo-w b{font-size:17px}
  .logo-w span{display:block;font-size:8.2px;margin-top:5px}

  /* tighter section rhythm on a phone */
  .dir-a .sec,.inner .sec{padding:64px 0}
  .dir-b .fsec{padding:60px 0}
  .sec-head{margin-bottom:28px;gap:14px}
  .sec-head p{justify-self:start;font-size:16.5px}
  h2{text-wrap:balance}

  /* small details */
  .c-lab{display:none}
  .lv-ctl{gap:14px}
  .lv-tabs{display:grid;grid-template-columns:1fr 1fr}
  .cf-name{font-size:13.5px}
  .st-note{display:none}
}

@media (max-width:380px){
  .logo-w b{font-size:15.5px}
  .logo-w span{font-size:7.4px;letter-spacing:.22em}
  html body :is(.hero,.vh,.phero) .hs-g button{font-size:13.5px;padding:10px}
}

/* ---------- tablets (iPad portrait and landscape) ---------- */
@media (min-width:641px) and (max-width:1180px){
  /* headline and the first question share the photo, question under the copy at a readable width */
  .dir-a .hero{min-height:min(100svh,1100px)}
  .dir-a .hero-in,.ph-in{gap:28px}
  .dir-a .hero-form,.ph-form,.vh-form{max-width:520px}
  .dir-a .hero h1{white-space:normal;font-size:clamp(52px,8vw,72px)}
  .dir-b .vh-in{grid-template-columns:1fr;gap:28px}
  .dir-b .vh h1{max-width:none}
  /* tablets get the same compact card as desktop: tap the question or the chevron to open the choices */
}
@media (min-width:641px) and (max-width:900px){
  .st{height:auto}
}
@media (min-width:901px) and (max-width:1180px){
  .dir-a .hero h1{font-size:clamp(50px,5.6vw,62px)}
  .ph-copy h1,.dir-a .ph-copy h1{font-size:clamp(38px,4.4vw,52px)}
}