/* ============================================================
   Home page v3 — hr-s.ru
   Loaded by home_page.html with a plain <link>: in base.html the
   profile stylesheets load deferred (media="print"), and the first
   screen sits on this file — it would flash otherwise.

   Everything is scoped under .hv-page: the shared blocks reused
   here (cases showcase, situation selector) are restyled, and that
   must not leak to the pages that use their default look.

   Palette: graphite + one blue. No gradients, no glow — the page
   has to read as a document, not as a landing page.
   ============================================================ */

.hv-page {
    --hv-dark: #14181d;
    --hv-ink: #16191d;
    --hv-body: #3d444d;
    --hv-muted: #6b727c;
    --hv-line: #dfe3e8;
    --hv-line-soft: #eceff3;
    --hv-accent: #0b5cab;
    --hv-accent-dark: #084881;
    --hv-paper: #f6f7f9;
    --hv-section-y: clamp(2.5rem, 4vw, 3.75rem);
    --hv-measure: 38rem;
    color: var(--hv-body);
}

/* Bootswatch Lux upper-cases every heading; a promise in caps reads as
   shouting and flattens the hierarchy between headings and numbers. */
.hv-page h1,
.hv-page h2,
.hv-page h3,
.hv-page h4 {
    text-transform: none;
    letter-spacing: -0.01em;
    color: var(--hv-ink);
}
/* Same specificity as the rule above, so light-on-dark titles win. */
.hv-page .hv-hero__title,
.hv-page .hv-close__title { color: #fff; }

.hv-section-title {
    font-size: clamp(1.45rem, 2.5vw, 2.05rem);
    font-weight: 600;
    line-height: 1.2;
    margin: 0;
}

.hv-btn {
    display: inline-block;
    background: var(--hv-accent);
    color: #fff;
    border: 1px solid var(--hv-accent);
    border-radius: 2px;
    padding: .8rem 2rem;
    font-size: .95rem;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    transition: background-color .16s ease, border-color .16s ease;
}
.hv-btn:hover,
.hv-btn:focus {
    background: var(--hv-accent-dark);
    border-color: var(--hv-accent-dark);
    color: #fff;
}
.hv-btn--light {
    background: #fff;
    border-color: #fff;
    color: var(--hv-ink);
}
.hv-btn--light:hover,
.hv-btn--light:focus {
    background: #e8ecf1;
    border-color: #e8ecf1;
    color: var(--hv-ink);
}

/* ---------- 1. Hero ---------- */
.hv-hero {
    position: relative;
    background: var(--hv-dark);
    color: #fff;
    overflow: hidden;
    /* No 100vh: on a 900px-tall laptop it pushes the button below the fold,
       and on mobile the browser chrome makes the unit lie. */
    min-height: clamp(22rem, 50vh, 30rem);
    display: flex;
    align-items: center;
}
.hv-hero__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 62% 45%;
    filter: grayscale(.35) contrast(1.02);
}
.hv-hero__veil {
    position: absolute;
    inset: 0;
    /* Flat scrim, not a gradient: the copy needs one steady contrast level. */
    background: rgba(13, 17, 22, .8);
}
.hv-hero__inner {
    position: relative;
    padding: clamp(3rem, 6vw, 5rem) 0;
}
.hv-hero__copy { max-width: 40rem; }
.hv-hero__title {
    font-size: clamp(1.9rem, 3.5vw, 2.85rem);
    font-weight: 600;
    line-height: 1.16;
    color: #fff;
    margin: 0 0 1.1rem;
}
.hv-hero__lead {
    font-size: clamp(1rem, 1.15vw, 1.1rem);
    line-height: 1.65;
    color: rgba(255, 255, 255, .8);
    max-width: 33rem;
    margin: 0 0 1.9rem;
}

/* ---------- 2. Client logos (shared marquee block) ----------
   Thin quiet rail between the hero and the numbers strip: the logos are
   proof, not a section, so no heading and no frames. Base styles live in
   redesign.css; everything here only turns the volume down. */
