/* Homepage (landing) — ring motif, hero, sections. Loaded only on index.php. */
.landing-page { background: #141516; color: #d4d4d4; }
.vz-home { width: min(1200px, 88%); margin-inline: auto; padding-top: 76px; }
.vz-home h2 { margin-top: 12px; color: #eceae5; font-size: clamp(26px, 3vw, 36px); font-weight: 500; line-height: 1.25; letter-spacing: -.025em; }
.vz-home h3 { color: #eceae5; font-weight: 500; letter-spacing: -.01em; }
.vz-home .home-eyebrow { font-size: 11px; }

/* Hero */
.vz-hero { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: center; gap: clamp(24px, 4vw, 56px); min-height: calc(100vh - 76px - 96px); min-height: calc(100svh - 76px - 96px); padding: 48px 0 40px; }
.vz-hero h1 { margin: 22px 0 22px; color: #eceae5; font-size: clamp(38px, 5vw, 68px); font-weight: 500; line-height: 1.06; letter-spacing: -.045em; }
.vz-hero h1 span { color: #EABD7C; }
.vz-lead { max-width: 540px; color: #b4b4b0; font-size: clamp(16px, 1.3vw, 18px); line-height: 1.75; }
.vz-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

/* Rings — the brand signature */
.vz-hero-visual { position: relative; width: 100%; max-width: 520px; aspect-ratio: 1; justify-self: center; display: grid; place-items: center; }
.vz-rings { position: absolute; inset: 0; }
.vz-rings span { position: absolute; top: 50%; left: 50%; border: 1px solid rgba(255, 255, 255, .1); border-radius: 50%; transform: translate(-50%, -50%) scale(1); opacity: 0; animation: vzRingIn .6s ease-out forwards; }
.vz-rings span:nth-child(1) { width: 36%; height: 36%; border-color: rgba(234, 189, 124, .55); animation-delay: .15s; }
.vz-rings span:nth-child(2) { width: 52%; height: 52%; animation-delay: .25s; }
.vz-rings span:nth-child(3) { width: 68%; height: 68%; animation-delay: .35s; }
.vz-rings span:nth-child(4) { width: 84%; height: 84%; animation-delay: .45s; }
.vz-rings span:nth-child(5) { width: 100%; height: 100%; animation-delay: .55s; }
.vz-orbit-dot { position: absolute; inset: 8%; border-radius: 50%; animation: vzOrbit 18s linear infinite; }
.vz-orbit-dot::after { content: ""; position: absolute; top: 50%; right: -5px; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; background: #EABD7C; }
.vz-core { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.vz-mark { display: block; width: clamp(104px, 12vw, 150px); height: auto; }
.vz-core-word { color: #eceae5; font-size: clamp(14px, 1.4vw, 17px); font-weight: 700; letter-spacing: 6px; padding-left: 6px; }
.vz-core-word b, .vz-intro-word b { color: #EABD7C; }
@keyframes vzRingIn { from { opacity: 0; transform: translate(-50%, -50%) scale(.6); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@keyframes vzOrbit { to { transform: rotate(360deg); } }

/* Facts strip */
.vz-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-block: 1px solid #343536; }
.vz-facts > div { padding: 24px 22px; }
.vz-facts > div + div { border-left: 1px solid #343536; }
.vz-facts strong { display: block; color: #eceae5; font-size: clamp(20px, 2vw, 26px); font-weight: 500; letter-spacing: -.02em; }
.vz-facts span { display: block; margin-top: 6px; color: #9e9e9a; font-size: 13px; line-height: 1.5; }

/* Sections */
.vz-section { padding: clamp(56px, 7vw, 96px) 0; border-bottom: 1px solid #343536; }
.vz-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin-bottom: 36px; }
.vz-section-head > p { max-width: 320px; color: #9e9e9a; font-size: 14px; line-height: 1.7; }
.vz-text-link { display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; color: #EABD7C; font-size: 14px; text-decoration: none; }
.vz-text-link:hover { color: #f3cd98; }
.vz-pillars { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.vz-pillars article { padding: 26px 24px 28px; border: 1px solid #343536; border-radius: 5px; background: #191a1b; }
.vz-pillars span, .vz-steps span { color: #EABD7C; font-size: 12px; letter-spacing: 1px; }
.vz-pillars h3 { margin: 22px 0 10px; font-size: 19px; }
.vz-pillars p, .vz-steps p { color: #a9a9a5; font-size: 15px; line-height: 1.7; }
.vz-work { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); border: 1px solid #343536; border-radius: 6px; overflow: hidden; background: #191a1b; }
.vz-work-image { display: block; background: #242526; border-right: 1px solid #343536; }
.vz-work-image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.vz-work-copy { padding: clamp(26px, 4vw, 44px); align-self: center; }
.vz-work-copy h3 { margin: 12px 0 14px; font-size: clamp(26px, 3vw, 34px); }
.vz-work-copy > p:not(.home-eyebrow) { color: #ababaa; font-size: 15px; line-height: 1.75; }
.vz-work-copy .project-tags { margin: 22px 0 26px; }
.vz-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; list-style: none; }
.vz-steps li { padding-top: 20px; border-top: 1px solid #454545; }
.vz-steps h3 { margin: 16px 0 10px; font-size: 19px; }
.vz-why { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid #343536; }
.vz-why > div { padding: 26px 28px 26px 0; border-bottom: 1px solid #343536; }
.vz-why > div:nth-child(even) { padding-left: 28px; border-left: 1px solid #343536; }
.vz-why dt { color: #eceae5; font-size: 18px; font-weight: 500; }
.vz-why dd { margin-top: 8px; color: #a9a9a5; font-size: 15px; line-height: 1.7; }
/* Selected work — two framed storefront screenshots */
/* Slightly wider than the text column: the showcase breaks out to 90% of the screen (max 1280px). */
.vz-showcase { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 2.4vw, 36px); width: min(1280px, 90vw); margin-inline: calc(50% - min(640px, 45vw)); }
.vz-show-frame { display: block; overflow: hidden; border: 1px solid #343536; background: #191a1b; text-decoration: none; }
.vz-show-bar { display: flex; gap: 6px; padding: 10px 12px; border-bottom: 1px solid #343536; }
.vz-show-bar i { width: 8px; height: 8px; border-radius: 50%; background: #454545; }
.vz-show-frame picture, .vz-show-frame img { display: block; width: 100%; height: auto; }
/* Screenshots are shown whole at 16:10 (their own ratio; at most ~1% trimmed so both cards match in height). */
.vz-show-frame img { aspect-ratio: 16 / 10; object-fit: cover; object-position: top center; transition: transform .8s cubic-bezier(.2, .7, .2, 1); }
.vz-show-frame:hover img { transform: scale(1.02); }
.vz-show-copy { padding-top: 22px; }
.vz-show-copy h3 { margin: 10px 0 10px; font-size: clamp(24px, 2.4vw, 30px); }
.vz-show-copy > p:not(.home-eyebrow) { max-width: 460px; margin-bottom: 16px; color: #ababaa; font-size: 15px; line-height: 1.7; }
@media (max-width: 760px) { .vz-showcase { grid-template-columns: minmax(0, 1fr); gap: 44px; width: auto; margin-inline: 0; } }

/* About band — full-width dark panel with half rings that appear on scroll */
.vz-about-band { position: relative; isolation: isolate; padding: clamp(80px, 11vw, 150px) 0; background: #141516; box-shadow: 0 0 0 100vmax #141516; clip-path: inset(0 -100vmax); }
.vz-about-clip { position: absolute; z-index: -1; top: 0; bottom: 0; left: calc(50% - 50vw); right: calc(50% - 50vw + var(--sbw, 0px)); overflow: hidden; pointer-events: none; }
.vz-about-rings { position: absolute; top: 50%; right: 0; width: min(1100px, 150vh); aspect-ratio: 1; transform: translate(50%, -50%); }
.vz-about-rings span { position: absolute; top: 50%; left: 50%; border: 1px solid rgba(255, 255, 255, .24); border-radius: 50%; transform: translate(-50%, -50%) scale(1); transition: opacity .9s ease, transform 1.1s cubic-bezier(.2, .7, .2, 1); }
.vz-about-rings span:nth-child(1) { width: 20%; height: 20%; border-color: rgba(234, 189, 124, .9); }
.vz-about-rings span:nth-child(2) { width: 30%; height: 30%; }
.vz-about-rings span:nth-child(3) { width: 40%; height: 40%; }
.vz-about-rings span:nth-child(4) { width: 50%; height: 50%; }
.vz-about-rings span:nth-child(5) { width: 60%; height: 60%; }
.vz-about-rings span:nth-child(6) { width: 70%; height: 70%; }
.vz-about-rings span:nth-child(7) { width: 80%; height: 80%; }
.vz-about-rings span:nth-child(8) { width: 90%; height: 90%; }
.vz-about-rings span:nth-child(9) { width: 100%; height: 100%; }
.vz-about-rings i { position: absolute; top: 50%; left: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: #EABD7C; transform: rotate(200deg) translateX(calc(min(1100px, 150vh) * .25)); transition: opacity .9s ease; }
.rings-ready .vz-about-rings > * { opacity: 0; }
.rings-ready .vz-about-rings span { transform: translate(-50%, -50%) scale(.82); }
.rings-ready .vz-about-rings > .is-on { opacity: 1; }
.rings-ready .vz-about-rings span.is-on { transform: translate(-50%, -50%) scale(1); }
.vz-about-inner { position: relative; max-width: 620px; }
.vz-about-band h2 { margin: 18px 0 22px; color: #eceae5; font-size: clamp(32px, 4.2vw, 54px); line-height: 1.12; }
.vz-about-band h2 span { color: #EABD7C; }
.vz-about-inner > p:not(.home-eyebrow) { color: #b4b4b0; font-size: clamp(16px, 1.3vw, 18px); line-height: 1.8; }
.vz-about-band .home-eyebrow { color: #EABD7C; }
.vz-about-link { display: inline-flex; align-items: center; gap: 10px; margin-top: 30px; padding-bottom: 6px; border-bottom: 1px solid rgba(234, 189, 124, .5); color: #EABD7C; font-size: 15px; text-decoration: none; }
.vz-about-link:hover { color: #f3cd98; border-bottom-color: #f3cd98; }
.vz-about-band + .vz-section { border-top: 0; }
.vz-section:has(+ .vz-about-band) { border-bottom: 0; }
@media (max-width: 700px) {
    .vz-about-band { padding: 72px 0 300px; }
    .vz-about-rings { top: auto; bottom: 0; right: 0; width: 170vw; transform: translate(35%, 50%); }
    .vz-about-rings i { transform: rotate(200deg) translateX(calc(170vw * .25)); }
}

.vz-cta { margin: 0; padding: clamp(56px, 7vw, 88px) 0; }
.vz-cta .vz-actions { flex: 0 0 auto; flex-wrap: nowrap; margin-top: 0; }

/* Footer */
.vz-footer { width: min(1200px, 88%); margin: 0 auto; padding: 36px 0 48px; display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 28px; border-top: 1px solid #343536; }
.vz-footer-brand p { margin-top: 10px; color: #9e9e9a; font-size: 13px; }
.vz-footer nav { display: flex; flex-wrap: wrap; gap: 22px; }
.vz-footer nav a { display: inline-flex; align-items: center; gap: 6px; color: #b4b4b0; font-size: 14px; text-decoration: none; }
.vz-footer nav a:hover { color: #EABD7C; }

/* Opening animation and loader (driven by the script in index.php).
   1. the V halves slide together  2. the gold dot orbits once and draws the ring  3. the dot of "V." lands
   4. if the page is still loading: the dot keeps orbiting and a progress line + "LOADING 45%" appear
   5. everything leaves in reverse and the homepage appears. A click, tap or key skips it.
   Without JavaScript the overlay is hidden (noscript); as a last resort it also fades out by itself after 9s. */
.vz-intro { position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center; background: #141516; color: #eceae5; --logo-accent: #EABD7C; --vi-track: rgba(255, 255, 255, .14); --vi-label: #9e9e9a; animation: vzIntroOut .4s ease 9s forwards; }
.vz-intro.is-done { animation: vzIntroOut .35s ease forwards; }
.vz-intro-logo { width: clamp(104px, 12vw, 136px); height: auto; overflow: visible; }
.vz-intro-logo .vi-orbit, .vz-intro-logo .vi-dot { transform-box: view-box; }
.vz-intro-logo .vi-orbit { transform-origin: 60px 60px; }
.vz-intro-logo .vi-dot { transform-origin: 79.5px 86px; }
/* Start states: nothing visible until the script animates it. The ring dash is 101 units on a 100-unit ring so it closes without a gap. */
.vi-l, .vi-r, .vi-dot, .vi-orbit circle { opacity: 0; }
.vi-ring { stroke-dasharray: 101 101; stroke-dashoffset: 101; }
.vz-intro-load { position: absolute; top: calc(50% + clamp(78px, 8vw, 98px)); left: 50%; width: 150px; margin-left: -75px; text-align: center; opacity: 0; }
.vz-intro-bar { display: block; height: 2px; border-radius: 2px; background: var(--vi-track); overflow: hidden; }
.vz-intro-bar i { display: block; height: 100%; width: 0; background: var(--logo-accent); transition: width .35s ease; }
.vz-intro-label { display: block; margin-top: 10px; color: var(--vi-label); font-size: 11px; letter-spacing: .16em; font-variant-numeric: tabular-nums; }
@keyframes vzIntroOut { to { opacity: 0; visibility: hidden; } }
.vz-no-intro .vz-intro { display: none; }
/* The hero rings start their own entrance only after the opening animation. */
.vz-intro-active .vz-rings span, .vz-intro-active .vz-orbit-dot { animation-play-state: paused; }

/* Tablet */
@media (max-width: 960px) {
    .vz-hero { grid-template-columns: minmax(0, 1fr); min-height: 0; padding-top: 40px; }
    .vz-hero-visual { max-width: 380px; order: -1; }
    .vz-pillars, .vz-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .vz-work { grid-template-columns: minmax(0, 1fr); }
    .vz-work-image { border-right: 0; border-bottom: 1px solid #343536; }
    .vz-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .vz-facts > div:nth-child(3) { border-left: 0; }
    .vz-facts > div:nth-child(n+3) { border-top: 1px solid #343536; }
}

/* Mobile */
@media (max-width: 600px) {
    .vz-home { padding-top: 64px; }
    .vz-hero { padding: 24px 0 36px; gap: 8px; }
    .vz-hero-visual { max-width: 280px; }
    .vz-hero h1 { font-size: clamp(34px, 9.5vw, 44px); margin: 16px 0; }
    .vz-actions, .vz-cta .vz-actions { flex-wrap: wrap; width: 100%; }
    .vz-actions > a { flex: 1 1 100%; }
    .vz-facts > div { padding: 18px 14px; }
    .vz-section-head { flex-direction: column; align-items: flex-start; gap: 14px; margin-bottom: 26px; }
    .vz-pillars, .vz-steps, .vz-why { grid-template-columns: minmax(0, 1fr); }
    .vz-why > div, .vz-why > div:nth-child(even) { padding: 22px 0; border-left: 0; }
    .vz-footer { flex-direction: column; }
}

/* Breathing room for the larger (66px) section titles.
   Uses the site-wide --vz-section-space (layout.css): ≈ 120px above and below on desktop. */
.vz-section { padding: var(--vz-section-space) 0; }
.vz-section-head { margin-bottom: clamp(36px, 4.5vw, 64px); }
.vz-home .vz-section-head h2 { margin-top: 18px; }
.vz-facts { margin-bottom: clamp(8px, 2vw, 24px); }
.vz-about-band { padding: clamp(72px, 9vw, 130px) 0; }
.vz-about-band h2 { margin: 22px 0 28px; }
body.theme-light .vz-home .site-cta { margin: clamp(72px, 9vw, 130px) 0 clamp(72px, 9vw, 120px); }

/* About band: ring centre moved inside the screen so the innermost (gold) ring is fully visible,
   and the V. monogram fades in at its centre after every ring has appeared (last child in the JS reveal).
   The logo box is sized so the innermost ring plays the part of the logo's own ring. */
.vz-about-rings { width: min(1000px, 140vh); transform: translate(36%, -50%); }
.vz-about-rings i { transform: rotate(200deg) translateX(calc(min(1000px, 140vh) * .25)); }
/* Faint monogram: --lp (0 → 1) is set by the ring script; it rises with each ring and reaches 1 with the last one. */
.vz-about-logo { --lp: 1; position: absolute; top: 50%; left: 50%; width: 22.2%; aspect-ratio: 1; opacity: calc(var(--lp) * .3); transform: translate(-50%, -50%) scale(calc(.9 + var(--lp) * .1)); transition: opacity .9s ease, transform 1.2s cubic-bezier(.2, .7, .2, 1); }
.vz-about-logo svg { display: block; width: 100%; height: 100%; }
.rings-ready .vz-about-rings > .vz-about-logo { opacity: calc(var(--lp) * .3); }
@media (max-width: 700px) {
    .vz-about-band { padding-bottom: 190px; }
    .vz-about-rings { width: 140vw; transform: translate(35%, 30%); }
    .vz-about-rings i { transform: rotate(200deg) translateX(calc(140vw * .25)); }
}

/* Mobile hero: the rings are no longer a separate block above the title. They sit behind the text,
   centred near the right edge of the screen, so about half of them runs off the viewport. */
@media (max-width: 600px) {
    .vz-hero { position: relative; display: block; padding: 28px 0 36px; }
    .vz-hero-copy { position: relative; z-index: 1; }
    .vz-hero-visual {
        --ring: min(520px, 118vw);                     /* size of the outer ring */
        --cx: calc(100vw - 50px);                      /* centre of the rings and the mark, near the right edge */
        position: absolute; z-index: 0; top: -6px; max-width: none; aspect-ratio: auto; display: block;
        left: calc((100% - 100vw) / 2); width: 100vw; height: var(--ring);
        overflow: hidden; pointer-events: none;
    }
    .vz-rings { inset: auto; top: 0; left: calc(var(--cx) - var(--ring) / 2); width: var(--ring); height: var(--ring); }
    .vz-core { position: absolute; top: calc(var(--ring) / 2); left: var(--cx); transform: translate(-50%, -50%); }
    .vz-mark { width: clamp(66px, 20vw, 84px); }
}

/* Calmer mobile hero: one-line eyebrow, fewer and fainter rings, no second logo (it is already in the
   header), and more air between the text blocks. The secondary button gets a solid page background
   so the rings do not show through it. */
.vz-hero .home-secondary { background-color: #141516; }
@media (max-width: 600px) {
    .vz-eyebrow-tech { display: none; }
    .vz-hero h1 { margin: 18px 0 22px; }
    .vz-hero .vz-actions { margin-top: 34px; }
    .vz-hero-visual { top: -70px; }
    .vz-rings { opacity: .75; }
    .vz-rings span:nth-child(2), .vz-rings span:nth-child(4) { display: none; }
    .vz-core { display: none; }
}