/* DANY'S PLUMBING: THE WRENCH AND THE VAN.
   His mark is a blue block DANY'S with an orange pipe wrench biting the top
   of the D, over wide orange PLUMBING, beside his cardinal on an orange disc.
   His vans wear the same two colours split on a hard diagonal. So the page is
   built from four shapes cut from that mark: the toothed wrench jaw on the
   edge of every dark band, the blue over orange split bar under the nav and
   every heading, the van livery slash on the hero and the specials seam, and
   the orange disc behind every icon and price. Blue means Get a Quote, orange
   means Call, on every button pair, the call bar and the tickets.
   Colours from logo.png (sha256 874f9654, his site header):
   blue #2065AD, orange #F26A36; navy #103155 is the blue walked darker;
   call orange #C9400C is the orange darkened for white ink; tint #FFF1EA.
   Devices: 1 shape system, 3 dividers, 5 print tickets, 7 trust stacking,
   8 two colour CTA split with hard offset shadows, 4 a halftone of pipe dots.
   Borrowed: the photo on top phone hero of geaux2guy home 375 capture, the
   white logo header of the comfortpro capture, the hard shadows of forge.
   No images, no fonts, no escapes: gradients, masks and clip paths only. */

:root{
  --dp-navy:#103155;
  --dp-navy-deep:#0A2140;
  --dp-blue:#2065AD;
  --dp-blue-light:#8FB1D5;
  --dp-orange:#F26A36;
  --dp-call:#C9400C;
  --dp-orange-light:#F9A77F;
  --dp-tint:#FFF1EA;
  --dp-ink:#16202E;

  /* the blue over orange split of his whole mark */
  --dp-split:linear-gradient(90deg,var(--dp-blue) 0 50%,var(--dp-orange) 50% 100%);

  /* WRENCH JAW TEETH: square teeth standing on a solid bar, like the rack on
     the jaw that bites his D. 18px box: a 7px bar, 11px teeth. */
  --dp-teeth:
    linear-gradient(var(--dp-orange),var(--dp-orange)) 0 100%/100% 7px no-repeat,
    repeating-linear-gradient(90deg,var(--dp-orange) 0 12px,#0000 12px 20px) 0 0/100% 11px no-repeat;
  --dp-teeth-navy:
    linear-gradient(var(--dp-navy),var(--dp-navy)) 0 100%/100% 7px no-repeat,
    repeating-linear-gradient(90deg,var(--dp-navy) 0 12px,#0000 12px 20px) 0 0/100% 11px no-repeat;

  /* PIPE RUN: the wrench handle as a pipe, navy with a shine line, broken by
     orange couplings */
  --dp-pipe:
    repeating-linear-gradient(90deg,#0000 0 150px,var(--dp-orange) 150px 172px,#0000 172px 322px) 0 0/100% 100%,
    linear-gradient(180deg,var(--dp-navy-deep) 0 18%,var(--dp-blue) 18% 34%,var(--dp-navy) 34% 82%,var(--dp-navy-deep) 82% 100%);

  /* a halftone of small dots, for dark bands */
  --dp-dots:radial-gradient(circle,rgba(143,177,213,.16) 1.3px,#0000 1.8px) 0 0/16px 16px;
}

/* ============================================================ shared ==== */
.band > .shell{position:relative;z-index:1}
.band--nav > .shell{position:static;z-index:auto}
.band__head .lede{margin-inline:auto}
.band__head--left .lede{margin-inline:0}

/* every heading wears the split bar with three wrench teeth over the orange half */
.band__title::after{
  content:"";display:block;width:104px;height:15px;margin:14px auto 0;
  background:
    repeating-linear-gradient(90deg,var(--dp-orange) 0 8px,#0000 8px 14px) 58px 0/46px 7px no-repeat,
    var(--dp-split) 0 7px/100% 8px no-repeat;
}
.band__title--left::after{margin-left:0}
.band__title{line-height:1.05;text-wrap:balance}
@media(max-width:767px){.band__title{font-size:31px}}
@media(min-width:1025px){.band__title{font-size:44px}}
.eyebrow{color:var(--dp-blue);letter-spacing:.14em}
.band[data-ground="dark"] .eyebrow{color:var(--dp-blue-light)}

/* ============================================================ buttons === */
/* BLUE means Get a Quote, ORANGE means Call. Held on every button; hover
   swaps the pair; each casts the hard shadow of a van decal. */
.btn{border-radius:4px;letter-spacing:.02em;box-shadow:4px 4px 0 var(--dp-navy);
  transition:transform .15s ease,box-shadow .15s ease,background-color .15s ease,color .15s ease,border-color .15s ease}
.band[data-ground="dark"] .btn{box-shadow:4px 4px 0 var(--dp-navy-deep)}
.band[data-ground] .btn.btn--primary{background:var(--dp-blue);border:2px solid var(--dp-blue);color:#FFFFFF}
.band[data-ground] .btn.btn--ghost{background:var(--dp-call);border:2px solid var(--dp-call);color:#FFFFFF}
.band[data-ground] .btn.btn--primary:hover{background:var(--dp-call);border-color:var(--dp-call);color:#FFFFFF}
.band[data-ground] .btn.btn--ghost:hover{background:var(--dp-blue);border-color:var(--dp-blue);color:#FFFFFF}
.btn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--dp-navy)}
.band[data-ground="dark"] .btn:hover{box-shadow:6px 6px 0 var(--dp-navy-deep)}
@media(max-width:520px){.band__foot .ctapair,.split__prose .ctapair{display:grid;grid-template-columns:1fr;width:100%;gap:16px}.band__foot .ctapair .btn,.split__prose .ctapair .btn{width:100%}}

/* ============================================================ call bar == */
.band--mobile-cta-bar .callbar__book{background:var(--dp-blue);color:#FFFFFF;box-shadow:none;position:relative;overflow:hidden}
.band--mobile-cta-bar .callbar__call{background:var(--dp-call);color:#FFFFFF;border-top:0;position:relative;overflow:hidden}
/* the call cell carries a row of wrench teeth along its top edge */
.callbar__call::before{content:"";position:absolute;left:0;right:0;top:0;height:5px;pointer-events:none;
  background:repeating-linear-gradient(90deg,var(--dp-orange) 0 8px,#0000 8px 13px)}
.callbar__book::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--dp-blue-light);pointer-events:none}

/* ============================================================ nav ======= */
/* his logo spells the name and carries the cardinal, so it goes big */
.nav__logo img + .nav__wordmark{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.nav__logo img{height:62px;width:auto;max-width:none}
@media(min-width:768px){.nav__logo img{height:72px}}
@media(min-width:1180px){.nav__logo img{height:88px}.nav--light .nav__row{min-height:104px}}
.band.nav--light{border-bottom:6px solid transparent;border-image:var(--dp-split) 1}
@media(min-width:1180px){
  .nav--light .nav__link:hover,.nav--light .nav__dropdown-toggle:hover{color:var(--dp-call)}
  .nav__dropdown:hover .nav__dropdown-menu,.nav__dropdown:focus-within .nav__dropdown-menu{
    min-width:240px;padding:12px 8px 10px;border-radius:0 0 6px 6px;background:var(--dp-navy);color:#FFFFFF;
    border-top:4px solid transparent;border-image:var(--dp-split) 1;box-shadow:4px 4px 0 var(--dp-navy-deep)}
  .nav--light .nav__dropdown-item{color:#FFFFFF;font-family:var(--font-body);font-weight:600;font-size:15px;padding:10px 14px;border-radius:4px;white-space:nowrap}
  .nav--light .nav__dropdown-item:hover{background:var(--dp-call);color:#FFFFFF}
}

/* ============================================================ hero ====== */
.hero__eyebrow{color:var(--dp-blue-light);font-family:var(--font-display);font-weight:700;letter-spacing:.14em}
/* the review count in light orange with a wrench orange underline */
.hero__count{position:relative;display:inline-block;width:fit-content;color:var(--dp-orange-light);font-family:var(--font-display);font-weight:700}
.hero__count::after{content:"";position:absolute;left:0;right:-4px;bottom:-6px;height:5px;background:var(--dp-orange);border-radius:0 0 100% 100%/0 0 100% 100%;transform:rotate(-1deg);pointer-events:none}
.band--hero .checks__item svg{color:var(--dp-orange-light)}

/* PHONE: the crew and the vans on top in full colour; under them the livery
   slash (orange then blue) cuts into the flat navy panel */
@media(max-width:1024px){
  .band--hero.hero--photo-top .hero__media{height:clamp(280px,76vw,460px)}
  .band--hero.hero--photo-top .hero__media::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:34px;z-index:2;pointer-events:none;
    background:linear-gradient(to bottom right,#0000 calc(50% - 1px),var(--dp-orange) 50% calc(50% + 7px),var(--dp-blue) calc(50% + 7px) calc(50% + 14px),var(--dp-navy) calc(50% + 14px))}
  .hero__title{font-size:37px;line-height:1.04}
}
@media(max-width:380px){.hero__title{font-size:34px}}

/* DESKTOP: flat navy panel, then an orange stripe and a blue stripe on a hard
   slash, then his crew and vans in full colour: the van livery, full size. */
@media(min-width:1025px){
  .band--hero{--cut-top:54%;--cut-bot:46%}
  .hero--split{min-height:640px}
  .hero--split::before,.hero--split::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;display:block;opacity:1;width:auto}
  .hero--split::after{background:var(--dp-navy);clip-path:polygon(0 0,var(--cut-top) 0,var(--cut-bot) 100%,0 100%)}
  .hero--split::before{background:var(--dp-orange);clip-path:polygon(0 0,calc(var(--cut-top) + 14px) 0,calc(var(--cut-bot) + 14px) 100%,0 100%)}
  .hero--split .hero__media{left:0;width:100%;background:var(--dp-blue);clip-path:none}
  .hero--split .hero__media picture{position:absolute;top:0;bottom:0;left:42%;width:58%;display:block;clip-path:polygon(calc(20.7% + 28px) 0,100% 0,100% 100%,calc(6.9% + 28px) 100%)}
  .hero--split .hero__media img{width:100%;height:100%;object-fit:cover;object-position:34% 62%}
  .band--hero > .hero__inner{position:relative;z-index:3}
  .hero--split .hero__col{position:relative;z-index:3;width:46%}
  .hero__title{font-size:54px;line-height:1.03}
}

/* ================================================== proof strip ========= */
/* four sourced numerals on white, standing on a pipe run with orange couplings */
.band.band--trust-strip{padding-block:34px 44px}
.band--trust-strip::after{content:"";position:absolute;left:0;right:0;bottom:0;height:14px;background:var(--dp-pipe);pointer-events:none}
.strip__row{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 18px}
.strip__item{flex-direction:column;align-items:center;text-align:center;gap:0}
.strip__text{align-items:center;gap:2px}
.strip__icon{display:none}
.band--trust-strip .strip__text strong{font-size:38px;line-height:1;color:var(--dp-navy);font-family:var(--font-display);font-weight:700}
.strip__item:nth-child(even) .strip__text strong{color:var(--dp-call)}
.band--trust-strip .strip__text span{font-size:14px;font-weight:600;color:var(--dp-ink)}
@media(min-width:1025px){.strip__row{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* ============================================================ services == */
.band--services .cards{gap:26px}
.svc{border:2px solid var(--dp-navy);border-radius:8px;box-shadow:6px 6px 0 var(--dp-navy);overflow:hidden}
.svc:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--dp-navy)}
.svc__photo{height:150px}
@media(min-width:768px){.svc__photo{height:190px}}
.svc__body{position:relative;padding-top:26px}
/* each card photo ends on the split bar, blue for the build cards and orange for the fix cards */
.svc__body::before{content:"";position:absolute;left:0;right:0;top:0;height:6px;background:var(--dp-blue);pointer-events:none}
.svc:nth-child(even) .svc__body::before{background:var(--dp-orange)}
.svc__title{color:var(--dp-navy)}
.svc__more{color:var(--dp-call)}
@media(max-width:767px){.svc__body{padding:22px 20px 18px}.svc__text{font-size:15px;line-height:1.5}.svc__more{margin-top:10px}}

/* ============================================ form band: call Dany ====== */
/* wrench teeth stand on its top edge, dots behind */
.band--form-about[data-ground]{background-color:var(--dp-navy);background-image:none;padding-top:calc(var(--shell-y) + 18px)}
.band--form-about::before{content:"";position:absolute;left:0;right:0;top:0;height:18px;background:var(--dp-teeth);pointer-events:none}
.band--form-about::after{content:"";position:absolute;left:0;right:0;top:18px;bottom:0;background:var(--dp-dots);-webkit-mask-image:linear-gradient(#000,#0000 70%);mask-image:linear-gradient(#000,#0000 70%);pointer-events:none}
.band--form-about .lede{color:#FFFFFF}
.about__p{color:#FFFFFF;font-size:16px;line-height:1.7;max-width:58ch}
.band--form-about .lede + .about__p{padding-left:16px;border-left:4px solid var(--dp-orange)}
/* the contact panel: split border, blue on top and orange below, the number big */
.contact-panel{position:relative;border:3px solid transparent;border-radius:10px;
  background:linear-gradient(#173D68,#173D68) padding-box,linear-gradient(180deg,var(--dp-blue) 0 50%,var(--dp-orange) 50% 100%) border-box;
  box-shadow:8px 8px 0 var(--dp-navy-deep)}
.contact-panel__call{font-family:var(--font-display);font-weight:700;color:#FFFFFF;white-space:nowrap}
.contact-panel{padding:36px 22px 30px}
.contact-panel__call svg{width:46px;height:46px;flex:0 0 46px;box-sizing:border-box;border-radius:50%;background:var(--dp-call);color:#FFFFFF;padding:10px;box-shadow:3px 3px 0 var(--dp-navy-deep)}
.contact-panel__row{color:#FFFFFF;text-decoration-color:var(--dp-blue-light)}
.contact-panel__info{color:#FFFFFF}
.contact-panel__info{display:flex;align-items:center;gap:10px;font-weight:600}
.contact-panel__info svg{width:22px;height:22px;flex:0 0 22px;color:var(--dp-orange-light)}
.contact-panel .btn.contact-panel__save{display:inline-flex;align-items:center;justify-content:center;gap:10px;justify-self:stretch}
.contact-panel__save svg{width:18px;height:18px;flex:0 0 18px}
@media(max-width:767px){.contact-panel__call{font-size:30px}}

/* ============================================================ why ======= */
/* four reasons, each under an orange disc like the one behind his cardinal */
.why__item{position:relative;border-left:6px solid var(--dp-blue);padding-left:18px}
.why__item:nth-child(even){border-left-color:var(--dp-orange)}
.why__icon{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--dp-orange);color:#FFFFFF;box-shadow:3px 3px 0 var(--dp-navy)}
.why__item:nth-child(even) .why__icon{background:var(--dp-blue)}
.why__head{color:var(--dp-navy)}
@media(max-width:767px){
  .why{gap:18px}
  .why__item{display:grid;grid-template-columns:44px minmax(0,1fr);gap:4px 12px;align-items:center}
  .why__icon{grid-row:1;width:42px;height:42px;margin:0}
  .why__head{grid-column:2;grid-row:1;font-size:21px}
  .why__body{grid-column:1/-1;font-size:15px;line-height:1.55}
  .split--why .split__img{margin:4px 10px 30px 0;order:-1}
  .split--why .split__img img{aspect-ratio:4/3;height:auto;object-fit:cover;object-position:50% 35%}
}
/* Dany by his truck, as a decal on the page */
.split--why .split__img{position:relative;background:#FFFFFF;padding:8px;border:2px solid var(--dp-navy);border-radius:6px;box-shadow:10px 10px 0 var(--dp-orange);transform:rotate(1.2deg)}

/* ============================================================ gallery === */
/* a flat top edge on purpose: the rest beat between two shaped seams */
.band--gallery .gal__item{border-radius:6px;border:2px solid var(--dp-navy);box-shadow:5px 5px 0 var(--dp-blue);overflow:hidden}
.band--gallery .gal__item:nth-child(even){box-shadow:5px 5px 0 var(--dp-orange)}
.band--gallery .gal__cap{font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:.03em;
  background:linear-gradient(to top,rgba(10,33,64,.96) 0 62%,rgba(10,33,64,0))}

/* ============================================================ specials == */
/* the van livery slash cuts into this band: an orange stripe and a blue stripe */
.band--specials{padding-top:calc(var(--shell-y) + 40px)}
.band--specials::before{content:"";position:absolute;left:0;right:0;top:0;height:56px;pointer-events:none;
  background:linear-gradient(to bottom right,var(--dp-tint) calc(50% - 14px),var(--dp-orange) calc(50% - 14px) calc(50% - 7px),var(--dp-blue) calc(50% - 7px) 50%,#0000 50%)}
@media(max-width:767px){.band--specials{padding-top:calc(var(--shell-y) + 24px)}.band--specials::before{height:36px}}
/* his posted prices as clip out tickets: notched edges, a dashed clip line,
   the price stamped big on an orange disc edge */
.offers{list-style:none;margin:0 auto;padding:8px 0 10px;display:grid;gap:30px;grid-template-columns:1fr;max-width:1040px}
@media(min-width:768px){.offers--3{grid-template-columns:repeat(3,minmax(0,1fr))}}
.offer{display:flex;filter:drop-shadow(6px 6px 0 var(--dp-navy))}
.offer--warm{transform:rotate(-1.2deg)}
.offer--cool{transform:rotate(1.2deg)}
.offer__ticket{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;
  padding:28px 22px 26px;border:9px solid transparent;border-radius:6px;
  -webkit-mask:radial-gradient(circle 13px at 0 50%,#0000 98%,#000) left/51% 100% no-repeat,radial-gradient(circle 13px at 100% 50%,#0000 98%,#000) right/51% 100% no-repeat;
  mask:radial-gradient(circle 13px at 0 50%,#0000 98%,#000) left/51% 100% no-repeat,radial-gradient(circle 13px at 100% 50%,#0000 98%,#000) right/51% 100% no-repeat}
.offer--warm .offer__ticket{background:linear-gradient(#FFFFFF,#FFFFFF) padding-box,repeating-linear-gradient(-45deg,var(--dp-orange) 0 11px,var(--dp-tint) 11px 22px) border-box}
.offer--cool .offer__ticket{background:linear-gradient(#FFFFFF,#FFFFFF) padding-box,repeating-linear-gradient(-45deg,var(--dp-blue) 0 11px,#DCE8F5 11px 22px) border-box}
.offer__ticket::before{content:"";position:absolute;inset:6px;border:2px dashed rgba(16,49,85,.35);border-radius:3px;pointer-events:none}
.offer__big{font-family:var(--font-display);font-weight:700;font-size:78px;line-height:.95;text-shadow:4px 4px 0 var(--dp-navy);margin-top:8px}
.offer--warm .offer__big{color:var(--dp-call)}
.offer--cool .offer__big{color:var(--dp-blue)}
.offer__label{font-family:var(--font-display);font-weight:700;text-transform:uppercase;font-size:26px;line-height:1.1;color:var(--dp-navy);margin-top:10px}
.offer__fine{font-size:15px;line-height:1.5;color:var(--dp-ink);max-width:30ch;margin:6px 0 16px}
.offer__cta{margin-top:auto}
@media(max-width:767px){.offer__big{font-size:64px}.offer__label{font-size:23px}.offer__ticket{padding:22px 16px 20px}.offers{gap:24px;padding-inline:6px}}

/* ============================================================ reviews === */
/* navy band: the wrench teeth stand on its top edge, dots below them */
.band--reviews[data-ground]{background-color:var(--dp-navy);background-image:none;overflow:hidden;padding-top:calc(var(--shell-y) + 20px)}
.band--reviews::before{content:"";position:absolute;left:0;right:0;top:0;height:18px;background:var(--dp-teeth);pointer-events:none}
.band--reviews::after{content:"";position:absolute;left:0;right:0;top:18px;bottom:0;background:var(--dp-dots);-webkit-mask-image:linear-gradient(#000,#0000 60%);mask-image:linear-gradient(#000,#0000 60%);pointer-events:none}
.review-card{position:relative;overflow:hidden;border-radius:8px;padding:30px 22px 22px;box-shadow:6px 6px 0 var(--dp-navy-deep)}
.review-card::after{content:"";position:absolute;left:0;right:0;top:0;height:6px;background:var(--dp-split);pointer-events:none}
.review-card__text{display:block;-webkit-line-clamp:unset;overflow:visible;font-size:15.5px;line-height:1.62}
.review-card__author{font-family:var(--font-display);font-weight:700;color:var(--dp-navy)}
@media(max-width:1024px){
  .band--reviews .revs{display:grid;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:84%;gap:16px;align-items:start;
    overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:calc(-1 * var(--shell-x));padding:4px var(--shell-x) 16px;
    scroll-padding-inline:var(--shell-x);scrollbar-width:none}
  .band--reviews .revs::-webkit-scrollbar{display:none}
  .band--reviews .review-card{scroll-snap-align:start}
}
@media(min-width:768px) and (max-width:1024px){.band--reviews .revs{grid-auto-columns:44%;gap:22px}}
@media(min-width:1025px){.band--reviews .revs{align-items:start}}

/* ============================================================ areas ===== */
/* one city, so one wide card on a map of dots, not a lone chip */
.band--areas::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle,rgba(32,101,173,.22) 1.5px,#0000 2px) 0 0/14px 14px;
  -webkit-mask-image:radial-gradient(ellipse 55% 60% at 50% 62%,#000 35%,#0000 72%);mask-image:radial-gradient(ellipse 55% 60% at 50% 62%,#000 35%,#0000 72%)}
.chips{display:flex;justify-content:center}
.chip{position:relative;min-width:min(100%,380px);justify-content:center;padding:26px 24px;background:#FFFFFF;border:2px solid var(--dp-navy);border-radius:8px;box-shadow:5px 5px 0 var(--dp-orange);color:var(--dp-navy);
  font-family:var(--font-display);font-weight:700;text-transform:uppercase;font-size:26px;letter-spacing:.03em}
.chip::before{content:"";position:absolute;left:0;right:0;top:0;height:6px;background:var(--dp-split);border-radius:6px 6px 0 0;pointer-events:none}
.chip svg{width:44px;height:44px;flex:0 0 44px;padding:9px;box-sizing:border-box;border-radius:50%;background:var(--dp-orange);color:#FFFFFF;box-shadow:3px 3px 0 var(--dp-navy)}
.chip{gap:14px;padding:30px 28px;font-size:30px}

/* ============================================================ footer ==== */
/* the page ends on the pipe run with its orange couplings */
.band--footer{padding-top:calc(68px + 14px)}
.band--footer::before{content:"";position:absolute;left:0;right:0;top:0;height:14px;background:var(--dp-pipe);pointer-events:none}
@media(max-width:767px){.band--footer{padding-top:calc(51px + 14px)}}
.band--footer > .shell{position:relative;z-index:1}
/* his logo on a white decal plate, slapped on at an angle */
.foot__logo{display:inline-block;background:#FFFFFF;padding:12px 16px;border-radius:8px;box-shadow:6px 6px 0 var(--dp-orange);transform:rotate(-2deg)}
.foot__logo img{height:84px;width:auto;object-fit:contain}
@media(max-width:767px){.foot__logo img{height:66px}.foot__grid{gap:22px}.map iframe{height:180px}}
.foot__head{color:var(--dp-blue-light);letter-spacing:.06em}
.foot__item a[href^="tel:"]{font-family:var(--font-display);font-size:26px;line-height:1;color:var(--dp-orange-light)}
.foot__item svg{color:var(--dp-orange-light)}
.foot__links a:hover{color:var(--dp-orange-light)}
@media(max-width:1024px){.foot__col--services .foot__links{display:grid;grid-template-columns:1fr 1fr;gap:6px 14px;max-width:560px}}
.map{border:2px solid var(--dp-blue);border-radius:8px}

/* ============================================================ legal ===== */
.band.band--legal{background:var(--dp-navy-deep);border-top:6px solid transparent;border-image:var(--dp-split) 1}

/* gallery captions read as large type, so they hold up wherever the page stops */
.band--gallery .gal__cap{font-size:19px;line-height:1.1;letter-spacing:.01em;padding:9px 12px 8px;background:var(--dp-navy);border-top:4px solid var(--dp-orange)}
.band--gallery .gal__item:nth-child(even) .gal__cap{border-top-color:var(--dp-blue)}
@media(min-width:1025px){.band--gallery .gal{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* round three: the areas band opens on the wrench jaw, a navy V cut into its top edge,
   and the one city it names is set as a full width plate */
.band--areas{padding-top:calc(var(--shell-y) + 22px)}
.band--areas::before{content:"";position:absolute;left:0;right:0;top:0;height:30px;z-index:2;pointer-events:none;background:var(--dp-navy);clip-path:polygon(0 0,100% 0,50% 100%)}
.band--areas .chips{display:block}
.band--areas .chip{display:flex;width:100%;max-width:880px;margin:0 auto;min-height:130px;font-size:clamp(30px,7vw,56px);letter-spacing:.04em;box-shadow:8px 8px 0 var(--dp-orange);
  background:radial-gradient(circle,rgba(32,101,173,.14) 1.4px,#0000 1.9px) 0 0/12px 12px,#FFFFFF}
.band--areas .chip svg{width:58px;height:58px;flex:0 0 58px;padding:12px}
@media(max-width:767px){.band--areas .chip svg{width:46px;height:46px;flex-basis:46px;padding:10px}}