/* =====================================================================
   Voldebug: home page
   Dark paper and light ink, one typeface (Archivo), the logo's green used sparingly.
   Wide Archivo for headings echoes the squared VOLDEBUG wordmark.
   ===================================================================== */

:root {
    color-scheme: dark;
    --paper:   #0C0D0B;
    --paper-2: #151713;
    --ink:     #EFECE4;
    --ink-2:   #C9C6BC;
    --mute:    #8E8B82;
    --rule:    rgba(239, 236, 228, .16);
    --green:   #23B26B;
    --green-d: #3FCB85;
    --wrap:    1280px;
    --pad:     clamp(20px, 4vw, 56px);
    --hd:      72px;
    --ease:    cubic-bezier(.2, .7, .1, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html.lenis, html.lenis body { height: auto; scroll-behavior: auto; }
body.v2 {
    margin: 0; background: var(--paper); color: var(--ink-2);
    font: 400 18px/1.55 'Archivo', system-ui, sans-serif; font-stretch: 100%;
    -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip;
}
/* resets carry zero specificity (:where) so component rules always win */
:where(.v2) img { max-width: 100%; display: block; }
:where(.v2) a { color: inherit; }
:where(.v2) :is(h1, h2, h3, p, figure, dl, dd) { margin: 0; }
:where(.v2) :is(h1, h2, h3) { color: var(--ink); font-weight: 700; }
.v2 ::selection { background: var(--ink); color: var(--paper); }
.v2 :focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
.ico { flex: none; transition: transform .35s var(--ease); }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--pad); }
.sr, .hp { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; left: 12px; top: -60px; z-index: 300; background: var(--ink); color: var(--paper); padding: 10px 16px; text-decoration: none; }
.skip:focus { top: 12px; }

/* links and the one button style */
.link { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; text-decoration-color: var(--rule); transition: color .2s, text-decoration-color .2s; }
.link:hover { color: var(--green-d); text-decoration-color: currentColor; }
.btn {
    display: inline-flex; align-items: center; gap: 12px; height: 52px; padding: 0 22px;
    background: var(--ink); color: var(--paper); text-decoration: none; border-radius: 2px;
    font-weight: 600; font-size: 16px; transition: background-color .25s;
}
.btn:hover { background: var(--green); }
.btn:hover .ico, .services a:hover .ico { transform: translateX(4px); }

/* ruled rows: the line is a pseudo-element so it can draw in */
[data-rule] { position: relative; }
[data-rule]::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--rule); transform-origin: 0 50%; }
.motion-live [data-rule]::before { transform: scaleX(0); transition: transform 1.1s var(--ease); }
.motion-live [data-rule].is-drawn::before { transform: scaleX(1); }

/* ------------------------------ header ------------------------------ */
.hd { position: fixed; inset: 0 0 auto; z-index: 100; height: var(--hd); background: var(--paper); border-bottom: 1px solid transparent; transition: transform .45s var(--ease), border-color .3s; }
.hd.is-scrolled { border-bottom-color: var(--rule); }
.hd.is-hidden { transform: translateY(-100%); }
.hd__in { height: 100%; display: flex; align-items: center; gap: 36px; }
.hd__logo img { height: 34px; width: auto; }
.hd__nav { display: flex; gap: 26px; margin-left: auto; font-size: 15px; }
.hd__nav a { text-decoration: none; color: var(--ink-2); transition: color .2s; }
.hd__nav a:hover { color: var(--ink); }
.hd__nav a[aria-current] { color: var(--ink); text-decoration: underline; text-underline-offset: 6px; }
.hd__cta { text-decoration: none; font-size: 15px; font-weight: 600; color: var(--ink); border: 1px solid var(--ink); padding: 8px 14px; border-radius: 2px; transition: background-color .2s, color .2s; }
.hd__cta:hover { background: var(--ink); color: var(--paper); }
.hd__burger { display: none; margin-left: auto; font: 600 15px/1 'Archivo', sans-serif; color: var(--ink); background: none; border: 1px solid var(--ink); border-radius: 2px; padding: 10px 14px; cursor: pointer; }
.menu { position: fixed; inset: 0; z-index: 99; background: var(--paper); padding-top: calc(var(--hd) + 16px); overflow-y: auto; }
.menu__in { display: flex; flex-direction: column; padding-bottom: 40px; }
.menu__in a:not(.btn) { padding: 14px 0; border-bottom: 1px solid var(--rule); text-decoration: none; color: var(--ink); font: 700 clamp(28px, 7vw, 40px)/1.1 'Archivo', sans-serif; font-stretch: 112%; }
.menu__in a[aria-current] { color: var(--green); }
.menu__in .btn { margin-top: 28px; align-self: flex-start; }
body.menu-open { overflow: hidden; }

