/* The home page only: hero film, role panels, the made-for band, the six scenes. Shared pieces are in pages2.css. */
/* LAB: the people film as the home hero (11 Nov 2026). The words, then the film full width at its own 16:9, the way
   the reference site does it; the five-step app demo moves to its own section below. */
.hv { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--r-lg); overflow: hidden; background: #1e1b16; box-shadow: var(--lift-2); }
.hv__v { display: block; width: 100%; height: 100%; object-fit: cover; }
.hv__btn { position: absolute; right: 16px; bottom: 16px; width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 8px; background: #fff; color: #1a1814; cursor: pointer; box-shadow: 0 2px 10px rgb(0 0 0 / .25); transition: transform .1s ease-out; }
.hv__btn:active { transform: scale(.95); }
.hv__btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; box-shadow: 0 0 0 5px #8b6914; }
.hv__i { width: 16px; height: 16px; fill: currentColor; }
.hv__i--pause, .hv.is-playing .hv__i--play { display: none; }
.hv.is-playing .hv__i--pause { display: block; }
.hv__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* the hero holds the words and the whole film, so it may run past the first screen */
.hero.hero--app:has(.hv) { height: auto; min-height: 0; max-height: none; padding-bottom: var(--s-8); }
.hero.hero--app:has(.hv) .hero__in, .hero.hero--app:has(.hv) > .wrap { height: auto; min-height: 0; }
@media (max-width: 639px) { .hv { border-radius: var(--r-md); } .hv__btn { right: 10px; bottom: 10px; }
}

/* v2 (owner's review against the reference): a named category line with the mark, the film edge to edge */
.hero__kicker { display: flex; align-items: center; gap: 10px; margin: 0 0 var(--s-4); font: 600 13px/1.3 var(--font-text); letter-spacing: .14em; text-transform: uppercase; color: var(--ink); }
.hero__kicker img { width: 22px; height: 22px; object-fit: contain; flex: none; }
@media (min-width: 1024px) { .hero--app .hero__head > :first-child { display: block; grid-column: 1 / span 7; grid-row: 1 / span 2; align-self: end; } .hero--app .hero__head > :first-child h1 { grid-column: auto; grid-row: auto; }
}
.hero.hero--app:has(.hv--bleed) { padding-bottom: 0; }
.hero.hero--app:has(.hv--bleed) > .wrap { padding-bottom: var(--s-7); }
.hv--bleed { border-radius: 0; box-shadow: none; aspect-ratio: 2 / 1; }
.hv--bleed .hv__btn { right: max(16px, var(--gut, 24px)); bottom: 20px; }
@media (max-width: 767px) { .hv--bleed { aspect-ratio: 16 / 9; }
}
.section.runs { height: auto; min-height: 0; padding-block: var(--s-9, 96px); }
.section.runs > .wrap { height: auto; display: block; }
.runs__card em { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; font-style: normal; font-weight: 600; font-size: 15px; color: var(--ink); }
.runs__card:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

/* what Cabby runs: four photo cards, two by two */
.runs { background: #fff; }
.runs__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-7); align-items: end; margin-bottom: var(--s-7); }
.runs__head .v2-h { margin: 0; } .runs__head p { margin: 0; max-width: 44ch; }
.runs__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-7) var(--s-5); }
.runs__card { display: grid; gap: 8px; align-content: start; color: var(--ink); text-decoration: none; }
.runs__img { display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--r-lg); margin-bottom: var(--s-3); background: #eee; }
.runs__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.22, 1, .36, 1); }
.runs__card:hover .runs__img img { transform: scale(1.03); }
.runs__card b { font: 600 26px/1.15 var(--font-display); letter-spacing: -0.02em; }
.runs__card > span:not(.runs__img) { font-size: 17px; line-height: 1.5; max-width: 46ch; }
@media (prefers-reduced-motion: reduce) { .runs__img img { transition: none; transform: none !important; }
}
@media (max-width: 899px) { .runs__head, .runs__grid { grid-template-columns: 1fr; } .runs__head { gap: var(--s-4); } .section.runs { padding-block: var(--s-8, 64px); } .runs__card b { font-size: 22px; }
}
@media (min-width: 640px) and (max-width: 899px) { #runs { scroll-margin-top: var(--s-4); } }
/* six scenes */
.runs__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-8) var(--s-5); }
.runs__img { aspect-ratio: 4 / 3; }
.runs__card b { font-size: 24px; }
@media (max-width: 1023px) { .runs__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 599px) { .runs__grid { grid-template-columns: 1fr; }
}
@keyframes mq-run { to { transform: translateX(-50%); } }

