:root{--bg:#F2FFFA;--ink:#121A1A;--muted:#4A5C5B;--aqua:#1EE3D3;--aqua-deep:#009C92;--panel:#FFFFFF;--line:#CBEBE5;
box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#0C1514;--ink:#EAFBF8;--muted:#9DB8B4;--aqua:#1EE3D3;--aqua-deep:#1EE3D3;--panel:#132220;--line:#24403C}}
:root[data-theme="dark"]{--bg:#0C1514;--ink:#EAFBF8;--muted:#9DB8B4;--aqua:#1EE3D3;--aqua-deep:#1EE3D3;--panel:#132220;--line:#24403C}
*,*::before,*::after{box-sizing:border-box}
html{scroll-padding-top:env(safe-area-inset-top,0px);scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:400 1.0625rem/1.6 "DM Sans",system-ui,sans-serif}
a{color:inherit}
:focus-visible{outline:3px solid var(--aqua-deep);outline-offset:3px}
.wrap{max-width:68rem;margin:0 auto;padding:0 1.25rem}
.site-header{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem;padding:1rem 0;position:relative}
.site-header strong{font-family:"Permanent Marker",cursive;font-size:1.4rem;color:var(--aqua-deep)}
.brand{display:inline-flex;align-items:center;gap:.5rem;margin-right:auto;text-decoration:none}
.logo-sm{height:3.25rem;width:auto;display:block}
.call,.menu-btn{font:inherit;font-weight:700;padding:.5rem 1rem;border-radius:2rem;border:2px solid var(--ink);text-decoration:none;cursor:pointer;line-height:1.2}
.call{background:var(--aqua);color:#121A1A;border-color:#121A1A}
.menu-btn{background:transparent;color:var(--ink)}
#site-nav a{text-decoration:none;font-weight:500}
#site-nav a:hover{text-decoration:underline}
/* Phones: links collapse behind the Menu button (only when JS can open it) */
@media(max-width:47.99rem){
.call{display:none}
.js #site-nav{display:none;flex-basis:100%;flex-direction:column;border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);margin-top:.25rem}
.js .site-header.open #site-nav{display:flex}
.js #site-nav a{padding:.85rem .25rem;font-size:1.2rem}
.js #site-nav a+a{border-top:1px solid var(--line)}
html:not(.js) .menu-btn{display:none}
html:not(.js) #site-nav{flex-basis:100%;display:flex;flex-wrap:wrap;gap:.25rem 1.25rem}
}
@media(min-width:48rem){
.site-header{flex-wrap:nowrap;gap:1.25rem}
.menu-btn{display:none}
#site-nav{order:-1;display:flex;gap:1.25rem;margin-left:auto}
.brand{order:-2;margin-right:0}
}
.hero{padding:3rem 0 4.5rem}
.wordmark{font-family:"Permanent Marker",cursive;font-weight:400;margin:0;line-height:.9;font-size:clamp(4.5rem,24vw,13rem);color:var(--aqua);
text-shadow:.04em .04em 0 var(--ink);letter-spacing:.01em;transform:rotate(-2deg);transform-origin:left;animation:pop .6s cubic-bezier(.2,1.4,.4,1) both}
@keyframes pop{from{opacity:0;transform:rotate(-6deg) scale(.85)}}
@media (prefers-reduced-motion:reduce){.wordmark{animation:none}html{scroll-behavior:auto}}
.hero .lead{font-size:clamp(1.25rem,3.4vw,1.8rem);line-height:1.35;max-width:32rem;margin:2rem 0 1.75rem;font-weight:500}
.btn{display:inline-block;background:var(--ink);color:var(--bg);padding:.9rem 1.6rem;border-radius:.5rem;font-weight:700;text-decoration:none;border:2px solid var(--ink)}
.btn:hover{background:var(--aqua);color:#121A1A;border-color:#121A1A}
.btn.alt{background:transparent;color:var(--ink)}
.cta{display:flex;flex-wrap:wrap;gap:.75rem}
h2{font-family:"Permanent Marker",cursive;font-weight:400;font-size:clamp(2rem,6vw,3rem);margin:0 0 1.5rem;line-height:1.1}
section{padding:3.5rem 0}
.services{background:var(--aqua);color:#121A1A}
.services .row{display:grid;grid-template-columns:1fr;gap:.35rem;padding:1.5rem 0;border-top:2px solid #121A1A}
.services .row:last-child{border-bottom:2px solid #121A1A}
.services h3{margin:0;font-size:clamp(1.6rem,5vw,2.4rem);line-height:1.1}
.services p{margin:0;max-width:34rem}
@media(min-width:48rem){.services .row{grid-template-columns:1fr 1fr;gap:2rem;align-items:baseline}}
.points{display:grid;gap:1.5rem;list-style:none;padding:0;margin:0}
@media(min-width:48rem){.points{grid-template-columns:repeat(2,1fr)}}
@media(min-width:64rem){.points{grid-template-columns:repeat(4,1fr)}}
.points li{border-left:4px solid var(--aqua);padding-left:1rem}
.points h3{margin:0 0 .25rem;font-size:1.2rem}
.points p{margin:0;color:var(--muted)}
.contact{background:var(--panel);border-top:1px solid var(--line)}
.contact ul{list-style:none;padding:0;margin:1.5rem 0 0}
.contact li{padding:.4rem 0}
footer{padding:1.5rem 0 2rem;color:var(--muted);font-size:.95rem}
.filters{display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 1.25rem}
.chip{font:inherit;font-weight:500;padding:.45rem 1rem;border-radius:2rem;border:2px solid var(--ink);background:transparent;color:var(--ink);cursor:pointer}
.chip[aria-pressed="true"]{background:var(--aqua);color:#121A1A}
.gallery-grid{columns:2;column-gap:.75rem}
@media(min-width:48rem){.gallery-grid{columns:3;column-gap:1rem}}
.gallery-grid figure{margin:0 0 1rem;break-inside:avoid}
.gallery-grid img{width:100%;height:auto;display:block;border-radius:.4rem;border:2px solid var(--ink)}
.gallery-grid figcaption{margin-top:.4rem;font-size:.95rem;color:var(--muted)}
.gallery-grid figure[hidden]{display:none}
.hero{display:flex;flex-direction:column;gap:2rem}
.hero-logo{width:100%;max-width:9rem;height:auto;align-self:flex-end;margin-top:-1rem}
@media(min-width:48rem){.hero-logo{max-width:15rem;align-self:flex-start;margin-top:0}}
@media(min-width:56rem){.hero{flex-direction:row;align-items:center;justify-content:space-between}.hero-logo{max-width:20rem;align-self:center}}
@media(max-width:47.99rem){.hero{padding:1.5rem 0 2.5rem}.hero .lead{margin-bottom:1.5rem}}
.hero .tagline{font-family:"Permanent Marker",cursive;font-size:clamp(1.5rem,5vw,2.3rem);line-height:1.2;margin:1.25rem 0 0}
.hero .lead{margin-top:1rem}
.review{margin:0 0 1.5rem;padding:.25rem 0 .25rem 1.25rem;border-left:6px solid var(--aqua);max-width:40rem}
.review blockquote{margin:0;font-size:clamp(1.25rem,3.4vw,1.6rem);line-height:1.4;font-weight:500}
.review figcaption{margin-top:.75rem;color:var(--muted)}
.areas{list-style:none;padding:0;margin:1rem 0;display:flex;flex-wrap:wrap;gap:.5rem}
.areas li{border:2px solid var(--ink);border-radius:2rem;padding:.2rem .85rem}
.quote{display:grid;gap:1rem;max-width:36rem;margin-top:1.5rem}
.quote label{display:grid;gap:.3rem;font-weight:500}
.quote input,.quote select,.quote textarea{font:inherit;font-size:1rem;width:100%;padding:.7rem;border:2px solid var(--ink);border-radius:.4rem;background:var(--bg);color:var(--ink)}
.quote .btn{cursor:pointer;font:inherit;font-weight:700;justify-self:start}
.quote .note{margin:0;color:var(--muted);font-size:.95rem}
.quote .note.ok{color:var(--ink);font-weight:700;border-left:4px solid var(--aqua);padding-left:.75rem}
.quote .note.err{color:#B3261E;font-weight:500}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .quote .note.err{color:#FFB4AB}}
:root[data-theme="dark"] .quote .note.err{color:#FFB4AB}
.quote .opt{font-weight:400;color:var(--muted)}
.quote input[type=file]{padding:.5rem}
.quote [aria-invalid="true"]{border-color:#B3261E}
.quote .btn[disabled]{opacity:.6;cursor:progress}
.quote .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.ba-title{font-weight:700;margin:1.5rem 0 .5rem}
.ba{display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem;max-width:36rem}
.ba figure{margin:0}
.ba img{width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;display:block;border-radius:.4rem;border:2px solid var(--ink)}
.ba figcaption{margin-top:.3rem;font-weight:700}
/* Phones: call / quote bar pinned to the bottom of the screen */
.callbar{display:none}
@media(max-width:47.99rem){
.callbar{display:grid;grid-template-columns:1fr 1fr;position:fixed;left:0;right:0;bottom:0;z-index:10;border-top:2px solid #121A1A;padding-bottom:env(safe-area-inset-bottom,0px);background:var(--aqua)}
.callbar a{padding:.95rem .25rem;text-align:center;font-weight:700;font-size:.95rem;white-space:nowrap;text-decoration:none;color:#121A1A}
.callbar a+a{background:#121A1A;color:#F2FFFA}
body{padding-bottom:calc(4rem + env(safe-area-inset-bottom,0px))}
}
/* Inner pages: intro, breadcrumbs, lists, FAQ, links */
.page-hero{padding:1.5rem 1.25rem 3rem}
.page-hero h1{font-family:"Permanent Marker",cursive;font-weight:400;font-size:clamp(2.1rem,6.5vw,3.6rem);line-height:1.1;margin:.5rem 0 1rem;max-width:22ch}
.page-hero .intro{font-size:clamp(1.1rem,2.6vw,1.3rem);line-height:1.5;max-width:40rem;margin:0 0 1.5rem}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.25rem;font-size:.95rem;color:var(--muted)}
.crumbs li+li::before{content:"/";margin-right:.25rem}
.services h3 a{text-decoration:none}
.services h3 a:hover,.services .more:hover{text-decoration:underline}
.services .more{display:inline-block;margin-top:.25rem;font-weight:700;text-decoration:none}
.includes{list-style:none;padding:0;margin:0;display:grid;gap:0;max-width:44rem}
.includes li{padding:.85rem 0 .85rem 2rem;border-top:2px solid #121A1A;position:relative;font-size:1.15rem;font-weight:500}
.includes li:last-child{border-bottom:2px solid #121A1A}
.includes li::before{content:"✓";position:absolute;left:.25rem;font-weight:700}
.areas a{text-decoration:none}
.areas a:hover{text-decoration:underline}
.faq{max-width:46rem;border-top:2px solid var(--ink)}
.faq details{border-bottom:2px solid var(--ink)}
.faq summary{cursor:pointer;padding:1rem 2rem 1rem 0;font-weight:700;font-size:1.1rem;list-style:none;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:.25rem;top:.85rem;font-size:1.4rem;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq details p{margin:0 0 1rem;max-width:40rem}
.links{list-style:none;padding:0;margin:0;display:grid;gap:.75rem}
@media(min-width:48rem){.links{grid-template-columns:repeat(2,1fr)}}
.links a{display:grid;gap:.2rem;padding:1rem 1.1rem;border:2px solid var(--ink);border-radius:.5rem;text-decoration:none;height:100%}
.links a:hover{background:var(--aqua);color:#121A1A}
.links span{color:inherit;opacity:.8}
.area-group{padding:2rem 0 0}
.area-group h2{font-size:clamp(1.5rem,4vw,2rem);margin-bottom:1rem}
.area-list{list-style:none;padding:0;margin:0;display:grid;gap:.5rem;grid-template-columns:repeat(auto-fill,minmax(12rem,1fr))}
.area-list li{border:2px solid var(--ink);border-radius:.5rem;padding:.6rem .9rem;scroll-margin-top:1rem}
.area-list li:target{background:var(--aqua);color:#121A1A}
.area-list span{color:var(--muted);font-size:.95rem}
.area-list li:target span{color:#121A1A}
.area-group+.services{margin-top:3.5rem}
.hero h1.lead{font-family:inherit;letter-spacing:normal}
.foot-links ul{list-style:none;padding:0;margin:.25rem 0 1.25rem;display:flex;flex-wrap:wrap;gap:.25rem 1.25rem}
.foot-links p{margin:0}
footer a{color:inherit}