/* A finishing pass on the original design, using its existing responsive layouts. */
:root{--hc-section-space:clamp(40px,4.5vw,64px);--hc-section-end:clamp(48px,5.5vw,80px)}
/* Match the user's preferred 90% desktop density at normal browser zoom. */
@media(min-width:1000px){html{zoom:.9;--hc-zoom:.9}}
/* Big screens (4K TVs, or Chrome zoomed well out): enlarge in steps so the layout stays about 2000px wide.
   --hc-zoom states the zoom for calculations; --hc-vh (0.9 ÷ zoom) keeps screen-height sizes (vh) in the same proportion
   of the real screen as on a normal desktop, because the zoom multiplies them too. */
@media(min-width:2000px){html{zoom:1;--hc-zoom:1;--hc-vh:.9}}
@media(min-width:2240px){html{zoom:1.1;--hc-zoom:1.1;--hc-vh:.8182}}
@media(min-width:2560px){html{zoom:1.3;--hc-zoom:1.3;--hc-vh:.6923}}
@media(min-width:2880px){html{zoom:1.45;--hc-zoom:1.45;--hc-vh:.6207}}
@media(min-width:3200px){html{zoom:1.6;--hc-zoom:1.6;--hc-vh:.5625}}
@media(min-width:3840px){html{zoom:1.95;--hc-zoom:1.95;--hc-vh:.4615}}
.hc-error-page{background:#0a0a0a}
.hc-error-page #main-content>section{padding:clamp(64px,8vw,112px) 0!important}
.hc-content-section{padding:var(--hc-section-space) 0 var(--hc-section-end)!important}
.hc-machine-section{padding:clamp(24px,2.4vw,32px) 0 clamp(48px,4.5vw,64px)!important}
.hc-map-section{padding:0 0 var(--hc-section-end)!important}
.hc-map-card{display:grid;grid-template-rows:40px minmax(0,1fr)}
.hc-map-card iframe{position:static!important;grid-row:2}
.hc-map-label{grid-row:1;align-items:center;border-radius:0!important}
.hc-lead h1{font-size:clamp(40px,5vw,56px)!important;line-height:1.03;text-wrap:balance}
.hc-mside>h1{font-size:clamp(36px,3.2vw,44px)!important;line-height:1.04;margin-top:0!important;text-wrap:wrap!important}
.hc-contact-title{font-size:clamp(44px,5vw,64px)!important;line-height:1.04;margin-top:0!important}
#main-content h2:not(.hc2-h2),#main-content h3{line-height:1.08}
.hc-mrow .hc-ctitle{font-size:clamp(32px,3.1vw,40px)!important;line-height:1.04!important;text-wrap:balance}
/* Keep the alternating fleet rows as photo-and-copy pairs, with a readable shared measure. */
/* Machine rows use the site content edge (same as the banner heading and footer), not a narrower inset. */
.hc-machines-overview>div{gap:32px!important}
.hc-machines-overview .hc-mrow>a:first-child{aspect-ratio:19/10!important}
.hc-machines-overview .hc-mrow>span{width:min(100%,450px)}
.hc-machines-overview .hc-mrow-reverse>span{justify-self:right}
.hc-machines-overview .hc-mrow>span>span:nth-child(2){font-size:19px!important}
.hc-machines-overview .hc-mrow>span>span:nth-child(3){font-size:17px!important;line-height:1.55!important}
.hc-machines-overview :is(.hc-mrow-go,.hc-mrow-q){font-size:15px!important}
@media(max-width:980px){
 .hc-machines-overview>div{max-width:760px;gap:36px!important}
 .hc-machines-overview .hc-mrow{grid-template-columns:minmax(0,1fr)!important;gap:20px!important}
 .hc-machines-overview .hc-mrow>span{width:100%;justify-self:stretch!important}
}
@media(max-width:600px){
 .hc-machines-overview>div{gap:32px!important}
 .hc-machines-overview .hc-mrow>span{gap:10px!important}
}
.hc-mside>div:last-child>p{font-size:16px!important;line-height:1.65!important}
.hc-btn{font-size:18px;line-height:1.15;max-width:100%;white-space:normal;text-align:center;padding-top:12px;padding-bottom:12px}
.hc-grid-2>*,.hc-fpair>*,.hc-ab2>*{min-width:0}
.hc-contact-depots{row-gap:28px!important;grid-template-rows:auto!important}
.hc-contact-depots>div{grid-row:auto!important;grid-template-rows:auto 1fr auto!important}
.hc-contact-depots a{min-height:36px;display:inline-flex!important;align-items:center}
.hc-quote-card{padding:clamp(20px,3vw,32px)!important}
#hc-contact-form label,.hc-qm-form label{font-size:14px!important;line-height:1.4}
#hc-contact-form input,#hc-contact-form select,.hc-qm-form input,.hc-qm-form select{min-height:48px}
.hc-article-body p,.hc-article-body ul,.hc-article-body ol{max-width:72ch}
.hc-article-nav{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px}
.hc-article-nav>:first-child{justify-self:start}
.hc-article-nav>:nth-child(2){justify-self:center;text-align:center}
.hc-article-nav>:last-child{justify-self:end;text-align:right}
.hc-article-nav a{line-height:1.4}
@media(max-width:600px){.hc-article-nav{font-size:14px;gap:10px}}
.hc-f-label{font-size:12px}
.hc-f-about,.hc-f-hours,.hc-f-addr,.hc-f-mail{font-size:14px}
@media(max-width:600px){
 .hc-grid-3,.hc-grid-4{grid-template-columns:1fr!important}
 .hc-mside>h1{max-width:22ch}
 .hc-machine-actions{display:grid!important;grid-template-columns:1fr;gap:10px!important}
 .hc-machine-actions .hc-btn{width:100%}
 .hc-mrow-go,.hc-mrow-q{min-height:44px!important}
 .hc-f-addr,.hc-f-hours{font-size:15px}
 .hc-f-mail{font-size:16px}
}
.hc-header.hc-h1r .hc-navlink:not(.is-active):hover,
.hc-header.hc-h1r .hc-dd.is-open>.hc-navlink:not(.is-active){color:#d6d6cd!important}
.hc-header .hc-callbtn{transition:border-color .2s ease,background .2s ease,color .2s ease}
.hc-header .hc-callbtn:hover{border-color:#fff!important;background:rgba(255,255,255,.08)!important}
@media(max-width:360px){
 header.hc-header.hc-h1r .hc-hdr-row{width:calc(100% - 24px)!important;gap:8px!important}
 header.hc-header.hc-h1r .hc-hdr-row>a img{height:26px!important}
 header.hc-header.hc-h1r .hc-hdr-row>div{gap:8px!important}
}
.hc2-tile:focus-visible::before{transform:scaleX(1)}
.hc2-tile:focus-visible .hc2-a{transform:translateX(4px)}
.hc2-tile:focus-visible{outline-offset:8px}
.hc2-tile .hc2-t{transition:color .18s ease}
.hc-reveal.hc-in{animation-duration:.48s}
.hc-gallery-controls{position:absolute;bottom:14px;left:14px;right:14px;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:12px;pointer-events:none}
.hc-gallery-info,.hc-gallery-arrows{display:flex;align-items:center;background:rgba(10,10,10,.8);border:1px solid rgba(255,255,255,.25);border-radius:5px;color:#fff;pointer-events:auto;overflow:hidden}
.hc-gallery-count{font-size:12px;line-height:1;letter-spacing:.1em;font-variant-numeric:tabular-nums;padding:0 13px;white-space:nowrap}
.hc-gallery-controls button{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0 12px;color:#fff;background:transparent;border:0;border-left:1px solid rgba(255,255,255,.16);font-size:18px;line-height:1;transition:background .18s ease}
.hc-gallery-controls .hc-gallery-pause{font-size:12px}
.hc-gallery-arrows button:first-child{border-left:0}
.hc-gallery-controls button:hover{background:rgba(255,255,255,.13)}
.hc-gallery-controls button:focus-visible{outline:2px solid var(--hc-yellow);outline-offset:-4px;border-radius:4px}
.hc-qm-box .hc-qm-scroll{padding-top:32px!important}
.hc-qm-form>h3{padding-right:32px;line-height:1.1}
.hc-qm-box .hc-x{top:10px!important;right:10px!important;background:transparent!important}
.hc-qm-box .hc-x:hover{background:var(--hc-bg)!important}
.hc-qm-form input,.hc-qm-form select{transition:border-color .16s ease,box-shadow .16s ease}
.hc-qm-box{box-shadow:0 24px 80px rgba(0,0,0,.32)!important}
.hc-form-help{padding-top:6px}
.hc-form-preview{border-left:0;border-top:1px solid var(--hc-border);padding:10px 0 0;background:transparent;color:var(--hc-fg-muted);font-size:12px}
.hc-f-legal{align-items:center;gap:4px 24px;font-size:14px;line-height:20px}
.hc-f-group img{height:14px!important}
.hc-f-links{display:flex;align-items:center;flex-wrap:wrap;gap:0 clamp(14px,1.4vw,28px)}
.hc-f-copy{display:inline-flex;align-items:center;min-height:44px;white-space:nowrap}
.hc-f-links a,.hc-f-group{white-space:nowrap}
.hc-f-group{margin-left:auto}
@media(max-width:1100px){.hc-f-links{flex-basis:100%}.hc-f-group{margin-left:0}}
@media(max-width:600px){
 .hc-f-copy{flex-basis:100%;min-height:36px}
 .hc-f-links{gap:0 20px}
 .hc-f-group{margin-left:0}
 /* Phones: the links sit in two aligned columns under the copyright line, instead of wrapping wherever they fit. */
 .hc-f-links{display:grid;grid-template-columns:minmax(0,max-content) minmax(0,max-content);column-gap:32px;justify-content:start}
 /* Batch A (CMP-2): a translated, longer link wraps inside its column instead of running off the edge. */
 .hc-f-links a{white-space:normal;overflow-wrap:anywhere}
 .hc-f-copy{grid-column:1/-1}
}
/* Desktop: the copyright line and "Part of the Westgate Group" take equal shares either side, so the links sit
   exactly in the middle of the row between them. */
@media(min-width:1101px){
 .hc-f-legal{flex-wrap:nowrap;column-gap:clamp(14px,1.4vw,28px)}
 .hc-f-links{display:contents}
 .hc-f-copy,.hc-f-legal>.hc-f-group{flex:1 1 0;min-width:max-content}
 .hc-f-legal>.hc-f-group{justify-content:flex-end;margin-left:0}
}
/* Narrow phones cannot fit both columns: they need 354px of room, and the page keeps 16px at each side, so under 386px the links stack
   in one column (Batch A, M11 / audit HOME-3, CMP-1: "@handcplanthire on X" ran off the right edge at 369px and under). */
@media(max-width:385px){.hc-f-links{grid-template-columns:minmax(0,max-content)}}
#hc-news-list{scroll-margin-top:110px}
.hc-editorial .hc-stagger>p:first-child{font-size:17px!important;line-height:1.65!important;text-wrap:pretty}
.hc-editorial-heading{font-size:clamp(28px,2.5vw,32px);line-height:1.08}
.hc-vacancy-grid{align-items:center!important}
.hc-vacancy-photo{aspect-ratio:16/10!important}
.hc-charity-link{width:fit-content}
.hc-editorial .hc-stagger>div:last-child{row-gap:12px!important}
@media(max-width:600px){.hc-editorial .hc-stagger>div:last-child:has(.hc-btn){display:grid!important;grid-template-columns:1fr}.hc-editorial .hc-btn{width:100%}}
.hc-btn:focus-visible .hc-arrow,.hc-mrow-go:focus-visible .hc-arrow{transform:translateX(4px)}
.hc-ncard:focus-visible .hc-ncard-img::after{transform:scaleX(1)}
.hc-ncard:focus-visible .hc-ncard-t{color:#6b6b00!important}
.hc-ncard>span:last-child{margin-top:auto;padding-top:2px;min-height:30px;display:flex;align-items:center}
@media(hover:hover){.hc-ncard:hover .hc-ncard-img img{transform:scale(1.025)}}
.hc-qm-box{animation:hcDialogIn .22s cubic-bezier(.2,.7,.2,1)}
@keyframes hcDialogIn{from{translate:0 8px}to{translate:0 0}}
/* P06 (Q7): the box is solid from its first frame (only a small slide-up); only the dark backdrop fades in. */
#hc-quote-modal.hc-qm-open>[data-close]{animation:hcBackdropIn .22s ease-out}
@keyframes hcBackdropIn{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){
 .hm-arr,.hc-arrow,.hm-link,.hc-ncard-img::after,.hc-ncard-img img,.hc-mrow .hc-cimg,.hc-btn,.hc-qm-box,#hc-quote-modal>[data-close]{transition:none!important;animation:none!important}
 .hm-arr,.hc-arrow{transform:none!important}
 html.hm .hm-wi{transform:none!important;transition:none!important}
 .hm-edge{transform:scaleX(1)!important}
}
@media(prefers-reduced-motion:reduce){.hc2-tile::before,.hc2-tile .hc2-a,.hc2-tile .hc2-t,.hc-header .hc-callbtn{transition:none!important}.hc-reveal.hc-in{animation:none!important}}

/* Mobile body copy is left-aligned (ragged right) with balanced line breaks: even word spacing, no forced hyphenation. */
@media(max-width:900px){
 #main-content p:not(.hc-about-eyebrow):not(.hj-list-label):not(.hj-focus-label):not(.hc-form-preview),
 #main-content li,
 #main-content .hc-mrow>span>span:nth-child(3),
 .hc-f-about{
  text-wrap:pretty;
 }
 /* The homepage lead keeps its size and fills its lines (specific enough to outrank the general rule above). */
 #main-content .hc2-intro .hc2-intro-grid .hc2-intro-r p:first-child{font-size:clamp(19px,5.2vw,21px);text-wrap:pretty}
}

/* News articles: the prose, then one tidy gallery of the original photos. Several photos are equal 4:3 tiles; a single
   photo is shown whole at its own shape and never enlarged. Each links to its full-size file and opens in the viewer. */
.hc-article-gallery{display:grid;grid-template-columns:repeat(var(--hc-gallery-cols,2),minmax(0,1fr));gap:12px;margin:26px 0 8px}
.hc-ag-item{position:relative;display:block;overflow:hidden;aspect-ratio:4/3;border-radius:6px;background:#e8e8df;cursor:zoom-in}
.hc-article-body .hc-ag-item img{position:absolute;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;border-radius:0;object-fit:cover;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.hc-ag-item::after{content:"";position:absolute;top:10px;right:10px;width:34px;height:34px;border-radius:50%;background:rgba(10,10,10,.72) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M14 4h6v6M10 20H4v-6M20 4l-7 7M4 20l7-7'/%3E%3C/svg%3E") center/16px no-repeat;opacity:0;transition:opacity .2s ease}
.hc-ag-item:is(:hover,:focus-visible) img{transform:scale(1.035)}
.hc-ag-item:is(:hover,:focus-visible)::after{opacity:1}
.hc-article-gallery[data-count="1"]{grid-template-columns:minmax(0,var(--hc-single-width,100%))}
.hc-article-gallery[data-count="1"] .hc-ag-item{aspect-ratio:auto}
.hc-article-body .hc-article-gallery[data-count="1"] .hc-ag-item img{position:static;height:auto}
@media(max-width:600px){
 .hc-article-gallery{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
 .hc-article-gallery[data-count="1"]{grid-template-columns:minmax(0,1fr)}
 .hc-article-gallery[data-count="3"] .hc-ag-item:first-child{grid-column:1/-1}
 .hc-ag-item::after{opacity:1;width:28px;height:28px;top:8px;right:8px;background-size:13px}
}
@media(prefers-reduced-motion:reduce){.hc-article-body .hc-ag-item img{transition:none}}
/* The photo viewer (hc-lightbox.js). */
.hc-lb{position:fixed;inset:0;z-index:2147483200;display:grid;place-items:center;padding:72px 84px;background:rgba(8,8,8,.95);opacity:0;visibility:hidden;touch-action:pan-y pinch-zoom;transition:opacity .22s ease,visibility 0s .22s}
.hc-lb.is-open{opacity:1;visibility:visible;transition:opacity .22s ease}
.hc-lb:focus{outline:none}
.hc-lb-img{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;border-radius:4px;box-shadow:0 24px 70px rgba(0,0,0,.55);user-select:none;-webkit-user-drag:none}
.hc-lb-btn{position:absolute;display:grid;place-items:center;width:52px;height:52px;padding:0;border:1px solid rgba(255,255,255,.3);border-radius:50%;background:rgba(0,0,0,.45);color:#fff;font:600 22px/1 var(--hc-body);cursor:pointer;transition:background .2s ease,color .2s ease,border-color .2s ease}
.hc-lb-btn:is(:hover,:focus-visible){background:var(--hc-yellow);border-color:var(--hc-yellow);color:#0a0a0a}
.hc-lb-kb .hc-lb-btn:focus{background:var(--hc-yellow);border-color:var(--hc-yellow);color:#0a0a0a}
.hc-lb-close{top:16px;right:16px}
.hc-lb-prev{left:16px;top:50%;translate:0 -50%}
.hc-lb-next{right:16px;top:50%;translate:0 -50%}
.hc-lb-count{position:absolute;left:50%;bottom:20px;margin:0;translate:-50% 0;color:rgba(255,255,255,.72);font-size:13px;font-weight:700;letter-spacing:.14em}
.hc-lb-single .hc-lb-prev,.hc-lb-single .hc-lb-next,.hc-lb-single .hc-lb-count{display:none}
html.hc-lb-lock{overflow:hidden}
@media(max-width:600px){
 .hc-lb{padding:64px 0 84px}
 .hc-lb-img{border-radius:0}
 .hc-lb-prev,.hc-lb-next{top:auto;bottom:16px;translate:none}
 .hc-lb-count{bottom:34px}
}
@media(prefers-reduced-motion:reduce){.hc-lb,.hc-lb.is-open{transition:none}}
/* Six menu items (Operators added 25 Sep 2026): on the narrowest desktop widths the items sit a little closer together so
   the menu keeps clear space either side of it, next to the logo and the quote button. */
@media (min-width:901px) and (max-width:1079px){header.hc-h1r .hc-inline-nav{gap:20px!important}}
/* Company details required on UK company websites (Companies House record, checked 25 Sep 2026), one quiet line
   under the footer links. */
.hc-f-reg{margin:0;padding:0 0 18px;font-size:12px;line-height:1.5;color:#8a8a83;text-wrap:pretty}
@media (max-width:600px){.hc-f-reg{padding:4px 0 22px}}

/* Phone and tablet header (Charlie's choice, 26 Sep 2026): the phone icon, Quote and the menu are plain items divided
   by short thin rules, with no boxes. Each keeps a 44px-tall tap area; the menu icon sits on the right content edge. */
@media(max-width:900px){
 #hc-page .hc-hdr-row>div,#hc-page header.hc-header.hc-h1r .hc-hdr-row>div{gap:0!important}
 #hc-page .hc-hdr-row :is(.hc-phone,.hc-callbtn,.hc-menubtn){position:relative;height:44px;min-height:44px!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;transform:none!important}
 #hc-page .hc-hdr-row .hc-phone{width:auto;min-width:44px;padding:0 16px 0 8px!important;justify-content:center}
 #hc-page .hc-hdr-row .hc-phone-icon{width:22px;height:22px;margin-right:0}
 #hc-page .hc-hdr-row .hc-callbtn{padding:0 16px!important;color:#fff;font-size:15px!important;letter-spacing:.08em!important}
 #hc-page .hc-hdr-row .hc-menubtn{width:auto;min-width:44px;padding:0 0 0 16px!important;justify-content:flex-end}
 #hc-page .hc-hdr-row :is(.hc-callbtn,.hc-menubtn)::before{content:"";position:absolute;left:0;top:50%;width:1px;height:22px;margin-top:-11px;background:rgba(255,255,255,.28)}
 #hc-page .hc-hdr-row :is(.hc-callbtn,.hc-menubtn):hover{color:var(--hc-yellow)!important;background:transparent!important}
}
/* Equal white space (28 Sep 2026): the gap above and below each standard section matches the page's side margin.
   Phones keep a 32px minimum so sections do not run into each other. */
:root{--hc-gutter:max(calc(clamp(32px,6vw,96px) / 2),32px)}
.hc-pg-sec,.hc-pg-sec+.hc-pg-sec,.hc-pg-sec:has(+.hc-pg-sec),.hc-open+.hc-pg-sec:has(.hc-ct-row),.hc-ops-sec,
.hc-about-group,.hc-content-section,.hc-machine-section,.hc2-mach,.hc-ab2{padding-top:var(--hc-gutter)!important;padding-bottom:var(--hc-gutter)!important}
/* 16 Oct 2026 (Charlie): square corners on every photo across the site (machine galleries and cards, home machine tiles,
   About/Operators/Community photos, news cards and article photos, the photo viewer, menu thumbnails). Panels, buttons
   and the map keep their own corners. */
.hc-mega-img,.hc-mm-img,.hc-gallery,.hc2-tile,.hc-ptile,.hc-mob-tile,.hc-ab-intro-photo,.hc-ab-depot figure,
.hc-ops-photo,.hc-vacancy-photo,.hc-ncard-img,.hc-ag-item,.hc-article-body img,.hc-lb-img,#hc-journey .hj-story-image img{border-radius:0!important}
/* Kept separate so a browser without :has() still applies the rule above (machines list photo links). */
#main-content a:has(>picture>.hc-cimg),#main-content a:has(>.hc-cimg){border-radius:0!important}
/* Batch A (M5 NAV-4, JRN-5): the sticky header is about 82px tall (66px once compact). The skip link, and a link to #hc-contact-form,
   leave their target a header's height from the top of the window, so the first Tab after the skip link no longer lands on a link
   hidden under the header. Targeted margins only: a site-wide scroll-padding-top brings the phone-menu jump back (audit M1/M5). */
#main-content,#main-content .hc-breadcrumb,#main-content .hc-breadcrumb a,#hc-contact-form{scroll-margin-top:96px}
/* Batch A (M16, CMP-2): a long word in a heading (larger text, a translated page) breaks instead of running off the side of the screen. */
h1,h2{overflow-wrap:break-word}