.hv-page .logo-marquee-section {
    padding: 0;
    background: #fff;
    border-bottom: 1px solid var(--hv-line);
}
.hv-page .logo-marquee__track {
    gap: clamp(2.5rem, 5vw, 4.5rem);
    padding: 1.05rem 0;
    /* 15 logos, doubled for the loop: slow enough to read a name in passing */
    animation-duration: 90s;
}
.hv-page .logo-marquee__item { height: 32px; }
.hv-page .logo-marquee__item img {
    max-height: 32px;
    max-width: 112px;
    filter: grayscale(1) opacity(.48);
}
.hv-page .logo-marquee__item img:hover { filter: grayscale(1) opacity(.72); }
@media (prefers-reduced-motion: reduce) {
    .hv-page .logo-marquee__track { animation: none; }
}

/* ---------- 3. Numbers strip ---------- */
.hv-numbers {
    background: #0f1317;
    color: #fff;
    padding: 1.25rem 0;
}
.hv-numbers__row {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 4rem;
    margin: 0;
}
.hv-number { min-width: 8rem; }
.hv-number__value {
    font-size: clamp(1.2rem, 1.9vw, 1.5rem);
    font-weight: 600;
    line-height: 1.1;
    color: #fff;
}
.hv-number__label {
    margin: .15rem 0 0;
    font-size: .8rem;
    line-height: 1.35;
    color: rgba(255, 255, 255, .55);
}
.hv-numbers__note {
    margin: .9rem 0 0;
    font-size: .78rem;
    color: rgba(255, 255, 255, .4);
}

/* ---------- 4. Directions — horizontal bands ---------- */
.hv-dirs { padding: var(--hv-section-y) 0 calc(var(--hv-section-y) - 1rem); }
.hv-dirs__head { max-width: var(--hv-measure); margin-bottom: clamp(1.75rem, 3vw, 2.75rem); }
.hv-dirs__lead { margin: .9rem 0 0; color: var(--hv-muted); }

.hv-band {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: clamp(1.5rem, 3.5vw, 3.25rem);
    align-items: center;
    padding: clamp(1.5rem, 2.4vw, 2rem) 0;
    border-top: 1px solid var(--hv-line);
}
.hv-band:last-of-type { border-bottom: 1px solid var(--hv-line); }
.hv-band__media {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--hv-paper);
}
.hv-band__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.hv-band__num {
    display: block;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .12em;
    color: var(--hv-accent);
    margin-bottom: .6rem;
    font-variant-numeric: tabular-nums;
}
.hv-band__title {
    font-size: clamp(1.25rem, 2vw, 1.65rem);
    font-weight: 600;
    margin: 0 0 .6rem;
}
.hv-band__line {
    max-width: 34rem;
    margin: 0 0 1.4rem;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--hv-body);
}
.hv-band__metrics {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 2.5rem;
    margin: 0 0 1.4rem;
    padding-top: 1.1rem;
    border-top: 1px solid var(--hv-line-soft);
}
.hv-band__metric dt {
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--hv-ink);
    line-height: 1.15;
}
.hv-band__metric dd {
    margin: .2rem 0 0;
    max-width: 12rem;
    font-size: .82rem;
    line-height: 1.4;
    color: var(--hv-muted);
}
.hv-band__link {
    font-size: .92rem;
    font-weight: 600;
    color: var(--hv-accent);
    text-decoration: none;
}
.hv-band__link:hover { color: var(--hv-accent-dark); text-decoration: underline; }
.hv-band__link i { font-size: .8rem; }

.hv-dirs__footnote {
    max-width: 46rem;
    margin: 1.5rem 0 0;
    font-size: .92rem;
    line-height: 1.6;
    color: var(--hv-muted);
}
.hv-dirs__footnote a { font-weight: 600; color: var(--hv-accent); white-space: nowrap; }