/* ------------------------------ intro ------------------------------- */
.intro { padding-top: calc(var(--hd) + clamp(40px, 7vw, 104px)); }
.intro__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.intro__who { font-size: 15px; color: var(--mute); }
.intro__title { margin-top: 18px; font-size: clamp(46px, 7.2vw, 108px); line-height: .94; letter-spacing: -.025em; font-stretch: 120%; max-width: 9.5ch; }
.intro__lede { margin-top: 28px; max-width: 32em; font-size: clamp(18px, 1.45vw, 21px); line-height: 1.5; color: var(--ink-2); }
.intro__actions { margin-top: 36px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; font-size: 16px; }
.intro__art { position: relative; aspect-ratio: 1 / 1; max-width: 560px; width: 100%; justify-self: end; }
.intro__art canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

.facts { margin-top: clamp(48px, 7vw, 96px); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 clamp(16px, 3vw, 40px); }
.facts__item { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 6px; padding-top: 18px; }
.facts__item::before { background: var(--ink); }
.facts dd { font-weight: 700; font-stretch: 118%; font-size: clamp(34px, 3.8vw, 54px); line-height: 1; letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.facts dt { font-size: 15px; color: var(--mute); }

/* ---------------------------- photograph ---------------------------- */
.feature { margin-top: clamp(64px, 8vw, 120px); }
.feature__frame { height: clamp(340px, 76vh, 860px); overflow: hidden; background: var(--paper-2); }
.feature__frame img { width: 100%; height: 100%; object-fit: cover; object-position: center 35%; }
.feature figcaption { margin-top: 14px; font-size: 15px; color: var(--mute); }

/* ------------------------------ blocks ------------------------------ */
.block { padding: clamp(80px, 10vw, 150px) 0; }
.block--tint { background: var(--paper-2); }
.block__title { font-size: clamp(32px, 3.9vw, 56px); line-height: 1; letter-spacing: -.02em; font-stretch: 115%; margin-bottom: clamp(32px, 4vw, 56px); }
.block__row { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; margin-bottom: clamp(32px, 4vw, 56px); }
.block__row .block__title { margin-bottom: 0; }

/* clients */
.clients { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 72px); }
.clients__head { font-size: 15px; font-weight: 500; color: var(--mute); margin-bottom: 12px; }
.rows { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--rule); }
.row { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; padding: 15px 0; }
.row__main { font-size: 20px; font-weight: 600; color: var(--ink); text-decoration: none; display: inline-flex; align-items: center; gap: 8px; flex: none; white-space: nowrap; }
a.row__main:hover { color: var(--green-d); }
.row__aside { font-size: 15px; color: var(--mute); text-align: right; min-width: 0; max-width: 24em; }
.clients__more { margin-top: 22px; font-size: 16px; }

/* recognition */
.awards { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--rule); }
.award { display: grid; grid-template-columns: minmax(170px, 240px) minmax(0, 1fr); gap: 8px clamp(20px, 4vw, 56px); padding: 26px 0; }
.award__when { font-size: 15px; color: var(--mute); padding-top: 4px; }
.award__what { display: grid; gap: 6px; max-width: 46em; }
.award__what strong { font-size: clamp(20px, 1.9vw, 27px); line-height: 1.22; font-weight: 650; color: var(--ink); font-stretch: 106%; letter-spacing: -.01em; }
.award__what span { font-size: 16px; color: var(--mute); }
.award__thumb { display: none; }
.award[data-img] .award__what strong { transition: color .2s; }
.award[data-img]:hover .award__what strong { color: var(--green-d); }
.awards__sis { margin-top: 36px; max-width: 44em; }
.peek { position: fixed; left: 0; top: 0; z-index: 50; width: 340px; aspect-ratio: 3 / 2; pointer-events: none; overflow: hidden; opacity: 0; transform: translate(-9999px, 0); transition: opacity .25s; box-shadow: 0 18px 50px rgba(0, 0, 0, .55); }
.peek img { width: 100%; height: 100%; object-fit: cover; }
.peek.is-on { opacity: 1; }

/* services */
.services { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(32px, 5vw, 72px); }
.services li:nth-last-child(-n+2) { border-bottom: 1px solid var(--rule); }
.services a { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 20px; padding: 20px 0; text-decoration: none; }
.services__name { font-size: clamp(19px, 1.6vw, 23px); font-weight: 600; color: var(--ink); transition: color .2s; }
.services__cat { grid-row: 2; font-size: 15px; color: var(--mute); margin-top: 2px; }
.services a .ico { grid-row: 1 / span 2; grid-column: 2; color: var(--mute); }
.services a:hover .services__name { color: var(--green-d); }
.services a:hover .ico { color: var(--green-d); }

