/*!
 * HERO V6 — "Blob Studio" (2026-07)
 * Compact LIGHT hero for the homepage, scoped to .vk-hero--v6. Supersedes
 * hero-v5.css ("Golden Atelier · Table Edition") — kept on disk for
 * rollback, same as v4/v3/v2 before it.
 *
 * Brief: reference layout supplied by the client — small "hi there" eyebrow,
 * huge bold black headline with ONE accent-colour word, short lead, a single
 * dark pill CTA, and on the right a cutout portrait sitting across two
 * overlapping organic blob shapes (dark + accent) with small floating
 * stat/identity cards and a faint dot-grid decoration. Recoloured onto this
 * site's own tokens: charcoal ink + gold accent (--vk-gold*) instead of the
 * reference's pink/navy, white background instead of pale pink-white.
 *
 * Behaviour reused from wickets-home.js hooks: [data-count] count-up,
 * .vk-magnetic, .vk-w headline stagger. No new JS.
 */

/* ------------------------------------------------------------------
   Section shell — compact banner, white ground
   ------------------------------------------------------------------ */
body.vk .vk-hero--v6 {
    display: block !important;
    min-height: 0 !important;
    padding: clamp(6px, 0.8vw, 12px) var(--vk-pad) 0 !important;
    overflow: hidden !important;
    background: #FFFFFF !important;
}

.hv6-dots {
    position: absolute; z-index: 0; pointer-events: none;
    background-image: radial-gradient(rgba(26, 24, 19, 0.18) 1.6px, transparent 2px);
    background-size: 15px 15px;
}
.hv6-dots--a { width: 130px; height: 130px; top: 8%; right: 6%; }
.hv6-dots--b { width: 110px; height: 110px; left: 2%; bottom: 6%; opacity: .7; }

/* ------------------------------------------------------------------
   Split grid
   ------------------------------------------------------------------ */
.hv6-inner {
    position: relative;
    z-index: 2;
    max-width: var(--vk-max);
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
    gap: clamp(28px, 4.5vw, 70px);
    align-items: center;
}

/* ------------------------------------------------------------------
   Copy column
   ------------------------------------------------------------------ */
.hv6-copy { display: flex; flex-direction: column; align-items: flex-start; }

.hv6-hi {
    font-family: var(--vk-font-bn);
    font-size: 15px;
    font-weight: 600;
    color: #6B6353;
    margin: 0 0 6px;
}

.vk-hero--v6 .hv6-title {
    font-family: var(--vk-font-bn);
    font-size: clamp(15px, 1.75vw, 24px);
    line-height: 1.2;
    padding-top: 0.12em;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #17150F;
    margin: 0 0 14px;
    white-space: nowrap;
}
.vk-hero--v6 .hv6-title .vk-headline { white-space: nowrap; }
.vk-hero--v6 .vk-headline > .vk-w:nth-child(9) { --i: 8; }
/* one-line headline: the shared .vk-w--break span is a block-level line
   break by default (used to wrap this same headline in v3/v5) — neutralise
   it here so nothing forces a second line */
.vk-hero--v6 .vk-w--break { display: inline; width: 0; }

.vk-hero--v6 .hv6-w--grad {
    color: #D39E00 !important;
    -webkit-text-fill-color: #D39E00;
    animation: vk-word-in 1s cubic-bezier(.2,.7,.15,1) forwards calc(0.1s + var(--i, 0) * 0.08s);
}
.vk-hero--v6 .hv6-w--brand {
    font-family: var(--vk-font-en);
    font-style: italic;
    font-weight: 800;
    letter-spacing: -0.01em;
    padding-right: .1em;
}
.vk-hero--v6 .hv6-w--em {
    font-style: italic;
    font-weight: 800;
    padding-right: .22em;
    margin-right: -.22em;
}

.hv6-lead {
    max-width: 50ch;
    margin: 0 0 22px;
    font-size: clamp(14px, 1.15vw, 15.5px);
    line-height: 1.68;
    color: #6B6353;
}

.hv6-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }

/* ------------------------------------------------------------------
   Visual column — blob stack + cutout photo + floating cards
   ------------------------------------------------------------------ */
.hv6-visual { position: relative; display: flex; justify-content: center; padding: 6px 0 16px; }
.hv6-blobstack { position: relative; width: clamp(300px, 30vw, 400px); aspect-ratio: 1 / 1.02; }

