/* ═══════════════════════════════════════════════════════════
   home.css — the homepage splash. Extends site.css.

   site.css already IS mockup4 (tokens, buttons, header, footer,
   the navy band, the logo strip), extracted when long-form was
   templatised. What this file restores is the part long-form
   necessarily flattened: mockup4's splash PROPORTIONS — the
   taller chrome, the display-scale h1, the bordered service
   grid, the sticky process rail — none of which suit a page
   that has to work fifty times over.

   The lightbox and the inline play control are long-form's and
   are duplicated here rather than moved to site.css: they belong
   to the two designs that carry a Vimeo embed, not to every page.
   ═══════════════════════════════════════════════════════════ */

/* ─── Chrome ────────────────────────────────────────────────
   mockup4's header, not the compact variant every other page
   wears. This sheet only ever loads on the homepage. */
.hdr__in{height:96px}
.hdr__logo img{height:50px}
html{scroll-padding-top:120px}
@media (max-width:1000px){
  .hdr__in{height:80px}
  .hdr__logo img{height:42px}
}

/* ─── Hero ────────────────────────────────────────────────── */
.hm-hero{
  background:var(--ink);color:#fff;position:relative;overflow:hidden;
  padding-top:clamp(48px,6vw,84px);
}
/* One quiet atmospheric wash behind the figures — mockup4's device, and the
   reason the cutout does not need a frame to sit against. */
.hm-hero::after{
  content:"";position:absolute;inset:auto -12% -55% 38%;height:76%;
  background:radial-gradient(closest-side,rgba(14,74,112,.62),transparent 72%);
  pointer-events:none;
}
.hm-hero__in{position:relative;z-index:1}
.hm-hero__grid{
  display:grid;grid-template-columns:minmax(0,1.14fr) minmax(0,.86fr);
  gap:clamp(28px,5vw,64px);align-items:end;
}
/* The text column carries the section's bottom padding so the cutout can reach
   the fold; see .hm-hero__cut. */
.hm-hero__txt{padding-bottom:clamp(56px,7vw,96px)}
/* Sized so the heading breaks at its own full stop — "Commercial Cleaning." /
   "ISO Compliant" — rather than mid-sentence after "Commercial". */
.hm-hero h1{
  font-size:clamp(2.3rem,4.9vw,3.7rem);letter-spacing:-.042em;line-height:1;
  max-width:21ch;
}
.hm-hero .lede{
  margin-top:26px;font-size:clamp(1.0625rem,1.5vw,1.25rem);max-width:54ch;
}
.hm-hero .acts{margin-top:36px}
/* ⚠ Sized by legibility, not by layout. iso-logos.webp is a 440×173 composite of
   both British Assessment Bureau marks, and its wording is WHITE on transparency —
   so it belongs on the ink unaltered, and the only question is scale. Long-form set
   it 38px tall, at which the certification it names cannot be read at all; it
   becomes legible at about 220px wide (measured, not guessed). No plate, no filter:
   a certification mark is not ours to restyle. */
.hm-hero__badges{margin-bottom:30px}
.hm-hero__badges img{width:230px;height:auto}

/* The hero photograph is a cutout on transparency (975×912, RGBA), so it stands
   on the ink rather than sitting in a frame — long-form's .fig gives it a lighter
   box that reads as a mistake at this scale. Its feet land on the boundary the
   clients strip draws, which is what stops it floating. */
.hm-hero__cut{position:relative;align-self:end}
.hm-hero__cut::before{
  content:"";position:absolute;left:8%;right:8%;bottom:0;height:34%;z-index:0;
  background:radial-gradient(ellipse at 50% 100%,rgba(217,171,54,.16),transparent 70%);
  pointer-events:none;
}
.hm-hero__cut img{
  position:relative;z-index:1;
  width:100%;max-width:505px;margin-left:auto;display:block;
}

/* ─── About: lede, bold-labelled pillars, checklist ───────── */
.hm-about{
  display:grid;grid-template-columns:minmax(0,1.14fr) minmax(0,.86fr);
  gap:clamp(32px,6vw,80px);align-items:start;
}
.hm-about h2{max-width:20ch}
.hm-about__lede{margin-top:24px}
.hm-about .acts{margin-top:32px}

