/* @generated by scripts/bundle-css.mjs from 4 sources; do not hand-edit. */
/* ---- assets/css/styles.css ---- */
*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/*! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com*/*,:after,:before{box-sizing:border-box;border:0 solid #e3dccd}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:Public Sans,Public Sans Fallback,system-ui,sans-serif;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#a39a88}input::placeholder,textarea::placeholder{opacity:1;color:#a39a88}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}html{scroll-padding-top:5.5rem}main[id],section[id]{scroll-margin-top:5.5rem}#quote:target{padding-top:8.5rem}.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}@keyframes gallery-skeleton-slide{0%{background-position:200% 0}to{background-position:-200% 0}}@keyframes gallery-skeleton-shimmer{0%{transform:translateX(-100%)}to{transform:translateX(100%)}}@keyframes gallery-skeleton-fade{0%{opacity:1}to{opacity:0}}.latest-uploads-carousel{scrollbar-width:thin;scrollbar-color:#22c55e transparent;overscroll-behavior-x:contain}.latest-uploads-carousel::-webkit-scrollbar{height:6px}.latest-uploads-carousel::-webkit-scrollbar-track{background:transparent}.latest-uploads-carousel::-webkit-scrollbar-thumb{background-color:#22c55e;border-radius:3px}.latest-uploads-carousel::-webkit-scrollbar-thumb:hover{background-color:#16a34a}.latest-upload-slide{flex:0 0 clamp(220px,72vw,256px);aspect-ratio:4/3}@media (min-width:640px){.latest-upload-slide{flex-basis:256px}}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.pointer-events-none{pointer-events:none}.visible{visibility:visible}.static{position:static}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.inset-0{inset:0}.bottom-6{bottom:1.5rem}.left-1\/2{left:50%}.top-0{top:0}.z-0{z-index:0}.z-10{z-index:10}.z-50{z-index:50}.col-span-full{grid-column:1/-1}.mx-auto{margin-left:auto;margin-right:auto}.mb-1{margin-bottom:.25rem}.mb-10{margin-bottom:2.5rem}.mb-12{margin-bottom:3rem}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:.75rem}.mb-4{margin-bottom:1rem}.mb-5{margin-bottom:1.25rem}.mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem}.ml-2{margin-left:.5rem}.ml-3{margin-left:.75rem}.mr-1{margin-right:.25rem}.mr-2{margin-right:.5rem}.mr-2\.5{margin-right:.625rem}.mr-3{margin-right:.75rem}.mt-0\.5{margin-top:.125rem}.mt-1{margin-top:.25rem}.mt-10{margin-top:2.5rem}.mt-12{margin-top:3rem}.mt-16{margin-top:4rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}.mt-5{margin-top:1.25rem}.mt-6{margin-top:1.5rem}.mt-7{margin-top:1.75rem}.mt-8{margin-top:2rem}.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.table{display:table}.grid{display:grid}.contents{display:contents}.hidden{display:none}.h-10{height:2.5rem}.h-11{height:2.75rem}.h-12{height:3rem}.h-14{height:3.5rem}.h-16{height:4rem}.h-4{height:1rem}.h-48{height:12rem}.h-5{height:1.25rem}.h-64{height:16rem}.h-80{height:20rem}.h-96{height:24rem}.h-full{height:100%}.min-h-screen{min-height:100vh}.w-10{width:2.5rem}.w-11{width:2.75rem}.w-14{width:3.5rem}.w-4{width:1rem}.w-6{width:1.5rem}.w-auto{width:auto}.w-full{width:100%}.max-w-2xl{max-width:42rem}.max-w-3xl{max-width:48rem}.max-w-4xl{max-width:56rem}.max-w-7xl{max-width:80rem}.shrink-0{flex-shrink:0}.grow{flex-grow:1}.-translate-x-1\/2{--tw-translate-x:-50%}.-translate-x-1\/2,.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.cursor-pointer{cursor:pointer}.resize{resize:both}.scroll-mt-24{scroll-margin-top:6rem}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-start{align-items:flex-start}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-12{gap:3rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-5{gap:1.25rem}.gap-6{gap:1.5rem}.gap-8{gap:2rem}.space-x-2>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(.5rem*var(--tw-space-x-reverse));margin-left:calc(.5rem*(1 - var(--tw-space-x-reverse)))}.space-x-3>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(.75rem*var(--tw-space-x-reverse));margin-left:calc(.75rem*(1 - var(--tw-space-x-reverse)))}.space-x-4>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(1rem*var(--tw-space-x-reverse));margin-left:calc(1rem*(1 - var(--tw-space-x-reverse)))}.space-x-6>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(1.5rem*var(--tw-space-x-reverse));margin-left:calc(1.5rem*(1 - var(--tw-space-x-reverse)))}.space-y-1>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.25rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.25rem*var(--tw-space-y-reverse))}.space-y-2>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.5rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.5rem*var(--tw-space-y-reverse))}.space-y-3>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.75rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.75rem*var(--tw-space-y-reverse))}.space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem*var(--tw-space-y-reverse))}.space-y-5>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1.25rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.25rem*var(--tw-space-y-reverse))}.space-y-6>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1.5rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.5rem*var(--tw-space-y-reverse))}.overflow-hidden{overflow:hidden}.whitespace-nowrap{white-space:nowrap}.break-all{word-break:break-all}.rounded{border-radius:.25rem}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.border{border-width:1px}.border-2{border-width:2px}.border-b-2{border-bottom-width:2px}.border-l-4{border-left-width:4px}.border-t{border-top-width:1px}.border-amber-200{--tw-border-opacity:1;border-color:rgb(253 230 138/var(--tw-border-opacity,1))}.border-amber-500{--tw-border-opacity:1;border-color:rgb(245 158 11/var(--tw-border-opacity,1))}.border-blue-100{--tw-border-opacity:1;border-color:rgb(219 234 254/var(--tw-border-opacity,1))}.border-blue-600{--tw-border-opacity:1;border-color:rgb(37 99 235/var(--tw-border-opacity,1))}.border-gray-200{--tw-border-opacity:1;border-color:rgb(227 220 205/var(--tw-border-opacity,1))}.border-gray-300{--tw-border-opacity:1;border-color:rgb(207 198 179/var(--tw-border-opacity,1))}.border-gray-700{--tw-border-opacity:1;border-color:rgb(71 63 54/var(--tw-border-opacity,1))}.border-gray-800{--tw-border-opacity:1;border-color:rgb(47 42 36/var(--tw-border-opacity,1))}.border-green-100{--tw-border-opacity:1;border-color:rgb(223 234 219/var(--tw-border-opacity,1))}.border-green-200{--tw-border-opacity:1;border-color:rgb(191 213 184/var(--tw-border-opacity,1))}.border-green-600{--tw-border-opacity:1;border-color:rgb(47 111 79/var(--tw-border-opacity,1))}.border-green-700{--tw-border-opacity:1;border-color:rgb(36 90 64/var(--tw-border-opacity,1))}.border-red-500{--tw-border-opacity:1;border-color:rgb(239 68 68/var(--tw-border-opacity,1))}.border-transparent{border-color:transparent}.border-white{--tw-border-opacity:1;border-color:rgb(255 255 255/var(--tw-border-opacity,1))}.border-white\/20{border-color:hsla(0,0%,100%,.2)}.border-white\/40{border-color:hsla(0,0%,100%,.4)}.bg-amber-50{--tw-bg-opacity:1;background-color:rgb(255 251 235/var(--tw-bg-opacity,1))}.bg-amber-500{--tw-bg-opacity:1;background-color:rgb(245 158 11/var(--tw-bg-opacity,1))}.bg-black{--tw-bg-opacity:1;background-color:rgb(0 0 0/var(--tw-bg-opacity,1))}.bg-black\/30{background-color:rgba(0,0,0,.3)}.bg-black\/40{background-color:rgba(0,0,0,.4)}.bg-black\/50{background-color:rgba(0,0,0,.5)}.bg-blue-50{--tw-bg-opacity:1;background-color:rgb(239 246 255/var(--tw-bg-opacity,1))}.bg-blue-600{--tw-bg-opacity:1;background-color:rgb(37 99 235/var(--tw-bg-opacity,1))}.bg-blue-900\/60{background-color:rgba(30,58,138,.6)}.bg-gray-100{--tw-bg-opacity:1;background-color:rgb(239 235 225/var(--tw-bg-opacity,1))}.bg-gray-50{--tw-bg-opacity:1;background-color:rgb(247 245 239/var(--tw-bg-opacity,1))}.bg-gray-800{--tw-bg-opacity:1;background-color:rgb(47 42 36/var(--tw-bg-opacity,1))}.bg-gray-900{--tw-bg-opacity:1;background-color:rgb(31 27 23/var(--tw-bg-opacity,1))}.bg-green-100{--tw-bg-opacity:1;background-color:rgb(223 234 219/var(--tw-bg-opacity,1))}.bg-green-50{--tw-bg-opacity:1;background-color:rgb(241 246 239/var(--tw-bg-opacity,1))}.bg-green-500{--tw-bg-opacity:1;background-color:rgb(63 125 74/var(--tw-bg-opacity,1))}.bg-green-600{--tw-bg-opacity:1;background-color:rgb(47 111 79/var(--tw-bg-opacity,1))}.bg-green-700{--tw-bg-opacity:1;background-color:rgb(36 90 64/var(--tw-bg-opacity,1))}.bg-green-800{--tw-bg-opacity:1;background-color:rgb(28 74 53/var(--tw-bg-opacity,1))}.bg-green-950{--tw-bg-opacity:1;background-color:rgb(12 42 32/var(--tw-bg-opacity,1))}.bg-red-500{--tw-bg-opacity:1;background-color:rgb(239 68 68/var(--tw-bg-opacity,1))}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.bg-white\/10{background-color:hsla(0,0%,100%,.1)}.bg-white\/20{background-color:hsla(0,0%,100%,.2)}.bg-white\/95{background-color:hsla(0,0%,100%,.95)}.bg-opacity-20{--tw-bg-opacity:0.2}.bg-gradient-to-b{background-image:linear-gradient(to bottom,var(--tw-gradient-stops))}.from-black\/65{--tw-gradient-from:rgba(0,0,0,.65) var(--tw-gradient-from-position);--tw-gradient-to:transparent var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.via-black\/75{--tw-gradient-to:transparent var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),rgba(0,0,0,.75) var(--tw-gradient-via-position),var(--tw-gradient-to)}.to-black\/85{--tw-gradient-to:rgba(0,0,0,.85) var(--tw-gradient-to-position)}.object-contain{-o-object-fit:contain;object-fit:contain}.object-cover{-o-object-fit:cover;object-fit:cover}.p-2{padding:.5rem}.p-3{padding:.75rem}.p-4{padding:1rem}.p-5{padding:1.25rem}.p-6{padding:1.5rem}.p-8{padding:2rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.px-7{padding-left:1.75rem;padding-right:1.75rem}.px-8{padding-left:2rem;padding-right:2rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-12{padding-top:3rem;padding-bottom:3rem}.py-14{padding-top:3.5rem;padding-bottom:3.5rem}.py-16{padding-top:4rem;padding-bottom:4rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-2\.5{padding-top:.625rem;padding-bottom:.625rem}.py-20{padding-top:5rem;padding-bottom:5rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.py-4{padding-top:1rem;padding-bottom:1rem}.py-8{padding-top:2rem;padding-bottom:2rem}.pb-16{padding-bottom:4rem}.pb-2{padding-bottom:.5rem}.pb-24{padding-bottom:6rem}.pb-8{padding-bottom:2rem}.pt-10{padding-top:2.5rem}.pt-12{padding-top:3rem}.pt-16{padding-top:4rem}.pt-2{padding-top:.5rem}.pt-28{padding-top:7rem}.pt-6{padding-top:1.5rem}.pt-8{padding-top:2rem}.text-center{text-align:center}.text-2xl{font-size:1.5rem;line-height:2rem}.text-3xl{font-size:1.875rem;line-height:2.25rem}.text-4xl{font-size:2.25rem;line-height:2.5rem}.text-5xl{font-size:3rem;line-height:1}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:.75rem;line-height:1rem}.font-black{font-weight:900}.font-bold{font-weight:700}.font-medium{font-weight:500}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.italic{font-style:italic}.leading-7{line-height:1.75rem}.leading-relaxed{line-height:1.625}.leading-snug{line-height:1.375}.leading-tight{line-height:1.25}.tracking-wide{letter-spacing:.025em}.tracking-wider{letter-spacing:.05em}.text-amber-700{--tw-text-opacity:1;color:rgb(180 83 9/var(--tw-text-opacity,1))}.text-amber-800{--tw-text-opacity:1;color:rgb(146 64 14/var(--tw-text-opacity,1))}.text-amber-900{--tw-text-opacity:1;color:rgb(120 53 15/var(--tw-text-opacity,1))}.text-amber-950{--tw-text-opacity:1;color:rgb(69 26 3/var(--tw-text-opacity,1))}.text-blue-600{--tw-text-opacity:1;color:rgb(37 99 235/var(--tw-text-opacity,1))}.text-blue-800{--tw-text-opacity:1;color:rgb(30 64 175/var(--tw-text-opacity,1))}.text-blue-900{--tw-text-opacity:1;color:rgb(30 58 138/var(--tw-text-opacity,1))}.text-gray-100{--tw-text-opacity:1;color:rgb(239 235 225/var(--tw-text-opacity,1))}.text-gray-300{--tw-text-opacity:1;color:rgb(207 198 179/var(--tw-text-opacity,1))}.text-gray-400{--tw-text-opacity:1;color:rgb(163 154 136/var(--tw-text-opacity,1))}.text-gray-500{--tw-text-opacity:1;color:rgb(118 109 94/var(--tw-text-opacity,1))}.text-gray-600{--tw-text-opacity:1;color:rgb(93 85 74/var(--tw-text-opacity,1))}.text-gray-700{--tw-text-opacity:1;color:rgb(71 63 54/var(--tw-text-opacity,1))}.text-gray-800{--tw-text-opacity:1;color:rgb(47 42 36/var(--tw-text-opacity,1))}.text-gray-900{--tw-text-opacity:1;color:rgb(31 27 23/var(--tw-text-opacity,1))}.text-green-100{--tw-text-opacity:1;color:rgb(223 234 219/var(--tw-text-opacity,1))}.text-green-200{--tw-text-opacity:1;color:rgb(191 213 184/var(--tw-text-opacity,1))}.text-green-300{--tw-text-opacity:1;color:rgb(184 217 143/var(--tw-text-opacity,1))}.text-green-400{--tw-text-opacity:1;color:rgb(157 187 82/var(--tw-text-opacity,1))}.text-green-50{--tw-text-opacity:1;color:rgb(241 246 239/var(--tw-text-opacity,1))}.text-green-500{--tw-text-opacity:1;color:rgb(63 125 74/var(--tw-text-opacity,1))}.text-green-600{--tw-text-opacity:1;color:rgb(47 111 79/var(--tw-text-opacity,1))}.text-green-700{--tw-text-opacity:1;color:rgb(36 90 64/var(--tw-text-opacity,1))}.text-green-800{--tw-text-opacity:1;color:rgb(28 74 53/var(--tw-text-opacity,1))}.text-green-900{--tw-text-opacity:1;color:rgb(21 59 47/var(--tw-text-opacity,1))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.underline{text-decoration-line:underline}.opacity-40{opacity:.4}.opacity-70{opacity:.7}.opacity-80{opacity:.8}.opacity-90{opacity:.9}.shadow{--tw-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color)}.shadow,.shadow-2xl{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-2xl{--tw-shadow:0 25px 50px -12px rgba(0,0,0,.25);--tw-shadow-colored:0 25px 50px -12px var(--tw-shadow-color)}.shadow-\[0_8px_30px_rgb\(0\2c 0\2c 0\2c 0\.12\)\]{--tw-shadow:0 8px 30px rgb(0,0,0,0.12);--tw-shadow-colored:0 8px 30px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-\[0_8px_30px_rgb\(22\2c 163\2c 74\2c 0\.3\)\]{--tw-shadow:0 8px 30px rgb(22,163,74,0.3);--tw-shadow-colored:0 8px 30px var(--tw-shadow-color)}.shadow-\[0_8px_30px_rgb\(22\2c 163\2c 74\2c 0\.3\)\],.shadow-lg{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-lg{--tw-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color)}.shadow-md{--tw-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1);--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color),0 2px 4px -2px var(--tw-shadow-color)}.shadow-md,.shadow-sm{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-sm{--tw-shadow:0 1px 2px 0 rgba(0,0,0,.05);--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color)}.shadow-xl{--tw-shadow:0 20px 25px -5px rgba(0,0,0,.1),0 8px 10px -6px rgba(0,0,0,.1);--tw-shadow-colored:0 20px 25px -5px var(--tw-shadow-color),0 8px 10px -6px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.outline{outline-style:solid}.\!ring{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)!important;--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color)!important;box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)!important}.ring{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.blur{--tw-blur:blur(8px)}.blur,.brightness-110{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.brightness-110{--tw-brightness:brightness(1.1)}.drop-shadow-lg{--tw-drop-shadow:drop-shadow(0 10px 8px rgba(0,0,0,.04)) drop-shadow(0 4px 3px rgba(0,0,0,.1))}.drop-shadow-lg,.drop-shadow-md{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.drop-shadow-md{--tw-drop-shadow:drop-shadow(0 4px 3px rgba(0,0,0,.07)) drop-shadow(0 2px 2px rgba(0,0,0,.06))}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.backdrop-blur-md{--tw-backdrop-blur:blur(12px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-opacity{transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-shadow{transition-property:box-shadow;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-300{transition-duration:.3s}.services-chapter .service-card .service-actions{display:grid;gap:.625rem;margin-top:auto}.services-chapter .service-card .service-actions a{display:flex;align-items:center;justify-content:center;min-height:44px;padding:.625rem .75rem;border-radius:8px;font-size:.9375rem;font-weight:700;line-height:1.25;text-align:center}.services-chapter .service-details{border:1px solid rgba(21,59,47,.25);color:var(--canopy)}.services-chapter .service-details:hover{background:var(--limestone)}.services-chapter .service-request{border:1px solid var(--canopy);background:var(--canopy);color:#fff}.services-chapter .service-request:hover{background:var(--leaf)}@media (min-width:1100px){.services-chapter .service-card .service-actions{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (max-width:767px){#services.services-chapter .grid.md\:grid-cols-3{grid-template-columns:minmax(0,1fr)}.services-chapter .service-card>.p-6{display:grid;grid-template-columns:auto minmax(0,1fr);-moz-column-gap:12px;column-gap:12px}.services-chapter .service-card .service-icon{grid-row:span 2;margin-bottom:0}.services-chapter .service-card h3{align-self:end}.services-chapter .service-card ul{grid-column:2}.services-chapter .service-card .service-actions{grid-column:1/-1;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:8px}}#contactForm .quote-form-content{display:grid;gap:20px}#contactForm .quote-group{min-width:0;margin:0;padding:0;border:0}#contactForm .quote-group>legend{display:flex;align-items:center;gap:10px;width:100%;margin-bottom:18px;padding:0;color:var(--canopy);font-size:1.125rem;font-weight:800;line-height:1.35}#contactForm .quote-group-number{display:inline-grid;flex:0 0 28px;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--canopy);color:#fff;font-size:.875rem}#contactForm .quote-group-fields{display:grid;gap:18px}#contactForm .quote-contact-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr));gap:18px;align-items:start}#contactForm .quote-field{min-width:0}#contactForm .quote-field-helper{margin-top:8px;color:#4b5563;font-size:.875rem;line-height:1.5}#contactForm .quote-confirm{display:grid;gap:16px;border-top:1px solid #dce6dd;padding-top:20px}#contactForm #ownerVerify{flex:0 0 22px;width:22px;height:22px;accent-color:var(--canopy)}#contactForm .yard-summary-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px}#contactForm .yard-summary-actions a,#contactForm .yard-summary-actions button{display:inline-flex;align-items:center;min-height:44px;color:var(--canopy);font-weight:700;text-decoration:underline;text-underline-offset:3px}#quoteFormCard:focus-visible,#walk-title:focus-visible{outline:3px solid var(--fresh);outline-offset:6px}#contactForm .yard-summary-actions a:focus-visible,#contactForm .yard-summary-actions button:focus-visible{outline:3px solid var(--canopy);outline-offset:3px;border-radius:4px}.hover\:-translate-y-0\.5:hover{--tw-translate-y:-0.125rem}.hover\:-translate-y-0\.5:hover,.hover\:-translate-y-1:hover{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\:-translate-y-1:hover{--tw-translate-y:-0.25rem}.hover\:scale-105:hover{--tw-scale-x:1.05;--tw-scale-y:1.05;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\:border-green-500:hover{--tw-border-opacity:1;border-color:rgb(63 125 74/var(--tw-border-opacity,1))}.hover\:bg-amber-400:hover{--tw-bg-opacity:1;background-color:rgb(251 191 36/var(--tw-bg-opacity,1))}.hover\:bg-amber-50:hover{--tw-bg-opacity:1;background-color:rgb(255 251 235/var(--tw-bg-opacity,1))}.hover\:bg-black\/50:hover{background-color:rgba(0,0,0,.5)}.hover\:bg-blue-100:hover{--tw-bg-opacity:1;background-color:rgb(219 234 254/var(--tw-bg-opacity,1))}.hover\:bg-blue-50:hover{--tw-bg-opacity:1;background-color:rgb(239 246 255/var(--tw-bg-opacity,1))}.hover\:bg-blue-700:hover{--tw-bg-opacity:1;background-color:rgb(29 78 216/var(--tw-bg-opacity,1))}.hover\:bg-gray-100:hover{--tw-bg-opacity:1;background-color:rgb(239 235 225/var(--tw-bg-opacity,1))}.hover\:bg-green-100:hover{--tw-bg-opacity:1;background-color:rgb(223 234 219/var(--tw-bg-opacity,1))}.hover\:bg-green-50:hover{--tw-bg-opacity:1;background-color:rgb(241 246 239/var(--tw-bg-opacity,1))}.hover\:bg-green-500:hover{--tw-bg-opacity:1;background-color:rgb(63 125 74/var(--tw-bg-opacity,1))}.hover\:bg-green-600:hover{--tw-bg-opacity:1;background-color:rgb(47 111 79/var(--tw-bg-opacity,1))}.hover\:bg-green-700:hover{--tw-bg-opacity:1;background-color:rgb(36 90 64/var(--tw-bg-opacity,1))}.hover\:bg-green-900:hover{--tw-bg-opacity:1;background-color:rgb(21 59 47/var(--tw-bg-opacity,1))}.hover\:bg-red-600:hover{--tw-bg-opacity:1;background-color:rgb(220 38 38/var(--tw-bg-opacity,1))}.hover\:bg-white:hover{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.hover\:bg-white\/30:hover{background-color:hsla(0,0%,100%,.3)}.hover\:text-green-400:hover{--tw-text-opacity:1;color:rgb(157 187 82/var(--tw-text-opacity,1))}.hover\:text-green-500:hover{--tw-text-opacity:1;color:rgb(63 125 74/var(--tw-text-opacity,1))}.hover\:text-green-600:hover{--tw-text-opacity:1;color:rgb(47 111 79/var(--tw-text-opacity,1))}.hover\:text-green-700:hover{--tw-text-opacity:1;color:rgb(36 90 64/var(--tw-text-opacity,1))}.hover\:text-green-800:hover{--tw-text-opacity:1;color:rgb(28 74 53/var(--tw-text-opacity,1))}.hover\:text-green-900:hover{--tw-text-opacity:1;color:rgb(21 59 47/var(--tw-text-opacity,1))}.hover\:text-white:hover{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.hover\:underline:hover{text-decoration-line:underline}.hover\:no-underline:hover{text-decoration-line:none}.hover\:opacity-100:hover{opacity:1}.hover\:shadow-lg:hover{--tw-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color)}.hover\:shadow-lg:hover,.hover\:shadow-xl:hover{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.hover\:shadow-xl:hover{--tw-shadow:0 20px 25px -5px rgba(0,0,0,.1),0 8px 10px -6px rgba(0,0,0,.1);--tw-shadow-colored:0 20px 25px -5px var(--tw-shadow-color),0 8px 10px -6px var(--tw-shadow-color)}.focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.focus\:ring-2:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.focus\:ring-green-500:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(63 125 74/var(--tw-ring-opacity,1))}.focus\:ring-green-600:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(47 111 79/var(--tw-ring-opacity,1))}.focus-visible\:outline-none:focus-visible{outline:2px solid transparent;outline-offset:2px}.focus-visible\:ring-2:focus-visible{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.focus-visible\:ring-white\/80:focus-visible{--tw-ring-color:hsla(0,0%,100%,.8)}.group:hover .group-hover\:opacity-0{opacity:0}@media (min-width:640px){.sm\:col-span-2{grid-column:span 2/span 2}.sm\:w-auto{width:auto}.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.sm\:flex-row{flex-direction:row}.sm\:items-center{align-items:center}.sm\:justify-between{justify-content:space-between}.sm\:gap-5{gap:1.25rem}.sm\:gap-6{gap:1.5rem}.sm\:px-0{padding-left:0;padding-right:0}}@media (min-width:768px){.md\:mb-0{margin-bottom:0}.md\:mb-10{margin-bottom:2.5rem}.md\:mb-12{margin-bottom:3rem}.md\:mt-16{margin-top:4rem}.md\:block{display:block}.md\:flex{display:flex}.md\:h-96{height:24rem}.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.md\:items-center{align-items:center}.md\:justify-between{justify-content:space-between}.md\:p-12{padding:3rem}.md\:pb-28{padding-bottom:7rem}.md\:pt-16{padding-top:4rem}.md\:pt-32{padding-top:8rem}.md\:text-2xl{font-size:1.5rem;line-height:2rem}.md\:text-4xl{font-size:2.25rem;line-height:2.5rem}.md\:text-5xl{font-size:3rem;line-height:1}.md\:text-6xl{font-size:3.75rem;line-height:1}}@media (min-width:1024px){.lg\:flex{display:flex}.lg\:hidden{display:none}.lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.lg\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.lg\:grid-cols-\[1\.1fr_0\.9fr\]{grid-template-columns:1.1fr .9fr}.lg\:grid-cols-\[1fr_0\.9fr\]{grid-template-columns:1fr .9fr}.lg\:items-center{align-items:center}.lg\:px-8{padding-left:2rem;padding-right:2rem}.lg\:text-6xl{font-size:3.75rem;line-height:1}}@media (min-width:1280px){.xl\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}}
/* ---- assets/css/custom.css ---- */
/* Base Styles */
body {
  font-family:
    "Open Sans",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  background-color: #f9fafb;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--body, "Public Sans", system-ui, sans-serif);
}

html {
  scroll-behavior: smooth;
}

* {
  box-sizing: border-box;
}

.skip-link {
  position: fixed;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 2000;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  color: #ffffff;
  background: #153b2f;
  box-shadow: 0 10px 28px rgba(10, 25, 20, 0.28);
  font-weight: 700;
  transform: translateY(-150%);
  transition: transform 160ms ease;
}

.skip-link:focus {
  transform: translateY(0);
}

/* Hero Section */
.hero-bg {
  /* Using Wideshot_Bestlandscape_Person.jpg for the hero background */
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.5)),
    url("../../hernandez_images/web_Wideshot_Bestlandscape_Person.jpeg");
  background-attachment: scroll; /* Creates the parallax effect on desktop */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  min-height: 100vh;
}

