/* Shapes past About, laptop and up only (Jéan, 22 Oct 2026: past About "it loses the design, the angles ... then it's
   just open space"; then "mobile is locked", so a phone never sees these rules). Loaded after home.css. What he kept:
   1 How it works on a dark green lawn band whose top edge is grass (Tylor stands in it)
   2 Services cut in on the hero's angle
   3 Blog and questions alternate the angle; a big outlined question mark behind the questions
   4 Areas on a faint street map of the service area (OpenStreetMap, credited), the quote band cutting into it
   Dropped by Jéan: mowing stripes and a hill on past jobs, a slanted green block behind who we work for. */
@media (min-width:901px){
  .v-shapes{--slant:4vw;--tint:#eaf2e5}

  /* 1 */
  .v-shapes #how{position:relative;z-index:2;color:#fff;background:linear-gradient(180deg,var(--deep) 0,var(--deep) 24px,#0a4a2b 50%,var(--deep-ink) 100%);padding-bottom:calc(var(--sec) + var(--slant))}
  .v-shapes #how::before{content:"";position:absolute;left:0;right:0;bottom:calc(100% - 1px);height:46px;background:url(img/grass-edge.svg) repeat-x left bottom/320px 46px;pointer-events:none}
  .v-shapes #how h2{color:#fff}
  .v-shapes #how .eyebrow{color:#a6f2c6}   /* the brand green is 3.7:1 on this band; this is 5:1 or better */
  .v-shapes #how .eyebrow.dot::before{background:#a6f2c6}
  .v-shapes #how .pz-s1,.v-shapes #how .pz-s2,.v-shapes #how .pz-s3,.v-shapes #how .pz-b{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.16);color:#fff}
  .v-shapes #how .pz>span:not(.n){color:rgba(255,255,255,.8)}
  .v-shapes #how .pz .n{-webkit-text-stroke-color:var(--on-dark)}
  .v-shapes #how .pz-s2 b,.v-shapes #how .pz-b b{color:var(--on-dark)}
  .v-shapes #how .btn-main{background:var(--on-dark);color:var(--deep-ink)}
  .v-shapes #how .btn-main .chip{background:rgba(8,50,29,.14)}
  .v-shapes #how .btn-ghost{border-color:transparent}

  /* 2 */
  .v-shapes #svc{position:relative;z-index:3;background:var(--ground);margin-top:calc(var(--slant) * -1);padding-top:calc(var(--sec) + var(--slant));clip-path:polygon(0 var(--slant),100% 0,100% 100%,0 100%)}

  /* 3 (who we work for keeps room at the bottom for the blog's angle) */
  .v-shapes #jobs + .sec{padding-bottom:calc(var(--sec) + var(--slant))}
  .v-shapes #blog,.v-shapes #blog + .sec,.v-shapes #locs{position:relative;margin-top:calc(var(--slant) * -1);padding-top:calc(var(--sec) + var(--slant));padding-bottom:calc(var(--sec) + var(--slant))}
  .v-shapes #blog{z-index:6;background:var(--tint);clip-path:polygon(0 var(--slant),100% 0,100% 100%,0 100%)}
  .v-shapes #blog + .sec{z-index:7;background:#fff;clip-path:polygon(0 0,100% var(--slant),100% 100%,0 100%)}
  .v-shapes #blog + .sec::before{content:"?";position:absolute;z-index:0;right:3vw;top:calc(var(--sec) + var(--slant) - 40px);font-size:clamp(220px,24vw,400px);font-weight:700;line-height:1;color:transparent;-webkit-text-stroke:2px rgba(14,107,63,.13);pointer-events:none}
  .v-shapes #blog + .sec .wrap{position:relative;z-index:1}

  /* 4 */
  .v-shapes #locs{z-index:8;background:var(--tint) url(img/area-map.svg) center/cover no-repeat;clip-path:polygon(0 var(--slant),100% 0,100% 100%,0 100%)}
  .v-shapes #locs::after{content:"Map data \00A9 OpenStreetMap contributors";position:absolute;right:16px;bottom:calc(var(--slant) + 10px);font-size:11px;color:#0b5a35}
  /* text over the map keeps 4.5:1 or better where a road or water runs behind a letter (worst case 5:1, computed) */
  .v-shapes #locs .lede{color:#444e3e}
  .v-shapes #locs .eyebrow{color:#0b5a35}
  .v-shapes .cta{z-index:9;margin-top:calc(var(--slant) * -1)}
}