/* YVNART design system — tokens first, everything below references them */
:root{
  --canvas:#F7F6F1;      /* page background (Stryker white-smoke) */
  --surface:#F1F0EC;     /* alternate band */
  --ink:#191919;
  --ink-soft:#55554D;
  --ink-mute:#9A978F;
  --line:rgba(25,25,25,.14);
  --blush:#E5D1D1;       /* logo pink, the only accent */
  --blush-ink:#B98E90;
  --night:#131212;       /* dark acts */
  --night-ink:#F3EEE6;

  --hdr-h:clamp(64px,6vw,80px);
  --pad:clamp(18px,4vw,64px);
  --gap:clamp(18px,2.2vw,28px);
  --beat:clamp(72px,10vw,144px);     /* vertical rhythm between sections */
  --max:1600px;
  --r:2px;                           /* rounded corners kept near zero */
  --ease:cubic-bezier(.22,.61,.36,1);
  --dur:.7s;

  --fd:"Inter Tight",system-ui,sans-serif;
  --ft:"Inter",system-ui,sans-serif;
  --display:clamp(2.6rem,9vw,9.5rem);
  --h2:clamp(2rem,4.6vw,4.2rem);
  --h3:clamp(1.25rem,1.8vw,1.6rem);
  --body:clamp(1rem,1.05vw,1.125rem);
  --small:.8125rem;
  --tiny:.6875rem;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
html:focus-within{scroll-behavior:smooth}
body{margin:0;background:var(--canvas);color:var(--ink);font-family:var(--ft);font-size:var(--body);line-height:1.5;font-weight:400;-webkit-font-smoothing:antialiased}
img,video{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--fd);font-weight:400;margin:0;line-height:1.05;letter-spacing:-.02em}
h1{font-size:var(--display);text-transform:uppercase;letter-spacing:-.035em;line-height:.92}
h2{font-size:var(--h2);text-transform:uppercase;letter-spacing:-.025em}
h3{font-size:var(--h3);text-transform:uppercase;letter-spacing:-.01em}
p{margin:0 0 1em;max-width:62ch}
p:last-child{margin-bottom:0}
.lede{font-size:clamp(1.1rem,1.5vw,1.45rem);line-height:1.4;color:var(--ink);max-width:40ch}
.eyebrow{font-size:var(--tiny);text-transform:uppercase;letter-spacing:.14em;color:var(--ink-soft);display:block;margin-bottom:.9em}
.mute{color:var(--ink-soft)}
.wrap{padding-inline:var(--pad);max-width:var(--max);margin-inline:auto}
.full{width:100%}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* buttons: pill outline, as the reference */
.btn{display:inline-flex;align-items:center;gap:.6em;border:1px solid var(--ink);border-radius:999px;padding:.72em 1.25em;font-size:var(--tiny);text-transform:uppercase;letter-spacing:.12em;line-height:1;min-height:40px;transition:background var(--dur) var(--ease),color var(--dur) var(--ease);white-space:nowrap}
.btn svg{width:12px;height:12px;transition:transform var(--dur) var(--ease)}
.btn:hover{background:var(--ink);color:var(--canvas)}
.btn:hover svg{transform:translateX(3px)}
.btn.inv{border-color:var(--night-ink);color:var(--night-ink)}
.btn.inv:hover{background:var(--night-ink);color:var(--night)}
.btn.solid{background:var(--ink);color:var(--canvas)}
.btn.solid:hover{background:var(--blush);color:var(--ink);border-color:var(--blush)}

/* header */
.hdr{position:fixed;inset:0 0 auto 0;height:var(--hdr-h);z-index:50;display:flex;align-items:center;justify-content:space-between;padding-inline:var(--pad);mix-blend-mode:difference;color:#fff}
.hdr .logo{display:block;height:clamp(14px,1.3vw,18px)}
.hdr .logo img{height:100%;width:auto;filter:brightness(0) invert(1)}
.hdr nav{display:flex;gap:clamp(18px,2.4vw,40px);font-size:var(--tiny);text-transform:uppercase;letter-spacing:.14em}
.hdr nav a{position:relative;padding:.4em 0;min-height:32px;display:inline-flex;align-items:center}
.hdr nav a::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform var(--dur) var(--ease)}
.hdr nav a:hover::after,.hdr nav a[aria-current]::after{transform:scaleX(1)}
@media (max-width:640px){.hdr nav{gap:16px}.hdr nav a.hide-m{display:none}}

