/* Split-opening pages (About Us, News, Contact; the Machines overview opening).
   Shared opening, section rhythm and rule-led blocks, within the established H&C identity. */

/* Opening: title and content on black, photo beside it. The text starts on the site content edge. */
.hc-open{--pg-edge:max(calc(clamp(32px,6vw,96px) / 2),calc((100vw - 1600px) / 2));container-type:inline-size;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);min-height:min(540px,64vh);background:#000;color:#fff}
@supports (width:1cqi){.hc-open>*{--pg-edge:max(calc(clamp(32px,6vw,96px) / 2),calc((100cqi - 1600px) / 2))}}
.hc-open-copy{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;min-width:0;padding:56px clamp(32px,5vw,72px) 56px var(--pg-edge)}
.hc-open h1{margin:0;font-size:clamp(56px,6.4vw,96px);line-height:.92;color:#fff}
.hc-open-lead{margin:24px 0 0;max-width:28ch;font-size:clamp(19px,1.5vw,23px);line-height:1.45;color:#d4d4cf;text-wrap:pretty}
.hc-open-photo{position:relative;margin:0;min-height:300px;overflow:hidden;background:#111}
.hc-open-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% 50%}
@media(max-width:760px){
 .hc-open{grid-template-columns:minmax(0,1fr);min-height:0}
 .hc-open-copy{padding:40px var(--pg-edge) 32px}
 .hc-open-photo{min-height:0;height:clamp(200px,58vw,260px)}
 /* Machines: on phones the opening is title and intro only; the machine photos follow straight after. */
 .hc-open-photo-desktop{display:none}
}

/* Section rhythm shared by the page bodies. */
.hc-pg-wrap{width:min(100% - clamp(32px,6vw,96px),1600px);margin-inline:auto}
.hc-pg-sec{padding:clamp(56px,6vw,96px) 0}
.hc-pg-sec+.hc-pg-sec{border-top:1px solid var(--hc-border);padding-top:clamp(40px,4vw,64px)}
/* Back-to-back sections sit closer: the divider carries the break, so less padding is needed either side of it. */
.hc-pg-sec:has(+.hc-pg-sec){padding-bottom:clamp(40px,4vw,64px)}
.hc-split-page .hc-pg-h2{margin:0;font-size:clamp(36px,3.6vw,54px);line-height:.95;color:var(--hc-fg-strong);text-wrap:balance}
.hc-pg-lead{margin:0;font-size:clamp(18px,1.35vw,21px);line-height:1.55;color:var(--hc-fg);text-wrap:pretty}
.hc-pg-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:36px;align-items:start}
/* The lead's first line sits level with the heading capitals: .1642em of the heading minus .4722em of the lead (measured Barlow metrics). */
.hc-pg-row>.hc-pg-lead{padding-top:max(0px,calc(.1642 * clamp(36px,3.6vw,54px) - .4722 * clamp(18px,1.35vw,21px)))}
.hc-pg-label{margin:0 0 8px;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--hc-fg-muted)}
@media(max-width:760px){
 .hc-pg-row{grid-template-columns:minmax(0,1fr);row-gap:18px}
 .hc-pg-row>.hc-pg-lead{padding-top:0}
}

