/* Clear Landscaping — homepage-only rules
   Lifted out of the approved page markup unchanged; the rules and their order
   are exactly as the design shipped them. Edit here, not inline. */

.trust div{padding:clamp(28px,3.4vw,44px) clamp(18px,2vw,30px);text-align:center;
  border-right:1px solid rgba(255,255,255,.15);
  display:flex;flex-direction:column;justify-content:flex-start}
/* The four values are not the same length — "Since 1985" and "Owner-led" are words,
   "24/7" and "SIMA" are short — so they render at different display sizes. The value
   row therefore gets one fixed pixel height with its content bottom-aligned, and the
   tile stacks from the top rather than centring. Every label then starts on exactly
   the same line, even when one of them wraps to two lines on a narrow screen. */
.trust b{display:flex;align-items:flex-end;justify-content:center;
  font-family:"Playfair Display",serif;font-size:clamp(30px,3.6vw,46px);
  height:48px;color:#fff;line-height:1;margin-bottom:10px}
.trust span{display:block}
@media(max-width:1200px){.trust b{height:42px}}
@media(max-width:900px){.trust b{height:36px}}
.sgrid{display:grid;grid-template-columns:repeat(12,1fr);gap:22px}
/* Seven cards, two rows: three lead cards over four supporting cards. Both rows
   run the full width of the wrap, so no card is left stranded on its own line. */
.sgrid>.scard:nth-child(-n+3){grid-column:span 4;min-height:clamp(300px,25.5vw,348px)}
.sgrid>.scard:nth-child(n+4){grid-column:span 3;min-height:clamp(250px,21vw,286px)}
.sgrid>.scard:nth-child(n+4) .b{padding:22px 20px}
.sgrid>.scard:nth-child(n+4) h3{font-size:20px}
.sgrid>.scard:nth-child(n+4) p{font-size:13.5px}
/* The text block is anchored to the bottom of the card, so a description that
   wraps to a second line drags its title up out of line with the rest of the row.
   Reserving two lines keeps every title on the same baseline at every width,
   without editing any of the card copy. */
.scard p{font-size:14px;line-height:1.5;min-height:3em;margin:0;color:rgba(255,255,255,.78)}
/* Below the 12-column layout, three-across makes the cards too narrow and the
   titles start wrapping. Two wide columns with the last card spanning both keeps
   every title on one line and still leaves no orphan. */
@media(max-width:1080px){
  .sgrid{grid-template-columns:repeat(2,1fr)}
  .sgrid>.scard:nth-child(-n+3),.sgrid>.scard:nth-child(n+4){
    grid-column:span 1;min-height:clamp(240px,29vw,300px)}
  .sgrid>.scard:nth-child(7){grid-column:1/-1;min-height:clamp(230px,26vw,280px)}
  .sgrid>.scard:nth-child(n+4) .b{padding:26px 24px}
  .sgrid>.scard:nth-child(n+4) h3{font-size:22px}
  .sgrid>.scard:nth-child(n+4) p{font-size:14px}
}
@media(max-width:620px){
  .sgrid{grid-template-columns:1fr}
  .sgrid>.scard:nth-child(-n+3),.sgrid>.scard:nth-child(n+4){grid-column:1/-1;min-height:250px}
  .svc .head{flex-direction:column;align-items:flex-start}
}
/* Three stats laid out as a mosaic rather than an even row — the lead figure takes a
   tall tile down the left, the other two stack beside it. Same asymmetry as the
   equipment photo grid. All three keep the white card treatment; only the size and
   the scale of the figure separate the lead from the pair. */
.pstats{display:grid;grid-template-columns:1.18fr 1fr;grid-auto-rows:1fr;gap:16px}
.pstats>div{background:#fff;border:1px solid var(--line);border-radius:16px;
  padding:22px 24px;display:flex;flex-direction:column;justify-content:flex-end;min-width:0}
.pstats>div:first-child{grid-row:1/3;justify-content:center;padding:clamp(26px,2.6vw,34px)}
.pstats b{display:block;font-family:"Playfair Display",serif;font-size:clamp(28px,2.9vw,34px);
  color:var(--navy);line-height:1;margin-bottom:7px}
.pstats span{display:block;font-size:13px;line-height:1.45;color:var(--slate)}
.pstats>div:first-child b{font-size:clamp(48px,5.4vw,68px);margin-bottom:12px}
.pstats>div:first-child span{font-size:13px;letter-spacing:1.5px;text-transform:uppercase;
  color:var(--ice)}
@media(max-width:420px){
  .pstats{grid-template-columns:1fr;grid-auto-rows:auto}
  .pstats>div:first-child{grid-row:auto;padding:26px 24px}
  .pstats>div{justify-content:flex-start}
}
/* ---- R8: trust bar — "Since 1985" / "Owner-led" are words, not figures, so the
        display size is stepped down to keep every tile on a single line. -------- */
.trust .t-wide b{font-size:clamp(21px,2.4vw,32px);letter-spacing:-.2px}
/* ---- R8: PURPOSE-BUILT FOR COMMERCIAL SNOW -------------------------------- */
.built{background:var(--frost-2)}
.bhead{max-width:760px;margin-bottom:clamp(34px,4vw,52px)}
.bhead h2{margin-bottom:18px}
.bline{font-family:"Playfair Display",serif;font-size:clamp(19px,2.05vw,27px);line-height:1.45;
  color:var(--ice);margin:clamp(30px,3.4vw,44px) 0 0;max-width:60ch}
.bgrid{display:grid;grid-template-columns:repeat(6,1fr);gap:18px}
.bgrid figure{position:relative;margin:0;border-radius:18px;overflow:hidden;background:var(--navy);
  box-shadow:0 18px 44px rgba(16,24,37,.13)}
.bgrid picture{display:block;height:100%}
.bgrid img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.bgrid figure::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(12,19,29,0) 38%,rgba(12,19,29,.82) 100%)}
.bgrid figure:hover img{transform:scale(1.05)}
.bgrid figcaption{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:20px 20px 18px}
.bgrid figcaption b{display:block;color:#fff;font-family:"Playfair Display",serif;font-size:20px;
  line-height:1.2;margin-bottom:3px}
