/* ✅ MK Created 2026-10-22: service landing pages (/hire/<slug>, hire.php). BidHandyman rules: white + light cream,
   black main, orange accent, 46px controls, 6px control corners, 16px cards, flat, one orange main button. */
.hire-page {
  --h-orange: #ea6a16;
  --h-orange-d: #c8510c;
  --h-orange-soft: #fff1e7;
  --h-cream: #f6f5f1;
  --h-h: 46px;
  --h-r: 6px;
  --h-card: 16px;
}
.hire-page h1,
.hire-page h2 { font-weight: 900; letter-spacing: -.04em; }

/* hero: heading + buttons on the left, video on the right; phones: heading -> video -> buttons (MK 10-22) */
.hire-hero { padding: 40px 0 44px; background: var(--h-cream); border-bottom: 1px solid var(--line); }
.hire-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  grid-template-areas: "head media" "act media";
  column-gap: 40px;
  align-items: center;
}
.hire-hero-grid.no-video { grid-template-columns: minmax(0, 760px); grid-template-areas: "head" "act"; }
.hire-head { grid-area: head; align-self: end; }
.hire-media { grid-area: media; }
.hire-act { grid-area: act; align-self: start; }
.hire-reel { display: none; }
.hire-crumbs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; color: var(--muted); font-size: 14px; font-weight: 600; }
.hire-crumbs a { color: inherit; }
.hire-hero h1 { margin: 0; font-size: clamp(32px, 4.2vw, 50px); line-height: 1.04; }
.hire-sub { margin: 14px 0 0; max-width: 46ch; color: var(--ink-2, #4a4540); font-size: 18px; line-height: 1.5; }
.hire-ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.hire-ctas > a { height: var(--h-h); min-height: var(--h-h); padding: 0 20px; border-radius: var(--h-r); font-size: 15px; }
.hire-page .hire-post { background: var(--h-orange); border-color: var(--h-orange); color: #fff; font-weight: 800; }
.hire-page .hire-post:hover { background: var(--h-orange-d); border-color: var(--h-orange-d); transform: none; }
.hire-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 22px; max-width: 520px; }
.hire-choice {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 56px;
  padding: 0 14px 0 10px;
  border: 1px solid var(--h-orange);
  border-radius: var(--h-r);
  background: var(--h-orange);
  color: #fff;
  text-decoration: none;
  transition: background .15s ease, transform .1s ease;
}
.hire-choice:hover { background: var(--h-orange-d); }
.hire-choice:active { transform: scale(.98); }
.hire-choice > span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: var(--h-r); background: rgba(255, 255, 255, .2); }
.hire-choice b { flex: 1; font-size: 16px; font-weight: 800; }
.hire-choice .app-icon { width: 18px; height: 18px; }
.hire-trust { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 18px 0 0; padding: 0; list-style: none; color: var(--ink); font-size: 15px; font-weight: 700; }
.hire-trust li { display: inline-flex; align-items: center; gap: 6px; }
.hire-trust .app-icon { width: 18px; height: 18px; color: var(--h-orange); stroke-width: 2.6; }
.hire-video { overflow: hidden; border: 1px solid var(--line); border-radius: var(--h-card); background: #fff; aspect-ratio: 16 / 9; }
.hire-video video { display: block; width: 100%; height: 100%; background: #fff; object-fit: cover; }

/* sections */
.hire-section { padding: 44px 0; }
.hire-section.is-soft { background: var(--h-cream); }
.hire-section h2 { margin: 0 0 18px; font-size: clamp(26px, 3vw, 34px); line-height: 1.1; }
.hire-jobs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.hire-jobs li { display: flex; align-items: center; gap: 10px; min-height: var(--h-h); padding: 8px 12px; border: 1px solid var(--line-strong); border-radius: var(--h-r); background: #fff; font-size: 15px; font-weight: 700; line-height: 1.3; }
.hire-jobs .app-icon { width: 18px; height: 18px; flex: 0 0 auto; color: var(--h-orange); stroke-width: 2.6; }
/* a job that opens Post a job with its trade picked (all-services page) */
.hire-jobs li.is-link { padding: 0; }
.hire-jobs li.is-link a { display: flex; flex: 1; align-items: center; gap: 10px; min-height: var(--h-h); padding: 8px 12px; color: var(--ink); text-decoration: none; }
.hire-jobs li.is-link a span { flex: 1; }
.hire-jobs li.is-link a > .app-icon:last-child { color: #b1aca3; transition: translate .16s ease, color .16s ease; }
.hire-jobs li.is-link:hover { border-color: var(--ink); }
.hire-jobs li.is-link:hover a > .app-icon:last-child { color: var(--ink); translate: 3px 0; }
.hire-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.hire-steps li { display: flex; gap: 14px; padding: 18px; border: 1px solid var(--line); border-radius: var(--h-card); background: #fff; }
.hire-steps li > span { display: grid; place-items: center; width: 34px; height: 34px; flex: 0 0 auto; border-radius: 50%; background: var(--ink); color: #fff; font-weight: 800; }
.hire-steps b { display: block; font-size: 17px; font-weight: 800; }
.hire-steps p { margin: 4px 0 0; color: var(--muted); font-size: 15px; line-height: 1.45; }
.hire-faq-wrap > * { max-width: 820px; }
/* MK 10-24: on guide pages the Questions block lines up with the centered article column */
.hire-faq-wrap.is-guide > * { max-width: 760px; margin-inline: auto; }
.hire-faq { display: grid; gap: 8px; }
.hire-faq details { border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.hire-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: var(--h-h); padding: 10px 16px; font-size: 16px; font-weight: 800; cursor: pointer; list-style: none; }
.hire-faq summary::-webkit-details-marker { display: none; }
.hire-faq summary::after { content: "+"; color: var(--h-orange); font-size: 22px; font-weight: 700; line-height: 1; }
.hire-faq details[open] summary::after { content: "–"; }
.hire-faq details p { margin: 0; padding: 0 16px 14px; color: var(--ink-2, #4a4540); font-size: 15px; line-height: 1.55; }
.hire-band { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 24px; border-radius: var(--h-card); background: var(--ink); color: #fff; }
.hire-band b { font-size: 22px; font-weight: 900; letter-spacing: -.02em; }
.hire-band p { margin: 4px 0 0; color: rgba(255, 255, 255, .78); font-size: 15px; }
.hire-band .hire-post { flex: 0 0 auto; height: var(--h-h); min-height: var(--h-h); padding: 0 20px; border-radius: var(--h-r); }
.hire-guide { display: flex; align-items: center; gap: 12px; margin-top: 18px; padding: 14px 16px; border: 1px solid var(--line-strong); border-radius: 12px; background: #fff; color: var(--ink); text-decoration: none; }
.hire-guide span { flex: 0 0 auto; padding: 4px 10px; border-radius: 999px; background: var(--h-orange-soft); color: var(--h-orange-d); font-size: 13px; font-weight: 800; }
.hire-guide b { flex: 1; min-width: 0; font-size: 16px; font-weight: 800; }
.hire-guide .app-icon { width: 18px; height: 18px; color: var(--h-orange-d); }
.hire-guide:hover { border-color: var(--ink); }
.hire-related { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 18px; font-size: 14px; }
.hire-related > span { color: var(--muted); font-weight: 700; }
.hire-related a { display: inline-flex; align-items: center; height: 34px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: var(--h-r); background: #fff; color: var(--ink); font-weight: 700; text-decoration: none; }
.hire-related a:hover { border-color: var(--ink); }

/* longer text for search (all-services page): easy to read, one column */
/* ✅ MK 2026-10-22 ("how come you let this go live without proper spacing"): a real reading rhythm for every landing-page
   article - space above each heading, between paragraphs and lists, a comfortable line length */
.hire-article-body { max-width: 760px; margin: 0 auto; }
.hire-article-body > :first-child { margin-top: 0; }
.hire-article-body h2 { margin: 46px 0 14px; font-size: clamp(24px, 2.6vw, 30px); line-height: 1.18; letter-spacing: -.025em; }
.hire-article-body .hire-toc + h2 { margin-top: 6px; }
.hire-article-body h3 { margin: 28px 0 8px; font-size: 19px; font-weight: 800; letter-spacing: -.01em; }
.hire-article-body p { margin: 0 0 16px; color: var(--ink-2, #4a4540); font-size: 17px; line-height: 1.7; }
.hire-article-body ul, .hire-article-body > ol { margin: 0 0 20px; padding-left: 22px; color: var(--ink-2, #4a4540); font-size: 17px; line-height: 1.6; }
.hire-article-body li { margin: 7px 0; }
.hire-article-body li::marker { color: var(--h-orange, #ea6a16); }
.hire-article-body table { margin: 18px 0 24px; }
.hire-article-body .hire-tip { margin: 24px 0; }
.hire-article-body .hire-tip p:last-child { margin-bottom: 0; }
.hire-article-body a { color: var(--h-orange-d); font-weight: 700; text-underline-offset: 3px; }
@media (max-width: 640px) {
  .hire-article-body h2 { margin-top: 36px; font-size: 23px; }
  .hire-article-body { padding-inline: 6px; }
  .hire-article-body .hire-toc + h2 { margin-top: 4px; }
  .hire-article-body p, .hire-article-body ul, .hire-article-body > ol { font-size: 16px; line-height: 1.65; }
}
/* all 66 services in a short box that scrolls (MK: don't make the page too long) */
.hire-all-services { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 6px; max-height: 196px; margin: 4px 0 0; padding: 8px; overflow-y: auto; overscroll-behavior: contain; list-style: none; border: 1px solid var(--line); border-radius: 10px; background: var(--h-cream); scrollbar-width: thin; scrollbar-color: #c9c4b9 transparent; }
.hire-all-services a { display: inline-flex; align-items: center; height: 34px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: var(--h-r); background: #fff; color: var(--ink); font-size: 14px; font-weight: 600; text-decoration: none; }
.hire-all-services a:hover { border-color: var(--ink); }

/* phones */
@media (max-width: 760px) {
  .hire-hero { padding: 18px 0 24px; }
  .hire-hero-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "media" "act"; row-gap: 16px; }
  .hire-crumbs { margin-bottom: 8px; font-size: 13px; }

  /* the video plays like an app reel: edge to edge on a backdrop the same color as the video, tap to pause */
  .hire-video { display: none; }
  .hire-reel {
    position: relative;
    display: flex;
    justify-content: center;
    margin: 0 calc(50% - 50vw);
    overflow: hidden;
    background: #fcfbf9;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    -webkit-tap-highlight-color: transparent;
  }
  /* soft blurred copy of the video's own picture fills the sides, so the video blends in edge to edge */
  .hire-reel::before { content: ""; position: absolute; inset: -30px; background: var(--reel-bg) center / cover no-repeat; filter: blur(26px) saturate(1.15); opacity: .55; }
  .hire-reel video { position: relative; z-index: 1; }
  .hire-reel video {
    display: block;
    height: min(calc(100vw * 16 / 9), calc(100svh - 170px));
    width: auto;
    max-width: 100%;
    aspect-ratio: 9 / 16;
    object-fit: cover;
    background: #fcfbf9;
    cursor: pointer;
  }
  .hire-reel.is-wide video { width: 100%; height: auto; aspect-ratio: 16 / 9; }
  .hire-reel-play {
    position: absolute;
    top: 50%;
    left: 50%;
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(24, 21, 18, .72);
    color: #fff;
    transform: translate(-50%, -50%);
    pointer-events: none;
    transition: opacity .2s ease, transform .2s ease;
  }
  .hire-reel-play svg { width: 30px; height: 30px; margin-left: 4px; }
  .hire-reel.is-playing .hire-reel-play { opacity: 0; transform: translate(-50%, -50%) scale(.8); }
  /* ✅ MK 2026-10-23 ("play button doesnt show on mobile -- subtle, with ripple to make them play it"): while it previews
     silently, a see-through play button with a soft orange ripple stays in the middle until the first tap */
  .hire-reel.is-preview .hire-reel-play,
  .hire-reel.is-preview.is-playing .hire-reel-play { opacity: 1; transform: translate(-50%, -50%) scale(1); width: 60px; height: 60px; background: rgba(24, 21, 18, .5); }
  .hire-reel-play::before, .hire-reel-play::after { content: ""; position: absolute; inset: 0; border: 2px solid rgba(234, 106, 22, .85); border-radius: 50%; opacity: 0; }
  .hire-reel.is-preview .hire-reel-play::before { animation: bh-play-ripple 2.4s ease-out infinite; }
  .hire-reel.is-preview .hire-reel-play::after { animation: bh-play-ripple 2.4s ease-out 1.2s infinite; }
  /* sound button + progress line sit at the TOP: the phone's bottom menu bar covers the bottom */
  .hire-reel-sound {
    position: absolute;
    z-index: 2;
    right: 14px;
    top: 14px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    min-height: 34px;
    padding: 0 14px;
    border: 0;
    border-radius: 999px;
    background: rgba(24, 21, 18, .82);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
  }
  .hire-reel-sound svg { width: 18px; height: 18px; }
  /* a small round speaker button, like reels: it sits in the corner and covers nothing in the video */
  .hire-reel-sound { right: 8px; top: 12px; justify-content: center; width: 40px; height: 40px; min-height: 40px; padding: 0; }
  .hire-reel-sound span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .hire-reel-sound[aria-pressed="true"] { background: rgba(234, 106, 22, .92); }
  .hire-reel-bar { position: absolute; z-index: 2; left: 0; right: 0; top: 0; height: 3px; background: rgba(24, 21, 18, .08); }
  .hire-reel-play { z-index: 2; }
  .hire-reel-bar i { display: block; width: 0; height: 100%; background: var(--h-orange); }
  .hire-hero h1 { font-size: 31px; }
  .hire-sub { font-size: 16px; }
  .hire-ctas > a { flex: 1 1 100%; }
  .hire-choices { grid-template-columns: minmax(0, 1fr); }
  .hire-section { padding: 30px 0; }
  .hire-jobs { grid-template-columns: minmax(0, 1fr); }
  .hire-steps { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .hire-band { flex-direction: column; align-items: stretch; padding: 18px 16px; }
}
@media (min-width: 761px) and (max-width: 1100px) {
  .hire-jobs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ✅ MK 2026-10-24: the soft "Post your job free" card inside landing-page articles (same look as the guides' callout) */
.hire-article-body .hire-cta-card { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 30px 0; padding: 18px 20px; border: 1px solid #f8d4bb; border-radius: 16px; background: #fff7f1; }
.hire-article-body .hire-cta-card b { display: block; color: var(--ink, #181512); font-size: 18px; font-weight: 900; letter-spacing: -.02em; }
.hire-article-body .hire-cta-card p { margin: 2px 0 0; font-size: 15px; line-height: 1.45; }
.hire-article-body .hire-cta-card .primary-button { flex: 0 0 auto; white-space: nowrap; }
@media (max-width: 640px) { .hire-article-body .hire-cta-card { flex-direction: column; align-items: stretch; padding: 16px; } }

/* ✅ MK 2026-10-24 ("if user clicks the video from homepage make the video get centered under the title then goes back to
   normal when its done -- smooth"): theatre mode for the guide film opened from the homepage (?play=1), desktop only.
   assets/js/video-play.js lifts the film out, opens room under the title and glides it there; these are its pieces. */
.hire-hero.has-theatre { position: relative; }
.hire-hero .hire-media.is-staged { animation: none; }
.hire-theatre-slot { height: 0; }
.hire-video-ph { aspect-ratio: 16 / 9; visibility: hidden; }
.hire-video.is-theatre { position: absolute; z-index: 3; margin: 0; transform-origin: 0 0; }
.hire-video.is-gliding { transition: transform .6s cubic-bezier(.2, .8, .2, 1); will-change: transform; }
/* MK 10-24 ("the center video must also center the headline and the buttons etc and text of that section"): while the film
   is big the whole hero is one centered column (path, title, film, text, buttons, trust line). The text fades out, the layout
   switches, the film and the hero's height glide, then the text fades back in; the same in reverse when it goes back. */
.hire-hero.is-centered .hire-hero-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "act"; }
.hire-hero.is-centered .hire-media { grid-area: 1 / 1; align-self: start; }
.hire-hero.is-centered .hire-video-ph { display: none; }
.hire-hero.is-centered .hire-head,
.hire-hero.is-centered .hire-act { align-self: start; text-align: center; }
.hire-hero.is-centered .hire-crumbs { justify-content: center; }
.hire-hero.is-centered .hire-head h1 { max-width: 940px; margin-inline: auto; text-wrap: balance; }
.hire-hero.is-centered .hire-sub { max-width: 680px; margin-inline: auto; text-wrap: balance; }
.hire-hero.is-centered .hire-ctas,
.hire-hero.is-centered .hire-trust { justify-content: center; }
.hire-hero.is-centered .hire-choices { margin-inline: auto; }
.hire-hero.has-theatre .hire-head,
.hire-hero.has-theatre .hire-act { transition: opacity .16s ease; }
.hire-hero.is-hushed .hire-head,
.hire-hero.is-hushed .hire-act { opacity: 0; }
.hire-hero.is-revealing .hire-head,
.hire-hero.is-revealing .hire-act { transition: opacity .28s ease .3s; }
.hire-hero.is-revealing.is-centered .hire-head { transition-delay: .2s; }   /* going in, the title comes back a bit sooner */
.hire-hero.is-sizing { transition: height .6s cubic-bezier(.2, .8, .2, 1); }
@media (prefers-reduced-motion: reduce) {
  .hire-video.is-gliding, .hire-hero.is-sizing,
  .hire-hero.has-theatre .hire-head, .hire-hero.has-theatre .hire-act { transition: none; }
}
.hire-theatre-back {
  position: absolute;
  z-index: 3;
  top: 12px;
  right: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  min-height: 34px;
  padding: 0 14px 0 11px;
  border: 1px solid rgba(255, 255, 255, .4);
  border-radius: 999px;
  background: rgba(24, 21, 18, .55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  opacity: 0;
  transition: opacity .2s ease, background .15s ease, transform .1s ease;
}
.hire-theatre-back svg { width: 15px; height: 15px; }
.hire-theatre-back:hover { background: rgba(24, 21, 18, .75); }
.hire-theatre-back:active { transform: scale(.98); }
/* shows when the mouse is on the film or it is paused (like the player's own controls); hidden while it glides */
.hire-video.is-theatre:hover .hire-theatre-back,
.hire-video.is-theatre:not(.is-playing) .hire-theatre-back,
.hire-video.is-theatre .hire-theatre-back:focus-visible { opacity: 1; }
.hire-video.is-theatre.is-gliding .hire-theatre-back { opacity: 0; pointer-events: none; }
@media (max-width: 1099px), (prefers-reduced-motion: reduce) { .hire-theatre-back { display: none; } }