/* work */
.work { padding: clamp(80px, 10vw, 150px) 0; border-top: 1px solid var(--rule); }
.work__head { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; margin-bottom: clamp(28px, 3vw, 44px); }
.work__head .block__title { margin-bottom: 0; }
.work__viewport { overflow: hidden; }
.work__track { display: flex; gap: clamp(20px, 2.4vw, 32px); width: max-content; padding-inline: max(var(--pad), calc((100vw - var(--wrap)) / 2 + var(--pad))); }
.proj { position: relative; flex: none; width: min(64vw, 760px); }
.proj__img { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--paper-2); border: 1px solid var(--rule); }
.proj__img img { width: 100%; height: 100%; object-fit: cover; object-position: top center; transform: scale(1.1); }
.proj__meta { margin-top: 18px; display: grid; gap: 6px; }
.proj__meta h3 { font-size: clamp(22px, 2vw, 30px); font-stretch: 112%; letter-spacing: -.015em; }
.proj__meta p { font-size: 16px; color: var(--mute); }
.proj__meta .link { font-size: 15px; justify-self: start; }
.proj__n { position: absolute; top: 12px; right: 12px; background: var(--paper); color: var(--ink); font-size: 13px; padding: 4px 8px; }
.work__bar { margin-top: 28px; height: 1px; background: var(--rule); overflow: hidden; }
.work__bar span { display: block; height: 100%; background: var(--ink); transform-origin: 0 50%; transform: scaleX(0); }

/* people */
.people { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 2.5vw, 32px); }
.person__img { aspect-ratio: 4 / 5; overflow: hidden; background: var(--paper-2); }
.person__img img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; transition: transform .8s var(--ease); }
.person:hover .person__img img { transform: scale(1.04); }
.person figcaption { display: grid; gap: 2px; padding-top: 12px; }
.person figcaption > a, .person figcaption > span:first-child { font-size: 18px; font-weight: 600; color: var(--ink); text-decoration: none; }
.person figcaption > a:hover { text-decoration: underline; text-underline-offset: 4px; }
.person__role { font-size: 15px; color: var(--mute); }

