/* ═══════════════════════════════════════════════════════════
   home.css — the homepage splash. Extends site.css.
   From mockups/home-alts/modern.html (Oct 2026): the h1 at
   display scale, the cutout on a navy panel rising beside it,
   then quiet, wide sections.

   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.
   ═══════════════════════════════════════════════════════════ */

/* ─── Hero ────────────────────────────────────────────────── */
.hm-hero{position:relative;overflow:hidden;padding-top:clamp(48px,7vw,104px)}
.hm-hero__h1{position:relative;z-index:1;font-size:clamp(2.6rem,6.9vw,6.6rem);letter-spacing:-.055em;line-height:.88;max-width:none}
.hm-hero__h1 span{display:block}
.hm-hero__l2{color:var(--navy);padding-left:.03em}

.hm-hero__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,4vw,64px);
  margin-top:clamp(28px,3vw,44px)}
.hm-hero__txt{display:flex;flex-direction:column;align-items:flex-start;
  padding:clamp(8px,1vw,16px) 0 clamp(40px,5vw,64px)}
.hm-hero .lede{color:var(--body);max-width:44ch}
.hm-hero .acts{margin-top:32px}
/* The certification plate (see home.html): BAB's lockup, a hairline, the line. */
.hm-hero__badges{margin-top:auto;padding-top:36px}
.hm-cert{display:inline-flex;align-items:center;gap:18px;padding:14px 24px 14px 18px;border-radius:var(--r-md);
  background:var(--ink);font-size:1.0625rem;font-weight:600;line-height:1.25;color:#fff;text-align:left}
.hm-cert img{width:auto;height:46px}
.hm-cert span{padding-left:18px;border-left:1px solid rgba(255,255,255,.28);max-width:9.5em}

/* The stage: a navy panel, the cutout (975×912, RGBA) standing on it and rising
   above its top edge into the space beside the headline's second line. */
.hm-hero__stage{position:relative;align-self:stretch;min-height:clamp(380px,40vw,560px);
  margin-top:calc(-1 * clamp(40px,5vw,90px))}
.hm-hero__slab{position:absolute;inset:auto 0 0 0;height:72%;border-radius:var(--r-xl) var(--r-xl) 0 0;
  background:
    radial-gradient(120% 90% at 85% 0%,rgba(255,255,255,.16),transparent 55%),
    linear-gradient(160deg,var(--navy),#0A3552 70%,var(--ink))}
.hm-hero__cut{position:absolute;z-index:2;bottom:0;left:50%;width:min(100%,560px);transform:translateX(-44%);
  filter:drop-shadow(0 30px 40px rgba(11,30,45,.35))}
.hm-chip{position:absolute;z-index:3;padding:12px 18px;border-radius:var(--pill);font-size:.9375rem;font-weight:600;color:#fff;
  background:rgba(255,255,255,.12);box-shadow:inset 0 0 0 1px rgba(255,255,255,.28);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.hm-chip::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--brass);margin-right:10px;vertical-align:1px}
.hm-chip{white-space:nowrap}
/* The typewriter's caret (site.js adds it): blinks while a chip holds, solid while it types. */
.hm-chip__caret{display:inline-block;width:2px;height:1.05em;margin-left:3px;vertical-align:-.18em;
  background:#fff;animation:hm-blink 1.06s steps(1) infinite}
.hm-chip.is-typing .hm-chip__caret{animation:none}
/* Between strings a chip fades out, then fades back in empty to be typed into.
   The fade-out's .35s is FADE_OUT in site.js: change the two together. */
.hm-chip.is-out{animation:hm-chip-out .35s var(--ease) both;transform-origin:left center}
.hm-chip.is-gone{animation:none;opacity:0}
.hm-chip.is-in{animation:hm-chip-in .7s var(--ease) both;transform-origin:left center}
@keyframes hm-chip-out{to{opacity:0;transform:scale(.92)}}
@keyframes hm-chip-in{from{opacity:0;transform:scale(.92)}}
@keyframes hm-blink{50%{opacity:0}}
.hm-chip--a{left:4%;bottom:44%}
.hm-chip--b{right:4%;bottom:12%}

/* The single orchestrated entrance. Reduced motion is handled site-wide. */
.hm-hero__l1,.hm-hero__l2,.hm-hero__txt,.hm-hero__slab,.hm-hero__cut,.hm-chip{animation:hm-rise .9s var(--ease) both}
.hm-hero__l2{animation-delay:.08s}
.hm-hero__txt{animation-delay:.22s}
.hm-hero__slab{animation-name:hm-slab;animation-duration:1s;animation-delay:.1s}
.hm-hero__cut{animation-name:hm-cut;animation-duration:1.1s;animation-delay:.28s}
.hm-chip--a{animation-delay:.7s}
.hm-chip--b{animation-delay:.8s}
@keyframes hm-rise{from{opacity:0;transform:translateY(28px)}}
@keyframes hm-slab{from{opacity:0;transform:scaleY(.6);transform-origin:bottom}}
@keyframes hm-cut{from{opacity:0;transform:translate(-44%,60px)}}

/* ─── First screen: hero + client strip ──────────────────────
   On a laptop or desktop the hero and the logo strip together fill the first
   screen exactly, the logos centred in the strip. The hero takes whatever height
   the strip and the bar leave, and its vertical sizes scale with the viewport
   height so a short laptop screen still fits it. Phones and tablets keep the
   content-sized hero. */
@media (min-width:901px) and (min-height:560px){
  /* On :root, not .hm-hero: the strip is the hero's sibling and needs it too. */
  :root{--strip:clamp(76px,13svh,128px)}
  .hm-hero{
    display:flex;flex-direction:column;
    min-height:calc(100svh - var(--hdr-h) - var(--strip));
    padding-top:clamp(24px,min(7vw,6svh),104px);
  }
  .hm-hero>.wrap{flex:1;display:flex;flex-direction:column;width:100%}
  .hm-hero__grid{flex:1;margin-top:clamp(16px,min(3vw,3svh),44px)}
  .hm-hero__h1{font-size:clamp(2.6rem,min(6.9vw,10svh),6.6rem)}
  .hm-hero .acts{margin-top:clamp(16px,2.6svh,32px)}
  .hm-hero__badges{padding-top:clamp(16px,3svh,36px)}
  .hm-cert img{height:clamp(34px,5.5svh,46px)}
  .hm-hero__txt{padding-bottom:clamp(14px,3svh,64px)}
  .hm-hero__stage{min-height:clamp(300px,min(40vw,46svh),560px)}
  /* The cutout scales with the screen's height too, or on a short laptop the heads
     reach the bar: 975×912 artwork, so its height is ~0.94 of this width. */
  .hm-hero__cut{width:min(100%,560px,58svh)}
  .hm-hero__stage{margin-top:calc(-1 * clamp(24px,min(5vw,6svh),90px))}
  .hm-hero+.logos-band{height:var(--strip);padding-block:0;display:flex;align-items:center}
  .hm-hero+.logos-band>.wrap{width:100%}
  /* The strip no longer pads itself, so the section after it takes the gap. */
  .sect.logos-band+.sect.hm-about-sect:not(.sect--dark):not(.sect--panel){padding-top:var(--pad-sm)}
}

/* ─── About ───────────────────────────────────────────────── */
.hm-about{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(40px,6vw,96px);align-items:start}
.hm-about__lede{margin-top:28px;font-size:clamp(1.08rem,1.4vw,1.3rem);line-height:1.55;color:var(--slate);max-width:62ch}
.hm-about .acts{margin-top:32px}
.hm-pillar{padding:24px 0;border-top:1px solid var(--line)}
.hm-pillar:last-child{border-bottom:1px solid var(--line)}
/* The label is a <p> holding a <strong>, exactly as the source has it. */
.hm-pillar__t{font-size:1.1875rem;font-weight:700;letter-spacing:-.015em;color:var(--ink);margin-bottom:8px}
.hm-pillar__t strong{font-weight:inherit}
.hm-pillar p:not(.hm-pillar__t){font-size:.9688rem;color:var(--slate)}

.hm-checks{display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(48px,6vw,80px)}
.hm-checks li{display:flex;align-items:center;gap:10px;padding:11px 18px 11px 12px;border-radius:var(--pill);
  background:var(--paper);font-size:.9375rem;font-weight:550;color:var(--ink)}
.hm-checks li::before{content:"";flex:none;width:22px;height:22px;border-radius:50%;
  background:var(--navy) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 10.4l2.6 2.6L14 7.6' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat}

/* ─── Services ────────────────────────────────────────────── */
.hm-svcs-sect{padding-top:0}
.hm-svcs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.4vw,20px)}
.hm-svcs-sect h2+.hm-svcs{margin-top:clamp(28px,3.5vw,40px)}
.hm-svc{position:relative;aspect-ratio:5/4;border-radius:var(--r-md);overflow:hidden;background:var(--paper)}
.hm-svc__link{display:block;height:100%;text-decoration:none;color:inherit}
.hm-svc img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.hm-svc:hover img{transform:scale(1.05)}
.hm-svc p{position:absolute;left:14px;bottom:14px;padding:10px 18px;border-radius:var(--pill);
  background:rgba(255,255,255,.9);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  font-size:1rem;font-weight:650;color:var(--ink);letter-spacing:-.012em}

/* ─── Testimonials ────────────────────────────────────────── */
.hm-quotes{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(16px,2vw,24px)}
.hm-q{display:flex;flex-direction:column;justify-content:space-between;gap:28px;padding:clamp(24px,3vw,40px);
  border-radius:var(--r-md);background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.hm-q blockquote{font-size:1.125rem;line-height:1.5;color:rgba(255,255,255,.9)}
.hm-q--lead{grid-row:1 / span 2;background:none;box-shadow:none;padding-left:0}
.hm-q--lead blockquote{font-size:clamp(1.6rem,2.9vw,2.6rem);line-height:1.18;font-weight:600;letter-spacing:-.025em;color:#fff;text-wrap:pretty}
.hm-q figcaption{display:flex;align-items:center;gap:14px;font-size:.9375rem;color:var(--on-ink);line-height:1.45}
.hm-q figcaption b{display:block;color:#fff;font-weight:650}
/* The client marks are dark artwork on alpha; each gets a white plate, in colour. */
.hm-q__mark{flex:none;width:64px;height:64px;object-fit:contain;background:#fff;border-radius:16px;padding:6px}

/* ─── The brass band ──────────────────────────────────────── */
.hm-band{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,4vw,64px);align-items:end}
.hm-band h2{font-size:clamp(1.7rem,3.2vw,2.8rem)}
.hm-band .copy{margin-top:0}

/* ─── Heading / statement split ───────────────────────────── */
.hm-split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,6vw,96px);align-items:start}
.hm-split .copy{font-size:clamp(1.2rem,1.9vw,1.6rem);line-height:1.45;color:var(--ink);letter-spacing:-.01em;max-width:none}
.hm-split .acts{margin-top:32px}

/* ─── Process and reasons ─────────────────────────────────── */
.hm-proc-sect{background:var(--paper);margin:var(--inset);border-radius:var(--r-xl)}
.hm-proc{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(40px,6vw,96px);align-items:start}
.hm-proc__rail{position:sticky;top:var(--stick)}
.hm-proc__rail .copy{margin-top:22px;color:var(--slate)}
.hm-proc__rail .acts{margin-top:30px}
/* Both photographs are cutouts fading to transparency; the crop rounds them off. */
.hm-proc__pic{margin-top:clamp(28px,3.5vw,40px);border-radius:var(--r-lg);overflow:hidden;background:#fff}
.hm-proc__pic img{width:100%;aspect-ratio:4/3;object-fit:cover}

.hm-steps li{display:grid;grid-template-columns:72px minmax(0,1fr);column-gap:20px;padding:28px 0;border-top:1px solid var(--line)}
.hm-steps li:last-child{border-bottom:1px solid var(--line)}
.hm-steps__n{font-size:3.4rem;font-weight:800;line-height:.9;letter-spacing:-.05em;color:var(--navy)}
.hm-steps h3,.hm-reasons h3{font-size:1.3rem;letter-spacing:-.018em;line-height:1.22;margin-bottom:8px}
.hm-steps p,.hm-reasons p{color:var(--slate)}

/* The reasons lead with the ledger, so the columns mirror: ledger wide on the left. */
.hm-proc--flip{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.hm-reasons{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,3vw,44px) clamp(24px,3vw,40px)}
.hm-reasons li{padding-top:22px;border-top:2px solid var(--ink)}
.hm-reasons p{font-size:.9688rem}
.hm-proc--flip .hm-proc__pic img{aspect-ratio:1/1;object-position:60% 70%}

/* ─── Wellbeing ───────────────────────────────────────────── */
.hm-well{background:var(--navy);color:#fff;margin:var(--inset);border-radius:var(--r-xl)}
.hm-well h2{color:#fff;max-width:18ch}
.hm-bens{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:clamp(40px,5vw,72px);border-top:1px solid rgba(255,255,255,.2)}
.hm-ben{padding:clamp(22px,2.6vw,36px) 24px clamp(22px,2.6vw,36px) 0;border-bottom:1px solid rgba(255,255,255,.2)}
.hm-ben__ic{width:44px;height:44px;padding:8px;border-radius:12px;background:#fff}
.hm-ben h3{margin-top:18px;color:#fff;font-size:clamp(1.25rem,2.2vw,1.9rem);font-weight:650;letter-spacing:-.025em;line-height:1.15}

/* ─── Contact ─────────────────────────────────────────────── */
.hm-contact__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(40px,6vw,96px);align-items:start}
.hm-contact__card{background:var(--paper);border-radius:var(--r-xl);padding:clamp(20px,3vw,40px)}
.hm-contact__card .fm{max-width:none}

/* ─── Vimeo lightbox — shared with long-form ──────────────── */
.playbtn--inline{gap:10px}
.playbtn--inline svg{flex:none}
.lightbox{border:0;padding:0;background:transparent;max-width:min(92vw,1100px);width:100%}
.lightbox::backdrop{background:rgba(11,30,45,.84);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.lightbox__frame{aspect-ratio:16/9;width:100%;background:#000;border-radius:var(--r-md);overflow:hidden}
.lightbox iframe{width:100%;height:100%;border:0;display:block}
.lightbox__close{
  margin:0 0 12px auto;display:flex;align-items:center;gap:8px;
  border:0;border-radius:var(--pill);padding:10px 16px;background:#fff;color:var(--ink);
  cursor:pointer;font-size:.875rem;font-weight:600;
}
.lightbox__close:hover{background:var(--brass)}

/* ─── Responsive ──────────────────────────────────────────── */
@media (max-width:900px){
  .hm-hero__grid,.hm-about,.hm-split,.hm-proc,.hm-proc--flip,.hm-quotes,.hm-band,.hm-contact__grid{grid-template-columns:1fr}
  /* Phone and tablet hero: the cleaners on their panel, then the headline, then
     the copy and buttons, then the ISO marks — proof beside the client strip
     that follows. Source order is unchanged (h1, copy, buttons, marks, photo);
     the grid and the text column both dissolve into the wrap's flow
     (display:contents) and the stage and h1 are lifted to the top, so headings,
     copy and tab order are untouched. */
  .hm-hero{padding-top:clamp(16px,4vw,32px);padding-bottom:clamp(36px,8vw,56px)}
  .hm-hero>.wrap{display:flex;flex-direction:column}
  .hm-hero__grid,.hm-hero__txt{display:contents}
  .hm-hero__h1{order:-1;margin-top:clamp(24px,6vw,36px)}
  .hm-hero__stage{order:-2;margin-top:0;
    /* Just the cutout's own height (92% of the stage, 975×912), so the heads
       start at the top of the hero rather than under a band of empty paper. */
    min-height:min(80vw,470px);
    /* The panel is no longer the hero's floor, so it rounds at the bottom too, and
       the cutout is clipped to it there; above the panel the heads stay free. */
    clip-path:inset(-60% 0 0 0 round 0 0 var(--r-xl) var(--r-xl))}
  .hm-hero__slab{border-radius:var(--r-xl)}
  .hm-hero__cut{width:min(92%,500px);transform:translateX(-50%)}
  @keyframes hm-cut{from{opacity:0;transform:translate(-50%,60px)}}
  .hm-hero .lede{margin-top:clamp(24px,6vw,36px)}
  .hm-hero .acts{margin-top:24px;width:100%}
  .hm-hero .acts .btn{flex:1 1 0}
  .hm-hero__badges{margin-top:24px;padding-top:0}
  .hm-q--lead{grid-row:auto;padding:0 0 12px}
  .hm-proc__rail{position:static}
  .hm-svcs,.hm-bens{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
  .hm-hero__badges{text-align:center}
  .hm-cert{gap:14px;padding:10px 18px 10px 14px;font-size:.9375rem}
  .hm-cert img{height:34px}
  .hm-cert span{padding-left:14px}
  .hm-chip{font-size:.8125rem;padding:9px 14px}
  .hm-chip--a{bottom:52%}
  .hm-svcs,.hm-bens,.hm-reasons{grid-template-columns:1fr}
  .hm-steps li{grid-template-columns:52px 1fr}
  .hm-steps__n{font-size:2.6rem}
}