/* Mobile optimization for hero background */
@media (max-width: 768px) {
  .hero-bg {
    background-image:
      linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.65)),
      url("../../hernandez_images/web_hero_mobile.jpg");
    background-attachment: scroll; /* Disable parallax on mobile for better performance */
    background-position: center center;
    background-size: cover;
    min-height: 100vh;
  }
}

@media (min-width: 1024px) {
  .hero-bg {
    background-attachment: fixed;
  }
}

/* Hero Text Shadow – strong contrast over photo background */
.hero-heading {
  text-shadow:
    0 2px 4px rgba(0, 0, 0, 0.9),
    0 4px 16px rgba(0, 0, 0, 0.7),
    0 0 32px rgba(0, 0, 0, 0.4);
}
.hero-subtitle {
  text-shadow:
    0 1px 4px rgba(0, 0, 0, 0.95),
    0 2px 10px rgba(0, 0, 0, 0.7);
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .hero-bg {
    background-attachment: scroll;
  }
}

/* Before/After Slider */
.before-after-container {
  position: relative;
  width: 100%;
  max-width: 600px;
  margin: 0 auto 2rem auto;
  overflow: hidden;
  border-radius: 0.5rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}
.before-after-slider {
  position: relative;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  min-height: 220px;
  max-height: 460px;
}
.before-after-slider img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.after-image {
  clip-path: polygon(50% 0, 100% 0, 100% 100%, 50% 100%);
}
.slider-handle {
  position: absolute;
  top: 0;
  left: 50%;
  width: 4px;
  height: 100%;
  background: white;
  cursor: ew-resize;
  transform: translateX(-50%);
  z-index: 10;
}
.slider-handle::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40px;
  height: 40px;
  background: white;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

@media (max-width: 640px) {
  .before-after-slider {
    aspect-ratio: 4 / 3;
    min-height: 200px;
  }
}

/* Service Card Hover Effects */
.service-card {
  transition: all 0.3s ease;
}
.service-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

/* Header Scrolled State */
.header-scrolled {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* Modal Styles */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}
.modal-content {
  background-color: white;
  padding: 2rem;
  border-radius: 0.5rem;
  text-align: center;
  max-width: 90%;
  width: 400px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  position: relative;
}

/* Back to Top Button */
#backToTopBtn {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  background-color: #22c55e;
  color: white;
  padding: 1rem;
  border-radius: 50%;
  font-size: 1.5rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  transition:
    opacity 0.3s ease,
    visibility 0.3s ease;
  z-index: 999;
  opacity: 0;
  visibility: hidden;
  cursor: pointer;
}
#backToTopBtn.show {
  opacity: 1;
  visibility: visible;
}

/* Reveal Animations */
/* Content stays readable unless the observer has initialized. */
.reveal:not(.reveal-pending),
.reveal-left:not(.reveal-pending),
.reveal-right:not(.reveal-pending) {
  opacity: 1;
  transform: none;
}

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.55s cubic-bezier(0.2, 0.65, 0.3, 1),
    transform 0.55s cubic-bezier(0.2, 0.65, 0.3, 1);
}
.reveal.active {
  opacity: 1;
  transform: translateY(0);
}
.reveal-left {
  opacity: 0;
  transform: translateX(-24px);
  transition:
    opacity 0.55s cubic-bezier(0.2, 0.65, 0.3, 1),
    transform 0.55s cubic-bezier(0.2, 0.65, 0.3, 1);
}
.reveal-left.active {
  opacity: 1;
  transform: translateX(0);
}
.reveal-right {
  opacity: 0;
  transform: translateX(24px);
  transition:
    opacity 0.55s cubic-bezier(0.2, 0.65, 0.3, 1),
    transform 0.55s cubic-bezier(0.2, 0.65, 0.3, 1);
}
.reveal-right.active {
  opacity: 1;
  transform: translateX(0);
}
.reveal-stagger > .reveal:nth-child(2),
.reveal-stagger > .reveal-left:nth-child(2),
.reveal-stagger > .reveal-right:nth-child(2) {
  transition-delay: 80ms;
}
.reveal-stagger > .reveal:nth-child(3),
.reveal-stagger > .reveal-left:nth-child(3),
.reveal-stagger > .reveal-right:nth-child(3) {
  transition-delay: 140ms;
}
.reveal-stagger > .reveal:nth-child(4),
.reveal-stagger > .reveal-left:nth-child(4),
.reveal-stagger > .reveal-right:nth-child(4) {
  transition-delay: 200ms;
}
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal-left,
  .reveal-right {
    opacity: 1;
    transform: none;
    transition: none;
    transition-delay: 0ms !important;
  }
}

/* Homepage hero entrance — presence without delaying CTAs forever */
@keyframes hero-rise {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.hero-enter {
  animation: hero-rise 720ms cubic-bezier(0.2, 0.65, 0.3, 1) both;
}
.hero-enter-delay-1 {
  animation-delay: 70ms;
}
.hero-enter-delay-2 {
  animation-delay: 140ms;
}
.hero-enter-delay-3 {
  animation-delay: 210ms;
}
.hero-enter-delay-4 {
  animation-delay: 280ms;
}
.hero-enter-delay-5 {
  animation-delay: 350ms;
}
@media (prefers-reduced-motion: reduce) {
  .hero-enter,
  .hero-enter-delay-1,
  .hero-enter-delay-2,
  .hero-enter-delay-3,
  .hero-enter-delay-4,
  .hero-enter-delay-5,
  .site-hero picture img {
    animation: none !important;
  }
}

.hero-trust-grid {
  overflow: visible;
}
/* Before/after project story */
.before-after-story {
  margin: 0.75rem auto 0;
  max-width: 40rem;
  text-align: center;
  color: #374151;
  font-size: 0.95rem;
}
.before-after-story strong {
  color: #14532d;
}

/* Primary CTA micro-lift without layout thrash */
.primary-cta,
.secondary-cta {
  transition:
    transform 180ms ease,
    background-color 180ms ease,
    box-shadow 180ms ease;
}
@media (prefers-reduced-motion: no-preference) {
  .primary-cta:hover,
  .secondary-cta:hover {
    transform: translateY(-2px);
  }
}

/* Trust Badge */
.trust-badge {
  transition: transform 0.2s ease;
}
.trust-badge:hover {
  transform: translateY(-2px);
}

/* Accessibility */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid #22c55e;
  outline-offset: 2px;
}

/* 2026 visual refresh */
:root {
  --canopy: #153b2f;
  --canopy-2: #1f4a3a;
  --leaf: #2f6f4f;
  --leaf-light: #dcebdd;
  --moss: #8aa63f;
  --clay: #c26435;
  --sky: #286f9f;
  --ink: #17211d;
  --muted-ink: #526157;
  --paper: #fbfcf7;
  --stone: #eef3ec;
  --line: #d8e3d6;
  --panel: #ffffff;
  --soft-shadow: 0 18px 48px rgba(21, 59, 47, 0.13);
  --hard-shadow: 0 20px 56px rgba(11, 31, 25, 0.24);
}

.site-body {
  color: var(--ink);
  background:
    linear-gradient(
      180deg,
      rgba(238, 243, 236, 0.72),
      rgba(251, 252, 247, 0.96) 24rem
    ),
    var(--paper);
}

.site-header {
  border-bottom: 1px solid rgba(21, 59, 47, 0.12);
  box-shadow: 0 10px 30px rgba(21, 59, 47, 0.08);
}

.site-header .container {
  max-width: 1180px;
}

.site-header nav > div:first-child {
  min-width: 0;
}

.site-header nav > div:first-child > div {
  min-width: 0;
}

.desktop-nav > a:not([href="#quote"]):not(.header-cta):not(.lang-link):not(.header-tel) {
  position: relative;
  padding: 0.65rem 0.1rem;
}

.desktop-nav > a:not([href="#quote"]):not(.header-cta):not(.lang-link):not(.header-tel)::after {
  position: absolute;
  right: 0;
  bottom: 0.3rem;
  left: 0;
  height: 2px;
  border-radius: 999px;
  background: var(--leaf);
  content: "";
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 180ms ease;
}

.desktop-nav > a:not([href="#quote"]):not(.header-cta):not(.lang-link):not(.header-tel):hover::after,
.desktop-nav > a:not([href="#quote"]):not(.header-cta):not(.lang-link):not(.header-tel):focus-visible::after {
  transform: scaleX(1);
  transform-origin: left;
}

.header-scrolled {
  background: rgba(255, 255, 255, 0.96) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 12px 34px rgba(21, 59, 47, 0.14);
}

.bg-green-600 {
  background-color: var(--leaf) !important;
}

.bg-green-700,
.bg-green-800 {
  background-color: var(--canopy) !important;
}

.bg-green-50 {
  background-color: var(--leaf-light) !important;
}

.bg-green-100 {
  background-color: #e7f2df !important;
}

.text-green-300,
.text-green-400,
.text-green-500,
.text-green-600 {
  color: var(--leaf) !important;
}

.text-green-700,
.text-green-800 {
  color: var(--canopy) !important;
}

.border-green-600 {
  border-color: var(--leaf) !important;
}

.hover\:bg-green-500:hover,
.hover\:bg-green-700:hover {
  background-color: var(--canopy-2) !important;
}

.hover\:text-green-600:hover,
.hover\:text-green-700:hover {
  color: var(--canopy-2) !important;
}

.focus\:ring-green-600:focus,
.focus\:ring-green-500:focus {
  --tw-ring-color: rgba(47, 111, 79, 0.42) !important;
}

.site-hero {
  min-height: calc(100vh - 5rem) !important;
  min-height: min(760px, calc(100svh - 4rem)) !important;
  padding-top: clamp(5.5rem, 8vw, 6.5rem) !important;
  padding-bottom: clamp(3.75rem, 6vw, 4.75rem) !important;
  background-color: #102019;
}

.site-hero > .container {
  padding-top: 0 !important;
}

.site-hero > .absolute img {
  filter: saturate(1.04) contrast(1.04);
  object-position: center 54%;
}

.hero-content {
  text-align: left;
  max-width: 54rem;
}

.emergency-strip {
  max-width: 46rem;
  justify-content: space-between !important;
  background: rgba(7, 21, 16, 0.66) !important;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.hero-eyebrow {
  color: #f3f7ea;
  background: rgba(21, 59, 47, 0.76);
  border: 1px solid rgba(220, 235, 221, 0.36);
  border-radius: 8px;
  padding: 0.55rem 0.8rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22);
}

.hero-heading {
  max-width: 900px;
}

.hero-heading .text-green-300 {
  color: #cbe37b !important;
}

.site-hero .text-green-400,
footer .text-green-500 {
  color: #b8d56d !important;
}

.hero-subtitle {
  color: rgba(248, 250, 246, 0.94) !important;
}

