/* ============================================================
   VZN STUDIO — DESIGN SYSTEM
   Editorial bones. Colourful chaos, systematised.
   Every discipline owns a colour, so colour always means something.
   ============================================================ */

/* ---------- TOKENS ---------- */
:root{
  /* base */
  --cream:#ece6d6;
  --cream-2:#f4efe3;
  --ink:#16140f;
  --ink-2:#211d17;
  --green:#1c8a4d;
  --gold:#b8924a;

  /* discipline palette — the "chaos", assigned meaning */
  --c-sports:#ff5a1f;
  --c-branding:#6b3ff2;
  --c-web:#00b5d8;
  --c-graphics:#f5b73d;
  --c-lab:#ff2e88;

  /* semantic */
  --bg:var(--cream);
  --fg:var(--ink);
  --accent:var(--green);
  --muted:rgba(22,20,15,.62);
  --muted-2:rgba(22,20,15,.44);
  --line:rgba(22,20,15,.16);
  --line-2:rgba(22,20,15,.10);

  /* type */
  --serif:'Bodoni Moda',Georgia,serif;
  --sans:'Archivo',system-ui,-apple-system,sans-serif;
  --condensed:'Anton',Impact,sans-serif;

  /* motion */
  --ease:cubic-bezier(.2,.7,.2,1);
  --ease-out:cubic-bezier(.16,1,.3,1);

  /* layout */
  --pad:32px;
  --max:1280px;
  --radius:3px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family:var(--sans); font-size:16px; line-height:1.6;
  overflow-x:clip; /* clip, not hidden — hidden creates a scroll container */
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img,svg,video{ display:block; max-width:100%; }
a{ color:inherit; }
button{ font-family:inherit; }
::selection{ background:var(--green); color:var(--cream); }

/* subtle paper texture — keeps flat colour from feeling digital-cheap */
body::before{
  content:''; position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.035;
  background-image:radial-gradient(currentColor .5px,transparent .5px);
  background-size:4px 4px;
}

/* ---------- ACCESSIBILITY ---------- */
:focus-visible{ outline:3px solid var(--green); outline-offset:3px; border-radius:2px; }
.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--ink); color:var(--cream); padding:14px 20px;
  font:700 13px var(--sans); letter-spacing:.1em; text-transform:uppercase;
}
.skip:focus{ left:12px; top:12px; }
.sr{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
     clip:rect(0 0 0 0); white-space:nowrap; border:0; }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .reveal{ opacity:1 !important; transform:none !important; }
}

/* ---------- LAYOUT ---------- */
.wrap{ max-width:var(--max); margin:0 auto; padding-left:var(--pad); padding-right:var(--pad); }
.wrap-n{ max-width:1080px; margin:0 auto; padding-left:var(--pad); padding-right:var(--pad); }
section{ position:relative; z-index:2; }
/* Longhand on purpose: `.sec` is often combined with `.wrap` (class="sec wrap"),
   and a padding shorthand would zero out the horizontal padding .wrap provides. */
.sec{ padding-top:clamp(64px,9vw,120px); padding-bottom:clamp(64px,9vw,120px); }
.sec-t{ padding-top:clamp(64px,9vw,120px); }
.sec-b{ padding-bottom:clamp(64px,9vw,120px); }
.dark{ background:var(--ink); color:var(--cream);
  --fg:var(--cream); --muted:rgba(236,230,214,.72); --muted-2:rgba(236,230,214,.5);
  --line:rgba(236,230,214,.18); --line-2:rgba(236,230,214,.11); --bg:var(--ink); }

/* ---------- TYPE ---------- */
.eyebrow{
  font:700 12px var(--sans); letter-spacing:.2em; text-transform:uppercase;
  color:var(--accent); margin:0 0 14px; display:flex; align-items:center; gap:10px;
}
.eyebrow::before{ content:''; width:22px; height:2px; background:currentColor; flex:none; }
.eyebrow.plain::before{ display:none; }

h1,h2,h3{ margin:0; font-family:var(--serif); font-weight:900; letter-spacing:-.015em; }
.h-xl{ font-size:clamp(52px,8vw,124px); line-height:.86; text-transform:uppercase; }
.h-lg{ font-size:clamp(40px,5.6vw,80px);  line-height:.9;  text-transform:uppercase; }
.h-md{ font-size:clamp(30px,3.8vw,52px);  line-height:.95; }
.h-sm{ font-size:clamp(22px,2.6vw,32px);  line-height:1.05; }
.ital{ font-style:italic; }
.lead{ font:400 clamp(17px,1.6vw,20px)/1.6 var(--sans); color:var(--muted); max-width:56ch; }
.body{ font:400 16px/1.7 var(--sans); color:var(--muted); max-width:62ch; }
.mono{ font:700 11px var(--sans); letter-spacing:.16em; text-transform:uppercase; }

