@media(prefers-reduced-motion:no-preference){
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.28s;animation-timing-function:cubic-bezier(.2,.7,.3,1)}
header.cornice{view-transition-name:mo-cornice}
.clampbar{view-transition-name:mo-clampbar}

.mo-bar{position:fixed;top:0;left:0;right:0;height:3px;z-index:300;background:linear-gradient(90deg,var(--spark-orange),#F2A16A);transform:scaleX(0);transform-origin:0 50%;pointer-events:none;will-change:transform}

.cornice{transition:box-shadow .3s ease,background-color .3s ease}
.cornice.mo-stuck{box-shadow:var(--bloom);background:color-mix(in srgb,var(--bedrock) 96%,transparent)}
.cornice nav a[aria-current],.drawer2 nav a[aria-current]{background:var(--spark-tint);color:var(--spark)}
.drawer2 nav a[aria-current]{background:var(--spark);color:var(--bedrock)}
.signmark img{transition:rotate .45s cubic-bezier(.34,1.56,.64,1),scale .45s cubic-bezier(.34,1.56,.64,1)}
@media(hover:hover) and (pointer:fine){.signmark:hover img{rotate:-12deg;scale:1.12}}

@keyframes mo-rise{from{opacity:.02;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes mo-settle{from{scale:1.16}to{scale:1}}
@keyframes mo-tag{from{opacity:0;translate:0 8px}to{opacity:1;translate:0 0}}
@keyframes mo-dot{0%{box-shadow:0 0 0 0 rgba(240,185,142,.7)}70%,100%{box-shadow:0 0 0 9px rgba(240,185,142,0)}}
@keyframes mo-ping{0%{box-shadow:0 0 0 0 rgba(176,97,58,.55)}100%{box-shadow:0 0 0 16px rgba(176,97,58,0)}}
@keyframes mo-ripple{from{scale:0;opacity:.45}to{scale:1;opacity:0}}
@keyframes mo-pulse{0%,100%{opacity:1}50%{opacity:.7}}

html.js .hero .chase>div:first-child>*{animation:mo-rise .62s cubic-bezier(.17,.84,.44,1) both}
html.js .hero .chase>div:first-child>:nth-child(2){animation-delay:.07s}
html.js .hero .chase>div:first-child>:nth-child(3){animation-delay:.14s}
html.js .hero .chase>div:first-child>:nth-child(4){animation-delay:.21s}
html.js .hero .chase>div:first-child>:nth-child(5){animation-delay:.28s}
html.js .hero .hpic{animation:mo-rise .7s cubic-bezier(.17,.84,.44,1) .1s both}
html.js .hero .hpic img{animation:mo-settle 1.7s cubic-bezier(.16,.84,.3,1) both;transform:translate3d(0,var(--py,0px),0) scale(1.08);will-change:transform}
html.js .hero .mockmark{animation:mo-tag .5s ease 1s both}
h1.ribbon::before{animation:mo-dot 2.4s ease-out infinite}

html.js .plinth .textspan>*{animation:mo-rise .6s cubic-bezier(.17,.84,.44,1) both}
html.js .plinth .textspan>:nth-child(2){animation-delay:.06s}
html.js .plinth .textspan>:nth-child(3){animation-delay:.12s}
html.js .plinth .textspan>:nth-child(4){animation-delay:.18s}
html.js .plinth .textspan>:nth-child(5){animation-delay:.24s}
html.js .plinth .textspan>:nth-child(n+6){animation-delay:.3s}
html.js .trailmark{animation:mo-tag .5s ease both}

html.js .lift2 h2{transition:translate .6s cubic-bezier(.17,.84,.44,1) .08s}
html.js .lift2:not(.in):not(:focus-within) h2{translate:0 14px}
html.js .lift2 .ribbon{transition:scale .5s cubic-bezier(.34,1.56,.64,1) .02s,opacity .4s ease}
html.js .lift2:not(.in):not(:focus-within) .ribbon{scale:.9;transform-origin:0 50%}

.mo-seq{opacity:0;translate:-16px 0;transition:opacity .45s ease calc(var(--i,0) * 70ms),translate .55s cubic-bezier(.17,.84,.44,1) calc(var(--i,0) * 70ms)}
.mo-seq.mo-in{opacity:1;translate:0 0}
.quotetile tr.mo-seq{translate:0 12px}
.chiprow a.mo-seq,.ticker2 .chase>span.mo-seq{translate:0 10px}
.chiprow a.mo-seq.mo-in,.ticker2 .chase>span.mo-seq.mo-in{translate:0 0}

img.mo-img{clip-path:inset(7% 7% 7% 7% round 22px);opacity:.01;transition:clip-path .9s cubic-bezier(.16,.84,.3,1),opacity .6s ease,scale 1.1s cubic-bezier(.16,.84,.3,1);scale:1.06}
img.mo-img.mo-in{clip-path:inset(0 0 0 0 round 0);opacity:1;scale:1}

.task2 img,.plateset figure img,.guidetile img{transition:scale .7s cubic-bezier(.16,.84,.3,1)}
@media(hover:hover) and (pointer:fine){
.task2:hover img,.plateset figure:hover img{scale:1.05}
.task2 .readon::after{content:"\2192";display:inline-block;margin-inline-start:8px;text-decoration:none;transition:translate .25s cubic-bezier(.2,.7,.3,1)}
.task2:hover .readon::after,.task2 .readon:hover::after{translate:5px 0}
}
.task2 .readon::after{content:"\2192";display:inline-block;margin-inline-start:8px;text-decoration:none}

.mo-card{position:relative}
.mo-card::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .35s ease;background:radial-gradient(280px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.26),transparent 62%)}
.mo-card.mo-hot::after{opacity:1}

.btn{position:relative;overflow:hidden;isolation:isolate}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(105deg,transparent 32%,rgba(255,255,255,.34) 50%,transparent 68%);translate:-130% 0}
@media(hover:hover) and (pointer:fine){
.btn:hover::before{translate:130% 0;transition:translate .75s cubic-bezier(.2,.6,.2,1)}
.btn,.chiprow a,.clampbar a,.cornice nav a,.cornice-tel,.task2{transition:scale .16s cubic-bezier(.2,.7,.3,1),translate .16s cubic-bezier(.2,.7,.3,1),box-shadow .16s ease,background-color .16s ease,color .16s ease,transform .3s cubic-bezier(.2,.7,.3,1)}
.btn{transform:translate(var(--tx,0px),var(--ty,0px))}
}
.mo-ripple{position:absolute;border-radius:50%;pointer-events:none;z-index:-1;background:rgba(255,255,255,.55);animation:mo-ripple .65s ease-out forwards}
.mo-ping{animation:mo-ping 1.3s ease-out 2}
.btn.mo-busy{animation:mo-pulse 1s ease-in-out infinite;pointer-events:none}

.askset details{transition:background-color .3s ease}
.askset details.mo-closing{background:var(--terrain)}
.askset details.mo-closing summary::after{rotate:0deg}
.askset details summary::after{content:"+";transition:rotate .3s cubic-bezier(.34,1.56,.64,1),background-color .25s ease}
.askset details[open] summary::after{content:"+";rotate:45deg}
.askset details[open] > p{animation:mo-rise .45s cubic-bezier(.17,.84,.44,1) both}
details.mo-anim{overflow:hidden}

input,select,textarea{transition:border-color .2s ease,box-shadow .25s ease,background-color .2s ease}
input:focus,select:focus,textarea:focus{box-shadow:0 0 0 4px rgba(176,97,58,.18);background:var(--shelf)}
input[type=checkbox]:focus,input[type=radio]:focus{box-shadow:none}

.clampbar{transition:translate .35s cubic-bezier(.2,.7,.3,1),opacity .3s ease}
.clampbar.mo-away{translate:0 calc(100% + 32px);opacity:0}

.drawer2 nav a{opacity:0;translate:18px 0;transition:opacity .15s ease,translate .15s ease,background-color .2s ease,color .2s ease}
.drawer2.open nav a{opacity:1;translate:0 0;transition:opacity .35s ease calc(var(--k,0) * 45ms + 120ms),translate .45s cubic-bezier(.17,.84,.44,1) calc(var(--k,0) * 45ms + 120ms),background-color .2s ease,color .2s ease}
.drawer2 .drawer-act{opacity:0;translate:0 12px;transition:opacity .15s ease,translate .15s ease}
.drawer2.open .drawer-act{opacity:1;translate:0 0;transition:opacity .35s ease .5s,translate .45s cubic-bezier(.17,.84,.44,1) .5s}

@media(hover:hover) and (pointer:fine){
footer .footnav2 a,footer .reachlist a,footer .footrule a,footer .chase p>a:not([href="/contact/"]){text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 calc(50% + .78em)/0 1px no-repeat;transition:background-size .3s cubic-bezier(.2,.7,.3,1),color .2s ease}
footer .footnav2 a:hover,footer .reachlist a:hover,footer .footrule a:hover,footer .chase p>a:not([href="/contact/"]):hover{text-decoration:none;background-size:100% 1px}
main p a:not([class]),main li a:not([class]){transition:text-decoration-color .2s ease,color .2s ease}
.chiprow a{position:relative}
}
.chiprow a{transition:background-color .2s ease,color .2s ease,box-shadow .2s ease}

.heatstat .bignum{font-variant-numeric:tabular-nums}
}
@media print{.mo-seq,img.mo-img,.mo-bar{opacity:1!important;translate:none!important;clip-path:none!important;scale:1!important}.mo-bar{display:none}}