.primary-cta,
.secondary-cta,
.site-header a[href="#quote"],
.site-header a.header-cta,
#mobileMenu a[href="#quote"],
#instant-quote button,
#quote button[type="submit"],
#pricing a,
#videos a,
#gallery a,
#quote a.inline-block {
  border-radius: 8px !important;
}

.primary-cta {
  background: linear-gradient(135deg, var(--leaf), var(--canopy-2)) !important;
  color: #ffffff !important;
  box-shadow: 0 18px 42px rgba(21, 59, 47, 0.34) !important;
}

.secondary-cta {
  color: var(--canopy) !important;
  background: rgba(255, 255, 255, 0.96) !important;
}

.hero-trust-grid {
  max-width: 780px;
}

.trust-chip {
  border-radius: 8px !important;
  background: rgba(12, 28, 23, 0.58) !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
}

.trust-chip span {
  color: #f8faf6 !important;
}

section h2,
section h3 {
  color: var(--canopy);
}

#instant-quote,
#gallery,
#testimonials,
#pricing {
  background:
    linear-gradient(
      180deg,
      rgba(251, 252, 247, 0.92),
      rgba(238, 243, 236, 0.94)
    ),
    var(--paper) !important;
}

.instant-card,
#quote .bg-white,
#service-area .bg-gray-100,
.testimonial-slide > div,
.expectation-card,
.testimonial-spotlight {
  background: var(--panel) !important;
  border: 1px solid var(--line);
  border-radius: 8px !important;
  box-shadow: var(--soft-shadow);
}

.testimonial-spotlight {
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.98),
      rgba(243, 247, 239, 0.98)
    ) !important;
}

.testimonial-source-link {
  letter-spacing: 0;
}

.instant-card input,
.instant-card select,
#quote input,
#quote select,
#quote textarea {
  border: 1px solid rgba(21, 59, 47, 0.18) !important;
  border-radius: 8px !important;
  background: #fbfdf9;
}

.instant-card input:focus,
.instant-card select:focus,
#quote input:focus,
#quote select:focus,
#quote textarea:focus {
  border-color: var(--leaf) !important;
  box-shadow: 0 0 0 3px rgba(47, 111, 79, 0.16);
}

.quote-field-label {
  display: block;
  margin-bottom: 0.4rem;
  color: #27372f;
  font-size: 0.875rem;
  font-weight: 700;
}

#services,
#why-choose-us,
#service-area {
  background: var(--paper) !important;
}

.service-card {
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(21, 59, 47, 0.12);
  border-radius: 8px !important;
  box-shadow: var(--soft-shadow);
  background: #ffffff;
}

.service-card > .p-6 {
  display: flex;
  flex: 1;
  flex-direction: column;
}

.service-card > .p-6 ul {
  flex: 1;
}

.service-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 58px rgba(21, 59, 47, 0.16);
}

.service-card img {
  filter: saturate(1.06) contrast(1.03);
}

#services .mt-12.bg-green-600 {
  background: linear-gradient(135deg, var(--canopy), var(--leaf)) !important;
  border: 1px solid rgba(220, 235, 221, 0.24);
  border-radius: 8px !important;
  box-shadow: var(--hard-shadow);
}

#why-choose-us .bg-gray-50,
#why-choose-us .bg-green-50,
#service-area .bg-green-50,
#service-area .bg-amber-50 {
  border: 1px solid var(--line);
  border-radius: 8px !important;
}

#why-choose-us .bg-gray-50 {
  background: #ffffff !important;
  box-shadow: 0 12px 32px rgba(21, 59, 47, 0.08);
}

#why-choose-us .bg-green-50,
#service-area .bg-green-50 {
  background: #eef7e9 !important;
}

.faq-item {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 0.75rem;
  background: #ffffff;
  box-shadow: 0 10px 30px rgba(21, 59, 47, 0.08);
}

.faq-item summary {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 4.25rem;
  padding: 1.15rem 3.75rem 1.15rem 1.25rem;
  color: var(--canopy);
  cursor: pointer;
  font-family: var(--body, "Public Sans", system-ui, sans-serif);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.35;
  list-style: none;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  position: absolute;
  right: 1.25rem;
  display: grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  border-radius: 50%;
  color: var(--canopy);
  background: var(--leaf-light);
  content: "+";
  font-size: 1.35rem;
  line-height: 1;
  transition: transform 180ms ease;
}

.faq-item[open] summary::after {
  content: "\2212";
  transform: rotate(180deg);
}

.faq-item summary:focus-visible {
  outline: 3px solid rgba(47, 111, 79, 0.42);
  outline-offset: -3px;
}

.faq-item p {
  padding: 0 1.25rem 1.25rem;
  color: var(--muted-ink);
  line-height: 1.7;
}

.before-after-container,
#gallery .group,
.video-card {
  border-radius: 8px !important;
  border: 1px solid rgba(21, 59, 47, 0.12);
  box-shadow: var(--soft-shadow);
}

.slider-handle,
.slider-handle::before {
  background: #ffffff;
}

.slider-handle::before {
  border: 3px solid var(--moss);
}

#pricing {
  color: var(--ink);
}

#pricing p {
  color: var(--muted-ink) !important;
}

.site-contact-quote {
  background: linear-gradient(
    135deg,
    rgba(21, 59, 47, 0.98),
    rgba(31, 74, 58, 0.98) 58%,
    rgba(194, 100, 53, 0.94)
  ) !important;
}

.site-contact-quote h2,
.site-contact-quote h3 {
  color: #ffffff;
}

.site-contact-quote .text-gray-800 {
  color: var(--ink) !important;
}

.site-contact-quote .text-amber-900 {
  color: #6b3c17 !important;
}

footer.bg-gray-900 {
  background: #101714 !important;
}

footer .bg-gray-800 {
  background: rgba(255, 255, 255, 0.08) !important;
}

#backToTopBtn {
  background-color: var(--leaf);
  box-shadow: 0 16px 34px rgba(21, 59, 47, 0.24);
}

@media (max-width: 640px) {
  html {
    scroll-padding-top: 4.75rem;
  }

  section[id],
  main[id] {
    scroll-margin-top: 4.75rem;
  }

  .site-header .container {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }

  .site-header nav {
    gap: 0.5rem;
  }

  .site-header nav > div:first-child {
    flex: 1 1 auto;
    margin-right: 0.25rem;
  }

  .site-header nav > div:first-child img {
    height: 2.25rem !important;
    flex: 0 0 auto;
  }

  .site-header nav > div:first-child p:first-child {
    max-width: 100%;
    font-size: clamp(0.78rem, 3.35vw, 0.95rem) !important;
    line-height: 1.05 !important;
    white-space: normal;
  }

  .site-header nav > .lg\:hidden {
    flex: 0 0 auto;
    gap: 0.45rem !important;
  }

  .site-header [data-lang-switch] {
    padding: 0.22rem 0.45rem !important;
  }

  .site-hero {
    min-height: auto !important;
    padding-top: 5.35rem !important;
    padding-bottom: 2rem !important;
  }

  .site-hero > .container {
    padding-top: 0 !important;
  }

  .emergency-strip {
    gap: 0.65rem !important;
    margin-bottom: 1rem !important;
    padding: 0.7rem !important;
  }

  .emergency-strip p {
    width: 100%;
    font-size: 0.86rem;
    line-height: 1.3;
  }

  .emergency-strip a {
    width: 100%;
    padding: 0.65rem 0.85rem !important;
    font-size: 0.92rem;
  }

  .hero-eyebrow {
    margin-bottom: 0.9rem !important;
    padding: 0.45rem 0.6rem;
    font-size: 0.68rem !important;
    line-height: 1.15;
  }

  .hero-heading {
    font-size: clamp(1.9rem, 9vw, 2.35rem) !important;
    line-height: 1.06 !important;
    max-width: 18rem;
    margin-bottom: 1rem !important;
  }

  .hero-subtitle {
    max-width: 18.5rem;
    font-size: 0.98rem !important;
    line-height: 1.45 !important;
    margin-bottom: 1.2rem !important;
  }

  .hero-actions {
    align-items: stretch !important;
    gap: 0.75rem !important;
    margin-top: 1rem !important;
  }

  .primary-cta,
  .secondary-cta {
    min-height: 2.9rem;
    padding: 0.8rem 1rem !important;
    font-size: 0.95rem !important;
  }

  .primary-cta .icon,
  .secondary-cta .icon {
    font-size: 1rem !important;
    margin-right: 0.55rem !important;
  }

  .hero-trust-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem !important;
    margin-top: 1.5rem !important;
  }

  .trust-chip {
    justify-content: center;
    padding: 0.6rem 0.55rem !important;
  }

  .trust-chip span {
    font-size: 0.76rem !important;
    line-height: 1.1;
  }

  .site-hero .hero-scroll-cue {
    display: none;
  }

  section {
    padding-top: 3.25rem !important;
    padding-bottom: 3.25rem !important;
  }

  #services {
    padding-top: 0.95rem !important;
  }

  section h2 {
    font-size: clamp(1.65rem, 8vw, 2rem) !important;
    line-height: 1.12 !important;
  }

  section h3 {
    line-height: 1.18 !important;
  }

  .instant-card,
  .testimonial-spotlight,
  .expectation-card,
  #quote .bg-white {
    padding: 1.25rem !important;
  }

  #quoteResult button,
  #quoteResult a {
    display: flex !important;
    width: 100%;
    justify-content: center;
    margin-right: 0 !important;
  }

  #service-area .grid.grid-cols-2 {
    grid-template-columns: 1fr;
  }

  footer a[href^="mailto:"],
  footer .text-gray-400 {
    overflow-wrap: anywhere;
    word-break: break-word;
  }
}

@media (max-width: 767px) {
  .site-body.has-mobile-cta {
    padding-bottom: calc(6.25rem + env(safe-area-inset-bottom));
  }

  #backToTopBtn {
    display: none !important;
  }
}

@media (max-width: 768px) {
}
/* ---- assets/css/video.css ---- */
/* Video Section Styles */
.skip-link {
    background: #153b2f;
    color: #ffffff;
    font-weight: 700;
    left: 1rem;
    padding: 0.75rem 1rem;
    position: fixed;
    top: 0;
    transform: translateY(-150%);
    transition: transform 0.15s ease;
    z-index: 100;
}

.skip-link:focus-visible {
    outline: 3px solid #facc15;
    outline-offset: 2px;
    transform: translateY(0.75rem);
}

.video-section {
    background-color: #f8fafc; /* Very light cool gray/white for clean look */
    padding: clamp(3rem, 7vw, 4rem) 0;
}

.video-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
    gap: clamp(1rem, 3vw, 2rem);
    margin-top: clamp(1.5rem, 4vw, 3rem);
}

.video-card {
    background: transparent; /* Remove container styling for cleaner look */
    border-radius: 0.75rem;
    overflow: hidden;
    /* Removed white bg and shadow for sleek "floating" video look */
    max-width: 100%;
}

/* No hover effect on the card container itself, focus on the video wrapper */