/* headline where each line can carry its own colour */
.stack span{ display:block; }

/* ---------- BUTTONS ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px; text-decoration:none; cursor:pointer;
  font:700 13px var(--sans); letter-spacing:.1em; text-transform:uppercase;
  padding:16px 28px; border-radius:var(--radius); border:1.5px solid transparent;
  transition:transform .25s var(--ease), background .25s, color .25s, border-color .25s, box-shadow .25s;
  white-space:nowrap;
}
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0); }
.btn-primary{ background:var(--ink); color:var(--cream); }
.btn-primary:hover{ box-shadow:0 14px 30px rgba(22,20,15,.28); }
.dark .btn-primary{ background:var(--cream); color:var(--ink); }
.btn-accent{ background:var(--green); color:var(--cream); }
.btn-accent:hover{ box-shadow:0 14px 30px rgba(28,138,77,.36); }
.btn-ghost{ border-color:currentColor; color:inherit; background:none; }
.btn-ghost:hover{ background:var(--fg); color:var(--bg); }
.btn-line{
  background:none; padding:4px 0; border:0; border-bottom:2px solid var(--green);
  border-radius:0; color:inherit;
}
.btn-line:hover{ transform:none; opacity:.7; }
.btn-sm{ padding:12px 20px; font-size:12px; }
.btn[disabled]{ opacity:.5; pointer-events:none; }
.btn .ar{ transition:transform .25s var(--ease); }
.btn:hover .ar{ transform:translateX(4px); }

/* ---------- NAV ---------- */
.nav{
  position:sticky; top:0; z-index:60;
  background:color-mix(in srgb, var(--cream) 88%, transparent);
  backdrop-filter:blur(12px) saturate(1.2);
  border-bottom:1px solid var(--line-2);
}
@supports not (background:color-mix(in srgb,red,blue)){ .nav{ background:rgba(236,230,214,.9); } }
.nav-in{ max-width:var(--max); margin:0 auto; padding:15px var(--pad);
         display:flex; align-items:center; justify-content:space-between; gap:20px; }
.mark{
  display:inline-flex; align-items:baseline; gap:1px; text-decoration:none; color:var(--ink);
  font:800 19px var(--sans); letter-spacing:.14em; line-height:1; flex:none;
}
.mark i{ font-style:normal; color:var(--green); }
.nav-links{ display:flex; align-items:center; gap:28px;
            font:700 12px var(--sans); letter-spacing:.14em; text-transform:uppercase; }
.nav-links a{ text-decoration:none; color:var(--ink); position:relative; padding:4px 0; }
.nav-links a::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:var(--green); transform:scaleX(0); transform-origin:left;
  transition:transform .3s var(--ease);
}
.nav-links a:hover::after,.nav-links a[aria-current="page"]::after{ transform:scaleX(1); }
.nav-links a.btn::after{ display:none; }
.nav-toggle{ display:none; background:none; border:1.5px solid var(--line); border-radius:2px;
             padding:9px 12px; cursor:pointer; color:var(--ink); }

/* ---------- REVEAL ---------- */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .8s var(--ease-out), transform .8s var(--ease-out); }
.reveal.in{ opacity:1; transform:none; }
.reveal[data-d="1"]{ transition-delay:.08s } .reveal[data-d="2"]{ transition-delay:.16s }
.reveal[data-d="3"]{ transition-delay:.24s } .reveal[data-d="4"]{ transition-delay:.32s }

/* ---------- MARQUEE ---------- */
.marq{ overflow:hidden; white-space:nowrap; padding:14px 0; border-top:1px solid var(--line);
       border-bottom:1px solid var(--line); background:var(--green); color:var(--cream); }
.marq-t{ display:inline-block; animation:marq 28s linear infinite;
         font-family:var(--serif); font-weight:800; font-style:italic; font-size:clamp(20px,2.6vw,30px); }
.marq-t span{ margin:0 24px; }
.marq:hover .marq-t{ animation-play-state:paused; }
@keyframes marq{ to{ transform:translateX(-50%); } }

