/*
 * Prototype home2 (/html/home2.html): an improved home1_1 in the same brand (site.css tokens,
 * Lazurski headings, green action, gold titles). Banner with the headline beside the photo, a
 * cover wall with a magazine filter, the six values as a list, a role switcher instead of the
 * static client map, a moving band of covers, the people grid and a closing join band.
 * Header and footer come from the site styles unchanged.
 */
.proto-home2 { background: var(--bg); }
.proto-home2 .main { padding: 0; }
/* globals.css paints every element white; inside main colours inherit from their section. */
.h2 :where(*) { color: inherit; }
.h2 { color: var(--text); }

.h2-title {
    margin: 0; font: 700 clamp(32px, 4.2vw, 64px)/1.02 Lazurski, "Playfair Display", Georgia, serif;
    letter-spacing: -0.01em; color: var(--yellow); text-wrap: balance;
}
.h2-link {
    display: inline-flex; align-items: center; min-height: 44px; color: var(--text);
    font: 600 16px/1.2 var(--font); text-decoration: underline; text-decoration-thickness: 1px;
    text-underline-offset: 6px; text-decoration-color: rgb(255 255 255 / 0.4);
    transition: text-decoration-color var(--trans), color var(--trans);
}
.h2-link:hover { text-decoration-color: currentColor; color: #fff; }
.h2-link:focus-visible, .h2 button:focus-visible, .h2 a:focus-visible { outline: 2px solid var(--yellow); outline-offset: 3px; }

/* ── hero: photo, headline over the green coat, three covers fanned at the edge ─────────── */
.h2-hero {
    position: relative; isolation: isolate; overflow: hidden;
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center;
    min-height: min(860px, calc(100svh - var(--header-h)));
    margin-top: calc(var(--header-h) * -1); padding: calc(var(--header-h) + 40px) clamp(16px, 4vw, 64px) 64px;
}
.h2-hero__img {
    position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%;
    object-fit: cover; object-position: 38% 50%;
    transform: scale(1.06); animation: h2-settle 1800ms cubic-bezier(.2, .7, .2, 1) forwards;
}
/* The one scrim: dark on the right where the text sits, so the face on the left stays clean. */
.h2-hero::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(90deg, rgb(12 14 12 / 0) 30%, rgb(12 14 12 / 0.72) 62%, rgb(12 14 12 / 0.85));
}
.h2-hero::after {
    content: ""; position: absolute; inset: auto 0 0; height: 140px; z-index: -1;
    background: linear-gradient(to bottom, transparent, var(--bg));
}
.h2-hero__content { grid-column: 2; max-width: 560px; }
.h2-hero__title {
    margin: 0; font: 700 clamp(44px, 5.6vw, 92px)/0.95 Lazurski, "Playfair Display", Georgia, serif;
    color: var(--yellow); letter-spacing: -0.015em; text-wrap: balance;
}
.h2-hero__lead { margin: 24px 0 0; max-width: 46ch; font: 400 clamp(17px, 1.3vw, 20px)/1.55 var(--font); color: #fff; }
.h2-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; margin-top: 32px; }
.h2-hero__actions .btn { min-height: 48px; padding: 0 28px; font-size: 16px; }
.h2-hero__content > * { opacity: 0; transform: translateY(18px); animation: h2-rise 800ms cubic-bezier(.2, .7, .2, 1) forwards; }
.h2-hero__content > :nth-child(2) { animation-delay: 110ms; }
.h2-hero__content > :nth-child(3) { animation-delay: 220ms; }

.h2-hero__covers {
    position: absolute; right: clamp(16px, 4vw, 64px); bottom: 56px; z-index: 1; display: flex; margin: 0; padding: 0;
    pointer-events: none;
}
.h2-hero__covers li {
    width: clamp(90px, 8vw, 132px); margin-left: -28px; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 4px;
    transform: rotate(calc((var(--i) - 1) * 6deg)) translateY(calc(var(--i) * -10px));
    opacity: 0; animation: h2-rise 900ms cubic-bezier(.2, .7, .2, 1) forwards; animation-delay: calc(400ms + var(--i) * 120ms);
}
.h2-hero__covers img { display: block; width: 100%; height: 100%; object-fit: cover; }
@keyframes h2-settle { to { transform: none; } }
@keyframes h2-rise { to { opacity: 1; transform: none; } }
@keyframes h2-rise-tilt { to { opacity: 1; } }
.h2-hero__covers li { animation-name: h2-rise-tilt; }

