/* Two warm paper colours, with the original Wimpie's cream kept exact. */
:root{--cream-light:#FAF7F1;--elevation:0 3px 6px #0242630a,0 18px 36px -24px #02426355}
body{background:var(--cream-light)}
header[data-surface="brand"],section[data-surface="brand"]{background:var(--cream)}
section[data-surface="light"],footer[data-surface="light"]{background:var(--cream-light)}
header[data-surface]{box-shadow:0 7px 15px -15px #02426370}
/* The image has a second physical plane, without crossing the mobile headline. */
.depth-hero .hero-photo{isolation:isolate}
.depth-hero .hero-photo::before{content:'';position:absolute;inset:20px 13px -12px -14px;background:var(--cream);border:1px solid #0242631c;border-radius:46% 46% 3px 3px;transform:rotate(-5deg);z-index:-1;box-shadow:0 8px 20px -12px #02426366;pointer-events:none}
.depth-hero .photo-window{box-shadow:9px 13px 0 var(--navy),16px 27px 36px -20px #02426370}
.depth-hero .price-stamp{box-shadow:0 2px 4px #02426320,0 13px 20px -8px #02426370;animation:stamp-hover 5s cubic-bezier(.45,0,.55,1) infinite alternate}
@keyframes stamp-hover{from{transform:translateY(0) rotate(-12deg)}to{transform:translateY(-6px) rotate(-9deg)}}
.hero-photo.motion-paused .price-stamp{animation-play-state:paused}
/* The choices sit above the background rather than disappearing into it. */
.home-choice{background:var(--cream-light);border-color:#02426330;box-shadow:0 2px 4px #02426308,0 9px 18px -14px #02426366;transition:background-color 160ms ease,color 160ms ease,transform 180ms var(--ease-out),box-shadow 180ms ease}
.home-option input:checked+.home-choice{box-shadow:0 4px 7px #02426318,0 15px 24px -14px #02426380}
.plans article:not(.featured){background:var(--cream-light);box-shadow:var(--elevation);border-color:#02426324}
.plans article.featured{background:var(--navy);color:var(--cream-light);box-shadow:0 5px 10px #02426320,0 23px 34px -19px #02426390}
section.why-wimpies{color:var(--navy)}
.why-reasons article{border-top-color:#02426340}
.why-reasons p{color:var(--navy)}
.why-wimpies .button:focus-visible{outline-color:var(--navy)}
.story-image{box-shadow:0 5px 9px #02426312,0 20px 30px -16px #02426370;border-color:var(--cream-light)}
.word{background:var(--cream-light);border-color:#02426355}
.towns>span{background:var(--cream);box-shadow:0 2px 3px #02426310,0 7px 13px -10px #02426366}
.area input{background:var(--cream)}
section.closing::before{color:#02426308;opacity:1}
footer[data-surface]{margin-top:0}
@media(hover:hover) and (pointer:fine){.home-option:hover .home-choice{transform:translateY(-4px);box-shadow:0 4px 8px #02426310,0 17px 24px -16px #02426370}}
@media(max-width:800px){.depth-hero .hero-photo::before{inset:15px 9px -9px -11px;transform:rotate(-4deg)}.depth-hero .photo-window{box-shadow:7px 10px 0 var(--navy),12px 22px 28px -17px #02426370}}
@media(max-width:520px){.depth-hero .hero-photo{margin-bottom:47px}.depth-hero .hero-endline{transform:none;text-shadow:none;-webkit-text-stroke:0}.plans article.featured{box-shadow:0 4px 8px #02426318,0 15px 22px -14px #02426380}}
@media(prefers-reduced-motion:reduce){.depth-hero .price-stamp{animation:none}.home-choice{transition:none}.home-option:hover .home-choice{transform:none}}
/* Selection is communicated by pink; primary booking starts in navy. */
.home-option input:checked+.home-choice .housing-icon{color:var(--pink)}
.home-option input:checked+.home-choice .target-home+path{stroke:var(--navy)}
.depth-hero .hero-actions .button{background:var(--navy);color:var(--pink);border-color:var(--navy);padding-right:89px;min-height:59px;overflow:visible;gap:0}
.depth-hero .hero-actions .button::before{border-color:#f88e9570}
.depth-hero .hero-actions .button>.button-pictogram{position:absolute;right:11px;top:50%;width:62px;height:62px;transform:translateY(-56%) rotate(-8deg);transition:transform 180ms var(--ease-out);pointer-events:none}
.depth-hero .hero-actions .squeegee-icon{width:62px;height:62px;stroke-width:1.35;filter:drop-shadow(0 2px 1px #02426335)}
.plans .button[data-plan]{background:var(--navy);color:var(--pink);border-color:var(--pink)}
.plans .button[data-plan]::before{border-color:#f88e9566}
.plans .button[data-plan][data-selected="true"]{background:var(--pink);color:var(--navy);border-color:var(--navy)}
.plans .button[data-plan][data-selected="true"]::before{border-color:#02426340}
.plans article.is-selected{outline:2px solid var(--pink);outline-offset:4px}
@media(hover:hover) and (pointer:fine){.depth-hero .hero-actions .button:hover{background:#0d5274;color:var(--pink);border-color:#0d5274}.depth-hero .hero-actions .button:hover>.button-pictogram{transform:translateY(-59%) rotate(0deg)}.plans .button[data-plan]:not([data-selected="true"]):hover{background:#0d5274;color:var(--pink);border-color:var(--pink)}.plans .button[data-plan][data-selected="true"]:hover{background:#f5a5aa;color:var(--navy)}}
@media(max-width:900px) and (min-width:521px){.area{grid-template-columns:1fr;gap:35px}.area-right{width:100%;max-width:none}.towns>span{font-size:25px;letter-spacing:1.1px}.towns{gap:17px}}
@media(max-width:520px){.depth-hero .hero-actions .button{padding-right:84px;min-height:58px}.depth-hero .hero-actions .button>.button-pictogram,.depth-hero .hero-actions .squeegee-icon{width:58px;height:58px}.depth-hero .hero-actions .button>.button-pictogram{right:11px}.towns>span{font-size:clamp(18px,5.4vw,23px);letter-spacing:.7px}}
@media(prefers-reduced-motion:reduce){.depth-hero .hero-actions .button>.button-pictogram{transition:none}.depth-hero .hero-actions .button:hover>.button-pictogram{transform:translateY(-56%) rotate(-8deg)}}
/* Full-width colour bands and rules; centred content remains comfortably bounded. */
body>header,body>main,body>footer{width:100%;max-width:none;margin-inline:0}
@media(min-width:1600px){
 :root{--wide-gutter:calc((100vw - 1424px)/2)}
 body>header,body>footer,.section,.story{padding-inline:var(--wide-gutter)}
 .depth-hero .hero-overline{left:var(--wide-gutter);right:var(--wide-gutter)}
 .depth-hero .hero-backtype{left:calc((100vw - 1440px)/2)}
 .depth-hero .hero-photo{right:calc((100vw - 1344px)/2);width:656px}
 .depth-hero .hero-foreground{left:calc((100vw - 1344px)/2);width:960px}
 .story{column-gap:80px}
}

/* A long, slim rubber blade makes the tool unmistakably a window squeegee. */
:root{--brand-red:#E2474B}
header .nav-cta{background:var(--navy);color:var(--pink);border-color:var(--navy);padding:13px 23px;gap:22px;min-height:57px;font-size:21px}
header .nav-cta::before{border-color:#f88e9570}
header .nav-cta>.button-pictogram,header .nav-cta .squeegee-icon{width:43px;height:43px}
.squeegee-icon{stroke-width:1.5}
.depth-hero .hero-actions .squeegee-icon{stroke-width:1.5}
.depth-hero .price-stamp{width:180px;height:180px;background:var(--cream);border-color:var(--navy)!important;outline:3px solid var(--pink);outline-offset:4px;color:var(--navy);right:-43px;box-shadow:3px 5px 0 #02426315,0 18px 23px -10px #02426380}
.depth-hero .price-stamp>strong{font-size:101px;line-height:.9;color:var(--brand-red);letter-spacing:-3px;margin:5px 0}
.depth-hero .price-stamp>span{font-size:14px;font-weight:700;letter-spacing:1.4px}
.depth-hero .price-stamp strong>span{font-size:.62em;vertical-align:top;margin-top:7px;margin-left:1px}
@media(hover:hover) and (pointer:fine){header .nav-cta:hover{background:#0d5274;color:var(--pink);border-color:#0d5274}}
@media(max-width:1100px) and (min-width:801px){header .nav-cta{font-size:20px;padding:11px 20px;gap:16px}header .nav-cta>.button-pictogram,header .nav-cta .squeegee-icon{width:39px;height:39px}}
@media(max-width:800px){.depth-hero .price-stamp{width:142px;height:142px;right:-29px}.depth-hero .price-stamp>strong{font-size:79px}.depth-hero .price-stamp>span{font-size:11px;letter-spacing:1.1px}}
@media(max-width:520px){.depth-hero .price-stamp{width:136px;height:136px;right:-27px}.depth-hero .price-stamp>strong{font-size:76px}.depth-hero .price-stamp>span{font-size:10px;letter-spacing:1px}}
@media(max-width:360px){.depth-hero .price-stamp{width:128px;height:128px;right:-24px}.depth-hero .price-stamp>strong{font-size:71px}.depth-hero .price-stamp>span{font-size:10px}}
/* Share heading height so the three explanatory paragraphs start together. */
@media(min-width:521px){
 .why-reasons h3{min-height:2.2em}
 @supports(grid-template-rows:subgrid){
  .why-reasons{grid-template-rows:auto auto;row-gap:15px}
  .why-reasons article{display:grid;grid-template-rows:subgrid;grid-row:span 2}
  .why-reasons h3{min-height:0;margin-bottom:0}
 }
}