/* About Us: intro (text beside an equal-height photo) and two depot cards. */
.hc-ab-intro{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:36px;align-items:stretch}
.hc-ab-intro-copy{display:flex;flex-direction:column;justify-content:center;gap:clamp(18px,1.8vw,26px);min-width:0;padding-block:clamp(8px,1.2vw,20px)}
.hc-ab-intro-photo{position:relative;width:100%;margin:0;min-height:260px;border-radius:8px;overflow:hidden;background:#deded6}
.hc-ab-intro-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 70%}
.hc-ab-depots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:36px;margin-top:clamp(32px,3.2vw,48px)}
.hc-ab-depot{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:24px;align-items:stretch;min-width:0}
.hc-ab-depot figure{width:100%;margin:0;aspect-ratio:4/3;border-radius:6px;overflow:hidden;background:#deded6}
.hc-ab-depot img{display:block;width:100%;height:100%;object-fit:cover}
.hc-ab-depot-details{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;min-width:0}
.hc-ab-depot h3{margin:0 0 10px;font-size:30px;line-height:1}
.hc-ab-depot address{font-style:normal;font-size:16px;line-height:1.55;color:var(--hc-fg)}
.hc-ab-depot .hc-glink{margin-top:8px}
@media(max-width:1100px){
 .hc-ab-depot{grid-template-columns:minmax(0,1fr)}
 .hc-ab-depot-details{justify-content:flex-start}
}
@media(max-width:760px){
 .hc-ab-intro,.hc-ab-depots{grid-template-columns:minmax(0,1fr);row-gap:24px}
 .hc-ab-intro-photo{min-height:0;aspect-ratio:4/3}
 .hc-ab-depots{row-gap:36px}
}

/* News: the featured story lives in the opening; archive cards are rule-led. */
.hc-open-feature{display:grid;justify-items:start;gap:14px;max-width:34ch;margin-top:clamp(28px,3vw,44px);color:#fff;text-decoration:none}
.hc-open-chip{display:inline-flex;padding:6px 10px;border-radius:4px;background:var(--hc-yellow);color:#0a0a0a;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.hc-open-feature-title{font-family:var(--hc-display);font-size:clamp(28px,2.6vw,40px);font-weight:800;line-height:.98;text-transform:uppercase}
.hc-open-feature-cta{display:inline-flex;gap:8px;padding-bottom:4px;border-bottom:2px solid var(--hc-yellow);font-size:14px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;transition:color .2s ease}
.hc-open-feature:is(:hover,:focus-visible) .hc-open-feature-cta{color:var(--hc-yellow)}
.hc-nw-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:clamp(28px,3vw,40px)}
#hc-news-count{font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--hc-fg-muted)}
.hc-split-page .hc-ngrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px 36px}
.hc-split-page .hc-ncard{display:flex;flex-direction:column;gap:14px;min-width:0;padding-top:20px;border-top:2px solid var(--hc-fg-strong);color:inherit;text-decoration:none}
.hc-ncard-date{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--hc-fg-muted)}
.hc-split-page .hc-ncard-img{display:block;position:relative;overflow:hidden;aspect-ratio:3/2;border-radius:6px;background:#e8e8df}
.hc-split-page .hc-ncard-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hc-split-page .hc-ncard-t{font-family:var(--hc-display);font-size:clamp(21px,1.6vw,24px);font-weight:700;line-height:1.12;text-transform:uppercase;color:var(--hc-fg-strong)}
/* The retired "Read article" line used to be the last child and had refinement spacing; the headline is last now. */
.hc-split-page .hc-ncard>span:last-child{margin-top:0;padding-top:0;min-height:0;display:block}

/* Contact: details in the opening; form and depots side by side; calm maps with captions above (Google's logo stays clear). */
.hc-open-phone{margin-top:clamp(26px,2.8vw,40px);font-family:var(--hc-display);font-size:clamp(40px,4vw,60px);font-weight:800;line-height:1;color:var(--hc-yellow);text-decoration:none}
.hc-open-email{margin-top:14px;font-size:clamp(18px,1.4vw,21px);font-weight:700;color:#fff;text-decoration:none}
.hc-open-phone:is(:hover,:focus-visible),.hc-open-email:is(:hover,:focus-visible){text-decoration:underline;text-underline-offset:5px}
.hc-open-note{margin:18px 0 0;padding-top:18px;max-width:36ch;border-top:1px solid rgba(255,255,255,.22);font-size:16px;line-height:1.55;color:#d4d4cf}
.hc-open-note a{color:#fff;font-weight:600}
.hc-ct-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:36px;align-items:stretch}
.hc-ct-col{display:flex;flex-direction:column;min-width:0}
/* The form/visit row sits close under the opening (no rules above the columns). */
.hc-open+.hc-pg-sec:has(.hc-ct-row){padding-top:clamp(40px,4vw,64px)}
.hc-split-page .hc-ct-h2{margin-bottom:24px;font-size:clamp(34px,3.2vw,48px)}
.hc-ct-col #hc-contact-form{flex:1}
.hc-ct-col .hc-form-preview{margin-top:2px;padding:0;border:0}
.hc-ct-dep{padding:20px 0;border-top:1px solid var(--hc-border)}
.hc-ct-dep:first-child{padding-top:0;border-top:0}
.hc-ct-dep h3{margin:0 0 10px;font-size:30px;line-height:1}
.hc-ct-dep address{font-style:normal;font-size:16px;line-height:1.55;color:var(--hc-fg)}
.hc-ct-dep a{display:inline-block;margin-top:10px;font-size:15px;font-weight:700;color:var(--hc-fg-strong)}
.hc-ct-maps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:36px;margin-top:clamp(40px,4vw,64px)}
.hc-ct-map{margin:0;min-width:0}
.hc-ct-map-frame{position:relative;aspect-ratio:16/9;border-radius:8px;overflow:hidden;background:#e8e8e2}
.hc-ct-map iframe{position:absolute;inset:0;width:100%;height:100%;border:0;filter:grayscale(1) contrast(1.05);transition:filter .3s ease}
.hc-ct-map:is(:hover,:focus-within) iframe{filter:none}
/* Click-to-load maps (28 Sep 2026): nothing is sent to Google until the visitor asks. */
.hc-map-load{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;width:100%;padding:16px;border:0;background:#e8e8e2;color:var(--hc-fg-strong);font:inherit;text-align:center;cursor:pointer;transition:background .2s ease}
.hc-map-load:is(:hover,:focus-visible){background:#deded6}
.hc-map-load:focus-visible{outline:3px solid #0a0a0a;outline-offset:-3px}
.hc-map-load-pin{width:28px;height:28px;color:#0a0a0a}
.hc-map-load-t{display:inline-flex;align-items:center;min-height:44px;padding:0 20px;border-radius:4px;background:var(--hc-yellow);font-family:var(--hc-display);font-size:17px;font-weight:800;letter-spacing:.04em;text-transform:uppercase}
.hc-map-load-n{font-size:14px;color:var(--hc-fg-muted)}
@media(max-width:760px){
 .hc-ct-row,.hc-ct-maps{grid-template-columns:minmax(0,1fr)}
 .hc-ct-row{row-gap:40px}
 .hc-ct-maps{row-gap:24px}
}
@media(prefers-reduced-motion:reduce){.hc-ct-map iframe{transition:none}}
/* Hover bar: overlap the card's bottom edge by a pixel and sit above the zooming photo, so no sliver of photo shows beneath it at fractional desktop scale. */
.hc-split-page .hc-ncard-img{isolation:isolate}
.hc-split-page .hc-ncard-img::after{z-index:1;bottom:-1px;height:5px}

/* Community & Charity: the charities and the Teletruk story side by side; the group's achievements (from Our Values)
   beside its photo; the local story beside the flood clean-up photo. Photos carry small captions below. */
.hc-cm-links{display:grid;gap:14px}
.hc-community-page .hc-charity-link{display:flex;align-items:center;gap:12px;font-family:'Barlow Condensed','Arial Narrow',system-ui,sans-serif;font-size:clamp(30px,2.8vw,40px);font-weight:800;line-height:1;text-transform:uppercase;color:var(--hc-fg-strong);text-decoration:none}
.hc-cm-dot{width:12px;height:12px;flex:none}
/* The display font has no ↗, so the arrow uses the body font, sized and raised to sit beside the capitals. */
.hc-cm-ne{margin-left:-2px;font-family:var(--hc-body);font-size:.5em;font-weight:700;line-height:1;align-self:flex-start;margin-top:.12em}
.hc-cm-copy{margin:0;font-size:clamp(16px,1.2vw,18px);line-height:1.65;color:var(--hc-fg);text-wrap:pretty}
.hc-cm-list{list-style:none;margin:6px 0 0;padding:0;border-top:1px solid var(--hc-border)}
.hc-cm-list li{position:relative;padding:12px 0 12px 20px;border-bottom:1px solid var(--hc-border);font-size:16px;line-height:1.5;color:var(--hc-fg);text-wrap:pretty}
.hc-cm-list li::before{content:"";position:absolute;left:0;top:calc(12px + .6em);width:7px;height:7px;background:var(--hc-yellow);outline:1px solid rgba(10,10,10,.25)}
.hc-community-page .hc-ab-intro{align-items:start}
.hc-community-page .hc-ab-intro-copy{justify-content:flex-start;gap:clamp(14px,1.4vw,20px)}
.hc-community-page .hc-ab-intro-copy .hc-pg-label{margin:0}
.hc-cm-photo{min-height:0;aspect-ratio:4/3;align-self:start}
.hc-cm-photo figcaption{position:absolute;left:14px;bottom:14px;display:inline-flex;padding:6px 12px;background:var(--hc-yellow);color:#0a0a0a;font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;border-radius:4px}
.hc-cm-more{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;margin-top:6px;padding-bottom:3px;border-bottom:2px solid var(--hc-yellow);font-size:14px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--hc-fg-strong);text-decoration:none}
.hc-cm-more:is(:hover,:focus-visible) .hc-arrow{transform:translateX(4px)}
@media(max-width:760px){
}
/* Community & Charity, refined: one reading flow in the right-hand column (introduction, the two charities, the story);
   the "What we've done" photo travels with the list to the end of its section; the flood photo runs wide under its row. */
.hc-cm-flow{display:grid;gap:clamp(18px,1.8vw,26px);min-width:0}
.hc-cm-done .hc-cm-photo{position:sticky;top:96px}
@media(max-width:760px){
 .hc-cm-done .hc-cm-photo{position:relative;top:auto}
}
/* "How do we help?" is a title block: heading at the top, the two charities at the foot, level with the end of the text. */
.hc-cm-help{align-items:stretch}
.hc-cm-help-head{display:flex;flex-direction:column;justify-content:space-between;gap:28px;min-width:0}
.hc-cm-charity-block .hc-pg-label{margin:0 0 12px}
/* "Local community" mirrors "What we've done", with the photo cut to exactly the text's height (never enlarged beyond it). */
.hc-community-page .hc-cm-local{align-items:stretch}
@media(min-width:761px){.hc-cm-local .hc-cm-photo{aspect-ratio:auto;min-height:240px;align-self:stretch;width:100%;max-width:560px;justify-self:end}.hc-cm-local .hc-ab-intro-copy{padding-block:0}}

/* what3words locations for the two depots (from the original site), under each address. */
.hc-w3w{margin:6px 0 0;font-size:14px;line-height:1.4;color:var(--hc-fg-muted)}
.hc-w3w a,.hc-ct-dep .hc-w3w a{display:inline;margin:0;font-size:inherit;font-weight:600;color:var(--hc-fg-strong);text-decoration:underline;text-decoration-color:var(--hc-border-strong);text-underline-offset:3px}
.hc-w3w a:hover{text-decoration-color:currentColor}

/* Trained Operators page, laid out to use the width: the intro and the two ways to hire share one row of three
   columns; below, the site photo sits beside the two facts (training, where we work), at the same height. */
.hc-ops-sec{padding-bottom:clamp(40px,4vw,64px)}
.hc-ops-top{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:36px;row-gap:36px;align-items:start}
.hc-ops-intro{grid-column:1/-1;max-width:780px;display:grid;gap:16px;align-content:start}
.hc-ops-way{padding-top:18px;border-top:4px solid var(--hc-yellow)}
.hc-ops-way h3{margin:6px 0 10px;font-size:clamp(26px,2.2vw,32px);line-height:1}
.hc-ops-way p:not(.hc-pg-label){margin:0;max-width:52ch;font-size:16.5px;line-height:1.65;color:var(--hc-fg)}
.hc-ops-way a{font-weight:600;color:var(--hc-fg-strong)}
.hc-ops-detail{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:clamp(36px,4vw,64px);row-gap:28px;align-items:stretch}
.hc-ops-photo{width:100%;margin:0;min-height:320px;overflow:hidden;border-radius:6px;background:#e8e8df}
.hc-ops-photo img{display:block;width:100%;height:100%;object-fit:cover}
.hc-ops-facts{display:grid;align-content:start;gap:0}
.hc-ops-fact{display:grid;gap:14px;justify-items:start;padding:28px 0}
.hc-ops-fact:first-child{padding-top:0}
.hc-ops-fact:last-child{padding-bottom:0}
.hc-ops-fact+.hc-ops-fact{border-top:1px solid var(--hc-border)}
.hc-ops-fact .hc-pg-h2{font-size:clamp(30px,2.8vw,42px)}
.hc-ops-fact p{margin:0;font-size:17px;line-height:1.65;color:var(--hc-fg);text-wrap:pretty}
.hc-ops-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));justify-self:stretch;gap:10px 36px;margin:4px 0 0;padding:0;list-style:none}
.hc-ops-list li{display:flex;align-items:baseline;gap:11px;font-size:16px;line-height:1.45;color:var(--hc-fg-strong);font-weight:600}
.hc-ops-list li::before{content:"";width:8px;height:8px;flex:none;transform:translateY(-1px);background:var(--hc-yellow);outline:1px solid rgba(10,10,10,.25)}
@media (max-width:1100px){.hc-ops-top{grid-template-columns:repeat(2,minmax(0,1fr))}.hc-ops-intro{grid-column:1/-1}.hc-ops-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){.hc-ops-top,.hc-ops-detail{grid-template-columns:minmax(0,1fr)}.hc-ops-photo{min-height:0;aspect-ratio:3/2}}
/* Photos beside text (28 Sep 2026): the photo's top edge sits on the heading's capitals and its bottom edge on the
   last line of text. The photo is cropped to fit (rounded corners kept). Stacked phone layouts are unchanged. */
@media (min-width:761px){
 .hc-ops-facts{align-content:start}
 .hc-ops-photo{position:relative;min-height:0}
 .hc-ops-photo img{position:absolute;inset:0}
 .hc-ab-intro-copy{justify-content:flex-start;padding-block:0}
 .hc-ab-intro-photo{min-height:0}
 .hc-ops-fact:first-child .hc-pg-h2,.hc-ab-intro-copy .hc-pg-h2{margin-top:-.23em}
 .hc-ops-fact:last-child p:last-child,.hc-ab-intro-copy .hc-pg-lead:last-child{margin-bottom:calc((1.2em - 1lh) / 2 - .2em)}
}
/* Vacancies (28 Sep 2026): text keeps its natural spacing; the photo is cropped from the top so it runs from the
   first line of text down to the bottom of the buttons. */
@media (min-width:981px){
 .hc-vacancy-grid{align-items:stretch!important}
 .hc-vac-copy>p:first-child{margin-top:calc((1.2em - 1lh) / 2 - .3em)!important}
 .hc-vacancy-grid>div:last-child{position:relative;min-height:0}
 .hc-vacancy-photo{position:absolute;inset:0;height:100%;aspect-ratio:auto!important;object-position:50% 100%!important}
}