/* contact: raised panel */
.contact { background: var(--paper-2); border-top: 1px solid var(--rule); color: #D9D6CD; padding: clamp(88px, 11vw, 160px) 0 clamp(48px, 6vw, 72px); }
.contact__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 80px); align-items: start; }
.contact__title { color: var(--ink); font-size: clamp(44px, 6.6vw, 100px); line-height: .95; letter-spacing: -.025em; font-stretch: 120%; max-width: 8ch; }
.contact__body { display: grid; gap: 22px; justify-items: start; }
.contact__mail { color: var(--ink); font-size: clamp(24px, 2.6vw, 38px); font-weight: 600; font-stretch: 110%; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 8px; text-decoration-color: rgba(239, 236, 228, .35); transition: text-decoration-color .2s; }
.contact__mail:hover { text-decoration-color: var(--ink); }
.contact__lines { font-size: 16px; line-height: 1.6; color: #A9A69D; }
.contact__lines a { color: #D9D6CD; text-decoration: none; }
.contact .btn { background: var(--ink); color: var(--paper); }
.contact .btn:hover { background: var(--green); color: var(--paper); }
.contact__note { margin-top: clamp(56px, 7vw, 96px); font-size: 15px; color: #A9A69D; }
.contact__note .link { color: #D9D6CD; text-decoration-color: rgba(239, 236, 228, .3); }

/* footer */
.ft { padding: 56px 0 28px; }
.ft__grid { display: grid; grid-template-columns: 1.3fr .8fr 1fr 1.3fr; gap: 40px; }
.ft__brand { display: grid; gap: 16px; align-content: start; font-size: 14px; color: var(--mute); }
.ft__brand img { height: 36px; width: auto; }
.ft__col { display: flex; flex-direction: column; align-items: flex-start; gap: 9px; font-size: 15px; }
.ft__col a { color: var(--ink-2); text-decoration: none; }
.ft__col a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.ft__news p { font-size: 14px; color: var(--mute); }
.news { display: flex; width: 100%; margin-top: 4px; }
.news input[type=email] { flex: 1; min-width: 0; height: 44px; padding: 0 12px; border: 1px solid var(--ink); border-right: 0; border-radius: 2px 0 0 2px; background: transparent; font: inherit; font-size: 15px; color: var(--ink); }
.news input[type=email]:focus { outline: none; background: var(--paper-2); }
.news button { height: 44px; padding: 0 16px; border: 1px solid var(--ink); border-radius: 0 2px 2px 0; background: var(--ink); color: var(--paper); font: 600 15px 'Archivo', sans-serif; cursor: pointer; }
.news button:hover { background: var(--green); border-color: var(--green); }
.ft__social { font-size: 14px; }
.ft__social a { color: var(--ink-2); }
.ft__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--rule); font-size: 14px; color: var(--mute); }
.ft__base a { color: var(--mute); }
.toast { position: fixed; left: 50%; top: 16px; transform: translateX(-50%); z-index: 400; background: var(--ink); color: var(--paper); padding: 12px 18px; font-weight: 600; transition: opacity .4s; }
.toast.is-out { opacity: 0; }

/* the existing floating WhatsApp / quote buttons, restyled to match */
.v2 .vdb-wa i { display: none; }
.v2 .vdb-wa::before { content: ''; width: 28px; height: 28px; background: currentColor; -webkit-mask: var(--wa) center / contain no-repeat; mask: var(--wa) center / contain no-repeat; }
.v2 .vdb-wa { --wa: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.47 14.38c-.3-.15-1.76-.87-2.03-.97-.27-.1-.47-.15-.67.15-.2.3-.77.97-.94 1.17-.17.2-.35.22-.64.07-.3-.15-1.26-.46-2.4-1.48-.89-.79-1.49-1.77-1.66-2.07-.17-.3-.02-.46.13-.61.13-.13.3-.35.45-.52.15-.17.2-.3.3-.5.1-.2.05-.37-.02-.52-.08-.15-.67-1.61-.92-2.2-.24-.58-.49-.5-.67-.51h-.57c-.2 0-.52.07-.8.37-.27.3-1.04 1.02-1.04 2.48s1.07 2.88 1.21 3.08c.15.2 2.1 3.2 5.08 4.49.71.31 1.26.49 1.69.63.71.23 1.36.2 1.87.12.57-.09 1.76-.72 2-1.41.25-.7.25-1.29.18-1.41-.08-.13-.27-.2-.57-.35zM12.05 21.8h-.01a9.87 9.87 0 0 1-5.03-1.38l-.36-.21-3.74.98 1-3.65-.24-.37a9.86 9.86 0 0 1-1.51-5.26c0-5.45 4.44-9.88 9.9-9.88 2.64 0 5.12 1.03 6.99 2.9a9.82 9.82 0 0 1 2.89 6.99c0 5.45-4.44 9.88-9.89 9.88zm8.41-18.3A11.82 11.82 0 0 0 12.05 0C5.5 0 .16 5.34.16 11.89c0 2.1.55 4.14 1.59 5.94L.06 24l6.3-1.65a11.88 11.88 0 0 0 5.68 1.45h.01c6.55 0 11.89-5.34 11.89-11.89 0-3.18-1.24-6.17-3.48-8.41z'/%3E%3C/svg%3E"); }
.v2 .vdb-cta { background: var(--ink) !important; color: var(--paper) !important; border-radius: 2px !important; font-family: 'Archivo', sans-serif !important; font-weight: 600 !important; }

/* motion: hide only what JS is about to bring in */
.motion [data-in] { opacity: 0; }

/* ---------------------------- responsive ---------------------------- */
@media (min-width: 900px) {
    /* pinned gallery: panels sized by height so the stage fits the screen */
    .proj { width: min(64vw, 760px, 96vh); }
}
@media (max-width: 1080px) {
    .hd__nav { gap: 18px; }
    .ft__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 899.98px) {
    .hd__nav, .hd__cta { display: none; }
    .hd__burger { display: block; }
    .intro__grid { grid-template-columns: 1fr; }
    .intro__art { order: -1; justify-self: start; max-width: 240px; margin-bottom: -8px; }
    .facts { grid-template-columns: 1fr 1fr; row-gap: 28px; }
    .clients, .services, .contact__grid { grid-template-columns: 1fr; }
    .services li:nth-last-child(2) { border-bottom: 0; }
    .people { grid-template-columns: 1fr 1fr; }
    .work__viewport { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
    .work__viewport::-webkit-scrollbar { display: none; }
    .work__track { transform: none !important; }
    .proj { width: 82vw; scroll-snap-align: center; }
    .award { grid-template-columns: 1fr; }
    .award__thumb { display: block; width: 100%; max-width: 420px; aspect-ratio: 3 / 2; object-fit: cover; margin-top: 10px; }
}
@media (max-width: 599.98px) {
    :root { --hd: 64px; }
    .hd__logo img { height: 28px; }
    .row { flex-direction: column; gap: 2px; }
    .row__aside { text-align: left; }
    .people { gap: 16px; }
    .ft__grid { grid-template-columns: 1fr; gap: 28px; }
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}