.hv6-blob {
    position: absolute;
    z-index: 0;
}
.hv6-blob--dark {
    inset: 4% 10% 14% 0;
    border-radius: 42% 58% 68% 32% / 45% 40% 60% 55%;
    background: linear-gradient(150deg, #211D14 0%, #17150F 100%);
}
.hv6-blob--gold {
    inset: 30% 0 0% 22%;
    border-radius: 60% 40% 35% 65% / 55% 60% 40% 45%;
    background: linear-gradient(150deg, #FFCF3D 0%, #E8AE00 55%, #C49300 100%);
}

.hv6-photo {
    position: absolute;
    z-index: 2;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 96%;
    height: 96%;
    /* real alpha-cutout PNG now (rembg) — no crop needed, no mask needed;
       "cover" era's radial-gradient soft-edge mask is gone along with it */
    object-fit: contain;
    object-position: 50% 100%;
    filter: drop-shadow(0 22px 26px rgba(23, 21, 15, 0.32));
}

/* floating cards — same white-card language as the rest of the page */
.hv6-card {
    position: absolute;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px 10px 10px;
    border-radius: 16px;
    background: #FFFFFF;
    border: 1px solid rgba(26, 24, 19, 0.08);
    box-shadow: 0 16px 38px -10px rgba(23, 21, 15, 0.28), 0 1px 0 rgba(255, 255, 255, 0.8) inset;
    white-space: nowrap;
    animation: hv6-float 6s ease-in-out infinite;
}
.hv6-card__icon {
    flex: 0 0 auto;
    width: 34px; height: 34px;
    border-radius: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, #FFCF3D 0%, #F7B900 55%, #E6AD00 100%);
    color: #1A1813;
    box-shadow: 0 6px 14px rgba(200, 134, 11, 0.35);
}
.hv6-card__num {
    display: block;
    font-family: var(--vk-font-en);
    font-size: 15px;
    font-weight: 800;
    color: #17150F;
    line-height: 1.3;
}
.hv6-card__lbl {
    display: block;
    font-family: var(--vk-font-bn);
    font-size: 11px;
    font-weight: 600;
    color: #6B6353;
}
.hv6-card--stat1 { top: 4%; left: -6%; animation-delay: .2s; }
.hv6-card--stat2 { top: 30%; right: -9%; animation-delay: .9s; }
.hv6-card--agent {
    left: 50%; bottom: 2%; transform: translateX(-50%);
    padding: 9px 18px 9px 9px;
    animation-delay: .5s;
}
.hv6-card--agent .hv6-card__icon {
    width: 30px; height: 30px; border-radius: 50%;
    background: #17150F; color: #F7B900;
    font-family: var(--vk-font-en); font-weight: 800; font-size: 13px;
}
.hv6-card--agent .hv6-card__num { font-size: 13.5px; }
.hv6-card--agent .hv6-card__lbl { font-size: 10.5px; }

/* ------------------------------------------------------------------
   Official links — slim white strip spanning the hero, above the marquee
   ------------------------------------------------------------------ */
.hv6-links {
    position: relative;
    z-index: 2;
    max-width: var(--vk-max);
    margin: clamp(2px, 0.6vw, 8px) auto 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px 18px;
    padding: 10px 18px;
    border-radius: 18px;
    background: #FFFCF9;
    border: 1px solid rgba(26, 24, 19, 0.08);
    box-shadow: 0 14px 36px -12px rgba(168, 112, 0, 0.20), 0 1px 0 rgba(255, 255, 255, 0.8) inset;
}
.hv6-links__head { display: inline-flex; align-items: center; gap: 10px; margin-right: 4px; }
.hv6-links__shield {
    flex: 0 0 auto; width: 30px; height: 30px; border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center;
    color: #F7B900; background: #1A1813; box-shadow: 0 5px 12px rgba(26, 24, 19, 0.28);
}
.hv6-links__title { font-size: 14px; font-weight: 800; color: #1A1813; white-space: nowrap; }
.hv6-links__title em { font-style: normal; color: #D39E00; }
.hv6-links__list { display: flex; flex-wrap: wrap; gap: 9px; margin-left: auto; }
.hv6-link {
    display: inline-flex; align-items: center; gap: 9px;
    padding: 8px 9px 8px 15px; border-radius: var(--vk-r-pill);
    background: #FFFFFF; border: 1px solid rgba(200, 134, 11, 0.26);
    transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.hv6-link:hover { transform: translateY(-2px); border-color: #F7B900; box-shadow: 0 10px 22px rgba(200, 134, 11, 0.18); }
.hv6-link__url { font-family: var(--vk-font-en); font-size: 13px; font-weight: 600; color: #4A4335; white-space: nowrap; }
.hv6-link:hover .hv6-link__url { color: #1A1813; }
.hv6-link__go {
    flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    color: #F7B900; background: #1A1813; transition: transform .3s ease;
}
.hv6-link:hover .hv6-link__go { transform: rotate(-40deg); }

/* ------------------------------------------------------------------
   Trust marquee
   ------------------------------------------------------------------ */
.hv6-marq {
    position: relative; z-index: 2;
    margin: clamp(6px, 1vw, 12px) calc(-1 * var(--vk-pad)) 0;
    padding: 10px 0;
    background: #FFFCF9;
    border-top: 1px solid rgba(200, 134, 11, 0.16);
    border-bottom: 1px solid rgba(200, 134, 11, 0.16);
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 7%, #000 93%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 7%, #000 93%, transparent 100%);
}
.hv6-marq__track { display: flex; width: max-content; animation: hv6-marq 42s linear infinite; will-change: transform; }
@keyframes hv6-marq { to { transform: translateX(-50%); } }
.hv6-marq:hover .hv6-marq__track { animation-play-state: paused; }
.hv6-mchip {
    display: inline-flex; align-items: center; gap: 8px;
    margin-right: 30px; padding: 7px 16px; border-radius: var(--vk-r-pill);
    background: #FFFFFF; border: 1px solid rgba(200, 134, 11, 0.24);
    color: #4A4335; font-size: 13px; font-weight: 600; white-space: nowrap;
}
.hv6-mchip svg { color: #E8AE00; flex: 0 0 auto; }

/* ------------------------------------------------------------------
   Entrance + float animations
   ------------------------------------------------------------------ */
@keyframes hv6-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes hv6-rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } }
.hv6-hi     { animation: hv6-rise .6s cubic-bezier(.2,.7,.15,1) both .0s; }
.hv6-lead   { animation: hv6-rise .7s cubic-bezier(.2,.7,.15,1) both .40s; }
.hv6-cta    { animation: hv6-rise .7s cubic-bezier(.2,.7,.15,1) both .55s; }
.hv6-visual { animation: hv6-rise .9s cubic-bezier(.2,.7,.15,1) both .2s; }
.hv6-links  { animation: hv6-rise .7s cubic-bezier(.2,.7,.15,1) both .75s; }

/* ------------------------------------------------------------------
   Responsive
   ------------------------------------------------------------------ */
@media (max-width: 960px) {
    .hv6-inner { grid-template-columns: 1fr; gap: 26px; }
    .hv6-copy { align-items: center; text-align: center; }
    .hv6-lead { margin-inline: auto; }
    .hv6-cta { justify-content: center; }
    .hv6-blobstack { width: min(78vw, 380px); }
    .hv6-links { justify-content: center; }
    .hv6-links__list { margin-left: 0; justify-content: center; }
    .hv6-dots { display: none; }
    /* one-line headline only holds up while the copy column has real
       width (desktop split layout) — once it stacks full-width, go back
       to wrapping at a readable size instead of shrinking to nothing */
    .vk-hero--v6 .hv6-title,
    .vk-hero--v6 .hv6-title .vk-headline { white-space: normal; }
    .vk-hero--v6 .hv6-title { font-size: clamp(26px, 3.6vw, 36px); }
    .vk-hero--v6 .vk-w--break { display: block; width: auto; height: 0; }
}
@media (max-width: 640px) {
    .vk-hero--v6 .hv6-title { font-size: clamp(27px, 8vw, 36px); }
    .hv6-cta { flex-direction: column; align-items: stretch; width: 100%; max-width: 380px; margin-inline: auto; }
    .hv6-cta .vk-btn { justify-content: center; }
    .hv6-card { padding: 8px 12px 8px 8px; }
    .hv6-card__num { font-size: 13px; }
    .hv6-card--stat1 { left: -3%; }
    .hv6-card--stat2 { right: -4%; }
}

/* ------------------------------------------------------------------
   Motion safety
   ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
    .hv6-hi, .hv6-lead, .hv6-cta, .hv6-visual, .hv6-links, .hv6-card,
    .hv6-marq__track { animation: none !important; opacity: 1 !important; }
    .hv6-link { transition: none; }
}