/* Homepage: bold brand, an immediate emergency route, and real project work. */
.hero { background: var(--ink); position: relative; overflow: hidden; }
.hero > .container { position: relative; z-index: 1; }
.hero__inner { display: grid; grid-template-columns: minmax(0, 620px); padding-block: var(--space-2xl); }
.hero__copy { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.hero__logo { width: 400px; max-width: 100%; height: auto; align-self: flex-start; }
.hero h1 { font-size: clamp(28px, 3vw, 42px); line-height: 1.15; text-wrap: balance; }
.hero h1 span { color: var(--green-pale); }
.hero__lede { font-size: var(--font-size-lg); line-height: 1.65; max-width: 510px; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero .hero__reassurance { color: var(--on-ink-body); font-size: 14px; }
/* Full-bleed behind the hero copy. Poster shows until main.js promotes the
   sources; --ink underneath covers the gap on a slow connection. */
.hero__media { position: absolute; inset: 0; z-index: 0; background: var(--ink); pointer-events: none; }
.hero__video { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Darkens left-to-right so the copy reads over it and the footage stays
   visible on the right. The bottom fade carries the review row and the join
   into the next band. */
.hero__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to bottom, rgba(16, 17, 16, 0) 40%, rgba(16, 17, 16, 0.75) 82%, var(--ink) 100%),
        linear-gradient(to right, rgba(16, 17, 16, 0.98) 0%, rgba(16, 17, 16, 0.95) 42%, rgba(16, 17, 16, 0.55) 70%, rgba(16, 17, 16, 0.2) 100%);
}
.review-platforms { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.review-platform { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 24px; color: var(--text); transition: box-shadow .15s, color .15s; }
.review-platform + .review-platform { border-left: 1px solid var(--line); }
.review-platform:hover { color: var(--text); box-shadow: inset 0 2px 0 var(--green-pale); }
.review-platform:hover .review-platform__link,
.review-platform:hover .review-platform__name > span { color: var(--on-ink); }
.review-platform__name { font-weight: 700; font-size: 18px; width: 100%; display: flex; justify-content: space-between; gap: 16px; }
.review-platform__name > span { color: var(--green-pale); }
.review-platform__rating { font-size: 32px; font-weight: 700; line-height: 1.3; }
.review-platform__rating > span:first-child { color: var(--green-pale); font-size: 25px; }
.review-platform__scale { font-size: 18px; color: var(--text-body); }
.review-platform__verified { font-size: 25px; font-weight: 700; line-height: 1.3; display: inline-flex; align-items: center; gap: 10px; }
.review-platform__verified > span { color: var(--green-pale); }
.review-platform__detail { color: var(--text-muted); font-size: 12px; }
.review-platform__link { margin-top: auto; color: var(--green-pale); font-size: 14px; font-weight: 600; transition: color .15s; }
#services .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.home-service { background: var(--card); border: 1px solid var(--line); display: flex; flex-direction: column; }
.home-service .card { border: 0; background: transparent; padding: 32px; flex: 1; }
.home-service .card__rule { width: 48px; margin-bottom: 16px; }
.home-service > a { border-top: 1px solid var(--line); padding: 18px 32px; display: flex; justify-content: space-between; gap: 16px; color: var(--green-pale); font-weight: 600; }
.home-service > a:hover { background: var(--green-wash); }
#work .gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
#work .shot img { height: 310px; }
#about { background: var(--card); border-block: 1px solid var(--line); }
.about-band__inner { display: grid; grid-template-columns: .95fr 1.05fr; gap: var(--space-xl); align-items: center; }
.about-band__copy { display: flex; flex-direction: column; gap: var(--space-md); }
.about-band__copy p { font-size: var(--font-size-body); line-height: 1.7; }
.about-band__collage img { height: 170px; }
.about-band__collage .collage__lead { height: 260px; }
.values__inner { display: grid; grid-template-columns: 220px 1fr; gap: var(--space-xl); align-items: start; }
.values__inner .value-card { background: transparent; border-width: 1px 0 0; padding-inline: 0; }
.reviews { border-top: 1px solid var(--line); padding-top: var(--space-xl); display: flex; flex-direction: column; gap: var(--space-xl); }
.reviews__copy { display: flex; flex-direction: column; gap: var(--space-sm); max-width: 760px; }
.reviews__copy p { font-size: var(--font-size-body); color: var(--text-body); }
.reviews__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.review-quotes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-md); }
.review-quote { margin: 0; padding: 28px; background: var(--card); border-left: 3px solid var(--green); display: flex; flex-direction: column; gap: 16px; }
.review-quote blockquote { font-size: var(--font-size-lg); font-weight: 600; line-height: 1.5; }
.review-quote figcaption { margin-top: auto; display: flex; flex-direction: column; gap: 4px; }
.review-quote__job { color: var(--text-body); font-weight: 600; }
.review-quote figcaption, .review-quote > a { font-size: 14px; }
.review-quote figcaption { color: var(--text-muted); }
.stock-band { position: relative; overflow: hidden; border-block: 1px solid var(--line); }
.stock-band img { display: block; width: 100%; height: 360px; object-fit: cover; }
.stock-band__overlay { position: absolute; inset: 0; display: flex; align-items: center; background: linear-gradient(to right, rgba(16,17,16,.92) 0%, rgba(16,17,16,.6) 48%, rgba(16,17,16,.1) 100%); }
.stock-band__copy { max-width: 620px; display: flex; flex-direction: column; gap: 12px; }
.stock-band__copy p { font-size: var(--font-size-xl); font-weight: 600; line-height: 1.35; color: var(--on-ink); }
.enquiry__inner { display: grid; grid-template-columns: 1fr 1.1fr; gap: var(--space-xl); align-items: start; }
#enquiry { border-top: 1px solid var(--line); }
@media (max-width: 900px) {
    .about-band__inner, .values__inner, .enquiry__inner { grid-template-columns: 1fr; gap: var(--space-lg); }
    .review-quotes { grid-template-columns: 1fr; }
    .stock-band img { height: 260px; }
    .hero__inner { grid-template-columns: 1fr; }
    /* Lighter than desktop: the copy sits over the whole clip here, and the
       earlier ~90% scrim left nothing of it visible — the hero read as a black
       block. Enough remains to keep the white heading legible. */
    .hero__media::after {
        background:
            linear-gradient(to bottom, rgba(16, 17, 16, 0.3) 0%, rgba(16, 17, 16, 0.75) 70%, var(--ink) 100%),
            linear-gradient(to right, rgba(16, 17, 16, 0.65) 0%, rgba(16, 17, 16, 0.45) 100%);
    }
    .hero__copy { gap: 18px; }
    .hero__logo { width: 300px; }
    .review-platform { padding: 20px 16px; }
    #work .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .band { padding-block: 64px; }
    .band-flush-top { padding-top: 0; }
}
@media (max-width: 600px) {
    .hero__inner { padding-block: 28px; }
    /* At 300px the logo alone filled a quarter of a phone screen and pushed the
       heading and first button below the fold. */
    .hero__logo { width: 200px; }
    .hero h1 { font-size: 24px; }
    .hero__lede { font-size: var(--font-size-base); }
    .hero__actions .btn { flex: 1 1 auto; padding-inline: 18px; }
    .review-platforms, #services .card-grid, #work .gallery { grid-template-columns: 1fr; }
    .review-platform + .review-platform { border-left: 0; border-top: 1px solid var(--line); }
    .review-platform { padding: 22px 0; }
    .review-platform__title { max-width: none; }
    .home-service .card { padding: 24px; }
    .home-service > a { padding-inline: 24px; }
    .review-quote { padding: 22px; }
    .stock-band img { height: 220px; }
    .stock-band__copy p { font-size: var(--font-size-lg); }
}
@media (prefers-reduced-motion: reduce) {
    .review-platform,
    .review-platform__link { transition: none; }
}