.video-wrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
    height: 0;
    overflow: hidden;
    background-color: #000;
    border-radius: 0.75rem; /* Matches card */
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.video-card:hover .video-wrapper {
    transform: translateY(-8px);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.video-wrapper video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

/* Subtle zoom of poster/video on hover */
.video-card:hover video {
    transform: scale(1.02);
}

.video-card:focus-within .video-wrapper > div,
.video-card.is-playing .video-wrapper > div {
    opacity: 0;
}

.video-caption {
    padding: 1rem;
    text-align: center;
    color: #374151;
    font-weight: 600;
    font-family: var(--body, "Public Sans", system-ui, sans-serif);
}

@media (max-width: 640px) {
    .video-card:hover .video-wrapper {
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .video-wrapper,
    .video-wrapper video,
    .video-wrapper > div {
        transition: none !important;
    }

    .video-card:hover .video-wrapper,
    .video-card:hover video {
        transform: none;
    }
}
/* ---- assets/css/rings.css ---- */
/* ==========================================================================
   Hernandez Landscape & Tree Service · "Growth Rings" design layer
   Loaded last on every page. Tailwind's green/gray scales were re-mapped in
   tailwind.config.js; this layer adds type, texture, and the signature
   components: ring hero, season ring, yard picker, storm band, crew cam.
   ========================================================================== */

@font-face {
  font-family: "Big Shoulders Display";
  src: url("/assets/fonts/big-shoulders-display-v24-latin-var.woff2") format("woff2");
  font-weight: 600 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Public Sans";
  src: url("/assets/fonts/public-sans-v21-latin-var.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}
/* Round 4: the Stencil caps face and the Public Sans italic load after the page
   (assets/css/fonts-late.css, injected by rings.js); until then the labels use Big
   Shoulders Display and italics are synthesized. */
/* Round 5: no local() font faces. A cold browser (first page after launch) must
   build its system-font table before it can match local(), and Chrome held the
   first frame for 1-2.4 s whenever a local() face was needed because a web font
   was not in yet (measured with Lighthouse; see the round-5 commit). The two
   first-paint fonts are preloaded instead; the stacks fall back to plain system
   families, which never wait. */
:root {
  --canopy: #153b2f;
  --canopy-deep: #0c2a20;
  --leaf: #2f6f4f;
  --moss: #8aa63f;
  --fresh: #b8d98f;
  --clay: #c26435;
  --clay-deep: #9a4a24;
  --heartwood: #6b4a33;
  --heartwood-2: #8a6244;
  --sapwood: #e9dcc3;
  --sapwood-2: #f3ead8;
  --limestone: #f5f2e9;
  --frost: #dfeaf0;
  --sky: #286f9f;
  --ink: #1f1b17;
  --ink-soft: #5d554a;
  --display: "Big Shoulders Display", "Arial Narrow", sans-serif;
  --stencil: "Big Shoulders Stencil Display", "Big Shoulders Display", sans-serif;
  --body: "Public Sans", system-ui, sans-serif;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* Wood grain, used for dividers and bark edges. */
  --grain: repeating-linear-gradient(92deg, rgba(107, 74, 51, 0.16) 0 2px, transparent 2px 9px, rgba(107, 74, 51, 0.08) 9px 10px, transparent 10px 17px);
  /* The season tint (set by rings.js from the selected month; defaults to fall). */
  --season: var(--clay);
  --season-soft: #f6e3d6;
}
html[data-season="spring"] { --season: #3f7d4a; --season-soft: #e3efd9; }
html[data-season="summer"] { --season: #a57c12; --season-soft: #f5ecd0; }
html[data-season="fall"] { --season: #b0582b; --season-soft: #f6e3d6; }
html[data-season="winter"] { --season: #286f9f; --season-soft: #e2eef5; }

/* ---------- Type ---------- */
body,
.site-body { font-family: var(--body); color: var(--ink); }
.site-body {
  background:
    radial-gradient(ellipse 60% 40% at 100% 0%, rgba(233, 220, 195, 0.55), transparent 60%),
    var(--limestone);
}
h1, h2,
.hero-heading,
.font-display {
  font-family: var(--display) !important;
  font-weight: 800 !important;
  letter-spacing: 0.005em;
  line-height: 0.98 !important;
}
h2 { font-size: clamp(2.4rem, 5vw, 3.6rem) !important; }
/* Canopy headings only on the light homepage sections; elsewhere headings keep their own color. */
#services h2, #why-choose-us h2, #instant-quote h2, #gallery h2, #pricing h2, #testimonials h2, #service-area h2, #faq h2 { color: var(--canopy); }
h3 { font-family: var(--body); letter-spacing: -0.01em; }
.stencil,
.hero-eyebrow,
.ring-label {
  font-family: var(--stencil) !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* ---------- Header ---------- */
.site-header {
  background: rgba(245, 242, 233, 0.94) !important;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 0 !important;
  box-shadow: 0 1px 0 rgba(21, 59, 47, 0.12), 0 12px 30px -24px rgba(12, 42, 32, 0.6) !important;
}
.site-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 4px;
  background: linear-gradient(90deg, var(--canopy) 0 40%, var(--leaf) 40% 70%, var(--moss) 70% 88%, var(--season) 88%);
  pointer-events: none;
}
@media (max-width: 1023px) {
  /* Let the menu use the space below the actual brand row, even in landscape. */
  .site-header {
    display: flex;
    flex-direction: column;
    max-height: 100vh;
    max-height: 100dvh;
  }
  .site-header > .container { flex-shrink: 0; width: 100%; }
  .site-header #mobileMenu {
    position: static;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    padding-bottom: env(safe-area-inset-bottom);
  }
}
.site-header nav > div:first-child p:first-child {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.45rem;
  letter-spacing: 0.02em;
  color: var(--canopy);
}
.site-header nav > div:first-child p:first-child + p {
  font-family: var(--stencil);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--heartwood);
}

/* ---------- Hero: the cross-section ---------- */
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
}
.hero-heading { text-transform: uppercase; }
.hero-heading .text-green-300 { color: var(--fresh) !important; }
.hero-eyebrow { color: var(--sapwood) !important; font-size: 0.9rem !important; }
.hero-eyebrow .icon { color: var(--moss); }
.hero-ring {
  position: relative;
  margin: 0;
  aspect-ratio: 1;
  width: min(100%, 460px);
  justify-self: center;
}
.hero-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hero-ring .ring-line {
  fill: none;
  stroke: var(--sapwood);
  stroke-opacity: 0.55;
  stroke-width: 1.4;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}
.hero-ring .ring-bark { fill: none; stroke: var(--heartwood); stroke-width: 10; stroke-opacity: 0.9; }
.hero-ring .ring-check { stroke: var(--sapwood); stroke-opacity: 0.4; stroke-width: 1.2; fill: none; }
.hero-ring-photo {
  position: absolute;
  inset: 17%;
  overflow: hidden;
  border-radius: 50%;
  box-shadow: 0 0 0 6px rgba(233, 220, 195, 0.9), 0 0 0 10px var(--heartwood), 0 30px 60px -20px rgba(0, 0, 0, 0.8);
}
.hero-ring-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.hero-ring-tag {
  position: absolute;
  right: 2%;
  bottom: 9%;
  padding: 8px 14px;
  border-radius: 4px;
  background: var(--clay);
  color: #fff;
  font-family: var(--stencil);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transform: rotate(-6deg);
  box-shadow: 0 10px 20px -8px rgba(0, 0, 0, 0.6);
}
.js-rings .hero-ring .ring-line { stroke-dashoffset: 1; animation: ring-grow 1.3s var(--ease) forwards; animation-delay: calc(0.12s + var(--r, 0) * 0.09s); }
@keyframes ring-grow { to { stroke-dashoffset: 0; } }
@media (max-width: 1023px) {
  .hero-grid { display: block; }
  .hero-ring { display: none; }
}

/* Storm strip in the hero keeps its content; it now reads as a clay work tag. */
.emergency-strip {
  background: rgba(194, 100, 53, 0.22) !important;
  border: 1px solid rgba(233, 220, 195, 0.35) !important;
  border-left: 6px solid var(--clay) !important;
  justify-content: flex-start !important;
  text-align: left !important;
}

/* ---------- Sections ---------- */
#services,
#why-choose-us,
#instant-quote,
#pricing,
#service-area,
#faq { position: relative; }
#services { background: var(--limestone) !important; }
#why-choose-us { background: #fffdf8 !important; }
section[id]:not(#home) > .container > .text-center:first-child h2::after,
.ring-title::after {
  content: "";
  display: block;
  width: 64px;
  height: 18px;
  margin: 14px auto 0;
  background:
    radial-gradient(circle at 50% 50%, transparent 0 3px, var(--heartwood) 3px 4.5px, transparent 4.5px 7px, var(--moss) 7px 8.5px, transparent 8.5px) center / 18px 18px no-repeat,
    linear-gradient(var(--heartwood), var(--heartwood)) left center / 22px 2px no-repeat,
    linear-gradient(var(--heartwood), var(--heartwood)) right center / 22px 2px no-repeat;
}
.service-card {
  border-radius: 18px !important;
  border: 1px solid rgba(107, 74, 51, 0.16);
  box-shadow: 0 1px 0 rgba(107, 74, 51, 0.12), 0 22px 40px -26px rgba(12, 42, 32, 0.55) !important;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease) !important;
}
.service-card:hover { transform: translateY(-4px) !important; }
.service-card h3 { font-family: var(--display) !important; font-weight: 800 !important; font-size: 2rem !important; color: var(--canopy); }
.service-card > .p-6 { position: relative; }
.service-card > .p-6::before {
  content: "";
  position: absolute;
  top: -20px;
  right: 18px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: repeating-radial-gradient(circle, var(--sapwood) 0 3px, var(--heartwood-2) 3px 4px);
  box-shadow: 0 0 0 3px #fff, 0 6px 12px -4px rgba(0, 0, 0, 0.4);
}

/* Buttons keep their Tailwind colors (now leaf/canopy); add weight and a stencil voice. */
a.rounded-full.bg-green-600,
button.rounded-full.bg-green-600,
.primary-cta { box-shadow: 0 4px 0 var(--canopy-deep), 0 16px 30px -14px rgba(12, 42, 32, 0.6) !important; }
.primary-cta span,
.secondary-cta span { font-family: var(--display); font-weight: 800; font-size: 1.3rem; letter-spacing: 0.04em; text-transform: uppercase; }

/* ---------- The Year in the Yard ---------- */
.year-yard { padding: clamp(64px, 9vw, 112px) 0; background: var(--canopy); background-image: radial-gradient(ellipse at 70% 30%, rgba(138, 166, 63, 0.18), transparent 60%), var(--grain); color: var(--limestone); overflow: hidden; }
.year-yard h2 { color: #fff !important; }
.year-yard .ring-label { color: var(--fresh); font-size: 0.85rem; }
.year-yard-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 80px); align-items: center; }
.year-yard-intro p { margin-top: 16px; max-width: 52ch; color: rgba(245, 242, 233, 0.86); font-size: 1.1rem; }
.season-ring {
  position: relative;
  width: min(100%, 440px);
  aspect-ratio: 1;
  margin-inline: auto;
}
.season-ring-disc {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle, var(--canopy) 0 37%, transparent 37.2%),
    repeating-radial-gradient(circle, rgba(255, 255, 255, 0.06) 0 2px, transparent 2px 9px),
    conic-gradient(from -45deg, #6fa0c2 0 90deg, #7fb069 90deg 180deg, #d3a93a 180deg 270deg, #cf7440 270deg 360deg);
  box-shadow: 0 0 0 8px var(--heartwood), 0 0 0 11px var(--canopy-deep), 0 30px 60px -20px rgba(0, 0, 0, 0.7);
  transition: transform 0.8s var(--ease);
}
.season-ring-center {
  position: absolute;
  inset: 26%;
  display: grid;
  place-items: center;
  align-content: center;
  border-radius: 50%;
  text-align: center;
  background: repeating-radial-gradient(circle, var(--sapwood) 0 5px, #d8c3a0 5px 6px);
  color: var(--canopy);
  box-shadow: inset 0 0 0 3px rgba(107, 74, 51, 0.4);
}
.season-ring-center strong { font-family: var(--display); font-weight: 900; font-size: clamp(1.8rem, 4vw, 2.6rem); line-height: 1; text-transform: uppercase; }
.season-ring-center span { font-family: var(--stencil); font-weight: 700; font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--heartwood); margin-top: 6px; }
.season-months { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; }
.season-months li { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
.month-btn {
  position: absolute;
  left: -24px;
  top: -24px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid transparent;
  background: rgba(12, 42, 32, 0.72);
  color: #fff;
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.02rem;
  letter-spacing: 0.02em;
  cursor: pointer;
  transform: rotate(var(--a)) translateY(calc(var(--radius) * -1)) rotate(calc(var(--a) * -1));
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.3s var(--ease);
}
.month-btn:hover { border-color: #fff; }
.month-btn[aria-checked="true"] { background: #fff; color: var(--canopy); border-color: var(--season); box-shadow: 0 0 0 4px var(--season); }
.month-btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.season-ring { --radius: min(186px, 42vw); }
.season-panels { margin-top: 28px; }
.season-panel { padding: 22px 24px; border-radius: 16px; background: rgba(245, 242, 233, 0.08); border: 1px solid rgba(245, 242, 233, 0.18); border-left: 6px solid var(--season); }
.js-rings .season-panel:not(.is-current) { display: none; }
.season-panel + .season-panel { margin-top: 14px; }
.season-panel h3 { font-family: var(--display); font-weight: 800; font-size: 1.9rem; color: #fff; text-transform: uppercase; }
.season-panel .ring-label { display: block; margin-bottom: 4px; }
.season-panel ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; }
.season-panel li a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--limestone);
  color: var(--canopy);
  font-weight: 700;
  text-decoration: none;
}
.season-panel li a:hover { background: var(--fresh); }
.season-panel p { margin-top: 12px; color: rgba(245, 242, 233, 0.8); font-size: 0.95rem; }
.season-nav { display: flex; justify-content: center; gap: 12px; margin-top: 18px; }
.season-nav button {
  min-width: 48px;
  min-height: 48px;
  border-radius: 50%;
  border: 2px solid rgba(245, 242, 233, 0.45);
  background: transparent;
  color: #fff;
  font-size: 1.3rem;
  cursor: pointer;
}
.season-nav button:hover { background: rgba(245, 242, 233, 0.12); }
html:not(.js-rings) .season-nav,
html:not(.js-rings) .season-months { display: none; }

/* ---------- Walk your yard ---------- */
.walk-yard { padding: clamp(64px, 9vw, 112px) 0; background: var(--sapwood-2); background-image: linear-gradient(rgba(40, 111, 159, 0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(40, 111, 159, 0.07) 1px, transparent 1px); background-size: 28px 28px; }
.walk-yard-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
.walk-yard .ring-label { color: var(--sky); }
.walk-yard-intro p { margin-top: 12px; color: var(--ink-soft); max-width: 56ch; }
.yard-plan {
  position: relative;
  border-radius: 18px;
  background: #fbfaf5;
  box-shadow: 0 0 0 2px var(--canopy), 8px 8px 0 var(--canopy);
  overflow: hidden;
}
.yard-plan svg { display: block; width: 100%; height: auto; }
.yard-plan .zone { cursor: pointer; transition: filter 0.2s ease, opacity 0.2s ease; }
.yard-plan .zone:hover { filter: brightness(1.08) saturate(1.2); }
.yard-plan .zone .zone-fill { transition: fill 0.25s ease, stroke 0.25s ease; }
.yard-plan .zone.is-on .zone-fill { stroke: var(--clay); stroke-width: 5; }
.yard-plan .zone.is-on .zone-check { opacity: 1; }
.yard-plan .zone-check { opacity: 0; transition: opacity 0.2s ease; }
.yard-plan text { font-family: var(--stencil); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; font-size: 15px; fill: var(--canopy); pointer-events: none; }
.yard-plan .compass { font-size: 12px; fill: var(--sky); }
.yard-list { margin: 0; padding: 0; border: 0; }
.yard-list legend { font-family: var(--display); font-weight: 800; font-size: 1.6rem; color: var(--canopy); text-transform: uppercase; margin-bottom: 10px; }
.yard-option {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  margin-bottom: 8px;
  padding: 10px 14px;
  border-radius: 12px;
  background: #fff;
  border: 2px solid rgba(21, 59, 47, 0.14);
  cursor: pointer;
  font-weight: 700;
  color: var(--canopy);
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.yard-option:hover { border-color: var(--leaf); }
.yard-option input { width: 22px; height: 22px; accent-color: var(--clay); flex: 0 0 auto; }
.yard-option:has(input:checked) { border-color: var(--clay); background: #fdf3ec; }
.yard-option small { display: block; font-weight: 500; color: var(--ink-soft); font-size: 0.82rem; }
.yard-cta { margin-top: 14px; }
.yard-cta a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 54px;
  padding: 14px 22px;
  border-radius: 999px;
  background: var(--clay);
  color: #fff;
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.35rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: 0 4px 0 var(--clay-deep);
}
.yard-cta a:hover { background: var(--clay-deep); }
.yard-cta p { margin-top: 10px; font-size: 0.88rem; color: var(--ink-soft); }
.yard-count { font-family: var(--stencil); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--clay-deep); font-size: 0.85rem; min-height: 1.2em; }

/* ---------- Storm band (owner switch: assets/data/site-status.json) ---------- */
.storm-band {
  position: relative;
  z-index: 40;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 18px;
  padding: 12px 18px;
  background: var(--clay);
  background-image: repeating-linear-gradient(-45deg, rgba(0, 0, 0, 0.08) 0 12px, transparent 12px 24px);
  color: #fff;
  font-weight: 800;
  text-align: center;
}
.storm-band a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.storm-band .storm-call { padding: 8px 16px; border-radius: 999px; background: #fff; color: var(--clay-deep); text-decoration: none; }
body.storm-header-offset .storm-band { margin-top: var(--header-h, 76px); }

/* ---------- Crew Cam (homepage + /videos/) ---------- */
.video-section { background: var(--canopy-deep) !important; background-image: var(--grain) !important; }
.video-section h2 { color: #fff !important; }
.video-section .text-gray-600 { color: rgba(245, 242, 233, 0.8) !important; }
.video-card {
  border-radius: 16px !important;
  overflow: hidden;
  background: #000;
  box-shadow: 0 0 0 3px var(--moss), 0 0 0 6px #000, 0 24px 40px -20px rgba(0, 0, 0, 0.9) !important;
  position: relative;
}
.video-card::before {
  content: "CREW CAM";
  position: absolute;
  z-index: 2;
  left: 10px;
  top: 10px;
  padding: 4px 8px;
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.6);
  color: var(--fresh);
  font-family: var(--stencil);
  font-weight: 700;
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  pointer-events: none;
}
.video-card::after {
  content: "";
  position: absolute;
  z-index: 2;
  right: 12px;
  top: 14px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #e5484d;
  box-shadow: 0 0 8px #e5484d;
  pointer-events: none;
}

/* ---------- Before / after: then & now ---------- */
.before-after-slider { border-radius: 18px !important; box-shadow: 0 0 0 4px var(--sapwood), 0 0 0 7px var(--heartwood), 0 24px 40px -20px rgba(0, 0, 0, 0.6) !important; }
.slider-handle { background: var(--sapwood) !important; }

/* ---------- FAQ & quote ---------- */
.faq-item { border-radius: 14px !important; border-left: 5px solid var(--leaf) !important; }
.faq-item summary { font-weight: 800 !important; }

/* ---------- Footer: see "Round 2 · Roots footer" below ---------- */

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .js-rings .hero-ring .ring-line { animation: none; stroke-dashoffset: 0; }
  .season-ring-disc,
  .month-btn,
  .service-card { transition: none !important; }
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .year-yard-grid,
  .walk-yard-grid { grid-template-columns: 1fr; }
  .season-ring { --radius: min(170px, 38vw); }
}
@media (max-width: 480px) {
  .month-btn { width: 40px; height: 40px; left: -20px; top: -20px; font-size: 0.86rem; }
  .season-ring { --radius: min(150px, 38vw); }
}
.yard-plan text.on-dark { fill: #fff; }
.storm-band[hidden] { display: none !important; }
.season-ring { margin-bottom: 84px; }
.season-nav { position: absolute; left: 0; right: 0; bottom: -76px; margin-top: 0; }

/* ==========================================================================
   ROUND 2 · "Living Seasons + Roots" (2026-09-23)
   The hero lives in today's season, the footer shows what is under the
   ground, and every service page says when that work happens. Plus a crew
   tape measure, a field-notebook gallery and cross-page transitions.
   Every moving piece has a still path for reduced motion. (The stamped yard
   chips gave way to #51's selection notice in the round-4 merge.)
   ========================================================================== */
:root {
  --soil-top: #3b2819;
  --soil: #241810;
  --soil-deep: #1b120b;
  --paper: #fbf7ee;
  --tape: rgba(226, 207, 158, 0.82);
  --season-glow: #f0a36b;
}
html[data-season="spring"] { --season-glow: #b8d98f; }
html[data-season="summer"] { --season-glow: #f0c95a; }
html[data-season="fall"] { --season-glow: #f0a36b; }
html[data-season="winter"] { --season-glow: #a9d3ee; }

/* The hero eyebrow carries a quiet season notch (bright tint on the dark card). */
.hero-eyebrow { box-shadow: inset 4px 0 0 var(--season-glow), 0 10px 30px rgba(0, 0, 0, 0.22) !important; }

/* ---------- Signature A · Weather over the hero (built by rings.js) ----------
   Round 4: one arrival of 5 s or less, then a still scene (WCAG 2.2.2). Only
   the HTML <span> wrappers animate, with literal transform/opacity keyframes
   (compositor-only: no var() inside keyframes, nothing inside the SVG moves).
   Each .wx-kN base style is its last keyframe, so reduced motion draws the
   same settled scene with no movement. */
.wx-sky,
.wx-ground {
  position: absolute;
  left: 0;
  right: 0;
  pointer-events: none;
  overflow: hidden;
}
.wx-sky {
  top: 0;
  bottom: 0;
  z-index: 1;
  /* Phones and tablets: six particles in the right-hand strip, low in the
     hero, behind the text layer. */
  opacity: 0.75;
}
.wx-sky .wx-p:nth-of-type(n+7) { display: none; }
.wx-ground { bottom: 0; height: 40px; z-index: 1; }
.wx-ground.wx-drift { height: 48px; }
.wx-ground svg { display: block; width: 100%; height: 100%; }
.wx-p {
  position: absolute;
  /* rings.js supplies resolved values so older calc() parsers draw particles. */
  left: var(--wx-left-sm);
  width: var(--wx-size-sm);
  height: var(--wx-size-sm);
  animation-timing-function: cubic-bezier(0.3, 0.1, 0.35, 1);
  animation-iteration-count: 1;
  animation-fill-mode: both;
}
.wx-live .wx-p { will-change: transform, opacity; }
.wx-p svg { display: block; width: 100%; height: 100%; overflow: visible; }
.wx-k1 { animation-name: wx-fall-1; animation-duration: 3.6s; transform: rotate(200deg); }
.wx-k2 { animation-name: wx-fall-2; animation-duration: 3.4s; transform: rotate(-150deg); }
.wx-k3 { animation-name: wx-fall-3; animation-duration: 3.7s; transform: rotate(95deg); }
.wx-k4 { animation-name: wx-fall-4; animation-duration: 3.5s; transform: rotate(-35deg); }
.wx-fly { top: var(--wx-top-sm); animation-duration: 4s; animation-timing-function: ease-in-out; }
.wx-fly.wx-k1 { animation-name: wx-glow-1; opacity: 0.55; transform: translate3d(20px, -16px, 0); }
.wx-fly.wx-k2 { animation-name: wx-glow-2; opacity: 0.5; transform: translate3d(-18px, -12px, 0); }
.wx-fly.wx-k3 { animation-name: wx-glow-3; opacity: 0.6; transform: translate3d(14px, -22px, 0); }
@media (min-width: 1280px) {
  /* Desktop: ten particles in the ring column, in front of the ring, never
     over the headline or the calls to action; they fall the full hero. */
  .wx-sky { z-index: 11; opacity: 1; }
  .wx-sky .wx-p:nth-of-type(n+7) { display: block; }
  .wx-p { left: var(--wx-left-lg); width: var(--wx-size-lg); height: var(--wx-size-lg); }
  .wx-fly { top: var(--wx-top-lg); }
  .wx-k1 { animation-name: wx-fall-1d; }
  .wx-k2 { animation-name: wx-fall-2d; }
  .wx-k3 { animation-name: wx-fall-3d; }
  .wx-k4 { animation-name: wx-fall-4d; }
}
.wx-paused .wx-p,
.wx-ground.wx-paused { animation-play-state: paused !important; }
@keyframes wx-fall-1 {
  0% { opacity: 0; transform: translate3d(-16px, -210px, 0) rotate(-30deg); }
  12% { opacity: 1; }
  40% { transform: translate3d(14px, -130px, 0) rotate(70deg); }
  72% { transform: translate3d(-8px, -46px, 0) rotate(150deg); }
  100% { opacity: 1; transform: translate3d(0, 0, 0) rotate(200deg); }
}
@keyframes wx-fall-2 {
  0% { opacity: 0; transform: translate3d(18px, -190px, 0) rotate(40deg); }
  12% { opacity: 1; }
  40% { transform: translate3d(-12px, -120px, 0) rotate(-40deg); }
  72% { transform: translate3d(9px, -40px, 0) rotate(-110deg); }
  100% { opacity: 1; transform: translate3d(0, 0, 0) rotate(-150deg); }
}
@keyframes wx-fall-3 {
  0% { opacity: 0; transform: translate3d(-10px, -230px, 0) rotate(-80deg); }
  12% { opacity: 1; }
  40% { transform: translate3d(16px, -140px, 0) rotate(10deg); }
  72% { transform: translate3d(-6px, -50px, 0) rotate(60deg); }
  100% { opacity: 1; transform: translate3d(0, 0, 0) rotate(95deg); }
}
@keyframes wx-fall-4 {
  0% { opacity: 0; transform: translate3d(12px, -200px, 0) rotate(60deg); }
  12% { opacity: 1; }
  40% { transform: translate3d(-15px, -125px, 0) rotate(10deg); }
  72% { transform: translate3d(7px, -44px, 0) rotate(-20deg); }
  100% { opacity: 1; transform: translate3d(0, 0, 0) rotate(-35deg); }
}
@keyframes wx-fall-1d {
  0% { opacity: 0; transform: translate3d(-29px, -630px, 0) rotate(-30deg); }
  12% { opacity: 1; }
  40% { transform: translate3d(25px, -390px, 0) rotate(70deg); }
  72% { transform: translate3d(-14px, -138px, 0) rotate(150deg); }
  100% { opacity: 1; transform: translate3d(0, 0, 0) rotate(200deg); }
}
@keyframes wx-fall-2d {
  0% { opacity: 0; transform: translate3d(32px, -570px, 0) rotate(40deg); }
  12% { opacity: 1; }
  40% { transform: translate3d(-22px, -360px, 0) rotate(-40deg); }
  72% { transform: translate3d(16px, -120px, 0) rotate(-110deg); }
  100% { opacity: 1; transform: translate3d(0, 0, 0) rotate(-150deg); }
}
@keyframes wx-fall-3d {
  0% { opacity: 0; transform: translate3d(-18px, -690px, 0) rotate(-80deg); }
  12% { opacity: 1; }
  40% { transform: translate3d(29px, -420px, 0) rotate(10deg); }
  72% { transform: translate3d(-11px, -150px, 0) rotate(60deg); }
  100% { opacity: 1; transform: translate3d(0, 0, 0) rotate(95deg); }
}
@keyframes wx-fall-4d {
  0% { opacity: 0; transform: translate3d(22px, -600px, 0) rotate(60deg); }
  12% { opacity: 1; }
  40% { transform: translate3d(-27px, -375px, 0) rotate(10deg); }
  72% { transform: translate3d(13px, -132px, 0) rotate(-20deg); }
  100% { opacity: 1; transform: translate3d(0, 0, 0) rotate(-35deg); }
}
@keyframes wx-glow-1 {
  0% { opacity: 0; transform: translate3d(0, 0, 0); }
  16% { opacity: 1; }
  30% { opacity: 0.2; }
  48% { opacity: 1; transform: translate3d(12px, -9px, 0); }
  64% { opacity: 0.25; }
  82% { opacity: 0.95; }
  100% { opacity: 0.55; transform: translate3d(20px, -16px, 0); }
}
@keyframes wx-glow-2 {
  0% { opacity: 0; transform: translate3d(0, 0, 0); }
  20% { opacity: 0.9; }
  36% { opacity: 0.15; }
  56% { opacity: 1; transform: translate3d(-10px, -6px, 0); }
  74% { opacity: 0.3; }
  100% { opacity: 0.5; transform: translate3d(-18px, -12px, 0); }
}
@keyframes wx-glow-3 {
  0% { opacity: 0; transform: translate3d(0, 0, 0); }
  14% { opacity: 1; }
  28% { opacity: 0.25; }
  44% { opacity: 0.9; transform: translate3d(8px, -12px, 0); }
  62% { opacity: 0.2; }
  80% { opacity: 1; }
  100% { opacity: 0.6; transform: translate3d(14px, -22px, 0); }
}
/* Spring grass: the HTML wrapper grows once; the winter drift is static. */
.wx-grass { transform-origin: 50% 100%; animation: wx-grow 1.2s cubic-bezier(0.2, 0, 0, 1) 1 both; }
@keyframes wx-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) {
  .wx-p,
  .wx-grass { animation: none !important; }
}

/* ---------- Signature B · Roots footer: a soil cross-section ---------- */
footer.bg-gray-900 {
  --soil-h: 66px;
  position: relative;
  overflow: visible;
  overflow-x: clip;
  /* Text starts 60px below the topsoil: the root plate lives in that gap, never behind text. */
  padding-top: calc(var(--soil-h) + 3.75rem) !important;
  background-color: var(--soil) !important;
  background-image:
    radial-gradient(ellipse 45% 55% at 10% 105%, rgba(138, 98, 68, 0.16), transparent 70%),
    repeating-linear-gradient(178.5deg, rgba(233, 220, 195, 0.028) 0 1px, transparent 1px 41px),
    linear-gradient(180deg, #2c1e14 0, var(--soil) 38%, var(--soil-deep) 100%) !important;
}
footer.bg-gray-900 > .container { position: relative; z-index: 1; }
.soil {
  position: absolute;
  z-index: 0;
  left: 0;
  right: 0;
  top: -26px;
  bottom: 0;
  overflow: hidden;
  pointer-events: none;
}
/* Grass fringe (rises 26px into the section above), turf line, topsoil with pebbles. */
.soil::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: calc(26px + var(--soil-h));
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='30' viewBox='0 0 96 30'%3E%3Cpath fill='%234f7331' d='M0.1 30Q-0.1 24.6 1.7 20.2Q4.4 25.1 3.8 30ZM8.5 30Q7.5 22.2 7.2 15.7Q10.7 22.9 11.1 30ZM14.7 30Q13.4 19.8 12.2 11.5Q16 20.8 16.8 30ZM21.7 30Q21.2 21.3 21.4 14.3Q23.6 22.1 23.7 30ZM25.4 30Q26.7 21.2 30.5 14Q29.4 22 27.7 30ZM31.2 30Q29.8 18.8 28.3 9.6Q32.2 19.8 33.2 30ZM36.7 30Q37.1 23 39.3 17.2Q40.4 23.6 39.5 30ZM42.4 30Q42.7 18.5 44.9 9.1Q46.1 19.6 45.2 30ZM51.3 30Q52.8 18.1 57.4 8.4Q56.4 19.2 54.2 30ZM58 30Q57.5 24.8 57.7 20.5Q59.9 25.2 60 30ZM62 30Q62.3 24.9 63.9 20.7Q64.5 25.4 63.8 30ZM67.8 30Q68.8 22 72.1 15.5Q71.9 22.7 70.4 30ZM75.4 30Q74.8 20.1 74.9 12.1Q77.6 21 77.7 30ZM78.7 30Q77.8 24.1 78.2 19.3Q82.1 24.6 82.3 30ZM84.9 30Q83.3 20.5 81.5 12.8Q86.1 21.4 87.3 30ZM93.3 30Q94.4 18.5 98.2 9Q97.8 19.5 96.1 30Z'/%3E%3Cpath fill='%238aa63f' d='M2.6 30Q1.8 24 1.5 19.1Q4.4 24.5 4.8 30ZM10.2 30Q8.9 21.3 8.4 14.2Q13.1 22.1 13.7 30ZM17.4 30Q16.4 22 15.7 15.5Q18.8 22.7 19.4 30ZM25.8 30Q26.1 24.6 27.7 20.3Q28.3 25.1 27.6 30ZM30.8 30Q28.9 23.3 27.4 17.9Q33 24 34.2 30ZM39.8 30Q39.1 25.3 39.4 21.5Q42.5 25.7 42.6 30ZM44.9 30Q45.1 22.7 47.4 16.6Q49.2 23.3 48.3 30ZM55.5 30Q54.6 23.1 54 17.5Q57 23.8 57.5 30ZM61.3 30Q60.5 24.8 60.7 20.6Q64.1 25.3 64.3 30ZM68.8 30Q68.8 21.1 70.6 13.8Q72.3 21.9 71.6 30ZM75.7 30Q75.7 21.5 77.8 14.5Q80.1 22.2 79.3 30ZM85 30Q83.8 25.9 83 22.6Q87 26.3 87.7 30ZM89.2 30Q89.4 22.3 91 16Q92.3 23 91.7 30Z'/%3E%3C/svg%3E") repeat-x 0 0 / 96px 30px,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='30' viewBox='0 0 96 30'%3E%3Cpath fill='%234f7331' d='M0.1 30Q-0.1 24.6 1.7 20.2Q4.4 25.1 3.8 30ZM8.5 30Q7.5 22.2 7.2 15.7Q10.7 22.9 11.1 30ZM14.7 30Q13.4 19.8 12.2 11.5Q16 20.8 16.8 30ZM21.7 30Q21.2 21.3 21.4 14.3Q23.6 22.1 23.7 30ZM25.4 30Q26.7 21.2 30.5 14Q29.4 22 27.7 30ZM31.2 30Q29.8 18.8 28.3 9.6Q32.2 19.8 33.2 30ZM36.7 30Q37.1 23 39.3 17.2Q40.4 23.6 39.5 30ZM42.4 30Q42.7 18.5 44.9 9.1Q46.1 19.6 45.2 30ZM51.3 30Q52.8 18.1 57.4 8.4Q56.4 19.2 54.2 30ZM58 30Q57.5 24.8 57.7 20.5Q59.9 25.2 60 30ZM62 30Q62.3 24.9 63.9 20.7Q64.5 25.4 63.8 30ZM67.8 30Q68.8 22 72.1 15.5Q71.9 22.7 70.4 30ZM75.4 30Q74.8 20.1 74.9 12.1Q77.6 21 77.7 30ZM78.7 30Q77.8 24.1 78.2 19.3Q82.1 24.6 82.3 30ZM84.9 30Q83.3 20.5 81.5 12.8Q86.1 21.4 87.3 30ZM93.3 30Q94.4 18.5 98.2 9Q97.8 19.5 96.1 30Z'/%3E%3Cpath fill='%238aa63f' d='M2.6 30Q1.8 24 1.5 19.1Q4.4 24.5 4.8 30ZM10.2 30Q8.9 21.3 8.4 14.2Q13.1 22.1 13.7 30ZM17.4 30Q16.4 22 15.7 15.5Q18.8 22.7 19.4 30ZM25.8 30Q26.1 24.6 27.7 20.3Q28.3 25.1 27.6 30ZM30.8 30Q28.9 23.3 27.4 17.9Q33 24 34.2 30ZM39.8 30Q39.1 25.3 39.4 21.5Q42.5 25.7 42.6 30ZM44.9 30Q45.1 22.7 47.4 16.6Q49.2 23.3 48.3 30ZM55.5 30Q54.6 23.1 54 17.5Q57 23.8 57.5 30ZM61.3 30Q60.5 24.8 60.7 20.6Q64.1 25.3 64.3 30ZM68.8 30Q68.8 21.1 70.6 13.8Q72.3 21.9 71.6 30ZM75.7 30Q75.7 21.5 77.8 14.5Q80.1 22.2 79.3 30ZM85 30Q83.8 25.9 83 22.6Q87 26.3 87.7 30ZM89.2 30Q89.4 22.3 91 16Q92.3 23 91.7 30Z'/%3E%3C/svg%3E") repeat-x 41px 7px / 137px 23px,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='60' viewBox='0 0 240 60'%3E%3Cpath fill='%23c9b99f' opacity='.22' d='M197 31h1.1v1.1h-1.1ZM61.1 43.2h1.1v1.1h-1.1ZM184.3 13.5h1.2v1.2h-1.2ZM20.7 19.8h1.1v1.1h-1.1ZM89.8 22.7h1.3v1.3h-1.3ZM16.1 44.9h0.5v0.5h-0.5ZM135.8 33.9h1.1v1.1h-1.1ZM2.6 55.9h1.2v1.2h-1.2ZM44 34.7h1.2v1.2h-1.2ZM225.7 12.9h0.6v0.6h-0.6ZM98.3 40.6h0.9v0.9h-0.9ZM208.5 25.8h0.9v0.9h-0.9ZM18.9 8.1h1.3v1.3h-1.3ZM86.8 42.1h1.3v1.3h-1.3ZM178.6 45.9h1.3v1.3h-1.3ZM79.1 7.8h1.3v1.3h-1.3ZM144.4 47.4h0.7v0.7h-0.7ZM238.1 23.9h0.5v0.5h-0.5ZM128.8 21.9h0.9v0.9h-0.9ZM79.9 13.9h0.9v0.9h-0.9ZM169.8 13.6h1v1h-1ZM120 48h1.1v1.1h-1.1ZM146.4 17h0.6v0.6h-0.6ZM238.3 27.9h1v1h-1ZM161.2 49.4h1.1v1.1h-1.1ZM64 45.2h0.8v0.8h-0.8Z'/%3E%3Cellipse cx='14.5' cy='41.4' rx='4.7' ry='3.4' transform='rotate(-25 14.5 41.4)' fill='%238a7660'/%3E%3Cellipse cx='13.3' cy='40.2' rx='2.1' ry='1' transform='rotate(-25 14.5 41.4)' fill='%23c9b99f' opacity='.35'/%3E%3Cellipse cx='34.6' cy='17.6' rx='4' ry='2.9' transform='rotate(-7 34.6 17.6)' fill='%237d6a55'/%3E%3Cellipse cx='33.6' cy='16.6' rx='1.8' ry='0.9' transform='rotate(-7 34.6 17.6)' fill='%23c9b99f' opacity='.35'/%3E%3Cellipse cx='64.7' cy='38.7' rx='3.4' ry='2' transform='rotate(-2 64.7 38.7)' fill='%238a7660'/%3E%3Cellipse cx='63.8' cy='38' rx='1.5' ry='0.6' transform='rotate(-2 64.7 38.7)' fill='%23c9b99f' opacity='.35'/%3E%3Cellipse cx='91.7' cy='23.3' rx='4.8' ry='3.5' transform='rotate(-6 91.7 23.3)' fill='%238a7660'/%3E%3Cellipse cx='90.6' cy='22' rx='2.1' ry='1.1' transform='rotate(-6 91.7 23.3)' fill='%23c9b99f' opacity='.35'/%3E%3Cellipse cx='124.4' cy='31.6' rx='3.4' ry='2.7' transform='rotate(-15 124.4 31.6)' fill='%2395826b'/%3E%3Cellipse cx='123.5' cy='30.7' rx='1.5' ry='0.8' transform='rotate(-15 124.4 31.6)' fill='%23c9b99f' opacity='.35'/%3E%3Cellipse cx='144' cy='27.3' rx='3.6' ry='2.2' transform='rotate(10 144 27.3)' fill='%2395826b'/%3E%3Cellipse cx='143.1' cy='26.5' rx='1.6' ry='0.7' transform='rotate(10 144 27.3)' fill='%23c9b99f' opacity='.35'/%3E%3Cellipse cx='172.1' cy='20.5' rx='6' ry='4' transform='rotate(5 172.1 20.5)' fill='%236b5a48'/%3E%3Cellipse cx='170.6' cy='19.1' rx='2.7' ry='1.2' transform='rotate(5 172.1 20.5)' fill='%23c9b99f' opacity='.35'/%3E%3Cellipse cx='194.1' cy='23.4' rx='4.9' ry='3.7' transform='rotate(-2 194.1 23.4)' fill='%237d6a55'/%3E%3Cellipse cx='192.9' cy='22.1' rx='2.2' ry='1.1' transform='rotate(-2 194.1 23.4)' fill='%23c9b99f' opacity='.35'/%3E%3Cellipse cx='205.9' cy='36' rx='6.8' ry='4.6' transform='rotate(-10 205.9 36)' fill='%236b5a48'/%3E%3Cellipse cx='204.2' cy='34.4' rx='3' ry='1.4' transform='rotate(-10 205.9 36)' fill='%23c9b99f' opacity='.35'/%3E%3C/svg%3E") repeat-x 0 30px / 240px 60px,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='60' viewBox='0 0 240 60'%3E%3Cpath fill='%23c9b99f' opacity='.22' d='M197 31h1.1v1.1h-1.1ZM61.1 43.2h1.1v1.1h-1.1ZM184.3 13.5h1.2v1.2h-1.2ZM20.7 19.8h1.1v1.1h-1.1ZM89.8 22.7h1.3v1.3h-1.3ZM16.1 44.9h0.5v0.5h-0.5ZM135.8 33.9h1.1v1.1h-1.1ZM2.6 55.9h1.2v1.2h-1.2ZM44 34.7h1.2v1.2h-1.2ZM225.7 12.9h0.6v0.6h-0.6ZM98.3 40.6h0.9v0.9h-0.9ZM208.5 25.8h0.9v0.9h-0.9ZM18.9 8.1h1.3v1.3h-1.3ZM86.8 42.1h1.3v1.3h-1.3ZM178.6 45.9h1.3v1.3h-1.3ZM79.1 7.8h1.3v1.3h-1.3ZM144.4 47.4h0.7v0.7h-0.7ZM238.1 23.9h0.5v0.5h-0.5ZM128.8 21.9h0.9v0.9h-0.9ZM79.9 13.9h0.9v0.9h-0.9ZM169.8 13.6h1v1h-1ZM120 48h1.1v1.1h-1.1ZM146.4 17h0.6v0.6h-0.6ZM238.3 27.9h1v1h-1ZM161.2 49.4h1.1v1.1h-1.1ZM64 45.2h0.8v0.8h-0.8Z'/%3E%3Cellipse cx='14.5' cy='41.4' rx='4.7' ry='3.4' transform='rotate(-25 14.5 41.4)' fill='%238a7660'/%3E%3Cellipse cx='13.3' cy='40.2' rx='2.1' ry='1' transform='rotate(-25 14.5 41.4)' fill='%23c9b99f' opacity='.35'/%3E%3Cellipse cx='34.6' cy='17.6' rx='4' ry='2.9' transform='rotate(-7 34.6 17.6)' fill='%237d6a55'/%3E%3Cellipse cx='33.6' cy='16.6' rx='1.8' ry='0.9' transform='rotate(-7 34.6 17.6)' fill='%23c9b99f' opacity='.35'/%3E%3Cellipse cx='64.7' cy='38.7' rx='3.4' ry='2' transform='rotate(-2 64.7 38.7)' fill='%238a7660'/%3E%3Cellipse cx='63.8' cy='38' rx='1.5' ry='0.6' transform='rotate(-2 64.7 38.7)' fill='%23c9b99f' opacity='.35'/%3E%3Cellipse cx='91.7' cy='23.3' rx='4.8' ry='3.5' transform='rotate(-6 91.7 23.3)' fill='%238a7660'/%3E%3Cellipse cx='90.6' cy='22' rx='2.1' ry='1.1' transform='rotate(-6 91.7 23.3)' fill='%23c9b99f' opacity='.35'/%3E%3Cellipse cx='124.4' cy='31.6' rx='3.4' ry='2.7' transform='rotate(-15 124.4 31.6)' fill='%2395826b'/%3E%3Cellipse cx='123.5' cy='30.7' rx='1.5' ry='0.8' transform='rotate(-15 124.4 31.6)' fill='%23c9b99f' opacity='.35'/%3E%3Cellipse cx='144' cy='27.3' rx='3.6' ry='2.2' transform='rotate(10 144 27.3)' fill='%2395826b'/%3E%3Cellipse cx='143.1' cy='26.5' rx='1.6' ry='0.7' transform='rotate(10 144 27.3)' fill='%23c9b99f' opacity='.35'/%3E%3Cellipse cx='172.1' cy='20.5' rx='6' ry='4' transform='rotate(5 172.1 20.5)' fill='%236b5a48'/%3E%3Cellipse cx='170.6' cy='19.1' rx='2.7' ry='1.2' transform='rotate(5 172.1 20.5)' fill='%23c9b99f' opacity='.35'/%3E%3Cellipse cx='194.1' cy='23.4' rx='4.9' ry='3.7' transform='rotate(-2 194.1 23.4)' fill='%237d6a55'/%3E%3Cellipse cx='192.9' cy='22.1' rx='2.2' ry='1.1' transform='rotate(-2 194.1 23.4)' fill='%23c9b99f' opacity='.35'/%3E%3Cellipse cx='205.9' cy='36' rx='6.8' ry='4.6' transform='rotate(-10 205.9 36)' fill='%236b5a48'/%3E%3Cellipse cx='204.2' cy='34.4' rx='3' ry='1.4' transform='rotate(-10 205.9 36)' fill='%23c9b99f' opacity='.35'/%3E%3C/svg%3E") repeat-x 97px 46px / 168px 42px,
    linear-gradient(180deg, transparent 0 25px, #22361d 25px 29px, var(--soil-top) 29px, #33231a 72%, rgba(44, 30, 20, 0) 100%);
}
.soil-roots {
  position: absolute;
  top: 0;
  right: max(16px, 7vw);
  width: 480px;
  height: 140px;
  overflow: hidden;
}
@media (max-width: 640px) { .soil-roots { right: calc(50% - 240px); } }
.soil .rt { stroke-dasharray: 1 2; stroke-dashoffset: 0; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    footer.bg-gray-900 { view-timeline: --soil block; }
    .soil .rt { animation: root-grow linear both; animation-timeline: --soil; }
    .soil .rt-1 { animation-range: entry 0% entry 55%; }
    .soil .rt-2 { animation-range: entry 22% entry 76%; }
    .soil .rt-3 { animation-range: entry 42% entry 92%; }
  }
}
@keyframes root-grow { from { stroke-dashoffset: 1.05; } to { stroke-dashoffset: 0; } }
/* Footer text on soil: every tone at or above 4.5:1 on #241810. */
footer.bg-gray-900 .text-gray-300 { color: #ebe2d1 !important; }
footer.bg-gray-900 .text-gray-400 { color: #d8cdb8 !important; }
footer.bg-gray-900 .text-gray-500 { color: #c9bda7 !important; }
footer.bg-gray-900 .text-green-500,
footer.bg-gray-900 .text-green-600 { color: #b5cf74 !important; }
footer.bg-gray-900 a:hover,
footer.bg-gray-900 a:hover .text-green-600 { color: #fff !important; }
footer.bg-gray-900 .border-green-600 { border-color: var(--moss) !important; }
footer.bg-gray-900 .border-gray-800 { border-color: rgba(233, 220, 195, 0.16) !important; }
footer.bg-gray-900 .bg-gray-800 { background: rgba(233, 220, 195, 0.08) !important; border-color: rgba(233, 220, 195, 0.2) !important; }

/* ---------- Signature C · "When we do this" on service pages ---------- */
.when-card {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(18px, 3vw, 34px);
  align-items: center;
  margin: 0 0 2.5rem;
  padding: 26px clamp(18px, 3vw, 30px) 24px;
  border: 1px solid rgba(107, 74, 51, 0.2);
  border-radius: 6px;
  background-color: var(--paper);
  background-image: linear-gradient(rgba(40, 111, 159, 0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(40, 111, 159, 0.07) 1px, transparent 1px);
  background-size: 22px 22px;
  box-shadow: 0 1px 0 rgba(107, 74, 51, 0.12), 0 18px 34px -26px rgba(12, 42, 32, 0.55);
}
.when-card::before {
  content: "";
  position: absolute;
  top: -11px;
  left: 26px;
  width: 92px;
  height: 22px;
  background: var(--tape);
  background-image: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.18) 0 2px, transparent 2px 7px);
  box-shadow: 0 1px 2px rgba(31, 27, 23, 0.14);
  transform: rotate(-3.5deg);
  clip-path: polygon(2% 0, 98% 6%, 100% 50%, 97% 100%, 1% 94%, 0 45%);
}
.when-ring { position: relative; width: 212px; max-width: 100%; aspect-ratio: 1; flex: 0 0 auto; }
.when-ring svg { position: absolute; inset: 7.55%; width: 84.9%; height: 84.9%; overflow: visible; }
.when-seg { fill: #e6dcc9; stroke: var(--paper); stroke-width: 2; }
.when-seg.is-on.s-winter { fill: #5b93bb; }
.when-seg.is-on.s-spring { fill: #6ea45a; }
.when-seg.is-on.s-summer { fill: #d3a232; }
.when-seg.is-on.s-fall { fill: #cc6b38; }
.when-seg.is-now { stroke: var(--ink); stroke-width: 3.2; }
.when-heart { fill: #efe3c8; stroke: var(--heartwood); stroke-width: 3; }
.when-grain { fill: none; stroke: #cdb68c; stroke-width: 1.1; }
.when-crack { fill: none; stroke: var(--heartwood-2); stroke-width: 1.2; stroke-linecap: round; }
.when-months { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; }
.when-months li {
  position: absolute;
  left: 50%;
  top: 8.5%;
  width: 0;
  height: 41.5%;
  transform-origin: 0 100%;
  transform: rotate(var(--a));
}
.when-months span {
  position: absolute;
  left: 0;
  top: 0;
  padding: 1px 3px;
  border-radius: 3px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 12.5px;
  line-height: 1;
  letter-spacing: 0.03em;
  color: #6a6155;
  white-space: nowrap;
  transform: translate(-50%, -50%) rotate(calc(var(--a) * -1));
}
.when-months li.is-on span { color: var(--ink); font-weight: 900; }
.when-months li.is-now span { background: var(--ink); color: #fff; }
.when-copy h2.when-title {
  margin: 0;
  font-size: clamp(1.9rem, 3.6vw, 2.5rem) !important;
  color: var(--canopy);
  text-transform: uppercase;
}
.when-kicker { margin: 0 0 6px; color: var(--clay-deep); font-size: 0.78rem; }
.when-seasons { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 12px 0 0; padding: 0; list-style: none; }
.when-seasons li { display: flex; align-items: baseline; gap: 8px; color: var(--ink-soft); font-size: 0.95rem; }
.when-seasons strong { color: var(--ink); font-family: var(--display); font-weight: 800; font-size: 1.2rem; text-transform: uppercase; letter-spacing: 0.03em; }
.when-seasons li::before { content: ""; width: 10px; height: 10px; border-radius: 50%; align-self: center; background: var(--dot, var(--leaf)); }
.when-seasons .s-winter { --dot: #5b93bb; }
.when-seasons .s-spring { --dot: #6ea45a; }
.when-seasons .s-summer { --dot: #d3a232; }
.when-seasons .s-fall { --dot: #cc6b38; }
.when-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 16px 0 0;
  padding: 8px 14px 8px 12px;
  border-radius: 999px;
  border: 2px solid var(--clay-deep);
  color: var(--clay-deep);
  background: #fff;
  font-weight: 800;
  font-size: 0.95rem;
}
.when-chip[hidden],
.when-chip [hidden] { display: none !important; }
.when-chip::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: currentColor; }
.when-chip.is-now { border-color: var(--leaf); background: var(--leaf); color: #fff; }
.when-chip.is-now::before { background: var(--fresh); box-shadow: 0 0 0 3px rgba(184, 217, 143, 0.35); }
.when-note { margin: 12px 0 0; color: var(--ink-soft); font-size: 0.88rem; max-width: 48ch; }

/* Service panels share fluid padding instead of nesting fixed phone gutters. */
.service-content { padding: clamp(1rem, 4vw, 3rem); }
.service-cta { padding: clamp(1rem, 3vw, 2rem); }
.service-cta > .flex { flex-wrap: wrap; }
.service-cta a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-width: 0;
  min-height: 44px;
  max-width: 100%;
  padding-inline: 1rem;
}
.service-cta .icon { flex-shrink: 0; margin-right: 0; }
@media (min-width: 640px) {
  .service-cta > .flex > a { flex: 1 1 12rem; }
}
@media (max-width: 600px) {
  .when-card { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
  .when-seasons { justify-content: center; }
  .when-seasons li { flex-wrap: wrap; justify-content: center; }
  .when-note { margin-inline: auto; }
}

/* ---------- Craft · Crew tape measure (scroll progress, decorative) ---------- */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    #header::before {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      top: 100%;
      height: 12px;
      pointer-events: none;
      background:
        linear-gradient(90deg, #6e4f1a, #e6c46e 38%, #b88a2e 72%, #6e4f1a) right 0 / 11px 12px no-repeat,
        linear-gradient(180deg, rgba(0, 0, 0, 0.14), transparent 30% 72%, rgba(0, 0, 0, 0.22)) 0 0 / 100% 8px no-repeat,
        repeating-linear-gradient(90deg, rgba(31, 27, 23, 0.9) 0 1.5px, transparent 1.5px 48px) 0 0 / 100% 6px repeat-x,
        repeating-linear-gradient(90deg, rgba(31, 27, 23, 0.7) 0 1px, transparent 1px 24px) 0 0 / 100% 4px repeat-x,
        repeating-linear-gradient(90deg, rgba(31, 27, 23, 0.55) 0 1px, transparent 1px 6px) 0 0 / 100% 2px repeat-x,
        linear-gradient(180deg, #f3cf45, #e2b62a) 0 0 / 100% 8px no-repeat;
      transform: translateX(-100%);
      animation: tape-out linear both;
      animation-timeline: scroll(root block);
    }
    #header.site-header::before { top: calc(100% + 4px); }
  }
}
@keyframes tape-out { to { transform: translateX(0); } }

/* ---------- Craft · Cross-page transitions ---------- */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}
#header { view-transition-name: site-header; }
::view-transition-group(site-header) { animation: none; }
::view-transition-old(site-header) { display: none; }
::view-transition-new(site-header) { animation: none; }
::view-transition-old(root) { animation: vt-fade-out 0.2s ease-out both; }
::view-transition-new(root) { animation: vt-rise-in 0.38s cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes vt-fade-out { to { opacity: 0; } }
@keyframes vt-rise-in { from { opacity: 0; transform: translateY(12px); } }

/* ---------- Craft · Field-notebook gallery (/gallery/) ---------- */
.field-notebook {
  overflow-x: clip;
  background-color: #f6f1e4 !important;
  background-image:
    linear-gradient(rgba(40, 111, 159, 0.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(40, 111, 159, 0.09) 1px, transparent 1px),
    linear-gradient(rgba(40, 111, 159, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(40, 111, 159, 0.05) 1px, transparent 1px) !important;
  background-size: 96px 96px, 96px 96px, 24px 24px, 24px 24px !important;
}
.notebook-label { display: block; margin-bottom: 8px; text-align: center; color: var(--clay-deep); font-size: 0.85rem; }
.field-notebook h2 { color: var(--canopy) !important; }
.field-notebook .gallery-item {
  --tilt: -1.2deg;
  --drop: 0px;
  aspect-ratio: auto;
  overflow: visible;
  padding: 10px 10px 0;
  border-radius: 2px;
  background: #fffdf8;
  box-shadow: 0 1px 1px rgba(31, 27, 23, 0.1), 0 12px 22px -14px rgba(31, 27, 23, 0.55);
  transform: translateY(var(--drop)) rotate(var(--tilt));
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
/* Deterministic tilts: equal angles either way keep every print the same height. */
.field-notebook .gallery-item:nth-child(2n) { --tilt: 1.2deg; }
.field-notebook .gallery-item:nth-child(3n) { --drop: 5px; }
.field-notebook .gallery-item:nth-child(5n + 1) { --drop: -3px; }
.field-notebook .gallery-item::before,
.field-notebook .gallery-item::after {
  content: "";
  position: absolute;
  z-index: 2;
  width: 78px;
  height: 22px;
  background: var(--tape);
  background-image: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.2) 0 2px, transparent 2px 7px);
  box-shadow: 0 1px 2px rgba(31, 27, 23, 0.14);
  clip-path: polygon(2% 0, 98% 6%, 100% 50%, 97% 100%, 1% 94%, 0 45%);
  pointer-events: none;
}
.field-notebook .gallery-item::before { top: -11px; left: calc(50% - 39px); transform: rotate(-4deg); }
.field-notebook .gallery-item::after { display: none; top: -6px; right: -18px; transform: rotate(38deg); width: 62px; }
.field-notebook .gallery-item:nth-child(3n + 2)::before { left: -14px; transform: rotate(-36deg); width: 62px; top: -4px; }
.field-notebook .gallery-item:nth-child(3n + 2)::after { display: block; }
.field-notebook .gallery-item:nth-child(4n)::before { transform: rotate(3deg); }
.field-notebook .gallery-item img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 1px;
  background: #e9e1cf;
  transform: none !important;
}
.field-notebook .gallery-overlay {
  position: static;
  display: block;
  height: 52px;
  padding: 0;
  opacity: 1;
  background: none !important;
}
.field-notebook .gallery-overlay > div { padding: 11px 4px 0 !important; text-align: left !important; }
.field-notebook .gallery-overlay h3 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  opacity: 1;
  transform: rotate(-0.8deg);
  color: #2e2922;
  font-family: var(--display) !important;
  font-weight: 700;
  font-size: 1.3rem;
  line-height: 1.05;
  letter-spacing: 0.02em;
  text-transform: none;
  text-shadow: none;
}
.field-notebook .gallery-item:hover,
.field-notebook .gallery-item:focus-within {
  z-index: 3;
  transform: translateY(-8px) rotate(0deg) scale(1.025);
  box-shadow: 0 2px 2px rgba(31, 27, 23, 0.08), 0 28px 38px -18px rgba(31, 27, 23, 0.6);
}
@media (max-width: 640px) {
  .field-notebook .gallery-overlay h3 { font-size: 1.2rem; }
  .field-notebook .gallery-item::after { right: -6px; }
  .field-notebook .gallery-item:nth-child(3n + 2)::before { left: -6px; }
}
@media (prefers-reduced-motion: reduce) {
  .field-notebook .gallery-item { transition: none; }
  .field-notebook .gallery-item:hover,
  .field-notebook .gallery-item:focus-within { transform: translateY(var(--drop)) rotate(var(--tilt)); }
}

/* ---------- Print: the notebook stays on paper, the weather stays off ---------- */
@media print {
  .wx-sky, .wx-ground, .soil, #header::before { display: none !important; }
  footer.bg-gray-900 { padding-top: 2rem !important; }
  .field-notebook .gallery-item { transform: none; box-shadow: none; border: 1px solid #ccc; }
}

/* ==========================================================================
   ROUND 3 · "One walk through the yard" (2026-09-23)
   Home reads: hero, services, season ring, proof, walk your yard -> tell us
   about it (one request, optional price check beside it), reviews + field
   notes, area + FAQ. Existing copy and every form field/ID are unchanged.
   ========================================================================== */
.step-no {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  margin-right: 10px;
  border-radius: 50%;
  background: var(--clay-deep);
  color: #fff;
  font-size: 0.85rem;
  letter-spacing: 0;
  vertical-align: middle;
  transform: rotate(-6deg);
}
.walk-yard .ring-label,
.quote-head .ring-label { display: inline-flex; align-items: center; }

/* ---------- Services: tighter on desktop, compact tiles on phones ---------- */
.services-chapter { padding-block: clamp(48px, 6vw, 80px) !important; }
.services-chapter > .container > .text-center { margin-bottom: clamp(24px, 4vw, 40px) !important; }
.service-icon { display: none; }
@media (min-width: 768px) {
  .services-chapter .service-card > .h-48 { height: 10.5rem; }
  .services-chapter .service-card > .p-6 { padding: 20px 22px 22px; }
  .services-chapter .service-card ul { margin-bottom: 12px; }
  .services-chapter .service-card ul > li + li { margin-top: 4px; }
}
@media (max-width: 767px) {
  .services-chapter .grid.md\:grid-cols-3 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .services-chapter .service-card { position: relative; border-radius: 14px !important; }
  .services-chapter .service-card:hover { transform: none !important; }
  .services-chapter .service-card > .h-48 { display: none; }
  .services-chapter .service-card > .p-6 { padding: 16px 14px 14px; }
  .services-chapter .service-card > .p-6::before { display: none; }
  .services-chapter .service-icon {
    display: inline-grid;
    place-items: center;
    width: 40px;
    height: 40px;
    margin-bottom: 8px;
    border-radius: 50%;
    background: var(--limestone);
    box-shadow: inset 0 0 0 2px rgba(47, 111, 79, 0.25);
    color: var(--leaf);
    font-size: 1.1rem;
  }
  .services-chapter .service-card h3 { font-size: 1.55rem !important; margin-bottom: 2px !important; line-height: 1 !important; }
  .services-chapter .service-card ul { margin: 0 0 8px !important; }
  .services-chapter .service-card ul > li:not(:first-child) { display: none; }
  .services-chapter .service-card ul > li { font-size: 0.9rem; line-height: 1.3; }
  .services-chapter .service-card ul > li .icon { display: none; }
  .services-chapter .service-card a { font-size: 0.9rem; }
  .services-chapter .mt-12.bg-green-600 { margin-top: 20px; padding: 16px 12px; }
  .services-chapter .mt-12.bg-green-600 h3 { font-size: 1.25rem !important; margin-bottom: 10px !important; }
  .services-chapter .mt-12.bg-green-600 .gap-4 { gap: 8px; }
  .services-chapter .mt-12.bg-green-600 a { padding: 10px 12px; font-size: 0.9rem; }
}
.services-chapter .service-card a:focus-visible { outline: 3px solid var(--canopy); outline-offset: 3px; border-radius: 4px; }

/* ---------- Proof chapter ---------- */
.proof-chapter { padding: clamp(48px, 7vw, 96px) 0; background: var(--limestone); }
.proof-head { max-width: 720px; margin: 0 auto clamp(24px, 3vw, 36px); text-align: center; }
.proof-head .ring-label { color: var(--clay-deep); font-size: 0.85rem; }
.proof-head h2 { margin-top: 6px; color: var(--canopy); }
.proof-head p:last-child { margin-top: 10px; color: var(--ink-soft); font-size: 1.1rem; }
.proof-grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); gap: clamp(20px, 3vw, 36px); align-items: start; }
@media (max-width: 1023px) { .proof-grid { grid-template-columns: minmax(0, 1fr); } }
.proof-compare-inner .before-after-container { max-width: none; margin-bottom: 12px !important; }
.proof-compare-inner .before-after-story { margin: 8px 0 0; text-align: left; color: var(--ink-soft); }
.proof-compare-inner #homepageComparisonInstructions { margin-top: 4px; text-align: left; }
.proof-videos {
  padding: clamp(16px, 2vw, 24px);
  border-radius: 18px;
  background: var(--canopy-deep);
  background-image: var(--grain);
  color: var(--limestone);
  box-shadow: 0 24px 40px -26px rgba(12, 42, 32, 0.8);
}
.strip-head { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; }
.strip-head h3 { flex: 1 1 auto; margin: 0; font-family: var(--display) !important; font-weight: 800; font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1; text-transform: uppercase; }
.proof-videos .strip-head h3 { color: #fff; }
.filmstrip .strip-head h3 { color: var(--canopy); }
.strip-sub { margin: 6px 0 0; font-size: 0.92rem; color: rgba(245, 242, 233, 0.84); }
.strip-count { margin: 0; font-family: var(--stencil); font-weight: 700; font-size: 0.85rem; letter-spacing: 0.14em; color: var(--clay-deep); min-width: 5ch; text-align: right; }
.proof-videos .strip-count { color: var(--fresh); }
.strip-nav { display: flex; gap: 8px; }
html:not(.js-rings) .strip-nav,
html:not(.js-rings) .strip-count,
[data-strip].is-static .strip-nav,
[data-strip].is-static .strip-count { display: none; }
.strip-btn {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid var(--canopy);
  background: #fff;
  color: var(--canopy);
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}
.strip-btn:hover { background: var(--canopy); color: #fff; }
.strip-btn:focus-visible { outline: 3px solid var(--clay); outline-offset: 3px; }
.strip-btn[aria-disabled="true"] { opacity: 0.45; cursor: default; background: #fff; color: var(--canopy); }
.proof-videos .strip-btn { border-color: rgba(245, 242, 233, 0.7); background: transparent; color: #fff; }
.proof-videos .strip-btn:hover { background: rgba(245, 242, 233, 0.16); }
.proof-videos .strip-btn[aria-disabled="true"] { background: transparent; color: #fff; }
.strip-flip { transform: scaleX(-1); }
.strip-track {
  display: flex;
  gap: 16px;
  margin-top: 12px;
  padding: 14px 4px 16px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 4px;
  scrollbar-width: thin;
  scrollbar-color: var(--moss) transparent;
}
.strip-track:focus-visible { outline: 3px solid var(--clay); outline-offset: 2px; border-radius: 10px; }
.video-strip { margin-top: 8px; padding-bottom: 12px; }
.video-strip .video-card { flex: 0 0 min(82%, 300px); scroll-snap-align: start; }
@media (min-width: 1024px) { .video-strip .video-card { flex-basis: calc(50% - 8px); } }
.video-strip .video-wrapper { border-radius: 12px; }
.strip-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--fresh); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.strip-link:hover { color: #fff; }
.filmstrip { margin-top: clamp(28px, 4vw, 44px); }
.filmstrip-track { padding-top: 22px; }
#latest-uploads-carousel,
#latest-uploads-track { display: contents !important; }
.filmstrip-track .print {
  --tilt: -1deg;
  position: relative;
  flex: 0 0 clamp(216px, 64vw, 250px);
  aspect-ratio: auto;
  margin: 0;
  padding: 9px 9px 0;
  border-radius: 2px;
  background: #fffdf8;
  box-shadow: 0 1px 1px rgba(31, 27, 23, 0.1), 0 12px 20px -14px rgba(31, 27, 23, 0.55);
  scroll-snap-align: start;
  transform: rotate(var(--tilt));
  overflow: visible;
}
.filmstrip-track > .print:nth-of-type(2n) { --tilt: 1deg; }
.filmstrip-track #latest-uploads-track > .print:nth-child(2n + 1) { --tilt: 1deg; }
.filmstrip-track #latest-uploads-track > .print:nth-child(2n) { --tilt: -1deg; }
.filmstrip-track .print::before {
  content: "";
  position: absolute;
  z-index: 2;
  top: -10px;
  left: calc(50% - 34px);
  width: 68px;
  height: 20px;
  background: var(--tape);
  background-image: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.2) 0 2px, transparent 2px 7px);
  clip-path: polygon(2% 0, 98% 6%, 100% 50%, 97% 100%, 1% 94%, 0 45%);
  transform: rotate(-3deg);
  pointer-events: none;
}
.filmstrip-track .print img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; background: #e9e1cf; }
.filmstrip-track .print figcaption { height: 56px; padding: 8px 2px 0; overflow: hidden; }
.filmstrip-track .print figcaption span { display: block; font-family: var(--display); font-weight: 700; font-size: 1.18rem; line-height: 1.05; color: #2e2922; }
.filmstrip-track .print figcaption small { display: block; margin-top: 2px; font-size: 0.78rem; color: var(--ink-soft); }
#latest-uploads-empty { flex: 0 0 auto; align-self: center; margin: 0 12px; }
.proof-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 14px; margin-top: 14px; }
.proof-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 10px 22px;
  border-radius: 999px;
  background: var(--canopy);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
}
.proof-link:hover { background: var(--leaf); }
.proof-link--fb { background: #1f55c4; }
.proof-link--fb:hover { background: #17449f; }
.proof-link:focus-visible { outline: 3px solid var(--clay); outline-offset: 3px; }

/* ---------- Walk your yard -> Tell us about it ---------- */
.walk-yard { position: relative; }
.walk-yard::after {
  content: "";
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: -22px;
  width: 44px;
  height: 44px;
  margin-left: -22px;
  border-radius: 50%;
  background: var(--clay) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 4v14m-6-6 6 6 6-6' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 22px no-repeat;
  box-shadow: 0 0 0 6px var(--sapwood-2);
  pointer-events: none;
}
@media (max-width: 767px) {
  .walk-yard { padding: 52px 0 56px; }
  .yard-option { min-height: 44px; margin-bottom: 6px; padding: 7px 12px; }
  .year-yard { padding: 52px 0; }
}
.site-contact-quote.quote-chapter {
  position: relative;
  background:
    radial-gradient(ellipse 60% 45% at 100% 100%, rgba(194, 100, 53, 0.3), transparent 70%),
    linear-gradient(160deg, #153b2f 0%, #1c4a35 60%, #173f2f 100%) !important;
}
.quote-head { max-width: 760px; margin: 0 auto clamp(20px, 3vw, 32px); text-align: center; }
.quote-head .ring-label { color: var(--fresh); font-size: 0.85rem; }
.quote-head h2 { margin-top: 6px; color: #fff; }
.quote-head p:last-child { margin-top: 10px; color: rgba(245, 242, 233, 0.88); font-size: 1.05rem; }
.quote-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(18px, 3vw, 32px); align-items: start; max-width: 1180px; margin: 0 auto; }
@media (max-width: 1023px) { .quote-grid { grid-template-columns: minmax(0, 1fr); } }
.quote-main > .bg-white { border-radius: 18px !important; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.7); }
.quote-side { display: grid; gap: 18px; }
.quote-contact { padding: 18px 18px 14px; border-radius: 16px; background: rgba(245, 242, 233, 0.08); border: 1px solid rgba(245, 242, 233, 0.2); }
.site-contact-quote .quote-contact h3 { margin: 0; font-family: var(--display) !important; font-weight: 800; font-size: 1.5rem; text-transform: uppercase; color: #fff; }
.quote-contact ul { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 16px; margin: 10px 0 0; padding: 0; list-style: none; }
.quote-contact li { display: flex; gap: 10px; align-items: flex-start; min-width: 0; padding: 4px 0; }
.quote-contact .quote-contact-wide { grid-column: 1 / -1; }
.quote-contact a { display: flex; gap: 10px; align-items: flex-start; min-height: 44px; min-width: 0; color: inherit; text-decoration: none; }
.quote-contact a:hover strong,
.quote-contact a:focus-visible strong { text-decoration: underline; text-underline-offset: 3px; }
.quote-contact a:focus-visible { outline: 3px solid var(--fresh); outline-offset: 3px; border-radius: 6px; }
.quote-contact .icon { flex: 0 0 18px; margin-top: 4px; color: var(--fresh); }
.quote-contact li > span,
.quote-contact a > span { display: block; min-width: 0; }
.quote-contact small { display: block; font-family: var(--stencil); font-weight: 700; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fresh); }
.quote-contact strong,
.quote-contact li > span > span { display: block; color: #fff; font-weight: 600; font-size: 0.95rem; overflow-wrap: anywhere; }
.quote-contact strong { font-weight: 800; }
@media (max-width: 420px) { .quote-contact ul { grid-template-columns: 1fr; } }
.price-check {
  position: relative;
  padding: 24px 20px 20px;
  border-radius: 16px;
  border: 2px dashed rgba(107, 74, 51, 0.5);
  background: var(--sapwood-2);
  background-image: linear-gradient(rgba(40, 111, 159, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(40, 111, 159, 0.06) 1px, transparent 1px);
  background-size: 22px 22px;
  color: var(--ink);
}
.price-check-tag { position: absolute; top: -13px; right: 18px; margin: 0; padding: 4px 10px; border-radius: 4px; background: var(--clay-deep); color: #fff; font-size: 0.74rem; transform: rotate(3deg); }
.site-contact-quote .price-check h3 { margin: 0; font-family: var(--display) !important; font-weight: 800; font-size: clamp(1.5rem, 2.4vw, 1.9rem); line-height: 1; text-transform: uppercase; color: var(--canopy) !important; }
.price-check-sub { margin: 8px 0 12px; color: var(--ink-soft); font-size: 0.92rem; }
.price-check .instant-card .flex.flex-wrap { justify-content: flex-start !important; gap: 6px 16px !important; margin-bottom: 14px !important; font-size: 0.85rem; }
.price-check label.text-gray-700,
.price-check .text-gray-700 { color: #3d362e !important; }
.price-check .instant-card details { background: #fffdf8; }
.price-check #sendInstantRequestBtn { background: transparent !important; color: var(--canopy) !important; border: 2px solid var(--canopy); }
.price-check #sendInstantRequestBtn:hover { background: rgba(21, 59, 47, 0.08) !important; }
.price-check #quoteResult { margin-top: 16px; padding: 18px; }
.pricing-note { padding: 4px 0 4px 16px; border-left: 4px solid var(--fresh); }
.site-contact-quote .pricing-note h2 { margin: 0; font-size: 1.45rem !important; line-height: 1.05 !important; text-transform: uppercase; color: #fff; }
.pricing-note p { margin: 6px 0 0; color: rgba(245, 242, 233, 0.88); font-size: 0.92rem; }
.pricing-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--fresh); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.pricing-link:hover { color: #fff; }
.pricing-link:focus-visible { outline: 3px solid var(--fresh); outline-offset: 3px; border-radius: 4px; }

/* ---------- Reviews, then the crew's field notes ---------- */
@media (max-width: 767px) {
  #testimonials { padding-block: 48px !important; }
  #testimonials .testimonial-spotlight { padding: 22px !important; }
  #testimonials blockquote { font-size: 1.3rem !important; margin-bottom: 20px !important; }
  #testimonials .max-w-3xl p { margin-bottom: 24px !important; }
  #testimonials .expectation-card { padding: 20px !important; }
}
.field-notes { padding: clamp(48px, 7vw, 96px) 0; background: var(--limestone); }
.notes-page {
  position: relative;
  max-width: 1080px;
  margin: 0 auto;
  padding: clamp(28px, 4vw, 48px) clamp(18px, 4vw, 52px) clamp(24px, 4vw, 40px) clamp(40px, 7vw, 92px);
  border-radius: 6px;
  background-color: var(--paper);
  background-image: linear-gradient(rgba(40, 111, 159, 0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(40, 111, 159, 0.07) 1px, transparent 1px);
  background-size: 24px 24px;
  box-shadow: 0 1px 0 rgba(107, 74, 51, 0.14), 0 26px 44px -30px rgba(12, 42, 32, 0.55);
}
.notes-page::before { content: ""; position: absolute; top: 0; bottom: 0; left: clamp(24px, 4.6vw, 64px); width: 2px; background: rgba(194, 100, 53, 0.5); }
.notes-page::after {
  content: "";
  position: absolute;
  top: -11px;
  left: calc(50% - 46px);
  width: 92px;
  height: 22px;
  background: var(--tape);
  background-image: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.18) 0 2px, transparent 2px 7px);
  clip-path: polygon(2% 0, 98% 6%, 100% 50%, 97% 100%, 1% 94%, 0 45%);
  transform: rotate(2deg);
}
.notes-head { margin-bottom: clamp(16px, 2.4vw, 26px); }
.notes-head .ring-label { color: var(--clay-deep); font-size: 0.85rem; }
.notes-head h2 { margin-top: 6px; color: var(--canopy); }
.notes-head p:last-child { margin-top: 8px; color: var(--ink-soft); max-width: 56ch; }
.notes-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px clamp(24px, 4vw, 56px); }
@media (max-width: 767px) { .notes-cols { grid-template-columns: minmax(0, 1fr); } }
.notes-values,
.notes-steps ol { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.notes-values li { display: flex; gap: 12px; align-items: flex-start; }
.notes-values .icon { flex: 0 0 22px; margin-top: 4px; color: var(--leaf); font-size: 1.05rem; text-align: center; }
.notes-values p,
.notes-steps p { margin: 0; line-height: 1.5; color: var(--ink-soft); }
.notes-values strong,
.notes-steps strong { color: var(--ink); font-weight: 800; }
.notes-steps h3 { margin: 0 0 12px; font-family: var(--display) !important; font-weight: 800; font-size: 1.6rem; line-height: 1; text-transform: uppercase; color: var(--canopy); }
.notes-steps ol { counter-reset: note-step; }
.notes-steps li { display: flex; gap: 12px; align-items: flex-start; counter-increment: note-step; }
.notes-steps li::before {
  content: counter(note-step);
  flex: 0 0 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 2px solid var(--clay);
  border-radius: 50%;
  color: var(--clay-deep);
  font-family: var(--stencil);
  font-weight: 700;
  transform: rotate(-5deg);
}

/* ---------- Area + FAQ share one chapter ---------- */
.area-faq { background: #fff; }
.area-faq > section { background: transparent !important; }
.area-faq iframe { height: 15rem; }
.area-faq #service-area .bg-gray-100 { padding: 12px !important; }
@media (max-width: 1023px) {
  .area-faq > section { padding-block: 48px !important; }
  .area-faq #faq { padding-top: 8px !important; }
  #service-area h2, #faq h2 { margin-bottom: 24px !important; }
}
@media (min-width: 1024px) {
  .area-faq {
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
    column-gap: 48px;
    padding: clamp(56px, 6vw, 88px) max(16px, calc((100% - 1248px) / 2));
  }
  .area-faq > section { padding: 0 !important; }
  .area-faq > section > .container { max-width: none; padding: 0; margin: 0; }
  #service-area h2, #faq h2 { text-align: left !important; margin-bottom: 24px !important; }
  #service-area .grid.md\:grid-cols-2 { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  #faq .faq-list { max-width: none; }
}

@media print {
  .strip-nav, .strip-count, .walk-yard::after { display: none !important; }
  .strip-track { overflow: visible; flex-wrap: wrap; }
}

/* ---------- Round 3 · overrides of older ID-level rules in custom.css ---------- */
.site-contact-quote #instant-quote.price-check {
  background-color: var(--sapwood-2) !important;
  background-image: linear-gradient(rgba(40, 111, 159, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(40, 111, 159, 0.06) 1px, transparent 1px) !important;
  background-size: 22px 22px !important;
}
.site-contact-quote .price-check .instant-card { padding: 0; background: transparent !important; border: 0 !important; box-shadow: none !important; }
.site-contact-quote #pricing.pricing-note { background: transparent !important; color: #fff; }
.site-contact-quote #pricing.pricing-note h2 { color: #fff !important; }
.site-contact-quote #pricing.pricing-note p { color: rgba(245, 242, 233, 0.88) !important; }
.area-faq > #service-area,
.area-faq > #faq { background: transparent !important; }

/* The optional price check folds on phones (JS closes it; open without JS and on desktop). */
.price-check-fold > summary { display: block; list-style: none; cursor: pointer; }
.price-check-fold > summary::-webkit-details-marker { display: none; }
.price-check-fold > summary h3 { display: flex; align-items: center; gap: 12px; justify-content: space-between; }
.price-check-fold > summary h3::after {
  content: "+";
  flex: 0 0 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 2px solid var(--canopy);
  font-family: var(--body);
  font-size: 1.3rem;
  line-height: 1;
}
.price-check-fold[open] > summary h3::after { content: "\2212"; }
.price-check-fold > summary:focus-visible { outline: 3px solid var(--clay); outline-offset: 4px; border-radius: 6px; }

/* Proof: slider and video tours share the row evenly. */
@media (min-width: 1024px) {
  .proof-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .video-strip .video-card { flex-basis: 78%; }
}

/* Desktop: tighter chapter rhythm. */
@media (min-width: 1024px) {
  .proof-chapter,
  .field-notes { padding-block: 64px; }
  .walk-yard,
  .year-yard { padding-block: 80px; }
  .area-faq { padding-block: 64px; }
  .services-chapter .service-card > .h-48 { height: 9.25rem; }
}

/* Phones: the duplicate "Ready for your quote?" card sits right after the quote chapter; hide it there. */
@media (max-width: 767px) {
  #testimonials .space-y-6 > article.bg-green-50 { display: none; }
}

/* Phones: footer columns pair up (links beside areas, contact full width). */
@media (max-width: 767px) {
  footer.bg-gray-900 .grid.lg\:grid-cols-4 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px 18px; margin-bottom: 28px; }
  footer.bg-gray-900 .grid.lg\:grid-cols-4 > :nth-child(1) { grid-column: 1 / -1; }
  footer.bg-gray-900 .grid.lg\:grid-cols-4 > :nth-child(2) { grid-column: 1; grid-row: 2; }
  footer.bg-gray-900 .grid.lg\:grid-cols-4 > :nth-child(4) { grid-column: 2; grid-row: 2; }
  footer.bg-gray-900 .grid.lg\:grid-cols-4 > :nth-child(3) { grid-column: 1 / -1; grid-row: 3; }
  footer.bg-gray-900 .grid.lg\:grid-cols-4 h3 { margin-bottom: 14px !important; }
  footer.bg-gray-900 .grid.lg\:grid-cols-4 > :nth-child(1) img { height: 3rem; margin-bottom: 8px; }
  footer.bg-gray-900 .border-t.pt-8 { padding-top: 20px; margin-top: 0; }
}

/* Round 3 · height trims (measured against the 13,000 / 9,500px targets). */
@media (max-width: 767px) {
  .area-faq #service-area .grid.grid-cols-2 { grid-template-columns: 1fr 1fr; }
  .area-faq iframe { height: 12rem; }
}
@media (max-width: 360px) { .quote-contact ul { grid-template-columns: 1fr; } }
@media (min-width: 421px) and (max-width: 1023px) { .quote-contact ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 361px) and (max-width: 420px) { .quote-contact ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) {
  .price-check #quoteForm > .space-y-4 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 14px; row-gap: 14px; }
  .price-check #quoteForm > .space-y-4 > * { grid-column: 1 / -1; margin-top: 0 !important; }
  .price-check #quoteForm > .space-y-4 > .pc-half { grid-column: auto; }
  .site-contact-quote.quote-chapter { padding-block: 56px; }
  #testimonials { padding-block: 56px !important; }
  .field-notes { padding-block: 56px; }
  .services-chapter .mt-12.bg-green-600 { margin-top: 28px; }
}
.site-contact-quote #pricing.pricing-note { padding: 4px 0 4px 16px !important; margin: 0; }
.quote-contact a[href^='mailto:'] strong { font-size: clamp(0.7rem, 3.2vw, 0.86rem); }
.quote-contact li > span > [data-i18n-key^='quote.hours'] { white-space: nowrap; }
@media (max-width: 420px) {
  .quote-contact li:nth-child(4),
  .quote-contact li:nth-child(5) { grid-column: 1 / -1; }
}
.price-check-fold:not([open]) > summary h3 { margin: 0; }
@media (min-width: 1024px) {
  .walk-yard-intro { margin-bottom: 20px !important; }
  .yard-option { min-height: 44px; margin-bottom: 6px; padding: 8px 14px; }
  .area-faq iframe { height: 13rem; }
  #testimonials .max-w-3xl p { margin-bottom: 32px !important; }
}
/* Refine: the footer email wraps inside its column (it ran into the next column at 1024). */
footer.bg-gray-900 li > a[href^="mailto:"] { min-width: 0; overflow-wrap: anywhere; }

/* ==========================================================================
   ROUND 4 · Hero: one clear ask, a visible crew (research 03 R2/R6/R9, 05 X4)
   - Primary "Get a free quote" -> #quote; "Call (815) 501-1478" on every width.
   - The price check and the storm notice are text links under the calls; the
     full storm strip returns only in storm mode (body.storm-on).
   - H1 capped (64-68px desktop, balanced lines) so the calls clear 768px.
   - The photo shows: a scrim sized to the text column instead of a full-bleed
     86-94% overlay; on phones the crew photo is a clear band above the H1.
   ========================================================================== */
.site-hero .site-hero-overlay {
  background:
    linear-gradient(180deg, rgba(12, 42, 32, 0) 58%, rgba(12, 42, 32, 0.8) 100%),
    linear-gradient(90deg, rgba(12, 42, 32, 0.92) 0%, rgba(12, 42, 32, 0.88) 46%, rgba(12, 42, 32, 0.72) 58%, rgba(12, 42, 32, 0.12) 72%, rgba(12, 42, 32, 0) 80%) !important;
}
.hero-heading {
  font-size: clamp(2.75rem, 1.6rem + 3.4vw, 4.25rem) !important;
  text-wrap: balance;
}
.hero-heading .block { text-wrap: balance; }
.site-hero .emergency-strip { display: none !important; }
body.storm-on .site-hero .emergency-strip { display: flex !important; }
body.storm-on .hero-storm-link { display: none !important; }
.hero-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 1.75rem;
  margin: 0.75rem 0 0;
}
.hero-links a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  color: #f3f7ea;
  font-weight: 600;
  font-size: 1.02rem;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}
.hero-links a:hover { color: #fff; text-decoration-thickness: 2px; }
.hero-links .icon { color: var(--fresh); font-size: 0.95em; }
.hero-links .hero-storm-link .icon:first-child { color: #f0a36b; }
.hero-links .hero-link-arrow { font-size: 0.75em; color: inherit; opacity: 0.8; }
.site-hero .secondary-cta { display: flex !important; }
.secondary-cta span { white-space: nowrap; }
/* Desktop header: the number, readable, beside the language switch. */
.header-tel {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 44px;
  padding: 0 0.25rem;
  color: var(--canopy);
  font-weight: 700;
  font-size: 0.95rem;
  white-space: nowrap;
}
.header-tel .icon { color: var(--leaf); }
.site-header .desktop-nav > a { white-space: nowrap; }
/* Spanish nav labels run ~110px longer: drop the tagline and tighten the gaps so the
   number still fits on one header row. */
html[lang="es"] .site-header nav > div:first-child p + p { display: none !important; }
html[lang="es"] .site-header .desktop-nav.space-x-4 > :not([hidden]) ~ :not([hidden]) { margin-left: 0.55rem; }
.header-tel:hover { color: var(--leaf); text-decoration: underline; text-underline-offset: 0.2em; }
@media (max-width: 1279px) {
  /* 1024-1279: the full nav leaves no room for the digits; the icon stays a 44px call
     target (named with the number) and the hero shows the number right below. */
  .header-tel { justify-content: center; min-width: 44px; }
  .site-header .desktop-nav.space-x-4 > :not([hidden]) ~ :not([hidden]) { margin-left: 0.55rem; }
  .site-header .desktop-nav .mx-2 { margin-inline: 0.25rem; }
  /* The tagline returns at 1280+; here the nav needs its width (Spanish labels run longer). */
  .site-header nav > div:first-child p + p { display: none !important; }
  .header-tel span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (min-width: 641px) and (max-width: 1023px) {
  /* Tablet: the text runs wider than the photo's calm side, so the scrim does too. */
  .site-hero .site-hero-overlay {
    background:
      linear-gradient(180deg, rgba(12, 42, 32, 0) 55%, rgba(12, 42, 32, 0.8) 100%),
      linear-gradient(90deg, rgba(12, 42, 32, 0.92) 0%, rgba(12, 42, 32, 0.86) 70%, rgba(12, 42, 32, 0.74) 100%) !important;
  }
}
@media (max-width: 640px) {
  /* Phones: the crew photo is a clear band under the header; the text starts
     below it on a floor fade that becomes solid behind the H1. */
  .site-hero { padding-top: calc(4.75rem + var(--hero-window)) !important; --hero-window: clamp(140px, 26vh, 240px); }
  .site-hero > .absolute.inset-0 { top: 4.75rem; bottom: auto; height: calc(var(--hero-window) + 190px); }
  .site-hero > .absolute img { object-position: 50% 12%; }
  .site-hero .site-hero-overlay {
    background: linear-gradient(180deg, rgba(16, 32, 25, 0) 0%, rgba(16, 32, 25, 0) 50%, rgba(16, 32, 25, 0.72) 66%, rgba(16, 32, 25, 0.96) 82%, #102019 100%) !important;
  }
  .hero-eyebrow { margin-bottom: 0.85rem !important; }
  .hero-heading { font-size: clamp(2.2rem, 10.5vw, 2.75rem) !important; max-width: none; }
  .hero-links { gap: 0 1.25rem; margin-top: 0.5rem; }
  .hero-links a { font-size: 0.95rem; }
}

/* ---------- Round 4 · Trust chips: plain facts, one real link (research 03 R7) ---------- */
.hero-trust-grid .trust-chip-link { min-height: 44px; }
.hero-trust-grid .trust-chip-link span { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
@media (max-width: 640px) {
  .hero-trust-grid .trust-chip-wide,
  .hero-trust-grid .trust-chip-link { grid-column: 1 / -1; }
}

/* ==========================================================================
   ROUND 4 · Phone length and legibility (research 03 R13/R17/R20/R22, 05 X11)
   ========================================================================== */
/* One focus token everywhere: a 3px canopy ring with a white halo, so it reads on
   the light limestone sections and the dark canopy/hero ones alike. */
/* (The repeated pseudo-class only lifts specificity over older !important button shadows.) */
:root { --focus-ink: #0c2a20; --focus-halo: #ffffff; }
html :focus-visible:focus-visible:focus-visible {
  outline: 3px solid var(--focus-ink) !important;
  outline-offset: 0 !important;
  box-shadow: 0 0 0 6px var(--focus-halo) !important;
}
/* Inside clipped cards the same pair is drawn inward. */
html .faq-item summary:focus-visible:focus-visible:focus-visible,
html .strip-track:focus-visible:focus-visible:focus-visible {
  outline-offset: -5px !important;
  box-shadow: inset 0 0 0 2px var(--focus-halo) !important;
}

/* Stencil caps labels: 14px minimum (they were 11.5-13.6px). */
.ring-label,
.year-yard .ring-label,
.strip-count,
.yard-count,
.price-check-tag,
.when-kicker,
.notebook-label,
.quote-contact small,
.season-ring-center span { font-size: max(0.875rem, 1em) !important; }
.ring-label .step-no { font-size: 0.875rem !important; }
.site-header nav > div:first-child p:first-child + p { font-size: 0.875rem; letter-spacing: 0.06em; }
.yard-plan text { font-size: 16px; }
.yard-plan .compass { font-size: 16px; }
/* "Every ring, a season": white on clay was 4.06:1; clay-deep gives 6.2:1. */
.hero-ring-tag { background: var(--clay-deep); font-size: 0.875rem; }

/* The tape measure is a desktop flourish at the top edge of the header, never
   stacked on the season stripe; phones and tablets go without it. */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    #header.site-header::before { top: 0; height: 8px; }
  }
}
@media (max-width: 1023px) {
  #header::before { content: none !important; display: none !important; }
}

@media (max-width: 639px) {
  /* The 12-month ring becomes a month stepper plus the season panel. The same
     radiogroup drives the desktop ring; here the prev/next buttons step it and
     the month/season read out between them. SEASONS content is unchanged. */
  .year-yard-grid { display: flex; flex-direction: column; gap: 0; }
  .year-yard-intro { display: contents; }
  .year-yard-intro > .ring-label { order: 1; }
  .year-yard-intro > h2 { order: 2; }
  .year-yard-intro > p:not(.ring-label) { order: 3; }
  .season-ring { order: 4; }
  .year-yard-intro > .season-panels { order: 5; }
  .year-yard-intro > p.mt-4 { order: 6; }
  .js-rings .season-ring {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) 48px;
    align-items: center;
    gap: 10px;
    width: 100%;
    aspect-ratio: auto;
    margin: 22px 0 0;
    padding: 8px;
    border-radius: 16px;
    background: rgba(245, 242, 233, 0.08);
    border: 1px solid rgba(245, 242, 233, 0.22);
  }
  .js-rings .season-ring-disc,
  .js-rings .season-months { display: none; }
  .js-rings .season-ring-center {
    position: static;
    grid-column: 2;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 12px;
    padding: 8px 6px;
    background: var(--sapwood);
    box-shadow: none;
  }
  .js-rings .season-ring-center strong { font-size: 1.7rem; }
  .js-rings .season-ring-center span { margin-top: 2px; }
  .js-rings .season-nav { display: contents; }
  .js-rings .season-nav button:first-child { grid-column: 1; grid-row: 1; }
  .js-rings .season-nav button:last-child { grid-column: 3; grid-row: 1; }
  .js-rings .season-panels { margin-top: 14px; }
  html:not(.js-rings) .season-ring { display: none; }

  /* Walk your yard: the checklist leads; the plan follows as a simplified map
     (four large labels, >= 12px at 320px). */
  .walk-yard-grid { display: flex; flex-direction: column; gap: 20px; }
  .walk-yard-grid > .yard-plan { order: 2; }
  .yard-plan text { font-size: 27px; letter-spacing: 0.04em; }
  .yard-plan .compass,
  .yard-plan [data-zone="snow-removal"] text,
  .yard-plan [data-zone="landscaping"] text,
  .yard-plan [data-zone="leaf-removal"] text,
  .yard-plan [data-zone="pressure-washing"] text { display: none; }
}

/* ---------- Round 4 · Quote form friction (research 03 R10/R14/R21) ---------- */
.quote-field-label .field-tag,
label .field-tag { margin-left: 0.25rem; color: #4b5563; font-size: 0.82em; font-weight: 500; }
.field-error {
  display: flex;
  gap: 0.4rem;
  align-items: flex-start;
  margin: 0.35rem 0 0;
  color: #b42318;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.35;
}
.field-error::before { content: "!"; flex: 0 0 auto; display: inline-grid; place-items: center; width: 1.1rem; height: 1.1rem; border-radius: 50%; background: #b42318; color: #fff; font-size: 0.75rem; font-weight: 800; line-height: 1; margin-top: 0.1rem; }
.field-error[hidden] { display: none; }
#contactForm [aria-invalid="true"] { border-color: #b42318 !important; box-shadow: 0 0 0 1px #b42318; }
.town-start { margin: 0; padding: 0; border: 0; min-width: 0; }
.town-start[hidden] { display: none; }
.town-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.4rem; }
.town-chip {
  min-height: 44px;
  padding: 0.45rem 0.95rem;
  border: 1px solid rgba(21, 59, 47, 0.28);
  border-radius: 999px;
  background: #fff;
  color: var(--canopy);
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
}
.town-chip:hover { border-color: var(--leaf); background: #f1f6ef; }
.town-chip[aria-pressed="true"] { background: var(--canopy); border-color: var(--canopy); color: #fff; }
.town-policy { margin: 0.6rem 0 0; padding: 0; list-style: none; color: #78350f; font-size: 0.9rem; }
.town-policy li { padding: 0.45rem 0.7rem; border-left: 4px solid #d97706; background: #fffbeb; border-radius: 0 6px 6px 0; }
.town-policy li + li { margin-top: 0.35rem; }
.town-policy li[hidden] { display: none; }
.sms-photos { margin: 0.4rem 0 0; color: #374151; font-size: 0.95rem; }
.sms-photos .icon { color: var(--leaf); margin-right: 0.25rem; }
.sms-photos a { color: var(--canopy); font-weight: 700; text-decoration: underline; text-underline-offset: 0.2em; white-space: nowrap; display: inline-block; min-height: 24px; }
@media (max-width: 767px) {
  /* The mobile call bar (86px incl. its gap) never covers "Send Quote Request" or a
     focused field (WCAG 2.4.11). */
  .site-contact-quote.quote-chapter { padding-bottom: calc(6rem + env(safe-area-inset-bottom)) !important; }
  html { scroll-padding-bottom: calc(86px + env(safe-area-inset-bottom)); }
}

/* ---------- Round 4 · One header, a visible language link (research 03 R5, 05 X7/X11/X13) ---------- */
.lang-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  min-height: 44px;
  min-width: 44px;
  padding: 0 0.85rem;
  border: 1px solid rgba(21, 59, 47, 0.32);
  border-radius: 999px;
  background: #fff;
  color: var(--canopy);
  font-weight: 700;
  font-size: 0.9rem;
  white-space: nowrap;
}
.lang-link:hover { background: #f1f6ef; border-color: var(--leaf); }
.lang-hint { font-weight: 500; color: #4b5563; }
#mobileMenuButton { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
@media (max-width: 639px) {
  .lang-hint { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (max-width: 359px) {
  /* Logo, language link and menu keep their room on the smallest phones. */
  .site-header nav > div:first-child > div { display: none; }
}

/* ---------- Round 4 · Field map instead of the Maps iframe (research 03 R11, S40) ---------- */
.field-map-card { margin: 0; padding: 18px; border-radius: 16px; background: #f1ece0; box-shadow: 0 0 0 1px rgba(107, 74, 51, 0.18), 0 18px 34px -24px rgba(12, 42, 32, 0.5); }
.field-map { display: block; width: 100%; height: auto; border-radius: 12px; }
.field-map .fm-paper { fill: var(--paper, #fbf7ee); }
.field-map .fm-grid path { stroke: rgba(40, 111, 159, 0.12); stroke-width: 1; }
.field-map .fm-lines path { fill: none; stroke: var(--heartwood-2); stroke-width: 1.6; stroke-dasharray: 4 5; }
.field-map .fm-town circle { fill: #fff; stroke: var(--heartwood); stroke-width: 2.5; }
.field-map .fm-town.is-primary circle { fill: var(--leaf); stroke: var(--canopy); }
.field-map text { font-family: var(--display); font-weight: 800; font-size: 19px; fill: var(--canopy); letter-spacing: 0.02em; }
.field-map .fm-base circle { fill: var(--clay); stroke: #fff; stroke-width: 3; }
.field-map .fm-base .fm-core { fill: #fff; stroke: none; }
.field-map .fm-base text { font-size: 22px; fill: var(--clay-deep); }
.field-map .fm-compass path { fill: var(--sky); }
.field-map .fm-compass text { font-size: 16px; fill: var(--sky); }
.field-map-card figcaption { margin-top: 12px; color: var(--ink-soft); font-size: 0.95rem; }
.field-map-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0 0 6px; padding: 0; list-style: none; color: var(--ink); font-weight: 600; }
.field-map-legend li { display: inline-flex; align-items: center; gap: 8px; }
.fm-key { width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 2.5px solid var(--heartwood); }
.fm-key.is-primary { background: var(--leaf); border-color: var(--canopy); }
.field-map-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 4px; color: var(--canopy); font-weight: 700; text-decoration: underline; text-underline-offset: 0.2em; }
.field-map-link .icon { color: var(--clay); }
@media (min-width: 1024px) {
  /* Desktop: the sketch and its key sit side by side (shorter than the old iframe card). */
  .field-map-card { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 18px; align-items: center; }
  .field-map-card figcaption { margin-top: 0; }
  .field-map-legend { flex-direction: column; gap: 8px; margin-bottom: 10px; }
}
@media (max-width: 639px) {
  .field-map-card { padding: 12px; }
  .field-map-card figcaption { margin-top: 8px; font-size: 0.92rem; }
}

/* ---------- Round 4 · Video cards say what you get (research 03 R12) ---------- */
.video-meta { display: flex; align-items: center; gap: 4px; margin: 8px 2px 0; color: var(--ink-soft); font-size: 0.9rem; font-weight: 600; }
.video-meta time { font-variant-numeric: tabular-nums; color: var(--ink); }
.video-strip .video-meta { color: rgba(245, 242, 233, 0.86); }
.video-strip .video-meta time { color: #fff; }
/* /videos/: video.css sizes columns to keep native player controls usable. */
.video-grid { align-items: start; }
/* Home tours: portrait frames where there is room; phones keep the compact crop
   so the homepage stays inside its length budget. */
@media (min-width: 640px) {
  .video-strip .video-card.is-portrait { flex: 0 0 200px; }
  .video-strip .video-card.is-portrait .video-wrapper { padding-bottom: var(--ratio, 177.7778%); }
}
@media (max-width: 639px) {
  /* Phones: the running time rides on the card as a chip (no extra height). */
  .video-strip .video-card { position: relative; }
  .video-strip .video-card::after { display: none; }
  .video-strip .video-meta { position: absolute; top: 10px; right: 10px; z-index: 3; margin: 0; padding: 3px 9px; border-radius: 999px; background: rgba(12, 42, 32, 0.88); font-size: 0.8rem; pointer-events: none; }
}
/* The crew-cam cards are dark: the running time reads light on them everywhere. */
.video-card .video-meta { padding: 0 10px 8px; color: rgba(245, 242, 233, 0.88); }
.video-card .video-meta time { color: #fff; }
@media (max-width: 639px) {
  .video-strip .video-meta { padding: 3px 9px; }
}

/* ---------- Round 4 · Price check: the range first, contact only to send (research 03 R3) ---------- */
.price-check-step { margin: 6px 0 0 !important; padding-top: 14px; border-top: 1px dashed rgba(107, 74, 51, 0.35); color: var(--ink); font-weight: 700; }
#quoteForm .field-error { margin: 0; }
#quoteForm [aria-invalid="true"] { border-color: #b42318 !important; box-shadow: 0 0 0 1px #b42318; }

/* ---------- Round 5 · J1 · Without JavaScript: no dead controls, a call on every first screen ---------- */
.nojs-call { display: none; }
@media (scripting: none) {
  /* the menu, geolocation and price check need JS; the call bar is scripted */
  #mobileMenuButton, [data-geo-request], [data-geo-status], #quoteForm { display: none !important; }
  .nojs-call {
    display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px;
    border-radius: 999px; background: var(--leaf, #2f6f4f); color: #fff; font-weight: 700; font-size: 15px;
    text-decoration: none; white-space: nowrap;
  }
  .price-check-nojs { margin: 12px 0 0; font-weight: 600; line-height: 1.5; }
  .price-check-nojs a { text-decoration: underline; font-weight: 700; }
}
@media (scripting: none) and (min-width: 1024px) { .nojs-call { display: none; } }
/* J1: the failure actions (Call, Send a Text) stack as full-width 44 px buttons above Close */
#customModal .modal-content > a:not(.hidden) { display: flex; align-items: center; justify-content: center; min-height: 44px; width: 100%; }
#customModal .modal-content > button { min-height: 44px; }

/* ---------- Round 5 · F · Inline SVG icons (were two Font Awesome icon fonts) ----------
   Same box as the font glyph: 1em tall, the glyph's advance wide (width attribute,
   so utility widths such as w-6 still win), 0.125em below the baseline. */
.icon { display: inline-block; height: 1em; vertical-align: -0.125em; fill: currentColor; overflow: visible; }
.icon-spin { animation: icon-spin 2s linear infinite; }
@keyframes icon-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .icon-spin { animation: none; } }