/* grid bands with hairlines, as the reference */
.band{border-top:1px solid var(--line)}
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:0}
.cell{padding:var(--gap) var(--pad);border-right:1px solid var(--line);min-width:0}
.cell:last-child{border-right:0}
@media (max-width:900px){.grid{grid-template-columns:1fr}.grid>.cell{grid-column:auto!important;border-right:0;border-bottom:1px solid var(--line);padding-inline:var(--pad)}.grid>.cell:last-child{border-bottom:0}}

/* reveal */
.rv{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.rv.on{opacity:1;transform:none}
.rv.d1{transition-delay:.12s}.rv.d2{transition-delay:.24s}.rv.d3{transition-delay:.36s}
.lift{overflow:hidden}
.lift>span{display:block;transform:translateY(110%);transition:transform 1s var(--ease)}
.lift.on>span{transform:none}

/* page hero (inner pages) */
.phero{padding-top:calc(var(--hdr-h) + var(--beat));padding-bottom:var(--beat)}
.crumbs{font-size:var(--tiny);text-transform:uppercase;letter-spacing:.12em;color:var(--ink-soft);margin-bottom:2.5em;display:flex;gap:.8em;flex-wrap:wrap}
.crumbs a:hover{color:var(--ink)}

/* work cards */
.works{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));border-top:1px solid var(--line);border-left:1px solid var(--line)}
.work{border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:var(--gap);display:flex;flex-direction:column;gap:var(--gap);background:var(--canvas);transition:background var(--dur) var(--ease)}
.work:hover{background:var(--surface)}
.work .thumb{aspect-ratio:16/10;overflow:hidden;background:var(--surface)}
.work .thumb img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
.work:hover .thumb img{transform:scale(1.04)}
.work .meta{display:flex;justify-content:space-between;align-items:baseline;gap:var(--gap);min-height:1.4em}
.work .meta h2,.work .meta h3{font-size:1.05rem;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.work .meta small{font-size:var(--tiny);text-transform:uppercase;letter-spacing:.12em;color:var(--ink-soft);white-space:nowrap;flex:0 0 auto}

/* footer */
.ftr{background:var(--night);color:var(--night-ink);padding:var(--beat) 0 var(--gap)}
.ftr .grid{align-items:start}
.ftr a:hover{color:var(--blush)}
.ftr .big{display:block;width:100%;height:auto;margin-top:var(--beat)}
.ftr .big img{width:100%;height:auto;filter:brightness(0) saturate(100%) invert(93%) sepia(8%) saturate(390%) hue-rotate(305deg) brightness(100%) contrast(90%)}
.ftr nav{display:flex;flex-direction:column;gap:.5em;font-size:var(--small)}
.ftr .legal{display:flex;justify-content:space-between;flex-wrap:wrap;gap:var(--gap);font-size:var(--tiny);text-transform:uppercase;letter-spacing:.12em;color:#8E8A83;margin-top:var(--gap);padding-top:var(--gap);border-top:1px solid rgba(243,238,230,.12)}
.ftr .cell{border-color:rgba(243,238,230,.12)}

/* prose */
.prose p{max-width:62ch}
.prose blockquote{margin:var(--beat) 0;font-family:var(--fd);font-size:clamp(1.4rem,2.6vw,2.4rem);line-height:1.2;letter-spacing:-.02em;max-width:26ch}
.prose blockquote cite{display:block;font-family:var(--ft);font-size:var(--tiny);text-transform:uppercase;letter-spacing:.12em;font-style:normal;margin-top:1em;color:var(--ink-soft)}

/* inquiry */
.inq{display:grid;grid-template-columns:1fr 1fr;gap:var(--beat)}
@media (max-width:900px){.inq{grid-template-columns:1fr}}
.spec{display:grid;grid-template-columns:max-content 1fr;gap:.6em var(--gap);font-size:var(--small)}
.spec dt{color:var(--ink-soft);text-transform:uppercase;letter-spacing:.12em;font-size:var(--tiny);padding-top:.25em}
.spec dd{margin:0}
.form{display:grid;gap:14px}
.form label{font-size:var(--tiny);text-transform:uppercase;letter-spacing:.12em;color:var(--ink-soft);display:grid;gap:6px}
.form input,.form textarea,.form select{font:inherit;font-size:16px;padding:.8em .9em;border:1px solid var(--line);background:#fff;border-radius:var(--r);color:var(--ink);width:100%;min-height:44px}
.form textarea{min-height:120px;resize:vertical}
.form input:focus,.form textarea:focus,.form select:focus{outline:2px solid var(--ink);outline-offset:1px;border-color:var(--ink)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:560px){.row2{grid-template-columns:1fr}}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rv,.lift>span{transition:none;opacity:1;transform:none}
}

/* honeypot */
.form .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}