/* davit.cc: a grainy lavender-grey dust hero over a flat light page, big tight Geist type, calm sections on a grey-lilac ground. Light only by choice. */
:root{
  --ground:#ECECF0; --ground-2:#F5F5F7; --surface:#FFFFFF; --ink:#111114; --ink-2:#4A4A55; --muted:#7C7B88;
  --line:#DCDCE3; --lilac:#D0CFEE; --lilac-deep:#6A68A8;
  --sans:"Geist", "Helvetica Neue", Arial, system-ui, sans-serif;
  --mono:"Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  color-scheme:light;
}
*{box-sizing:border-box}
html{background:var(--ground)}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:inherit}
a:focus-visible,button:focus-visible{outline:2px solid var(--lilac-deep);outline-offset:3px;border-radius:6px}
.page{padding-inline:clamp(16px,3.2vw,40px)}
.inner{max-width:1240px;margin-inline:auto}

/* Hero */
.hero{position:relative;overflow:hidden;isolation:isolate}
#shader{position:absolute;inset:0;width:100%;height:100%;z-index:-1;display:block}
.hero-fallback{position:absolute;inset:0;z-index:-2;background:linear-gradient(180deg,#F6F6F9 0%,#F6F6F9 78%,var(--ground) 100%)}
#shader{opacity:0;transition:opacity 1s linear}
#shader.on{opacity:1}
nav{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:22px}
.logo{font-weight:600;font-size:22px;letter-spacing:-.03em;text-decoration:none;display:flex;align-items:center;gap:10px}
.logo-mark{width:32px;height:32px;flex:none;display:block}
.links{display:flex;gap:clamp(14px,2.4vw,34px);align-items:center;font-size:16px;font-weight:500}
.links a{text-decoration:none;color:var(--ink)}
.links a:hover{color:var(--lilac-deep)}
.links a.btn-dark,.links a.btn-dark:hover{color:#fff}
.btn{display:inline-flex;align-items:center;gap:12px;border-radius:999px;font:500 16px var(--sans);text-decoration:none;padding:13px 22px;border:0;cursor:pointer;transition:transform .2s, background .2s}
.btn-dark{background:var(--ink);color:#fff}
.btn-dark:hover{transform:translateY(-1px)}
.btn-soft{background:rgba(17,17,20,.06);color:var(--ink);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.btn-soft:hover{background:rgba(17,17,20,.1)}
.btn .arrow{transition:transform .2s}
.btn:hover .arrow{transform:translateX(3px)}
.nav-cta{padding:10px 16px;border-radius:10px}
.hero-body{padding-block:clamp(70px,13vw,170px) clamp(70px,10vw,130px);display:flex;flex-direction:column;align-items:flex-start;gap:26px}
h1{margin:0;font-weight:500;font-size:clamp(44px,8.2vw,112px);line-height:.98;letter-spacing:-.045em;max-width:13ch;text-wrap:balance}
h1 .soft{color:var(--ink-2)}
.lede{margin:0;font-size:clamp(17px,1.6vw,21px);color:var(--ink-2);max-width:48ch}
.ctas{display:flex;gap:12px;flex-wrap:wrap;padding-top:6px}
.where{display:flex;gap:14px;flex-wrap:wrap;align-items:center;font-size:15px;color:var(--ink-2);padding-top:22px}
.where i{font-style:normal;font-variant-numeric:tabular-nums}
.where .sep{width:1px;height:14px;background:rgba(17,17,20,.18)}

/* Sections */
main{display:flex;flex-direction:column;gap:clamp(80px,10vw,140px);padding-block:clamp(70px,8vw,110px) 60px}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:28px}
.kicker{font-family:var(--mono);font-size:13px;color:var(--muted);letter-spacing:.02em}
h2{margin:6px 0 0;font-weight:500;font-size:clamp(32px,4.4vw,56px);letter-spacing:-.04em;line-height:1}
.sec-head p{margin:0;max-width:40ch;color:var(--ink-2)}
.sec-side{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.btn-sm{padding:10px 18px;font-size:15px}

.work{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.wcard{background:var(--surface);border-radius:22px;padding:14px;display:flex;flex-direction:column;gap:18px;text-decoration:none;transition:transform .25s}
.wcard:hover{transform:translateY(-3px)}
.wshot{border-radius:14px;aspect-ratio:16/10;position:relative;overflow:hidden;container-type:inline-size;background:var(--dpage)}
/* each product gets the hero dust in its own soft colour; the gradients stand in when WebGL is off */
.wshot[data-dust=rillow]{--dpage:#F3F7FB;background:radial-gradient(55% 70% at 22% 85%,rgba(112,140,179,.38),transparent 70%),radial-gradient(45% 55% at 82% 18%,rgba(112,140,179,.26),transparent 70%),var(--dpage)}
.wshot[data-dust=bundle]{--dpage:#F6F6F9;background:radial-gradient(55% 70% at 30% 90%,rgba(122,117,158,.36),transparent 70%),radial-gradient(40% 50% at 78% 30%,rgba(122,117,158,.24),transparent 70%),var(--dpage)}
.wshot[data-dust=unposed]{--dpage:#FAF5F6;background:radial-gradient(55% 70% at 20% 30%,rgba(168,122,138,.34),transparent 70%),radial-gradient(45% 60% at 80% 80%,rgba(168,122,138,.28),transparent 70%),var(--dpage)}
.wshot canvas{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity .9s ease}
.wshot canvas.on{opacity:1}
.dname{position:absolute;inset:0;display:grid;place-content:center;text-align:center;padding:0 16px;pointer-events:none}
.dname b{font-size:clamp(26px,9cqw,44px);font-weight:500;letter-spacing:-.045em;line-height:1.05;color:var(--ink)}
.dname span{font:clamp(11px,3.2cqw,14px) var(--mono);color:#55545F;margin-top:8px;letter-spacing:.02em}
.winfo{display:flex;justify-content:space-between;gap:12px;padding:0 8px 8px;align-items:baseline;flex-wrap:wrap}
.wname{font-size:22px;font-weight:500;letter-spacing:-.02em}
.wdesc{color:var(--ink-2);margin:2px 0 0;max-width:42ch}
.wyear{font-family:var(--mono);font-size:13px;color:var(--muted)}

.play{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.ptile{position:relative;border-radius:22px;overflow:hidden;background:var(--ink);color:#fff;aspect-ratio:4/5;text-decoration:none;display:flex;flex-direction:column;justify-content:flex-end;padding:20px;max-width:100%}
.ptile canvas{position:absolute;inset:0;width:100%;height:100%}
.ptile .ptxt{position:relative;display:flex;flex-direction:column;gap:4px}
.ptile b{font-weight:500;font-size:21px;letter-spacing:-.02em}
.ptile small{font-family:var(--mono);font-size:12px;color:rgba(255,255,255,.65)}
.ptile .tag{position:absolute;top:16px;left:16px;font-family:var(--mono);font-size:11px;padding:4px 9px;border-radius:999px;background:rgba(255,255,255,.14);color:#fff}

.xp{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.xrow{display:grid;grid-template-columns:110px minmax(0,1.1fr) minmax(0,1.6fr);gap:20px;padding-block:20px;border-bottom:1px solid var(--line);align-items:baseline}
.xyear{font-family:var(--mono);font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
.xco{font-size:20px;font-weight:500;letter-spacing:-.02em}
.xco small{display:block;font-size:14px;font-weight:400;color:var(--muted);letter-spacing:0}
.xwhat{color:var(--ink-2);display:flex;flex-direction:column;gap:8px}
.xwhat p{margin:0}
.xtech{font-family:var(--mono);font-size:12px;color:var(--muted)}

.posts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.post{background:var(--surface);border-radius:22px;padding:14px;display:flex;flex-direction:column;gap:18px}
.pshot{display:block;border-radius:14px;aspect-ratio:16/10;overflow:hidden;background:var(--ground-2)}
.pshot img{display:block;width:100%;height:100%;object-fit:cover;object-position:30% 50%;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
a.post:hover .pshot img{transform:scale(1.04)}
.pbody{display:flex;flex-direction:column;gap:12px;padding:0 10px 12px}
.post-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:4px}
.soon,.pdate{font-family:var(--mono);font-size:11px;padding:4px 10px;border-radius:999px;background:var(--ground);color:var(--ink-2)}
.pdate{font-variant-numeric:tabular-nums}
a.post{text-decoration:none;color:inherit;transition:transform .25s}
a.post:hover{transform:translateY(-3px)}
.ptopic{font-family:var(--mono);font-size:12px;color:var(--muted)}
.post h3{margin:0;font-weight:500;font-size:clamp(21px,1.9vw,25px);letter-spacing:-.03em;line-height:1.12}
.post p{margin:0;color:var(--ink-2)}

footer{padding-block:40px 56px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:flex-end}
.big{font-size:clamp(30px,4vw,48px);font-weight:500;letter-spacing:-.04em;line-height:1.05;margin:0}
.contact{display:flex;gap:22px;flex-wrap:wrap;font-family:var(--mono);font-size:14px}
.contact a{text-decoration:none;border-bottom:1px solid var(--line)}
.contact a:hover{border-color:var(--ink)}

@media (max-width:1100px){.play{grid-template-columns:1fr 1fr}}
@media (max-width:820px){
  .links a:not(.nav-cta){display:none}
  .work{grid-template-columns:1fr}
  .posts{grid-template-columns:1fr}
  .post{min-height:0}
  .play{grid-template-columns:1fr 1fr}
  .xrow{grid-template-columns:1fr;gap:4px}
}
@media (max-width:520px){.ctas{gap:8px}.ctas .btn{padding:12px 14px;font-size:15px;gap:8px;white-space:nowrap}.where{row-gap:6px}.where>span.sep:last-of-type{display:none}.where>i:last-child{flex-basis:100%}.play{grid-template-columns:1fr}.ptile{aspect-ratio:16/11}}
@media (max-width:820px) and (min-width:521px){
  .post{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:center;gap:20px}
  .pbody{padding:6px 10px 6px 0}
}
@media (prefers-reduced-motion: reduce){.btn,.wcard,a.post,.btn .arrow,.pshot img{transition:none}}


/* Motion */
.navwrap{position:fixed;top:0;left:0;right:0;z-index:20;padding-top:env(safe-area-inset-top,0px);transition:background .35s ease, box-shadow .35s ease, backdrop-filter .35s ease}
.navwrap.scrolled{background:rgba(236,236,240,.72);-webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3);box-shadow:0 1px 0 rgba(17,17,20,.07)}
.navwrap nav{transition:padding .35s ease}
.navwrap.scrolled nav{padding-block:12px}
.hero-body{padding-top:calc(clamp(70px,13vw,170px) + 80px)}
.logo-mark{transition:transform .5s cubic-bezier(.34,1.56,.64,1);transform-origin:50% 80%;animation:peek .9s cubic-bezier(.34,1.56,.64,1) .1s both}
.logo:hover .logo-mark{transform:rotate(-10deg) scale(1.08)}
@keyframes peek{from{transform:translateY(10px) rotate(12deg) scale(.6);opacity:0}to{transform:none;opacity:1}}
.intro{animation:rise .9s cubic-bezier(.2,.7,.2,1) var(--d,0s) both}
#headline .w{display:inline-block;animation:rise 1s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(.3s + var(--i) * 45ms)}
@keyframes rise{from{opacity:0;transform:translateY(22px);filter:blur(8px)}to{opacity:1;transform:none;filter:blur(0)}}
.btn-dark{box-shadow:0 0 0 0 rgba(17,17,20,0);transition:transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s}
.btn-dark:hover{transform:translateY(-2px);box-shadow:0 10px 24px -10px rgba(17,17,20,.5)}
.ptile{transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.ptile:hover{transform:translateY(-4px) rotate(-.4deg)}
.xrow{transition:background .25s}
.xrow:hover{background:linear-gradient(90deg,rgba(208,207,238,.0),rgba(208,207,238,.35),rgba(208,207,238,0))}
@supports (animation-timeline: view()){
  .reveal{animation:reveal linear both;animation-timeline:view();animation-range:entry 0% entry 55%}
  @keyframes reveal{from{opacity:0;transform:translateY(40px) scale(.985)}to{opacity:1;transform:none}}
}
@media (prefers-reduced-motion: reduce){
  .intro,#headline .w,.logo-mark,.reveal{animation:none!important}
  .navwrap,.navwrap nav,.ptile,.btn-dark{transition:none}
}

/* 404 */
.notfound{min-height:100vh;display:flex;flex-direction:column}
.notfound .nf{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:22px;padding-block:120px}
.notfound .nf p{margin:0;font-size:clamp(17px,1.6vw,21px);color:var(--ink-2);max-width:44ch}

/* Phone menu */
.menu-btn{display:none;width:42px;height:42px;border:0;border-radius:10px;background:rgba(17,17,20,.06);cursor:pointer;position:relative;flex:none;-webkit-tap-highlight-color:transparent}
.menu-btn span{position:absolute;left:12px;right:12px;height:1.75px;border-radius:2px;background:var(--ink);transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.menu-btn span:first-child{transform:translateY(-3.5px)}
.menu-btn span:last-child{transform:translateY(3.5px)}
.navwrap.open .menu-btn span:first-child{transform:rotate(45deg)}
.navwrap.open .menu-btn span:last-child{transform:rotate(-45deg)}
.menu{display:none}
section[id]{scroll-margin-top:84px}
@media (max-width:820px){
  .links{gap:8px}
  .menu-btn{display:block}
  .menu{flex-direction:column;padding:8px 0 24px}
  .menu>a{font-size:32px;font-weight:500;letter-spacing:-.035em;text-decoration:none;padding:12px 0;border-bottom:1px solid var(--line)}
  .menu>a:active{color:var(--lilac-deep)}
  .menu-foot{display:flex;gap:10px;flex-wrap:wrap;padding-top:24px}
  .navwrap.open{bottom:0;background:var(--ground);-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none;overflow-y:auto;overscroll-behavior:contain}
  .navwrap.open .menu{display:flex;animation:menu-in .3s cubic-bezier(.2,.7,.2,1) both}
  @keyframes menu-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
  .menu-open,.menu-open body{overflow:hidden}
}

/* Phones: tighter rhythm, shorter Experience, tap-sized footer links */
@media (max-width:520px){
  .hero-body{padding-top:120px;padding-bottom:36px;gap:22px}
  main{gap:72px;padding-top:44px}
  .sec-head{margin-bottom:22px}
  .xrow{grid-template-columns:minmax(0,1fr) auto;column-gap:12px;row-gap:8px;padding-block:18px}
  .xrow .xco{grid-column:1;grid-row:1}
  .xrow .xyear{grid-column:2;grid-row:1;font-size:12px}
  .xrow .xwhat{grid-column:1/-1;font-size:15px;line-height:1.5}
  .xtech{font-size:11.5px}
  .xco{font-size:19px}
  footer{padding-block:32px 40px}
  .contact{gap:8px;font-size:13.5px}
  .contact a{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:999px;border:0;background:rgba(17,17,20,.06)}
}

.wname,.post h3,.ptile b{text-wrap:balance}
@media (max-width:820px){.nav-cta{min-height:44px}.menu-btn{width:44px;height:44px}}
@media (max-width:520px){
  h1 .soft{display:block}
  .ctas .btn{min-height:44px}
  .btn-sm{min-height:44px}
  /* Playground: a swipe row where the next tile peeks in */
  .play{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:-16px;padding-inline:16px;scroll-padding-inline:16px;scrollbar-width:none;overscroll-behavior-x:contain}
  .play::-webkit-scrollbar{display:none}
  .ptile{flex:0 0 80%;aspect-ratio:4/5;scroll-snap-align:start}
}

/* Touch: press feedback instead of hover states that stick after a tap */
a,button{-webkit-tap-highlight-color:transparent}
@media (hover:none){
  .wcard:hover,.ptile:hover,a.post:hover,.btn-dark:hover{transform:none;box-shadow:none}
  .btn:hover .arrow,a.post:hover .pshot img{transform:none}
  .xrow:hover{background:none}
  .wcard,.ptile,a.post,.btn{transition:transform .15s ease}
  .wcard:active,.ptile:active,a.post:active{transform:scale(.985)}
  .btn:active{transform:scale(.96)}
}