:root {
  --bg: #f2f0eb;
  --ink: #141414;
  --muted: #9a968e;
  --line: rgb(20 20 20 / .14);
  --text: "TikTok Sans", "Helvetica Neue", Arial, sans-serif;
  --serif: "Vaibik Amstelvar", Georgia, serif;
  --g: clamp(16px, 1.6vw, 24px);
  --vx-background: #f2f0eb;
  --vx-color-1: #f2f0eb;
  --vx-color-2: #141414;
  --vx-color-3: #9a968e;
  --vx-color-4: #141414;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 500 13px/1.3 var(--text); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
h1, h2, h3, p, ul, figure, dl, dd { margin: 0; padding: 0; }
ul { list-style: none; }
a, button { color: inherit; text-decoration: none; font: inherit; }
img { display: block; max-width: 100%; }
/* Every picture keeps its own proportions; a frame sets only the width. */
.frame { width: 100%; }
.frame img, .frame video { width: 100% !important; height: auto !important; object-fit: contain !important; display: block; }
.vf-word { font-weight: 700; font-stretch: 88%; letter-spacing: -.02em; text-transform: uppercase; }
.vf-small { font-size: 12px; }
a:focus-visible, button:focus-visible { outline: 1.5px solid var(--ink); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

.vf-field { position: relative; height: 180vh; }
.vf-field__pin { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.vf-plus { position: absolute; z-index: 5; left: 50%; top: 18px; width: 22px; height: 22px; margin-left: -11px; }
.vf-plus::before, .vf-plus::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; background: var(--ink); }
.vf-plus::after { transform: rotate(90deg); }
.vf-name { position: absolute; z-index: 1; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: clamp(34px, 4.6vw, 76px); white-space: nowrap; }
.vf-f { position: absolute; z-index: 2; left: var(--x); top: var(--y); width: var(--w); will-change: transform; }
.vf-corner { position: absolute; z-index: 5; bottom: 18px; background: var(--bg); padding: 4px 6px; }
.vf-corner.l { left: 14px; } .vf-corner.r { right: 14px; text-align: right; }
.vf-corner a:hover { color: var(--muted); }
@media (max-width: 860px) { .vf-field { height: 170vh; } .vf-f { width: calc(var(--w) * 1.8); } .vf-f.hide-m { display: none; } .vf-me { --x: 25% !important; --y: 18% !important; width: 50vw; } }
/* The index rises over the last screen of the field, so the scattered frames hand over to it without a blank screen. */
@media (prefers-reduced-motion: no-preference) {
  .vf-field + .vf-index { margin-top: -100svh; pointer-events: none; }
  .vf-field + .vf-index ul { pointer-events: auto; }
}

.vf-index { position: relative; min-height: 100svh; display: grid; place-items: center; overflow: hidden; }
.vf-index ul { position: relative; z-index: 3; text-align: center; }
.vf-index li button { all: unset; cursor: pointer; display: block; width: 100%; text-align: center; font-size: clamp(30px, 3.4vw, 54px); line-height: 1.02; transition: color .25s; }
.vf-index ul:hover li button { color: rgb(20 20 20 / .2); }
.vf-index ul li button:hover, .vf-index ul li button:focus-visible { color: var(--ink); }
.vf-ghost { position: absolute; z-index: 1; width: var(--w); left: var(--x); top: var(--y); opacity: 0; transform: scale(.94); transition: opacity .35s, transform .5s cubic-bezier(.2, .9, .2, 1); }
.vf-ghost.on { opacity: 1; transform: none; }
@media (max-width: 860px) { .vf-ghost { width: calc(var(--w) * 1.6); } }

.vf-nums { padding: clamp(64px, 7vw, 110px) var(--g) 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 36px var(--g); }
.vf-num { display: grid; gap: 14px; align-content: start; padding-top: 18px; border-top: 1px solid var(--ink); }
.vf-num b { font-family: var(--serif); font-weight: 300; font-size: clamp(56px, 7.4vw, 124px); line-height: .86; letter-spacing: -.035em; }
.vf-num b small { font-size: .3em; letter-spacing: -.01em; }
.vf-num > span { font-size: clamp(15px, 1.2vw, 18px); line-height: 1.3; max-width: 30ch; }
a.vf-num:hover > span { color: var(--muted); }
@media (max-width: 860px) { .vf-nums { grid-template-columns: repeat(2, minmax(0, 1fr)); } .vf-num b { font-size: clamp(48px, 15vw, 80px); } }

.vf-clients { padding: clamp(64px, 7vw, 110px) var(--g) 0; }
.vf-clients__head { display: flex; justify-content: space-between; align-items: end; flex-wrap: wrap; gap: 10px 24px; padding-bottom: 14px; border-bottom: 1px solid var(--ink); margin-bottom: 26px; }
.vf-clients__head h2 { font-size: clamp(30px, 3.4vw, 54px); line-height: .9; }
.vf-clients__head p { color: var(--muted); }
.vf-clients__row { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--g); }
.vf-client { display: grid; gap: 10px; align-content: start; }
.vf-client > span { display: grid; gap: 3px; }
.vf-client b { font-weight: 700; }
.vf-client i { font-style: normal; color: var(--muted); font-size: 12px; }
.vf-client:hover b { color: var(--muted); }
@media (max-width: 860px) { .vf-clients__row { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--g); scrollbar-width: none; margin: 0 calc(var(--g) * -1); padding: 0 var(--g); } .vf-clients__row::-webkit-scrollbar { display: none; } .vf-client { flex: 0 0 42vw; scroll-snap-align: start; } }