body{font-optical-sizing:auto;font-kerning:normal}
html body main h1:not(.ribbon):not(.x),html body .bannerh:not(.x){font-stretch:82%;letter-spacing:-.04em;line-height:1.05}
html body .bannerh:not(.x):not(.y){font-size:clamp(40px,6.2vw,68px)}
html body main h1:not(.ribbon):not(.x){font-size:clamp(34px,5.2vw,56px)}
html body main h2:not(.x):not(.y),html body .closingband h2:not(.x):not(.y){font-stretch:87%;letter-spacing:-.03em;line-height:1.08;font-size:clamp(28px,4.2vw,44px)}
html body main h3:not(.x):not(.y),html body .task2 h3:not(.x):not(.y),html body .localtile h3:not(.x):not(.y){font-stretch:94%;letter-spacing:-.02em;line-height:1.2;font-size:22px}
html body .signblock .markb:not(.x){font-size:12px;padding:.28em .55em;margin-left:.55em}
.signmark,summary,footer b{font-stretch:90%}
.heatstat .bignum{font-stretch:82%;font-variant-numeric:tabular-nums}
.ribbon,.badge,.picker-h{letter-spacing:.12em}
main p,main li,details p{max-width:62ch}
.lead,.sub{max-width:58ch}
main p a:not([class]),main li a:not([class]){text-underline-position:from-font;text-decoration-skip-ink:auto}
.ribbon,.chiprow a,.badge,.btn,.cornice nav a,.readon{white-space:nowrap}
@media(max-width:560px){
html body .bannerh:not(.x):not(.y){font-size:clamp(38px,11.2vw,46px)}
html body main h2:not(.x):not(.y),html body .closingband h2:not(.x):not(.y){font-size:clamp(28px,8vw,34px)}
.hero p.lead{font-size:19px;line-height:1.55}
.ribbon{white-space:normal;letter-spacing:.1em}
.signmark{white-space:nowrap}
}