/* ---------- WORK GRID ---------- */
.filters{ display:flex; gap:8px; flex-wrap:wrap; }
.chip{
  cursor:pointer; background:none; border:1.5px solid var(--line); color:var(--fg);
  font:700 12px var(--sans); letter-spacing:.12em; text-transform:uppercase;
  padding:11px 18px; border-radius:var(--radius); position:relative; overflow:hidden;
  transition:color .3s, border-color .3s;
}
.chip::before{
  content:''; position:absolute; inset:0; background:var(--chip,var(--green));
  transform:scaleY(0); transform-origin:bottom; transition:transform .3s var(--ease); z-index:-1;
}
.chip{ z-index:0; }
.chip[aria-pressed="true"]{ color:#fff; border-color:var(--chip,var(--green)); }
.chip[aria-pressed="true"]::before{ transform:scaleY(1); }
.chip[aria-pressed="true"].on-light{ color:var(--ink); }

.grid{ display:grid; gap:18px; }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }

.card{
  position:relative; display:block; text-decoration:none; overflow:hidden;
  background:var(--ink); aspect-ratio:4/5; border-radius:var(--radius);
  transition:transform .5s var(--ease), box-shadow .5s var(--ease);
}
.card:hover{ transform:translateY(-6px); box-shadow:0 26px 50px rgba(22,20,15,.3); }
.card-m{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
.card-m img{ width:100%; height:100%; object-fit:cover; object-position:center top;
             transition:transform .7s var(--ease); }
.card:hover .card-m img{ transform:scale(1.05); }
.card-m.logo{ background:#fff; padding:14% 16%; }
.card-m.logo img{ width:auto; height:auto; max-width:100%; max-height:100%; object-fit:contain; }
/* colour bar keyed to discipline — the connective tissue */
.card::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:4px;
  background:var(--dc,var(--green)); z-index:3; transform:scaleX(0); transform-origin:left;
  transition:transform .5s var(--ease);
}
.card:hover::after{ transform:scaleX(1); }
.card-tag{
  position:absolute; top:12px; left:12px; z-index:3;
  background:var(--dc,var(--green)); color:var(--dci,#fff);
  font:800 10px var(--sans); letter-spacing:.12em; text-transform:uppercase;
  padding:6px 10px; border-radius:2px;
}
.card-yr{ position:absolute; top:12px; right:12px; z-index:3;
  font:700 10px var(--sans); letter-spacing:.12em; color:rgba(236,230,214,.72); }
.card-cap{
  position:absolute; left:0; right:0; bottom:0; z-index:3; padding:20px 16px 18px;
  background:linear-gradient(to top,rgba(22,20,15,.94),rgba(22,20,15,.6) 55%,transparent);
}
.card-cap b{ display:block; font:800 17px var(--sans); color:var(--cream); line-height:1.2; }
.card-cap i{ display:block; font:600 12px var(--sans); font-style:normal;
             color:rgba(236,230,214,.68); margin-top:3px; }
.card.hide{ display:none; }
/* a client logo sitting on top of a site preview */
.card-logo{
  position:absolute; top:12px; right:12px; z-index:3;
  width:clamp(46px,26%,78px); aspect-ratio:1; border-radius:50%;
  background:#fff; display:flex; align-items:center; justify-content:center;
  padding:9px; box-shadow:0 6px 18px rgba(22,20,15,.34);
}
.card-logo img{ width:100%; height:100%; object-fit:contain; }
.card-logo + .card-tag{ /* keep the year clear of the logo */ }
.card-logo ~ .card-yr{ display:none; }

/* the ball landing on a piece during "bounce through the work" */
.card.bounced{
  transform:translateY(-10px) scale(1.02);
  box-shadow:0 30px 60px rgba(22,20,15,.36);
  outline:3px solid var(--dc,var(--green)); outline-offset:3px;
}

/* Adaptive grid: --cols is set by fitGrid() so the last row is never ragged */
.grid[data-fit]{ grid-template-columns:repeat(var(--cols,4),minmax(0,1fr)); }
@media (max-width:1024px){ .grid[data-fit]{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:640px){  .grid[data-fit]{ grid-template-columns:1fr; } }
/* web project card (no screenshot — designed, not faked) */
.card-web{ background:var(--ink); }
.card-web .browser{
  position:absolute; inset:12% 10%; border-radius:4px; overflow:hidden;
  background:var(--cream); box-shadow:0 20px 40px rgba(0,0,0,.4);
  display:flex; flex-direction:column;
}
.card-web .bar{ height:22px; background:#ddd6c4; display:flex; align-items:center; gap:5px; padding:0 8px; flex:none; }
.card-web .bar i{ width:7px; height:7px; border-radius:50%; background:#b9b0a0; }
.card-web .site{ flex:1; display:flex; flex-direction:column; align-items:center;
                 justify-content:center; gap:8px; padding:12px; text-align:center; }

/* ---------- PANEL / PRICING ---------- */
.panel{
  background:var(--cream-2); border:1.5px solid var(--line); border-radius:var(--radius);
  padding:28px 24px; display:flex; flex-direction:column; position:relative;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s;
}
.panel:hover{ transform:translateY(-4px); box-shadow:0 20px 44px rgba(22,20,15,.14); }
.dark .panel{ background:var(--ink-2); border-color:var(--line); }
.panel.hero-panel{ background:var(--ink); color:var(--cream); border-color:transparent;
                   box-shadow:0 24px 50px rgba(22,20,15,.3); }
.panel.hero-panel .p-kick{ color:var(--green); }
.panel .p-kick{ font:800 12px var(--sans); letter-spacing:.16em; text-transform:uppercase;
                color:var(--dc,var(--green)); }
.panel .p-price{ font-family:var(--serif); font-weight:900; font-size:clamp(34px,4vw,44px);
                 margin:12px 0 4px; line-height:1; }
.panel .p-price small{ font:600 13px var(--sans); opacity:.55; }
.panel .p-desc{ font:500 13px var(--sans); color:var(--muted); margin-bottom:18px; }
.panel.hero-panel .p-desc{ color:rgba(236,230,214,.66); }
.panel ul{ list-style:none; margin:0 0 22px; padding:0; display:flex; flex-direction:column;
           gap:10px; font:500 14px var(--sans); flex:1; }
.panel ul li{ display:flex; gap:9px; align-items:flex-start; }
.panel ul li::before{ content:'✦'; color:var(--dc,var(--green)); flex:none; }
.badge{
  position:absolute; top:-12px; left:50%; transform:translateX(-50%);
  background:var(--gold); color:var(--ink); font:800 10px var(--sans);
  letter-spacing:.14em; text-transform:uppercase; padding:6px 14px; border-radius:2px;
  white-space:nowrap;
}

/* ---------- FORMS ---------- */
.field{ margin-bottom:16px; }
.field label{ display:block; font:700 11px var(--sans); letter-spacing:.1em;
              text-transform:uppercase; color:var(--muted); margin-bottom:6px; }
.input,input[type=text],input[type=email],input[type=tel],input[type=url],select,textarea{
  width:100%; background:#fff; border:1.5px solid var(--line); border-radius:2px;
  padding:14px; font:500 15px var(--sans); color:var(--ink); outline:none;
  transition:border-color .2s, box-shadow .2s;
}
textarea{ resize:vertical; min-height:110px; }
.input:focus,input:focus,select:focus,textarea:focus{
  border-color:var(--green); box-shadow:0 0 0 3px rgba(28,138,77,.16);
}
.err{ font:600 13px var(--sans); color:#c8341f; margin-top:8px; }
.hp{ position:absolute; left:-9999px; }

/* selectable option cards (builder / brand score) */
.opts{ display:grid; gap:10px; }
.opt{
  display:flex; align-items:center; gap:12px; cursor:pointer; text-align:left;
  background:var(--cream-2); border:1.5px solid var(--line); border-radius:var(--radius);
  padding:16px 18px; font:600 15px var(--sans); color:var(--fg); width:100%;
  transition:border-color .25s, background .25s, transform .25s var(--ease);
}
.opt:hover{ transform:translateX(3px); border-color:var(--muted-2); }
.opt[aria-pressed="true"]{ border-color:var(--green); background:#fff;
  box-shadow:inset 3px 0 0 var(--green); }
.opt .ic{ font-size:20px; flex:none; }
.opt .ck{ margin-left:auto; opacity:0; color:var(--green); font-weight:900; }
.opt[aria-pressed="true"] .ck{ opacity:1; }

/* ---------- STEPPER ---------- */
.steps{ display:flex; gap:6px; margin-bottom:28px; }
.steps i{ flex:1; height:3px; background:var(--line); border-radius:2px; overflow:hidden; }
.steps i.done{ background:var(--green); }
.steps i.now{ background:linear-gradient(90deg,var(--green) 50%,var(--line) 50%); }

/* ---------- TESTIMONIAL ---------- */
.quote{ text-align:center; max-width:900px; margin:0 auto; }
.quote p{ font-family:var(--serif); font-weight:500; font-style:italic;
          font-size:clamp(22px,3.1vw,38px); line-height:1.32; margin:0; }
.quote .who{ margin-top:22px; font:700 12px var(--sans); letter-spacing:.14em;
             text-transform:uppercase; color:var(--muted); }
.dots{ display:flex; gap:9px; align-items:center; justify-content:center; }
.dot{ cursor:pointer; border:0; padding:0; width:9px; height:9px; border-radius:50%;
      background:var(--line); transition:width .35s var(--ease), background .3s; }
.dot[aria-current="true"]{ width:28px; background:var(--dc,var(--green)); border-radius:5px; }
.arw{ cursor:pointer; background:none; border:1.5px solid var(--line); color:var(--fg);
      width:44px; height:44px; border-radius:50%; display:flex; align-items:center;
      justify-content:center; font-size:20px; line-height:1; transition:border-color .2s,color .2s,transform .2s; }
.arw:hover{ border-color:var(--green); color:var(--green); transform:scale(1.06); }

/* ---------- LOADER (on-brand, VZN mark) ---------- */
#vzn-load{
  position:fixed; inset:0; z-index:300; background:var(--cream);
  display:flex; align-items:center; justify-content:center; flex-direction:column; gap:20px;
  transition:opacity .5s var(--ease), visibility .5s;
}
#vzn-load.gone{ opacity:0; visibility:hidden; pointer-events:none; }
#vzn-load .lm{ font:800 26px var(--sans); letter-spacing:.2em; color:var(--ink); }
#vzn-load .lm i{ font-style:normal; color:var(--green); display:inline-block;
                 animation:lpulse 1s var(--ease) infinite; }
#vzn-load .lbar{ width:150px; height:2px; background:var(--line); overflow:hidden; }
#vzn-load .lbar i{ display:block; height:100%; width:40%; background:var(--green);
                   animation:lslide 1.1s var(--ease) infinite; }
@keyframes lpulse{ 0%,100%{ transform:translateY(0) } 45%{ transform:translateY(-7px) } }
@keyframes lslide{ 0%{ transform:translateX(-100%) } 100%{ transform:translateX(340%) } }

/* ---------- FOOTER ---------- */
.foot{ background:var(--ink); color:var(--cream); padding:56px 0 32px; }
.foot a{ color:rgba(236,230,214,.72); text-decoration:none; }
.foot a:hover{ color:var(--cream); }
.foot-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:36px; margin-bottom:40px; }
.foot h4{ font:800 11px var(--sans); letter-spacing:.18em; text-transform:uppercase;
          color:rgba(236,230,214,.45); margin:0 0 14px; }
.foot ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px;
          font:500 14px var(--sans); }
.foot-bar{ border-top:1px solid rgba(236,230,214,.14); padding-top:22px; display:flex;
           justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap;
           font:600 11px var(--sans); letter-spacing:.1em; text-transform:uppercase;
           color:rgba(236,230,214,.45); }

/* ---------- RULES / DIVIDERS ---------- */
.rule{ height:1px; background:var(--line); border:0; margin:0; }
.cat{ display:flex; align-items:center; gap:18px; margin:0 0 26px; }
.cat .n{ font:800 13px var(--sans); letter-spacing:.2em; color:var(--dc,var(--green)); flex:none; }
.cat h3{ font-family:var(--serif); font-weight:900; text-transform:uppercase;
         font-size:clamp(22px,3vw,36px); line-height:.9; flex:none; }
.cat .ln{ flex:1; height:1.5px; background:var(--line); }

/* ---------- RESPONSIVE ---------- */
@media (max-width:1024px){
  .grid-4{ grid-template-columns:repeat(2,1fr); }
  .foot-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:900px){
  :root{ --pad:24px; }
  .grid-3{ grid-template-columns:repeat(2,1fr); }
  .nav-links{
    position:fixed; inset:56px 0 auto; flex-direction:column; align-items:stretch; gap:0;
    background:var(--cream); border-bottom:1px solid var(--line);
    padding:8px var(--pad) 22px; transform:translateY(-120%);
    transition:transform .4s var(--ease); box-shadow:0 20px 40px rgba(22,20,15,.14);
  }
  .nav-links.open{ transform:translateY(0); }
  .nav-links a{ padding:15px 0; border-bottom:1px solid var(--line-2); font-size:14px; }
  .nav-links a.btn{ margin-top:14px; justify-content:center; border-bottom:0; }
  .nav-toggle{ display:block; }
}
@media (max-width:640px){
  :root{ --pad:20px; }
  .grid-3,.grid-2,.grid-4{ grid-template-columns:1fr; }
  .foot-grid{ grid-template-columns:1fr; gap:26px; }
  .cat{ flex-wrap:wrap; gap:12px; }
  .cat .ln{ display:none; }
  .btn{ padding:15px 22px; }
}

/* ---------- PRINT ---------- */
@media print{
  .nav,#vzn-load,.marq,#bounce,.foot{ display:none !important; }
  .reveal{ opacity:1 !important; transform:none !important; }
  body{ background:#fff; color:#000; }
}