.bgrid figcaption span{display:block;font-size:12.5px;letter-spacing:1.3px;text-transform:uppercase;
  color:var(--pop)}
/* mosaic: two tall feature tiles, four supporting */
.bgrid .b1{grid-column:span 4;height:clamp(280px,30vw,400px)}
.bgrid .b2{grid-column:span 2;height:clamp(280px,30vw,400px)}
.bgrid .b3,.bgrid .b4,.bgrid .b5{grid-column:span 2;height:clamp(230px,22vw,290px)}
/* The four capabilities were four bare paragraphs floating in white space. They now
   sit in a navy panel, which closes the section and borrows the trust bar's language
   — hairline dividers between columns, Playfair numerals in brand cyan, white
   headings on navy. Same rounded-panel radius as the photo tiles above it. */
.bpoints{display:grid;grid-template-columns:repeat(4,1fr);
  margin-top:clamp(30px,3.6vw,46px);background:var(--navy);border-radius:22px;overflow:hidden;
  box-shadow:0 26px 60px rgba(16,24,37,.20)}
.bpoints>div{position:relative;padding:clamp(28px,2.7vw,38px) clamp(22px,2.2vw,32px);
  border-right:1px solid rgba(255,255,255,.13);transition:background .32s var(--ease)}
.bpoints>div:last-child{border-right:0}
.bpoints>div::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:var(--pop);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.bpoints>div:hover{background:var(--navy-2)}
.bpoints>div:hover::before{transform:scaleX(1)}
.bpoints .k{display:block;font-family:"Playfair Display",serif;font-size:26px;line-height:1;
  color:var(--pop);margin-bottom:16px}
.bpoints h3{color:#fff;font-size:17.5px;line-height:1.3;margin-bottom:10px}
.bpoints p{font-size:14.5px;line-height:1.65;margin:0;color:rgba(255,255,255,.7)}
@media(max-width:1000px){
  .bgrid{grid-template-columns:repeat(4,1fr)}
  .bgrid .b1{grid-column:span 4;height:clamp(260px,40vw,340px)}
  .bgrid .b2{grid-column:span 4;height:clamp(240px,38vw,320px)}
  .bgrid .b3,.bgrid .b4{grid-column:span 2;height:clamp(210px,26vw,260px)}
  .bgrid .b5{grid-column:span 4;height:clamp(210px,26vw,260px)}
  .bpoints{grid-template-columns:1fr 1fr}
  .bpoints>div:nth-child(2){border-right:0}
  .bpoints>div:nth-child(-n+2){border-bottom:1px solid rgba(255,255,255,.13)}
}
@media(max-width:620px){
  .bgrid{grid-template-columns:1fr;gap:14px}
  .bgrid .b1,.bgrid .b2,.bgrid .b3,.bgrid .b4,.bgrid .b5{grid-column:1/-1;height:240px}
  .bpoints{grid-template-columns:1fr}
  .bpoints>div{border-right:0}
  .bpoints>div:not(:last-child){border-bottom:1px solid rgba(255,255,255,.13)}
}
/* ---- R8: BULK SALT & DE-ICING -------------------------------------------- */
.salt .wrap{display:grid;grid-template-columns:1.04fr .96fr;gap:clamp(32px,4.6vw,70px);align-items:center}
.sphoto{position:relative;border-radius:22px;overflow:hidden;box-shadow:0 26px 60px rgba(16,24,37,.20)}
.sphoto img{display:block;width:100%;height:clamp(320px,40vw,470px);object-fit:cover}
.sphoto .scap{position:absolute;left:18px;bottom:18px;z-index:2;padding:12px 18px;border-radius:12px;
  background:rgba(16,24,37,.78);backdrop-filter:blur(6px);color:rgba(255,255,255,.72);
  font-size:12px;letter-spacing:.6px}
.sphoto .scap b{display:block;color:#fff;font-family:"Playfair Display",serif;font-size:19px;
  letter-spacing:0;margin-bottom:2px}
.scopy h2{margin-bottom:16px}
.slist{list-style:none;margin:24px 0 30px;padding:0}
.slist li{position:relative;padding:12px 0 12px 34px;font-size:15px;color:var(--slate);
  border-bottom:1px solid var(--line)}
.slist li:first-child{border-top:1px solid var(--line)}
.slist li::before{content:"";position:absolute;left:4px;top:20px;width:11px;height:11px;
  border-radius:50%;border:2px solid var(--pop)}
@media(max-width:940px){
  .salt .wrap{grid-template-columns:1fr}
  .sphoto img{height:clamp(260px,52vw,380px)}
}