/* ── covers wall with filter ───────────────────────────────────────────────────────────── */
.h2-covers { padding: clamp(72px, 9vw, 140px) 0 0; }
.h2-covers__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px 48px; align-items: end; }
.h2-covers__note { margin: 0; max-width: 44ch; font: 400 17px/1.55 var(--font); color: var(--muted); justify-self: end; }
.h2-filter { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.h2-filter__btn {
    display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; border-radius: 999px;
    background: var(--surface); color: var(--text); font: 500 15px/1 var(--font-head); cursor: pointer;
    transition: background var(--trans), color var(--trans), transform 150ms ease;
}
.h2-filter__btn span { color: var(--gray); font-size: 13px; font-variant-numeric: tabular-nums; }
.h2-filter__btn:hover { background: var(--surface-3); }
.h2-filter__btn:active { transform: scale(0.97); }
.h2-filter__btn[aria-pressed="true"] { background: var(--yellow); color: #18171a; }
.h2-filter__btn[aria-pressed="true"] span { color: rgb(24 23 26 / 0.6); }

/* Without JS: CSS columns. js/home2.js builds real columns for the drift and the filter. */
.h2-wall { position: relative; margin-top: 40px; columns: 5; column-gap: 6px; padding: 0 6px; }
.h2-wall[data-wall-ready] { display: flex; gap: 6px; columns: auto; align-items: flex-start; }
.h2-wall.is-capped { max-height: clamp(640px, 80vw, 1080px); overflow: hidden; }
.h2-wall.is-capped::after {
    content: ""; position: absolute; inset: auto 0 0; height: 32%; pointer-events: none;
    background: linear-gradient(to bottom, transparent, var(--bg));
}
.h2-wall__col { flex: 1 1 0; min-width: 0; display: grid; gap: 6px; will-change: transform; }
.h2-tile { display: block; position: relative; overflow: hidden; break-inside: avoid; margin-bottom: 6px; border-radius: 4px; background: var(--surface); }
.h2-wall[data-wall-ready] .h2-tile { margin: 0; }
.h2-tile[hidden] { display: none; }
.h2-tile img {
    display: block; width: 100%; height: auto; aspect-ratio: var(--ar, 4 / 5); object-fit: cover;
    opacity: 0; transform: scale(1.04); transition: opacity 700ms ease, transform 1200ms ease;
}
.h2-tile.is-in img { opacity: 1; transform: none; }
.h2-tile:hover img { transform: scale(1.03); transition-duration: 700ms; }
/* Caption sits under the photo on a solid strip: readable on any cover, also on touch screens. */
.h2-tile__cap {
    position: absolute; left: 8px; bottom: 8px; padding: 6px 10px; border-radius: 3px;
    background: rgb(24 23 26 / 0.86); color: #fff; font: 600 13px/1.2 var(--font-head);
    opacity: 0; transform: translateY(4px); transition: opacity 220ms ease, transform 220ms ease;
}
.h2-tile:hover .h2-tile__cap, .h2-tile:focus-visible .h2-tile__cap { opacity: 1; transform: none; }
.h2-tile:focus-visible { outline: 2px solid var(--yellow); outline-offset: -2px; }
.h2-covers__more { display: flex; justify-content: center; margin-top: 8px; position: relative; z-index: 1; }
.h2-covers__more[hidden] { display: none; }

/* ── values: sticky title, list of six ─────────────────────────────────────────────────── */
.h2-values { padding: clamp(96px, 12vw, 200px) 0; }
.h2-values__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px clamp(32px, 6vw, 120px); }
.h2-values__aside { position: sticky; top: calc(var(--header-h) + 40px); align-self: start; }
.h2-values__aside p { margin: 20px 0 0; max-width: 32ch; font: 400 18px/1.55 var(--font); color: var(--muted); }
.h2-values__list { display: grid; gap: clamp(40px, 5vw, 72px); margin: 0; }
.h2-value { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.h2-value dt { font: 700 clamp(28px, 3vw, 44px)/1.05 Lazurski, "Playfair Display", Georgia, serif; color: #fff; }
.h2-value dd { margin: 0; max-width: 60ch; font: 400 17px/1.6 var(--font); color: #d6d6da; }

/* ── role switcher (was the client map) ────────────────────────────────────────────────── */
.h2-roles { padding: clamp(80px, 10vw, 160px) 0; background: var(--surface); }
.h2-roles__tabs { display: flex; flex-wrap: wrap; gap: 4px clamp(16px, 3vw, 44px); margin: 28px 0 clamp(32px, 4vw, 56px); }
.h2-roles__tabs button {
    position: relative; padding: 8px 0; background: none; cursor: pointer;
    font: 700 clamp(22px, 2.4vw, 36px)/1.15 Lazurski, "Playfair Display", Georgia, serif; color: var(--gray);
    transition: color var(--trans);
}
.h2-roles__tabs button::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; border-radius: 2px;
    background: var(--green); transform: scaleX(0); transform-origin: left; transition: transform 300ms cubic-bezier(.2, .7, .2, 1);
}
.h2-roles__tabs button:hover { color: #fff; }
.h2-roles__tabs button[aria-selected="true"] { color: var(--yellow); }
.h2-roles__tabs button[aria-selected="true"]::after { transform: scaleX(1); }
.h2-role { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 96px); align-items: center; }
.h2-role[hidden] { display: none; }
.h2-role__img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 4px; animation: h2-fade 500ms ease; }
.h2-role__title { margin: 0; font: 600 clamp(26px, 2.4vw, 36px)/1.15 var(--font-head); letter-spacing: -0.02em; }
.h2-role ul { display: grid; gap: 18px; margin: 28px 0 32px; padding: 0; }
.h2-role li { position: relative; padding-left: 28px; max-width: 48ch; font: 400 clamp(17px, 1.4vw, 21px)/1.5 var(--font); }
.h2-role li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 12px; height: 12px; border-radius: 50%; background: var(--green); }
.h2-role__body > * { animation: h2-fade 500ms ease both; }
.h2-role__body > :nth-child(2) { animation-delay: 70ms; }
.h2-role__body > :nth-child(3) { animation-delay: 140ms; }
@keyframes h2-fade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ── moving band of covers ─────────────────────────────────────────────────────────────── */
.h2-band { overflow: hidden; padding: clamp(64px, 8vw, 120px) 0 0; }
.h2-band__row { display: flex; gap: 6px; width: max-content; animation: h2-band 90s linear infinite; }
.h2-band__row img { flex: none; height: auto; width: clamp(150px, 14vw, 230px); aspect-ratio: 4 / 5; object-fit: cover; border-radius: 4px; }
.h2-band:hover .h2-band__row { animation-play-state: paused; }
@keyframes h2-band { to { transform: translateX(-50%); } }

/* ── people ────────────────────────────────────────────────────────────────────────────── */
.h2-people { padding: clamp(96px, 12vw, 180px) 0; }
.h2-people__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px 48px; align-items: end; margin-bottom: 40px; }
.h2-people__head p { margin: 0; max-width: 44ch; justify-self: end; font: 400 17px/1.55 var(--font); color: var(--muted); }
.h2-people__grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 32px 12px; margin: 0; padding: 0; }
/* A staggered baseline: every second portrait drops, so the row reads like prints pinned by hand. */
.h2-people__grid li:nth-child(even) { margin-top: 56px; }
.h2-person { display: block; }
.h2-person__frame { display: block; overflow: hidden; border-radius: 4px; background: var(--surface); }
.h2-person__frame img { display: block; width: 100%; height: auto; aspect-ratio: 2 / 3; object-fit: cover; transition: transform 700ms cubic-bezier(.2, .7, .2, 1); }
.h2-person:hover .h2-person__frame img { transform: scale(1.04); }
.h2-person__name { display: flex; align-items: center; gap: 10px; margin-top: 12px; font: 600 15px/1.2 var(--font-head); }
.h2-person__name img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }

/* ── join band ─────────────────────────────────────────────────────────────────────────── */
.h2-join { background: var(--green); color: #fff; padding: clamp(80px, 10vw, 150px) 0; }
.h2-join__inner { display: grid; justify-items: start; gap: 20px; }
.h2-join h2 { margin: 0; max-width: 22ch; font: 700 clamp(36px, 5vw, 80px)/1 Lazurski, "Playfair Display", Georgia, serif; color: #fff; text-wrap: balance; }
.h2-join p { margin: 0; max-width: 46ch; font: 400 19px/1.55 var(--font); color: #fff; }
.h2-join__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; margin-top: 12px; }
.h2-join__btn {
    display: inline-flex; align-items: center; min-height: 52px; padding: 0 32px; border-radius: 999px;
    background: #18171a; color: #fff; font: 600 16px/1 var(--font-head); transition: background var(--trans), transform 150ms ease;
}
.h2-join__btn:hover { background: #000; }
.h2-join__btn:active { transform: scale(0.97); }
.h2-join .h2-link:focus-visible, .h2-join__btn:focus-visible { outline-color: #fff; }

/* ── reveal ────────────────────────────────────────────────────────────────────────────── */
.js-reveal [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity 700ms ease, transform 700ms cubic-bezier(.2, .7, .2, 1); transition-delay: var(--d, 0ms); }
.js-reveal [data-reveal].is-in { opacity: 1; transform: none; }

/* ── responsive ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 1199px) {
    .h2-wall { columns: 4; }
    .h2-people__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 991px) {
    .h2-hero { grid-template-columns: minmax(0, 1fr); align-items: end; min-height: 0; padding-top: 0; padding-bottom: 48px; }
    .h2-hero__img { position: relative; inset: auto; height: 62svh; min-height: 380px; margin: 0 calc(clamp(16px, 4vw, 64px) * -1); width: calc(100% + 2 * clamp(16px, 4vw, 64px)); object-position: 40% 30%; }
    .h2-hero::before { background: linear-gradient(to bottom, rgb(12 14 12 / 0.3), transparent 20%); height: 62svh; }
    .h2-hero::after { display: none; }
    .h2-hero__content { grid-column: 1; margin-top: 32px; }
    .h2-hero__covers { display: none; }
    .h2-wall { columns: 3; }
    .h2-covers__head, .h2-people__head { grid-template-columns: minmax(0, 1fr); }
    .h2-covers__note, .h2-people__head p { justify-self: start; }
    .h2-values__grid { grid-template-columns: minmax(0, 1fr); }
    .h2-values__aside { position: static; }
    .h2-role { grid-template-columns: minmax(0, 1fr); }
    .h2-role__img { aspect-ratio: 4 / 3; }
    .h2-people__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .h2-people__grid li:nth-child(even) { margin-top: 0; }
    .h2-people__grid li:nth-child(3n + 2) { margin-top: 40px; }
}
@media (max-width: 575px) {
    .h2-wall { columns: 2; }
    .h2-filter { flex-wrap: nowrap; overflow-x: auto; margin: 20px -16px 0; padding: 0 16px 4px; scrollbar-width: none; }
    .h2-filter__btn { flex: none; }
    .h2-roles__tabs { flex-wrap: nowrap; overflow-x: auto; margin-left: -16px; margin-right: -16px; padding: 0 16px; scrollbar-width: none; }
    .h2-roles__tabs button { flex: none; }
    .h2-people__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .h2-people__grid li:nth-child(n) { margin-top: 0; }
    .h2-people__grid li:nth-child(even) { margin-top: 40px; }
}
@media (hover: none) { .h2-tile__cap { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
    .h2-hero__img, .h2-hero__content > *, .h2-hero__covers li, .h2-role__img, .h2-role__body > * { animation: none; opacity: 1; transform: none; }
    .h2-hero__covers li { transform: rotate(calc((var(--i) - 1) * 6deg)); }
    .h2-tile img { opacity: 1; transform: none; transition: none; }
    .h2-wall__col { transform: none !important; }
    .h2-band__row { animation: none; }
    .h2-band { overflow-x: auto; }
    .js-reveal [data-reveal] { opacity: 1; transform: none; transition: none; }
}