:root {
  --vi-deep: #1F5C5E;
  --vi-light: #BFE3DC;
  --vi-ink: #16302F;
  --vi-bg: #F4EFE2;
  --vi-paper: #FBF8EF;
  --vi-peach: #F7D48A;
  --vi-muted: #4B6664;
  --vi-body: #36504E;
  --vi-squiggle: #F2B33D;
  --vi-ondeep: #CFE6E1;
  --vi-field: #8AAEA8;
  --vi-dash: #CCC6B2;
  --vi-hover: #3E7E7C;
  --vi-tape: rgba(247, 212, 138, .85);
  --vi-accent: #F2B33D;
  --vi-hl: #1F5C5E;
  --vi-onaccent: #16302F;
  --vi-accentsh: #B07F17;
  --vi-live: #3F8C3A;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; overflow-x: clip; }
body {
  margin: 0;
  background: var(--vi-bg);
  color: var(--vi-ink);
  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
  overflow-x: clip;
}
a { color: var(--vi-ink); }
a:hover { color: var(--vi-deep); }
input, select, textarea, button { font: inherit; }
::selection { background: var(--vi-squiggle); color: var(--vi-ink); }
img { max-width: 100%; }
[hidden] { display: none !important; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 16px; top: -60px; z-index: 100; padding: 12px 16px; background: var(--vi-deep); color: var(--vi-paper); font-weight: 700; border-radius: 10px; }
.skip-link:focus { top: 16px; color: var(--vi-paper); }

/* ---------- paper ---------- */
.vi-grain, .vi-paper { background-image: url(/assets/grain.png); background-size: 320px 320px; }
.vi-cut-a { clip-path: polygon(0.4% 1.6%,22% 0.2%,47% 1.1%,73% 0%,99.5% 1.2%,100% 28%,99.1% 55%,99.8% 81%,99.2% 99.4%,74% 100%,51% 98.9%,26% 99.8%,0.6% 99%,0% 74%,0.9% 48%,0.1% 22%); }
.vi-cut-b { clip-path: polygon(1.2% 0.4%,31% 1.4%,58% 0%,84% 1%,99% 0.2%,99.8% 21%,98.9% 46%,100% 73%,99.1% 100%,70% 98.8%,44% 100%,17% 99%,0% 99.6%,0.8% 76%,0% 51%,1% 25%); }
.vi-cut-c { clip-path: polygon(0% 0.8%,18% 0%,41% 1.3%,66% 0.3%,100% 1%,99.2% 30%,100% 62%,99.4% 98.8%,80% 100%,55% 99.1%,29% 100%,1% 99.2%,0.3% 70%,1.1% 38%); }
.vi-pinked { -webkit-mask: conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/18px 51% repeat-x,conic-gradient(from 135deg at top,#0000,#000 1deg 89deg,#0000 90deg) top/18px 51% repeat-x; mask: conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/18px 51% repeat-x,conic-gradient(from 135deg at top,#0000,#000 1deg 89deg,#0000 90deg) top/18px 51% repeat-x; }
.vi-pinked-top { -webkit-mask: conic-gradient(from 135deg at top,#0000,#000 1deg 89deg,#0000 90deg) top/22px 51% repeat-x,linear-gradient(#000,#000) bottom/100% 50% no-repeat; mask: conic-gradient(from 135deg at top,#0000,#000 1deg 89deg,#0000 90deg) top/22px 51% repeat-x,linear-gradient(#000,#000) bottom/100% 50% no-repeat; }
.vi-tape { clip-path: polygon(0% 10%,5% 0%,12% 6%,88% 2%,95% 0%,100% 8%,96% 50%,100% 92%,93% 100%,86% 95%,10% 99%,4% 100%,0% 90%,3% 50%); }
.vi-shadow { filter: drop-shadow(0 2px 1px rgba(22,48,47,.22)) drop-shadow(0 12px 16px rgba(22,48,47,.16)); }
.vi-shadow-dark { filter: drop-shadow(0 2px 1px rgba(0,0,0,.35)) drop-shadow(0 14px 18px rgba(0,0,0,.28)); }

/* ---------- keyframes ---------- */
@keyframes vi-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes vi-marquee-rev { from { transform: translateX(-50%); } to { transform: translateX(0); } }
@keyframes vi-bob { 0%,100% { transform: translateY(0) rotate(var(--vi-r,0deg)); } 50% { transform: translateY(-14px) rotate(calc(var(--vi-r,0deg) + 14deg)); } }
@keyframes vi-pulse { 0% { box-shadow: 0 0 0 0 rgba(63,140,58,.55); } 100% { box-shadow: 0 0 0 10px rgba(63,140,58,0); } }
@keyframes vi-rise { from { opacity: 0; transform: translateY(54px) rotate(calc(var(--vi-r,0deg) + 4deg)); } to { opacity: 1; transform: translateY(0) rotate(var(--vi-r,0deg)); } }
@keyframes vi-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes vi-navbg { from { background-color: rgba(244,239,226,0); } to { background-color: rgba(244,239,226,.94); } }
@keyframes vi-heroin { from { opacity: 0; transform: translateY(30px) rotate(-2deg); } to { opacity: 1; transform: translateY(0) rotate(0); } }
@keyframes vi-draw { from { stroke-dashoffset: 420; } to { stroke-dashoffset: 0; } }
@keyframes vi-tick { 0% { transform: translateY(0); } 40% { transform: translateY(-3px); } 100% { transform: translateY(0); } }

/* ---------- marquee ---------- */
.vi-track { animation: vi-marquee 36s linear infinite; }
.vi-track-rev { animation: vi-marquee-rev 44s linear infinite; }

/* ---------- scroll effects ---------- */
.vi-progress { transform-origin: 0 50%; transform: scaleX(0); }
@supports (animation-timeline: scroll()) {
  .vi-progress { animation: vi-progress linear both; animation-timeline: scroll(root); }
  .vi-nav { animation: vi-navbg linear both; animation-timeline: scroll(root); animation-range: 0 160px; }
}
@supports not (animation-timeline: scroll()) {
  .vi-nav.is-scrolled { background-color: rgba(244,239,226,.94); }
}
@supports (animation-timeline: view()) {
  .vi-reveal { animation: vi-rise linear both; animation-timeline: view(); animation-range: entry 0% entry 60%; }
}
.vi-hero-in { animation: vi-heroin .9s cubic-bezier(.2,.8,.2,1) both; }
.vi-d1 { animation-delay: .08s; } .vi-d2 { animation-delay: .18s; } .vi-d3 { animation-delay: .3s; }
.vi-squiggle path { stroke-dasharray: 420; animation: vi-draw 1.1s .6s cubic-bezier(.6,0,.2,1) both; }
.vi-tick { animation: vi-tick .5s ease-out; }

/* ---------- buttons: paper press ---------- */
.vi-btn { transition: transform .18s cubic-bezier(.3,.7,.4,1.5), box-shadow .18s cubic-bezier(.3,.7,.4,1.5), background-color .2s; box-shadow: 0 5px 0 0 var(--vi-sh, var(--vi-ink)); }
.vi-btn:hover { transform: translateY(-3px) rotate(-1.5deg); box-shadow: 0 8px 0 0 var(--vi-sh, var(--vi-ink)); }
.vi-btn:active { transform: translateY(5px) rotate(0); box-shadow: 0 0 0 0 var(--vi-sh, var(--vi-ink)); transition-duration: .05s; }
.vi-btn:disabled { opacity: .7; cursor: wait; }
.vi-btn:focus-visible, .vi-tab:focus-visible, .vi-link:focus-visible, .vi-logo:focus-visible { outline: 3px dashed var(--vi-ink); outline-offset: 4px; }
.vi-btn .vi-arrow { transition: transform .25s cubic-bezier(.3,.7,.4,1.5); }
.vi-btn:hover .vi-arrow { transform: translateX(5px); }
.vi-btn-accent { --vi-sh: var(--vi-accentsh); background-color: var(--vi-accent); color: var(--vi-onaccent); }
.vi-btn-accent:hover { color: var(--vi-onaccent); }

/* ---------- nav links (hand-drawn underline) ---------- */
.vi-link { position: relative; text-decoration: none; }
.vi-link svg { position: absolute; left: 12px; right: 12px; bottom: 4px; width: calc(100% - 24px); height: 8px; overflow: visible; }
.vi-link svg path { stroke-dasharray: 120; stroke-dashoffset: 120; transition: stroke-dashoffset .35s cubic-bezier(.6,0,.2,1); }
.vi-link:hover svg path { stroke-dashoffset: 0; }

/* ---------- logo ---------- */
.vi-logo img { transition: transform .45s cubic-bezier(.3,.7,.4,1.7); }
.vi-logo:hover img { transform: rotate(-14deg) scale(1.1); }

/* ---------- lifts ---------- */
.vi-lift { transition: transform .35s cubic-bezier(.3,.7,.4,1.5); }
.vi-lift:hover { transform: translateY(-8px) rotate(calc(var(--vi-r,0deg) * -1)) scale(1.03); }
.vi-card { transition: transform .4s cubic-bezier(.3,.7,.4,1.4); }
.vi-card .vi-under { transition: transform .45s cubic-bezier(.3,.7,.4,1.4); }
.vi-card .vi-tape { transition: transform .4s cubic-bezier(.3,.7,.4,1.6); }
.vi-card:hover { transform: translateY(-10px) rotate(0deg) !important; }
.vi-card:hover .vi-under { transform: rotate(-5deg) translate(-10px, 8px); }
.vi-card:hover .vi-tape { transform: translateX(-50%) rotate(-8deg) scale(1.05) !important; }
.vi-card .vi-thumb-inner { transition: transform .7s cubic-bezier(.2,.8,.2,1); }
.vi-card:hover .vi-thumb-inner { transform: scale(1.1) rotate(-3deg); }
.vi-card .vi-ring-deco { transition: transform .8s cubic-bezier(.2,.8,.2,1); }
.vi-card:hover .vi-ring-deco { transform: rotate(200deg) scale(1.25); }

/* ---------- tabs ---------- */
.vi-tab { min-height: 44px; padding: 0 18px; border-radius: 13px 16px 12px 15px; border: 0; background-color: transparent; color: var(--vi-ink); font-size: 15px; font-weight: 700; cursor: pointer; transition: background-color .2s, color .2s, transform .18s cubic-bezier(.3,.7,.4,1.6); }
.vi-tab:hover { transform: rotate(-3deg) scale(1.05); }
.vi-tab:active { transform: scale(.92); }
.vi-tab[aria-pressed="true"] { background-color: var(--vi-deep); color: var(--vi-bg); }

/* ---------- services ---------- */
.vi-svc { transition: transform .4s cubic-bezier(.3,.7,.4,1.5); }
.vi-svc .vi-svc-face { transition: background-color .35s; }
.vi-svc .vi-svc-num { transition: transform .5s cubic-bezier(.3,.7,.4,1.7); }
.vi-svc:hover { transform: translateY(-10px) rotate(0deg) !important; }
.vi-svc:hover .vi-svc-face { background-color: var(--vi-light); }
.vi-svc:hover .vi-svc-num { transform: scale(1.2) rotate(-8deg); }

/* ---------- contact rows ---------- */
.vi-row { transition: transform .3s cubic-bezier(.3,.7,.4,1.5); }
.vi-row:hover { transform: translateY(-4px) rotate(-1deg); }

/* ---------- fields & chips ---------- */
.vi-field { height: 54px; padding: 0 14px; border-radius: 14px 11px 15px 12px; border: 2px dashed var(--vi-field); background-color: #FFFDF6; color: var(--vi-ink); font-size: 16px; width: 100%; transition: box-shadow .2s, border-color .2s, background-color .2s; }
textarea.vi-field { height: auto; padding: 14px; resize: vertical; }
.vi-field:hover { border-color: var(--vi-hover); }
.vi-field:focus { outline: none; border-style: solid; border-color: var(--vi-deep); background-color: #FFFFFF; box-shadow: 0 4px 0 0 var(--vi-accent); }
.vi-label { font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.vi-chip { min-height: 44px; padding: 0 16px; border-radius: 13px 16px 12px 15px; border: 2px dashed var(--vi-field); background-color: #FFFDF6; color: var(--vi-ink); font-size: 15px; font-weight: 700; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; transform: rotate(var(--vi-r, 0deg)); transition: transform .2s cubic-bezier(.3,.7,.4,1.6), background-color .2s, color .2s, box-shadow .2s; }
.vi-chip:hover { transform: translateY(-3px) rotate(calc(var(--vi-r,0deg) * -1)); box-shadow: 0 4px 0 0 var(--vi-deep); }
.vi-chip:active { transform: scale(.94); box-shadow: none; }
.vi-chip:focus-visible { outline: 3px dashed var(--vi-ink); outline-offset: 3px; }
.vi-chip .vi-check { width: 20px; height: 20px; border-radius: 50%; border: 2px dashed var(--vi-field); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.vi-chip .vi-check svg { display: none; }
.vi-chip[aria-checked="true"] { border-style: solid; border-color: var(--vi-deep); background-color: var(--vi-deep); color: var(--vi-paper); }
.vi-chip[aria-checked="true"] .vi-check { border: 0; background-color: var(--vi-accent); color: var(--vi-onaccent); }
.vi-chip[aria-checked="true"] .vi-check svg { display: block; }
.vi-handle { border-style: solid; border-color: var(--vi-deep); background-color: var(--vi-paper); font-family: 'JetBrains Mono', monospace; gap: 10px; padding: 0 14px; }
.vi-handle .vi-hint { font-family: 'Bricolage Grotesque', system-ui, sans-serif; font-size: 13px; }
.vi-handle.is-copied { background-color: var(--vi-deep); color: var(--vi-paper); }
.vi-copy.is-copied { background-color: var(--vi-deep) !important; color: var(--vi-paper) !important; }
.vi-form-error { margin: 0; padding: 12px 14px; border-radius: 12px 14px 11px 13px; border: 2px solid var(--vi-accent); background: #FDF1D6; color: var(--vi-ink); font-weight: 600; }
.vi-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- decor ---------- */
.vi-bob { animation: vi-bob 6s ease-in-out infinite; }
.vi-bob2 { animation: vi-bob 7.5s ease-in-out infinite reverse; }
.vi-live { animation: vi-pulse 1.6s ease-out infinite; }
.vi-polaroid { transition: transform .5s cubic-bezier(.3,.7,.4,1.5); }
.vi-polaroid:hover { transform: rotate(2deg) scale(1.03) !important; }
.vi-foot-word span { display: inline-block; transition: transform .4s cubic-bezier(.3,.7,.4,1.7); }
.vi-foot-word:hover span:first-child { transform: translateY(-10px) rotate(-3deg); }
.vi-foot-word:hover span:last-child { transform: translateY(-6px) rotate(2deg); }

/* ---------- small screens ---------- */
@media (max-width: 720px) {
  .vi-nav-inner { padding: 12px 16px !important; }
  .vi-nav-links .vi-link { padding: 10px 8px !important; }
  .vi-hero-body { padding: 64px 22px 120px !important; }
  .vi-hero-note { display: none !important; }
  .vi-hero-badge { right: 16px !important; bottom: 20px !important; }
  .vi-section { padding-left: 16px !important; padding-right: 16px !important; }
  .vi-form { padding: 32px 22px 28px !important; }
  .vi-free-note { display: none; }
  .vi-nav-cta { display: none !important; }
  .vi-hero-peek { inset: 10px 0 -14px 6px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .vi-track, .vi-track-rev, .vi-bob, .vi-bob2, .vi-live, .vi-reveal, .vi-hero-in, .vi-squiggle path, .vi-tick { animation: none !important; }
  .vi-squiggle path { stroke-dasharray: none; }
  html { scroll-behavior: auto; }
}