/* ---------- 5. Pilot timeline ----------
   Neighbours are photo bands above and cards below, so this is a third
   shape: one continuous rail with the steps hanging off it. The rail is
   the cells' own border-top, which is why the grid has no column gap —
   any gap would break the line between steps. */
.hv-pilot {
    padding: var(--hv-section-y) 0;
    background: #fff;
    border-top: 1px solid var(--hv-line-soft);
}
.hv-pilot__head { max-width: var(--hv-measure); margin-bottom: clamp(1.75rem, 3vw, 2.5rem); }
.hv-pilot__lead { margin: .9rem 0 0; color: var(--hv-muted); }

.hv-pilot__track {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    margin: 0;
    padding: 0;
}
.hv-pilot__step {
    position: relative;
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--hv-line);
    padding: 1.15rem clamp(1.1rem, 2.4vw, 2.25rem) 0 0;
}
.hv-pilot__step:last-child { padding-right: 0; }
.hv-pilot__marker {
    position: absolute;
    top: -4px;
    left: 0;
    width: 7px;
    height: 7px;
    background: var(--hv-accent);
    border-radius: 50%;
}
.hv-pilot__period {
    display: block;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--hv-accent);
    margin-bottom: .45rem;
}
.hv-pilot__step-title {
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.3;
    margin: 0 0 .5rem;
}
.hv-pilot__text {
    margin: 0 0 .9rem;
    font-size: .9rem;
    line-height: 1.55;
    color: var(--hv-body);
}
.hv-pilot__deliverable {
    /* Pushed to the bottom of the cell so the four rules line up across the
       row: the step texts are different lengths and would stagger otherwise. */
    margin: auto 0 0;
    padding-top: .7rem;
    border-top: 1px solid var(--hv-line-soft);
    font-size: .85rem;
    line-height: 1.45;
    color: var(--hv-ink);
}
.hv-pilot__deliverable-label {
    display: block;
    font-size: .68rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--hv-muted);
    margin-bottom: .2rem;
}

.hv-pilot__outcome {
    margin-top: clamp(1.5rem, 2.5vw, 2rem);
    padding: clamp(1.1rem, 2vw, 1.4rem) clamp(1.25rem, 2.4vw, 1.75rem);
    background: var(--hv-paper);
    border-left: 2px solid var(--hv-ink);
}
.hv-pilot__outcome-title {
    font-size: 1.02rem;
    font-weight: 600;
    margin: 0 0 .85rem;
}
.hv-pilot__outcome-list {
    list-style: none;
    margin: 0;
    padding: 0;
    columns: 2;
    column-gap: 2.5rem;
}
.hv-pilot__outcome-list li {
    break-inside: avoid;
    position: relative;
    padding: 0 0 .5rem 1.1rem;
    font-size: .92rem;
    line-height: 1.5;
    color: var(--hv-body);
}
.hv-pilot__outcome-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: .62em;
    width: 5px;
    height: 1px;
    background: var(--hv-muted);
}
.hv-pilot__note {
    margin: .9rem 0 0;
    padding-top: .85rem;
    border-top: 1px solid var(--hv-line);
    font-size: .88rem;
    line-height: 1.6;
    color: var(--hv-muted);
}

/* ---------- 6. Situation selector (shared block) ---------- */
.hv-page .section-gradient {
    padding: var(--hv-section-y) 0;
    background: var(--hv-paper) !important;
}
.hv-page .section-gradient .text-center.mb-5 {
    margin-bottom: 2rem !important;
    text-align: left !important;
}
.hv-page .section-gradient .section-title-accent {
    font-size: clamp(1.45rem, 2.5vw, 2.05rem) !important;
    font-weight: 600;
    text-align: left !important;
}
.hv-page .section-gradient .lead { font-size: 1rem; color: var(--hv-muted) !important; }
.hv-page .situation-panel { border-radius: 2px; }
.hv-page .situation-tab { border-radius: 2px; }
.hv-page .section-gradient .btn-primary,
.hv-page .section-gradient .btn-outline-primary {
    border-radius: 2px;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 600;
}
.hv-page .section-gradient .btn-primary {
    background: var(--hv-accent);
    border-color: var(--hv-accent);
}
.hv-page .section-gradient .btn-outline-primary {
    color: var(--hv-accent);
    border-color: var(--hv-line);
}
.hv-page .section-gradient .situation-panel__case-card { border-radius: 2px; }
/* The card is one flex row and only the title may shrink; without min-width
   it keeps its full text width and pushes the metric and arrow off a 390px
   screen. min-width:0 lets the case name wrap instead. */
.hv-page .section-gradient .situation-panel__case-title { min-width: 0; }
.hv-page .section-gradient .situation-panel__metric-number,
.hv-page .section-gradient .situation-panel__case-metric,
.hv-page .section-gradient .situation-tab.active .situation-tab__label,
.hv-page .section-gradient .situation-tab__label { color: var(--hv-accent); }
.hv-page .section-gradient .situation-tab:not(.active) .situation-tab__label { color: var(--hv-ink); }

/* The block centres its heading rule via .text-center; with the heading
   pulled left the rule ends up floating in the middle of the section. */
.hv-page .section-title-accent::after {
    left: 0 !important;
    transform: none !important;
    border-radius: 0;
    background: var(--hv-ink);
    width: 2.5rem;
    height: 2px;
}

/* ---------- 7. Cases (shared showcase block) ---------- */
.hv-page .hv-cases {
    padding: var(--hv-section-y) 0;
    background: #fff !important;
}
.hv-page .hv-cases .text-center.mb-5 {
    margin-bottom: 2rem !important;
    text-align: left !important;
}
.hv-page .hv-cases .section-title-accent {
    font-size: clamp(1.45rem, 2.5vw, 2.05rem) !important;
    font-weight: 600;
    text-align: left !important;
}
.hv-page .hv-cases .lead { font-size: 1rem; color: var(--hv-muted) !important; }
.hv-page .hv-cases .card-case {
    border-radius: 2px;
    border-color: var(--hv-line);
    box-shadow: none;
}
.hv-page .hv-cases .card-case:hover {
    transform: none;
    box-shadow: none;
    border-color: var(--hv-accent);
}
.hv-page .hv-cases .card-case__tag {
    background: var(--hv-paper);
    color: var(--hv-muted);
    border-radius: 2px;
    letter-spacing: .06em;
}
.hv-page .hv-cases .card-case__tag--industry { background: var(--hv-paper); color: var(--hv-muted); }
.hv-page .hv-cases .card-case__metric { text-align: left; }
.hv-page .hv-cases .card-case__metric-value { color: var(--hv-ink); font-weight: 600; }
.hv-page .hv-cases .card-case__metric-label { color: var(--hv-muted); }
.hv-page .hv-cases .card-case .btn {
    border-radius: 2px;
    background: transparent;
    border-color: var(--hv-line);
    color: var(--hv-accent);
}
.hv-page .hv-cases .card-case .btn:hover {
    background: var(--hv-accent);
    border-color: var(--hv-accent);
    color: #fff;
}
@media (min-width: 992px) {
    /* Bootstrap columns leave a hole in the second row with three cases;
       a 3-column grid lets the featured case and the "all cases" link
       span two cells each and close it. */
    .hv-page .hv-cases .row {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1.5rem;
        margin: 0;
    }
    .hv-page .hv-cases .row > [class*="col-"] { width: auto; max-width: none; padding: 0; }
    .hv-page .hv-cases .row > .col-lg-8 { grid-column: span 2; }
}
.hv-page .cases-showcase__all {
    display: inline-block;
    margin-top: 1.75rem;
    font-size: .95rem;
    font-weight: 600;
    color: var(--hv-accent);
    text-decoration: none;
}
.hv-page .cases-showcase__all:hover { text-decoration: underline; }