/* v2.7 (owner's review): "made for" is words beside the film, so nothing sits on the picture and the whole frame shows.
   No icons and no extra colours: three plain links parted by rules, on the app's dark brown. */
main > section.section.made { height: auto; min-height: 0; max-height: none; padding-block: var(--s-9, 96px); color: #fff; }
main > section.section.made > .wrap.made__in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-8, 64px); align-items: center; height: auto; }
.made__words h2 { margin: 0 0 var(--s-4); color: #fff; }
.made__words .t-lead { margin: 0 0 var(--s-6); color: #e9e4da; max-width: 40ch; }
.made__links { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid rgb(255 255 255 / .22); }
.made__links a { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 2px; border-top: 1px solid rgb(255 255 255 / .22); color: #fff; text-decoration: none; transition: padding-left .25s cubic-bezier(.22, 1, .36, 1), border-color .2s ease; }
.made__links span { display: grid; gap: 4px; }
.made__links b { font: 600 20px/1.2 var(--font-display); letter-spacing: -0.015em; }
.made__links small { font-size: 15px; line-height: 1.4; color: #d6d0c4; }
.made__links .m-arrow { width: 14px; height: 14px; flex: none; color: var(--app-gold-lit, #d9b65a); }
.made__links a:hover { padding-left: 10px; border-color: rgb(255 255 255 / .5); }
.made__links a:focus-visible { outline: 2px solid #e8c878; outline-offset: 2px; }
.made__film { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r-lg); overflow: hidden; background: #14110d; }
.made__film video { display: block; width: 100%; height: 100%; object-fit: cover; }
.made__film .made__pause { position: absolute; right: 14px; bottom: 14px; top: auto; left: auto; }
@media (prefers-reduced-motion: reduce) { .made__links a { transition: none; } .made__links a:hover { padding-left: 2px; }
}
@media (max-width: 1023px) { main > section.section.made { padding-block: var(--s-8, 64px); } main > section.section.made > .wrap.made__in { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); } .made__film { order: -1; }
}
@media (min-width: 1024px) { main > section.section.made > .wrap.made__in { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--s-7, 48px); }
}
.made__l { --c: #fff; position: relative; }
.made__links a.made__l { padding-left: 18px; }
.made__l::before { content: ""; position: absolute; left: 0; top: 18px; bottom: 18px; width: 3px; border-radius: 2px; background: var(--c); }
.made__l b { color: var(--c); }
.made__links .made__l .m-arrow { color: var(--c); }
.made__links a.made__l:hover { padding-left: 24px; }
.made__l--office { --c: #f2b45c; } .made__l--floor { --c: #74d39b; } .made__l--cust { --c: #74c7f0; }
@media (prefers-reduced-motion: reduce) { .made__links a.made__l:hover { padding-left: 18px; }
}

/* v3.0 (owner's review, "boring"): three photo panels in one row. The open one shows its whole photograph beside its words
   on dark brown, in its own colour; the other two wait as tall slices with their name. Pointing at a slice opens it. */
main > section.section.who3 { height: auto; min-height: 0; max-height: none; padding-block: var(--s-8, 64px); }
.who3__in > .v2-h { margin-bottom: var(--s-6); }
main > section.section.who3 > .wrap.who3__in { display: block; height: auto; }
.pns { --h: clamp(430px, 38vw, 560px); display: flex; gap: 14px; height: var(--h); }
.pn { --c: #f2b45c; position: relative; flex: 1 1 0; min-width: 0; overflow: hidden; border-radius: var(--r-lg); background: #1e1b16; color: #fff; text-decoration: none; transition: flex-grow .65s cubic-bezier(.22, 1, .36, 1); }
.pn--office { --c: #74d39b; } .pn--crew { --c: #74c7f0; }
.pn.is-on { flex-grow: 4.2; }
.pn__ph { position: absolute; left: 0; top: 0; height: 100%; width: 100%; overflow: hidden; transition: width .65s cubic-bezier(.22, 1, .36, 1); }
.pn.is-on .pn__ph { width: calc(var(--h) * .8); }
.pn__ph img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .9s cubic-bezier(.22, 1, .36, 1); }
.pn--owner .pn__ph img { object-position: 78% 50%; } .pn--office .pn__ph img { object-position: 82% 50%; }
.pn:not(.is-on):hover .pn__ph img { transform: scale(1.04); }
.pn__tag { position: absolute; left: 0; right: 0; bottom: 0; padding: 72px 18px 18px; font: 600 20px/1.15 var(--font-display); letter-spacing: -0.015em; color: #fff; background: linear-gradient(180deg, transparent, rgb(20 17 13 / .82)); transition: opacity .25s ease; }
.pn__tag::before { content: ""; display: block; width: 28px; height: 3px; border-radius: 2px; background: var(--c); margin-bottom: 10px; }
.pn.is-on .pn__tag { opacity: 0; }
.pn__txt { position: absolute; left: calc(var(--h) * .8); top: 0; bottom: 0; width: calc(100% - var(--h) * .8); min-width: 280px; padding: clamp(24px, 3vw, 44px); display: grid; align-content: end; gap: 14px; opacity: 0; transition: opacity .2s ease; }
.pn.is-on .pn__txt { opacity: 1; transition: opacity .45s ease .3s; }
.pn__txt::before { content: ""; width: 44px; height: 4px; border-radius: 2px; background: var(--c); }
.pn__txt b { font: 600 clamp(1.9rem, 3vw, 2.75rem)/1.05 var(--font-display); letter-spacing: -0.03em; color: var(--c); }
.pn__txt > span { font-size: 18px; line-height: 1.5; color: #f1ede6; max-width: 30ch; }
.pn__txt em { justify-self: start; display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; padding: 11px 18px; border-radius: 8px; background: var(--c); color: #14110d; font-style: normal; font-weight: 600; font-size: 15px; }
.pn:focus-visible { outline: 3px solid var(--app-gold, #8b6914); outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) { .pn, .pn__ph, .pn__ph img, .pn__txt, .pn.is-on .pn__txt, .pn__tag { transition: none; } .pn:not(.is-on):hover .pn__ph img { transform: none; }
}

/* v3.1 (owner's review): a bigger heading across the section; the word for the open panel takes that panel's colour */
.who3__h { margin: 0 0 var(--s-6); max-width: 22ch; font: 600 clamp(2.1rem, 4.4vw, 3.75rem)/1.04 var(--font-display); letter-spacing: -0.035em; color: var(--ink); text-wrap: balance; }
.who3__w { --c: #f2b45c; --d: #a86200; position: relative; white-space: nowrap; cursor: default; transition: color .3s ease; background: linear-gradient(var(--c), var(--c)) 0 100% / 0 .14em no-repeat; padding-bottom: .04em; transition: color .3s ease, background-size .5s cubic-bezier(.22, 1, .36, 1); }
.who3__w--office { --c: #74d39b; --d: #1c7f47; } .who3__w--crew { --c: #74c7f0; --d: #0f6fa8; }
.who3__w.is-on { color: var(--d); background-size: 100% .14em; }
@media (prefers-reduced-motion: reduce) { .who3__w { transition: none; }
}

/* v3.2 (owner's review): one colour per role, the same in every section.
   Owner amber, office green, workshop and install blue, customer coral. --c is the light tone (on dark, bars and fills),
   --d the dark tone (text on the light page). */
.who3__w--owner, .pn--owner { --c: #f2b45c; --d: #a86200; }
.who3__w--office, .pn--office, .made__l--office { --c: #74d39b; --d: #1c7f47; }
.who3__w--crew, .pn--crew, .made__l--floor { --c: #74c7f0; --d: #0f6fa8; }
.made__l--cust { --c: #f59c8c; --d: #b4432c; }
.runs__card:has(.role--office) { --d: #1c7f47; } .runs__card:has(.role--floor) { --d: #0f6fa8; } .runs__card:has(.role--cust) { --d: #b4432c; }
.runs__card em .m-arrow { color: var(--d); }

/* v3.3 (owner's review): no tag; the card's title itself is in the role's colour, underlined like the heading words */
.runs__card > b.runs__t { color: var(--d); }
.runs__t > span { background: linear-gradient(var(--c), var(--c)) 0 100% / 100% .13em no-repeat; padding-bottom: .1em; }
/* v3.4 (owner's review): the "runs" heading matches the section above: one big line, its sentence straight beneath it */
.runs .runs__head { display: block; margin-bottom: var(--s-7); }
.runs .runs__head .v2-h { max-width: none; margin: 0 0 var(--s-3); font: 600 clamp(2.1rem, 4.4vw, 3.75rem)/1.04 var(--font-display); letter-spacing: -0.035em; text-wrap: balance; }
.runs .runs__head p { margin: 0; max-width: 46ch; font-size: clamp(1.125rem, 1.5vw, 1.375rem); line-height: 1.45; color: #4d4a44; }   /* the app's design token `gold` (tailwind.config: gold '#8B6914') */
.u-gold { background: linear-gradient(var(--gold), var(--gold)) 0 100% / 100% .14em no-repeat; padding-bottom: .04em; }
/* The open panel needs room for the photograph and at least 280px of text. */
@media (max-width: 1159px), (hover: none) {
  .pns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); height: auto; }
  .pn, .pn.is-on { flex: none; display: flex; flex-direction: column; }
  .pn__ph, .pn.is-on .pn__ph { position: static; width: 100%; height: auto; aspect-ratio: 4 / 5; flex: none; }
  .pn--owner .pn__ph img, .pn--office .pn__ph img { object-position: 50% 50%; }
  .pn__tag { display: none; }
  .pn__txt, .pn.is-on .pn__txt { position: static; width: auto; min-width: 0; flex: 1; opacity: 1; transition: none; padding: 20px; align-content: start; gap: 10px; }
  .pn__txt b { font-size: clamp(1.25rem, 2.6vw, 1.75rem); }
  .pn__txt > span { font-size: 16px; }
  .pn__txt em { margin-top: auto; }
  .who3__w { color: var(--d); background-size: 100% .12em; }
}
@media (max-width: 599px) { .pns { grid-template-columns: minmax(0, 1fr); gap: var(--s-5); } .pn__txt b { font-size: 1.6rem; } main > section.section.who3 { padding-block: var(--s-8, 64px); }
}
/* 2. on very large or very short screens the hero film never grows past the screen */
.hv--bleed { max-height: 86svh; }
/* 5. the band film's pause button is a full-size tap target */
.made__film .made__pause { width: 44px; height: 44px; display: grid; place-items: center; }

@media (forced-colors: active) {
  .who3__w.is-on { text-decoration: underline; }
  .hv__btn { border: 1px solid ButtonBorder; }
}

/* a very long word in the home heading wraps instead of widening the page */
.hero__head h1 { overflow-wrap: anywhere; }