:root {
    --surface: #ffffff;
    --surface-soft: #f7f4f1;
    --text: #111111;
    --shadow: 0 18px 44px rgba(17, 17, 17, 0.10);
    --content: 1180px;
  }

.label-tag {
    margin: 0;
    gap: 6px;
    text-shadow: 0.4px 0 0 currentColor, -0.0px 0 0 currentColor;
    text-transform: uppercase;
    color: var(--a-primary-color);
    font-size: var(--a-font-size-big);
    letter-spacing: 1px;
    line-height: normal;
    font-weight: bold;
}

/* ── O ── */
.vo-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(360px, .92fr);
    min-height: 390px;
    background: #fff;
}
.vo-copy {
    padding: 42px 38px 34px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 18px;
}
.vo-copy h2, .vo-copy h1.hh-title { margin: 0; line-height: .98; letter-spacing: -.045em; max-width: 10ch; }
.vo-copy .intro-title { margin: 0; font-size: var(--a-font-size-unsubtle); font-weight: 700; }
.vo-copy .lead, .vo-copy .sublead { margin: 0; max-width: 62ch; color: #5e5e5e; line-height: var(--a-line-height-airy); }
.vo-media { background-size: cover; background-position: center; min-height: 100%; }

/* ── A ── */
.va-hero {
    position: relative;
    height: 260px;
    background-size: cover;
    background-position: center 40%;
}
.va-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.8) 10%, rgba(0, 0, 0, 0.18) 100%, transparent 100%);
}
.va-copy {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 32px 40px;
    gap: 10px;
    max-width: 560px;
}
.va-copy .label-tag { color: #fff; }
.va-copy .label-tag::before { background: #fff; }
.va-copy h2, .va-copy h1.hh-title { margin: 0; font-size: clamp(1.6rem,3vw,2.4rem); line-height: 1.05; letter-spacing: -.03em; color: #fff; }
.va-copy p { margin: 0; font-size: var(--a-font-size-subtle); color: white; max-width: 48ch; }

/* ── B ── */
.vb-hero { display: grid; grid-template-columns: 1fr 1fr; min-height: 260px; }
.vb-copy { background: #111; padding: 36px 38px; display: flex; flex-direction: column; justify-content: center; gap: 14px; }
.vb-copy h2, .vb-copy h1.hh-title { margin: 0; font-size: var(--a-font-size-h3); line-height: 1.08; letter-spacing: -.03em; color: #fff; }
.vb-copy p { margin: 0; font-size: var(--a-font-size-subtle); line-height: 1.65; color: rgba(255,255,255,.65); max-width: 40ch; }
.vb-media { background-size: cover; background-position: center; }

/* ── C ── */
.vc-hero { display: flex; align-items: center; gap: 40px; padding: 36px 44px; border-left: 4px solid var(--a-primary-color); flex-wrap: wrap; }
.vc-left { flex: 0 0 auto; display: grid; grid-gap: var(--a-gap-text); }
.vc-left h2, .vc-left h1.hh-title { margin: 0; font-size: var(--a-font-size-h3); line-height: 1.05; letter-spacing: -.035em; max-width: 12ch; }
.vc-divider { width: 1px; align-self: stretch; background: rgba(17,17,17,.12); flex-shrink: 0; }
.vc-right { flex: 1; min-width: 240px; }
.vc-right p { margin: 0; font-size: var(--a-font-size-subtle); line-height: 1.65; color: #5e5e5e; }

/* ── D ── */
.vd-hero { display: grid; grid-template-columns: 290px 1fr; min-height: 300px; }
.vd-copy { background: #fff; padding: var(--a-gap-text-big); display: flex; flex-direction: column; justify-content: center; gap: var(--a-gap-small); border-right: 1px solid var(--a-line-color); }
.vd-copy h2, .vd-copy h1.hh-title { margin: 0; font-size: clamp(1.4rem,2.2vw,1.9rem); line-height: 1.08; letter-spacing: -.03em; max-width: 14ch;}
.vd-copy p { margin: 0; color: var(--a-grey5); font-size: var(--a-font-size-normal); line-height: 1.65; }
.vd-media {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 300px;
}
/* ── Responsive ── */
@media (max-width: 980px) {
    .vo-hero { grid-template-columns: 1fr; }
    .vo-media { order: -1; min-height: 250px; }
}
@media (max-width: 700px) {
    .vo-copy { padding: 24px 20px; }
    .vb-hero { grid-template-columns: 1fr; }
    .vb-media { min-height: 200px; order: -1; }
    .vc-hero { padding: 24px 20px; gap: 20px; }
    .vc-divider { display: none; }
    .vd-hero { grid-template-columns: 1fr; }
    .vd-media { min-height: 220px; order: -1; }
    .vd-copy { border-right: none; border-top: 1px solid rgba(17,17,17,.12); }
}

.hh-block {
    /*font-family: system-ui, sans-serif;*/
    max-width: var(--content);
    margin: var(--a-gap-normal) auto;
    width: 100%;
    background: var(--surface);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow);
}