/* ---------- 8. Free diagnostics — a list, not cards ---------- */
.hv-tools {
    padding: var(--hv-section-y) 0;
    background: var(--hv-paper);
    border-top: 1px solid var(--hv-line);
    border-bottom: 1px solid var(--hv-line);
}
.hv-tools__head { max-width: var(--hv-measure); }
.hv-tools__lead { margin: .9rem 0 0; color: var(--hv-muted); }
.hv-tools__list {
    list-style: none;
    margin: clamp(1.5rem, 3vw, 2.25rem) 0 0;
    padding: 0;
}
.hv-tool { border-top: 1px solid var(--hv-line); }
.hv-tool:last-child { border-bottom: 1px solid var(--hv-line); }
.hv-tool__link {
    display: flex;
    align-items: baseline;
    gap: 1.25rem;
    padding: 1rem .5rem;
    text-decoration: none;
    color: inherit;
    transition: background-color .16s ease;
}
.hv-tool__link:hover { background: #eef1f5; }
.hv-tool__num {
    flex: 0 0 auto;
    font-size: .78rem;
    font-weight: 700;
    color: #a3acb8;
    font-variant-numeric: tabular-nums;
}
.hv-tool__text { display: flex; flex-direction: column; min-width: 0; }
.hv-tool__title {
    font-size: 1.02rem;
    font-weight: 600;
    color: var(--hv-ink);
    line-height: 1.35;
}
.hv-tool__line {
    font-size: .9rem;
    line-height: 1.5;
    color: var(--hv-muted);
    max-width: 40rem;
}
.hv-tool__meta {
    margin-left: auto;
    font-size: .8rem;
    color: var(--hv-muted);
    white-space: nowrap;
}
.hv-tool__arrow { color: var(--hv-accent); font-size: .8rem; }

/* ---------- 9. Insights ---------- */
.hv-insights { padding: var(--hv-section-y) 0; }
.hv-insights__head { max-width: var(--hv-measure); margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.hv-insights__lead { margin: .9rem 0 0; color: var(--hv-muted); }
.hv-insights__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1.5rem, 3vw, 2.75rem);
}
.hv-insight {
    display: flex;
    flex-direction: column;
    padding-top: 1.1rem;
    border-top: 2px solid var(--hv-ink);
    text-decoration: none;
    color: inherit;
}
.hv-insight__date {
    font-size: .76rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--hv-muted);
}
.hv-insight__title {
    font-size: 1.08rem;
    font-weight: 600;
    line-height: 1.35;
    margin: .55rem 0 .5rem;
}
.hv-insight:hover .hv-insight__title { color: var(--hv-accent); }
.hv-insight__intro {
    font-size: .92rem;
    line-height: 1.55;
    color: var(--hv-muted);
    margin: 0 0 .9rem;
}
.hv-insight__more {
    margin-top: auto;
    font-size: .85rem;
    font-weight: 600;
    color: var(--hv-accent);
}
.hv-insight__more i { font-size: .75rem; }
.hv-insights__all { display: inline-block; margin-top: 1.75rem; font-weight: 600; color: var(--hv-accent); text-decoration: none; }
.hv-insights__all:hover { text-decoration: underline; }