.hm-pillars{margin-top:clamp(28px,3.5vw,40px);border-top:1px solid var(--line)}
.hm-pillar{padding:22px 0;border-bottom:1px solid var(--line)}
/* The label is a <p> holding a <strong>, exactly as the source has it — the
   design gives it a heading's voice without giving it a heading's tag. */
.hm-pillar__t{
  font-weight:700;letter-spacing:-.02em;color:var(--ink);
  font-size:1.0625rem;line-height:1.3;margin-bottom:7px;
}
.hm-pillar__t strong{font-weight:inherit}
.hm-pillar p:not(.hm-pillar__t){font-size:.9375rem;color:var(--slate);line-height:1.6}

/* The checklist on a light ground — long-form only ever set it on ink. */
.checks--light{border-top-color:var(--line)}
.checks--light li{border-bottom-color:var(--line);color:var(--body)}

/* ─── Services grid ───────────────────────────────────────── */
.hm-svcs-sect{background:var(--paper)}
.hm-svcs{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line);
}
.hm-svc{background:#fff;display:flex;flex-direction:column;transition:background .2s ease}
.hm-svc:hover{background:#FAFBFC}
/* See .tile__link — the anchor takes over the column flex so __body keeps flex:1. */
.hm-svc__link{display:flex;flex-direction:column;flex:1;color:inherit;text-decoration:none}
.hm-svc__pic{aspect-ratio:16/10;overflow:hidden;background:var(--paper)}
.hm-svc__pic img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .5s cubic-bezier(.22,.61,.36,1);
}
.hm-svc:hover .hm-svc__pic img{transform:scale(1.035)}
.hm-svc__body{padding:clamp(20px,2.2vw,28px);display:flex;flex-direction:column;flex:1}
.hm-svc__n{font-family:var(--mono);font-size:.6875rem;letter-spacing:.14em;color:var(--slate)}
.hm-svc__body p{
  margin-top:12px;font-size:1.25rem;font-weight:700;
  letter-spacing:-.025em;line-height:1.15;color:var(--ink);
}
.hm-svc__rule{
  height:2px;width:26px;background:var(--brass);
  margin-top:20px;transition:width .24s ease;
}
.hm-svc:hover .hm-svc__rule{width:64px}
.hm-svcs-sect h2+.hm-svcs{margin-top:clamp(28px,3.5vw,40px)}

/* ─── Testimonials ────────────────────────────────────────── */
.quotes{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:1px;background:var(--line-dk);border:1px solid var(--line-dk);
}
.quote{background:var(--ink);padding:clamp(26px,3vw,38px) clamp(22px,2.6vw,32px)}
.quote blockquote{font-size:1.0625rem;line-height:1.58;color:#fff;letter-spacing:-.015em}
.quote blockquote::before{
  content:"";display:block;width:20px;height:2px;background:var(--brass);margin-bottom:20px;
}
.quote figcaption{
  margin-top:22px;font-family:var(--mono);font-size:.75rem;
  letter-spacing:.06em;color:#7E97A8;line-height:1.6;
}
.quote figcaption b{
  display:block;font-weight:500;color:#D7E3EB;letter-spacing:.1em;
  text-transform:uppercase;font-size:.6875rem;margin-bottom:4px;
}

/* ─── The navy band, at splash scale ──────────────────────── */
.band h2{font-size:clamp(1.7rem,3.2vw,2.6rem)}

/* ─── Heading / copy split ────────────────────────────────── */
.hm-split{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(28px,5.5vw,76px);align-items:start;
}
.hm-split h2{max-width:16ch}
.hm-split .acts{margin-top:30px}

/* ─── Process ledgers ─────────────────────────────────────── */
.hm-proc{
  display:grid;grid-template-columns:minmax(0,.84fr) minmax(0,1.5fr);
  gap:clamp(32px,6vw,78px);align-items:start;
}
.hm-proc__rail{position:sticky;top:120px}
.hm-proc__rail .copy{margin-top:22px;font-size:1rem}
.hm-proc__rail .acts{margin-top:28px}
/* Both approach photographs are cutouts fading to transparency, so they read on
   whichever ground the section sets and need no frame of their own. */
.hm-proc__pic{margin-top:clamp(30px,4vw,44px)}
.hm-proc__pic img{width:100%;max-width:340px}

.hm-steps{border-top:1px solid var(--line)}
.hm-step{
  display:grid;grid-template-columns:52px minmax(0,1fr);gap:14px;
  padding:22px 0;border-bottom:1px solid var(--line);
}
.hm-step__n{
  font-family:var(--mono);font-size:.8125rem;font-weight:500;
  color:var(--brass);padding-top:3px;
}
.hm-step h3{margin-bottom:6px;color:var(--ink);font-size:1.0625rem}
.hm-step p{font-size:.9375rem;color:var(--slate);line-height:1.6}

/* The reasons-to-choose ledger runs on ink, and it LEADS: its items sit above its
   own heading live. So the columns mirror — ledger wide on the left, rail on the
   right — and the markup order is the source's, not a CSS re-ordering of it. */
.hm-proc--flip{grid-template-columns:minmax(0,1.5fr) minmax(0,.84fr)}
.hm-proc--flip .hm-steps{border-top-color:var(--line-dk)}
.hm-proc--flip .hm-step{border-bottom-color:var(--line-dk)}
.hm-proc--flip .hm-step h3{color:#fff}
.hm-proc--flip .hm-step p,.hm-proc--flip .hm-proc__rail .copy{color:#A8BDCC}

/* ─── Wellbeing benefits ──────────────────────────────────── */
.hm-bens{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line);
  margin-top:clamp(28px,3.5vw,40px);
}
.hm-ben{background:#fff;padding:clamp(20px,2.2vw,28px)}
.hm-ben__n{
  font-family:var(--mono);font-size:.6875rem;letter-spacing:.14em;
  color:var(--brass);display:block;
}
.hm-ben__ic{display:block;width:30px;height:30px;margin-top:18px}
.hm-ben h3{
  margin-top:14px;font-size:1rem;font-weight:600;color:var(--ink);
  letter-spacing:-.02em;line-height:1.3;
}

/* ─── Contact ─────────────────────────────────────────────── */
.hm-contact__card{
  background:#fff;border-radius:4px;padding:clamp(26px,3.4vw,44px);
  margin-top:clamp(28px,3.5vw,40px);
}
.hm-contact__card .fm{max-width:none}

/* ─── Vimeo lightbox — shared with long-form ──────────────── */
.playbtn--inline{gap:9px}
.playbtn--inline svg{flex:none}
.lightbox{border:0;padding:0;background:transparent;max-width:min(92vw,1020px);width:100%}
.lightbox::backdrop{background:rgba(7,17,26,.88)}
.lightbox__frame{aspect-ratio:16/9;width:100%;background:#000;border-radius:4px;overflow:hidden}
.lightbox iframe{width:100%;height:100%;border:0;display:block}
.lightbox__close{
  margin:0 0 10px auto;display:flex;align-items:center;gap:8px;
  background:none;border:0;color:#fff;cursor:pointer;
  font-family:var(--mono);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;
}
.lightbox__close:hover{color:var(--brass)}

/* ─── Responsive ──────────────────────────────────────────── */
@media (max-width:1000px){
  .hm-hero__grid,.hm-about,.hm-split,.hm-proc{grid-template-columns:1fr}
  .hm-hero__txt{padding-bottom:clamp(34px,5vw,48px)}
  .hm-hero__cut img{margin-inline:auto}
  .hm-proc__rail{position:static}
  .hm-proc--flip{grid-template-columns:1fr}
  .hm-svcs,.hm-bens{grid-template-columns:1fr 1fr}
}
@media (max-width:620px){
  .hm-svcs,.hm-bens{grid-template-columns:1fr}
  .hm-hero .acts .btn{flex:1 1 100%;justify-content:center}
  .hm-step{grid-template-columns:1fr;gap:8px}
  .hm-step__n{padding-top:0}
}