/* Visual refresh layer. Loaded after style.css and mobile.css; nothing here changes behaviour. */
:root{--sun:#f2c078;--mint:#dcebe2;--deep:#123a33;--shadow:0 10px 30px rgba(24,63,56,.10);--shadow-lg:0 18px 46px rgba(24,63,56,.16)}
html{scroll-padding-top:96px;scroll-behavior:smooth}
body{background:radial-gradient(900px 420px at 88% -60px,#e3eed9 0,transparent 70%),radial-gradient(700px 380px at -8% 24%,#f4ead8 0,transparent 70%),var(--cream)}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:70;background:#fff}
.page-in{animation:pagein .38s ease both}
@keyframes pagein{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* header + navigation */
header{position:sticky;top:env(safe-area-inset-top,0px);z-index:60;min-height:76px;background:rgba(255,255,255,.9);-webkit-backdrop-filter:saturate(1.4) blur(10px);backdrop-filter:saturate(1.4) blur(10px)}
.logo{display:inline-block;color:var(--green);transition:transform .6s ease}.brand:hover .logo{transform:rotate(90deg)}
nav button{transition:background .15s,color .15s}nav button:hover{background:var(--light);color:var(--ink)}
.navmore{position:relative}
.navmore summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:12px 14px;border-radius:8px;color:var(--muted);user-select:none}
.navmore summary::-webkit-details-marker{display:none}.navmore summary::after{content:"▾";font-size:11px}
.navmore summary:hover{background:var(--light);color:var(--ink)}
.navmore[open] summary,.navmore:has(button.active) summary{background:var(--light);color:var(--ink);font-weight:700}
.navmore-panel{position:absolute;right:0;top:calc(100% + 8px);z-index:80;min-width:270px;display:flex;flex-direction:column;gap:2px;padding:8px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-lg)}
.navmore-panel button{width:100%;text-align:left}
#accountnav{font-weight:600}#accountnav:hover{background:var(--green);color:#fff}
@media(min-width:761px) and (max-width:1100px){
 header{flex-wrap:wrap}.demo{display:none}
 .mobile-nav-toggle{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:10px 14px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink)}
 header nav{display:none;width:100%;flex-direction:column;gap:4px;padding-bottom:8px}header nav.mobile-nav-open{display:flex}
 .navmore{width:100%}.navmore-panel{position:static;box-shadow:none;border:0;padding:0 0 0 10px;min-width:0}
}
@media(max-width:760px){
 .navmore{width:100%}.navmore summary{min-height:48px;width:100%;font-size:16px}
 .navmore-panel{position:static;box-shadow:none;border:0;padding:0 0 0 10px;min-width:0}
 header nav.mobile-nav-open{max-height:calc(100dvh - 96px);overflow-y:auto}
}

/* hero */
.hero{grid-template-columns:1.1fr 1fr;padding:52px 0 26px}
.hero h1{font-weight:700;font-size:clamp(40px,5vw,68px);letter-spacing:-2.4px}
.heroart{padding:0;min-height:340px;background:var(--mint);border-radius:120px 18px 18px 18px;box-shadow:var(--shadow-lg)}
.heroart .hero-svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.heroart .house{display:none}
.artbadge{z-index:2;animation:floaty 6s ease-in-out infinite}
@keyframes floaty{50%{transform:translateY(-6px)}}
.sparkle{transform-box:fill-box;transform-origin:center;animation:twinkle 3.2s ease-in-out infinite}
@keyframes twinkle{0%,100%{opacity:.35;transform:scale(.8)}50%{opacity:1;transform:scale(1.15)}}
.trustrow span{background:#fff;border:1px solid var(--line);padding:8px 13px;border-radius:999px;box-shadow:0 4px 14px rgba(24,63,56,.06)}
@media(max-width:760px){.heroart{display:block;min-height:210px;border-radius:80px 14px 14px 14px}.hero{padding:26px 0 14px}}

/* facts strip, how it works, area chips */
.factstrip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:6px 0 30px;background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);overflow:hidden}
.factstrip div{padding:20px 22px;display:flex;flex-direction:column;gap:4px;min-width:0}
.factstrip div+div{border-left:1px solid var(--line)}
.factstrip strong{font:800 36px/1 Manrope,sans-serif;color:var(--green);letter-spacing:-1px}
.factstrip span{font-size:13px;line-height:1.45;color:var(--muted)}
@media(max-width:760px){.factstrip{grid-template-columns:repeat(2,minmax(0,1fr))}.factstrip div:nth-child(3){border-left:0}.factstrip div:nth-child(n+3){border-top:1px solid var(--line)}.factstrip strong{font-size:30px}}
.areachips{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:16px 0 4px}
.areachip{border:1px solid var(--line);background:#fff;color:var(--ink);border-radius:999px;padding:8px 14px;font-size:13px;transition:background .15s,border-color .15s,transform .1s}
.areachip:hover{background:var(--light);border-color:var(--green)}.areachip:active{transform:scale(.97)}
.howitworks{margin:54px 0 10px}
.howitworks h2{font-size:clamp(24px,3vw,34px);max-width:640px;margin:10px 0 24px}
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;list-style:none;padding:0;margin:0;counter-reset:step}
.steps li{counter-increment:step;background:#fff;border:1px solid var(--line);border-radius:18px;padding:24px;box-shadow:var(--shadow)}
.steps li::before{content:counter(step);display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--green);color:#fff;font:700 17px Manrope,sans-serif;margin-bottom:16px}
.steps h3{margin:0 0 8px}.steps p{margin:0;color:var(--muted);font-size:14px}
@media(max-width:760px){.steps{grid-template-columns:1fr}}

/* surfaces and controls */
.searchbox{border-radius:20px;box-shadow:var(--shadow-lg);padding:26px}
.panel{border-radius:18px}
.notice{background:#fdf3e1;border:1px solid #f0dfbd;border-radius:12px}
.primary{box-shadow:0 6px 16px rgba(32,102,83,.26);transition:background .15s,transform .12s,box-shadow .15s}
.primary:hover:not(:disabled){background:#185643;transform:translateY(-1px);box-shadow:0 10px 22px rgba(32,102,83,.32)}
.primary:active:not(:disabled){transform:none}
.secondary{transition:background .15s,border-color .15s}.secondary:hover:not(:disabled){border-color:var(--green);background:var(--light)}
input:focus,select:focus,textarea:focus{border-color:var(--green);box-shadow:0 0 0 3px rgba(32,102,83,.16)}
.tabs button{border-radius:999px;transition:border-color .15s,background .15s}.tabs button:hover:not(.active){border-color:var(--green)}
::selection{background:#cfe6d6}

/* result cards */
.card{border-radius:18px;box-shadow:0 1px 0 rgba(24,63,56,.04);transition:transform .22s ease,box-shadow .22s ease}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.cover{height:128px;background-image:radial-gradient(rgba(255,255,255,.7) 1.5px,transparent 1.6px);background-size:18px 18px}
.avatar{width:72px;height:72px;bottom:-26px;box-shadow:0 6px 16px rgba(24,63,56,.16)}
.cardbody{padding-top:38px}
.rating{color:#b4741a;font-weight:700}.rating .muted{font-weight:400}
.availability{background:#e5f1e3;font-weight:600;border-radius:10px}
.price{font-size:27px}
.emptystate{text-align:left}

/* calendar states */
.calendar-touch-help{display:block;font-size:13px;color:var(--muted);margin:4px 0 0}
.calendar-legend{display:flex;flex-wrap:wrap;gap:6px 14px;margin:10px 0 0;font-size:12px;color:var(--muted)}
.calendar-legend span{display:inline-flex;align-items:center;gap:6px}
.calendar-legend i{width:14px;height:14px;border-radius:4px;border:1px solid var(--line);display:inline-block}
.lg-open{background:#e3f1e5;border-color:#8dbf9c!important}.lg-blocked{background:repeating-linear-gradient(135deg,#f1f1ee 0 4px,#e2e3dd 4px 8px)}.lg-held{background:#fbefd8;border-color:#e8c88f!important}.lg-booked{background:#f6d9bd;border-color:#e0a972!important}.lg-expired{background:#fff;border:1px dashed #e0a972!important}
.day{transition:background .15s,border-color .15s}
.day:not(:disabled):hover{border-color:var(--green)}
.day[data-state=open]{background:#e3f1e5;border-color:#8dbf9c}.day[data-state=open] small{color:#14563f;font-weight:600}
.day[data-state=blocked]{background:repeating-linear-gradient(135deg,#f1f1ee 0 6px,#e5e6e0 6px 12px);color:var(--muted)}.day[data-state=blocked] small{color:var(--muted)}
.day[data-state=held]{background:#fbefd8;border-color:#e8c88f}.day[data-state=held] small{color:#8a5a14}
.day[data-state=booked]{background:#f6d9bd;border-color:#e0a972}.day[data-state=booked] small{color:#7a4a0e}
.day[data-state=expired]{background:#fff;border:1px dashed #e0a972}.day[data-state=expired] small{color:#8a5a14}
.day.selected{outline:3px solid var(--green);outline-offset:-1px}
.day:disabled{opacity:.45}
@media(max-width:760px){
 .calendar{grid-template-columns:repeat(7,minmax(0,1fr));min-width:0;gap:3px}
 .day{min-width:0;min-height:54px;padding:6px 2px;text-align:center;font-size:15px}
 .day small{display:none}
 .day::after{content:"";display:block;width:7px;height:7px;border-radius:50%;margin:6px auto 0;background:transparent}
 .day[data-state=open]::after{background:#2f8a62}.day[data-state=blocked]::after{background:#9aa39d}.day[data-state=held]::after{background:#d9a441}.day[data-state=booked]::after{background:#c27a2c}.day[data-state=expired]::after{background:transparent;border:1.5px dashed #c27a2c}
}

/* listing checklist, service form groups */
.checklist{margin-bottom:22px;background:#fffaf0;border-color:#f0dfbd}
.checklist ul{list-style:none;padding:0;margin:12px 0 0;display:grid;gap:8px}
.checklist li{display:flex;gap:10px;align-items:center}.checklist li.done{color:var(--muted);text-decoration:line-through}
.chips-select{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:4px 18px}

/* request tray stays reachable on phones */
@media(max-width:760px){
 .request-tray{position:sticky;top:calc(env(safe-area-inset-top,0px) + 74px);z-index:25;padding:12px 14px;margin:12px 0;box-shadow:var(--shadow-lg)}
 .request-tray .tray-copy{display:none}.request-tray h3{margin:0 0 8px;font-size:16px}
}

/* footer */
footer{background:var(--deep);color:#c3d6cc;border-top:0;margin-top:30px}
footer a,footer .brand{color:#fff}footer .branddot{color:var(--sun)}

/* round-two tweaks: single-row desktop header, calmer hero headline, spacing between stacked panels */
header nav{flex-wrap:nowrap;margin-left:auto;gap:4px}
nav button{padding:12px 11px;font-size:13.5px;white-space:nowrap}
#accountnav{margin-left:6px}
@media(max-width:1320px){.demo{display:none}}
@media(min-width:1101px){header{flex-wrap:nowrap}}
.hero{grid-template-columns:1.25fr 1fr}
.hero h1{font-size:clamp(38px,4.2vw,58px);letter-spacing:-2px}
.panel>.eyebrow+h2{margin-top:10px}
.search-choices{margin-top:18px}
@media(max-width:900px){.hero{grid-template-columns:minmax(0,1fr)}.hero h1{font-size:clamp(36px,9vw,48px)}.heroart{min-height:230px}}
.artbadge{top:18px;bottom:auto;left:18px}

/* Yearly / monthly billing toggle */
.billing-toggle{display:inline-flex;gap:4px;padding:4px;border-radius:999px;background:#eef3ef;border:1px solid #d8e3dc;margin:4px 0 18px}
.billing-toggle button{border:0;background:transparent;padding:9px 18px;border-radius:999px;font:inherit;font-weight:600;color:#3b5249;cursor:pointer;min-height:40px}
.billing-toggle button.on{background:#206653;color:#fff;box-shadow:0 2px 6px rgba(32,102,83,.25)}
.savebadge{display:inline-block;margin-left:6px;padding:2px 8px;border-radius:999px;background:#f2c078;color:#4a3410;font-size:.72rem;font-weight:700}
.billing-toggle button.on .savebadge{background:#f7d9a4}
.savenote{margin:2px 0 6px;font-size:.9rem;font-weight:600;color:#206653}
.savenote.muted{font-weight:500;color:inherit}
.soon{display:inline-block;margin-left:4px;padding:1px 8px;border-radius:999px;background:#eef3ef;border:1px solid #d8e3dc;color:#4b6358;font-size:.72rem;font-weight:600;white-space:nowrap}

/* Earned review badges */
.tag.badge{font-weight:700;border:1px solid transparent}
.badge-top{background:#fdf0cf;color:#6b4a0b;border-color:#f0d58f}
.badge-rising{background:#e5f1e3;color:#14563f;border-color:#b9d9c1}
.badgepreview{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;margin:14px 0}
.badgepreview .secondary{min-height:40px}

/* review confirmation and form messages */
.notice.success{background:#e5f1e3;border:1px solid #b9d9c1;color:#14563f;border-radius:12px;padding:14px 16px;margin:0 0 14px}
.formmsg:not(:empty){margin-top:10px;padding:10px 14px;border-radius:10px;background:#fdecea;border:1px solid #f1b9b2;color:#8a1f12;font-weight:600}