/* ---------- 10. Who runs it ---------- */
.hv-expert {
    padding: var(--hv-section-y) 0;
    background: var(--hv-paper);
    border-top: 1px solid var(--hv-line);
}
.hv-expert__grid {
    display: grid;
    grid-template-columns: minmax(0, 18rem) minmax(0, 1fr);
    gap: clamp(1.75rem, 4vw, 3.5rem);
    align-items: start;
}
.hv-expert__portrait { margin: 0; }
.hv-expert__portrait img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
    filter: saturate(.92);
}
.hv-expert__name {
    margin: 1.1rem 0 .15rem;
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--hv-ink);
}
.hv-expert__role {
    margin: 0 0 1.4rem;
    max-width: 32rem;
    color: var(--hv-muted);
    font-size: .95rem;
    line-height: 1.5;
}
.hv-expert__facts {
    list-style: none;
    margin: 0;
    padding: 0;
    columns: 2;
    column-gap: 3rem;
}
.hv-expert__facts li {
    break-inside: avoid;
    padding: .75rem 0;
    border-top: 1px solid var(--hv-line);
    font-size: .95rem;
    line-height: 1.55;
    color: var(--hv-body);
}
.hv-expert__background {
    max-width: 44rem;
    margin: 1.5rem 0 0;
    padding-left: 1rem;
    border-left: 2px solid var(--hv-line);
    font-size: .95rem;
    line-height: 1.65;
    color: var(--hv-body);
}
.hv-expert__background a { font-weight: 600; color: var(--hv-accent); }
.hv-expert__footnote {
    max-width: 44rem;
    margin: 1.1rem 0 0;
    font-size: .88rem;
    line-height: 1.6;
    color: var(--hv-muted);
}
.hv-expert__link { display: inline-block; margin-top: 1rem; font-weight: 600; color: var(--hv-accent); text-decoration: none; }
.hv-expert__link:hover { text-decoration: underline; }

/* ---------- 11. Closing call ---------- */
.hv-close {
    background: var(--hv-dark);
    color: #fff;
    padding: clamp(3rem, 5vw, 4.5rem) 0;
}
.hv-close__title {
    font-size: clamp(1.5rem, 2.7vw, 2.15rem);
    font-weight: 600;
    color: #fff;
    max-width: 32rem;
    margin: 0 0 .8rem;
}
.hv-close__text {
    max-width: 32rem;
    margin: 0 0 1.9rem;
    font-size: 1rem;
    line-height: 1.65;
    color: rgba(255, 255, 255, .74);
}
.hv-close__note {
    margin: 1.1rem 0 0;
    font-size: .85rem;
    color: rgba(255, 255, 255, .5);
}

/* ---------- Responsive ---------- */
@media (max-width: 991.98px) {
    .hv-band {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }
    .hv-band__media { aspect-ratio: 16 / 9; }
    .hv-pilot__track { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hv-pilot__step { padding-bottom: 1.5rem; }
    .hv-pilot__step:nth-child(2n) { padding-right: 0; }
    .hv-insights__grid { grid-template-columns: 1fr; gap: 1.5rem; }
    .hv-expert__grid { grid-template-columns: 1fr; }
    .hv-expert__portrait img { max-width: 14rem; }
    .hv-expert__facts { columns: 1; }
}

@media (max-width: 575.98px) {
    .hv-hero { min-height: clamp(19rem, 58vh, 26rem); }
    .hv-hero .hv-btn { display: block; text-align: center; }
    .hv-numbers__row { gap: 1rem 2rem; }
    .hv-number { min-width: 7rem; }
    .hv-band__metrics {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .9rem 1.25rem;
    }
    .hv-tool__link { flex-wrap: wrap; gap: .4rem 1rem; }
    .hv-tool__meta { margin-left: 0; width: 100%; }
    .hv-tool__arrow { display: none; }
    /* One column: the rail turns from a horizontal line into a vertical one,
       so the border moves from the top of each cell to its left edge. */
    .hv-pilot__track { grid-template-columns: 1fr; }
    .hv-pilot__step {
        border-top: 0;
        border-left: 1px solid var(--hv-line);
        padding: 0 0 1.6rem 1.25rem;
    }
    .hv-pilot__step:last-child { padding-bottom: 0; }
    .hv-pilot__marker { top: .3rem; left: -4px; }
    .hv-pilot__outcome-list { columns: 1; }
}