.pk-in{position:absolute;opacity:0;inset:0;margin:0;width:100%;height:100%;cursor:pointer}
.picker{margin-top:30px}
.picker-h{font-size:12px;font-weight:700;text-transform:uppercase;color:var(--subtle);margin:0 0 12px}
.pk-row{display:flex;gap:10px;flex-wrap:wrap}
.pk-chip{position:relative;display:inline-flex;align-items:center;min-height:44px;padding:0 20px;border-radius:999px;border:2px solid var(--streak);font-weight:700;font-size:16px;cursor:pointer;transition:background .24s,color .24s,border-color .24s,transform .24s cubic-bezier(.22,.8,.24,1)}
.pk-chip:hover{border-color:var(--spark);transform:translateY(-2px)}
.pk-chip:has(input:checked){background:var(--spark);border-color:var(--spark);color:var(--bedrock)}
.pk-chip:has(input:focus-visible){outline:3px solid var(--spark-orange);outline-offset:2px;box-shadow:0 0 0 2px #fff}
.pk-scope{display:grid;margin-top:16px;min-height:78px}
.pk-scope p{grid-area:1/1;margin:0;font-size:17px;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .24s,transform .52s cubic-bezier(.22,.8,.24,1),visibility 0s linear .24s}
.hero:has(input[value="drive"]:checked) .s-drive,.hero:has(input[value="patio"]:checked) .s-patio,.hero:has(input[value="conc"]:checked) .s-conc,.hero:has(input[value="walk"]:checked) .s-walk{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.hpic{display:grid}
.hpic .pk{grid-area:1/1;display:none;position:relative}
.hpic .pk img{width:100%;height:100%;aspect-ratio:auto;object-fit:cover;border-radius:0;border:0}
.hero:has(input[value="drive"]:checked) .pk-drive,.hero:has(input[value="patio"]:checked) .pk-patio,.hero:has(input[value="conc"]:checked) .pk-conc,.hero:has(input[value="walk"]:checked) .pk-walk{display:block}
.hpic .mockmark{z-index:4}
.tiles{position:absolute;inset:0;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(3,1fr);pointer-events:none;z-index:3}
.tiles i{background:var(--terrain);box-shadow:inset 0 0 0 1px rgba(142,116,98,.38);transform:scale(0)}

.nsswitch{display:inline-flex;padding:5px;border-radius:999px;background:var(--terrain);margin-top:28px;gap:4px;flex-wrap:wrap}
.nsswitch label{position:relative;min-height:44px;padding:0 22px;display:inline-flex;align-items:center;border-radius:999px;font-weight:700;font-size:16px;cursor:pointer;transition:background .24s,color .24s}
.nsswitch label:has(input:checked){background:var(--spark);color:var(--bedrock)}
.nsswitch label:has(input:focus-visible){outline:3px solid var(--spark-orange);outline-offset:2px}
.strip{position:relative;margin-top:44px}
.strip svg{width:100%;height:auto;display:block;border-radius:var(--curve-w2)}
.strip .pin{position:absolute;top:-26px;left:23%;width:30px;height:30px;margin-left:-15px;border-radius:50% 50% 50% 4px;transform:rotate(-45deg);background:var(--spark);box-shadow:var(--bloom-sm);transition:left .62s cubic-bezier(.22,.8,.24,1)}
.strip .pin::after{content:"";position:absolute;inset:10px;border-radius:50%;background:var(--bedrock)}
.seam:has(input[value="s"]:checked) .pin{left:77%}
.groundsec .localtile{transition:opacity .52s cubic-bezier(.22,.8,.24,1),transform .52s cubic-bezier(.22,.8,.24,1)}
.seam:has(input[value="n"]:checked) .groundsec .localtile:last-child,.seam:has(input[value="s"]:checked) .groundsec .localtile:first-child{filter:grayscale(.8);transform:scale(.985);box-shadow:none}

.layers{display:grid;grid-template-columns:.8fr 1.2fr;gap:36px;margin:34px 0;align-items:start}
.lbtns{display:flex;flex-direction:column;gap:8px}
.lbtn{position:relative;display:flex;align-items:center;gap:14px;min-height:56px;padding:8px 18px;border-radius:var(--curve-w2);border:2px solid transparent;background:var(--bedrock);font-family:var(--lead-face);font-weight:800;font-size:18px;cursor:pointer;transition:background .24s,border-color .24s,transform .24s cubic-bezier(.22,.8,.24,1),box-shadow .24s}
.lbtn:hover{transform:translateX(4px);border-color:var(--streak)}
.lbtn:has(input:checked){background:var(--shelf);border-color:var(--spark);box-shadow:var(--bloom-sm);transform:translateX(8px)}
.lbtn:has(input:focus-visible){outline:3px solid var(--spark-orange);outline-offset:2px}
.lbtn .sw{width:24px;height:24px;border-radius:8px;flex:none;box-shadow:inset 0 0 0 1px rgba(38,33,29,.18)}
.xsec{margin:0}
.xsec svg{display:block;width:100%;height:auto;border-radius:14px;overflow:hidden}
.xsec .xl{transition:opacity .24s,filter .24s;opacity:.42;filter:saturate(.55)}
.xsec .hl{fill:none;stroke:#B0613A;stroke-width:4;opacity:0;transition:opacity .24s}
.layers:has(input[value="pav"]:checked) .g-pav,.layers:has(input[value="sand"]:checked) .g-sand,.layers:has(input[value="agg"]:checked) .g-agg,.layers:has(input[value="soil"]:checked) .g-soil{opacity:1;filter:none}
.layers:has(input[value="pav"]:checked) .g-pav .hl,.layers:has(input[value="sand"]:checked) .g-sand .hl,.layers:has(input[value="agg"]:checked) .g-agg .hl,.layers:has(input[value="soil"]:checked) .g-soil .hl{opacity:1}
.xdesc{display:grid;margin-top:16px}
.xdesc p{grid-area:1/1;margin:0;font-size:17px;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .24s,transform .52s cubic-bezier(.22,.8,.24,1),visibility 0s linear .24s}
.xdesc b{display:block;font-family:var(--lead-face);font-size:22px;margin-bottom:6px;color:var(--spark)}
.layers:has(input[value="pav"]:checked) .d-pav,.layers:has(input[value="sand"]:checked) .d-sand,.layers:has(input[value="agg"]:checked) .d-agg,.layers:has(input[value="soil"]:checked) .d-soil{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.xnote{font-size:14px;color:var(--subtle);margin-top:12px}
@media(max-width:860px){.layers{grid-template-columns:1fr}}
@media(max-width:560px){.nsswitch{display:flex;flex-direction:column;border-radius:26px;width:100%}.nsswitch label{justify-content:center}}

@media(prefers-reduced-motion:no-preference){
.hpic .pk{animation:wh-fade .42s cubic-bezier(.22,.8,.24,1) both}
@keyframes wh-fade{from{opacity:0;transform:scale(1.04)}to{opacity:1;transform:none}}
.tiles i{animation:wh-unlay .56s cubic-bezier(.22,.8,.24,1) both;animation-delay:calc(.28s + var(--d,0) * .06s)}
@keyframes wh-unlay{from{transform:scale(1)}to{transform:scale(0)}}
.pk-chip:has(input:checked){animation:wh-pop .24s cubic-bezier(.3,.7,.4,1)}
@keyframes wh-pop{0%{transform:scale(.94)}60%{transform:scale(1.05)}100%{transform:none}}
}
@media(prefers-reduced-motion:reduce){.tiles{display:none}}