.vf-mag { position: relative; min-height: 100svh; display: grid; grid-template-columns: 1fr minmax(0, 32vw) 1fr; align-items: center; gap: 4vw; padding: 70px 4vw; }
.vf-mag h2 { justify-self: start; font-family: var(--serif); font-weight: 300; font-size: clamp(30px, 2.8vw, 46px); line-height: 1; letter-spacing: .01em; text-transform: uppercase; transform: rotate(-12deg); }
.vf-mag h2 small { display: block; margin-top: 18px; font-family: var(--text); text-transform: none; font-size: 12px; letter-spacing: 0; color: var(--muted); }
.vf-mag figure { position: relative; transform: rotate(2deg); }
.vf-mag figure b { position: absolute; left: 0; right: 0; top: 3%; text-align: center; font-family: var(--serif); font-weight: 400; color: #ffffff; font-size: clamp(56px, 6.6vw, 112px); line-height: .8; letter-spacing: .01em; }
.vf-mag__side { justify-self: end; display: grid; gap: 22px; }
.vf-mag dl { display: grid; grid-template-columns: auto auto; gap: 4px 14px; }
.vf-mag dt { color: var(--muted); }
.vf-mag__pn { display: flex; gap: 18px; font-weight: 700; }
.vf-mag__pn a:hover { color: var(--muted); }
.vf-row { display: flex; gap: var(--g); overflow-x: auto; padding: 0 var(--g) 10px; scrollbar-width: none; }
.vf-row::-webkit-scrollbar { display: none; }
.vf-row figure { flex: 0 0 auto; height: min(52vh, 520px); }
.vf-row .frame { height: 100%; width: auto; }
.vf-row .frame img, .vf-row .frame video { width: auto !important; height: 100% !important; }
@media (max-width: 860px) { .vf-mag { grid-template-columns: minmax(0, 1fr); padding-top: 90px; } .vf-mag h2 { transform: rotate(-6deg); } .vf-mag__side { justify-self: start; } .vf-row figure { height: 46vh; } }

.vf-works { padding: clamp(64px, 7vw, 110px) var(--g) 0; }
.vf-works__head { display: flex; justify-content: space-between; align-items: end; gap: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--ink); margin-bottom: 26px; }
.vf-works__head h2 { font-size: clamp(30px, 3.4vw, 54px); line-height: .9; }
.vf-view { display: flex; gap: 16px; font-weight: 700; font-size: 12px; }
.vf-view button { all: unset; cursor: pointer; color: var(--muted); padding-bottom: 2px; border-bottom: 1.5px solid transparent; }
.vf-view button[aria-pressed="true"] { color: var(--ink); border-color: var(--ink); }
.vf-grid { columns: 4; column-gap: var(--g); }
.vf-w { display: grid; gap: 8px; break-inside: avoid; margin-bottom: calc(var(--g) * 1.6); }
.vf-w .cap { display: flex; justify-content: space-between; gap: 10px; }
.vf-w .cap i { font-style: normal; color: var(--muted); display: none; }
.vf-w .cap span { color: var(--muted); }
.vf-grid.list { columns: 1; }
.vf-grid.list .vf-w { grid-template-columns: 56px minmax(0, 1fr); align-items: center; gap: 18px; margin: 0; padding: 8px 0; border-bottom: 1px solid var(--line); }
.vf-grid.list .vf-w .cap { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 3fr) auto; align-items: baseline; }
.vf-grid.list .vf-w .cap b { font-weight: 700; font-stretch: 88%; text-transform: uppercase; font-size: clamp(20px, 2.2vw, 32px); letter-spacing: -.02em; }
.vf-grid.list .vf-w .cap i { display: block; }
.vf-w .cap b { font-weight: 400; }
@media (max-width: 860px) { .vf-grid { columns: 2; } .vf-grid.list .vf-w .cap { grid-template-columns: minmax(0, 1fr); } }

