/* Drainage, redesigned 2026-10-16 (main.v3[data-content="drainage"]). The first part is the shared service frame as the walls page uses it (landscape frame, hardscape and walls drawing styles), scoped to this page; the end of the file holds what is this page's own (inc/visuals-drainage.php). */ main.v3[data-content="drainage"]{--br-ink:#16130F;--br-cream:#F2EDE4;--br-gold:#D9B77E;--br-sage:#6F6D45} main.v3[data-content="drainage"] section[class*="br-"] .ic{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;display:block} main.v3[data-content="drainage"] .eyebrow{display:inline-flex;align-items:center;gap:14px;font-family:'Inter',sans-serif;font-size:11.5px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--bronze);margin-bottom:22px} main.v3[data-content="drainage"] .eyebrow::before{content:'';width:36px;height:1px;background:currentColor} main.v3[data-content="drainage"] :is(h1,h2,h3){text-wrap:balance} main.v3[data-content="drainage"] h2 em{font-style:normal;color:var(--bronze)} main.v3[data-content="drainage"] .br-head{margin-bottom:clamp(40px,4.6vw,64px)} main.v3[data-content="drainage"] .br-head .lead{margin-top:20px} main.v3[data-content="drainage"] .bg-ink{background:var(--br-ink)} main.v3[data-content="drainage"] .svc-hero.v21{min-height:94svh} main.v3[data-content="drainage"] .svc-hero h1{max-width:13ch} main.v3[data-content="drainage"] .svc-hero h1 em{display:block;font-style:normal;color:#F6BE54} main.v3[data-content="drainage"] .svc-hero .content{padding-bottom:72px} main.v3[data-content="drainage"] .br-hplan{position:absolute;z-index:3;right:max(var(--pad),calc((100vw - var(--w)) / 2 + var(--pad)));bottom:72px;width:320px;padding:26px 28px 24px;background:rgba(16,13,10,.58);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(217,183,126,.32);color:var(--br-cream)} main.v3[data-content="drainage"] .br-hplan .hp-k{margin:0 0 16px;font-family:'Inter',sans-serif;font-size:11px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--br-gold)} main.v3[data-content="drainage"] .br-hplan ol{list-style:none;margin:0;padding:0;position:relative} main.v3[data-content="drainage"] .br-hplan ol::before{content:'';position:absolute;left:14px;top:16px;bottom:16px;width:1px;background:linear-gradient(180deg,rgba(217,183,126,.7),rgba(217,183,126,.15))} main.v3[data-content="drainage"] .br-hplan li{position:relative;display:flex;align-items:center;gap:14px;padding:7px 0} main.v3[data-content="drainage"] .br-hplan .hp-n{position:relative;flex:0 0 29px;height:29px;display:grid;place-items:center;border-radius:50%;background:#16130F;border:1px solid rgba(217,183,126,.6);font-family:'Inter',sans-serif;font-size:10.5px;font-weight:600;letter-spacing:.06em;color:var(--br-gold)} main.v3[data-content="drainage"] .br-hplan .hp-t{font-family:'Outfit',sans-serif;font-size:17px;line-height:1.25;color:var(--br-cream)} main.v3[data-content="drainage"] .br-hplan .hp-go{display:inline-flex;gap:8px;margin-top:16px;padding-bottom:5px;border-bottom:1px solid var(--br-gold);font-family:'Inter',sans-serif;font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--br-cream);text-decoration:none} main.v3[data-content="drainage"] .br-cred{padding:0 !important;background:var(--br-ink);color:var(--br-cream);border-top:1px solid rgba(217,183,126,.25)} main.v3[data-content="drainage"] .bc-l{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr))} main.v3[data-content="drainage"] .bc-l li{display:flex;border-left:1px solid rgba(242,237,228,.12)} main.v3[data-content="drainage"] .bc-l li:first-child{border-left:0} main.v3[data-content="drainage"] .bc-i{flex:1;display:flex;align-items:center;gap:16px;padding:26px clamp(16px,2vw,28px);color:inherit;text-decoration:none;transition:background .35s var(--ease)} main.v3[data-content="drainage"] .bc-l li:first-child .bc-i{padding-left:0} main.v3[data-content="drainage"] a.bc-i:hover{background:rgba(242,237,228,.05)} main.v3[data-content="drainage"] .bc-ic{flex:0 0 44px;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1px solid rgba(217,183,126,.5);color:var(--br-gold)} main.v3[data-content="drainage"] .bc-ic .ic{width:20px;height:20px} main.v3[data-content="drainage"] .bc-t{display:flex;flex-direction:column;gap:3px;min-width:0} main.v3[data-content="drainage"] .bc-t strong{font-family:'Outfit',sans-serif;font-weight:400;font-size:17.5px;line-height:1.25;color:var(--br-cream)} main.v3[data-content="drainage"] .bc-t span{font-family:'Inter',sans-serif;font-size:12.5px;line-height:1.45;color:rgba(242,237,228,.62)} main.v3[data-content="drainage"] a.bc-i .bc-t span{text-decoration:underline;text-decoration-color:rgba(217,183,126,.5);text-underline-offset:3px} main.v3[data-content="drainage"] .br-start{background:var(--cream)} main.v3[data-content="drainage"] .bs-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(20px,2.4vw,32px);align-items:stretch} main.v3[data-content="drainage"] .bs-card{display:flex;flex-direction:column;background:var(--br-ink);color:var(--br-cream);overflow:hidden} main.v3[data-content="drainage"] .bs-img{position:relative;aspect-ratio:16/10;background-size:cover;background-position:center 60%} main.v3[data-content="drainage"] .bs-img::after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,var(--br-ink) 0%,rgba(22,19,15,0) 55%)} main.v3[data-content="drainage"] .bs-body{position:relative;z-index:1;margin-top:-34px;padding:0 clamp(28px,3vw,44px) clamp(30px,3vw,44px)} main.v3[data-content="drainage"] .bs-body .eyebrow{color:var(--br-gold);margin-bottom:16px} main.v3[data-content="drainage"] .bs-body h2{color:var(--br-cream);font-size:clamp(32px,3vw,46px)} main.v3[data-content="drainage"] .bs-body h2 em{color:#F6BE54} main.v3[data-content="drainage"] .bs-help{margin:18px 0 0;font-size:15.5px;line-height:1.65;color:rgba(242,237,228,.76)} main.v3[data-content="drainage"] .bs-mc{margin:16px 0 0;padding-top:16px;border-top:1px solid rgba(242,237,228,.14);font-size:13.5px;color:rgba(242,237,228,.66)} main.v3[data-content="drainage"] .bs-mc a{color:var(--br-gold)} main.v3[data-content="drainage"] .bs-pick{display:flex;flex-direction:column;justify-content:center} main.v3[data-content="drainage"] .bs-ask{margin:0 0 18px;font-family:'Outfit',sans-serif;font-weight:300;font-size:clamp(24px,2.1vw,30px);line-height:1.2;color:var(--ink)} main.v3[data-content="drainage"] .br-start .picker-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0} main.v3[data-content="drainage"] .br-start .picker-opt{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:14px;min-height:150px;margin:0;padding:20px 20px 18px;text-align:left;background:var(--paper);border:1px solid var(--line);border-radius:0;font-family:'Inter',sans-serif;font-size:14.5px;font-weight:500;letter-spacing:0;text-transform:none;line-height:1.4;color:var(--ink);cursor:pointer;transition:transform .45s var(--ease),border-color .3s,background-color .3s,box-shadow .45s var(--ease)} main.v3[data-content="drainage"] .br-start .po-ic{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;border:1px solid rgba(155,123,74,.45);color:var(--bronze);transition:background .3s,color .3s,border-color .3s} main.v3[data-content="drainage"] .br-start .po-ic .ic{width:22px;height:22px} main.v3[data-content="drainage"] .br-start .po-n{position:absolute;top:18px;right:18px;font-family:'Outfit',sans-serif;font-style:normal;font-size:14px;color:var(--bronze)} main.v3[data-content="drainage"] .br-start .po-t{flex:1;display:flex;align-items:flex-end;padding-right:22px} main.v3[data-content="drainage"] .br-start .po-go{position:absolute;right:18px;bottom:16px;color:var(--bronze);opacity:0;transform:translateX(-6px);transition:opacity .3s,transform .4s var(--ease)} main.v3[data-content="drainage"] .br-start .picker-opt:hover,main.v3[data-content="drainage"] .br-start .picker-opt:focus-visible{transform:translateY(-3px);border-color:var(--bronze);background:var(--paper);box-shadow:0 26px 44px -32px rgba(26,23,20,.5)} main.v3[data-content="drainage"] .br-start .picker-opt:hover .po-ic{background:var(--bronze);border-color:var(--bronze);color:var(--br-cream)} main.v3[data-content="drainage"] .br-start .picker-opt:hover .po-go{opacity:1;transform:none} main.v3[data-content="drainage"] .br-start .picker-opt.is-selected{background:var(--br-ink);border-color:var(--br-ink);color:var(--br-cream)} main.v3[data-content="drainage"] .br-start .picker-opt.is-selected .po-ic{border-color:rgba(217,183,126,.6);color:var(--br-gold);background:transparent} main.v3[data-content="drainage"] .br-start .picker-opt.is-selected .po-n,main.v3[data-content="drainage"] .br-start .picker-opt.is-selected .po-go{color:var(--br-gold)} main.v3[data-content="drainage"] .bs-prop{margin:20px 0 0;font-size:14px;line-height:1.6;color:rgba(26,23,20,.68)} main.v3[data-content="drainage"] .bs-prop a{color:var(--bronze);font-weight:600} main.v3[data-content="drainage"] .wk-grid{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:16px} main.v3[data-content="drainage"] .wk-grid.no-thumbs{grid-template-columns:1fr} main.v3[data-content="drainage"] .wk-main{position:relative;display:block;min-height:clamp(440px,42vw,600px);overflow:hidden;color:var(--br-cream);text-decoration:none} main.v3[data-content="drainage"] .wk-img{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform 1.4s var(--ease)} main.v3[data-content="drainage"] .wk-main:hover .wk-img,main.v3[data-content="drainage"] .wk-th:hover .wk-img{transform:scale(1.04)} main.v3[data-content="drainage"] .wk-main::after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,rgba(14,12,10,.88) 0%,rgba(14,12,10,.45) 36%,rgba(14,12,10,0) 62%);pointer-events:none} main.v3[data-content="drainage"] .wk-over{position:absolute;z-index:2;left:0;right:0;bottom:0;padding:clamp(26px,3.4vw,48px)} main.v3[data-content="drainage"] .wk-where{display:block;margin-bottom:10px;font-family:'Inter',sans-serif;font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--br-gold)} main.v3[data-content="drainage"] .wk-over h3{max-width:22ch;font-family:'Outfit',sans-serif;font-weight:300;font-size:clamp(28px,2.8vw,42px);line-height:1.08;color:var(--br-cream)} main.v3[data-content="drainage"] .wk-started{margin:12px 0 0;font-size:15.5px;color:rgba(242,237,228,.82)} main.v3[data-content="drainage"] .wk-go{display:inline-flex;gap:8px;margin-top:22px;padding-bottom:6px;border-bottom:1px solid var(--br-gold);font-family:'Inter',sans-serif;font-size:11.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--br-cream)} main.v3[data-content="drainage"] .wk-ths{display:grid;grid-template-rows:repeat(3,minmax(0,1fr));gap:16px} main.v3[data-content="drainage"] .wk-th{position:relative;display:block;overflow:hidden;min-height:140px} main.v3[data-content="drainage"] .wk-after{display:flex;flex-wrap:wrap;align-items:center;gap:18px 34px;margin-top:40px} main.v3[data-content="drainage"] .wk-rest{margin-top:16px} main.v3[data-content="drainage"] .bt-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(40px,6vw,104px);align-items:start} main.v3[data-content="drainage"] .bt-left .br-head{margin-bottom:44px} main.v3[data-content="drainage"] .bt-sheet{position:relative;max-width:440px;padding:30px 32px 32px;background:#FBF8F2;border:1px solid var(--line);box-shadow:0 36px 70px -40px rgba(26,23,20,.5),14px 14px 0 -1px #EFE6D6,14px 14px 0 0 var(--line)} main.v3[data-content="drainage"] .sh-top{display:flex;align-items:center;gap:14px;padding-bottom:18px;border-bottom:1px solid var(--line)} main.v3[data-content="drainage"] .sh-mark{width:34px;height:34px;object-fit:contain} main.v3[data-content="drainage"] .sh-title{font-family:'Outfit',sans-serif;font-size:22px;color:var(--ink)} main.v3[data-content="drainage"] .sh-areas{list-style:none;margin:18px 0 0;padding:0} main.v3[data-content="drainage"] .sh-areas li{display:flex;flex-direction:column;gap:6px;padding:10px 0;border-bottom:1px dashed var(--line)} main.v3[data-content="drainage"] .sh-a{font-family:'Inter',sans-serif;font-size:10.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--bronze)} main.v3[data-content="drainage"] .sh-two{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:20px} main.v3[data-content="drainage"] .sh-two div{display:flex;flex-direction:column;gap:7px} main.v3[data-content="drainage"] .sh-h{display:flex;align-items:center;gap:7px;margin-bottom:3px;font-family:'Inter',sans-serif;font-size:11.5px;font-weight:600;color:var(--ink)} main.v3[data-content="drainage"] .sh-h .ic{width:16px;height:16px;color:var(--bronze)} main.v3[data-content="drainage"] .sh-sign{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:28px} main.v3[data-content="drainage"] .bt-line{list-style:none;margin:0;padding:0;position:relative} main.v3[data-content="drainage"] .bt-line::before{content:'';position:absolute;left:27px;top:30px;bottom:30px;width:1px;background:linear-gradient(180deg,var(--bronze),rgba(166,124,63,.2))} main.v3[data-content="drainage"] .bt-line li{position:relative;display:grid;grid-template-columns:56px minmax(0,1fr);gap:28px;padding:0 0 34px} main.v3[data-content="drainage"] .bt-line li:last-child{padding-bottom:0} main.v3[data-content="drainage"] .bt-ic{position:relative;z-index:1;display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--cream-deep);border:1px solid var(--bronze);color:var(--bronze)} main.v3[data-content="drainage"] .bt-line li:last-child .bt-ic{background:var(--bronze);color:#FBF8F2} main.v3[data-content="drainage"] .bt-line div{padding-top:4px;padding-bottom:30px;border-bottom:1px solid var(--line-s)} main.v3[data-content="drainage"] .bt-line li:last-child div{border-bottom:0;padding-bottom:0} main.v3[data-content="drainage"] .bt-l{display:block;font-family:'Inter',sans-serif;font-size:11.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--bronze)} main.v3[data-content="drainage"] .bt-l a{color:inherit;text-decoration:none;border-bottom:1px solid rgba(166,124,63,.5)} main.v3[data-content="drainage"] .bt-line p{margin:10px 0 0;font-family:'Outfit',sans-serif;font-size:clamp(18px,1.45vw,21px);line-height:1.5;color:var(--ink)} main.v3[data-content="drainage"] .bt-right .links{margin-top:44px;padding-left:84px} main.v3[data-content="drainage"] .vis-reviews{background:var(--cream)} main.v3[data-content="drainage"] .fq-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(36px,5vw,80px);align-items:start} main.v3[data-content="drainage"] .fq-left{position:sticky;top:104px} main.v3[data-content="drainage"] .fq-left .br-head{margin-bottom:30px} main.v3[data-content="drainage"] .fq-left h2{font-size:clamp(32px,3vw,46px)} main.v3[data-content="drainage"] .fq-card{background:var(--br-ink);color:var(--br-cream);overflow:hidden} main.v3[data-content="drainage"] .fq-img{position:relative;aspect-ratio:16/10;background-size:cover;background-position:center 35%} main.v3[data-content="drainage"] .fq-img::after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,var(--br-ink) 0%,rgba(22,19,15,0) 55%)} main.v3[data-content="drainage"] .fq-body{position:relative;margin-top:-20px;padding:0 26px 28px} main.v3[data-content="drainage"] .fq-k{margin:0;font-family:'Inter',sans-serif;font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--br-gold)} main.v3[data-content="drainage"] .fq-h{margin:8px 0 20px;font-family:'Outfit',sans-serif;font-weight:300;font-size:25px;line-height:1.2;color:var(--br-cream)} main.v3[data-content="drainage"] .fq-card .btn-primary{width:100%} main.v3[data-content="drainage"] .fq-card .btn-primary:hover{background:var(--br-cream);color:var(--ink)} main.v3[data-content="drainage"] .fq-call{display:flex;align-items:center;gap:10px;margin-top:16px;font-family:'Inter',sans-serif;font-size:14px;font-weight:600;color:var(--br-cream);text-decoration:none} main.v3[data-content="drainage"] .fq-call .ic{width:18px;height:18px;color:var(--br-gold)} main.v3[data-content="drainage"] .fq-list{border-top:1px solid var(--line-s)} main.v3[data-content="drainage"] .bq{background:var(--paper);border:1px solid var(--line);border-top:0} main.v3[data-content="drainage"] .bq summary{list-style:none;display:grid;grid-template-columns:40px minmax(0,1fr) 34px;gap:14px;align-items:center;padding:21px clamp(20px,2.4vw,32px);cursor:pointer;transition:background .3s var(--ease)} main.v3[data-content="drainage"] .bq summary::-webkit-details-marker{display:none} main.v3[data-content="drainage"] .bq summary::marker{content:''} main.v3[data-content="drainage"] .bq summary:hover{background:rgba(166,124,63,.06)} main.v3[data-content="drainage"] .bq-n{font-family:'Outfit',sans-serif;font-style:normal;font-size:15px;color:var(--bronze)} main.v3[data-content="drainage"] .bq-q{font-family:'Outfit',sans-serif;font-weight:400;font-size:clamp(18px,1.45vw,21px);line-height:1.32;color:var(--ink)} main.v3[data-content="drainage"] .bq-x{position:relative;width:32px;height:32px;border-radius:50%;border:1px solid rgba(155,123,74,.45);transition:background .3s,border-color .3s,transform .45s var(--ease)} main.v3[data-content="drainage"] .bq-x::before,main.v3[data-content="drainage"] .bq-x::after{content:'';position:absolute;left:50%;top:50%;width:12px;height:1.5px;margin:-.75px 0 0 -6px;background:var(--bronze)} main.v3[data-content="drainage"] .bq-x::after{transform:rotate(90deg);transition:transform .45s var(--ease)} main.v3[data-content="drainage"] .bq[open] summary{background:rgba(166,124,63,.07)} main.v3[data-content="drainage"] .bq[open] .bq-x{background:var(--bronze);border-color:var(--bronze)} main.v3[data-content="drainage"] .bq[open] .bq-x::before,main.v3[data-content="drainage"] .bq[open] .bq-x::after{background:#FBF8F2} main.v3[data-content="drainage"] .bq[open] .bq-x::after{transform:rotate(0)} main.v3[data-content="drainage"] .bq-a{padding:4px clamp(20px,2.4vw,32px) 26px calc(clamp(20px,2.4vw,32px) + 54px)} main.v3[data-content="drainage"] .bq-a p{margin:0;font-size:15.5px;line-height:1.7;max-width:64ch} main.v3[data-content="drainage"] .fq-all{margin:28px 0 0} @keyframes laKen{0%{opacity:0;transform:scale(1.04)}7%{opacity:1}100%{opacity:1;transform:scale(1.13) translate(-1.5%,-1%)}} main.v3[data-content="drainage"] .svc-hero.v21{overflow:hidden} main.v3[data-content="drainage"] .svc-hero.v21>.img{animation:laKen 24s cubic-bezier(.22,1,.36,1) .15s both;transform-origin:60% 40%} main.v3[data-content="drainage"] .sh-t{display:block;font-family:'Outfit',sans-serif;font-size:15.5px;line-height:1.35;color:rgba(26,23,20,.78)} main.v3[data-content="drainage"] .sh-two .sh-t{font-size:14px} main.v3[data-content="drainage"] .sh-sign span{display:flex;flex-direction:column;gap:6px;font-family:'Inter',sans-serif;font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:rgba(26,23,20,.5)} main.v3[data-content="drainage"] .sh-sign i{display:block;height:24px;border-bottom:1px solid var(--ink)} main.v3[data-content="drainage"] .bt-l a{border-bottom:0} @media (max-width:1100px){ main.v3[data-content="drainage"] .br-hplan{display:none} main.v3[data-content="drainage"] .bc-l{grid-template-columns:repeat(2,minmax(0,1fr))} main.v3[data-content="drainage"] .bc-l li:nth-child(3){border-left:0} main.v3[data-content="drainage"] .bc-l li:nth-child(n+3){border-top:1px solid rgba(242,237,228,.12)} main.v3[data-content="drainage"] .bc-l li:nth-child(3) .bc-i{padding-left:0} main.v3[data-content="drainage"] .bs-grid,main.v3[data-content="drainage"] .sm-grid,main.v3[data-content="drainage"] .bl-grid,main.v3[data-content="drainage"] .ph-top,main.v3[data-content="drainage"] .ds-grid,main.v3[data-content="drainage"] .tm-grid,main.v3[data-content="drainage"] .bt-grid,main.v3[data-content="drainage"] .fq-grid{grid-template-columns:1fr} main.v3[data-content="drainage"] .bs-card{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr)} main.v3[data-content="drainage"] .bs-img{aspect-ratio:auto;min-height:100%} main.v3[data-content="drainage"] .bs-img::after{background:linear-gradient(270deg,var(--br-ink) 0%,rgba(22,19,15,0) 40%)} main.v3[data-content="drainage"] .bs-body{margin-top:0;padding-top:clamp(28px,3vw,44px)} main.v3[data-content="drainage"] .fq-left{position:static} main.v3[data-content="drainage"] .fq-card{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr)} main.v3[data-content="drainage"] .fq-img{aspect-ratio:auto;min-height:220px} main.v3[data-content="drainage"] .fq-img::after{background:linear-gradient(270deg,var(--br-ink) 0%,rgba(22,19,15,0) 40%)} main.v3[data-content="drainage"] .fq-body{margin-top:0;padding:28px} main.v3[data-content="drainage"] .bt-sheet{max-width:520px} } @media (max-width:700px){ main.v3[data-content="drainage"] .svc-hero h1{max-width:12ch} main.v3[data-content="drainage"] .svc-hero .content{padding-bottom:44px} main.v3[data-content="drainage"] .bc-i{flex-direction:column;align-items:flex-start;gap:10px;padding:18px 12px 18px 14px} main.v3[data-content="drainage"] .bc-l li:first-child .bc-i,main.v3[data-content="drainage"] .bc-l li:nth-child(3) .bc-i{padding-left:0} main.v3[data-content="drainage"] .bc-ic{width:36px;height:36px;flex-basis:36px} main.v3[data-content="drainage"] .bc-t strong{font-size:15.5px} main.v3[data-content="drainage"] .bc-t span{font-size:12px} main.v3[data-content="drainage"] .bs-card{display:flex} main.v3[data-content="drainage"] .bs-img{aspect-ratio:16/10;min-height:0} main.v3[data-content="drainage"] .bs-img::after{background:linear-gradient(0deg,var(--br-ink) 0%,rgba(22,19,15,0) 55%)} main.v3[data-content="drainage"] .bs-body{margin-top:-26px;padding:0 22px 26px} main.v3[data-content="drainage"] .br-start .picker-options{grid-template-columns:1fr;gap:8px} main.v3[data-content="drainage"] .br-start .picker-opt{flex-direction:row;align-items:center;min-height:62px;padding:10px 44px 10px 12px;gap:14px} main.v3[data-content="drainage"] .br-start .po-ic{flex:0 0 40px;width:40px;height:40px} main.v3[data-content="drainage"] .br-start .po-n{display:none} main.v3[data-content="drainage"] .br-start .po-t{align-items:center;padding-right:0} main.v3[data-content="drainage"] .br-start .po-go{opacity:1;transform:none;top:50%;bottom:auto;margin-top:-11px} main.v3[data-content="drainage"] .sh-two{gap:12px} main.v3[data-content="drainage"] .sh-h{font-size:10.5px} main.v3[data-content="drainage"] .wk-grid{grid-template-columns:1fr;gap:10px} main.v3[data-content="drainage"] .wk-main{min-height:460px} main.v3[data-content="drainage"] .wk-ths{grid-template-rows:none;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px} main.v3[data-content="drainage"] .wk-th{min-height:0;aspect-ratio:1} main.v3[data-content="drainage"] .wk-after{flex-direction:column;align-items:flex-start} main.v3[data-content="drainage"] .bt-sheet{padding:22px 20px 24px;margin-right:14px} main.v3[data-content="drainage"] .bt-line li{grid-template-columns:48px minmax(0,1fr);gap:16px} main.v3[data-content="drainage"] .bt-ic{width:48px;height:48px} main.v3[data-content="drainage"] .bt-line::before{left:23px} main.v3[data-content="drainage"] .bt-line p{font-size:17px} main.v3[data-content="drainage"] .bt-right .links{padding-left:0} main.v3[data-content="drainage"] .fq-card{display:flex;flex-direction:column} main.v3[data-content="drainage"] .fq-img{aspect-ratio:16/9;min-height:0} main.v3[data-content="drainage"] .fq-img::after{background:linear-gradient(0deg,var(--br-ink) 0%,rgba(22,19,15,0) 55%)} main.v3[data-content="drainage"] .fq-body{margin-top:-18px;padding:0 22px 24px} main.v3[data-content="drainage"] .bq summary{grid-template-columns:28px minmax(0,1fr) 30px;gap:10px;padding:18px 16px} main.v3[data-content="drainage"] .bq-x{width:28px;height:28px} main.v3[data-content="drainage"] .bq-q{font-size:17.5px} main.v3[data-content="drainage"] .bq-a{padding:2px 16px 22px 54px} main.v3[data-content="drainage"] .bq-a p{font-size:15px} } @media (max-width:700px){ main.v3[data-content="drainage"] .bt-sheet{padding:20px 18px 22px} main.v3[data-content="drainage"] .sh-areas li{padding:8px 0} main.v3[data-content="drainage"] .sh-t{font-size:14.5px} main.v3[data-content="drainage"] .sh-two .sh-t{font-size:13px} main.v3[data-content="drainage"] .sh-sign{margin-top:20px} } @media (prefers-reduced-motion:reduce){ main.v3[data-content="drainage"] .svc-hero.v21>.img,main.v3[data-content="drainage"] .hub-l .sp{animation:none} main.v3[data-content="drainage"] .svc-hero.v21>.img{opacity:1;transform:none} } /* ================= landscape's own layouts ================= */ main.v3[data-content="drainage"]{--la-sage:#6F6D45;--la-leaf:#7E8A4A;--la-water:#4F8590} main.v3[data-content="drainage"] section[class*="la-"] .ic{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;display:block} main.v3[data-content="drainage"] .la-svc,main.v3[data-content="drainage"] #order{scroll-margin-top:118px} main.v3[data-content="drainage"] .bg-ink .eyebrow{color:var(--br-gold)} main.v3[data-content="drainage"] .bg-ink h2{color:var(--br-cream)} main.v3[data-content="drainage"] .bg-ink h2 em{color:#F6BE54} main.v3[data-content="drainage"] .bg-ink .lead{color:rgba(242,237,228,.74)} /* ---------- CAT-LAND-01 hero menu ---------- */ main.v3[data-content="drainage"] .la-hmenu{position:absolute;z-index:3;right:max(var(--pad),calc((100vw - var(--w)) / 2 + var(--pad)));bottom:72px;width:360px;padding:24px 24px 14px;background:rgba(16,13,10,.6);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(217,183,126,.32);color:var(--br-cream)} main.v3[data-content="drainage"] .la-hmenu .hm-k{margin:0 0 10px;font-family:'Inter',sans-serif;font-size:11px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--br-gold)} main.v3[data-content="drainage"] .la-hmenu ol{list-style:none;margin:0;padding:0} main.v3[data-content="drainage"] .la-hmenu li+li{border-top:1px solid rgba(242,237,228,.12)} main.v3[data-content="drainage"] .la-hmenu a{display:grid;grid-template-columns:22px 40px minmax(0,1fr) 14px;align-items:center;gap:12px;padding:12px 0;color:inherit;text-decoration:none} main.v3[data-content="drainage"] .la-hmenu .hm-n{font-family:'Outfit',sans-serif;font-style:normal;font-size:13px;color:var(--br-gold)} main.v3[data-content="drainage"] .la-hmenu .hm-ic{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;border:1px solid rgba(217,183,126,.45);color:var(--br-gold);transition:background .3s,color .3s} main.v3[data-content="drainage"] .la-hmenu .hm-ic .ic{width:19px;height:19px} main.v3[data-content="drainage"] .la-hmenu .hm-t{display:flex;flex-direction:column;gap:2px;min-width:0} main.v3[data-content="drainage"] .la-hmenu .hm-t strong{font-family:'Outfit',sans-serif;font-weight:400;font-size:17.5px;line-height:1.2;color:var(--br-cream)} main.v3[data-content="drainage"] .la-hmenu .hm-t span{font-family:'Inter',sans-serif;font-size:12.5px;line-height:1.35;color:rgba(242,237,228,.66)} main.v3[data-content="drainage"] .la-hmenu .hm-go{color:var(--br-gold);opacity:.5;transition:opacity .3s,transform .4s var(--ease)} main.v3[data-content="drainage"] .la-hmenu a:hover .hm-ic{background:var(--br-gold);color:var(--br-ink)} main.v3[data-content="drainage"] .la-hmenu a:hover .hm-go{opacity:1;transform:translateY(3px)} main.v3[data-content="drainage"] .svc-hero h1{max-width:15ch} /* ---------- CAT-LAND-03 where it starts ---------- */ main.v3[data-content="drainage"] .st-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,4vw,64px);align-items:stretch} main.v3[data-content="drainage"] .st-img{position:relative;min-height:520px;background-size:cover;background-position:center;overflow:hidden} main.v3[data-content="drainage"] .st-img::after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,rgba(14,12,10,.78) 0%,rgba(14,12,10,0) 46%)} main.v3[data-content="drainage"] .st-cap{position:absolute;z-index:1;left:0;right:0;bottom:0;margin:0;padding:28px 30px;font-family:'Outfit',sans-serif;font-style:normal;font-weight:300;font-size:clamp(22px,1.9vw,28px);line-height:1.25;color:var(--br-cream)} main.v3[data-content="drainage"] .st-rows{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)} main.v3[data-content="drainage"] .st-rows li{border-bottom:1px solid var(--line)} main.v3[data-content="drainage"] .st-row{position:relative;display:grid;grid-template-columns:30px 48px minmax(0,1fr) auto;align-items:center;gap:18px;padding:19px 6px 19px 0;color:inherit;text-decoration:none;transition:background .35s var(--ease),padding .35s var(--ease)} main.v3[data-content="drainage"] a.st-row:hover{background:rgba(166,124,63,.07);padding-left:12px} main.v3[data-content="drainage"] .st-n{font-family:'Outfit',sans-serif;font-style:normal;font-size:14px;color:var(--bronze)} main.v3[data-content="drainage"] .st-ic{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--paper);border:1px solid rgba(155,123,74,.4);color:var(--bronze);transition:background .3s,color .3s} main.v3[data-content="drainage"] a.st-row:hover .st-ic{background:var(--bronze);color:#FBF8F2;border-color:var(--bronze)} main.v3[data-content="drainage"] .st-b{display:flex;flex-direction:column;gap:4px;min-width:0} main.v3[data-content="drainage"] .st-b strong{font-family:'Outfit',sans-serif;font-weight:400;font-size:clamp(19px,1.5vw,22px);line-height:1.25;color:var(--ink)} main.v3[data-content="drainage"] .st-b span{font-size:14.5px;line-height:1.5;color:rgba(26,23,20,.66)} main.v3[data-content="drainage"] .st-to{justify-self:end;display:inline-flex;align-items:center;gap:7px;padding:8px 12px;border:1px solid rgba(155,123,74,.4);font-family:'Inter',sans-serif;font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--bronze);white-space:nowrap;transition:background .3s,color .3s} main.v3[data-content="drainage"] a.st-row:hover .st-to{background:var(--ink);border-color:var(--ink);color:var(--br-cream)} /* ---------- CAT-LAND-04 service bar ---------- */ main.v3[data-content="drainage"] .la-nav{padding:0 !important;height:0;overflow:visible} main.v3[data-content="drainage"] .ln-bar{position:fixed;z-index:45;left:0;right:0;top:64px;background:rgba(22,19,15,.94);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid rgba(217,183,126,.28);transform:translateY(-110%);opacity:0;visibility:hidden;transition:transform .45s var(--ease),opacity .3s,visibility 0s .45s} main.v3[data-content="drainage"] .ln-bar.is-on{transform:none;opacity:1;visibility:visible;transition:transform .45s var(--ease),opacity .3s} main.v3[data-content="drainage"] .ln-in{display:flex;align-items:center;gap:26px;max-width:var(--w);margin:0 auto;padding:0 var(--pad)} main.v3[data-content="drainage"] .ln-k{flex:0 0 auto;font-family:'Inter',sans-serif;font-size:10.5px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--br-gold)} main.v3[data-content="drainage"] .ln-l{flex:1;display:flex;gap:4px;overflow-x:auto;scrollbar-width:none} main.v3[data-content="drainage"] .ln-l::-webkit-scrollbar{display:none} main.v3[data-content="drainage"] .ln-l a{position:relative;flex:0 0 auto;display:inline-flex;align-items:center;gap:9px;padding:17px 14px;font-family:'Outfit',sans-serif;font-size:16px;color:rgba(242,237,228,.62);text-decoration:none;transition:color .3s} main.v3[data-content="drainage"] .ln-l a i{font-style:normal;font-size:12px;color:var(--br-gold)} main.v3[data-content="drainage"] .ln-l a::after{content:'';position:absolute;left:14px;right:14px;bottom:0;height:2px;background:var(--br-gold);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)} main.v3[data-content="drainage"] .ln-l a:hover,main.v3[data-content="drainage"] .ln-l a.is-cur{color:var(--br-cream)} main.v3[data-content="drainage"] .ln-l a.is-cur::after{transform:scaleX(1)} main.v3[data-content="drainage"] .ln-cta{flex:0 0 auto;min-height:40px;padding:0 18px;font-size:10.5px} /* ---------- the four services ---------- */ main.v3[data-content="drainage"] .la-svc .inner{display:block;max-width:var(--w)} main.v3[data-content="drainage"] .la-svc{padding-top:clamp(84px,9vw,132px);padding-bottom:clamp(84px,9vw,132px)} main.v3[data-content="drainage"] .lv-head{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:clamp(32px,5vw,90px);align-items:end} main.v3[data-content="drainage"] .lv-k{display:flex;align-items:center;gap:16px;margin:0 0 18px} main.v3[data-content="drainage"] .lv-num{font-family:'Outfit',sans-serif;font-style:normal;font-weight:300;font-size:clamp(54px,5.4vw,84px);line-height:.8;color:var(--bronze)} main.v3[data-content="drainage"] .lv-kt{display:inline-flex;align-items:center;gap:12px;font-family:'Inter',sans-serif;font-size:11.5px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--bronze)} main.v3[data-content="drainage"] .lv-kt::before{content:'';width:36px;height:1px;background:currentColor} main.v3[data-content="drainage"] .lv-title h2{font-size:clamp(40px,4.4vw,66px);line-height:1.02;outline:0} main.v3[data-content="drainage"] .lv-open{margin:18px 0 0;max-width:54ch;font-size:clamp(16px,1.2vw,18px);line-height:1.65;color:rgba(26,23,20,.74)} main.v3[data-content="drainage"] .lv-action{padding:26px 26px 22px;background:var(--br-ink);color:var(--br-cream)} main.v3[data-content="drainage"] .lv-btn{width:100%;justify-content:space-between;text-align:left;line-height:1.35;padding:14px 20px;min-height:58px;text-decoration:none} main.v3[data-content="drainage"] .lv-lic{display:flex;gap:10px;margin:16px 0 0;font-size:12.5px;line-height:1.55;color:rgba(242,237,228,.68)} main.v3[data-content="drainage"] .lv-lic .ic{flex:0 0 18px;width:18px;height:18px;color:var(--br-gold);margin-top:1px} main.v3[data-content="drainage"] .lv-rel{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin:14px 0 0;padding-top:14px;border-top:1px solid rgba(242,237,228,.14);font-size:12.5px;color:rgba(242,237,228,.6)} main.v3[data-content="drainage"] .lv-rel a{color:var(--br-cream);text-decoration:none;border-bottom:1px solid rgba(217,183,126,.6);padding-bottom:2px} main.v3[data-content="drainage"] .lv-calls{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin:clamp(30px,3vw,44px) 0 0;padding:18px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)} main.v3[data-content="drainage"] .lv-calls-h{display:flex;align-items:center;gap:10px;margin:0;font-family:'Inter',sans-serif;font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--bronze)} main.v3[data-content="drainage"] .lv-calls-h .ic{width:18px;height:18px} main.v3[data-content="drainage"] .lv-calls ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px} main.v3[data-content="drainage"] .lv-calls li{padding:8px 15px;background:var(--paper);border:1px solid var(--line);border-radius:40px;font-family:'Outfit',sans-serif;font-style:normal;font-size:16px;line-height:1.3;color:var(--ink)} main.v3[data-content="drainage"] .lv-calls li::before{content:'\201C';margin-right:2px;color:var(--bronze)} main.v3[data-content="drainage"] .lv-calls li::after{content:'\201D';margin-left:1px;color:var(--bronze)} main.v3[data-content="drainage"] .lv-h3{margin:0 0 18px;font-family:'Outfit',sans-serif;font-weight:400;font-size:clamp(22px,1.8vw,27px);line-height:1.2;color:var(--ink)} main.v3[data-content="drainage"] .lv-spread{display:grid;gap:clamp(16px,1.6vw,24px);margin-top:clamp(28px,3vw,44px)} main.v3[data-content="drainage"] .lv-photo{position:relative;min-height:420px;background-size:cover;background-position:center;overflow:hidden} main.v3[data-content="drainage"] .lv-photo::after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,rgba(14,12,10,.62) 0%,rgba(14,12,10,0) 34%);pointer-events:none} main.v3[data-content="drainage"] .lv-photo-f{position:absolute;z-index:1;left:0;bottom:0;padding:22px 26px} main.v3[data-content="drainage"] .lv-plink{display:inline-flex;gap:8px;padding-bottom:5px;border-bottom:1px solid var(--br-gold);font-family:'Inter',sans-serif;font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--br-cream);text-decoration:none} main.v3[data-content="drainage"] .lv-legend{list-style:none;margin:0;padding:0;counter-reset:none} main.v3[data-content="drainage"] .lv-legend li{display:flex;align-items:center;gap:12px;padding:9px 10px;margin:0 -10px;font-size:14.5px;line-height:1.4;color:var(--ink);cursor:default;outline:0;transition:background .3s} main.v3[data-content="drainage"] .lv-legend li:hover,main.v3[data-content="drainage"] .lv-legend li:focus-visible{background:rgba(166,124,63,.09)} main.v3[data-content="drainage"] .lg-n{flex:0 0 28px;height:28px;display:grid;place-items:center;border-radius:50%;background:var(--bronze);font-family:'Inter',sans-serif;font-size:10.5px;font-weight:600;color:#FBF8F2} /* SVC-LD: photo + plan with legend, then the rail */ main.v3[data-content="drainage"] .lv-spread.is-ld{grid-template-columns:minmax(0,5fr) minmax(0,7fr)} main.v3[data-content="drainage"] .lv-plan{display:flex;flex-direction:column;gap:22px;margin:0;padding:24px;background:var(--paper);border:1px solid var(--line)} main.v3[data-content="drainage"] .lv-plan figcaption .lv-h3{font-size:21px;margin-bottom:10px} main.v3[data-content="drainage"] .lv-plan .lv-legend{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:24px} main.v3[data-content="drainage"] .la-artificial-grass .lv-photo{background-position:90% 70%} main.v3[data-content="drainage"] .lv-zone .mk{display:none} main.v3[data-content="drainage"] .la-plan{display:block;width:100%;height:auto} main.v3[data-content="drainage"] .la-plan .lot{fill:#EFE7D6;stroke:var(--ink);stroke-width:1.4} main.v3[data-content="drainage"] .la-plan .house{fill:#DCD0BB} main.v3[data-content="drainage"] .la-plan #la-hatch line,main.v3[data-content="drainage"] .la-plan pattern line{stroke:rgba(26,23,20,.35);stroke-width:1.2} main.v3[data-content="drainage"] .la-plan .house-h{stroke:var(--ink);stroke-width:1.4} main.v3[data-content="drainage"] .la-plan .door{stroke:#EFE7D6;stroke-width:4} main.v3[data-content="drainage"] .la-plan .patio{fill:#E4D8C2;stroke:rgba(26,23,20,.5);stroke-width:1} main.v3[data-content="drainage"] .la-plan .pv path{stroke:rgba(26,23,20,.16);stroke-width:1} main.v3[data-content="drainage"] .la-plan .sunz{fill:rgba(217,183,126,.2)} main.v3[data-content="drainage"] .la-plan .sun circle{fill:#E7C88E;stroke:var(--bronze);stroke-width:1.2} main.v3[data-content="drainage"] .la-plan .sun path{stroke:var(--bronze);stroke-width:1.4;stroke-linecap:round} main.v3[data-content="drainage"] .la-plan .bed{fill:rgba(126,138,74,.16);stroke:rgba(111,109,69,.55);stroke-width:1} main.v3[data-content="drainage"] .la-plan .p-sun{fill:#A7A86E;stroke:#6F6D45;stroke-width:1} main.v3[data-content="drainage"] .la-plan .p-shade{fill:#7F9077;stroke:#556B4E;stroke-width:1} main.v3[data-content="drainage"] .la-plan .pc{fill:rgba(255,255,255,.28)} main.v3[data-content="drainage"] .la-plan .canopy{fill:rgba(85,107,78,.22);stroke:#556B4E;stroke-width:1.2;stroke-dasharray:3 3} main.v3[data-content="drainage"] .la-plan .canopy2{fill:rgba(85,107,78,.18)} main.v3[data-content="drainage"] .la-plan .trunk{fill:#6E5A40} main.v3[data-content="drainage"] .la-plan .zone{fill:none;stroke:var(--la-water);stroke-width:1.4;stroke-dasharray:6 4} main.v3[data-content="drainage"] .la-plan .zt{font-family:'Inter',sans-serif;font-size:12px;font-weight:700;fill:var(--la-water)} main.v3[data-content="drainage"] .la-plan .valve{fill:#FBF8F2;stroke:var(--la-water);stroke-width:1.2} main.v3[data-content="drainage"] .la-plan .path{fill:none;stroke:#E9DCC2;stroke-width:18;stroke-linecap:round} main.v3[data-content="drainage"] .la-plan .seat{fill:#E4D8C2;stroke:rgba(26,23,20,.45);stroke-width:1} main.v3[data-content="drainage"] .la-plan .seat2{fill:none;stroke:rgba(26,23,20,.2);stroke-width:1} main.v3[data-content="drainage"] .la-plan .chair{fill:#B79E7C} main.v3[data-content="drainage"] .la-plan .creek{fill:none;stroke:#CFC4B0;stroke-width:16;stroke-linecap:round} main.v3[data-content="drainage"] .la-plan .stone{fill:#B4A890;stroke:rgba(26,23,20,.35);stroke-width:.8} main.v3[data-content="drainage"] .la-plan .flow{fill:none;stroke:var(--la-water);stroke-width:1.8;stroke-dasharray:4 5;animation:laFlow 1.6s linear infinite} main.v3[data-content="drainage"] .la-plan .glow{fill:rgba(231,200,142,.38)} main.v3[data-content="drainage"] .la-plan .lamp{fill:#E7C88E;stroke:var(--bronze);stroke-width:1} main.v3[data-content="drainage"] .la-plan .later-b{fill:none;stroke:var(--bronze);stroke-width:1.4;stroke-dasharray:2 4} main.v3[data-content="drainage"] .la-plan .lt{stroke:rgba(166,124,63,.35);stroke-width:1.4} main.v3[data-content="drainage"] .la-plan .pin .halo{fill:rgba(166,124,63,.22);transform-origin:center;transform-box:fill-box;animation:laPulse 2.6s ease-in-out infinite} main.v3[data-content="drainage"] .la-plan .pin .dot{fill:var(--bronze);stroke:#FBF8F2;stroke-width:2} main.v3[data-content="drainage"] .la-plan .pin text{font-family:'Inter',sans-serif;font-size:10px;font-weight:700;fill:#FBF8F2} main.v3[data-content="drainage"] .la-plan .f,main.v3[data-content="drainage"] .la-plan .pin{transition:opacity .35s} main.v3[data-content="drainage"] .lv-plan[data-focus] .la-plan .f{opacity:.28} main.v3[data-content="drainage"] .lv-plan[data-focus] .la-plan .pin{opacity:.25} main.v3[data-content="drainage"] .lv-plan[data-focus="1"] .la-plan :is(.f1,.p1),main.v3[data-content="drainage"] .lv-plan[data-focus="2"] .la-plan :is(.f2,.p2),main.v3[data-content="drainage"] .lv-plan[data-focus="3"] .la-plan :is(.f3,.p3),main.v3[data-content="drainage"] .lv-plan[data-focus="4"] .la-plan :is(.f4,.p4),main.v3[data-content="drainage"] .lv-plan[data-focus="5"] .la-plan :is(.f5,.p5),main.v3[data-content="drainage"] .lv-plan[data-focus="6"] .la-plan :is(.f6,.p6){opacity:1} main.v3[data-content="drainage"] .lv-plan[data-focus] .la-plan .f-tree{opacity:.5} @keyframes laPulse{0%,100%{transform:scale(.85);opacity:.55}50%{transform:scale(1.15);opacity:.15}} @keyframes laFlow{to{stroke-dashoffset:-18}} main.v3[data-content="drainage"] .lv-rail{margin-top:clamp(36px,3.6vw,52px)} main.v3[data-content="drainage"] .lv-rail ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:0;position:relative} main.v3[data-content="drainage"] .lv-rail ol::before{content:'';position:absolute;left:22px;right:22px;top:22px;height:1px;background:linear-gradient(90deg,var(--bronze),rgba(166,124,63,.25))} main.v3[data-content="drainage"] .lv-rail li{position:relative;padding-right:22px} main.v3[data-content="drainage"] .rl-n{position:relative;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--cream);border:1px solid var(--bronze);font-family:'Outfit',sans-serif;font-style:normal;font-size:15px;color:var(--bronze)} main.v3[data-content="drainage"] .bg-deep .rl-n{background:var(--cream-deep)} main.v3[data-content="drainage"] .lv-rail li:last-child .rl-n{background:var(--bronze);color:#FBF8F2} main.v3[data-content="drainage"] .lv-rail p{margin:16px 0 0;font-family:'Outfit',sans-serif;font-size:18px;line-height:1.4;color:var(--ink)} /* SVC-AG: exploded section with the steps, the photo, then five facts */ main.v3[data-content="drainage"] .lv-spread.is-ag{grid-template-columns:minmax(0,8fr) minmax(0,4fr)} main.v3[data-content="drainage"] .lv-turf{margin:0;padding:26px 28px;background:var(--paper);border:1px solid var(--line)} main.v3[data-content="drainage"] .lv-turf-cv{margin:0 0 20px} main.v3[data-content="drainage"] .la-turf{display:block;width:100%;height:auto;overflow:visible} main.v3[data-content="drainage"] .la-turf .guide{stroke:rgba(26,23,20,.25);stroke-width:1;stroke-dasharray:3 4;fill:none} main.v3[data-content="drainage"] .la-turf .sod{fill:#8E9A5A} main.v3[data-content="drainage"] .la-turf .sod-b path,main.v3[data-content="drainage"] .la-turf .blades path{fill:none;stroke:#6F7F3C;stroke-width:1.5;stroke-linecap:round} main.v3[data-content="drainage"] .la-turf .root path{fill:none;stroke:#8B6E4E;stroke-width:1.2;stroke-linecap:round} main.v3[data-content="drainage"] .la-turf .out{fill:none;stroke:var(--bronze);stroke-width:1.6;stroke-dasharray:4 4} main.v3[data-content="drainage"] .la-turf .out-h{fill:none;stroke:var(--bronze);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round} main.v3[data-content="drainage"] .la-turf .backing{fill:#4E4A3A} main.v3[data-content="drainage"] .la-turf .blades path{stroke:#7E8A4A} main.v3[data-content="drainage"] .la-turf .seam{stroke:#FBF8F2;stroke-width:2.2;stroke-dasharray:3 3} main.v3[data-content="drainage"] .la-turf .staple{stroke:var(--ink);stroke-width:2.2;stroke-linecap:round} main.v3[data-content="drainage"] .la-turf .g7 circle{fill:#C9B48E} main.v3[data-content="drainage"] .la-turf .edge{fill:#6E6253} main.v3[data-content="drainage"] .la-turf .base{stroke:rgba(26,23,20,.4);stroke-width:1} main.v3[data-content="drainage"] .la-turf .tamp{fill:none;stroke:var(--bronze);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round} main.v3[data-content="drainage"] .la-turf .wd{stroke:var(--la-water);stroke-width:2;stroke-dasharray:5 5;animation:laFlow 1.2s linear infinite reverse} main.v3[data-content="drainage"] .la-turf .wd-h{fill:none;stroke:var(--la-water);stroke-width:2;stroke-linecap:round;stroke-linejoin:round} main.v3[data-content="drainage"] .la-turf .soil{stroke:none} main.v3[data-content="drainage"] .la-turf .grade{stroke:var(--ink);stroke-width:1.6} main.v3[data-content="drainage"] .la-turf .slope,main.v3[data-content="drainage"] .la-turf .slope-h{fill:none;stroke:var(--bronze);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round} main.v3[data-content="drainage"] .la-turf .pin .dot{fill:var(--bronze);stroke:#FBF8F2;stroke-width:2} main.v3[data-content="drainage"] .la-turf .pin text{font-family:'Inter',sans-serif;font-size:10px;font-weight:700;fill:#FBF8F2} main.v3[data-content="drainage"] .la-turf :is(.g1,.g2,.g3,.g4,.g6,.g7,.edge,.pin){transition:opacity .35s} main.v3[data-content="drainage"] .lv-turf[data-focus] .la-turf :is(.g1,.g2,.g3,.g4,.g6,.g7,.edge,.pin){opacity:.25} main.v3[data-content="drainage"] .lv-turf[data-focus="1"] .la-turf :is(.g1,.p1),main.v3[data-content="drainage"] .lv-turf[data-focus="2"] .la-turf :is(.g2,.p2),main.v3[data-content="drainage"] .lv-turf[data-focus="3"] .la-turf :is(.g3,.p3),main.v3[data-content="drainage"] .lv-turf[data-focus="4"] .la-turf :is(.g4,.g3,.p4),main.v3[data-content="drainage"] .lv-turf[data-focus="5"] .la-turf :is(.edge,.p5),main.v3[data-content="drainage"] .lv-turf[data-focus="6"] .la-turf :is(.g6,.p6),main.v3[data-content="drainage"] .lv-turf[data-focus="7"] .la-turf :is(.g7,.g6,.p7){opacity:1} main.v3[data-content="drainage"] .lv-turf figcaption .lv-h3{font-size:21px;margin-bottom:10px} main.v3[data-content="drainage"] .lv-legend.is-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:28px} main.v3[data-content="drainage"] .lv-spread.is-ag .lv-photo{min-height:100%} main.v3[data-content="drainage"] .lv-facts{margin-top:clamp(40px,4vw,60px)} main.v3[data-content="drainage"] .fc-l{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px} main.v3[data-content="drainage"] .fc-l li{position:relative;display:flex;flex-direction:column;gap:10px;padding:24px 22px 26px;background:var(--paper);border:1px solid var(--line)} main.v3[data-content="drainage"] .fc-l li:last-child{background:var(--br-ink);border-color:var(--br-ink)} main.v3[data-content="drainage"] .fc-l li:last-child strong{color:var(--br-cream)} main.v3[data-content="drainage"] .fc-l li:last-child p{color:rgba(242,237,228,.74)} main.v3[data-content="drainage"] .fc-l li:last-child .fc-ic{border-color:rgba(217,183,126,.55);color:var(--br-gold)} main.v3[data-content="drainage"] .fc-ic{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;border:1px solid rgba(155,123,74,.45);color:var(--bronze);margin-bottom:6px} main.v3[data-content="drainage"] .fc-n{position:absolute;top:20px;right:20px;font-family:'Outfit',sans-serif;font-style:normal;font-size:14px;color:var(--bronze)} main.v3[data-content="drainage"] .fc-l strong{font-family:'Outfit',sans-serif;font-weight:400;font-size:21px;line-height:1.2;color:var(--ink)} main.v3[data-content="drainage"] .fc-l p{margin:0;font-size:14.5px;line-height:1.6;color:rgba(26,23,20,.72)} /* SVC-DT: photo + swap, palette, the approval gate */ main.v3[data-content="drainage"] .lv-spread.is-dt{grid-template-columns:minmax(0,6fr) minmax(0,6fr)} main.v3[data-content="drainage"] .lv-swap{display:grid;grid-template-columns:minmax(0,1fr) 34px minmax(0,1fr);align-items:center;gap:6px;padding:24px;background:var(--paper);border:1px solid var(--line)} main.v3[data-content="drainage"] .sw-p figure{margin:0;border:1px solid var(--line);background:#F5EFE4} main.v3[data-content="drainage"] .sw-p p{display:flex;flex-direction:column;gap:8px;margin:14px 0 0;font-family:'Outfit',sans-serif;font-size:17px;line-height:1.3;color:var(--ink)} main.v3[data-content="drainage"] .sw-k{display:flex;gap:2px;color:var(--la-water)} main.v3[data-content="drainage"] .sw-k .ic{width:18px;height:18px} main.v3[data-content="drainage"] .sw-p.is-b figure{border-color:rgba(166,124,63,.55);box-shadow:0 20px 40px -30px rgba(26,23,20,.5)} main.v3[data-content="drainage"] .sw-arrow{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--bronze);color:#FBF8F2;font-size:16px;margin-top:-50px} main.v3[data-content="drainage"] .la-swap,main.v3[data-content="drainage"] .la-pal{display:block;width:100%;height:auto} main.v3[data-content="drainage"] .la-swap .sky{fill:#F5EFE4} main.v3[data-content="drainage"] .la-swap .lawn{fill:#8E9A5A} main.v3[data-content="drainage"] .la-swap .blade path{fill:none;stroke:#6F7F3C;stroke-width:1.4;stroke-linecap:round} main.v3[data-content="drainage"] .la-swap .soil,main.v3[data-content="drainage"] .la-pal .soil{fill:#D9C8AC} main.v3[data-content="drainage"] .la-swap .spray{fill:none;stroke:var(--la-water);stroke-width:1.6;stroke-dasharray:3 5;opacity:.75} main.v3[data-content="drainage"] .la-swap .drop{fill:var(--la-water);opacity:.8} main.v3[data-content="drainage"] .la-swap .head{fill:var(--ink)} main.v3[data-content="drainage"] :is(.la-swap,.la-pal,.la-bed,.la-drip) .pl{fill:none;stroke:#6F7F3C;stroke-width:2;stroke-linecap:round} main.v3[data-content="drainage"] :is(.la-swap,.la-pal,.la-bed) .shrub{fill:#A7A86E;stroke:#6F6D45;stroke-width:1.2} main.v3[data-content="drainage"] :is(.la-swap,.la-pal,.la-bed) .spike{fill:none;stroke:#6F6D45;stroke-width:1.6;stroke-linecap:round} main.v3[data-content="drainage"] :is(.la-swap,.la-pal) .fl{fill:#9C88B8} main.v3[data-content="drainage"] .la-swap .mulch{fill:#8B6E4E} main.v3[data-content="drainage"] .la-swap .drip{stroke:#2E2A24;stroke-width:3} main.v3[data-content="drainage"] .la-swap .em{fill:var(--la-water)} main.v3[data-content="drainage"] .la-swap .rootz{fill:rgba(79,133,144,.22)} main.v3[data-content="drainage"] .lv-pal{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);gap:clamp(24px,3vw,48px);align-items:start;margin-top:clamp(40px,4vw,60px)} main.v3[data-content="drainage"] .pal-line{margin:0;padding-left:18px;border-left:2px solid var(--bronze);font-family:'Outfit',sans-serif;font-style:normal;font-size:19px;line-height:1.45;color:var(--ink)} main.v3[data-content="drainage"] .pal-l{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px} main.v3[data-content="drainage"] .pal-l li{display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line)} main.v3[data-content="drainage"] .pal-l figure{margin:0;padding:14px 14px 0;background:linear-gradient(180deg,#F7F2E8,#EFE6D5);border-bottom:1px solid var(--line)} main.v3[data-content="drainage"] .pal-l p{margin:0;padding:14px 16px 18px;font-size:14.5px;line-height:1.5;color:var(--ink)} main.v3[data-content="drainage"] .la-pal .mat{fill:#8FA06A;stroke:#5E6E3A;stroke-width:1} main.v3[data-content="drainage"] .la-pal .chip{fill:#8B6E4E} main.v3[data-content="drainage"] .la-pal .hold{fill:var(--la-water);opacity:.7} main.v3[data-content="drainage"] .la-pal .stone{fill:#B4A890;stroke:rgba(26,23,20,.4);stroke-width:1} main.v3[data-content="drainage"] .la-pal :is(.rain,.soak){stroke:var(--la-water);stroke-width:1.6;stroke-dasharray:3 4;fill:none} main.v3[data-content="drainage"] .la-pal .rain-h{fill:none;stroke:var(--la-water);stroke-width:1.6;stroke-linecap:round} main.v3[data-content="drainage"] .la-pal .roof{fill:#CDBFA6;stroke:var(--ink);stroke-width:1.2} main.v3[data-content="drainage"] .la-pal .chain{stroke:var(--ink);stroke-width:1.2} main.v3[data-content="drainage"] .la-pal .link{fill:none;stroke:var(--bronze);stroke-width:1.6} main.v3[data-content="drainage"] .la-pal .creek{fill:none;stroke:var(--la-water);stroke-width:5;stroke-linecap:round;opacity:.5} main.v3[data-content="drainage"] .lv-gate{margin-top:clamp(40px,4vw,60px);padding:clamp(26px,3vw,40px);background:var(--br-ink);color:var(--br-cream)} main.v3[data-content="drainage"] .lv-gate .lv-h3{color:var(--br-cream)} main.v3[data-content="drainage"] .lv-gate ol{list-style:none;margin:8px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr)) 150px repeat(4,minmax(0,1fr));gap:0;position:relative} main.v3[data-content="drainage"] .lv-gate ol::before{content:'';position:absolute;left:20px;right:20px;top:20px;height:1px;background:rgba(217,183,126,.45)} main.v3[data-content="drainage"] .lv-gate li{position:relative;padding-right:18px} main.v3[data-content="drainage"] .gt-n{position:relative;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--br-ink);border:1px solid rgba(217,183,126,.6);font-family:'Outfit',sans-serif;font-style:normal;font-size:14px;color:var(--br-gold)} main.v3[data-content="drainage"] .lv-gate li.is-post .gt-n{background:#2A251E} main.v3[data-content="drainage"] .lv-gate p{margin:14px 0 0;font-size:14.5px;line-height:1.5;color:rgba(242,237,228,.84)} main.v3[data-content="drainage"] .gt-gate{display:flex;flex-direction:column;align-items:center;gap:10px;padding:0 10px !important;text-align:center} main.v3[data-content="drainage"] .gt-lock{position:relative;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--br-gold);color:var(--br-ink)} main.v3[data-content="drainage"] .gt-lock .ic{width:20px;height:20px} main.v3[data-content="drainage"] .gt-gate::before{content:'';position:absolute;left:50%;top:-14px;bottom:-14px;width:2px;margin-left:-1px;background:repeating-linear-gradient(180deg,var(--br-gold) 0 6px,transparent 6px 11px)} main.v3[data-content="drainage"] .gt-t{position:relative;padding:6px 10px;background:var(--br-ink);border:1px solid rgba(217,183,126,.6);font-family:'Inter',sans-serif;font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--br-gold);white-space:nowrap} /* SVC-IR: photo + zone plan, drip against spray, the rail */ main.v3[data-content="drainage"] .lv-spread.is-ir{grid-template-columns:minmax(0,5fr) minmax(0,7fr)} main.v3[data-content="drainage"] .lv-zone{display:flex;flex-direction:column;justify-content:space-between;gap:16px;margin:0;padding:26px 28px;background:var(--paper);border:1px solid var(--line)} main.v3[data-content="drainage"] .lv-zone-cv .dg{max-height:330px} main.v3[data-content="drainage"] .zn-k{display:flex;align-items:center;gap:10px;font-family:'Outfit',sans-serif;font-size:21px;color:var(--ink)} main.v3[data-content="drainage"] .zn-k .ic{color:var(--bronze)} main.v3[data-content="drainage"] .zn-t{margin:8px 0 0;font-size:14.5px;line-height:1.6;color:rgba(26,23,20,.7)} main.v3[data-content="drainage"] .lv-cmp{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,4vw,64px);align-items:center;margin-top:clamp(40px,4vw,60px)} main.v3[data-content="drainage"] .cmp-dg{margin:0;padding:18px;background:var(--paper);border:1px solid var(--line)} main.v3[data-content="drainage"] .la-drip{display:block;width:100%;height:auto} main.v3[data-content="drainage"] .la-drip .p{fill:#F5EFE4} main.v3[data-content="drainage"] .la-drip .lawn{fill:#8E9A5A} main.v3[data-content="drainage"] .la-drip .blade path{fill:none;stroke:#6F7F3C;stroke-width:1.4;stroke-linecap:round} main.v3[data-content="drainage"] .la-drip .walk{fill:#CFC6B6;stroke:rgba(26,23,20,.4);stroke-width:1} main.v3[data-content="drainage"] .la-drip .soil{fill:#D9C8AC} main.v3[data-content="drainage"] .la-drip .head{fill:var(--ink)} main.v3[data-content="drainage"] .la-drip .spray{fill:none;stroke:var(--la-water);stroke-width:1.8;stroke-dasharray:3 5;animation:laFlow 1.4s linear infinite} main.v3[data-content="drainage"] .la-drip .wind{fill:none;stroke:rgba(26,23,20,.35);stroke-width:1.4;stroke-linecap:round} main.v3[data-content="drainage"] .la-drip .run{fill:none;stroke:var(--la-water);stroke-width:2;opacity:.7} main.v3[data-content="drainage"] .la-drip .mulch{fill:#8B6E4E} main.v3[data-content="drainage"] .la-drip .tube{stroke:#2E2A24;stroke-width:3.4} main.v3[data-content="drainage"] .la-drip .em{fill:var(--la-water)} main.v3[data-content="drainage"] .la-drip .wet{fill:rgba(79,133,144,.24);animation:laWet 3s ease-in-out infinite} main.v3[data-content="drainage"] .la-drip .lb{font-family:'Inter',sans-serif;font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;fill:var(--bronze)} @keyframes laWet{0%,100%{opacity:.55}50%{opacity:1}} main.v3[data-content="drainage"] .op-l{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)} main.v3[data-content="drainage"] .op-l li{display:grid;grid-template-columns:46px minmax(0,1fr);gap:18px;padding:18px 0;border-bottom:1px solid var(--line)} main.v3[data-content="drainage"] .op-ic{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;border:1px solid rgba(155,123,74,.45);color:var(--bronze)} main.v3[data-content="drainage"] .op-l strong{display:block;font-family:'Outfit',sans-serif;font-weight:400;font-size:20px;line-height:1.25;color:var(--ink)} main.v3[data-content="drainage"] .op-l p{margin:5px 0 0;font-size:14.5px;line-height:1.6;color:rgba(26,23,20,.72)} /* ---------- CAT-LAND-05 the bed, step by step ---------- */ main.v3[data-content="drainage"] .la-order{background:var(--br-ink)} main.v3[data-content="drainage"] .od-l{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px} main.v3[data-content="drainage"] .od-l li{display:flex;flex-direction:column;background:#F5EFE4;border:1px solid rgba(217,183,126,.25)} main.v3[data-content="drainage"] .od-l figure{margin:0;padding:16px 16px 0;border-bottom:1px solid var(--line)} main.v3[data-content="drainage"] .od-b{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;align-items:baseline;padding:18px 22px 22px} main.v3[data-content="drainage"] .od-n{font-family:'Outfit',sans-serif;font-style:normal;font-weight:300;font-size:40px;line-height:.9;color:var(--bronze)} main.v3[data-content="drainage"] .od-b p{margin:0;font-family:'Outfit',sans-serif;font-size:18.5px;line-height:1.4;color:var(--ink)} main.v3[data-content="drainage"] .od-line{margin:clamp(34px,3.4vw,48px) 0 0;max-width:46ch;padding-left:22px;border-left:2px solid var(--br-gold);font-family:'Outfit',sans-serif;font-style:normal;font-weight:300;font-size:clamp(21px,1.8vw,26px);line-height:1.45;color:var(--br-cream)} main.v3[data-content="drainage"] .la-bed{display:block;width:100%;height:auto} main.v3[data-content="drainage"] .la-bed .soil{fill:#E3D5BF} main.v3[data-content="drainage"] .la-bed .wall{fill:#D9CDB8;stroke:var(--ink);stroke-width:1.2} main.v3[data-content="drainage"] .la-bed .win{fill:#F5EFE4;stroke:rgba(26,23,20,.5);stroke-width:1} main.v3[data-content="drainage"] .la-bed .grade{stroke:var(--ink);stroke-width:1.6} main.v3[data-content="drainage"] .la-bed .water{stroke:var(--la-water);stroke-width:1.6;stroke-dasharray:4 4;fill:none} main.v3[data-content="drainage"] .la-bed .water-h{fill:none;stroke:var(--la-water);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round} main.v3[data-content="drainage"] .la-bed .roots path{fill:none;stroke:#8B6E4E;stroke-width:1.6;stroke-linecap:round} main.v3[data-content="drainage"] .la-bed .roots-out{fill:none;stroke:#8B6E4E;stroke-width:1.6;stroke-linecap:round} main.v3[data-content="drainage"] .la-bed .lift,main.v3[data-content="drainage"] .la-bed .lift-h{fill:none;stroke:var(--bronze);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} main.v3[data-content="drainage"] .la-bed .topsoil{fill:#B9A285} main.v3[data-content="drainage"] .la-bed .tube{stroke:#2E2A24;stroke-width:3} main.v3[data-content="drainage"] .la-bed .em{fill:var(--la-water)} main.v3[data-content="drainage"] .la-bed .valve{fill:#FBF8F2;stroke:var(--la-water);stroke-width:1.2} main.v3[data-content="drainage"] .la-bed .mulch{fill:#8B6E4E} main.v3[data-content="drainage"] .la-bed .stone{fill:#B4A890;stroke:rgba(26,23,20,.4);stroke-width:1} main.v3[data-content="drainage"] .la-bed .is-new{filter:drop-shadow(0 0 5px rgba(217,183,126,.9))} main.v3[data-content="drainage"] .la-bed .topsoil.is-new{fill:#C29A5E} main.v3[data-content="drainage"] .la-bed .s1.is-new .grade{stroke:var(--bronze);stroke-width:2.6} /* ---------- CAT-LAND-06 where planting fits ---------- */ main.v3[data-content="drainage"] .ft-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(36px,5vw,90px);align-items:center} main.v3[data-content="drainage"] .ft-text .br-head{margin-bottom:22px} main.v3[data-content="drainage"] .ft-p{max-width:46ch;font-size:16px;line-height:1.7} main.v3[data-content="drainage"] .ft-l{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;position:relative} main.v3[data-content="drainage"] .ft-l::before{content:'';position:absolute;left:12%;right:12%;top:46px;height:1px;background:repeating-linear-gradient(90deg,var(--bronze) 0 8px,transparent 8px 14px)} main.v3[data-content="drainage"] .ft-l li>*{position:relative;display:flex;flex-direction:column;align-items:center;gap:10px;padding:0 8px;text-align:center;color:inherit;text-decoration:none} main.v3[data-content="drainage"] .ft-ic{display:grid;place-items:center;width:92px;height:92px;border-radius:50%;background:var(--paper);border:1px solid var(--line);color:var(--bronze);transition:background .3s,color .3s,transform .4s var(--ease)} main.v3[data-content="drainage"] .ft-ic .ic{width:30px;height:30px} main.v3[data-content="drainage"] .ft-l a:hover .ft-ic{transform:translateY(-4px);border-color:var(--bronze)} main.v3[data-content="drainage"] .ft-n{font-family:'Outfit',sans-serif;font-style:normal;font-size:14px;color:var(--bronze)} main.v3[data-content="drainage"] .ft-l strong{font-family:'Outfit',sans-serif;font-weight:400;font-size:19px;line-height:1.25;color:var(--ink)} main.v3[data-content="drainage"] .ft-l em{font-style:normal;font-family:'Inter',sans-serif;font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#FBF8F2;background:var(--bronze);padding:6px 10px} main.v3[data-content="drainage"] .ft-l li.is-now .ft-ic{background:var(--br-ink);border-color:var(--br-ink);color:var(--br-gold);box-shadow:0 0 0 8px rgba(166,124,63,.14)} /* ---------- CAT-LAND-07 project ---------- */ main.v3[data-content="drainage"] .la-work .wk-main{min-height:clamp(440px,40vw,580px)} main.v3[data-content="drainage"] .wk-tags{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px} main.v3[data-content="drainage"] .wk-tags li{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;background:rgba(242,237,228,.12);border:1px solid rgba(242,237,228,.24);font-family:'Inter',sans-serif;font-size:12px;font-weight:500;color:var(--br-cream)} main.v3[data-content="drainage"] .wk-tags .ic{width:16px;height:16px;color:var(--br-gold)} /* ---------- CAT-LAND-08 rules ---------- */ main.v3[data-content="drainage"] .rbox{display:grid;grid-template-columns:minmax(0,3.2fr) minmax(0,8.8fr);background:var(--paper);border:1px solid var(--line)} main.v3[data-content="drainage"] .rtabs{display:flex;flex-direction:column;border-right:1px solid var(--line);background:#F6F0E5} main.v3[data-content="drainage"] .rtabs input{position:absolute;opacity:0;pointer-events:none} main.v3[data-content="drainage"] .rt{display:flex;align-items:center;gap:14px;padding:16px 22px;border-bottom:1px solid var(--line);cursor:pointer;transition:background .3s} main.v3[data-content="drainage"] .rt:hover{background:rgba(166,124,63,.07)} main.v3[data-content="drainage"] .rt-ic{flex:0 0 38px;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;border:1px solid rgba(155,123,74,.4);color:var(--bronze)} main.v3[data-content="drainage"] .rt-ic .ic{width:18px;height:18px} main.v3[data-content="drainage"] .rt-t{font-family:'Outfit',sans-serif;font-size:18px;line-height:1.25;color:var(--ink)} main.v3[data-content="drainage"] .rtabs input:checked+.rt{background:var(--br-ink)} main.v3[data-content="drainage"] .rtabs input:checked+.rt .rt-t{color:var(--br-cream)} main.v3[data-content="drainage"] .rtabs input:checked+.rt .rt-ic{border-color:rgba(217,183,126,.6);color:var(--br-gold)} main.v3[data-content="drainage"] .rtabs input:focus-visible+.rt{outline:2px solid var(--bronze);outline-offset:-2px} main.v3[data-content="drainage"] .rp{display:none;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,3vw,44px);align-items:center;padding:clamp(26px,3vw,44px);animation:laIn .5s var(--ease)} @keyframes laIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} main.v3[data-content="drainage"] .rbox:has(#la-rule-1:checked) .rp[data-n="1"],main.v3[data-content="drainage"] .rbox:has(#la-rule-2:checked) .rp[data-n="2"],main.v3[data-content="drainage"] .rbox:has(#la-rule-3:checked) .rp[data-n="3"],main.v3[data-content="drainage"] .rbox:has(#la-rule-4:checked) .rp[data-n="4"],main.v3[data-content="drainage"] .rbox:has(#la-rule-5:checked) .rp[data-n="5"],main.v3[data-content="drainage"] .rbox:has(#la-rule-6:checked) .rp[data-n="6"],main.v3[data-content="drainage"] .rbox:has(#la-rule-7:checked) .rp[data-n="7"]{display:grid} main.v3[data-content="drainage"] .rp-n{display:block;font-family:'Outfit',sans-serif;font-style:normal;font-weight:300;font-size:46px;line-height:1;color:var(--bronze)} main.v3[data-content="drainage"] .rp-t h3{margin:8px 0 14px;font-family:'Outfit',sans-serif;font-weight:400;font-size:clamp(26px,2.2vw,32px);line-height:1.15;color:var(--ink)} main.v3[data-content="drainage"] .rp-t p{margin:0 0 12px;font-size:15.5px;line-height:1.7;color:rgba(26,23,20,.8)} main.v3[data-content="drainage"] .rz-art{display:grid;place-items:center;min-height:300px;background:linear-gradient(180deg,#F7F2E8,#EDE3D1);border:1px solid var(--line)} main.v3[data-content="drainage"] .rz-art.is-icon .rz-ic{display:grid;place-items:center;width:150px;height:150px;border-radius:50%;background:var(--paper);border:1px solid rgba(155,123,74,.4);color:var(--bronze);box-shadow:0 0 0 18px rgba(166,124,63,.07),0 0 0 36px rgba(166,124,63,.04)} main.v3[data-content="drainage"] .rz-art.is-icon .ic{width:58px;height:58px;stroke-width:1.1} main.v3[data-content="drainage"] .rz-svg{display:block;width:100%;max-width:420px;height:auto;padding:16px} main.v3[data-content="drainage"] .rz-svg .gnd{stroke:var(--ink);stroke-width:1.4} main.v3[data-content="drainage"] .rz-svg .rootz{fill:rgba(166,124,63,.14);stroke:var(--bronze);stroke-width:1.4;stroke-dasharray:5 4} main.v3[data-content="drainage"] .rz-svg .trunk{fill:none;stroke:#6E5A40;stroke-width:5;stroke-linecap:round} main.v3[data-content="drainage"] .rz-svg .crown{fill:#8E9A5A;opacity:.85} main.v3[data-content="drainage"] .rz-svg .crown2{fill:#7E8A4A;opacity:.8} main.v3[data-content="drainage"] .rz-svg .drip{stroke:var(--ink);stroke-width:1.2;stroke-dasharray:3 4} main.v3[data-content="drainage"] .rz-svg .roots{fill:none;stroke:#8B6E4E;stroke-width:1.6;stroke-linecap:round} main.v3[data-content="drainage"] .rz-svg .lb{font-family:'Inter',sans-serif;font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;fill:var(--bronze)} main.v3[data-content="drainage"] .rz-svg .zone2{fill:rgba(111,109,69,.12);stroke:rgba(111,109,69,.5);stroke-width:1;stroke-dasharray:4 4} main.v3[data-content="drainage"] .rz-svg .zone0{fill:#F3E7D2;stroke:var(--bronze);stroke-width:1.6} main.v3[data-content="drainage"] .rz-svg .house{fill:#DCD0BB;stroke:var(--ink);stroke-width:1.4} main.v3[data-content="drainage"] .rz-svg .roof{fill:none;stroke:var(--ink);stroke-width:1.4} main.v3[data-content="drainage"] .rz-svg .dim,main.v3[data-content="drainage"] .rz-svg .dim-h{stroke:var(--bronze);stroke-width:1.4} main.v3[data-content="drainage"] .rz-svg .tree{fill:#8E9A5A} main.v3[data-content="drainage"] .rz-svg .shrub{fill:#A7A86E} main.v3[data-content="drainage"] .rz-heat{display:grid;grid-template-rows:auto 1fr;min-height:300px;background:var(--br-ink);color:var(--br-cream);overflow:hidden} main.v3[data-content="drainage"] .rz-img{position:relative;height:150px;background-size:cover;background-position:center 40%} main.v3[data-content="drainage"] .rz-img::after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,var(--br-ink) 0%,rgba(22,19,15,0) 70%)} main.v3[data-content="drainage"] .rz-chart{padding:6px 24px 24px} main.v3[data-content="drainage"] .rz-k{margin:0 0 16px;font-family:'Inter',sans-serif;font-size:10.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--br-gold)} main.v3[data-content="drainage"] .hb{list-style:none;margin:0;padding:0;display:grid;gap:14px} main.v3[data-content="drainage"] .hb li{display:grid;grid-template-columns:minmax(0,1fr) 56px;grid-template-areas:"t v" "b b";gap:6px 10px;align-items:end} main.v3[data-content="drainage"] .hb-t{grid-area:t;font-size:13.5px;color:rgba(242,237,228,.8)} main.v3[data-content="drainage"] .hb-v{grid-area:v;text-align:right;font-family:'Outfit',sans-serif;font-size:26px;line-height:1;color:var(--br-cream)} main.v3[data-content="drainage"] .hb-b{grid-area:b;position:relative;height:10px;background:rgba(242,237,228,.1)} main.v3[data-content="drainage"] .hb-b::after{content:'';position:absolute;left:0;top:0;bottom:0;width:var(--h);background:linear-gradient(90deg,#D9B77E,#C0703F)} main.v3[data-content="drainage"] .hb li.is-cool .hb-b::after{background:linear-gradient(90deg,#8FB3B9,#4F8590)} main.v3[data-content="drainage"] .rnotes{display:flex;gap:14px;margin-top:22px;font-size:13px;line-height:1.6;color:rgba(26,23,20,.6)} main.v3[data-content="drainage"] .rnotes .ic{flex:0 0 18px;width:18px;height:18px;color:var(--bronze)} main.v3[data-content="drainage"] .rnotes p{margin:0} /* ---------- CAT-LAND-09 one project ---------- */ main.v3[data-content="drainage"] .la-team{background:var(--br-ink);color:var(--br-cream)} main.v3[data-content="drainage"] .la-team .tm-grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:clamp(40px,6vw,104px);align-items:center} main.v3[data-content="drainage"] .tm-lic{display:flex;gap:12px;margin:0 0 16px;font-size:15.5px;line-height:1.7;color:rgba(242,237,228,.84)} main.v3[data-content="drainage"] .tm-lic .ic{flex:0 0 22px;width:22px;height:22px;color:var(--br-gold);margin-top:3px} main.v3[data-content="drainage"] .tm-p{font-size:15.5px;line-height:1.7;color:rgba(242,237,228,.74)} main.v3[data-content="drainage"] .la-team .ghost-link{color:var(--br-cream);border-color:var(--br-gold)} main.v3[data-content="drainage"] .tm-sheets{position:relative;min-height:400px} main.v3[data-content="drainage"] .tm-sheets ol{list-style:none;margin:0;padding:0;position:relative;height:400px} main.v3[data-content="drainage"] .tm-sheets li{position:absolute;width:62%;padding:14px 14px 12px;background:#F7F2E8;border:1px solid rgba(217,183,126,.4);box-shadow:0 30px 60px -30px rgba(0,0,0,.7);transition:transform .6s var(--ease)} main.v3[data-content="drainage"] .tm-sheets li.sh1{left:0;top:0;transform:rotate(-4deg)} main.v3[data-content="drainage"] .tm-sheets li.sh2{left:19%;top:70px;transform:rotate(1.5deg)} main.v3[data-content="drainage"] .tm-sheets li.sh3{left:38%;top:140px;transform:rotate(4deg)} main.v3[data-content="drainage"] .tm-sheets:hover li.sh1{transform:rotate(-6deg) translate(-10px,-6px)} main.v3[data-content="drainage"] .tm-sheets:hover li.sh3{transform:rotate(6deg) translate(10px,6px)} main.v3[data-content="drainage"] .tm-sheets svg{display:block;width:100%;height:auto;background:#FBF8F2;border:1px solid var(--line)} main.v3[data-content="drainage"] .tm-sheets li span{display:flex;align-items:center;gap:10px;margin-top:10px;font-family:'Outfit',sans-serif;font-size:17px;color:var(--ink)} main.v3[data-content="drainage"] .tm-sheets li i{font-style:normal;font-size:13px;color:var(--bronze)} main.v3[data-content="drainage"] .tm-sheets .lt{fill:none;stroke:var(--ink);stroke-width:1.2} main.v3[data-content="drainage"] .tm-sheets .hs{fill:#DCD0BB} main.v3[data-content="drainage"] .tm-sheets .pt{fill:none;stroke:#D8C7A6;stroke-width:9;stroke-linecap:round} main.v3[data-content="drainage"] .tm-sheets .st{fill:#E4D8C2;stroke:rgba(26,23,20,.4)} main.v3[data-content="drainage"] .tm-sheets .bd{fill:rgba(126,138,74,.25);stroke:#6F6D45;stroke-width:1} main.v3[data-content="drainage"] .tm-sheets .pa{fill:#A7A86E;stroke:#6F6D45} main.v3[data-content="drainage"] .tm-sheets .pb{fill:#7F9077;stroke:#556B4E} main.v3[data-content="drainage"] .tm-sheets .zn{fill:none;stroke:var(--la-water);stroke-width:1.2;stroke-dasharray:5 3} main.v3[data-content="drainage"] .tm-sheets .tb{stroke:#2E2A24;stroke-width:2} main.v3[data-content="drainage"] .tm-sheets .vb{fill:#FBF8F2;stroke:var(--la-water)} main.v3[data-content="drainage"] .tm-stamp{position:absolute;right:2%;bottom:0;display:inline-flex;align-items:center;gap:10px;padding:12px 18px;background:var(--br-gold);color:var(--br-ink);font-family:'Inter',sans-serif;font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;transform:rotate(-3deg);box-shadow:0 20px 40px -20px rgba(0,0,0,.6)} main.v3[data-content="drainage"] .tm-stamp img{width:26px;height:26px;object-fit:contain;filter:brightness(.25)} /* ---------- responsive ---------- */ @media (max-width:1100px){ main.v3[data-content="drainage"] .la-hmenu{display:none} main.v3[data-content="drainage"] .st-grid,main.v3[data-content="drainage"] .lv-head,main.v3[data-content="drainage"] .lv-spread.is-ld,main.v3[data-content="drainage"] .lv-spread.is-ag,main.v3[data-content="drainage"] .lv-spread.is-dt,main.v3[data-content="drainage"] .lv-spread.is-ir,main.v3[data-content="drainage"] .lv-cmp,main.v3[data-content="drainage"] .lv-pal,main.v3[data-content="drainage"] .ft-grid,main.v3[data-content="drainage"] .la-team .tm-grid{grid-template-columns:1fr} main.v3[data-content="drainage"] .st-img{min-height:360px} main.v3[data-content="drainage"] .lv-photo{min-height:380px} main.v3[data-content="drainage"] .fc-l{grid-template-columns:repeat(2,minmax(0,1fr))} main.v3[data-content="drainage"] .fc-l li:last-child{grid-column:1 / -1} main.v3[data-content="drainage"] .pal-l{grid-template-columns:repeat(3,minmax(0,1fr))} main.v3[data-content="drainage"] .od-l{grid-template-columns:repeat(2,minmax(0,1fr))} main.v3[data-content="drainage"] .rbox{grid-template-columns:1fr} main.v3[data-content="drainage"] .rtabs{flex-direction:row;overflow-x:auto;border-right:0;border-bottom:1px solid var(--line);scrollbar-width:none} main.v3[data-content="drainage"] .rt{flex:0 0 auto;border-bottom:0;border-right:1px solid var(--line)} } @media (max-width:700px){ main.v3[data-content="drainage"] .svc-hero h1{max-width:13ch} main.v3[data-content="drainage"] .la-hmenu{display:block;position:relative;right:auto;bottom:auto;width:auto;margin:0 20px 34px;background:rgba(16,13,10,.72)} main.v3[data-content="drainage"] .st-img{min-height:300px} main.v3[data-content="drainage"] .st-row{grid-template-columns:40px minmax(0,1fr);grid-template-areas:"ic b" "ic to";gap:6px 14px;padding:16px 0} main.v3[data-content="drainage"] .st-n{display:none} main.v3[data-content="drainage"] .st-ic{grid-area:ic;width:40px;height:40px;align-self:start} main.v3[data-content="drainage"] .st-ic .ic{width:20px;height:20px} main.v3[data-content="drainage"] .st-b{grid-area:b} main.v3[data-content="drainage"] .st-to{grid-area:to;justify-self:start;margin-top:6px;padding:6px 10px;font-size:10px} main.v3[data-content="drainage"] .ln-bar{top:64px} main.v3[data-content="drainage"] .ln-in{gap:10px;padding:0 0 0 16px} main.v3[data-content="drainage"] .ln-k,main.v3[data-content="drainage"] .ln-cta{display:none} main.v3[data-content="drainage"] .ln-l a{padding:14px 10px;font-size:15px} main.v3[data-content="drainage"] .lv-num{font-size:52px} main.v3[data-content="drainage"] .lv-title h2{font-size:38px} main.v3[data-content="drainage"] .lv-action{padding:20px} main.v3[data-content="drainage"] .lv-calls{padding:16px 0} main.v3[data-content="drainage"] .lv-calls li{font-size:15px;padding:7px 12px} main.v3[data-content="drainage"] .lv-photo{min-height:280px} main.v3[data-content="drainage"] .lv-plan{padding:14px} main.v3[data-content="drainage"] .lv-plan .lv-legend{grid-template-columns:1fr} main.v3[data-content="drainage"] .lv-turf{padding:14px} main.v3[data-content="drainage"] .lv-legend.is-two{grid-template-columns:1fr} main.v3[data-content="drainage"] .lv-legend li{font-size:14px;padding:8px 10px} main.v3[data-content="drainage"] .lv-spread.is-ag .lv-photo{min-height:280px} main.v3[data-content="drainage"] .lv-rail ol{grid-template-columns:1fr;gap:0} main.v3[data-content="drainage"] .lv-rail ol::before{left:21px;right:auto;top:22px;bottom:22px;width:1px;height:auto;background:linear-gradient(180deg,var(--bronze),rgba(166,124,63,.25))} main.v3[data-content="drainage"] .lv-rail li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:16px;align-items:center;padding:0 0 16px} main.v3[data-content="drainage"] .lv-rail p{margin:0;font-size:17px} main.v3[data-content="drainage"] .fc-l{grid-template-columns:1fr;gap:10px} main.v3[data-content="drainage"] .fc-l li{padding:20px 18px} main.v3[data-content="drainage"] .lv-swap{grid-template-columns:1fr;padding:14px;gap:10px} main.v3[data-content="drainage"] .sw-arrow{margin:0 auto;transform:rotate(90deg)} main.v3[data-content="drainage"] .pal-l{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px} main.v3[data-content="drainage"] .pal-l li:last-child{grid-column:1 / -1} main.v3[data-content="drainage"] .pal-l li:last-child figure{display:flex;justify-content:center} main.v3[data-content="drainage"] .pal-l li:last-child .la-pal{max-width:50%} main.v3[data-content="drainage"] .pal-l p{font-size:13.5px;padding:12px 12px 14px} main.v3[data-content="drainage"] .lv-gate{padding:24px 18px} main.v3[data-content="drainage"] .lv-gate ol{grid-template-columns:1fr} main.v3[data-content="drainage"] .lv-gate ol::before{left:19px;right:auto;top:20px;bottom:20px;width:1px;height:auto} main.v3[data-content="drainage"] .lv-gate li{display:grid;grid-template-columns:40px minmax(0,1fr);gap:14px;align-items:center;padding:0 0 14px} main.v3[data-content="drainage"] .lv-gate p{margin:0} main.v3[data-content="drainage"] .gt-gate{flex-direction:row;padding:0 0 14px !important;gap:14px;text-align:left} main.v3[data-content="drainage"] .gt-gate::before{display:none} main.v3[data-content="drainage"] .lv-zone{padding:16px} main.v3[data-content="drainage"] .cmp-dg{padding:10px} main.v3[data-content="drainage"] .op-l li{grid-template-columns:40px minmax(0,1fr);gap:14px} main.v3[data-content="drainage"] .op-ic{width:40px;height:40px} main.v3[data-content="drainage"] .od-l{grid-template-columns:1fr;gap:12px} main.v3[data-content="drainage"] .od-b p{font-size:17px} main.v3[data-content="drainage"] .od-n{font-size:34px} main.v3[data-content="drainage"] .ft-l{grid-template-columns:1fr;gap:12px} main.v3[data-content="drainage"] .ft-l::before{left:45px;right:auto;top:30px;bottom:30px;width:1px;height:auto;background:repeating-linear-gradient(180deg,var(--bronze) 0 8px,transparent 8px 14px)} main.v3[data-content="drainage"] .ft-l li>*{flex-direction:row;text-align:left;gap:14px;padding:0} main.v3[data-content="drainage"] .ft-ic{width:92px;height:64px;border-radius:40px} main.v3[data-content="drainage"] .ft-n{display:none} main.v3[data-content="drainage"] .ft-l em{margin-left:auto} main.v3[data-content="drainage"] .la-work .wk-main{min-height:440px} main.v3[data-content="drainage"] .rt{padding:12px 14px;gap:10px} main.v3[data-content="drainage"] .rt-ic{flex-basis:32px;width:32px;height:32px} main.v3[data-content="drainage"] .rt-t{font-size:15.5px;white-space:nowrap} main.v3[data-content="drainage"] .rp{grid-template-columns:1fr;padding:18px} main.v3[data-content="drainage"] .rz-art{min-height:220px} main.v3[data-content="drainage"] .rz-art.is-icon .rz-ic{width:110px;height:110px} main.v3[data-content="drainage"] .tm-sheets{min-height:330px} main.v3[data-content="drainage"] .tm-sheets ol{height:330px} main.v3[data-content="drainage"] .tm-sheets li{width:70%} main.v3[data-content="drainage"] .tm-sheets li.sh2{left:15%;top:60px} main.v3[data-content="drainage"] .tm-sheets li.sh3{left:30%;top:120px} main.v3[data-content="drainage"] .tm-sheets li span{font-size:15px} main.v3[data-content="drainage"] .tm-stamp{right:0;bottom:-8px} } @media (prefers-reduced-motion:reduce){ main.v3[data-content="drainage"] .la-plan .pin .halo,main.v3[data-content="drainage"] .la-plan .flow,main.v3[data-content="drainage"] .la-turf .wd,main.v3[data-content="drainage"] .la-drip .spray,main.v3[data-content="drainage"] .la-drip .wet{animation:none} } /* ---------- self-review round (2026-10-16) ---------- */ main.v3[data-content="drainage"] .la-nav>.ln-bar{max-width:none;margin:0;padding:0} main.v3[data-content="drainage"] .st-img{background-position:center 78%} main.v3[data-content="drainage"] .lv-legend.is-two{grid-auto-flow:column;grid-template-rows:repeat(4,auto)} main.v3[data-content="drainage"] .la-drip .lb{font-size:17px;letter-spacing:.12em} main.v3[data-content="drainage"] .rz-svg .box{fill:#FBF8F2;stroke:var(--ink);stroke-width:1.4} main.v3[data-content="drainage"] .rz-svg .dial{fill:#F3E7D2;stroke:var(--bronze);stroke-width:1.6} main.v3[data-content="drainage"] .rz-svg .hand{stroke:var(--ink);stroke-width:2;stroke-linecap:round} main.v3[data-content="drainage"] .rz-svg .btn{fill:#E4D8C2;stroke:rgba(26,23,20,.4)} main.v3[data-content="drainage"] .rz-svg .btn.on{fill:var(--la-water)} main.v3[data-content="drainage"] .rz-svg .wire{fill:none;stroke:#2E2A24;stroke-width:2.4} main.v3[data-content="drainage"] .rz-svg .head{fill:var(--ink)} main.v3[data-content="drainage"] .rz-svg .spray{fill:none;stroke:var(--la-water);stroke-width:1.8;stroke-dasharray:3 5} main.v3[data-content="drainage"] .rz-svg .doc{fill:#FBF8F2;stroke:var(--ink);stroke-width:1.4} main.v3[data-content="drainage"] .rz-svg .ln{stroke:rgba(26,23,20,.3);stroke-width:2;stroke-linecap:round} main.v3[data-content="drainage"] .rz-svg .stamp circle,main.v3[data-content="drainage"] .rz-svg .ok circle{fill:var(--bronze)} main.v3[data-content="drainage"] .rz-svg .stamp path,main.v3[data-content="drainage"] .rz-svg .ok path{fill:none;stroke:#FBF8F2;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round} main.v3[data-content="drainage"] .rz-svg :is(.arw,.arw-h,.out,.out-h){fill:none;stroke:var(--bronze);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} main.v3[data-content="drainage"] .rz-svg .out{stroke-dasharray:4 4} main.v3[data-content="drainage"] .rz-svg .lawn,main.v3[data-content="drainage"] .rz-svg .turf{fill:#8E9A5A} main.v3[data-content="drainage"] .rz-svg .soil{fill:#D9C8AC} main.v3[data-content="drainage"] .rz-svg .hs{fill:#DCD0BB;stroke:var(--ink);stroke-width:1.3} main.v3[data-content="drainage"] .rz-svg .dr{fill:var(--ink)} main.v3[data-content="drainage"] .rz-svg .pl{fill:none;stroke:#6F7F3C;stroke-width:2;stroke-linecap:round} main.v3[data-content="drainage"] .rz-svg .sun{fill:#E7C88E;stroke:var(--bronze);stroke-width:1.2} main.v3[data-content="drainage"] .rz-svg .rays{stroke:var(--bronze);stroke-width:1.6;stroke-linecap:round} main.v3[data-content="drainage"] .rz-svg .th .tube{fill:#FBF8F2;stroke:var(--ink);stroke-width:1.3} main.v3[data-content="drainage"] .rz-svg .th.hot .lvl,main.v3[data-content="drainage"] .rz-svg .th.hot .bulb{fill:#C0703F} main.v3[data-content="drainage"] .rz-svg .th.cool .lvl,main.v3[data-content="drainage"] .rz-svg .th.cool .bulb{fill:#4F8590} main.v3[data-content="drainage"] .tm-sheets li span{margin:0 0 10px} main.v3[data-content="drainage"] .la-reading{background:var(--cream)} main.v3[data-content="drainage"] .rd-l{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:18px} main.v3[data-content="drainage"] .rd{display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line);color:inherit;text-decoration:none;transition:transform .45s var(--ease),box-shadow .45s var(--ease)} main.v3[data-content="drainage"] .rd:hover{transform:translateY(-4px);box-shadow:0 30px 50px -36px rgba(26,23,20,.55)} main.v3[data-content="drainage"] .rd-dg{margin:0;padding:22px 26px;background:linear-gradient(180deg,#F7F2E8,#EDE3D1);border-bottom:1px solid var(--line)} main.v3[data-content="drainage"] .rd-dg .dg{max-height:170px} main.v3[data-content="drainage"] .rd-b{display:flex;flex:1;flex-direction:column;gap:8px;padding:22px 26px 26px} main.v3[data-content="drainage"] .rd-k{font-family:'Inter',sans-serif;font-size:10.5px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--bronze)} main.v3[data-content="drainage"] .rd-b strong{font-family:'Outfit',sans-serif;font-weight:400;font-size:23px;line-height:1.2;color:var(--ink)} main.v3[data-content="drainage"] .rd-b>span:not(.rd-k):not(.rd-go){font-size:14.5px;line-height:1.55;color:rgba(26,23,20,.68)} main.v3[data-content="drainage"] .rd-go{margin-top:auto;padding-top:14px;font-family:'Inter',sans-serif;font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--ink)} @media (max-width:1100px){ main.v3[data-content="drainage"] .rd-l{grid-template-columns:1fr} main.v3[data-content="drainage"] .rd{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr)} main.v3[data-content="drainage"] .rd-dg{border-bottom:0;border-right:1px solid var(--line);display:grid;place-items:center} } @media (max-width:700px){ main.v3[data-content="drainage"] .lv-legend.is-two{grid-auto-flow:row;grid-template-rows:none} main.v3[data-content="drainage"] .ft-l li>*{display:grid;grid-template-columns:92px minmax(0,1fr);grid-template-areas:"ic t" "ic e";align-items:center;gap:4px 14px} main.v3[data-content="drainage"] .ft-ic{grid-area:ic} main.v3[data-content="drainage"] .ft-l strong{grid-area:t;align-self:end} main.v3[data-content="drainage"] .ft-l em{grid-area:e;justify-self:start;align-self:start;margin:0} main.v3[data-content="drainage"] .ft-l li:not(.is-now) strong{grid-row:1 / span 2;align-self:center} main.v3[data-content="drainage"] .rd{display:flex} main.v3[data-content="drainage"] .rd-dg{border-right:0;border-bottom:1px solid var(--line);padding:16px} main.v3[data-content="drainage"] .rd-b{padding:18px 18px 20px} main.v3[data-content="drainage"] .rd-b strong{font-size:21px} main.v3[data-content="drainage"] .tm-sheets li span{font-size:14px;margin-bottom:6px} } main.v3[data-content="drainage"]>section.la-nav>nav.ln-bar{max-width:none !important;margin:0 !important;padding:0 !important;width:auto} main.v3[data-content="drainage"] .rd-dg .mk{display:none} /* ================= WOW round (2026-10-16): critique fixes and the new moments ================= */ /* action card: the short license line with a link to "Who does the work" */ main.v3[data-content="drainage"] .lv-more{color:var(--br-gold);text-decoration:none;border-bottom:1px solid rgba(217,183,126,.5);white-space:nowrap} main.v3[data-content="drainage"] #who{scroll-margin-top:90px} /* SVC-AG: the turf through a lens */ main.v3[data-content="drainage"] .lv-macro{display:flex;flex-direction:column;margin:0;padding:26px 24px 24px;background:var(--br-ink);color:var(--br-cream)} main.v3[data-content="drainage"] .mc-k{margin:0;font-family:'Inter',sans-serif;font-size:11px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--br-gold)} main.v3[data-content="drainage"] .mc-h{margin:8px 0 0;font-family:'Outfit',sans-serif;font-weight:300;font-size:clamp(22px,1.8vw,26px);line-height:1.2;color:var(--br-cream)} main.v3[data-content="drainage"] .mc-cv{margin:18px auto 14px;width:100%;max-width:300px} main.v3[data-content="drainage"] .la-macro{display:block;width:100%;height:auto;overflow:visible} main.v3[data-content="drainage"] .la-macro .sky{fill:#EFE7D6} main.v3[data-content="drainage"] .la-macro .gb{fill:#D9CDB8} main.v3[data-content="drainage"] .la-macro .stones ellipse{fill:#B4A890;stroke:rgba(26,23,20,.35);stroke-width:.8} main.v3[data-content="drainage"] .la-macro .wd{stroke:var(--la-water);stroke-width:2.4;stroke-dasharray:4 5;fill:none;animation:laFlow 1.2s linear infinite reverse} main.v3[data-content="drainage"] .la-macro .tape{fill:#D9B77E} main.v3[data-content="drainage"] .la-macro .back{fill:#4E4A3A} main.v3[data-content="drainage"] .la-macro .hole{fill:#EFE7D6} main.v3[data-content="drainage"] .la-macro .blades path{fill:none;stroke-width:2.6;stroke-linecap:round} main.v3[data-content="drainage"] .la-macro .b1{stroke:#7E8A4A} main.v3[data-content="drainage"] .la-macro .b2{stroke:#62722F} main.v3[data-content="drainage"] .la-macro .b3{stroke:#97A563} main.v3[data-content="drainage"] .la-macro .infill circle{fill:#B8925A} main.v3[data-content="drainage"] .la-macro .ring{fill:none;stroke:var(--br-gold);stroke-width:3} main.v3[data-content="drainage"] .la-macro .ring2{fill:none;stroke:rgba(217,183,126,.3);stroke-width:1.2} main.v3[data-content="drainage"] .la-macro .pin circle{fill:var(--bronze);stroke:#FBF8F2;stroke-width:2} main.v3[data-content="drainage"] .la-macro .pin text{font-family:'Inter',sans-serif;font-size:10px;font-weight:700;fill:#FBF8F2} main.v3[data-content="drainage"] .mc-l{list-style:none;margin:0;padding:0;border-top:1px solid rgba(242,237,228,.14)} main.v3[data-content="drainage"] .mc-l li{display:flex;align-items:center;gap:12px;padding:8px 0;border-bottom:1px solid rgba(242,237,228,.1);font-size:14px;line-height:1.35;color:rgba(242,237,228,.86)} main.v3[data-content="drainage"] .mc-n{flex:0 0 26px;height:26px;display:grid;place-items:center;border-radius:50%;background:var(--bronze);font-family:'Inter',sans-serif;font-size:10px;font-weight:700;color:#FBF8F2} main.v3[data-content="drainage"] .mc-f{margin-top:auto;padding-top:18px} /* SVC-AG: what to know, as a ruled spec table */ main.v3[data-content="drainage"] .lv-spec{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(28px,4vw,72px);align-items:start;margin-top:clamp(44px,4.4vw,64px)} main.v3[data-content="drainage"] .sp-h .lv-h3{font-size:clamp(26px,2.2vw,32px);font-weight:300} main.v3[data-content="drainage"] .sp-lead{margin:0;max-width:34ch;font-size:15.5px;line-height:1.65;color:rgba(26,23,20,.7)} main.v3[data-content="drainage"] .sp-l{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)} main.v3[data-content="drainage"] .sp-l li{display:grid;grid-template-columns:44px minmax(0,210px) minmax(0,1fr);gap:18px;align-items:baseline;padding:20px 0;border-bottom:1px solid var(--line)} main.v3[data-content="drainage"] .sp-n{font-family:'Outfit',sans-serif;font-style:normal;font-size:15px;color:var(--bronze)} main.v3[data-content="drainage"] .sp-lb{display:flex;align-items:center;gap:12px} main.v3[data-content="drainage"] .sp-lb .ic{flex:0 0 22px;width:22px;height:22px;color:var(--bronze);transform:translateY(3px)} main.v3[data-content="drainage"] .sp-lb strong{font-family:'Outfit',sans-serif;font-weight:400;font-size:21px;line-height:1.2;color:var(--ink)} main.v3[data-content="drainage"] .sp-l p{margin:0;font-size:15.5px;line-height:1.6;color:rgba(26,23,20,.76)} main.v3[data-content="drainage"] .sp-l li.is-alt{margin-top:14px;padding:22px 24px;background:var(--br-ink);border-bottom:0} main.v3[data-content="drainage"] .sp-l li.is-alt .sp-n,main.v3[data-content="drainage"] .sp-l li.is-alt .ic{color:var(--br-gold)} main.v3[data-content="drainage"] .sp-l li.is-alt strong{color:var(--br-cream)} main.v3[data-content="drainage"] .sp-l li.is-alt p{color:rgba(242,237,228,.8)} main.v3[data-content="drainage"] .sp-go{display:inline-block;margin-top:6px;font-family:'Inter',sans-serif;font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--br-gold);text-decoration:none;border-bottom:1px solid rgba(217,183,126,.6);padding-bottom:3px} main.v3[data-content="drainage"] .sp-go::after{content:' \2192'} /* SVC-DT: before and after slider */ main.v3[data-content="drainage"] .lv-ba{display:flex;flex-direction:column;margin:0;padding:20px;background:var(--paper);border:1px solid var(--line)} main.v3[data-content="drainage"] .ba-fr{position:relative;overflow:hidden;aspect-ratio:480/300;border:1px solid var(--line);touch-action:pan-y;user-select:none} main.v3[data-content="drainage"] .ba-a,main.v3[data-content="drainage"] .ba-b{position:absolute;inset:0} main.v3[data-content="drainage"] .ba-b{clip-path:inset(0 0 0 var(--p))} main.v3[data-content="drainage"] .la-ba{display:block;width:100%;height:100%} main.v3[data-content="drainage"] .ba-line{position:absolute;z-index:2;top:0;bottom:0;left:var(--p);width:2px;margin-left:-1px;background:#FBF8F2;box-shadow:0 0 0 1px rgba(26,23,20,.18);pointer-events:none} main.v3[data-content="drainage"] .ba-knob{position:absolute;top:50%;left:50%;display:flex;align-items:center;justify-content:center;gap:8px;width:48px;height:48px;margin:-24px 0 0 -24px;border-radius:50%;background:var(--bronze);border:2px solid #FBF8F2;box-shadow:0 10px 24px -8px rgba(26,23,20,.55);font-size:22px;line-height:1;color:#FBF8F2} main.v3[data-content="drainage"] .ba-tag{position:absolute;z-index:2;top:12px;padding:6px 11px;background:rgba(22,19,15,.8);font-family:'Inter',sans-serif;font-size:10.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:#F2EDE4;pointer-events:none} main.v3[data-content="drainage"] .ba-tag.is-a{left:12px} main.v3[data-content="drainage"] .ba-tag.is-b{right:12px;background:var(--bronze)} main.v3[data-content="drainage"] .ba-fr input{position:absolute;z-index:3;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;-webkit-appearance:none;appearance:none} main.v3[data-content="drainage"] .ba-fr:has(input:focus-visible){outline:2px solid var(--bronze);outline-offset:3px} main.v3[data-content="drainage"] .ba-cap{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:16px} main.v3[data-content="drainage"] .ba-cap p{display:flex;flex-direction:column;gap:8px;margin:0;font-family:'Outfit',sans-serif;font-size:17px;line-height:1.3;color:var(--ink)} main.v3[data-content="drainage"] .ba-cap p.is-b{text-align:right;align-items:flex-end} main.v3[data-content="drainage"] .ba-hint{margin:14px 0 0;text-align:center;font-family:'Inter',sans-serif;font-size:10.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--bronze)} main.v3[data-content="drainage"] .ba-hint::before,main.v3[data-content="drainage"] .ba-hint::after{content:'\2194';margin:0 10px;letter-spacing:0} main.v3[data-content="drainage"] .la-ba .sky{fill:#F5EFE4} main.v3[data-content="drainage"] .la-ba .sun{fill:#E7C88E;stroke:var(--bronze);stroke-width:1.2} main.v3[data-content="drainage"] .la-ba .rays{stroke:var(--bronze);stroke-width:1.6;stroke-linecap:round} main.v3[data-content="drainage"] .la-ba .wall{fill:#D9CDB8;stroke:var(--ink);stroke-width:1.2} main.v3[data-content="drainage"] .la-ba .win{fill:#F5EFE4;stroke:rgba(26,23,20,.55);stroke-width:1} main.v3[data-content="drainage"] .la-ba .eave{stroke:var(--ink);stroke-width:3} main.v3[data-content="drainage"] .la-ba .soil{fill:#D9C8AC} main.v3[data-content="drainage"] .la-ba .walk{fill:#CFC6B6;stroke:rgba(26,23,20,.4);stroke-width:1} main.v3[data-content="drainage"] .la-ba .lawn{fill:#8E9A5A} main.v3[data-content="drainage"] .la-ba .dry{fill:#BBA878} main.v3[data-content="drainage"] .la-ba .blade path{fill:none;stroke:#6F7F3C;stroke-width:1.4;stroke-linecap:round} main.v3[data-content="drainage"] .la-ba .roots path,main.v3[data-content="drainage"] .la-ba .deep{fill:none;stroke:#8B6E4E;stroke-width:1.4;stroke-linecap:round} main.v3[data-content="drainage"] .la-ba .spray{fill:none;stroke:var(--la-water);stroke-width:1.8;stroke-dasharray:3 5;animation:laFlow 1.4s linear infinite} main.v3[data-content="drainage"] .la-ba .drop{fill:var(--la-water);opacity:.8} main.v3[data-content="drainage"] .la-ba .head{fill:var(--ink)} main.v3[data-content="drainage"] .la-ba .run{fill:none;stroke:var(--la-water);stroke-width:2.2;opacity:.75} main.v3[data-content="drainage"] .la-ba .heat{fill:none;stroke:#C0703F;stroke-width:1.6;stroke-linecap:round;opacity:.7} main.v3[data-content="drainage"] .la-ba .mulch{fill:#8B6E4E} main.v3[data-content="drainage"] .la-ba .wetz{fill:rgba(79,133,144,.24);animation:laWet 3s ease-in-out infinite} main.v3[data-content="drainage"] .la-ba .em{fill:var(--la-water)} main.v3[data-content="drainage"] .la-ba .tube{stroke:#2E2A24;stroke-width:3} main.v3[data-content="drainage"] .la-ba .pl{fill:none;stroke:#6F7F3C;stroke-width:2.2;stroke-linecap:round} main.v3[data-content="drainage"] .la-ba .shrub{fill:#A7A86E;stroke:#6F6D45;stroke-width:1.2} main.v3[data-content="drainage"] .la-ba .spike{fill:none;stroke:#6F6D45;stroke-width:1.6;stroke-linecap:round} main.v3[data-content="drainage"] .la-ba .fl{fill:#9C88B8} main.v3[data-content="drainage"] .la-ba .trunk{fill:none;stroke:#6E5A40;stroke-width:4;stroke-linecap:round} main.v3[data-content="drainage"] .la-ba .canopy{fill:#8E9A5A;opacity:.92} main.v3[data-content="drainage"] .la-ba .canopy2{fill:#7E8A4A;opacity:.9} main.v3[data-content="drainage"] .la-ba .agave{fill:#8FA9A0;stroke:#5E7A70;stroke-width:1;stroke-linejoin:round} main.v3[data-content="drainage"] .la-ba .mat{fill:#8FA06A;stroke:#5E6E3A;stroke-width:1} main.v3[data-content="drainage"] .la-ba .stone{fill:#B4A890;stroke:rgba(26,23,20,.4);stroke-width:1} /* SVC-IR: one heading over the drawing and the options */ main.v3[data-content="drainage"] .lv-cmp{display:block} main.v3[data-content="drainage"] .cmp-h{font-size:clamp(26px,2.2vw,32px);font-weight:300;margin-bottom:22px} main.v3[data-content="drainage"] .cmp-g{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,4vw,64px);align-items:start} /* CAT-LAND-05: one bed, built up as the steps scroll */ main.v3[data-content="drainage"] .od-sc{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(36px,5vw,80px);align-items:start} main.v3[data-content="drainage"] .od-stage{position:sticky;top:112px;padding:22px 22px 18px;background:#F5EFE4;border:1px solid rgba(217,183,126,.3);box-shadow:0 40px 80px -50px rgba(0,0,0,.8)} main.v3[data-content="drainage"] .od-fig{margin:0} main.v3[data-content="drainage"] .od-meta{display:flex;align-items:center;gap:18px;margin-top:14px;padding-top:12px;border-top:1px solid var(--line)} main.v3[data-content="drainage"] .od-cnt{font-family:'Outfit',sans-serif;font-style:normal;font-size:15px;color:var(--bronze);white-space:nowrap} main.v3[data-content="drainage"] .od-cnt b{font-weight:400;font-size:28px;color:var(--ink)} main.v3[data-content="drainage"] .od-bar{position:relative;flex:1;height:2px;background:rgba(166,124,63,.2)} main.v3[data-content="drainage"] .od-bar i{position:absolute;left:0;top:0;bottom:0;width:calc(var(--k,6) / var(--n) * 100%);background:var(--bronze);transition:width .6s var(--ease)} main.v3[data-content="drainage"] .od-steps{list-style:none;margin:0;padding:0} main.v3[data-content="drainage"] .od-steps li{display:grid;grid-template-columns:64px minmax(0,1fr);gap:16px;align-items:baseline;padding:30px 0;border-top:1px solid rgba(242,237,228,.14);transition:opacity .5s var(--ease)} main.v3[data-content="drainage"] .od-steps li:last-child{border-bottom:1px solid rgba(242,237,228,.14)} main.v3[data-content="drainage"] .od-steps .od-n{font-family:'Outfit',sans-serif;font-style:normal;font-weight:300;font-size:46px;line-height:.9;color:var(--br-gold)} main.v3[data-content="drainage"] .od-steps p{margin:0;font-family:'Outfit',sans-serif;font-weight:300;font-size:clamp(21px,1.8vw,26px);line-height:1.35;color:var(--br-cream)} main.v3[data-content="drainage"] .la-order.is-js .od-steps li{min-height:40vh;align-content:center;opacity:.3} main.v3[data-content="drainage"] .la-order.is-js .od-steps li.is-on{opacity:1} main.v3[data-content="drainage"] .od-fig :is(.ly,.roots){transition:opacity .7s var(--ease),filter .7s var(--ease)} main.v3[data-content="drainage"] .od-fig[data-step="1"] :is(.k2,.k3,.k5,.k6,.only4),main.v3[data-content="drainage"] .od-fig[data-step="2"] :is(.k3,.k5,.k6,.only4),main.v3[data-content="drainage"] .od-fig[data-step="3"] :is(.k5,.k6,.only4),main.v3[data-content="drainage"] .od-fig[data-step="4"] :is(.k5,.k6,.roots),main.v3[data-content="drainage"] .od-fig[data-step="5"] :is(.k6,.only4,.roots),main.v3[data-content="drainage"] .od-fig[data-step="6"] :is(.only4,.roots){opacity:0} main.v3[data-content="drainage"] .od-fig[data-step="1"] .k1,main.v3[data-content="drainage"] .od-fig[data-step="2"] .k2,main.v3[data-content="drainage"] .od-fig[data-step="3"] .k3,main.v3[data-content="drainage"] .od-fig[data-step="4"] .only4,main.v3[data-content="drainage"] .od-fig[data-step="5"] .k5,main.v3[data-content="drainage"] .od-fig[data-step="6"] .k6{filter:drop-shadow(0 0 5px rgba(217,183,126,.95))} main.v3[data-content="drainage"] .od-fig[data-step="3"] .topsoil{fill:#C29A5E} main.v3[data-content="drainage"] .od-fig[data-step="1"] .grade{stroke:var(--bronze);stroke-width:2.6} /* CAT-LAND-07: the project as a split feature */ main.v3[data-content="drainage"] .wk-split{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);min-height:clamp(480px,40vw,580px);background:var(--br-ink);color:var(--br-cream);overflow:hidden} main.v3[data-content="drainage"] .wk-ph-l{position:relative;display:block;overflow:hidden;min-height:320px} main.v3[data-content="drainage"] .wk-ph-l:hover .wk-img{transform:scale(1.04)} main.v3[data-content="drainage"] .wk-panel{display:flex;flex-direction:column;padding:clamp(30px,3.4vw,52px)} main.v3[data-content="drainage"] .wk-k{margin:0 0 14px;font-family:'Inter',sans-serif;font-size:11px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--br-gold)} main.v3[data-content="drainage"] .wk-panel h3{margin:0;font-family:'Outfit',sans-serif;font-weight:300;font-size:clamp(28px,2.6vw,40px);line-height:1.1;color:var(--br-cream)} main.v3[data-content="drainage"] .wk-panel h3 a{color:inherit;text-decoration:none} main.v3[data-content="drainage"] .wk-sub{margin:16px 0 0;font-size:15.5px;line-height:1.65;color:rgba(242,237,228,.78)} main.v3[data-content="drainage"] .wk-ph{margin:30px 0 14px;font-family:'Inter',sans-serif;font-size:10.5px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:rgba(242,237,228,.55)} main.v3[data-content="drainage"] .wk-proc{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));position:relative} main.v3[data-content="drainage"] .wk-proc::before{content:'';position:absolute;left:22px;right:22px;top:22px;height:1px;background:repeating-linear-gradient(90deg,rgba(217,183,126,.7) 0 6px,transparent 6px 11px)} main.v3[data-content="drainage"] .wk-proc li{position:relative;display:flex;flex-direction:column;gap:6px;padding-right:8px} main.v3[data-content="drainage"] .wp-ic{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--br-ink);border:1px solid rgba(217,183,126,.55);color:var(--br-gold)} main.v3[data-content="drainage"] .wp-ic .ic{width:19px;height:19px} main.v3[data-content="drainage"] .wk-proc li:last-child .wp-ic{background:var(--br-gold);color:var(--br-ink);border-color:var(--br-gold)} main.v3[data-content="drainage"] .wp-n{margin-top:6px;font-family:'Outfit',sans-serif;font-style:normal;font-size:13px;color:var(--br-gold)} main.v3[data-content="drainage"] .wp-t{font-family:'Outfit',sans-serif;font-size:16.5px;line-height:1.25;color:var(--br-cream)} main.v3[data-content="drainage"] .wk-panel .wk-go{align-self:flex-start;margin-top:auto;padding-top:0;transform:translateY(0)} main.v3[data-content="drainage"] .wk-panel .wk-proc+.wk-go,main.v3[data-content="drainage"] .wk-panel .wk-sub+.wk-go{margin-top:34px} main.v3[data-content="drainage"] .wk-panel .wk-go{text-decoration:none} /* CAT-LAND-08: the panel fills the height of the tabs; the drawing is larger */ main.v3[data-content="drainage"] .rpanes{display:grid} main.v3[data-content="drainage"] .rp{height:100%;align-items:stretch} main.v3[data-content="drainage"] .rp .rz-art,main.v3[data-content="drainage"] .rp .rz-heat{height:100%;min-height:340px} main.v3[data-content="drainage"] .rp-t{align-self:center} main.v3[data-content="drainage"] .rz-svg{max-width:470px} /* CAT-LAND-12: the license card sits level with its heading */ main.v3[data-content="drainage"] section.s-receipts.tr3 .tr-grid{align-items:start} @media (max-width:1100px){ main.v3[data-content="drainage"] .lv-spec,main.v3[data-content="drainage"] .cmp-g,main.v3[data-content="drainage"] .od-sc,main.v3[data-content="drainage"] .wk-split{grid-template-columns:1fr} main.v3[data-content="drainage"] .lv-macro{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);column-gap:28px;align-items:center} main.v3[data-content="drainage"] .lv-macro .mc-k,main.v3[data-content="drainage"] .lv-macro .mc-h{grid-column:1 / -1} main.v3[data-content="drainage"] .lv-macro .mc-f{grid-column:1 / -1} main.v3[data-content="drainage"] .od-stage{top:72px;z-index:2} main.v3[data-content="drainage"] .wk-ph-l{aspect-ratio:16/10;min-height:0} } @media (max-width:700px){ main.v3[data-content="drainage"] .ln-l{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 22px,#000 calc(100% - 34px),transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 22px,#000 calc(100% - 34px),transparent 100%);padding-right:24px} main.v3[data-content="drainage"] .la-turf .pin,main.v3[data-content="drainage"] .la-plan .pin{transform-box:fill-box;transform-origin:center;transform:scale(1.6)} main.v3[data-content="drainage"] .lv-macro{display:flex;padding:22px 18px} main.v3[data-content="drainage"] .mc-cv{max-width:260px} main.v3[data-content="drainage"] .sp-l li{grid-template-columns:30px minmax(0,1fr);gap:4px 10px;padding:16px 0} main.v3[data-content="drainage"] .sp-l li p{grid-column:2} main.v3[data-content="drainage"] .sp-lb strong{font-size:19px} main.v3[data-content="drainage"] .sp-lb .ic{width:20px;height:20px;flex-basis:20px} main.v3[data-content="drainage"] .sp-l p{font-size:15px} main.v3[data-content="drainage"] .sp-l li.is-alt{padding:18px 16px} main.v3[data-content="drainage"] .lv-ba{padding:12px} main.v3[data-content="drainage"] .ba-knob{width:40px;height:40px;margin:-20px 0 0 -20px;font-size:19px} main.v3[data-content="drainage"] .ba-tag{top:8px;padding:4px 8px;font-size:9.5px} main.v3[data-content="drainage"] .ba-tag.is-a{left:8px} main.v3[data-content="drainage"] .ba-tag.is-b{right:8px} main.v3[data-content="drainage"] .ba-cap{gap:12px} main.v3[data-content="drainage"] .ba-cap p{font-size:15px} main.v3[data-content="drainage"] .od-stage{top:64px;padding:12px 12px 10px;margin:0 -6px} main.v3[data-content="drainage"] .od-meta{margin-top:8px;padding-top:8px} main.v3[data-content="drainage"] .od-cnt b{font-size:22px} main.v3[data-content="drainage"] .od-steps li{grid-template-columns:44px minmax(0,1fr);gap:12px;padding:22px 0} main.v3[data-content="drainage"] .la-order.is-js .od-steps li{min-height:34vh} main.v3[data-content="drainage"] .od-steps .od-n{font-size:34px} main.v3[data-content="drainage"] .od-steps p{font-size:20px} main.v3[data-content="drainage"] .ft-l li>*{grid-template-columns:64px minmax(0,1fr)} main.v3[data-content="drainage"] .ft-ic{width:64px;height:64px;aspect-ratio:1;flex:none;border-radius:50%} main.v3[data-content="drainage"] .ft-ic .ic{width:24px;height:24px} main.v3[data-content="drainage"] .ft-l::before{left:31px} main.v3[data-content="drainage"] .wk-panel{padding:26px 20px 28px} main.v3[data-content="drainage"] .wk-panel h3{font-size:28px} main.v3[data-content="drainage"] .wk-proc::before{left:18px;right:18px;top:18px} main.v3[data-content="drainage"] .wp-ic{width:36px;height:36px} main.v3[data-content="drainage"] .wp-ic .ic{width:16px;height:16px} main.v3[data-content="drainage"] .wp-t{font-size:14px} main.v3[data-content="drainage"] .rp .rz-art,main.v3[data-content="drainage"] .rp .rz-heat{height:auto;min-height:220px} main.v3[data-content="drainage"] .rv-yard .rcards3{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;margin:0 calc(var(--pad) * -1);padding:4px var(--pad) 14px;scroll-padding:0 var(--pad);scrollbar-width:none} main.v3[data-content="drainage"] .rv-yard .rcards3::-webkit-scrollbar{display:none} main.v3[data-content="drainage"] .rv-yard .rcardq{flex:0 0 84%;scroll-snap-align:start} main.v3[data-content="drainage"] .rv-yard .rcardq:hover{transform:none} main.v3[data-content="drainage"] .rv-yard .rcardq blockquote{font-size:17px} } @media (prefers-reduced-motion:reduce){ main.v3[data-content="drainage"] :is(.la-macro .wd,.la-ba .spray,.la-ba .wetz){animation:none} } @media (max-width:700px){ main.v3[data-content="drainage"] .pal-l{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:10px;margin:0 calc(var(--pad) * -1);padding:2px var(--pad) 12px;scroll-padding:0 var(--pad);scrollbar-width:none} main.v3[data-content="drainage"] .pal-l::-webkit-scrollbar{display:none} main.v3[data-content="drainage"] .pal-l li{flex:0 0 58%;scroll-snap-align:start} main.v3[data-content="drainage"] .pal-l li:last-child figure{display:block} main.v3[data-content="drainage"] .pal-l li:last-child .la-pal{max-width:none} } /* ================= hardscape's own layouts (inc/visuals-hardscape.php) ================= */ main.v3[data-content="drainage"]{--hs-stone:#BFAA8A;--hs-concrete:#CFCAC0} main.v3[data-content="drainage"] .svc-hero h1{max-width:16ch} main.v3[data-content="drainage"] .hs-spread .lv-photo{min-height:100%} main.v3[data-content="drainage"] .hs-fig{margin:0;padding:24px 26px;background:var(--paper);border:1px solid var(--line)} main.v3[data-content="drainage"] .hs-cv{margin:0 0 18px} main.v3[data-content="drainage"] .hs-fig svg{display:block;width:100%;height:auto;overflow:visible} main.v3[data-content="drainage"] .hs-fig figcaption .lv-h3{font-size:21px;margin-bottom:8px} main.v3[data-content="drainage"] .hs-figlead{margin:0 0 12px;font-size:14.5px;line-height:1.6;color:rgba(26,23,20,.68)} main.v3[data-content="drainage"] .hs-fig .lv-legend.is-two{grid-template-rows:repeat(3,auto)} main.v3[data-content="drainage"] .hs-fig .pin .dot{fill:var(--bronze);stroke:#FBF8F2;stroke-width:2} main.v3[data-content="drainage"] .hs-fig .pin text{font-family:'Inter',sans-serif;font-size:10px;font-weight:700;fill:#FBF8F2} main.v3[data-content="drainage"] .hs-fig :is(.g1,.g2,.g3,.g4,.g5,.g6,.pin){transition:opacity .35s} main.v3[data-content="drainage"] .hs-fig[data-focus] :is(.g1,.g2,.g3,.g4,.g5,.g6,.pin){opacity:.22} main.v3[data-content="drainage"] .hs-fig[data-focus="1"] :is(.g1,.p1),main.v3[data-content="drainage"] .hs-fig[data-focus="2"] :is(.g2,.p2),main.v3[data-content="drainage"] .hs-fig[data-focus="3"] :is(.g3,.p3),main.v3[data-content="drainage"] .hs-fig[data-focus="4"] :is(.g4,.p4),main.v3[data-content="drainage"] .hs-fig[data-focus="5"] :is(.g5,.p5),main.v3[data-content="drainage"] .hs-fig[data-focus="6"] :is(.g6,.p6){opacity:1} /* SVC-PV: photo + the paver section; the swatches beside the two paver notes */ main.v3[data-content="drainage"] .lv-spread.is-pv{grid-template-columns:minmax(0,4fr) minmax(0,8fr)} main.v3[data-content="drainage"] .hs-pv .wall{fill:#D9CDB8;stroke:var(--ink);stroke-width:1.2} main.v3[data-content="drainage"] .hs-pv .win{fill:#F5EFE4;stroke:rgba(26,23,20,.5)} main.v3[data-content="drainage"] .hs-pv .base{stroke:rgba(26,23,20,.35);stroke-width:1} main.v3[data-content="drainage"] .hs-pv .lyr{stroke:rgba(26,23,20,.32);stroke-width:1;stroke-dasharray:5 4;fill:none} main.v3[data-content="drainage"] .hs-pv .tamp{fill:none;stroke:var(--bronze);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round} main.v3[data-content="drainage"] .hs-pv .bed{stroke:rgba(26,23,20,.25);stroke-width:.8} main.v3[data-content="drainage"] .hs-pv .g1 rect{stroke:rgba(26,23,20,.35);stroke-width:.8} main.v3[data-content="drainage"] .hs-pv .jsand rect{fill:#C9A86A} main.v3[data-content="drainage"] .hs-pv .edge{fill:#4A443B} main.v3[data-content="drainage"] .hs-pv .spike{stroke:#4A443B;stroke-width:3;stroke-linecap:round} main.v3[data-content="drainage"] .hs-pv .flow{fill:none;stroke:var(--la-water);stroke-width:2;stroke-dasharray:6 5;animation:laFlow 1.4s linear infinite} main.v3[data-content="drainage"] .hs-pv .flow-h,main.v3[data-content="drainage"] .hs-pv .run{fill:none;stroke:var(--la-water);stroke-width:2;stroke-linecap:round;stroke-linejoin:round} main.v3[data-content="drainage"] .hs-pv .run{stroke-dasharray:3 4} main.v3[data-content="drainage"] .hs-cat{display:grid;grid-template-columns:minmax(0,9fr) minmax(0,3fr);gap:clamp(24px,3vw,48px);margin-top:clamp(40px,4vw,60px);align-items:start} main.v3[data-content="drainage"] .hs-swatches .lv-h3{margin-bottom:20px} main.v3[data-content="drainage"] .sw-l{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:14px} main.v3[data-content="drainage"] .sw-l li{display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line);transition:transform .45s var(--ease),box-shadow .45s var(--ease)} main.v3[data-content="drainage"] .sw-l li:hover{transform:translateY(-4px);box-shadow:0 30px 50px -36px rgba(26,23,20,.55)} main.v3[data-content="drainage"] .sw-l figure{position:relative;margin:0;aspect-ratio:3/2;overflow:hidden;border-bottom:1px solid var(--line)} main.v3[data-content="drainage"] .sw-l figure svg{display:block;width:100%;height:100%;transition:transform .8s var(--ease)} main.v3[data-content="drainage"] .sw-l li:hover figure svg{transform:scale(1.06)} main.v3[data-content="drainage"] .sw-l figure::after{content:'';position:absolute;inset:0;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18),inset 0 -40px 50px -30px rgba(14,12,10,.35);pointer-events:none} main.v3[data-content="drainage"] .sw-n{position:absolute;z-index:1;left:12px;top:10px;padding:3px 8px;background:rgba(22,19,15,.78);font-family:'Outfit',sans-serif;font-style:normal;font-size:13px;color:var(--br-gold)} main.v3[data-content="drainage"] .sw-b{padding:16px 18px 20px} main.v3[data-content="drainage"] .sw-b strong{display:block;font-family:'Outfit',sans-serif;font-weight:400;font-size:20px;line-height:1.2;color:var(--ink)} main.v3[data-content="drainage"] .sw-b p{margin:8px 0 0;font-size:14px;line-height:1.6;color:rgba(26,23,20,.7)} main.v3[data-content="drainage"] .hs-sw .vein{fill:none;stroke:rgba(140,128,110,.35);stroke-width:1.2} main.v3[data-content="drainage"] .hs-sw .grit circle{fill:#A99B84} main.v3[data-content="drainage"] .hs-sw .drop{fill:var(--la-water);opacity:.85} main.v3[data-content="drainage"] .hs-sw .wl{fill:#C8B79A;stroke:rgba(26,23,20,.4)} main.v3[data-content="drainage"] .hs-sw .wl-c{fill:none;stroke:rgba(26,23,20,.3);stroke-width:1.4} main.v3[data-content="drainage"] .hs-sw .cap{fill:#E2D6C2;stroke:var(--ink);stroke-width:1.4;stroke-linejoin:round} main.v3[data-content="drainage"] .hs-sw .dripe{stroke:var(--ink);stroke-width:1.4} main.v3[data-content="drainage"] .hs-sw .wtr{fill:none;stroke:var(--la-water);stroke-width:2;stroke-dasharray:4 4;stroke-linecap:round} main.v3[data-content="drainage"] .hs-sw .brm path{fill:none;stroke:rgba(110,104,94,.42);stroke-width:1.1} main.v3[data-content="drainage"] .hs-sw .cj{stroke:rgba(70,64,56,.55);stroke-width:2.2} main.v3[data-content="drainage"] .hs-sw .mot circle{fill:rgba(170,110,74,.28)} main.v3[data-content="drainage"] .hs-sw .fade{fill:rgba(255,248,236,.32)} main.v3[data-content="drainage"] .hs-sw .st-f{fill:#BCAC98;stroke:none} main.v3[data-content="drainage"] .hs-sw .st-g{fill:none;stroke:#7E6F5E;stroke-width:3.4;stroke-linecap:round} main.v3[data-content="drainage"] .hs-sw .sheen{stroke:rgba(255,255,255,.45);stroke-width:2;stroke-linecap:round} main.v3[data-content="drainage"] .hs-notes{position:sticky;top:130px;padding:24px 22px;background:var(--br-ink);color:var(--br-cream)} main.v3[data-content="drainage"] .nt-k{margin:0 0 16px;font-family:'Inter',sans-serif;font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--br-gold)} main.v3[data-content="drainage"] .hs-notes ul,main.v3[data-content="drainage"] .hs-ot-notes ul{list-style:none;margin:0;padding:0} main.v3[data-content="drainage"] .hs-notes li{display:grid;grid-template-columns:40px minmax(0,1fr);gap:14px;padding:16px 0;border-top:1px solid rgba(242,237,228,.14)} main.v3[data-content="drainage"] .nt-ic{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;border:1px solid rgba(217,183,126,.5);color:var(--br-gold)} main.v3[data-content="drainage"] .nt-ic .ic{width:19px;height:19px} main.v3[data-content="drainage"] .hs-notes strong{display:block;font-family:'Outfit',sans-serif;font-weight:400;font-size:19px;line-height:1.2;color:var(--br-cream)} main.v3[data-content="drainage"] .hs-notes p{margin:6px 0 0;font-size:14px;line-height:1.6;color:rgba(242,237,228,.74)} /* SVC-CO: the finish board beside the photo, then the pour in five frames */ main.v3[data-content="drainage"] .lv-spread.is-co{grid-template-columns:minmax(0,8fr) minmax(0,4fr)} main.v3[data-content="drainage"] .hs-finishes{padding:24px 26px 26px;background:var(--paper);border:1px solid var(--line)} main.v3[data-content="drainage"] .sw-l.is-board{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px} main.v3[data-content="drainage"] .sw-l.is-board li{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);background:#FBF8F2} main.v3[data-content="drainage"] .sw-l.is-board figure{aspect-ratio:auto;min-height:150px;border-bottom:0;border-right:1px solid var(--line)} main.v3[data-content="drainage"] .sw-l.is-board figure svg{position:absolute;inset:0;height:100%;width:100%} main.v3[data-content="drainage"] .sw-l.is-board .sw-b{display:flex;flex-direction:column;justify-content:center;padding:16px 18px} main.v3[data-content="drainage"] .hs-frames{margin-top:clamp(40px,4vw,60px)} main.v3[data-content="drainage"] .hs-frames ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:12px;counter-reset:none} main.v3[data-content="drainage"] .hs-frames li{display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line)} main.v3[data-content="drainage"] .hs-frames figure{margin:0;padding:12px 12px 4px;background:linear-gradient(180deg,#F7F2E8,#EDE3D1);border-bottom:1px solid var(--line)} main.v3[data-content="drainage"] .hs-pour{display:block;width:100%;height:auto} main.v3[data-content="drainage"] .hs-pour .base{stroke:rgba(26,23,20,.3);stroke-width:.8} main.v3[data-content="drainage"] .hs-pour .form{fill:#9C7B52} main.v3[data-content="drainage"] .hs-pour .stake{stroke:#7A5E3C;stroke-width:3;stroke-linecap:round} main.v3[data-content="drainage"] .hs-pour .steel{stroke:#5A544B;stroke-width:2.4;stroke-dasharray:10 3} main.v3[data-content="drainage"] .hs-pour .chair{fill:#5A544B} main.v3[data-content="drainage"] .hs-pour .slab{stroke:rgba(26,23,20,.4);stroke-width:1} main.v3[data-content="drainage"] .hs-pour .trowel{fill:#8B8478;stroke:var(--ink);stroke-width:1} main.v3[data-content="drainage"] .hs-pour .handle{fill:none;stroke:var(--ink);stroke-width:2.4;stroke-linecap:round} main.v3[data-content="drainage"] .hs-pour .sweep{fill:none;stroke:var(--bronze);stroke-width:1.6;stroke-dasharray:3 4} main.v3[data-content="drainage"] .hs-pour .joint{fill:#6F675B} main.v3[data-content="drainage"] .hs-pour .crack{fill:none;stroke:#4A443B;stroke-width:1.2} main.v3[data-content="drainage"] .hs-pour .saw{fill:none;stroke:var(--bronze);stroke-width:1.6} main.v3[data-content="drainage"] .hs-pour .seal{fill:none;stroke:#E6C98F;stroke-width:3} main.v3[data-content="drainage"] .hs-pour .sun{fill:#E7C88E;stroke:var(--bronze);stroke-width:1.2} main.v3[data-content="drainage"] .hs-pour .rays,main.v3[data-content="drainage"] .hs-pour .shine{stroke:var(--bronze);stroke-width:1.6;stroke-linecap:round} main.v3[data-content="drainage"] .hs-pour .arw,main.v3[data-content="drainage"] .hs-pour .arw-h{fill:none;stroke:var(--la-water);stroke-width:2;stroke-linecap:round;stroke-linejoin:round} main.v3[data-content="drainage"] .hs-pour .arw{stroke-dasharray:5 4} main.v3[data-content="drainage"] .hs-pour .new{filter:drop-shadow(0 0 4px rgba(217,183,126,.95))} main.v3[data-content="drainage"] .hs-pour path.new:not(.slab):not(.form):not(.joint){stroke:var(--bronze);stroke-width:2.4} main.v3[data-content="drainage"] .fr-b{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:baseline;padding:14px 16px 18px} main.v3[data-content="drainage"] .fr-n{font-family:'Outfit',sans-serif;font-style:normal;font-weight:300;font-size:30px;line-height:.9;color:var(--bronze)} main.v3[data-content="drainage"] .fr-b p{margin:0;font-family:'Outfit',sans-serif;font-size:16.5px;line-height:1.4;color:var(--ink)} /* SVC-OT: photo + two ways to set it, the two notes, the rail */ main.v3[data-content="drainage"] .lv-spread.is-ot{grid-template-columns:minmax(0,5fr) minmax(0,7fr)} main.v3[data-content="drainage"] .hs-ways{padding:24px 26px 26px;background:var(--paper);border:1px solid var(--line)} main.v3[data-content="drainage"] .wy-l{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px} main.v3[data-content="drainage"] .wy-l figure{position:relative;margin:0 0 14px;padding:10px;background:linear-gradient(180deg,#F7F2E8,#EDE3D1);border:1px solid var(--line)} main.v3[data-content="drainage"] .wy-k{position:absolute;left:10px;top:10px;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--br-ink);font-family:'Outfit',sans-serif;font-style:normal;font-size:15px;color:var(--br-gold)} main.v3[data-content="drainage"] .wy-l strong{display:block;font-family:'Outfit',sans-serif;font-weight:400;font-size:19px;line-height:1.25;color:var(--ink)} main.v3[data-content="drainage"] .wy-l p{margin:6px 0 0;font-size:14px;line-height:1.6;color:rgba(26,23,20,.7)} main.v3[data-content="drainage"] .wy-lead{margin:18px 0 0;padding:14px 16px;border-left:2px solid var(--bronze);background:rgba(166,124,63,.07);font-family:'Outfit',sans-serif;font-style:normal;font-size:16.5px;line-height:1.5;color:var(--ink)} main.v3[data-content="drainage"] .hs-tile{display:block;width:100%;height:auto} main.v3[data-content="drainage"] .hs-tile .base{stroke:rgba(26,23,20,.3);stroke-width:.8} main.v3[data-content="drainage"] .hs-tile .pt{fill:#E3DED4;stroke:rgba(26,23,20,.45);stroke-width:1} main.v3[data-content="drainage"] .hs-tile .pt.is-up{fill:#EFEAE0;filter:drop-shadow(0 6px 6px rgba(26,23,20,.25))} main.v3[data-content="drainage"] .hs-tile .gap{stroke:rgba(26,23,20,.35);stroke-width:1;stroke-dasharray:3 3} main.v3[data-content="drainage"] .hs-tile .arw,main.v3[data-content="drainage"] .hs-tile .arw-h{fill:none;stroke:var(--bronze);stroke-width:2;stroke-linecap:round;stroke-linejoin:round} main.v3[data-content="drainage"] .hs-tile .slab{stroke:rgba(26,23,20,.4)} main.v3[data-content="drainage"] .hs-tile .mem{stroke:var(--la-water);stroke-width:2.4;stroke-dasharray:6 3} main.v3[data-content="drainage"] .hs-tile .mortar{fill:#D8CFC0} main.v3[data-content="drainage"] .hs-tile .tl{fill:#C8A27A;stroke:rgba(26,23,20,.45);stroke-width:1} main.v3[data-content="drainage"] .hs-tile .mj{fill:#4A443B} main.v3[data-content="drainage"] .hs-ot-notes{margin-top:clamp(28px,3vw,40px)} main.v3[data-content="drainage"] .nt-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px} main.v3[data-content="drainage"] .nt-row li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:16px;align-items:start;padding:20px 22px;background:var(--br-ink);color:var(--br-cream)} main.v3[data-content="drainage"] .nt-row .nt-ic{width:44px;height:44px} main.v3[data-content="drainage"] .nt-row strong{display:block;font-family:'Outfit',sans-serif;font-weight:400;font-size:20px;line-height:1.2;color:var(--br-cream)} main.v3[data-content="drainage"] .nt-row p{margin:6px 0 0;font-size:14.5px;line-height:1.6;color:rgba(242,237,228,.74)} main.v3[data-content="drainage"] .hs-ot-notes .nt-k{color:var(--bronze)} /* SVC-SM: the column taken apart beside the photo, three facings as swatches */ main.v3[data-content="drainage"] .lv-spread.is-sm{grid-template-columns:minmax(0,7fr) minmax(0,5fr)} main.v3[data-content="drainage"] .hs-colfig{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:26px;align-items:center} main.v3[data-content="drainage"] .hs-colfig .hs-cv{margin:0} main.v3[data-content="drainage"] .hs-col .gnd{stroke:var(--ink);stroke-width:1.4} main.v3[data-content="drainage"] .hs-col .foot{stroke:rgba(26,23,20,.5);stroke-width:1} main.v3[data-content="drainage"] .hs-col .rebar{stroke:#5A544B;stroke-width:3;stroke-dasharray:12 4} main.v3[data-content="drainage"] .hs-col .core{fill:#C9C3B8;stroke:rgba(26,23,20,.5);stroke-width:1} main.v3[data-content="drainage"] .hs-col .cl path{stroke:rgba(26,23,20,.35);stroke-width:1.2;fill:none} main.v3[data-content="drainage"] .hs-col .mortar{fill:#DCD2C1} main.v3[data-content="drainage"] .hs-col .g4 rect:not(.mortar){stroke:rgba(26,23,20,.25);stroke-width:.8} main.v3[data-content="drainage"] .hs-col .g3 path{fill:none;stroke:var(--bronze);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round} main.v3[data-content="drainage"] .hs-col .cut{stroke:var(--ink);stroke-width:1.2;stroke-dasharray:4 4} main.v3[data-content="drainage"] .hs-col .cap{fill:#E2D6C2;stroke:var(--ink);stroke-width:1.4;stroke-linejoin:round} main.v3[data-content="drainage"] .hs-col .dripe{stroke:var(--ink);stroke-width:1.4} main.v3[data-content="drainage"] .hs-col .wtr{fill:none;stroke:var(--la-water);stroke-width:2;stroke-dasharray:4 4;stroke-linecap:round} main.v3[data-content="drainage"] .hs-swatches.is-three{margin-top:clamp(40px,4vw,60px)} main.v3[data-content="drainage"] .hs-swatches.is-three .sw-l figure{aspect-ratio:2/1} /* CAT-HARD-05: the patio, layer by layer */ main.v3[data-content="drainage"] .hs-patio{display:block;width:100%;height:auto} main.v3[data-content="drainage"] .hs-patio .wall{fill:#D9CDB8;stroke:var(--ink);stroke-width:1.2} main.v3[data-content="drainage"] .hs-patio .win{fill:#F5EFE4;stroke:rgba(26,23,20,.5);stroke-width:1} main.v3[data-content="drainage"] .hs-patio .hole{fill:#F3EBDD;stroke:var(--ink);stroke-width:1.2;stroke-dasharray:4 3} main.v3[data-content="drainage"] .hs-patio .dig,main.v3[data-content="drainage"] .hs-patio .dig-h{fill:none;stroke:var(--bronze);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} main.v3[data-content="drainage"] .hs-patio .base{stroke:rgba(26,23,20,.35);stroke-width:.8} main.v3[data-content="drainage"] .hs-patio .lyr{fill:none;stroke:rgba(26,23,20,.3);stroke-width:.8;stroke-dasharray:4 3} main.v3[data-content="drainage"] .hs-patio .tamp{fill:none;stroke:var(--bronze);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round} main.v3[data-content="drainage"] .hs-patio .grade{stroke:var(--ink);stroke-width:1.6} main.v3[data-content="drainage"] .hs-patio .water{stroke:var(--la-water);stroke-width:1.6;stroke-dasharray:4 4;fill:none} main.v3[data-content="drainage"] .hs-patio .water-h{fill:none;stroke:var(--la-water);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round} main.v3[data-content="drainage"] .hs-patio .edge{fill:#4A443B} main.v3[data-content="drainage"] .hs-patio .spike{stroke:#4A443B;stroke-width:2.4;stroke-linecap:round} main.v3[data-content="drainage"] .hs-patio .pv rect{fill:#C9B79A;stroke:rgba(26,23,20,.4);stroke-width:.6} main.v3[data-content="drainage"] .hs-patio .js rect{fill:#C9A86A} main.v3[data-content="drainage"] .hs-patio .grate{fill:#5A544B} main.v3[data-content="drainage"] .hs-patio .grate-l{stroke:#C9C3B8;stroke-width:1.2} main.v3[data-content="drainage"] .hs-patio .pipe{fill:none;stroke:#2E2A24;stroke-width:5;stroke-linejoin:round} main.v3[data-content="drainage"] .hs-patio .pw{stroke:var(--la-water);stroke-width:2;stroke-dasharray:4 4;animation:laFlow 1.2s linear infinite} main.v3[data-content="drainage"] .od-fig .ly{transition:opacity .7s var(--ease),filter .7s var(--ease)} main.v3[data-content="drainage"] .od-fig[data-step="1"] :is(.hk2,.hk3,.hk4,.hk5,.hk6),main.v3[data-content="drainage"] .od-fig[data-step="2"] :is(.hk3,.hk4,.hk5,.hk6),main.v3[data-content="drainage"] .od-fig[data-step="3"] :is(.hk4,.hk5,.hk6),main.v3[data-content="drainage"] .od-fig[data-step="4"] :is(.hk5,.hk6),main.v3[data-content="drainage"] .od-fig[data-step="5"] .hk6{opacity:0} main.v3[data-content="drainage"] .od-fig:not([data-step="1"]) .hk1 :is(.dig,.dig-h){opacity:0} main.v3[data-content="drainage"] .od-fig[data-step="1"] .hk1,main.v3[data-content="drainage"] .od-fig[data-step="2"] .hk2,main.v3[data-content="drainage"] .od-fig[data-step="3"] .hk3,main.v3[data-content="drainage"] .od-fig[data-step="4"] .hk4,main.v3[data-content="drainage"] .od-fig[data-step="5"] .hk5,main.v3[data-content="drainage"] .od-fig[data-step="6"] .hk6{filter:drop-shadow(0 0 5px rgba(217,183,126,.95))} main.v3[data-content="drainage"] .od-fig[data-step="3"] .grade{stroke:var(--bronze);stroke-width:2.6} /* CAT-HARD-05: normal against worth a call */ main.v3[data-content="drainage"] .hs-check{background:var(--cream)} main.v3[data-content="drainage"] .ck-head{display:flex;align-items:flex-end;justify-content:space-between;gap:32px} main.v3[data-content="drainage"] .ck-head .br-head{max-width:640px} main.v3[data-content="drainage"] .ck-cta{flex:0 0 auto;margin-bottom:clamp(40px,4.6vw,64px)} main.v3[data-content="drainage"] .ck-call{display:inline-flex;align-items:center;gap:12px;text-decoration:none} main.v3[data-content="drainage"] .ck-call .ic{width:18px;height:18px} main.v3[data-content="drainage"] .ck-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px} main.v3[data-content="drainage"] .ck-col{padding:clamp(24px,2.6vw,36px);background:var(--paper);border:1px solid var(--line)} main.v3[data-content="drainage"] .ck-col.is-call{background:var(--br-ink);border-color:var(--br-ink)} main.v3[data-content="drainage"] .ck-col h3{display:flex;align-items:center;gap:14px;margin:0 0 22px;font-family:'Outfit',sans-serif;font-weight:400;font-size:clamp(26px,2.2vw,32px);line-height:1.1;color:var(--ink)} main.v3[data-content="drainage"] .ck-col.is-call h3{color:var(--br-cream)} main.v3[data-content="drainage"] .ck-ic{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--bronze);color:#FBF8F2} main.v3[data-content="drainage"] .ck-col.is-call .ck-ic{background:var(--br-gold);color:var(--br-ink)} main.v3[data-content="drainage"] .ck-ic .ic{width:21px;height:21px} main.v3[data-content="drainage"] .ck-col ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px} main.v3[data-content="drainage"] .ck-col li{display:flex;flex-direction:column;background:#FBF8F2;border:1px solid var(--line)} main.v3[data-content="drainage"] .ck-col.is-call li{background:rgba(242,237,228,.06);border-color:rgba(242,237,228,.14)} main.v3[data-content="drainage"] .ck-col figure{margin:0;padding:10px 12px;background:linear-gradient(180deg,#F7F2E8,#EDE3D1);border-bottom:1px solid var(--line)} main.v3[data-content="drainage"] .ck-col.is-call figure{background:#F3EBDD;border-color:rgba(242,237,228,.14)} main.v3[data-content="drainage"] .ck-col p{margin:0;padding:14px 16px 16px;font-family:'Outfit',sans-serif;font-size:17px;line-height:1.35;color:var(--ink)} main.v3[data-content="drainage"] .ck-col.is-call p{color:var(--br-cream)} main.v3[data-content="drainage"] .hs-sign{display:block;width:100%;height:auto;max-height:110px} main.v3[data-content="drainage"] .hs-sign .pvs{fill:#CDBB9E;stroke:rgba(26,23,20,.4);stroke-width:1} main.v3[data-content="drainage"] .hs-sign .pvs.is-bad,main.v3[data-content="drainage"] .hs-sign .slb.is-bad{fill:#D9A98A;stroke:#A2512F} main.v3[data-content="drainage"] .hs-sign rect[fill]{stroke:rgba(26,23,20,.3);stroke-width:.8} main.v3[data-content="drainage"] .hs-sign .haze{fill:rgba(255,255,255,.62);filter:blur(3px)} main.v3[data-content="drainage"] .hs-sign .bed{fill:#EADBB8} main.v3[data-content="drainage"] .hs-sign .sandf{fill:#C9A86A} main.v3[data-content="drainage"] .hs-sign .lvl{stroke:var(--bronze);stroke-width:1.2;stroke-dasharray:2 2} main.v3[data-content="drainage"] .hs-sign .dn,main.v3[data-content="drainage"] .hs-sign .ar{fill:none;stroke:var(--bronze);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} main.v3[data-content="drainage"] .hs-sign .slb{fill:#CFCAC0;stroke:rgba(26,23,20,.4);stroke-width:1} main.v3[data-content="drainage"] .hs-sign .cj{stroke:rgba(70,64,56,.6);stroke-width:2} main.v3[data-content="drainage"] .hs-sign .hl{fill:none;stroke:#4A443B;stroke-width:.9} main.v3[data-content="drainage"] .hs-sign .rk{fill:none;stroke:#A2512F;stroke-width:1.8;stroke-linecap:round} main.v3[data-content="drainage"] .hs-sign .pud{fill:rgba(79,133,144,.5);stroke:var(--la-water);stroke-width:1} main.v3[data-content="drainage"] .hs-sign .rip{fill:none;stroke:rgba(255,255,255,.7);stroke-width:1.2} main.v3[data-content="drainage"] .hs-sign .ck{fill:none;stroke:#4A443B;stroke-width:1.6} main.v3[data-content="drainage"] .hs-sign .dim{stroke:#A2512F;stroke-width:1.6} main.v3[data-content="drainage"] .ck-note{margin:0} /* CAT-HARD-08: rules drawings */ main.v3[data-content="drainage"] .hs-rz .hs{fill:#DCD0BB;stroke:var(--ink);stroke-width:1.3} main.v3[data-content="drainage"] .hs-rz .roof{fill:none;stroke:var(--ink);stroke-width:1.4} main.v3[data-content="drainage"] .hs-rz .soilf{fill:#E3D5BF} main.v3[data-content="drainage"] .hs-rz .gnd2{stroke:var(--ink);stroke-width:1.8} main.v3[data-content="drainage"] .hs-rz .lvl{stroke:rgba(26,23,20,.35);stroke-width:1;stroke-dasharray:3 4} main.v3[data-content="drainage"] .hs-rz .dim{stroke:var(--bronze);stroke-width:1.4} main.v3[data-content="drainage"] .hs-rz .dim-h{stroke:var(--bronze);stroke-width:1.4} main.v3[data-content="drainage"] .hs-rz .water{fill:none;stroke:var(--la-water);stroke-width:2;stroke-dasharray:5 4} main.v3[data-content="drainage"] .hs-rz .water-h{fill:none;stroke:var(--la-water);stroke-width:2;stroke-linecap:round;stroke-linejoin:round} main.v3[data-content="drainage"] .hs-rz .pt{fill:#C9B79A;stroke:rgba(26,23,20,.45);stroke-width:1} main.v3[data-content="drainage"] .hs-rz .ok-c{fill:var(--bronze)} main.v3[data-content="drainage"] .hs-rz .ok-p{fill:none;stroke:#FBF8F2;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round} main.v3[data-content="drainage"] .hs-rz .stp{fill:none;stroke:var(--ink);stroke-width:1.4} main.v3[data-content="drainage"] .hs-rz .post{stroke:#6E5A40;stroke-width:5} main.v3[data-content="drainage"] .hs-rz .cover{stroke:#6E5A40;stroke-width:6;stroke-linecap:round} main.v3[data-content="drainage"] .hs-rz .docb{fill:#FBF8F2;stroke:var(--ink);stroke-width:1.2} main.v3[data-content="drainage"] .hs-rz .ln{stroke:rgba(26,23,20,.3);stroke-width:2;stroke-linecap:round} main.v3[data-content="drainage"] .hs-rz .gapf{fill:#A99B84} main.v3[data-content="drainage"] .hs-rz .rain{stroke:var(--la-water);stroke-width:2;stroke-dasharray:6 6;animation:laFlow 1.2s linear infinite reverse} main.v3[data-content="drainage"] .hs-rz .soak{stroke:var(--la-water);stroke-width:2.4;stroke-dasharray:4 5;opacity:.75;animation:laFlow 1.4s linear infinite} main.v3[data-content="drainage"] .hs-rz .sea{fill:rgba(79,133,144,.25)} main.v3[data-content="drainage"] .hs-rz .coast{fill:none;stroke:var(--la-water);stroke-width:1.6} main.v3[data-content="drainage"] .hs-rz .wave{fill:none;stroke:var(--la-water);stroke-width:1.4} main.v3[data-content="drainage"] .hs-rz .zonef{fill:rgba(166,124,63,.16);stroke:var(--bronze);stroke-width:1.2;stroke-dasharray:4 4} main.v3[data-content="drainage"] .hs-rz .lot{fill:#FBF8F2;stroke:var(--ink);stroke-width:1.2;stroke-dasharray:5 3} main.v3[data-content="drainage"] .hs-rz .pinr circle,main.v3[data-content="drainage"] .hs-rz .pinr path{fill:var(--bronze)} /* CAT-HARD-09: the plan sheets */ main.v3[data-content="drainage"] .tm-sheets .pa2{fill:#E4D8C2;stroke:rgba(26,23,20,.5)} main.v3[data-content="drainage"] .tm-sheets .bs{fill:#D9CDB6;stroke:rgba(26,23,20,.4)} main.v3[data-content="drainage"] .tm-sheets .pvl{stroke:#8C7A62;stroke-width:4} main.v3[data-content="drainage"] .tm-sheets .wa{stroke:var(--la-water);stroke-width:1.6;stroke-dasharray:4 3} main.v3[data-content="drainage"] .tm-sheets .dr{fill:#5A544B} main.v3[data-content="drainage"] .tm-sheets .pp2{fill:none;stroke:#2E2A24;stroke-width:2.4} main.v3[data-content="drainage"] .tm-sheets .pp{fill:#E4D8C2;stroke:rgba(26,23,20,.45);stroke-width:.8} /* CAT-HARD-15: the conduit drawing */ main.v3[data-content="drainage"] .hs-dg{display:block;width:100%;height:auto;max-height:170px} main.v3[data-content="drainage"] .hs-dg .pvd rect{fill:#C9B79A} main.v3[data-content="drainage"] .hs-dg .l{stroke:var(--ink);stroke-width:1.4} main.v3[data-content="drainage"] .hs-dg .isl{fill:#D9CDB8;stroke:var(--ink);stroke-width:1.4} main.v3[data-content="drainage"] .hs-dg .ctr{fill:#B8A98E;stroke:var(--ink);stroke-width:1.2} main.v3[data-content="drainage"] .hs-dg .grl{fill:#5A544B} main.v3[data-content="drainage"] .hs-dg .tr{stroke:rgba(26,23,20,.3)} main.v3[data-content="drainage"] .hs-dg .duct{fill:#FBF8F2;stroke:#C0703F;stroke-width:3} main.v3[data-content="drainage"] .hs-dg .duct.d2{stroke:#E0B341} main.v3[data-content="drainage"] .hs-dg .duct.d3{stroke:var(--la-water)} main.v3[data-content="drainage"] .hs-dg .run{fill:none;stroke:#C0703F;stroke-width:3;stroke-dasharray:8 5} main.v3[data-content="drainage"] .hs-dg .run.d2{stroke:#E0B341} main.v3[data-content="drainage"] .hs-dg .run.d3{stroke:var(--la-water)} /* ---------- responsive (own layouts) ---------- */ @media (max-width:1100px){ main.v3[data-content="drainage"] .lv-spread.is-pv,main.v3[data-content="drainage"] .lv-spread.is-co,main.v3[data-content="drainage"] .lv-spread.is-ot,main.v3[data-content="drainage"] .lv-spread.is-sm,main.v3[data-content="drainage"] .hs-cat{grid-template-columns:1fr} main.v3[data-content="drainage"] .hs-spread .lv-photo{min-height:380px} main.v3[data-content="drainage"] .hs-notes{position:static} main.v3[data-content="drainage"] .sw-l{grid-template-columns:repeat(2,minmax(0,1fr))} main.v3[data-content="drainage"] .hs-swatches.is-three .sw-l{grid-template-columns:repeat(3,minmax(0,1fr))} main.v3[data-content="drainage"] .hs-frames ol{grid-template-columns:repeat(3,minmax(0,1fr))} main.v3[data-content="drainage"] .ck-grid{grid-template-columns:1fr} } @media (max-width:700px){ main.v3[data-content="drainage"] .svc-hero h1{max-width:12ch} main.v3[data-content="drainage"] .hs-fig{padding:14px} main.v3[data-content="drainage"] .hs-fig .lv-legend.is-two{grid-auto-flow:row;grid-template-rows:none} main.v3[data-content="drainage"] .hs-fig .pin{transform-box:fill-box;transform-origin:center;transform:scale(1.5)} main.v3[data-content="drainage"] .hs-spread .lv-photo{min-height:280px} main.v3[data-content="drainage"] .sw-l{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:10px;margin:0 calc(var(--pad) * -1);padding:2px var(--pad) 12px;scroll-padding:0 var(--pad);scrollbar-width:none} main.v3[data-content="drainage"] .sw-l::-webkit-scrollbar{display:none} main.v3[data-content="drainage"] .sw-l li{flex:0 0 72%;scroll-snap-align:start} main.v3[data-content="drainage"] .sw-l li:hover{transform:none} main.v3[data-content="drainage"] .sw-l.is-board{display:grid;grid-template-columns:1fr;margin:0;padding:0;overflow:visible} main.v3[data-content="drainage"] .sw-l.is-board li{grid-template-columns:minmax(0,4fr) minmax(0,6fr)} main.v3[data-content="drainage"] .sw-l.is-board figure{min-height:120px} main.v3[data-content="drainage"] .hs-finishes,main.v3[data-content="drainage"] .hs-ways{padding:16px} main.v3[data-content="drainage"] .hs-frames ol{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:10px;margin:0 calc(var(--pad) * -1);padding:2px var(--pad) 12px;scroll-padding:0 var(--pad);scrollbar-width:none} main.v3[data-content="drainage"] .hs-frames ol::-webkit-scrollbar{display:none} main.v3[data-content="drainage"] .hs-frames li{flex:0 0 68%;scroll-snap-align:start} main.v3[data-content="drainage"] .wy-l,main.v3[data-content="drainage"] .nt-row{grid-template-columns:1fr} main.v3[data-content="drainage"] .hs-colfig{grid-template-columns:1fr;gap:12px} main.v3[data-content="drainage"] .hs-colfig .hs-cv{max-width:300px;margin:0 auto} main.v3[data-content="drainage"] .ck-head{display:block} main.v3[data-content="drainage"] .ck-cta{margin:-20px 0 28px} main.v3[data-content="drainage"] .ck-col{padding:20px 16px} main.v3[data-content="drainage"] .ck-col ul{gap:8px} main.v3[data-content="drainage"] .ck-col p{font-size:15px;padding:10px 12px 12px} main.v3[data-content="drainage"] .ck-col figure{padding:8px} } @media (prefers-reduced-motion:reduce){ main.v3[data-content="drainage"] :is(.hs-pv .flow,.hs-patio .pw,.hs-rz .rain,.hs-rz .soak){animation:none} } /* ---------- self-review round (2026-10-16) ---------- */ main.v3[data-content="drainage"] .hs-pv .lead{stroke:var(--ink);stroke-width:1;stroke-dasharray:2 3} main.v3[data-content="drainage"] .hs-pv .lead-d{fill:var(--ink)} main.v3[data-content="drainage"] .hs-cat>*,main.v3[data-content="drainage"] .hs-spread>*,main.v3[data-content="drainage"] .hs-frames,main.v3[data-content="drainage"] .hs-swatches{min-width:0} main.v3[data-content="drainage"] .sw-l figure svg{object-fit:cover} main.v3[data-content="drainage"] .hs-fig .hs-cv svg{overflow:hidden} @media (min-width:1101px){ main.v3[data-content="drainage"] .rtabs .rt{flex:1 1 auto} } main.v3[data-content="drainage"] .ck-col{display:flex;flex-direction:column} main.v3[data-content="drainage"] .ck-col .ck-cta{margin:auto 0 0;padding-top:20px} main.v3[data-content="drainage"] .ck-col .ck-call{width:100%;justify-content:center} @media (max-width:700px){ main.v3[data-content="drainage"] .hs-pv .pin{transform:scale(2.1)} main.v3[data-content="drainage"] .hs-pv .lead-d{display:none} } main.v3[data-content="drainage"] .ck-foot{display:flex;align-items:center;gap:12px;margin:auto 0 0;padding:18px 18px;border:1px dashed rgba(166,124,63,.5);background:rgba(166,124,63,.06);font-family:'Outfit',sans-serif;font-style:normal;font-size:17px;line-height:1.4;color:var(--ink)} main.v3[data-content="drainage"] .ck-foot .ic{flex:0 0 22px;width:22px;height:22px;color:var(--bronze)} main.v3[data-content="drainage"] .ck-col ul+.ck-foot{margin-top:20px} @media (min-width:1101px){main.v3[data-content="drainage"] .ck-col ul+.ck-foot{margin-top:auto}main.v3[data-content="drainage"] .ck-col:not(.is-call) ul{margin-bottom:20px}} /* ---------- WOW round (2026-10-16): photos that match, drains that read on a phone, patterns, the four side by side ---------- */ main.v3[data-content="drainage"] .la-starts .st-img{background-position:16% center} main.v3[data-content="drainage"] .lv-spread.is-co .lv-photo{background-position:center 78%} main.v3[data-content="drainage"] .lv-spread.is-sm .lv-photo{background-position:center 72%} /* CAT-HARD-05: each step carries a second line; the steps sit closer */ main.v3[data-content="drainage"] .od-tx{min-width:0} main.v3[data-content="drainage"] .od-s{display:block;margin-top:10px;max-width:40ch;font-family:'Inter',sans-serif;font-size:15px;line-height:1.65;color:rgba(242,237,228,.66)} main.v3[data-content="drainage"] .la-order.is-js .od-steps li{min-height:30vh} main.v3[data-content="drainage"] .od-mini{display:none} @media (max-width:700px){ main.v3[data-content="drainage"] .od-stage{display:none} main.v3[data-content="drainage"] .la-order.is-js .od-steps li,main.v3[data-content="drainage"] .od-steps li{min-height:0;opacity:1;padding:22px 0 24px} main.v3[data-content="drainage"] .od-mini{display:block;grid-column:1 / -1;margin:14px 0 0;padding:10px 10px 6px;background:#F5EFE4;border:1px solid rgba(217,183,126,.3)} main.v3[data-content="drainage"] .od-s{font-size:14.5px;margin-top:8px} } /* SVC-PV: try a pattern */ main.v3[data-content="drainage"] .hs-pat{margin-top:clamp(40px,4vw,60px);padding:clamp(20px,2.4vw,32px);background:var(--paper);border:1px solid var(--line)} main.v3[data-content="drainage"] .pt-head{margin-bottom:20px} main.v3[data-content="drainage"] .pt-head .lv-h3{margin:0} main.v3[data-content="drainage"] .pt-lead{margin:6px 0 0;max-width:62ch;font-size:14.5px;line-height:1.6;color:rgba(26,23,20,.68)} main.v3[data-content="drainage"] .pt-grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,3.3fr) minmax(0,2.9fr);gap:16px;align-items:stretch} main.v3[data-content="drainage"] .pt-fig{margin:0;border:1px solid var(--line);background:#9DAE6B;overflow:hidden} main.v3[data-content="drainage"] .hs-plan{display:block;width:100%;height:100%} main.v3[data-content="drainage"] .hs-plan .pf{opacity:0;transition:opacity .55s var(--ease)} main.v3[data-content="drainage"] .pt-fig[data-pat="rb"] .pf-rb,main.v3[data-content="drainage"] .pt-fig[data-pat="hb"] .pf-hb,main.v3[data-content="drainage"] .pt-fig[data-pat="bw"] .pf-bw,main.v3[data-content="drainage"] .pt-fig[data-pat="as"] .pf-as{opacity:1} main.v3[data-content="drainage"] .hs-plan .lawn{fill:#9DAE6B} main.v3[data-content="drainage"] .hs-plan .lawn-t{fill:none;stroke:#7E9150;stroke-width:1.6;stroke-linecap:round} main.v3[data-content="drainage"] .hs-plan .house{fill:#DCD0BB} main.v3[data-content="drainage"] .hs-plan .house-l{stroke:var(--ink);stroke-width:3} main.v3[data-content="drainage"] .hs-plan .door{fill:#F5EFE4;stroke:var(--ink);stroke-width:1.4} main.v3[data-content="drainage"] .hs-plan .border{fill:none;stroke:#5E5244;stroke-width:12;stroke-dasharray:22 2.4;stroke-linejoin:miter} main.v3[data-content="drainage"] .hs-plan .bed path{fill:#7E6A4E;stroke:#5E5244;stroke-width:2} main.v3[data-content="drainage"] .hs-plan .bed circle{fill:#7F9A5A;stroke:#5E7840;stroke-width:1.5} main.v3[data-content="drainage"] .hs-plan .pit circle{fill:#8C8378;stroke:#3E3830;stroke-width:2} main.v3[data-content="drainage"] .hs-plan .pit circle+circle{fill:#E2A25A;stroke:#C0703F} main.v3[data-content="drainage"] .hs-plan .seat rect{fill:#F5EFE4;stroke:rgba(26,23,20,.55);stroke-width:1.4} main.v3[data-content="drainage"] .hs-plan .wf{fill:none;stroke:var(--la-water);stroke-width:2.4;stroke-dasharray:7 7;animation:laFlow 1.4s linear infinite} main.v3[data-content="drainage"] .hs-plan .wf-h{fill:none;stroke:var(--la-water);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round} main.v3[data-content="drainage"] .hs-plan .wtr{opacity:.8} main.v3[data-content="drainage"] .hs-plan .steps rect{fill:#CDBB9E;stroke:#8C7A62;stroke-width:1.4} main.v3[data-content="drainage"] .hs-plan .tree circle{fill:#6F8A4C;stroke:#556D38;stroke-width:1.5} main.v3[data-content="drainage"] .hs-plan .tree circle+circle{fill:#86A05F} main.v3[data-content="drainage"] .pt-l{list-style:none;margin:0;padding:0;display:grid;grid-template-rows:repeat(4,minmax(0,1fr));gap:8px} main.v3[data-content="drainage"] .pt-b{display:grid;grid-template-columns:54px minmax(0,1fr);gap:14px;align-items:center;width:100%;height:100%;padding:10px 12px 10px 10px;text-align:left;background:#FBF8F2;border:1px solid var(--line);font:inherit;color:inherit;cursor:pointer;transition:background .3s,border-color .3s} main.v3[data-content="drainage"] .pt-b:hover{border-color:rgba(166,124,63,.6)} main.v3[data-content="drainage"] .pt-b:focus-visible{outline:2px solid var(--bronze);outline-offset:2px} main.v3[data-content="drainage"] .pt-b[aria-pressed="true"]{background:var(--br-ink);border-color:var(--br-ink)} main.v3[data-content="drainage"] .pt-sw{display:block;width:54px;height:54px;box-shadow:0 0 0 1px rgba(26,23,20,.2)} main.v3[data-content="drainage"] .pt-b[aria-pressed="true"] .pt-sw{box-shadow:0 0 0 2px var(--br-gold)} main.v3[data-content="drainage"] .pt-tx strong{display:block;font-family:'Outfit',sans-serif;font-weight:400;font-size:18px;line-height:1.2;color:var(--ink)} main.v3[data-content="drainage"] .pt-tx>span{display:block;margin-top:3px;font-size:12.5px;line-height:1.45;color:rgba(26,23,20,.66)} main.v3[data-content="drainage"] .pt-b[aria-pressed="true"] .pt-tx strong{color:var(--br-cream)} main.v3[data-content="drainage"] .pt-b[aria-pressed="true"] .pt-tx>span{color:rgba(242,237,228,.72)} main.v3[data-content="drainage"] .pt-photo{position:relative;min-height:320px;background-size:cover;background-position:center 70%;overflow:hidden} main.v3[data-content="drainage"] .pt-cap{position:absolute;left:0;right:0;bottom:0;margin:0;padding:56px 18px 16px;background:linear-gradient(180deg,rgba(14,12,10,0),rgba(14,12,10,.82));font-family:'Outfit',sans-serif;font-style:normal;font-size:16px;line-height:1.35;color:#F5EFE4} /* SVC-OT: the two notes, drawn */ main.v3[data-content="drainage"] .hs-ot-notes .lv-h3{margin-bottom:16px} main.v3[data-content="drainage"] .nt-row.is-drawn li{grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:0;padding:0;background:var(--paper);border:1px solid var(--line);color:var(--ink);align-items:stretch} main.v3[data-content="drainage"] .nt-row.is-drawn figure{position:relative;margin:0;min-height:140px;overflow:hidden;background:#F1E8D8;border-right:1px solid var(--line)} main.v3[data-content="drainage"] .nt-row.is-drawn figure svg{position:absolute;inset:0;width:100%;height:100%} main.v3[data-content="drainage"] .nt-row.is-drawn li>div{align-self:center;padding:20px 22px} main.v3[data-content="drainage"] .nt-row.is-drawn strong{color:var(--ink)} main.v3[data-content="drainage"] .nt-row.is-drawn p{color:rgba(26,23,20,.72)} main.v3[data-content="drainage"] .hs-otv .gt{fill:#DCD6CB;stroke:rgba(26,23,20,.28);stroke-width:1} main.v3[data-content="drainage"] .hs-otv .tx circle{fill:rgba(90,84,75,.42)} main.v3[data-content="drainage"] .hs-otv .wd{fill:rgba(79,133,144,.82);stroke:rgba(255,255,255,.6);stroke-width:.8} main.v3[data-content="drainage"] .hs-otv .sheen{fill:rgba(255,255,255,.55)} main.v3[data-content="drainage"] .hs-otv .foot :is(path,ellipse,circle){fill:rgba(166,124,63,.14);stroke:var(--bronze);stroke-width:2} main.v3[data-content="drainage"] .hs-otv .sun{fill:#E7C88E;stroke:var(--bronze);stroke-width:1.2} main.v3[data-content="drainage"] .hs-otv .rays{stroke:var(--bronze);stroke-width:1.6;stroke-linecap:round} main.v3[data-content="drainage"] .hs-otv .moon{fill:#A9BCC2;stroke:#6E8A93;stroke-width:1} main.v3[data-content="drainage"] .hs-otv .slb{fill:#CFCAC0;stroke:rgba(26,23,20,.4)} main.v3[data-content="drainage"] .hs-otv .mt{fill:#D8CFC0} main.v3[data-content="drainage"] .hs-otv .tl{fill:#C8A27A;stroke:rgba(26,23,20,.45)} main.v3[data-content="drainage"] .hs-otv .sj{fill:var(--bronze)} main.v3[data-content="drainage"] .hs-otv .mv{fill:none;stroke:var(--ink);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} /* HARD-CMP: the four side by side */ main.v3[data-content="drainage"] .cm-board{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(var(--n),minmax(0,2fr));grid-template-rows:repeat(5,auto);gap:0 14px} main.v3[data-content="drainage"] .cm-col{display:grid;grid-row:1 / span 5;grid-template-rows:subgrid;background:var(--paper);border:1px solid var(--line);transition:transform .45s var(--ease),box-shadow .45s var(--ease)} main.v3[data-content="drainage"] .cm-col:not(.cm-lab):hover{transform:translateY(-4px);box-shadow:0 30px 50px -36px rgba(26,23,20,.55)} main.v3[data-content="drainage"] .cm-lab{background:transparent;border-color:transparent} main.v3[data-content="drainage"] .cm-top{display:block;color:inherit;text-decoration:none} main.v3[data-content="drainage"] .cm-sw{position:relative;margin:0;aspect-ratio:16/9;overflow:hidden;border-bottom:1px solid var(--line)} main.v3[data-content="drainage"] .cm-sw svg{display:block;width:100%;height:100%} main.v3[data-content="drainage"] .cm-n{position:absolute;left:12px;top:10px;padding:3px 8px;background:rgba(22,19,15,.78);font-family:'Outfit',sans-serif;font-style:normal;font-size:13px;color:var(--br-gold)} main.v3[data-content="drainage"] .cm-h{display:block;padding:16px 18px 4px;font-family:'Outfit',sans-serif;font-weight:400;font-size:24px;line-height:1.15;color:var(--ink)} main.v3[data-content="drainage"] .cm-go{display:block;padding:0 18px 16px;font-family:'Inter',sans-serif;font-size:10.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--bronze)} main.v3[data-content="drainage"] .cm-c{display:flex;flex-direction:column;justify-content:center;gap:7px;padding:14px 18px;border-top:1px solid var(--line)} main.v3[data-content="drainage"] .cm-lab .cm-c{padding-left:0;border-top-color:rgba(26,23,20,.22)} main.v3[data-content="drainage"] .cm-lab strong{font-family:'Outfit',sans-serif;font-weight:400;font-size:19px;line-height:1.2;color:var(--ink)} main.v3[data-content="drainage"] .cm-rl{display:none;font-family:'Inter',sans-serif;font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--bronze)} main.v3[data-content="drainage"] .cm-d{display:inline-flex;gap:6px} main.v3[data-content="drainage"] .cm-d i{display:block;width:11px;height:11px;border-radius:50%;border:1.5px solid var(--bronze)} main.v3[data-content="drainage"] .cm-d i.on{background:var(--bronze)} main.v3[data-content="drainage"] .cm-t{font-size:14px;line-height:1.45;color:rgba(26,23,20,.76)} main.v3[data-content="drainage"] .cm-foot{display:flex;gap:12px;align-items:center;margin:22px 0 0;font-family:'Outfit',sans-serif;font-style:normal;font-size:17px;line-height:1.45;color:rgba(26,23,20,.78)} main.v3[data-content="drainage"] .cm-foot::before{content:'';flex:0 0 34px;height:1px;background:var(--bronze)} /* CAT-HARD-08: surface heat */ main.v3[data-content="drainage"] .hs-rz .sw{stroke:rgba(26,23,20,.35);stroke-width:1} main.v3[data-content="drainage"] .hs-rz .hb-t{fill:#FBF8F2;stroke:rgba(26,23,20,.35);stroke-width:1} main.v3[data-content="drainage"] .hs-rz .hb-f.is-hot{fill:#C0703F} main.v3[data-content="drainage"] .hs-rz .hb-f.is-warm{fill:#E0B341} main.v3[data-content="drainage"] .hs-rz .hz{fill:none;stroke:#C0703F;stroke-width:1.6;stroke-linecap:round} main.v3[data-content="drainage"] .hs-rz .sun{fill:#E7C88E;stroke:var(--bronze);stroke-width:1.2} main.v3[data-content="drainage"] .hs-rz .rays{stroke:var(--bronze);stroke-width:1.6;stroke-linecap:round} main.v3[data-content="drainage"] .hs-rz .lb{font-size:9px;letter-spacing:.06em} main.v3[data-content="drainage"] .hs-rz .lb-k{font-style:normal;text-transform:none;letter-spacing:0;font-size:11px;fill:rgba(26,23,20,.6)} /* CAT-HARD-15: reading cards line up (fixed drawing frame) */ main.v3[data-content="drainage"] .rd-dg{display:grid;place-items:center;aspect-ratio:2/1;padding:16px 22px} main.v3[data-content="drainage"] .rd-dg{position:relative} main.v3[data-content="drainage"] .rd-dg svg{position:absolute;top:16px;left:22px;display:block;width:calc(100% - 44px);height:calc(100% - 32px);max-height:none} @media (max-width:1100px){ main.v3[data-content="drainage"] .pt-grid{grid-template-columns:minmax(0,3fr) minmax(0,2fr)} main.v3[data-content="drainage"] .pt-photo{grid-column:1 / -1;min-height:300px} main.v3[data-content="drainage"] .cm-board{grid-template-columns:repeat(var(--n),minmax(0,1fr))} main.v3[data-content="drainage"] .cm-lab{display:none} main.v3[data-content="drainage"] .cm-rl{display:block} main.v3[data-content="drainage"] .rd-dg{aspect-ratio:auto;align-self:stretch;min-height:150px} } @media (max-width:700px){ main.v3[data-content="drainage"] .pt-grid{grid-template-columns:1fr} main.v3[data-content="drainage"] .pt-l{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:none} main.v3[data-content="drainage"] .pt-b{grid-template-columns:1fr;gap:8px;padding:10px;align-content:start} main.v3[data-content="drainage"] .pt-sw{width:100%;height:46px} main.v3[data-content="drainage"] .pt-tx strong{font-size:16px} main.v3[data-content="drainage"] .pt-photo{min-height:240px} main.v3[data-content="drainage"] .hs-pat{padding:16px} main.v3[data-content="drainage"] .rd-dg{aspect-ratio:2/1;min-height:0} main.v3[data-content="drainage"] .cm-board{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 calc(var(--pad) * -1);padding:2px var(--pad) 14px;scroll-padding:0 var(--pad);scrollbar-width:none} main.v3[data-content="drainage"] .cm-board::-webkit-scrollbar{display:none} main.v3[data-content="drainage"] .cm-col:not(.cm-lab){display:flex;flex-direction:column;flex:0 0 80%;scroll-snap-align:start} main.v3[data-content="drainage"] .cm-col:not(.cm-lab):hover{transform:none} main.v3[data-content="drainage"] .nt-row.is-drawn figure{min-height:120px} main.v3[data-content="drainage"] .nt-row.is-drawn li>div{padding:14px 16px} main.v3[data-content="drainage"] .rtabs{flex-wrap:wrap;overflow:visible;background:#F6F0E5} main.v3[data-content="drainage"] .rt{flex:1 1 auto;padding:10px 12px;gap:8px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);margin:0 -1px -1px 0} main.v3[data-content="drainage"] .rt-ic{flex-basis:28px;width:28px;height:28px} main.v3[data-content="drainage"] .rt-t{font-size:15px} main.v3[data-content="drainage"] .hs-pv .pin{transform:scale(1.7)} main.v3[data-content="drainage"] .hs-pv .lead-d{display:block} } @media (prefers-reduced-motion:reduce){ main.v3[data-content="drainage"] .hs-plan .wf{animation:none} } /* ================= walls' own layouts (inc/visuals-walls.php) ================= */ main.v3[data-content="drainage"]{--wl-rust:#A2512F;--wl-block:#CFC6B6} main.v3[data-content="drainage"] .svc-hero h1{max-width:15ch} main.v3[data-content="drainage"] .svc-hero .bg img,main.v3[data-content="drainage"] .svc-hero .bg{object-position:center 62%;background-position:center 62%} main.v3[data-content="drainage"] .br-start .bs-img{background-position:center 70%} main.v3[data-content="drainage"] .la-starts .st-img{background-position:center 80%} /* shared drawing bits */ main.v3[data-content="drainage"] :is(.wl-psvg,.wl-sign,.wl-type,.wl-bw,.wl-build,.wl-pk,.wl-rz) .soil{stroke:none} main.v3[data-content="drainage"] :is(.wl-psvg,.wl-sign,.wl-type,.wl-bw,.wl-build,.wl-pk,.wl-rz) .gnd{fill:none;stroke:var(--ink);stroke-width:1.4;stroke-linejoin:round} main.v3[data-content="drainage"] :is(.wl-psvg,.wl-sign,.wl-type,.wl-bw,.wl-build,.wl-pk,.wl-rz) .wall:not(.is-conc){fill:var(--wl-block);stroke:var(--ink);stroke-width:1.2} main.v3[data-content="drainage"] :is(.wl-psvg,.wl-sign,.wl-type,.wl-bw,.wl-build,.wl-pk,.wl-rz) .cj{fill:none;stroke:rgba(26,23,20,.32);stroke-width:1} main.v3[data-content="drainage"] :is(.wl-psvg,.wl-type,.wl-bw,.wl-build,.wl-pk,.wl-rz) .foot{stroke:rgba(26,23,20,.5);stroke-width:1} main.v3[data-content="drainage"] :is(.wl-psvg,.wl-type,.wl-bw,.wl-build,.wl-pk) .grv{stroke:rgba(26,23,20,.3);stroke-width:.8} main.v3[data-content="drainage"] :is(.wl-psvg,.wl-type,.wl-build) .pipe{fill:#2E2A24} main.v3[data-content="drainage"] :is(.wl-psvg,.wl-type,.wl-build,.wl-pk) .capr{fill:#E2D6C2;stroke:var(--ink);stroke-width:1.2} main.v3[data-content="drainage"] :is(.wl-psvg,.wl-type,.wl-build) .bar{fill:none;stroke:#3E3830;stroke-width:2.2;stroke-dasharray:8 3} main.v3[data-content="drainage"] :is(.wl-psvg,.wl-sign,.wl-build) .wd{fill:var(--la-water)} main.v3[data-content="drainage"] :is(.wl-psvg,.wl-sign) .pud{fill:rgba(79,133,144,.35)} main.v3[data-content="drainage"] :is(.wl-psvg,.wl-sign,.wl-pk,.wl-rz) .ar-push :is(.ln,.hd){fill:none;stroke:var(--wl-rust);stroke-width:3;stroke-linecap:round;stroke-linejoin:round} main.v3[data-content="drainage"] :is(.wl-psvg,.wl-build) .ar-out :is(.ln,.hd){fill:none;stroke:var(--la-water);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round} /* SVC-RW: the photo beside why walls lean */ main.v3[data-content="drainage"] .lv-spread.is-rw{grid-template-columns:minmax(0,4fr) minmax(0,8fr)} main.v3[data-content="drainage"] .lv-spread.is-rw .lv-photo{background-position:28% center} main.v3[data-content="drainage"] .wl-push{margin:0;padding:24px 26px 26px;background:var(--paper);border:1px solid var(--line)} main.v3[data-content="drainage"] .wp-cv{margin:0 0 18px;background:linear-gradient(180deg,#F7F2E8,#EDE3D1);border:1px solid var(--line)} main.v3[data-content="drainage"] .wl-psvg{display:block;width:100%;height:auto} main.v3[data-content="drainage"] .wl-psvg .soilb{stroke:rgba(26,23,20,.12)} main.v3[data-content="drainage"] .wl-psvg .fence path{fill:none;stroke:#7A6450;stroke-width:2.6;stroke-linecap:round} main.v3[data-content="drainage"] .wl-psvg .wet{fill:rgba(79,133,144,.3)} main.v3[data-content="drainage"] .wl-psvg .wline{fill:none;stroke:var(--la-water);stroke-width:2;stroke-dasharray:6 4} main.v3[data-content="drainage"] .wl-psvg .ar-push.is-small :is(.ln,.hd){stroke:rgba(162,81,47,.55);stroke-width:2} main.v3[data-content="drainage"] .wl-psvg .lb{font-family:'Inter',sans-serif;font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;fill:var(--ink)} main.v3[data-content="drainage"] .wl-psvg .lb-push{fill:var(--wl-rust)} main.v3[data-content="drainage"] .wl-psvg .lb-above{fill:var(--bronze)} main.v3[data-content="drainage"] .wl-psvg .fab{stroke:#8C7A62;stroke-width:1.2;stroke-dasharray:3 3} main.v3[data-content="drainage"] .wl-psvg .fall{fill:none;stroke:var(--la-water);stroke-width:2;stroke-dasharray:4 5;animation:laFlow 1.2s linear infinite} main.v3[data-content="drainage"] .wl-psvg .pipe-c{fill:var(--la-water)} main.v3[data-content="drainage"] .wl-psvg .weep{fill:#2E2A24} main.v3[data-content="drainage"] .wl-psvg .crack{fill:none;stroke:var(--wl-rust);stroke-width:2.2;stroke-linejoin:round} main.v3[data-content="drainage"] .wl-psvg .st{transition:opacity .7s var(--ease)} main.v3[data-content="drainage"] .wl-psvg .crack{transition:opacity .7s var(--ease)} main.v3[data-content="drainage"] .wl-push[data-state="wet"] .st-dry,main.v3[data-content="drainage"] .wl-push[data-state="dry"] .st-wet,main.v3[data-content="drainage"] .wl-push[data-state="dry"] .crack{opacity:0} main.v3[data-content="drainage"] .wl-psvg .wl-w{transform-box:view-box;transform-origin:226px 296px;transition:transform 1.1s var(--ease)} main.v3[data-content="drainage"] .wl-push[data-state="wet"] .wl-w{transform:rotate(-2.6deg)} main.v3[data-content="drainage"] .wl-push figcaption .lv-h3{font-size:22px;margin-bottom:8px} main.v3[data-content="drainage"] .wp-lead{margin:0 0 14px;font-size:14.5px;line-height:1.6;color:rgba(26,23,20,.68)} main.v3[data-content="drainage"] .wp-hint{display:inline-flex;align-items:center;gap:8px;margin:0 0 12px;font-family:'Inter',sans-serif;font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--bronze)} main.v3[data-content="drainage"] .wp-hint .ic{width:16px;height:16px} main.v3[data-content="drainage"] .wp-l{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px} main.v3[data-content="drainage"] .wp-b{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;width:100%;height:100%;padding:16px 18px;text-align:left;background:#FBF8F2;border:1px solid var(--line);color:var(--ink);cursor:pointer;font:inherit;transition:background .35s var(--ease),border-color .35s var(--ease),color .35s var(--ease)} main.v3[data-content="drainage"] .wp-b:hover{border-color:var(--bronze)} main.v3[data-content="drainage"] .wp-b[aria-pressed="true"]{background:var(--br-ink);border-color:var(--br-ink);color:var(--br-cream)} main.v3[data-content="drainage"] .wp-n{font-family:'Outfit',sans-serif;font-style:normal;font-size:22px;line-height:1;color:var(--bronze)} main.v3[data-content="drainage"] .wp-b[aria-pressed="true"] .wp-n{color:var(--br-gold)} main.v3[data-content="drainage"] .wp-t strong{display:block;font-family:'Outfit',sans-serif;font-weight:400;font-size:18px;line-height:1.25} main.v3[data-content="drainage"] .wp-t span{display:block;margin-top:6px;font-size:13.5px;line-height:1.55;color:rgba(26,23,20,.66)} main.v3[data-content="drainage"] .wp-b[aria-pressed="true"] .wp-t span{color:rgba(242,237,228,.74)} main.v3[data-content="drainage"] .wp-b.is-wet[aria-pressed="true"] .wp-n{color:#E39A78} /* SVC-RW: the signs */ main.v3[data-content="drainage"] .wl-signs{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);gap:clamp(24px,3vw,44px);margin-top:clamp(44px,4.4vw,64px);padding-top:clamp(36px,3.6vw,52px);border-top:1px solid var(--line);align-items:start} main.v3[data-content="drainage"] .sg-head h3{display:flex;align-items:center;gap:14px;margin:0 0 14px} main.v3[data-content="drainage"] .sg-ic{flex:0 0 44px;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--br-ink);color:var(--br-gold)} main.v3[data-content="drainage"] .sg-ic .ic{width:20px;height:20px} main.v3[data-content="drainage"] .sg-foot{margin:0 0 18px;font-family:'Outfit',sans-serif;font-style:normal;font-size:17px;line-height:1.45;color:rgba(26,23,20,.75)} main.v3[data-content="drainage"] .wl-call{display:inline-flex;align-items:center;gap:12px;text-decoration:none} main.v3[data-content="drainage"] .wl-call .ic{width:18px;height:18px} main.v3[data-content="drainage"] .sg-l{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px} main.v3[data-content="drainage"] .sg-l li{display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line)} main.v3[data-content="drainage"] .sg-l figure{margin:0;padding:12px 12px 8px;background:linear-gradient(180deg,#F7F2E8,#EDE3D1);border-bottom:1px solid var(--line)} main.v3[data-content="drainage"] .sg-l li>div{padding:14px 16px 18px} main.v3[data-content="drainage"] .sg-l strong{display:block;font-family:'Outfit',sans-serif;font-weight:400;font-size:18px;line-height:1.25;color:var(--ink)} main.v3[data-content="drainage"] .sg-l p{margin:8px 0 0;font-size:14px;line-height:1.6;color:rgba(26,23,20,.7)} main.v3[data-content="drainage"] .wl-sign{display:block;width:100%;height:auto} main.v3[data-content="drainage"] .wl-sign .face{fill:#D3C9B8} main.v3[data-content="drainage"] .wl-sign .bad{fill:none;stroke:var(--wl-rust);stroke-width:2.6;stroke-linejoin:round;stroke-linecap:round} main.v3[data-content="drainage"] .wl-sign .bad-t{fill:none;stroke:var(--wl-rust);stroke-width:1.4;stroke-linecap:round} main.v3[data-content="drainage"] .wl-sign .bad-w{fill:#DDB49A !important;stroke:var(--wl-rust) !important} main.v3[data-content="drainage"] .wl-sign .plumb{stroke:var(--ink);stroke-width:1;stroke-dasharray:3 3} main.v3[data-content="drainage"] .wl-sign .gap{stroke:var(--wl-rust);stroke-width:2.4} main.v3[data-content="drainage"] .wl-sign .ar-push :is(.ln,.hd){stroke-width:2.4} main.v3[data-content="drainage"] .wl-sign .stain{fill:rgba(79,133,144,.4)} main.v3[data-content="drainage"] .wl-sign .wet{fill:rgba(79,133,144,.28)} main.v3[data-content="drainage"] .wl-sign .spill{fill:#BBA383;stroke:#8C7A62;stroke-width:1} main.v3[data-content="drainage"] .wl-sign .run{fill:none;stroke:var(--la-water);stroke-width:2.2;stroke-dasharray:5 4;animation:laFlow 1.2s linear infinite} /* SVC-RW: the four types, in section */ main.v3[data-content="drainage"] .wl-types{margin-top:clamp(44px,4.4vw,64px)} main.v3[data-content="drainage"] .wl-types .lv-h3{margin-bottom:20px} main.v3[data-content="drainage"] .wl-type{display:block;width:100%;height:100%} main.v3[data-content="drainage"] .wl-type .sky{fill:#F4EEE3} main.v3[data-content="drainage"] .wl-type .grout{fill:rgba(90,84,75,.32)} main.v3[data-content="drainage"] .wl-type .is-conc{stroke:var(--ink);stroke-width:1.2} main.v3[data-content="drainage"] .wl-type .tie{stroke:#6F675B;stroke-width:2;stroke-linecap:round} main.v3[data-content="drainage"] .wl-type .blk{fill:#BFB4A1;stroke:var(--ink);stroke-width:1} main.v3[data-content="drainage"] .wl-type .mesh{stroke:var(--bronze);stroke-width:1.6;stroke-dasharray:5 3} main.v3[data-content="drainage"] .wl-type .is-core{fill:#C9C3B8 !important} main.v3[data-content="drainage"] .wl-type .mortar{fill:#DCD2C1} main.v3[data-content="drainage"] .wl-type .stn{stroke:rgba(26,23,20,.35);stroke-width:.8} main.v3[data-content="drainage"] .wl-type .stn.s0{fill:#BDA482} main.v3[data-content="drainage"] .wl-type .stn.s1{fill:#AA9070} main.v3[data-content="drainage"] .wl-type .stn.s2{fill:#C9B597} main.v3[data-content="drainage"] .wl-type .capst{fill:#CDBB9E;stroke:var(--ink);stroke-width:1} main.v3[data-content="drainage"] .wl-tl figure{background:#F4EEE3} main.v3[data-content="drainage"] .wl-next{margin:clamp(30px,3vw,44px) 0 0} main.v3[data-content="drainage"] .wl-next a{display:inline-flex;align-items:center;gap:12px;padding-bottom:6px;border-bottom:1px solid var(--bronze);font-family:'Inter',sans-serif;font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--ink);text-decoration:none} main.v3[data-content="drainage"] .wl-next a:hover{color:var(--bronze)} /* SVC-BW: the wall cut open beside the photo, the four finishes */ main.v3[data-content="drainage"] .lv-spread.is-bw{grid-template-columns:minmax(0,7fr) minmax(0,5fr)} main.v3[data-content="drainage"] .lv-spread.is-bw .lv-photo{background-position:18% center} main.v3[data-content="drainage"] .wl-bw{display:block;width:100%;height:auto} main.v3[data-content="drainage"] .wl-bw .bar{fill:none;stroke:#5A544B;stroke-width:2.6;stroke-dasharray:10 3} main.v3[data-content="drainage"] .wl-bw .core{fill:#8E8576} main.v3[data-content="drainage"] .wl-bw .blk rect{fill:#C4B9A7;stroke:rgba(26,23,20,.3);stroke-width:.8} main.v3[data-content="drainage"] .wl-bw .cell rect{fill:#7A7266;opacity:.9} main.v3[data-content="drainage"] .wl-bw .bars path{fill:none;stroke:#1F1B16;stroke-width:2.6;stroke-linejoin:round} main.v3[data-content="drainage"] .wl-bw .stucco{fill:#EDE4D3} main.v3[data-content="drainage"] .wl-bw .tex circle{fill:#D9CCB4} main.v3[data-content="drainage"] .wl-bw .edge{fill:none;stroke:var(--ink);stroke-width:1;stroke-dasharray:3 3} main.v3[data-content="drainage"] .wl-bw .cap{fill:#E2D6C2;stroke:var(--ink);stroke-width:1.4;stroke-linejoin:round} main.v3[data-content="drainage"] .wl-bw .dripe{stroke:var(--ink);stroke-width:1.4} main.v3[data-content="drainage"] .wl-bw .pipe{fill:none;stroke:#2E2A24;stroke-width:7;stroke-linecap:round} main.v3[data-content="drainage"] .wl-bw .flow{fill:none;stroke:var(--la-water);stroke-width:2;stroke-dasharray:6 6;animation:laFlow 1.2s linear infinite} main.v3[data-content="drainage"] .wl-bw .out{fill:none;stroke:var(--la-water);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round} main.v3[data-content="drainage"] .wl-fins{margin-top:clamp(44px,4.4vw,64px)} main.v3[data-content="drainage"] .wl-fin .capb{fill:#D6C8AF} main.v3[data-content="drainage"] .wl-fin .capb.is-smooth{fill:#CFC6B6} main.v3[data-content="drainage"] .wl-fin .capl{stroke:rgba(26,23,20,.35);stroke-width:1.2} main.v3[data-content="drainage"] .wl-fin .hair{fill:none;stroke:rgba(120,104,84,.55);stroke-width:1} main.v3[data-content="drainage"] .wl-fin .shade{fill:rgba(26,23,20,.06)} main.v3[data-content="drainage"] .wl-fin .grit circle{fill:rgba(60,54,46,.3)} main.v3[data-content="drainage"] .wl-fin .sky{fill:#DCE3DF} main.v3[data-content="drainage"] .wl-fin .stw{fill:#EDE4D3} main.v3[data-content="drainage"] .wl-fin .post{fill:#E4D9C6;stroke:rgba(26,23,20,.35);stroke-width:1} main.v3[data-content="drainage"] .wl-fin .pcap{fill:#CFC1A8;stroke:rgba(26,23,20,.35);stroke-width:1} main.v3[data-content="drainage"] .wl-fin .gate{fill:#8A6A4A} main.v3[data-content="drainage"] .wl-fin .brd path{stroke:rgba(40,28,18,.45);stroke-width:1.2} main.v3[data-content="drainage"] .wl-fin :is(.hinge,.latch){fill:#2E2A24} main.v3[data-content="drainage"] .wl-fin .gnd{stroke:rgba(26,23,20,.4);stroke-width:1.2} /* CAT-WALLS-05: the wall, step by step */ main.v3[data-content="drainage"] .wl-build{display:block;width:100%;height:auto} main.v3[data-content="drainage"] .wl-build .cut{fill:none;stroke:var(--bronze);stroke-width:1.6;stroke-dasharray:4 3} main.v3[data-content="drainage"] .wl-build .chk{fill:none;stroke:var(--bronze);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round} main.v3[data-content="drainage"] .wl-build .ld{fill:none;stroke:var(--wl-rust);stroke-width:2;stroke-linecap:round;stroke-linejoin:round} main.v3[data-content="drainage"] .wl-build .bar{stroke-width:1.8;stroke-dasharray:6 2} main.v3[data-content="drainage"] .wl-build .weep{fill:#2E2A24} main.v3[data-content="drainage"] .wl-build .fall{fill:none;stroke:var(--la-water);stroke-width:1.6;stroke-dasharray:3 3;animation:laFlow 1.2s linear infinite} main.v3[data-content="drainage"] .wl-build .back{stroke:none} main.v3[data-content="drainage"] .wl-build .pl path{fill:none;stroke:var(--la-leaf);stroke-width:1.6;stroke-linecap:round} main.v3[data-content="drainage"] .od-fig[data-step="1"] :is(.hk2,.hk3,.hk4,.hk5,.hk6,.hk7),main.v3[data-content="drainage"] .od-fig[data-step="2"] :is(.hk3,.hk4,.hk5,.hk6,.hk7),main.v3[data-content="drainage"] .od-fig[data-step="3"] :is(.hk4,.hk5,.hk6,.hk7),main.v3[data-content="drainage"] .od-fig[data-step="4"] :is(.hk5,.hk6,.hk7),main.v3[data-content="drainage"] .od-fig[data-step="5"] :is(.hk6,.hk7),main.v3[data-content="drainage"] .od-fig[data-step="6"] .hk7{opacity:0} main.v3[data-content="drainage"] .od-fig[data-step="7"] .hk7{filter:drop-shadow(0 0 5px rgba(217,183,126,.95))} main.v3[data-content="drainage"] .od-fig:not([data-step="1"]) .hk1 :is(.chk,.ld){opacity:0} main.v3[data-content="drainage"] .od-fig:not([data-step="1"]):not([data-step="2"]) .hk1 .cut{opacity:0} /* WALLS-PICK: retaining or block */ main.v3[data-content="drainage"] .wl-pick{background:var(--cream)} main.v3[data-content="drainage"] .pk-grid{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,3vw,44px)} main.v3[data-content="drainage"] .pk-card{display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line);transition:transform .45s var(--ease),box-shadow .45s var(--ease)} main.v3[data-content="drainage"] .pk-card:hover{transform:translateY(-4px);box-shadow:0 34px 60px -40px rgba(26,23,20,.55)} main.v3[data-content="drainage"] .pk-fig{position:relative;margin:0;background:#F4EEE3;border-bottom:1px solid var(--line)} main.v3[data-content="drainage"] .wl-pk{display:block;width:100%;height:auto} main.v3[data-content="drainage"] .wl-pk .sky{fill:#F4EEE3} main.v3[data-content="drainage"] .wl-pk .is-st{fill:#E8DDCA !important} main.v3[data-content="drainage"] .wl-pk .tree{stroke:#6F5B45;stroke-width:3;stroke-linecap:round} main.v3[data-content="drainage"] .wl-pk .crown{fill:#AEB28C} main.v3[data-content="drainage"] .wl-pk .hs{fill:#E2D7C4;stroke:var(--ink);stroke-width:1.2} main.v3[data-content="drainage"] .wl-pk .roof{fill:none;stroke:var(--ink);stroke-width:1.4;stroke-linejoin:round} main.v3[data-content="drainage"] .wl-pk .win{fill:#F7F2E8;stroke:rgba(26,23,20,.5)} main.v3[data-content="drainage"] .pk-n{position:absolute;left:16px;top:14px;padding:3px 9px;background:rgba(22,19,15,.82);font-family:'Outfit',sans-serif;font-style:normal;font-size:14px;color:var(--br-gold)} main.v3[data-content="drainage"] .pk-b{display:flex;flex-direction:column;flex:1;padding:clamp(22px,2.4vw,32px)} main.v3[data-content="drainage"] .pk-b h3{margin:0 0 16px;font-family:'Outfit',sans-serif;font-weight:300;font-size:clamp(28px,2.6vw,36px);line-height:1.1;color:var(--ink)} main.v3[data-content="drainage"] .pk-b ul{list-style:none;margin:0 0 22px;padding:0} main.v3[data-content="drainage"] .pk-b li{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:16px;padding:13px 0;border-top:1px solid var(--line);align-items:baseline} main.v3[data-content="drainage"] .pk-l{font-family:'Inter',sans-serif;font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--bronze)} main.v3[data-content="drainage"] .pk-v{font-family:'Outfit',sans-serif;font-size:17.5px;line-height:1.35;color:var(--ink)} main.v3[data-content="drainage"] .pk-go{align-self:flex-start;margin-top:auto;display:inline-flex;gap:10px;padding-bottom:5px;border-bottom:1px solid var(--bronze);font-family:'Inter',sans-serif;font-size:11.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--ink);text-decoration:none} main.v3[data-content="drainage"] .pk-or{position:absolute;left:50%;top:clamp(110px,11vw,150px);transform:translate(-50%,-50%);display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:var(--br-ink);border:1px solid rgba(217,183,126,.5);font-family:'Outfit',sans-serif;font-style:normal;font-size:22px;color:var(--br-gold);box-shadow:0 18px 40px -18px rgba(0,0,0,.6)} main.v3[data-content="drainage"] .pk-foot{display:flex;align-items:center;gap:16px;margin:clamp(26px,2.6vw,36px) 0 0;font-family:'Outfit',sans-serif;font-style:normal;font-size:17px;line-height:1.5;color:rgba(26,23,20,.75)} main.v3[data-content="drainage"] .pk-foot::before{content:'';flex:0 0 36px;height:1px;background:var(--bronze)} /* CAT-WALLS-08: rules drawings */ main.v3[data-content="drainage"] .wl-rz .dim.is-b,main.v3[data-content="drainage"] .wl-rz .dim-h.is-b{stroke:var(--wl-rust)} main.v3[data-content="drainage"] .wl-rz .lb-b{fill:var(--wl-rust)} main.v3[data-content="drainage"] .wl-rz .fnc{fill:none;stroke:#7A6450;stroke-width:2.6;stroke-linecap:round} main.v3[data-content="drainage"] .wl-rz .drv{fill:#8E8576;stroke:var(--ink);stroke-width:1} main.v3[data-content="drainage"] .wl-rz .ar-load :is(.ln,.hd){fill:none;stroke:var(--wl-rust);stroke-width:2;stroke-linecap:round;stroke-linejoin:round} main.v3[data-content="drainage"] .wl-rz .hall{fill:#EDE4D3;stroke:var(--ink);stroke-width:1.3;stroke-linejoin:round} main.v3[data-content="drainage"] .wl-rz .col{stroke:rgba(26,23,20,.45);stroke-width:2.4} main.v3[data-content="drainage"] .wl-rz .street{fill:#CFCAC0} main.v3[data-content="drainage"] .wl-rz .cl{stroke:#FBF8F2;stroke-width:2;stroke-dasharray:10 8} main.v3[data-content="drainage"] .wl-rz .zf{fill:rgba(166,124,63,.14)} main.v3[data-content="drainage"] .wl-rz .lw{stroke:var(--bronze);stroke-width:4} main.v3[data-content="drainage"] .wl-rz .hw{fill:none;stroke:#6F675B;stroke-width:6} main.v3[data-content="drainage"] .wl-rz .lb-st{fill:var(--ink)} main.v3[data-content="drainage"] .wl-rz .yd{fill:#E4E6D2} main.v3[data-content="drainage"] .wl-rz .yd.is-b{fill:#EDE4D3} main.v3[data-content="drainage"] .wl-rz .pl{stroke:var(--wl-rust);stroke-width:1.4;stroke-dasharray:5 4} main.v3[data-content="drainage"] .wl-rz .cal{fill:#FBF8F2;stroke:var(--ink);stroke-width:1.2} main.v3[data-content="drainage"] .wl-rz .cal-t{stroke:var(--ink);stroke-width:1.2} main.v3[data-content="drainage"] .wl-rz .cal-n{font-family:'Outfit',sans-serif;font-size:26px;fill:var(--bronze)} main.v3[data-content="drainage"] .wl-rz .ct{fill:none;stroke:rgba(26,23,20,.3);stroke-width:1.2} /* ---------- responsive (own layouts) ---------- */ @media (max-width:1100px){ main.v3[data-content="drainage"] .lv-spread.is-rw,main.v3[data-content="drainage"] .lv-spread.is-bw,main.v3[data-content="drainage"] .wl-signs{grid-template-columns:1fr} main.v3[data-content="drainage"] .sg-l{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (max-width:700px){ main.v3[data-content="drainage"] .wl-push{padding:14px} main.v3[data-content="drainage"] .wl-psvg .lb{font-size:19px} main.v3[data-content="drainage"] .wp-l{grid-template-columns:1fr;gap:8px} main.v3[data-content="drainage"] .wp-b{padding:12px 14px} main.v3[data-content="drainage"] .sg-l{grid-template-columns:1fr;gap:10px} main.v3[data-content="drainage"] .sg-l li{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,6fr)} main.v3[data-content="drainage"] .sg-l figure{display:grid;place-items:center;border-bottom:0;border-right:1px solid var(--line)} main.v3[data-content="drainage"] .sg-l li>div{padding:12px 14px} main.v3[data-content="drainage"] .sg-l strong{font-size:16.5px} main.v3[data-content="drainage"] .sg-l p{font-size:13.5px} main.v3[data-content="drainage"] .wl-call{width:100%;justify-content:center} main.v3[data-content="drainage"] .pk-grid{grid-template-columns:1fr} main.v3[data-content="drainage"] .pk-or{display:none} main.v3[data-content="drainage"] .pk-b li{grid-template-columns:1fr;gap:4px} main.v3[data-content="drainage"] .wl-bw .pin{transform-box:fill-box;transform-origin:center;transform:scale(1.6)} } @media (prefers-reduced-motion:reduce){ main.v3[data-content="drainage"] :is(.wl-psvg .fall,.wl-sign .run,.wl-bw .flow,.wl-build .fall){animation:none} main.v3[data-content="drainage"] .wl-psvg .wl-w{transition:none} } /* ---------- self-review round (2026-10-16) ---------- */ main.v3[data-content="drainage"] .wp-b,main.v3[data-content="drainage"] .wp-b:hover,main.v3[data-content="drainage"] .wp-b:focus{background:#FBF8F2;color:var(--ink);box-shadow:none;opacity:1;font-family:'Inter',sans-serif;letter-spacing:0;text-transform:none} main.v3[data-content="drainage"] .wp-b[aria-pressed="true"],main.v3[data-content="drainage"] .wp-b[aria-pressed="true"]:hover,main.v3[data-content="drainage"] .wp-b[aria-pressed="true"]:focus{background:var(--br-ink);border-color:var(--br-ink);color:var(--br-cream)} main.v3[data-content="drainage"] .wp-b .wp-t strong{color:var(--ink)} main.v3[data-content="drainage"] .wp-b[aria-pressed="true"] .wp-t strong{color:var(--br-cream)} main.v3[data-content="drainage"] .wp-t span{font-family:'Inter',sans-serif} main.v3[data-content="drainage"] .wl-fin .leaf{fill:rgba(111,109,69,.55)} main.v3[data-content="drainage"] .wl-pk .crown{fill:#AEB28C} main.v3[data-content="drainage"] .wl-bw .pipe{stroke-width:5} /* ---------- owner-feedback round (2026-10-16) ---------- */ main.v3[data-content="drainage"] .lv-spread.is-rw .lv-photo{background-position:62% center} main.v3[data-content="drainage"] .la-starts .st-img{background-position:20% center} main.v3[data-content="drainage"] .br-start .bs-img{background-position: 72% center} /* ================= WOW round, second pass (2026-10-16): the slope before and after, one hillside lot, the chooser, wall photos ================= */ /* CAT-WALLS-01: the hero is the title beside the slope drawn before and after; the services menu sits under the drawing */ main.v3[data-content="drainage"] .svc-hero.wl-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,620px);column-gap:clamp(36px,4.4vw,80px);align-items:end;min-height:0;padding:0 max(var(--pad),calc((100vw - var(--w)) / 2 + var(--pad)));background:radial-gradient(70% 70% at 80% 46%,rgba(166,124,63,.2),rgba(166,124,63,0) 62%),radial-gradient(60% 50% at 0% 100%,rgba(166,124,63,.1),rgba(166,124,63,0) 70%),#14110E} main.v3[data-content="drainage"] .svc-hero.wl-hero::after{display:none} main.v3[data-content="drainage"] .svc-hero.wl-hero::before{content:'';position:absolute;inset:0;pointer-events:none;opacity:.5;background:repeating-linear-gradient(0deg,rgba(217,183,126,.05) 0 1px,transparent 1px 64px),repeating-linear-gradient(90deg,rgba(217,183,126,.05) 0 1px,transparent 1px 64px)} main.v3[data-content="drainage"] .svc-hero.wl-hero .content{max-width:none;margin:0;padding:156px 0 76px} main.v3[data-content="drainage"] .svc-hero.wl-hero h1{font-size:clamp(42px,4.6vw,74px);max-width:12ch} main.v3[data-content="drainage"] .wl-hside{position:relative;z-index:2;display:flex;flex-direction:column;gap:14px;padding:150px 0 76px} main.v3[data-content="drainage"] .wl-hero .la-hmenu{position:static;width:auto;padding:14px 20px 4px;background:rgba(16,13,10,.55)} main.v3[data-content="drainage"] .wl-hero .la-hmenu .hm-k{margin-bottom:2px} main.v3[data-content="drainage"] .wl-hero .la-hmenu ol{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 24px} main.v3[data-content="drainage"] .wl-hero .la-hmenu li+li{border-top:0} main.v3[data-content="drainage"] .wl-hero .la-hmenu a{grid-template-columns:40px minmax(0,1fr) 14px;gap:12px} main.v3[data-content="drainage"] .wl-hero .la-hmenu .hm-n{display:none} main.v3[data-content="drainage"] .wl-bafig{margin:0} main.v3[data-content="drainage"] .ba-cv{position:relative;overflow:hidden;aspect-ratio:550/340;border:1px solid rgba(217,183,126,.38);box-shadow:0 50px 90px -40px rgba(0,0,0,.85);touch-action:pan-y} main.v3[data-content="drainage"] .wl-ba{display:block;width:100%;height:100%} main.v3[data-content="drainage"] .ba-line{position:absolute;z-index:2;top:0;bottom:0;left:var(--x,38%);width:2px;margin-left:-1px;background:var(--br-gold);box-shadow:0 0 18px rgba(217,183,126,.6);pointer-events:none} main.v3[data-content="drainage"] .ba-knob{position:absolute;top:50%;left:50%;display:grid;place-items:center;width:48px;height:48px;transform:translate(-50%,-50%);border-radius:50%;background:var(--br-gold);box-shadow:0 10px 30px -8px rgba(0,0,0,.7),0 0 0 6px rgba(217,183,126,.22)} main.v3[data-content="drainage"] .ba-knob svg{width:22px;height:22px;fill:none;stroke:#14110E;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round} main.v3[data-content="drainage"] .ba-range{position:absolute;z-index:3;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;-webkit-appearance:none;appearance:none;background:transparent} main.v3[data-content="drainage"] .ba-range:focus-visible+*{outline:none} main.v3[data-content="drainage"] .ba-cv:has(.ba-range:focus-visible){outline:2px solid var(--br-gold);outline-offset:3px} main.v3[data-content="drainage"] .ba-cv .ba-lb{position:absolute;width:auto;max-width:48%;letter-spacing:0;text-transform:none;z-index:2;top:14px;display:flex;flex-direction:column;gap:3px;padding:9px 13px;background:rgba(16,13,10,.74);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border:1px solid rgba(217,183,126,.28);font-family:'Outfit',sans-serif;font-size:15px;line-height:1.2;color:var(--br-cream);text-shadow:none;pointer-events:none} main.v3[data-content="drainage"] .ba-lb i{font-family:'Inter',sans-serif;font-style:normal;font-size:10px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--br-gold)} main.v3[data-content="drainage"] .ba-cv .ba-lb.is-b{left:14px;right:auto} main.v3[data-content="drainage"] .ba-cv .ba-lb.is-a{right:14px;left:auto;text-align:right;align-items:flex-end} main.v3[data-content="drainage"] .ba-hint{display:flex;align-items:center;gap:12px;margin:12px 0 0;font-family:'Inter',sans-serif;font-size:10.5px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:rgba(242,237,228,.6)} main.v3[data-content="drainage"] .ba-hint::before{content:'';width:30px;height:1px;background:var(--br-gold)} main.v3[data-content="drainage"] .wl-ba .hill1{fill:#E6D8BE} main.v3[data-content="drainage"] .wl-ba .hill2{fill:#DCCBAB} main.v3[data-content="drainage"] .wl-ba .hb{fill:#FBF6EC;stroke:#1A1714;stroke-width:1.2} main.v3[data-content="drainage"] .wl-ba .hr{fill:#B98F66;stroke:#1A1714;stroke-width:1.2;stroke-linejoin:round} main.v3[data-content="drainage"] .wl-ba .hw{fill:#CFC3AE;stroke:#1A1714;stroke-width:.8} main.v3[data-content="drainage"] .wl-ba .hw.is-on{fill:#E9D3A6} main.v3[data-content="drainage"] .wl-ba .edge{fill:none;stroke:#2B2018;stroke-width:1.6} main.v3[data-content="drainage"] .wl-ba .rill path{fill:none;stroke:#6E5236;stroke-width:2.4;stroke-linecap:round} main.v3[data-content="drainage"] .wl-ba .mud{fill:#7D6040} main.v3[data-content="drainage"] .wl-ba .pud{fill:rgba(120,160,168,.6)} main.v3[data-content="drainage"] .wl-ba .ow{fill:#B9AE9C;stroke:#1A1714;stroke-width:1.2} main.v3[data-content="drainage"] .wl-ba .ock{fill:none;stroke:#C2603A;stroke-width:2.2} main.v3[data-content="drainage"] .wl-ba .spill{fill:#8A6A4C} main.v3[data-content="drainage"] .wl-ba .tuft path{fill:none;stroke:#9A946A;stroke-width:1.8;stroke-linecap:round} main.v3[data-content="drainage"] .wl-ba .stick{fill:none;stroke:#47321F;stroke-width:2.2;stroke-linecap:round} main.v3[data-content="drainage"] .wl-ba .lawn{fill:#7F8C55} main.v3[data-content="drainage"] .wl-ba .pv{fill:#EADFC8;stroke:rgba(26,23,20,.5);stroke-width:.8} main.v3[data-content="drainage"] .wl-ba .chair path{fill:none;stroke:#1A1714;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round} main.v3[data-content="drainage"] .wl-ba .grv{fill:#A8977A;stroke:rgba(26,23,20,.3);stroke-width:.6} main.v3[data-content="drainage"] .wl-ba .pp{fill:#1F1B16} main.v3[data-content="drainage"] .wl-ba .bk{fill:#BFB5A3;stroke:#1A1714;stroke-width:1} main.v3[data-content="drainage"] .wl-ba .cj{fill:none;stroke:rgba(26,23,20,.38);stroke-width:.9} main.v3[data-content="drainage"] .wl-ba .cp{fill:#F1E8D8;stroke:#1A1714;stroke-width:1} main.v3[data-content="drainage"] .wl-ba .fx{fill:#1F1B16} main.v3[data-content="drainage"] .wl-ba .olive .tr{fill:none;stroke:#4E3B2A;stroke-width:3;stroke-linecap:round} main.v3[data-content="drainage"] .wl-ba .olive .cr{fill:#8F9A6A} main.v3[data-content="drainage"] .wl-ba .sh-a{fill:#6F7B4B} main.v3[data-content="drainage"] .wl-ba .sh-b{fill:#8E9962} main.v3[data-content="drainage"] .wl-ba .sh-c{fill:#5B6842} main.v3[data-content="drainage"] .wl-ba .lav path{stroke:#A08AC8;stroke-width:2.6;stroke-linecap:round} main.v3[data-content="drainage"] .wl-ba .plt path{stroke:#1F1B16;stroke-width:1.6} main.v3[data-content="drainage"] .wl-ba .plt circle{fill:#F2C27A} /* CAT-WALLS-03: one hillside lot beside the five rows; hovering a row lights its pin */ main.v3[data-content="drainage"] .wl-lot{margin:0;display:flex;flex-direction:column;padding:clamp(16px,1.8vw,24px);background:var(--br-ink);box-shadow:0 40px 70px -46px rgba(26,23,20,.8)} main.v3[data-content="drainage"] .wl-stgrid{align-items:center} main.v3[data-content="drainage"] .lt-cv{display:block;background:#F4EEE3;border:1px solid rgba(217,183,126,.3)} main.v3[data-content="drainage"] .wl-lotsvg{display:block;width:100%;height:auto} main.v3[data-content="drainage"] .wl-lot figcaption{margin:18px 4px 4px;font-family:'Outfit',sans-serif;font-style:normal;font-weight:300;font-size:clamp(20px,1.7vw,25px);line-height:1.3;color:var(--br-cream)} main.v3[data-content="drainage"] .wl-lotsvg .sky{fill:#F4EEE3} main.v3[data-content="drainage"] .wl-lotsvg .soil{stroke:none} main.v3[data-content="drainage"] .wl-lotsvg .gnd{fill:none;stroke:var(--ink);stroke-width:1.4;stroke-linejoin:round} main.v3[data-content="drainage"] .wl-lotsvg .rill{fill:none;stroke:#8C6A48;stroke-width:1.8;stroke-dasharray:4 3;stroke-linecap:round} main.v3[data-content="drainage"] .wl-lotsvg .mud{fill:#B89A74} main.v3[data-content="drainage"] .wl-lotsvg .ow{fill:#E0C2AE;stroke:var(--wl-rust);stroke-width:1.2} main.v3[data-content="drainage"] .wl-lotsvg .ock{fill:none;stroke:var(--wl-rust);stroke-width:1.8} main.v3[data-content="drainage"] .wl-lotsvg .ar-push :is(.ln,.hd){fill:none;stroke:var(--wl-rust);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round} main.v3[data-content="drainage"] .wl-lotsvg .lvl{fill:none;stroke:var(--bronze);stroke-width:1.6;stroke-dasharray:5 4} main.v3[data-content="drainage"] .wl-lotsvg .lvlf{fill:rgba(166,124,63,.12)} main.v3[data-content="drainage"] .wl-lotsvg .pw{fill:#CFC6B6;stroke:var(--ink);stroke-width:1.1} main.v3[data-content="drainage"] .wl-lotsvg .pwc{fill:#E2D6C2;stroke:var(--ink);stroke-width:1} main.v3[data-content="drainage"] .wl-lotsvg .fill{fill:#B08E68;stroke:#8C6A48} main.v3[data-content="drainage"] .wl-lotsvg :is(.nh,.yh rect){fill:#E2D7C4;stroke:var(--ink);stroke-width:1.1} main.v3[data-content="drainage"] .wl-lotsvg :is(.nr,.yh path){fill:none;stroke:var(--ink);stroke-width:1.3;stroke-linejoin:round} main.v3[data-content="drainage"] .wl-lotsvg .yh .w{fill:#F7F2E8} main.v3[data-content="drainage"] .wl-lotsvg .lp-c{fill:var(--br-ink);stroke:#F4EEE3;stroke-width:2;transition:fill .3s} main.v3[data-content="drainage"] .wl-lotsvg .lp text{font-family:'Outfit',sans-serif;font-style:normal;font-size:14px;fill:var(--br-gold);transition:fill .3s} main.v3[data-content="drainage"] .wl-lotsvg .lp-r{fill:rgba(166,124,63,.28);opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(.6);transition:opacity .35s,transform .45s var(--ease)} main.v3[data-content="drainage"] .wl-stgrid:has(.st-rows li:nth-child(1):is(:hover,:focus-within)) .lp-1 .lp-c,main.v3[data-content="drainage"] .wl-stgrid:has(.st-rows li:nth-child(2):is(:hover,:focus-within)) .lp-2 .lp-c,main.v3[data-content="drainage"] .wl-stgrid:has(.st-rows li:nth-child(3):is(:hover,:focus-within)) .lp-3 .lp-c,main.v3[data-content="drainage"] .wl-stgrid:has(.st-rows li:nth-child(4):is(:hover,:focus-within)) .lp-4 .lp-c,main.v3[data-content="drainage"] .wl-stgrid:has(.st-rows li:nth-child(5):is(:hover,:focus-within)) .lp-5 .lp-c{fill:var(--bronze)} main.v3[data-content="drainage"] .wl-stgrid:has(.st-rows li:nth-child(1):is(:hover,:focus-within)) .lp-1 text,main.v3[data-content="drainage"] .wl-stgrid:has(.st-rows li:nth-child(2):is(:hover,:focus-within)) .lp-2 text,main.v3[data-content="drainage"] .wl-stgrid:has(.st-rows li:nth-child(3):is(:hover,:focus-within)) .lp-3 text,main.v3[data-content="drainage"] .wl-stgrid:has(.st-rows li:nth-child(4):is(:hover,:focus-within)) .lp-4 text,main.v3[data-content="drainage"] .wl-stgrid:has(.st-rows li:nth-child(5):is(:hover,:focus-within)) .lp-5 text{fill:#FBF8F2} main.v3[data-content="drainage"] .wl-stgrid:has(.st-rows li:nth-child(1):is(:hover,:focus-within)) .lp-1 .lp-r,main.v3[data-content="drainage"] .wl-stgrid:has(.st-rows li:nth-child(2):is(:hover,:focus-within)) .lp-2 .lp-r,main.v3[data-content="drainage"] .wl-stgrid:has(.st-rows li:nth-child(3):is(:hover,:focus-within)) .lp-3 .lp-r,main.v3[data-content="drainage"] .wl-stgrid:has(.st-rows li:nth-child(4):is(:hover,:focus-within)) .lp-4 .lp-r,main.v3[data-content="drainage"] .wl-stgrid:has(.st-rows li:nth-child(5):is(:hover,:focus-within)) .lp-5 .lp-r{opacity:1;transform:scale(1.5)} main.v3[data-content="drainage"] .wl-stgrid .st-n{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--br-ink);font-size:13px;color:var(--br-gold)} /* WALLS-PICK: one question picks the card; the block wall drawn as a long capped wall with a gate */ main.v3[data-content="drainage"] .pk-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);gap:clamp(24px,4vw,64px);align-items:end;margin-bottom:clamp(30px,3vw,44px)} main.v3[data-content="drainage"] .pk-head .br-head{margin-bottom:0} main.v3[data-content="drainage"] .pk-ask{padding:18px 20px 20px;background:var(--br-ink);color:var(--br-cream);box-shadow:0 30px 60px -40px rgba(26,23,20,.7)} main.v3[data-content="drainage"] .pk-q{display:flex;align-items:center;gap:12px;margin:0 0 14px;font-family:'Outfit',sans-serif;font-size:19px;line-height:1.3;color:var(--br-cream)} main.v3[data-content="drainage"] .pk-qi{flex:0 0 38px;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;border:1px solid rgba(217,183,126,.5);color:var(--br-gold)} main.v3[data-content="drainage"] .pk-qi .ic{width:18px;height:18px} main.v3[data-content="drainage"] .pk-btns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px} main.v3[data-content="drainage"] .pk-ask .pk-b,main.v3[data-content="drainage"] .pk-ask .pk-b:hover,main.v3[data-content="drainage"] .pk-ask .pk-b:focus{min-height:46px;padding:10px 12px;margin:0;border:1px solid rgba(217,183,126,.55);border-radius:0;background:transparent;box-shadow:none;opacity:1;font-family:'Inter',sans-serif;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:none;line-height:1.3;color:var(--br-cream);cursor:pointer;transition:background .3s,color .3s} main.v3[data-content="drainage"] .pk-ask .pk-b:hover{background:rgba(217,183,126,.12)} main.v3[data-content="drainage"] .pk-ask .pk-b[aria-pressed="true"]{background:var(--br-gold);border-color:var(--br-gold);color:var(--br-ink)} main.v3[data-content="drainage"] .pk-grid .pk-card{transition:transform .45s var(--ease),box-shadow .45s var(--ease),opacity .45s var(--ease),filter .45s var(--ease)} main.v3[data-content="drainage"] .pk-grid[data-pick="1"] .pk-card:nth-of-type(2)>*,main.v3[data-content="drainage"] .pk-grid[data-pick="2"] .pk-card:nth-of-type(1)>*{opacity:.38;filter:grayscale(.8);transition:opacity .45s var(--ease),filter .45s var(--ease)} main.v3[data-content="drainage"] .pk-grid .pk-card>*{transition:opacity .45s var(--ease),filter .45s var(--ease)} main.v3[data-content="drainage"] .pk-grid[data-pick="1"] .pk-card:nth-of-type(1),main.v3[data-content="drainage"] .pk-grid[data-pick="2"] .pk-card:nth-of-type(2){transform:translateY(-6px);box-shadow:0 0 0 2px var(--bronze),0 40px 70px -40px rgba(26,23,20,.6)} main.v3[data-content="drainage"] .wl-pk .nroof{fill:#CDBDA4;stroke:var(--ink);stroke-width:1.2;stroke-linejoin:round} main.v3[data-content="drainage"] .wl-pk .nhs{fill:#E2D7C4;stroke:var(--ink);stroke-width:1.2} main.v3[data-content="drainage"] .wl-pk .wbg{fill:#9E968A} main.v3[data-content="drainage"] .wl-pk .bkb{fill:#DCD3C3;stroke:rgba(26,23,20,.22);stroke-width:.6} main.v3[data-content="drainage"] .wl-pk .post{fill:#E6DCCB;stroke:var(--ink);stroke-width:1} main.v3[data-content="drainage"] .wl-pk .pcap{fill:#F1E8D8;stroke:var(--ink);stroke-width:1} main.v3[data-content="drainage"] .wl-pk .gate{fill:#8A6A4A;stroke:var(--ink);stroke-width:1} main.v3[data-content="drainage"] .wl-pk .gbrd{stroke:rgba(30,20,12,.5);stroke-width:1} main.v3[data-content="drainage"] .wl-pk .latch{fill:#1F1B16} main.v3[data-content="drainage"] .wl-pk .shrub{fill:#9AA27A} main.v3[data-content="drainage"]>section.wl-pick{padding-bottom:clamp(32px,2.8vw,44px)} /* SVC-RW and SVC-BW: the action card carries the visit line; less air between the two services */ main.v3[data-content="drainage"]>section.la-svc.la-retaining-walls{padding-top:clamp(40px,3.4vw,52px);padding-bottom:clamp(48px,4vw,60px)} main.v3[data-content="drainage"]>section.la-svc.la-block-walls{padding-top:clamp(56px,5vw,76px)} main.v3[data-content="drainage"] .lv-spread.is-rw .lv-photo{background-position:30% 60%} main.v3[data-content="drainage"] .lv-spread.is-bw .lv-photo{background-position:42% center} main.v3[data-content="drainage"] .br-start .bs-img{background-position:center 40%} /* SVC-RW: the drain toggle reads the same on a phone and on a desktop (ink when chosen, cream with a bronze edge when not) */ main.v3[data-content="drainage"] .wl-push .wp-l .wp-b{background:#FBF8F2 !important;border:1px solid rgba(166,124,63,.55) !important;color:var(--ink) !important;opacity:1 !important;filter:none !important} main.v3[data-content="drainage"] .wl-push .wp-l .wp-b[aria-pressed="true"]{background:var(--br-ink) !important;border-color:var(--br-ink) !important;color:var(--br-cream) !important} main.v3[data-content="drainage"] .wl-push .wp-l .wp-b .wp-t strong{color:var(--ink) !important} main.v3[data-content="drainage"] .wl-push .wp-l .wp-b .wp-t span{color:rgba(26,23,20,.7) !important} main.v3[data-content="drainage"] .wl-push .wp-l .wp-b[aria-pressed="true"] .wp-t strong{color:var(--br-cream) !important} main.v3[data-content="drainage"] .wl-push .wp-l .wp-b[aria-pressed="true"] .wp-t span{color:rgba(242,237,228,.78) !important} main.v3[data-content="drainage"] .wl-push.reveal,main.v3[data-content="drainage"] .wl-push.reveal.in{opacity:1;transform:none} /* SVC-RW: each sign has its own "text us a photo of this" */ main.v3[data-content="drainage"] .sg-l li>div{display:flex;flex-direction:column;flex:1} main.v3[data-content="drainage"] .sg-ph{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;margin-top:auto;padding-top:14px;font-family:'Inter',sans-serif;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--bronze);text-decoration:none} main.v3[data-content="drainage"] .sg-ph span{padding-bottom:3px;border-bottom:1px solid rgba(166,124,63,.5);transition:border-color .3s} main.v3[data-content="drainage"] .sg-ph .ic{width:16px;height:16px} main.v3[data-content="drainage"] .sg-ph:hover span{border-color:var(--bronze)} /* SVC-BW: stucco as smooth plaster */ main.v3[data-content="drainage"] .wl-fin.is-stucco .trw0{fill:rgba(255,255,255,.2)} main.v3[data-content="drainage"] .wl-fin.is-stucco .trw1{fill:rgba(196,176,144,.1)} main.v3[data-content="drainage"] .wl-fin.is-stucco .capw{fill:#E9DECB} main.v3[data-content="drainage"] .wl-fin.is-stucco .capj{stroke:rgba(26,23,20,.18);stroke-width:1} main.v3[data-content="drainage"] .wl-fin.is-stucco .shade{fill:rgba(26,23,20,.07)} /* CAT-WALLS-05: the build ends on a visit */ main.v3[data-content="drainage"] .la-order .od-end{display:flex;justify-content:flex-start;margin-top:clamp(22px,2.4vw,32px)} main.v3[data-content="drainage"] .la-order .od-cta{display:inline-flex;align-items:center;gap:12px} /* CAT-WALLS-09: three sheets that each show their drawing */ main.v3[data-content="drainage"] .la-team .tm-sheets{min-height:0} main.v3[data-content="drainage"] .la-team .tm-sheets ol{height:auto;aspect-ratio:600/520} main.v3[data-content="drainage"] .la-team .tm-sheets li{width:50%;padding:12px 12px 10px} main.v3[data-content="drainage"] .la-team .tm-sheets li.sh1{left:0;top:0;transform:rotate(-3deg)} main.v3[data-content="drainage"] .la-team .tm-sheets li.sh2{left:50%;top:4%;transform:rotate(2.5deg)} main.v3[data-content="drainage"] .la-team .tm-sheets li.sh3{left:20%;top:47%;width:58%;transform:rotate(-1deg)} main.v3[data-content="drainage"] .la-team .tm-sheets:hover li.sh1{transform:rotate(-5deg) translate(-8px,-6px)} main.v3[data-content="drainage"] .la-team .tm-sheets:hover li.sh2{transform:rotate(4deg) translate(8px,-6px)} main.v3[data-content="drainage"] .la-team .tm-sheets:hover li.sh3{transform:rotate(-1deg) translateY(6px)} main.v3[data-content="drainage"] .la-team .tm-sheets li span{margin:0 0 8px} main.v3[data-content="drainage"] .tm-sheets .ws-so{fill:#E8DCC6} main.v3[data-content="drainage"] .tm-sheets .ws-g{fill:none;stroke:var(--ink);stroke-width:1.3} main.v3[data-content="drainage"] .tm-sheets .ws-gr{fill:#CDBFA6;stroke:rgba(26,23,20,.35);stroke-width:.8;stroke-dasharray:2 2} main.v3[data-content="drainage"] .tm-sheets .ws-ft{fill:#D6D0C4;stroke:var(--ink);stroke-width:1} main.v3[data-content="drainage"] .tm-sheets .ws-bk{fill:#CFC6B6;stroke:var(--ink);stroke-width:1.1} main.v3[data-content="drainage"] .tm-sheets .ws-j{stroke:rgba(26,23,20,.35);stroke-width:.8} main.v3[data-content="drainage"] .tm-sheets .ws-st{fill:none;stroke:#2E2A24;stroke-width:1.8;stroke-dasharray:5 2} main.v3[data-content="drainage"] .tm-sheets .ws-p{fill:#2E2A24} main.v3[data-content="drainage"] .tm-sheets .ws-dm{fill:none;stroke:var(--bronze);stroke-width:1.2} main.v3[data-content="drainage"] .tm-sheets .ws-lk{stroke:var(--bronze);stroke-width:1} main.v3[data-content="drainage"] .tm-sheets .ws-lc{fill:var(--bronze)} main.v3[data-content="drainage"] .tm-sheets .dp-ct{fill:none;stroke:rgba(26,23,20,.25);stroke-width:1} main.v3[data-content="drainage"] .tm-sheets .dp-w{fill:#8E8576;stroke:var(--ink);stroke-width:1} main.v3[data-content="drainage"] .tm-sheets .dp-pi{fill:none;stroke:var(--la-water);stroke-width:2.4;stroke-dasharray:6 3;stroke-linecap:round} main.v3[data-content="drainage"] .tm-sheets .dp-ar{fill:none;stroke:var(--la-water);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} main.v3[data-content="drainage"] .tm-sheets .dp-o{fill:#5A544B} main.v3[data-content="drainage"] .tm-sheets .dp-h{fill:#EDE4D3;stroke:var(--ink);stroke-width:1} main.v3[data-content="drainage"] .tm-sheets .dp-hh{stroke:rgba(26,23,20,.3);stroke-width:.8} /* CAT-WALLS-08: on a phone the six tabs sit in an even three by two grid */ @media (max-width:700px){ main.v3[data-content="drainage"] .la-rules .rtabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));overflow:visible} main.v3[data-content="drainage"] .la-rules .rt{min-height:58px;margin:0;border-right:1px solid var(--line);border-bottom:1px solid var(--line)} main.v3[data-content="drainage"] .la-rules .rt:nth-of-type(2n){border-right:0} main.v3[data-content="drainage"] .la-rules .rt{padding:10px 12px;gap:0} main.v3[data-content="drainage"] .la-rules .rt-ic{display:none} main.v3[data-content="drainage"] .la-rules .rt-t{font-size:15px;line-height:1.25} main.v3[data-content="drainage"] .wl-stgrid .st-n{display:grid;position:absolute;z-index:1;left:-2px;top:10px;width:22px;height:22px;font-size:11px} main.v3[data-content="drainage"] .wl-hero .la-hmenu{margin:0} } /* CAT-WALLS-10: the two wall reviews, one large on ink */ main.v3[data-content="drainage"] .wl-rv .rv-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:clamp(28px,3vw,40px)} main.v3[data-content="drainage"] .wl-rv .rv-head .br-head{margin-bottom:0} main.v3[data-content="drainage"] .wl-rvg{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(16px,2vw,28px);align-items:stretch} main.v3[data-content="drainage"] .wl-rvg .rcardq{margin:0;display:flex;flex-direction:column} main.v3[data-content="drainage"] .wl-rvg .rcardq blockquote{flex:1} main.v3[data-content="drainage"] .wl-rvg .rcardq:first-child{position:relative;padding:clamp(30px,3.4vw,48px);background:var(--br-ink);border-color:var(--br-ink);color:var(--br-cream)} main.v3[data-content="drainage"] .wl-rvg .rcardq:first-child::before{content:'\201C';position:absolute;right:clamp(24px,3vw,40px);top:6px;font-family:'Outfit',sans-serif;font-size:140px;line-height:1;color:rgba(217,183,126,.28)} main.v3[data-content="drainage"] .wl-rvg .rcardq:first-child blockquote{font-size:clamp(21px,1.9vw,27px);line-height:1.45;color:var(--br-cream)} main.v3[data-content="drainage"] .wl-rvg .rcardq:first-child .rq-who strong{color:var(--br-cream)} main.v3[data-content="drainage"] .wl-rvg .rcardq:first-child .rq-who span{color:rgba(242,237,228,.6)} main.v3[data-content="drainage"] .wl-rvg .rcardq:first-child .rq-av{background:var(--br-gold);color:var(--br-ink)} main.v3[data-content="drainage"] .wl-rvg .rcardq:first-child figcaption{border-color:rgba(242,237,228,.16)} main.v3[data-content="drainage"] .wl-rvg .rcardq:last-child blockquote{font-size:clamp(18px,1.5vw,21px);line-height:1.55} @media (max-width:1100px){ main.v3[data-content="drainage"] .svc-hero.wl-hero{grid-template-columns:1fr} main.v3[data-content="drainage"] .svc-hero.wl-hero .content{padding:140px 0 28px} main.v3[data-content="drainage"] .wl-hside{padding:0 0 56px;max-width:720px} main.v3[data-content="drainage"] .pk-head{grid-template-columns:1fr;align-items:start} main.v3[data-content="drainage"] .wl-rvg{grid-template-columns:1fr} } @media (max-width:700px){ main.v3[data-content="drainage"] .svc-hero.wl-hero .content{padding:118px 0 24px} main.v3[data-content="drainage"] .svc-hero.wl-hero h1{font-size:clamp(38px,10.4vw,46px)} main.v3[data-content="drainage"] .wl-hside{padding-bottom:44px;gap:12px} main.v3[data-content="drainage"] .ba-cv .ba-lb{top:10px;padding:6px 9px;font-size:12.5px} main.v3[data-content="drainage"] .ba-cv .ba-lb.is-b{left:10px} main.v3[data-content="drainage"] .ba-cv .ba-lb.is-a{right:10px} main.v3[data-content="drainage"] .ba-knob{width:40px;height:40px} main.v3[data-content="drainage"] .wl-hero .la-hmenu ol{grid-template-columns:1fr} main.v3[data-content="drainage"] .wl-hero .la-hmenu li+li{border-top:1px solid rgba(242,237,228,.12)} main.v3[data-content="drainage"] .wl-lot{padding:12px} main.v3[data-content="drainage"] .wl-lot figcaption{font-size:19px;margin-top:12px} main.v3[data-content="drainage"] .pk-btns{grid-template-columns:1fr} main.v3[data-content="drainage"] .wl-rv .rv-head{flex-direction:column;align-items:flex-start} main.v3[data-content="drainage"] .wl-rvg .rcardq:first-child::before{font-size:100px} main.v3[data-content="drainage"] .la-order .od-end .btn-primary{width:100%;justify-content:center;text-align:center} main.v3[data-content="drainage"] .la-team .tm-sheets ol{aspect-ratio:600/560} main.v3[data-content="drainage"] .la-team .tm-sheets li{padding:7px 7px 6px} main.v3[data-content="drainage"] .la-team .tm-sheets li span{font-size:13px;margin-bottom:5px} main.v3[data-content="drainage"] .sg-ph{font-size:10.5px;letter-spacing:.1em} } @media (prefers-reduced-motion:reduce){ main.v3[data-content="drainage"] .wl-lotsvg :is(.lp-r,.lp-c){transition:none} } /* the slope drawing: drains and planting on the terraced side, labels at the foot of the drawing */ main.v3[data-content="drainage"] .wl-ba .drn{fill:none;stroke:var(--la-water);stroke-width:2;stroke-dasharray:5 4;animation:laFlow 1.4s linear infinite} main.v3[data-content="drainage"] .wl-ba .drh{fill:none;stroke:var(--la-water);stroke-width:2;stroke-linecap:round;stroke-linejoin:round} main.v3[data-content="drainage"] .wl-ba .gr2 path{fill:none;stroke:#6F7B4B;stroke-width:1.8;stroke-linecap:round} main.v3[data-content="drainage"] .wl-ba .strata{fill:none;stroke:rgba(120,96,64,.28);stroke-width:1.2;stroke-dasharray:2 5} main.v3[data-content="drainage"] .ba-cv .ba-lb{top:auto;bottom:14px} @media (max-width:700px){ main.v3[data-content="drainage"] .ba-cv .ba-lb{top:auto;bottom:8px;padding:5px 8px;font-size:12px} main.v3[data-content="drainage"] .ba-cv .ba-lb i{font-size:9px} } @media (prefers-reduced-motion:reduce){ main.v3[data-content="drainage"] .wl-ba .drn{animation:none} } /* ================= drainage's own layouts (inc/visuals-drainage.php) ================= */ main.v3[data-content="drainage"]{--dr-water:#4F8590;--dr-sky:#F6F0E5} /* the drawing palette, shared by every drainage drawing */ main.v3[data-content="drainage"] .dr-svg .sky{fill:var(--dr-sky)} main.v3[data-content="drainage"] .dr-svg .soil{stroke:none} main.v3[data-content="drainage"] .dr-svg .gnd{fill:none;stroke:var(--ink);stroke-width:1.4;stroke-linejoin:round;stroke-linecap:round} main.v3[data-content="drainage"] .dr-svg .lawn{fill:none;stroke:#7E8A4A;stroke-width:3.2;stroke-linecap:round} main.v3[data-content="drainage"] .dr-svg .tuft{fill:none;stroke:#6F7B4B;stroke-width:1.5;stroke-linecap:round} main.v3[data-content="drainage"] .dr-svg .grv{stroke:rgba(26,23,20,.3);stroke-width:.8} main.v3[data-content="drainage"] .dr-svg .grv.is-fine{opacity:.55} main.v3[data-content="drainage"] .dr-svg .fab{fill:none;stroke:var(--bronze);stroke-width:1.6;stroke-dasharray:4 3} main.v3[data-content="drainage"] .dr-svg .trench{fill:#EFE6D6} main.v3[data-content="drainage"] .dr-svg .pipe-r{fill:#FBF8F2;stroke:#2E2A24;stroke-width:2.2} main.v3[data-content="drainage"] .dr-svg .perf{fill:#2E2A24} main.v3[data-content="drainage"] .dr-svg .wet{fill:rgba(79,133,144,.28)} main.v3[data-content="drainage"] .dr-svg .wet.is-low{fill:rgba(79,133,144,.14)} main.v3[data-content="drainage"] .dr-svg .wetb{fill:none;stroke:var(--dr-water);stroke-width:1.4;stroke-dasharray:4 4} main.v3[data-content="drainage"] .dr-svg .wline{fill:none;stroke:var(--dr-water);stroke-width:2;stroke-dasharray:6 4} main.v3[data-content="drainage"] .dr-svg .pud{fill:rgba(79,133,144,.55)} main.v3[data-content="drainage"] .dr-svg .wd{fill:var(--dr-water)} main.v3[data-content="drainage"] .dr-svg .rain{fill:none;stroke:rgba(79,133,144,.5);stroke-width:1.3;stroke-linecap:round} main.v3[data-content="drainage"] .dr-svg .line{fill:none;stroke:#3A342C;stroke-width:4;stroke-linecap:round;stroke-linejoin:round} main.v3[data-content="drainage"] .dr-svg .flow{fill:none;stroke:#9CCBD3;stroke-width:1.8;stroke-dasharray:4 5;stroke-linecap:round;animation:laFlow 1.2s linear infinite} main.v3[data-content="drainage"] .dr-svg .ar-w :is(.ln,.hd){fill:none;stroke:var(--dr-water);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round} main.v3[data-content="drainage"] .dr-svg .ar-bad :is(.ln,.hd){fill:none;stroke:var(--wl-rust);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round} main.v3[data-content="drainage"] .dr-svg .hb{fill:#FBF6EC;stroke:var(--ink);stroke-width:1.2} main.v3[data-content="drainage"] .dr-svg .hr{fill:#B98F66;stroke:var(--ink);stroke-width:1.2;stroke-linejoin:round} main.v3[data-content="drainage"] .dr-svg .hw{fill:#CFC3AE;stroke:var(--ink);stroke-width:.8} main.v3[data-content="drainage"] .dr-svg .hw.is-on{fill:#EBD3A2} main.v3[data-content="drainage"] .dr-svg .door{fill:#8C6A48;stroke:var(--ink);stroke-width:.8} main.v3[data-content="drainage"] .dr-svg .fdn{fill:#D8CFC0;stroke:var(--ink);stroke-width:1} main.v3[data-content="drainage"] .dr-svg .gut{fill:#A39B8E;stroke:var(--ink);stroke-width:.8} main.v3[data-content="drainage"] .dr-svg .dsp rect{fill:#BDB5A8;stroke:var(--ink);stroke-width:.8} main.v3[data-content="drainage"] .dr-svg .dsp path{fill:none;stroke:#8F877B;stroke-width:5;stroke-linecap:round;stroke-linejoin:round} main.v3[data-content="drainage"] .dr-svg .rock ellipse{fill:#ADA08B;stroke:rgba(26,23,20,.5);stroke-width:.8} main.v3[data-content="drainage"] .dr-svg .creek{fill:none;stroke:rgba(79,133,144,.65);stroke-width:3;stroke-linecap:round} main.v3[data-content="drainage"] .dr-svg .sh-a{fill:#6F7B4B} main.v3[data-content="drainage"] .dr-svg .sh-b{fill:#8E9962} main.v3[data-content="drainage"] .dr-svg .sh-c{fill:#5B6842} main.v3[data-content="drainage"] .dr-svg .lav path{fill:none;stroke:#A08AC8;stroke-width:2.4;stroke-linecap:round} main.v3[data-content="drainage"] .dr-svg .lb{font-family:'Inter',sans-serif;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;fill:var(--ink)} main.v3[data-content="drainage"] .dr-svg .mud{fill:#B89A74} main.v3[data-content="drainage"] .dr-svg .rill{fill:none;stroke:#8C6A48;stroke-width:1.8;stroke-dasharray:4 3;stroke-linecap:round} main.v3[data-content="drainage"] .dr-svg .fence{fill:none;stroke:#7A6450;stroke-width:2.4;stroke-linecap:round} main.v3[data-content="drainage"] .dr-svg .spill{fill:none;stroke:var(--dr-water);stroke-width:2;stroke-dasharray:3 3} main.v3[data-content="drainage"] .dr-svg .edge{fill:none;stroke:#2B2018;stroke-width:1.6} main.v3[data-content="drainage"] .dr-svg .was{fill:none;stroke:var(--wl-rust);stroke-width:1.6;stroke-dasharray:5 4} main.v3[data-content="drainage"] .dr-svg .box{fill:#3A342C} main.v3[data-content="drainage"] .dr-svg .grate{fill:none;stroke:#D7CDBB;stroke-width:1.4} main.v3[data-content="drainage"] .dr-svg .slab{fill:#E2D9CA;stroke:var(--ink);stroke-width:1} main.v3[data-content="drainage"] .dr-svg .joint{fill:none;stroke:rgba(26,23,20,.4);stroke-width:1} main.v3[data-content="drainage"] .dr-svg .trough{fill:#4A443B;stroke:var(--ink);stroke-width:1} main.v3[data-content="drainage"] .dr-svg .wtr{fill:none;stroke:var(--dr-water);stroke-width:3;stroke-linecap:round} main.v3[data-content="drainage"] .dr-svg .lb-tick{display:none} main.v3[data-content="drainage"] .dr-svg .emit{fill:#3A342C} main.v3[data-content="drainage"] .dr-svg .pav{fill:#DCCDB2;stroke:rgba(26,23,20,.55);stroke-width:.9} main.v3[data-content="drainage"] .dr-svg .tw{fill:var(--wl-block);stroke:var(--ink);stroke-width:1} main.v3[data-content="drainage"] .dr-svg .netl{fill:none;stroke:#9C7F55;stroke-width:1;opacity:.85} main.v3[data-content="drainage"] .dr-svg .run{fill:none;stroke:var(--dr-water);stroke-width:2.2;stroke-dasharray:5 4;animation:laFlow 1.2s linear infinite} main.v3[data-content="drainage"] .dr-svg .cloud ellipse{fill:#B5B8B1;opacity:.75} /* CAT-DRAIN-01 hero: the yard before and after, the page menu */ main.v3[data-content="drainage"] .dr-ba .lawn{fill:none} main.v3[data-content="drainage"] .dr-ba .rain{stroke:rgba(79,110,120,.55)} main.v3[data-content="drainage"] .dr-ba .pud{fill:rgba(79,133,144,.7)} main.v3[data-content="drainage"] .dr-hero .dr-hmenu ol{grid-template-columns:repeat(2,minmax(0,1fr))} /* CAT-DRAIN-02 the start board, headed by the roof's water */ main.v3[data-content="drainage"] .br-start .bs-img.dr-sart{aspect-ratio:auto;background:var(--dr-sky);border-bottom:1px solid rgba(217,183,126,.3)} main.v3[data-content="drainage"] .br-start .bs-img.dr-sart::after{display:none} main.v3[data-content="drainage"] .dr-sart svg{display:block;width:100%;height:auto} main.v3[data-content="drainage"] .dr-scard .bs-body{margin-top:0;padding-top:clamp(26px,2.6vw,36px)} main.v3[data-content="drainage"] .dr-start .lb{font-size:11px;fill:var(--bronze)} /* CAT-DRAIN-03 the signs on one lot */ main.v3[data-content="drainage"] .dr-signs .ds-grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:clamp(28px,3.6vw,60px);align-items:center} main.v3[data-content="drainage"] .dr-signs .wl-lot{margin:0} main.v3[data-content="drainage"] .ds-l{list-style:none;margin:0;padding:0;display:grid;gap:10px} main.v3[data-content="drainage"] .ds-l li{position:relative} main.v3[data-content="drainage"] .ds-row{display:grid;grid-template-columns:26px 42px minmax(0,1fr) 24px;align-items:center;gap:14px;margin:0;padding:13px 16px;background:var(--paper);border:1px solid var(--line);cursor:pointer;transition:border-color .3s,background-color .3s,transform .4s var(--ease),box-shadow .4s var(--ease)} main.v3[data-content="drainage"] .ds-row:hover{border-color:var(--bronze);transform:translateX(3px)} main.v3[data-content="drainage"] .ds-row input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none} main.v3[data-content="drainage"] .ds-row:has(input:focus-visible){outline:2px solid var(--bronze);outline-offset:2px} main.v3[data-content="drainage"] .ds-n{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--br-ink);font-family:'Outfit',sans-serif;font-style:normal;font-size:13px;color:var(--br-gold)} main.v3[data-content="drainage"] .ds-ic{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;border:1px solid rgba(166,124,63,.45);color:var(--bronze)} main.v3[data-content="drainage"] .ds-ic .ic{width:20px;height:20px} main.v3[data-content="drainage"] .ds-t{font-family:'Outfit',sans-serif;font-size:17.5px;line-height:1.3;color:var(--ink)} main.v3[data-content="drainage"] .ds-box{display:grid;place-items:center;width:24px;height:24px;border:1px solid rgba(26,23,20,.35);background:#FBF8F2;transition:background .3s,border-color .3s} main.v3[data-content="drainage"] .ds-box svg{width:14px;height:14px;fill:none;stroke:#FBF8F2;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;opacity:0;transition:opacity .25s} main.v3[data-content="drainage"] .ds-l li.is-on .ds-row{border-color:var(--bronze);background:#FBF5EA;box-shadow:0 18px 34px -28px rgba(26,23,20,.55)} main.v3[data-content="drainage"] .ds-l li.is-on .ds-box{background:var(--bronze);border-color:var(--bronze)} main.v3[data-content="drainage"] .ds-l li.is-on .ds-box svg{opacity:1} main.v3[data-content="drainage"] .ds-l li.is-on .ds-n{background:var(--bronze);color:#FBF8F2} main.v3[data-content="drainage"] .ds-foot{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin-top:22px} main.v3[data-content="drainage"] .ds-foot .btn{margin:0} main.v3[data-content="drainage"] .ds-cnt{font-family:'Inter',sans-serif;font-size:11.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:rgba(26,23,20,.6)} main.v3[data-content="drainage"] .ds-cnt b{font-family:'Outfit',sans-serif;font-style:normal;font-weight:400;font-size:20px;letter-spacing:0;color:var(--bronze);margin-right:4px} main.v3[data-content="drainage"] .dr-lot .lp-c{fill:var(--br-ink);stroke:#F4EEE3;stroke-width:2;transition:fill .3s} main.v3[data-content="drainage"] .dr-lot .lp text{font-family:'Outfit',sans-serif;font-style:normal;font-size:14px;fill:var(--br-gold);transition:fill .3s} main.v3[data-content="drainage"] .dr-lot .lp-r{fill:rgba(166,124,63,.3);opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(.6);transition:opacity .35s,transform .45s var(--ease)} main.v3[data-content="drainage"] .dr-lot .hse .hw{fill:#F4EEE3} main.v3[data-content="drainage"] .dr-lotfig:is([data-focus="1"],[data-on~="1"]) .lp-1 .lp-c{fill:var(--bronze)} main.v3[data-content="drainage"] .dr-lotfig:is([data-focus="1"],[data-on~="1"]) .lp-1 text{fill:#FBF8F2} main.v3[data-content="drainage"] .dr-lotfig:is([data-focus="1"],[data-on~="1"]) .lp-1 .lp-r{opacity:1;transform:scale(1)} main.v3[data-content="drainage"] .dr-lotfig:is([data-focus="2"],[data-on~="2"]) .lp-2 .lp-c{fill:var(--bronze)} main.v3[data-content="drainage"] .dr-lotfig:is([data-focus="2"],[data-on~="2"]) .lp-2 text{fill:#FBF8F2} main.v3[data-content="drainage"] .dr-lotfig:is([data-focus="2"],[data-on~="2"]) .lp-2 .lp-r{opacity:1;transform:scale(1)} main.v3[data-content="drainage"] .dr-lotfig:is([data-focus="3"],[data-on~="3"]) .lp-3 .lp-c{fill:var(--bronze)} main.v3[data-content="drainage"] .dr-lotfig:is([data-focus="3"],[data-on~="3"]) .lp-3 text{fill:#FBF8F2} main.v3[data-content="drainage"] .dr-lotfig:is([data-focus="3"],[data-on~="3"]) .lp-3 .lp-r{opacity:1;transform:scale(1)} main.v3[data-content="drainage"] .dr-lotfig:is([data-focus="4"],[data-on~="4"]) .lp-4 .lp-c{fill:var(--bronze)} main.v3[data-content="drainage"] .dr-lotfig:is([data-focus="4"],[data-on~="4"]) .lp-4 text{fill:#FBF8F2} main.v3[data-content="drainage"] .dr-lotfig:is([data-focus="4"],[data-on~="4"]) .lp-4 .lp-r{opacity:1;transform:scale(1)} main.v3[data-content="drainage"] .dr-lotfig:is([data-focus="5"],[data-on~="5"]) .lp-5 .lp-c{fill:var(--bronze)} main.v3[data-content="drainage"] .dr-lotfig:is([data-focus="5"],[data-on~="5"]) .lp-5 text{fill:#FBF8F2} main.v3[data-content="drainage"] .dr-lotfig:is([data-focus="5"],[data-on~="5"]) .lp-5 .lp-r{opacity:1;transform:scale(1)} main.v3[data-content="drainage"] .dr-lotfig:is([data-focus="6"],[data-on~="6"]) .lp-6 .lp-c{fill:var(--bronze)} main.v3[data-content="drainage"] .dr-lotfig:is([data-focus="6"],[data-on~="6"]) .lp-6 text{fill:#FBF8F2} main.v3[data-content="drainage"] .dr-lotfig:is([data-focus="6"],[data-on~="6"]) .lp-6 .lp-r{opacity:1;transform:scale(1)} /* CAT-DRAIN-04 the fixes, drawn */ main.v3[data-content="drainage"] .fx-l{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px} main.v3[data-content="drainage"] .fx{display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line);transition:opacity .45s var(--ease),transform .45s var(--ease),box-shadow .45s var(--ease),filter .45s} main.v3[data-content="drainage"] .fx:not(.fx-ask):hover{transform:translateY(-4px);box-shadow:0 30px 50px -36px rgba(26,23,20,.55)} main.v3[data-content="drainage"] .fx figure{position:relative;margin:0;aspect-ratio:8/5;overflow:hidden;border-bottom:1px solid var(--line);background:var(--dr-sky)} main.v3[data-content="drainage"] .fx figure svg{display:block;width:100%;height:100%;transition:transform .8s var(--ease)} main.v3[data-content="drainage"] .fx:hover figure svg{transform:scale(1.05)} main.v3[data-content="drainage"] .fx-n{position:absolute;z-index:1;left:12px;top:10px;padding:3px 8px;background:rgba(22,19,15,.8);font-family:'Outfit',sans-serif;font-style:normal;font-size:13px;color:var(--br-gold)} main.v3[data-content="drainage"] .fx-b{display:flex;flex-direction:column;flex:1;padding:18px 20px 20px} main.v3[data-content="drainage"] .fx-b h3{margin:0;font-family:'Outfit',sans-serif;font-weight:400;font-size:21px;line-height:1.2;color:var(--ink)} main.v3[data-content="drainage"] .fx-b p{margin:8px 0 0;font-size:14px;line-height:1.6;color:rgba(26,23,20,.72)} main.v3[data-content="drainage"] .fx-b .fx-t{margin-top:auto;padding-top:14px;font-size:13px;line-height:1.55;color:rgba(26,23,20,.66)} main.v3[data-content="drainage"] .fx-b p+.fx-t{margin-top:14px;border-top:1px solid var(--line)} main.v3[data-content="drainage"] .fx-t span{display:block;margin-bottom:4px;font-family:'Inter',sans-serif;font-size:10.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--bronze)} main.v3[data-content="drainage"] .fx-go{align-self:flex-start;display:inline-flex;gap:8px;margin-top:14px;padding-bottom:4px;border-bottom:1px solid var(--bronze);font-family:'Inter',sans-serif;font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);text-decoration:none} main.v3[data-content="drainage"] .fx.is-off{opacity:.3;filter:saturate(.3)} main.v3[data-content="drainage"] .fx-ask{justify-content:center;padding:clamp(22px,2.2vw,30px);background:var(--br-ink);border-color:var(--br-ink);color:var(--br-cream)} main.v3[data-content="drainage"] .wq-q{margin:0 0 18px;font-family:'Outfit',sans-serif;font-weight:300;font-size:clamp(23px,1.9vw,28px);line-height:1.2;color:var(--br-cream)} main.v3[data-content="drainage"] .wq-btns{display:grid;gap:10px} main.v3[data-content="drainage"] .fx-ask .wq-b{display:grid;grid-template-columns:40px minmax(0,1fr);align-items:center;gap:12px;width:100%;margin:0;padding:12px 14px;text-align:left;background:rgba(242,237,228,.05);border:1px solid rgba(217,183,126,.38);border-radius:0;box-shadow:none;color:var(--br-cream);font-family:'Inter',sans-serif;letter-spacing:0;text-transform:none;cursor:pointer;transition:background .3s,border-color .3s,color .3s} main.v3[data-content="drainage"] .fx-ask .wq-b:hover{border-color:var(--br-gold);background:rgba(242,237,228,.09)} main.v3[data-content="drainage"] .fx-ask .wq-b[aria-pressed="true"]{background:var(--br-gold);border-color:var(--br-gold);color:var(--br-ink)} main.v3[data-content="drainage"] .wq-ic{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;border:1px solid rgba(217,183,126,.5);color:var(--br-gold)} main.v3[data-content="drainage"] .wq-b[aria-pressed="true"] .wq-ic{border-color:var(--br-ink);color:var(--br-ink)} main.v3[data-content="drainage"] .wq-ic .ic{width:19px;height:19px} main.v3[data-content="drainage"] .wq-t strong{display:block;font-family:'Outfit',sans-serif;font-weight:400;font-size:17px;line-height:1.2} main.v3[data-content="drainage"] .wq-t span{display:block;margin-top:3px;font-size:12.5px;line-height:1.4;opacity:.72} main.v3[data-content="drainage"] .fx-ask .wq-all{justify-self:start;margin:6px 0 0;padding:0 0 4px;background:none;border:0;border-bottom:1px solid rgba(217,183,126,.6);border-radius:0;box-shadow:none;font-family:'Inter',sans-serif;font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--br-gold);cursor:pointer} main.v3[data-content="drainage"] .fx-ask .wq-all[aria-pressed="true"]{opacity:.55} /* SVC-FD the route from above beside the trench, the steps that light the parts */ main.v3[data-content="drainage"] .lv-spread.dr-spread{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(16px,1.8vw,24px);align-items:stretch} main.v3[data-content="drainage"] .dr-routecard{display:flex;flex-direction:column;gap:14px;padding:clamp(18px,1.8vw,24px);background:var(--br-ink);box-shadow:0 40px 70px -46px rgba(26,23,20,.8)} main.v3[data-content="drainage"] .rc-k{display:flex;align-items:center;gap:10px;margin:0;font-family:'Inter',sans-serif;font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--br-gold)} main.v3[data-content="drainage"] .rc-k .ic{width:18px;height:18px} main.v3[data-content="drainage"] .rc-cv{flex:1;display:flex;align-items:center;justify-content:center;min-height:0} main.v3[data-content="drainage"] .dr-route{display:block;width:100%;height:auto;max-height:420px} main.v3[data-content="drainage"] .rc-lg{list-style:none;margin:0;padding:14px 0 0;display:grid;gap:9px;border-top:1px solid rgba(242,237,228,.14)} main.v3[data-content="drainage"] .rc-lg li{display:flex;align-items:center;gap:12px;font-size:13px;line-height:1.4;color:rgba(242,237,228,.78)} main.v3[data-content="drainage"] .rc-lg i{flex:0 0 22px;height:12px;border-radius:2px} main.v3[data-content="drainage"] .rc-lg .k1{background:rgba(79,133,144,.6);border-radius:50%;height:14px;flex-basis:14px;margin:0 4px} main.v3[data-content="drainage"] .rc-lg .k2{height:3px;background:var(--br-gold)} main.v3[data-content="drainage"] .rc-lg .k3{background:#4F8590;clip-path:polygon(0 0,100% 0,80% 100%,20% 100%)} main.v3[data-content="drainage"] .dr-route .lotb{fill:rgba(242,237,228,.03);stroke:rgba(242,237,228,.3);stroke-width:1} main.v3[data-content="drainage"] .dr-route .hs{fill:rgba(242,237,228,.1);stroke:rgba(242,237,228,.7);stroke-width:1.2} main.v3[data-content="drainage"] .dr-route .hs-r{fill:none;stroke:rgba(242,237,228,.18);stroke-width:1} main.v3[data-content="drainage"] .dr-route .pat{fill:rgba(217,183,126,.12);stroke:rgba(217,183,126,.45);stroke-width:1} main.v3[data-content="drainage"] .dr-route .pat-j{fill:none;stroke:rgba(217,183,126,.25);stroke-width:1} main.v3[data-content="drainage"] .dr-route .sog{fill:rgba(79,133,144,.28)} main.v3[data-content="drainage"] .dr-route .sog.is-2{fill:rgba(79,133,144,.42)} main.v3[data-content="drainage"] .dr-route .ct{fill:none;stroke:rgba(242,237,228,.16);stroke-width:1;stroke-dasharray:3 5} main.v3[data-content="drainage"] .dr-route .dl{fill:none;stroke:var(--br-gold);stroke-width:3;stroke-linecap:round;stroke-linejoin:round} main.v3[data-content="drainage"] .dr-route .dl-f{fill:none;stroke:#9CCBD3;stroke-width:1.6;stroke-dasharray:4 6;stroke-linecap:round;animation:laFlow 1.3s linear infinite} main.v3[data-content="drainage"] .dr-route .ds{fill:var(--br-gold)} main.v3[data-content="drainage"] .dr-route .co{fill:var(--br-ink);stroke:var(--br-gold);stroke-width:1.6} main.v3[data-content="drainage"] .dr-route .out{fill:#4F8590;stroke:#9CCBD3;stroke-width:1} main.v3[data-content="drainage"] .dr-route .street{fill:rgba(242,237,228,.12)} main.v3[data-content="drainage"] .dr-cutfig .wp-cv{background:var(--dr-sky)} main.v3[data-content="drainage"] .dr-cut{display:block;width:100%;height:auto} main.v3[data-content="drainage"] .dr-cut .sun{fill:#F2CF93} main.v3[data-content="drainage"] .dr-cut .sid{fill:none;stroke:rgba(26,23,20,.14);stroke-width:1} main.v3[data-content="drainage"] .dr-cut .lb-h{font-size:10px;letter-spacing:.12em} main.v3[data-content="drainage"] .dr-cut .clean{fill:#D9D1C3;stroke:var(--ink);stroke-width:1} main.v3[data-content="drainage"] .dr-cut .clean-c{fill:#3A342C} main.v3[data-content="drainage"] .dr-cut .fall{fill:none;stroke:#3A342C;stroke-width:5;stroke-linecap:round} main.v3[data-content="drainage"] .dr-cut .fall-w{fill:none;stroke:#9CCBD3;stroke-width:2;stroke-dasharray:4 5;animation:laFlow 1.2s linear infinite} main.v3[data-content="drainage"] .dr-cut .fall-t{fill:var(--bronze)} main.v3[data-content="drainage"] .dr-cut .ldr{fill:none;stroke:rgba(26,23,20,.55);stroke-width:1} main.v3[data-content="drainage"] .dr-cut .lb-wet{fill:var(--dr-water)} main.v3[data-content="drainage"] .dr-cut .lb-h{fill:rgba(26,23,20,.55)} main.v3[data-content="drainage"] .dr-cut .st,main.v3[data-content="drainage"] .dr-cut .part,main.v3[data-content="drainage"] .dr-cut .lb,main.v3[data-content="drainage"] .dr-cut .ldr{transition:opacity .5s var(--ease),filter .5s var(--ease)} main.v3[data-content="drainage"] .dr-cutfig[data-focus] .st-dry :is(.part,text,.ldr){opacity:.22} main.v3[data-content="drainage"] .dr-cutfig[data-focus="fabric"] .st-dry .pt-fabric{opacity:1;filter:drop-shadow(0 0 5px rgba(217,183,126,.95))} main.v3[data-content="drainage"] .dr-cutfig[data-focus="fabric"] .st-dry text.pt-fabric{fill:var(--bronze);filter:none} main.v3[data-content="drainage"] .dr-cutfig[data-focus="pipe"] .st-dry .pt-pipe{opacity:1;filter:drop-shadow(0 0 5px rgba(217,183,126,.95))} main.v3[data-content="drainage"] .dr-cutfig[data-focus="pipe"] .st-dry text.pt-pipe{fill:var(--bronze);filter:none} main.v3[data-content="drainage"] .dr-cutfig[data-focus="fall"] .st-dry .pt-fall{opacity:1;filter:drop-shadow(0 0 5px rgba(217,183,126,.95))} main.v3[data-content="drainage"] .dr-cutfig[data-focus="fall"] .st-dry text.pt-fall{fill:var(--bronze);filter:none} main.v3[data-content="drainage"] .dr-cutfig[data-focus="clean"] .st-dry .pt-clean{opacity:1;filter:drop-shadow(0 0 5px rgba(217,183,126,.95))} main.v3[data-content="drainage"] .dr-cutfig[data-focus="clean"] .st-dry text.pt-clean{fill:var(--bronze);filter:none} main.v3[data-content="drainage"] .dr-how{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);gap:clamp(22px,3vw,44px);align-items:start;margin-top:clamp(28px,3vw,40px)} main.v3[data-content="drainage"] .dh-head .lv-h3{margin:0 0 10px} main.v3[data-content="drainage"] .dh-lead{margin:0;display:flex;align-items:center;gap:8px;font-family:'Inter',sans-serif;font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--bronze)} main.v3[data-content="drainage"] .dh-l{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px} main.v3[data-content="drainage"] .dh-l li{display:flex;flex-direction:column;gap:10px;padding:16px 18px 18px;background:var(--paper);border:1px solid var(--line);cursor:pointer;transition:background .35s var(--ease),border-color .35s,color .35s} main.v3[data-content="drainage"] .dh-l li:hover,main.v3[data-content="drainage"] .dh-l li.is-on,main.v3[data-content="drainage"] .dh-l li:focus-visible{background:var(--br-ink);border-color:var(--br-ink);color:var(--br-cream);outline:0} main.v3[data-content="drainage"] .dh-l .rl-n{font-family:'Outfit',sans-serif;font-style:normal;font-size:22px;line-height:1;color:var(--bronze)} main.v3[data-content="drainage"] .dh-l li:is(:hover,.is-on,:focus-visible) .rl-n{color:var(--br-gold)} main.v3[data-content="drainage"] .dh-l p{margin:0;font-size:14px;line-height:1.55} main.v3[data-content="drainage"] .dr-sits .sg-l figure{padding:10px 10px 6px} main.v3[data-content="drainage"] .dr-sit{display:block;width:100%;height:auto} main.v3[data-content="drainage"] .dr-next{display:flex;flex-wrap:wrap;gap:16px 34px} /* SVC-GR (staging only until it is published) */ main.v3[data-content="drainage"] .dr-gro .sw-l figure{background:var(--dr-sky)} /* CAT-DRAIN-05 the French drain, step by step */ main.v3[data-content="drainage"] .dr-build{display:block;width:100%;height:auto} main.v3[data-content="drainage"] .dr-build .curb{fill:#CFC6B6;stroke:var(--ink);stroke-width:1} main.v3[data-content="drainage"] .dr-build .look{fill:none;stroke:var(--bronze);stroke-width:1.4;stroke-dasharray:3 3} main.v3[data-content="drainage"] .dr-build .route{fill:none;stroke:var(--bronze);stroke-width:1.8;stroke-dasharray:6 4} main.v3[data-content="drainage"] .dr-build .mark{fill:none;stroke:var(--bronze);stroke-width:1.4} main.v3[data-content="drainage"] .dr-build .mk-o{fill:none;stroke:var(--bronze);stroke-width:2} main.v3[data-content="drainage"] .dr-build .dug{fill:var(--dr-sky)} main.v3[data-content="drainage"] .dr-build .cut{fill:none;stroke:var(--bronze);stroke-width:1.4;stroke-dasharray:4 3} main.v3[data-content="drainage"] .dr-build .pipe-l{fill:none;stroke:#2E2A24;stroke-width:5;stroke-linecap:round} main.v3[data-content="drainage"] .dr-build .perf-l{fill:none;stroke:#F6F0E5;stroke-width:1.4;stroke-dasharray:1 6} main.v3[data-content="drainage"] .dr-build .lvl rect{fill:#E3C99A;stroke:var(--ink);stroke-width:.8} main.v3[data-content="drainage"] .dr-build .lvl circle{fill:var(--dr-water)} main.v3[data-content="drainage"] .dr-build .chk{fill:none;stroke:var(--bronze);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round} main.v3[data-content="drainage"] .dr-build .back{stroke:none} main.v3[data-content="drainage"] .dr-build .lawn{stroke-width:2.4} main.v3[data-content="drainage"] .od-fig:not([data-step="1"]) .hk1 .look,main.v3[data-content="drainage"] .od-fig:not([data-step="1"]):not([data-step="2"]):not([data-step="3"]) .hk2 :is(.route,.mark){opacity:0} main.v3[data-content="drainage"] .od-fig:not([data-step="4"]) .hk4 :is(.lvl,.chk){opacity:0} main.v3[data-content="drainage"] .od-fig:is([data-step="5"],[data-step="6"]) .hk1 :is(.pud,.ar-bad){opacity:0} /* CAT-DRAIN-08 rules drawings */ main.v3[data-content="drainage"] .dr-rz .line{stroke-width:3.4} main.v3[data-content="drainage"] .dr-rz .bad-l{fill:none;stroke:var(--wl-rust);stroke-width:2;stroke-dasharray:5 4} main.v3[data-content="drainage"] .dr-rz .no circle{fill:#F3DED3;stroke:var(--wl-rust);stroke-width:1.6} main.v3[data-content="drainage"] .dr-rz .no path{fill:none;stroke:var(--wl-rust);stroke-width:2.2;stroke-linecap:round} main.v3[data-content="drainage"] .dr-rz .street{fill:#D8CFC0} main.v3[data-content="drainage"] .dr-rz .core{fill:#C9B391;stroke:var(--ink);stroke-width:1} main.v3[data-content="drainage"] .dr-rz .core-l{fill:none;stroke:rgba(26,23,20,.4);stroke-width:1} main.v3[data-content="drainage"] .dr-rz .hs{fill:#FBF6EC;stroke:var(--ink);stroke-width:1.1} /* CAT-DRAIN-09 plan sheets */ main.v3[data-content="drainage"] .tm-sheets .dp-c{fill:var(--bronze)} main.v3[data-content="drainage"] .tm-sheets .ws-fb{fill:none;stroke:var(--bronze);stroke-width:1.2;stroke-dasharray:3 2} main.v3[data-content="drainage"] .tm-sheets .ws-pi{fill:#FBF8F2} main.v3[data-content="drainage"] .tm-sheets .gp-h{fill:#EDE4D3;stroke:var(--ink);stroke-width:1} main.v3[data-content="drainage"] .tm-sheets .gp-c{fill:none;stroke:rgba(26,23,20,.35);stroke-width:1;stroke-dasharray:3 3} main.v3[data-content="drainage"] .tm-sheets .gp-a{fill:none;stroke:var(--la-water);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} /* responsive (own layouts) */ @media (max-width:1100px){ main.v3[data-content="drainage"] .fx-l{grid-template-columns:repeat(2,minmax(0,1fr))} main.v3[data-content="drainage"] .dh-l{grid-template-columns:repeat(2,minmax(0,1fr))} main.v3[data-content="drainage"] .dr-how{grid-template-columns:1fr} } @media (max-width:900px){ main.v3[data-content="drainage"] .dr-signs .ds-grid{grid-template-columns:1fr} main.v3[data-content="drainage"] .lv-spread.dr-spread{grid-template-columns:1fr} main.v3[data-content="drainage"] .dr-routecard{display:none} } @media (max-width:640px){ main.v3[data-content="drainage"] .fx-l{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 calc(var(--pad) * -1);padding:2px var(--pad) 14px;scroll-padding:0 var(--pad);scrollbar-width:none} main.v3[data-content="drainage"] .fx-l::-webkit-scrollbar{display:none} main.v3[data-content="drainage"] .fx{flex:0 0 80%;scroll-snap-align:start} main.v3[data-content="drainage"] .fx:not(.fx-ask):hover{transform:none} main.v3[data-content="drainage"] .fx-b{padding:16px 16px 18px} main.v3[data-content="drainage"] .fx-b h3{font-size:19px} main.v3[data-content="drainage"] .fx-ask{order:-1;flex-basis:84%} main.v3[data-content="drainage"] .fx-n{left:8px;top:8px;font-size:12px} main.v3[data-content="drainage"] .ds-row{grid-template-columns:24px 36px minmax(0,1fr) 22px;gap:10px;padding:12px} main.v3[data-content="drainage"] .ds-ic{width:36px;height:36px} main.v3[data-content="drainage"] .ds-ic .ic{width:17px;height:17px} main.v3[data-content="drainage"] .ds-t{font-size:15.5px} main.v3[data-content="drainage"] .dh-l{grid-template-columns:1fr;gap:8px} main.v3[data-content="drainage"] .dh-l li{flex-direction:row;align-items:baseline;gap:14px;padding:12px 14px} main.v3[data-content="drainage"] .dr-hero .dr-hmenu ol{grid-template-columns:1fr} main.v3[data-content="drainage"] .dr-cut .st-dry :is(text,.ldr),main.v3[data-content="drainage"] .dr-cut .lb-h{display:none} main.v3[data-content="drainage"] .dr-cut .lb-wet{font-size:26px} main.v3[data-content="drainage"] .fx-ask{justify-content:flex-start;padding-top:28px} } @media (prefers-reduced-motion:reduce){ main.v3[data-content="drainage"] :is(.dr-svg .flow,.dr-svg .run,.dr-route .dl-f,.dr-cut .fall-w){animation:none} } /* ================= WOW round (2026-10-16, drainage): photo hero, rain on the lot, the fix finder, numbered parts, the fall rule ================= */ /* CAT-DRAIN-01: a finished hillside yard behind the title; the drawing as a framed card, house on the before side */ main.v3[data-content="drainage"] .svc-hero.dr-hero{position:relative;isolation:isolate;background:#14110E} main.v3[data-content="drainage"] .svc-hero.dr-hero::before{display:none} main.v3[data-content="drainage"] .dr-hero .dr-himg{z-index:-1;background-position:center 58%} main.v3[data-content="drainage"] .dr-hero .dr-himg::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(16,13,10,.94) 0%,rgba(16,13,10,.82) 34%,rgba(16,13,10,.5) 62%,rgba(16,13,10,.62) 100%),linear-gradient(0deg,rgba(16,13,10,.9) 0%,rgba(16,13,10,0) 42%),linear-gradient(180deg,rgba(16,13,10,.7) 0%,rgba(16,13,10,0) 22%)} main.v3[data-content="drainage"] .dr-hero .dr-bafig{padding:10px;background:rgba(16,13,10,.5);border:1px solid rgba(217,183,126,.3);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)} main.v3[data-content="drainage"] .dr-hero .dr-bafig .ba-hint{margin:10px 4px 2px} main.v3[data-content="drainage"] .dr-hero .dr-hmenu{background:rgba(16,13,10,.62);border:1px solid rgba(217,183,126,.22);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)} main.v3[data-content="drainage"] .dr-hero .hero-sub,main.v3[data-content="drainage"] .dr-hero .hero-mc{text-shadow:0 1px 14px rgba(0,0,0,.5)} /* CAT-DRAIN-02: the roof drawing sits inside its frame */ main.v3[data-content="drainage"] .dr-start .ldr{fill:none;stroke:var(--bronze);stroke-width:1} /* CAT-DRAIN-03: heading over the lot, the picks card over the rows; rain on the lot */ main.v3[data-content="drainage"] .dr-signs .ds-grid{grid-template-columns:minmax(0,6.2fr) minmax(0,5.8fr);grid-template-areas:"head card" "fig list";gap:clamp(28px,3vw,44px) clamp(28px,3.6vw,60px);align-items:end} main.v3[data-content="drainage"] .dr-signs .ds-head{grid-area:head;margin:0} main.v3[data-content="drainage"] .dr-signs .ds-card{grid-area:card} main.v3[data-content="drainage"] .dr-signs .dr-lotfig{grid-area:fig;align-self:start} main.v3[data-content="drainage"] .dr-signs .ds-l{grid-area:list;align-self:center} main.v3[data-content="drainage"] .ds-card{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:6px 22px;padding:clamp(20px,2vw,28px);background:var(--br-ink);color:var(--br-cream);box-shadow:0 40px 70px -46px rgba(26,23,20,.8);overflow:hidden} main.v3[data-content="drainage"] .ds-card::before{content:'';position:absolute;right:-60px;top:-60px;width:200px;height:200px;border-radius:50%;background:radial-gradient(circle,rgba(217,183,126,.16),rgba(217,183,126,0) 70%)} main.v3[data-content="drainage"] .ds-card .ds-cnt{grid-row:span 2;display:flex;flex-direction:column;align-items:center;gap:4px;margin:0;padding-right:22px;border-right:1px solid rgba(217,183,126,.25);color:rgba(242,237,228,.6)} main.v3[data-content="drainage"] .ds-card .ds-cnt b{margin:0;font-size:clamp(56px,5vw,74px);font-weight:300;line-height:.9;color:var(--br-gold)} main.v3[data-content="drainage"] .ds-card .ds-cnt span{font-size:10.5px;letter-spacing:.2em;white-space:nowrap} main.v3[data-content="drainage"] .ds-card.has-on .ds-cnt b{text-shadow:0 0 24px rgba(217,183,126,.5)} main.v3[data-content="drainage"] .ds-note{margin:0;font-size:14px;line-height:1.6;color:rgba(242,237,228,.78)} main.v3[data-content="drainage"] .ds-card .ds-go{justify-self:start;margin:10px 0 0} main.v3[data-content="drainage"] .lt-cv{position:relative} main.v3[data-content="drainage"] .ds-rain{position:absolute;z-index:2;top:12px;right:12px;display:inline-flex;align-items:center;gap:9px;margin:0;padding:9px 14px 9px 10px;background:rgba(22,19,15,.86);border:1px solid rgba(217,183,126,.45);border-radius:999px;box-shadow:0 12px 26px -14px rgba(0,0,0,.7);font-family:'Inter',sans-serif;font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--br-cream);cursor:pointer;transition:background .3s,border-color .3s} main.v3[data-content="drainage"] .ds-rain:hover{border-color:var(--br-gold)} main.v3[data-content="drainage"] .ds-rain[aria-pressed="true"]{background:var(--dr-water);border-color:#9CCBD3} main.v3[data-content="drainage"] .dr-rico{display:grid;place-items:center;width:24px;height:24px} main.v3[data-content="drainage"] .dr-rico svg{width:20px;height:20px;fill:none;stroke:var(--br-gold);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round} main.v3[data-content="drainage"] .ds-rain[aria-pressed="true"] .dr-rico svg{stroke:#FBF8F2} main.v3[data-content="drainage"] .ds-rain .r-off,main.v3[data-content="drainage"] .ds-rain[aria-pressed="true"] .r-on{display:none} main.v3[data-content="drainage"] .ds-rain[aria-pressed="true"] .r-off{display:inline} main.v3[data-content="drainage"] .dr-lot .sky{transition:fill .8s} main.v3[data-content="drainage"] .dr-lotfig.is-rain .dr-lot .sky{fill:#E6E4DC} main.v3[data-content="drainage"] .dr-lot .lt-rain{opacity:0;transition:opacity .6s} main.v3[data-content="drainage"] .dr-lot .lt-rain .rain{stroke:rgba(79,133,144,.7);stroke-width:1.4} main.v3[data-content="drainage"] .dr-lotfig.is-rain .lt-rain{opacity:1} main.v3[data-content="drainage"] .dr-lotfig.is-rain .lt-rain .rain{animation:drRain .55s linear infinite} @keyframes drRain{from{transform:translate(4px,-11px)}to{transform:translate(0,0)}} main.v3[data-content="drainage"] .dr-lotfig.is-rain .lp .lp-r{fill:rgba(79,133,144,.38);animation:drPing 1.4s var(--ease) both} main.v3[data-content="drainage"] .dr-lotfig.is-rain .lp-1 .lp-r{animation-delay:.3s} main.v3[data-content="drainage"] .dr-lotfig.is-rain .lp-2 .lp-r{animation-delay:.8s} main.v3[data-content="drainage"] .dr-lotfig.is-rain .lp-3 .lp-r{animation-delay:1.3s} main.v3[data-content="drainage"] .dr-lotfig.is-rain .lp-4 .lp-r{animation-delay:1.8s} main.v3[data-content="drainage"] .dr-lotfig.is-rain .lp-5 .lp-r{animation-delay:2.3s} main.v3[data-content="drainage"] .dr-lotfig.is-rain .lp-6 .lp-r{animation-delay:2.8s} @keyframes drPing{0%{opacity:0;transform:scale(.6)}45%{opacity:1;transform:scale(1.35)}100%{opacity:1;transform:scale(1)}} main.v3[data-content="drainage"] .dr-lot :is(.z1 .pud,.z2 .wet,.z6 .wet){transform-box:fill-box;transform-origin:50% 0} main.v3[data-content="drainage"] .dr-lotfig.is-rain .dr-lot :is(.z1 .pud,.z2 .wet,.z6 .wet){animation:drPool 2.6s var(--ease) 1s both} @keyframes drPool{from{transform:scale(.55,.6);opacity:.5}to{transform:scale(1.22,1.3);opacity:1}} /* CAT-DRAIN-04: the question answers itself (likely fixes and a visit); on a phone it sits over the swipe */ main.v3[data-content="drainage"] .fx-bar{display:none} main.v3[data-content="drainage"] .wq-res{margin-top:16px;padding-top:16px;border-top:1px solid rgba(217,183,126,.25);animation:laIn .5s var(--ease)} main.v3[data-content="drainage"] .wq-res[hidden]{display:none!important} main.v3[data-content="drainage"] .wq-rk{margin:0 0 6px;font-family:'Inter',sans-serif;font-size:10.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--br-gold)} main.v3[data-content="drainage"] .wq-names{margin:0;font-family:'Outfit',sans-serif;font-size:17px;line-height:1.35;color:var(--br-cream)} main.v3[data-content="drainage"] .wq-res .wq-go{display:flex;justify-content:space-between;width:100%;margin:14px 0 0;padding-left:18px;padding-right:18px} main.v3[data-content="drainage"] .fx-ask{justify-content:flex-start} /* SVC-FD: no lone "01" when one service shows; the steps sit in the drawing's card as numbered parts */ main.v3[data-content="drainage"] .lv-num{display:none} main.v3[data-content="drainage"] .dr-cutfig .dr-how{display:block;margin:22px 0 0;padding-top:20px;border-top:1px solid var(--line)} main.v3[data-content="drainage"] .dr-cutfig .dh-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 18px;margin-bottom:14px} main.v3[data-content="drainage"] .dr-cutfig .dh-head .lv-h3{margin:0;font-size:clamp(20px,1.6vw,23px)} main.v3[data-content="drainage"] .dr-cutfig .dh-l{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px} main.v3[data-content="drainage"] .dr-cutfig .dh-l li{gap:10px;padding:14px 14px 16px} main.v3[data-content="drainage"] .dr-cutfig .dh-l .rl-n{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--br-ink);font-size:15px;color:var(--br-gold);transition:background .3s,color .3s} main.v3[data-content="drainage"] .dr-cutfig .dh-l li:is(:hover,.is-on,:focus-visible) .rl-n{background:var(--br-gold);color:var(--br-ink)} main.v3[data-content="drainage"] .dr-cutfig .dh-l p{font-size:13.5px} main.v3[data-content="drainage"] .dr-cut .pin circle{fill:var(--br-ink);stroke:#F6F0E5;stroke-width:2.5;transition:fill .3s} main.v3[data-content="drainage"] .dr-cut .pin text{font-family:'Outfit',sans-serif;font-style:normal;font-size:15px;fill:var(--br-gold);letter-spacing:0;text-transform:none} main.v3[data-content="drainage"] .dr-cutfig[data-focus] .st-dry .pins text{opacity:1} main.v3[data-content="drainage"] .dr-cutfig[data-focus] .pin{opacity:.45} main.v3[data-content="drainage"] :is(.dr-cutfig[data-focus="fabric"] .pin.pt-fabric,.dr-cutfig[data-focus="pipe"] .pin.pt-pipe,.dr-cutfig[data-focus="fall"] .pin.pt-fall,.dr-cutfig[data-focus="clean"] .pin.pt-clean){opacity:1} main.v3[data-content="drainage"] :is(.dr-cutfig[data-focus="fabric"] .pin.pt-fabric,.dr-cutfig[data-focus="pipe"] .pin.pt-pipe,.dr-cutfig[data-focus="fall"] .pin.pt-fall,.dr-cutfig[data-focus="clean"] .pin.pt-clean) circle{fill:var(--bronze)} main.v3[data-content="drainage"] :is(.dr-cutfig[data-focus="fabric"] .pin.pt-fabric,.dr-cutfig[data-focus="pipe"] .pin.pt-pipe,.dr-cutfig[data-focus="fall"] .pin.pt-fall,.dr-cutfig[data-focus="clean"] .pin.pt-clean) text{fill:#FBF8F2} /* CAT-DRAIN-05: once the route is planned the water arrow points to the outlet, not the house */ main.v3[data-content="drainage"] .od-fig:not([data-step="1"]) .hk1 .ar-bad{opacity:0} main.v3[data-content="drainage"] .od-fig:is([data-step="5"],[data-step="6"]) .hk2 .ar-plan{opacity:0} /* CAT-DRAIN-06: a finished yard closes the strip */ main.v3[data-content="drainage"] .dr-fitimg{position:relative;margin:clamp(34px,3.6vw,52px) 0 0;overflow:hidden} main.v3[data-content="drainage"] .dr-fitimg .fi-img{height:clamp(240px,28vw,400px);background-size:cover;background-position:center 30%;transform:scale(1.02);transition:transform 1.4s var(--ease)} main.v3[data-content="drainage"] .dr-fitimg:hover .fi-img{transform:scale(1.05)} main.v3[data-content="drainage"] .dr-fitimg::after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,rgba(16,13,10,.78) 0%,rgba(16,13,10,0) 55%);pointer-events:none} main.v3[data-content="drainage"] .dr-fitimg figcaption{position:absolute;z-index:1;left:clamp(18px,2.4vw,34px);right:clamp(18px,2.4vw,34px);bottom:clamp(16px,2vw,28px);font-family:'Outfit',sans-serif;font-style:normal;font-weight:300;font-size:clamp(19px,1.8vw,26px);line-height:1.3;color:var(--br-cream)} /* CAT-DRAIN-08: the fall rule as one large number beside the heading */ main.v3[data-content="drainage"] .dr-rhead{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,500px);gap:clamp(28px,4vw,72px);align-items:end;margin-bottom:clamp(34px,3.6vw,52px)} main.v3[data-content="drainage"] .dr-rhead .br-head{margin:0} main.v3[data-content="drainage"] .dr-rstat{margin:0;padding:clamp(20px,2vw,28px) clamp(22px,2.2vw,30px) clamp(16px,1.6vw,22px);background:var(--paper);border:1px solid var(--line);box-shadow:0 30px 60px -48px rgba(26,23,20,.6)} main.v3[data-content="drainage"] .rs-row{display:flex;align-items:baseline;justify-content:space-between;gap:14px;margin:0} main.v3[data-content="drainage"] .rs-n{font-family:'Outfit',sans-serif;font-weight:300;font-size:clamp(54px,5vw,76px);line-height:.9;color:var(--ink)} main.v3[data-content="drainage"] .rs-n small{margin-left:6px;font-style:normal;font-size:.34em;color:var(--bronze)} main.v3[data-content="drainage"] .rs-mid{flex:1;text-align:center;font-family:'Inter',sans-serif;font-size:10.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--bronze)} main.v3[data-content="drainage"] .rs-tape{display:block;width:100%;height:auto;margin:10px 0 6px} main.v3[data-content="drainage"] .rs-tape .rs-soil{fill:#E6D8C0} main.v3[data-content="drainage"] .rs-tape .rs-gnd{fill:none;stroke:var(--ink);stroke-width:1.2} main.v3[data-content="drainage"] .rs-tape .rs-band{fill:#EBCB8E;stroke:#A67C3F;stroke-width:1} main.v3[data-content="drainage"] .rs-tape .rs-tk path{fill:none;stroke:#3A2C1C;stroke-width:1} main.v3[data-content="drainage"] .rs-tape .rs-lvl{fill:none;stroke:var(--bronze);stroke-width:1.2;stroke-dasharray:4 4} main.v3[data-content="drainage"] .rs-tape .rs-dim{fill:none;stroke:var(--dr-water);stroke-width:1.8;stroke-linecap:round} main.v3[data-content="drainage"] .rs-tape .rs-hs{fill:#FBF6EC;stroke:var(--ink);stroke-width:1.2} main.v3[data-content="drainage"] .rs-cap{margin:0;font-size:13.5px;line-height:1.55;color:rgba(26,23,20,.7)} @media (max-width:1100px){ main.v3[data-content="drainage"] .dr-cutfig .dh-l{grid-template-columns:repeat(2,minmax(0,1fr))} main.v3[data-content="drainage"] .dr-rhead{grid-template-columns:1fr} main.v3[data-content="drainage"] .dr-rstat{max-width:560px} } @media (max-width:900px){ main.v3[data-content="drainage"] .dr-signs .ds-grid{grid-template-columns:1fr;grid-template-areas:"head" "fig" "list" "card";gap:24px} } @media (max-width:640px){ main.v3[data-content="drainage"] .ds-rain{top:8px;right:8px;padding:7px 11px 7px 8px;font-size:10px} main.v3[data-content="drainage"] .ds-card{grid-template-columns:auto minmax(0,1fr);gap:6px 16px;padding:18px} main.v3[data-content="drainage"] .ds-card .ds-cnt{padding-right:16px} main.v3[data-content="drainage"] .ds-card .ds-go{grid-column:1 / -1;justify-self:stretch;justify-content:center} main.v3[data-content="drainage"] .fx-l .fx-ask{display:none} main.v3[data-content="drainage"] .fx-bar{display:block;margin:-6px 0 18px;padding:16px;background:var(--br-ink);color:var(--br-cream)} main.v3[data-content="drainage"] .fx-bar .wq-q{margin:0 0 12px;font-size:20px} main.v3[data-content="drainage"] .wq-seg{display:grid;grid-template-columns:1fr 1fr;gap:8px} main.v3[data-content="drainage"] .wq-seg .wq-b{display:flex;align-items:center;gap:10px;margin:0;padding:10px;text-align:left;background:rgba(242,237,228,.05);border:1px solid rgba(217,183,126,.38);border-radius:0;box-shadow:none;color:var(--br-cream);font-family:'Inter',sans-serif;letter-spacing:0;text-transform:none;cursor:pointer} main.v3[data-content="drainage"] .wq-seg .wq-b[aria-pressed="true"]{background:var(--br-gold);border-color:var(--br-gold);color:var(--br-ink)} main.v3[data-content="drainage"] .wq-seg .wq-ic{flex:0 0 32px;width:32px;height:32px} main.v3[data-content="drainage"] .wq-seg .wq-ic .ic{width:16px;height:16px} main.v3[data-content="drainage"] .wq-seg .wq-t strong{font-size:15px} main.v3[data-content="drainage"] .wq-seg .wq-t span{display:none} main.v3[data-content="drainage"] .fx-bar .wq-res{margin-top:14px;padding-top:14px} main.v3[data-content="drainage"] .dr-cutfig .dh-l{grid-template-columns:1fr} main.v3[data-content="drainage"] .dr-cutfig .dh-l li{flex-direction:row;align-items:center} main.v3[data-content="drainage"] .dr-cutfig .dh-l .rl-n{flex:0 0 30px} main.v3[data-content="drainage"] .dr-cut .pin circle{r:22px;stroke-width:3} main.v3[data-content="drainage"] .dr-cut .st-dry .pins text{display:inline;font-size:24px} main.v3[data-content="drainage"] .rtabs{display:grid!important;grid-template-columns:1fr 1fr;overflow:visible!important;border-bottom:1px solid var(--line)} main.v3[data-content="drainage"] .rtabs .rt{flex:none;min-width:0;padding:12px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)} main.v3[data-content="drainage"] .rtabs .rt:nth-of-type(2n){border-right:0} main.v3[data-content="drainage"] .rtabs .rt-t{white-space:normal;font-size:14.5px;line-height:1.25} main.v3[data-content="drainage"] .rtabs .rt-ic{flex-basis:30px;width:30px;height:30px} main.v3[data-content="drainage"] .rs-n{font-size:50px} main.v3[data-content="drainage"] .rs-mid{font-size:9.5px;letter-spacing:.14em} main.v3[data-content="drainage"] .dr-fitimg .fi-img{height:260px} } @media (prefers-reduced-motion:reduce){ main.v3[data-content="drainage"] .dr-lotfig.is-rain :is(.lt-rain .rain,.lp .lp-r,.z1 .pud,.z2 .wet,.z6 .wet){animation:none} } /* WOW round, pass 2: the fix finder's answer as one dark row under the grid; drawing labels over the split line */ main.v3[data-content="drainage"] .fx-resrow .wq-res{display:flex;align-items:center;gap:14px 28px;margin:16px 0 0;padding:18px clamp(20px,2.2vw,30px);background:var(--br-ink);border-top:0;box-shadow:0 30px 60px -44px rgba(26,23,20,.8)} main.v3[data-content="drainage"] .fx-resrow .wq-rk{flex:0 0 auto;margin:0} main.v3[data-content="drainage"] .fx-resrow .wq-names{flex:1;font-size:18px} main.v3[data-content="drainage"] .fx-resrow .wq-go{flex:0 0 auto;width:auto;margin:0;gap:14px} main.v3[data-content="drainage"] .ba-cv .ba-lb{z-index:3} @media (max-width:640px){ main.v3[data-content="drainage"] .fx-resrow{display:none} } /* SVC-FD: the route card stays in view beside the taller drawing card */ main.v3[data-content="drainage"] .lv-spread.dr-spread{align-items:start} main.v3[data-content="drainage"] .dr-routecard{position:sticky;top:104px} main.v3[data-content="drainage"] .dr-route{max-height:480px}