.vf-foot { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--g); padding: clamp(64px, 7vw, 110px) var(--g) 18px; }
.vf-foot p:last-child { text-align: right; }
.vf-foot a:hover { color: var(--muted); }
@media (max-width: 860px) { .vf-foot { grid-template-columns: 1fr 1fr; } }

/* Gift-site additions: hero name and portrait placement, services, contact. */
video:not([controls])::-webkit-media-controls-start-playback-button { display: none !important; -webkit-appearance: none; }
.vf-name { top: 56%; }
@media (max-width: 860px) { .vf-me { --x: 27% !important; --y: 3% !important; width: 46vw !important; } }
.vf-corner a { font-weight: 700; }
.vf-svc { padding: clamp(64px, 7vw, 110px) var(--g) 0; }
.vf-svc__head { padding-bottom: 14px; border-bottom: 1px solid var(--ink); }
.vf-svc__head h2 { font-size: clamp(30px, 3.4vw, 54px); line-height: .9; }
.vf-svc li { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--g); align-items: baseline; padding: 22px 0; border-bottom: 1px solid var(--line); }
.vf-svc li b { font-size: clamp(22px, 2.4vw, 36px); font-weight: 700; font-stretch: 88%; letter-spacing: -.02em; line-height: 1.05; }
.vf-svc li span { font-size: 15px; line-height: 1.35; }
.vf-svc__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 36px; }
.vf-svc__cta p { color: var(--muted); }
.vf-btn { border: 1.5px solid var(--ink); padding: 14px 22px; font-weight: 700; transition: background .25s, color .25s; }
.vf-btn:hover { background: var(--ink); color: var(--bg); }
.vf-contact { padding: clamp(64px, 7vw, 110px) var(--g) 0; }
.vf-contact > h2 { font-size: clamp(30px, 3.4vw, 54px); line-height: .95; }
.vf-cta { display: inline-block; margin-top: 36px; font-size: clamp(26px, 3.2vw, 52px); line-height: 1.05; font-weight: 700; font-stretch: 88%; letter-spacing: -.02em; border-bottom: 2px solid var(--ink); padding-bottom: 4px; }
.vf-cta:hover { color: var(--muted); border-color: var(--muted); }
.vf-contact > p { margin-top: 12px; color: var(--muted); }
.vf-soc { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--g); margin-top: 44px; }
.vf-soc a { display: grid; gap: 8px; align-content: space-between; min-height: 120px; padding: 18px 20px; border: 1.5px solid var(--ink); transition: background .25s, color .25s; }
.vf-soc b { font-size: clamp(18px, 1.6vw, 22px); font-weight: 700; font-stretch: 88%; letter-spacing: -.02em; line-height: 1.1; }
.vf-soc span { font-size: 13px; color: var(--muted); }
.vf-soc a:hover { background: var(--ink); color: var(--bg); }
@media (max-width: 860px) { .vf-svc li { grid-template-columns: minmax(0, 1fr); gap: 6px; } .vf-soc { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }