/* v3b: light-themed copy of v3 minimal editorial (greyscale, typographic, no WebGL) */
@media all{:root{color-scheme:light}}
:root{--bg:#f6f6f4;--bg2:#ececea;--fg:#111;--mute:#6e6e6e;--accent:#333;--line:#d8d8d6;--font-head:'Space Grotesk',system-ui,sans-serif;--font-body:'Inter',system-ui,sans-serif;--gut:clamp(16px,4vw,56px)}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:auto}
body{background:var(--bg);color:var(--fg);font:400 16px/1.6 var(--font-body);min-height:100vh;display:flex;flex-direction:column;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img,video{display:block;max-width:100%}
h1,h2,h3{font-family:var(--font-head);font-weight:700;letter-spacing:-.02em;line-height:1.08}
.nav{position:sticky;top:0;z-index:30;display:flex;justify-content:space-between;align-items:center;padding:18px var(--gut);background:linear-gradient(var(--bg) 60%,transparent)}
.logo{font:500 13px var(--font-head);letter-spacing:.2em}.logo b{color:var(--mute);font-weight:500}
.nav nav a{margin-left:24px;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.nav nav a:hover,.nav nav a[aria-current=page]{color:var(--fg)}
.nav nav a[aria-current=page]{border-bottom:1px solid var(--accent)}
main{flex:1;padding:0 var(--gut) 80px}
.view{display:none;max-width:1100px;margin:0;animation:fade .5s ease both}
body[data-view=work] .home,body[data-view=about] [data-view=about],body[data-view=contact] [data-view=contact],body[data-view=services] [data-view=services],body[data-view=project] .project{display:block}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.home{max-width:1500px}
.eyebrow{color:var(--mute);font-size:12px;letter-spacing:.24em;text-transform:uppercase;margin:6vh 0 18px}
.home h1{font-size:clamp(40px,8vw,112px);max-width:14ch;margin-bottom:24px;text-transform:uppercase;color:#808790;background:linear-gradient(180deg,#9ea3aa 0%,#6f757c 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.lead{font-size:clamp(17px,2vw,22px);color:#3a3a3a;max-width:46ch;margin-bottom:9vh}
/* work index */
.index{list-style:none;padding:0;border-top:1px solid var(--line)}
.index a{display:grid;grid-template-columns:70px 2.2fr 1.4fr 1.4fr;gap:16px;align-items:baseline;padding:18px 0;border-bottom:1px solid var(--line)}
.index .yr{color:var(--mute);font-size:13px;font-variant-numeric:tabular-nums}
.index .ti{font:700 clamp(18px,2.2vw,28px) var(--font-head);letter-spacing:-.01em}
.index .st,.index .ty{color:var(--mute);font-size:14px}
.index .th{display:none}
.index:hover a{opacity:.35}.index a:hover,.index a:focus-visible{opacity:1}
#peek{position:fixed;left:0;top:0;width:300px;height:auto;z-index:20;pointer-events:none;opacity:0;transition:opacity .25s ease;box-shadow:0 20px 50px #0003;will-change:transform}
#peek.on{opacity:1}
/* about / contact */
.page{max-width:720px}
.page h2{font-size:clamp(34px,5vw,60px);margin:6vh 0 24px}
.big{font:700 clamp(24px,4vw,44px)/1.15 var(--font-head);letter-spacing:-.02em;margin-bottom:24px}
.page p{color:#3a3a3a;max-width:62ch}.page p+p{margin-top:16px}
.sec{font:700 15px var(--font-head);letter-spacing:.14em;text-transform:uppercase;color:var(--fg);margin:44px 0 16px}
.featured{list-style:disc;padding:0 0 0 1.2em;max-width:62ch}.featured li{margin-bottom:10px;padding-left:.3em}.featured li::marker{color:var(--mute)}
.clients{list-style:none;padding:0;display:grid;grid-template-columns:repeat(2,max-content);gap:8px 56px;color:#3a3a3a}
.page p.role{color:var(--mute);margin:-8px 0 24px}.page p.cta{margin-top:28px}
.page p.svc-contact{margin-top:14px}.svc-contact a{font:700 clamp(18px,2.6vw,26px)/1.5 var(--font-head);opacity:.8}.svc-contact a:hover,.svc-contact a:focus-visible{opacity:1}
.page p.social{margin-top:36px}.social a{display:inline-flex;align-items:center;gap:8px}.social a::before{content:"";width:16px;height:16px;background:currentColor;-webkit-mask:center/contain no-repeat;mask:center/contain no-repeat}
.social a[data-icon=linkedin]::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Ccircle cx=%225.9%22 cy=%225.3%22 r=%222%22/%3E%3Crect x=%224.3%22 y=%229%22 width=%223.2%22 height=%2210.5%22/%3E%3Cpath d=%22M10.3 9h3v1.5c.6-1.1 1.8-1.8 3.4-1.8 2.9 0 3.8 1.9 3.8 4.4v5.4h-3.2v-4.9c0-1.2-.4-2-1.6-2s-2 .9-2 2.2v4.7h-3.4z%22/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Ccircle cx=%225.9%22 cy=%225.3%22 r=%222%22/%3E%3Crect x=%224.3%22 y=%229%22 width=%223.2%22 height=%2210.5%22/%3E%3Cpath d=%22M10.3 9h3v1.5c.6-1.1 1.8-1.8 3.4-1.8 2.9 0 3.8 1.9 3.8 4.4v5.4h-3.2v-4.9c0-1.2-.4-2-1.6-2s-2 .9-2 2.2v4.7h-3.4z%22/%3E%3C/svg%3E")}
.social a[data-icon=instagram]::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Crect x=%223.2%22 y=%223.2%22 width=%2217.6%22 height=%2217.6%22 rx=%225%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22/%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%224.1%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22/%3E%3Ccircle cx=%2217.2%22 cy=%226.8%22 r=%221.25%22/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Crect x=%223.2%22 y=%223.2%22 width=%2217.6%22 height=%2217.6%22 rx=%225%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22/%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%224.1%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22/%3E%3Ccircle cx=%2217.2%22 cy=%226.8%22 r=%221.25%22/%3E%3C/svg%3E")}
.social a{margin-right:28px;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}.social a:hover,.social a:focus-visible{color:var(--fg)}
.biglink{font:700 clamp(22px,4vw,44px) var(--font-head)}
/* project */
.project{padding-top:4vh}
.p-hero{display:block;width:min(100%,728px);height:auto;margin-bottom:28px}   /* shown in full, never cropped */
video.p-hero{object-fit:contain;aspect-ratio:auto;background:#000}
.p-vids{display:flex;gap:8px;overflow:auto;margin-bottom:28px}.p-vids video{height:260px;aspect-ratio:1;background:#000}
.sub{color:var(--mute);font-size:12px;letter-spacing:.24em;text-transform:uppercase}
.project h1{font-size:clamp(34px,6vw,80px);margin:6px 0 24px}
.p-cols{display:grid;grid-template-columns:2fr 1fr;gap:40px;max-width:1000px}
.p-cols p{white-space:pre-line;font-size:18px;color:#3a3a3a}
dl{display:grid;gap:14px;font-size:12px;color:var(--mute);letter-spacing:.1em;text-transform:uppercase;align-content:start}
dd{color:var(--fg);font-size:15px;letter-spacing:0;text-transform:none;margin:2px 0 0}
.p-links{display:flex;flex-wrap:wrap;gap:10px;margin:26px 0}
.p-links a{padding:12px 24px;border:1px solid var(--fg);font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.p-links a:hover{background:var(--fg);color:var(--bg)}
.p-pager{display:flex;justify-content:space-between;gap:20px;border-top:1px solid var(--line);margin-top:48px;padding-top:20px;max-width:1000px}
.p-pager a+a{text-align:right}
.p-pager small{display:block;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--mute)}
.p-pager span{font:700 clamp(16px,2vw,24px) var(--font-head)}
footer{padding:24px var(--gut);color:var(--mute);font-size:12px;border-top:1px solid var(--line)}
/* smooth hover/focus transitions, opacity rollovers for text links */
.logo,.nav nav a,.social a,.svc-contact a,.biglink,.featured a,.p-links a,.p-pager a,.index a{transition:color .3s ease,background-color .3s ease,border-color .3s ease,opacity .3s ease}
.featured a,.biglink{opacity:.8}.featured a:hover,.featured a:focus-visible,.biglink:hover,.biglink:focus-visible{opacity:1}
.p-pager a{opacity:.6}.p-pager a:hover,.p-pager a:focus-visible{opacity:1}
.ext{display:contents}.nav nav a.soon{position:relative}
.nav nav a.soon::after{content:attr(data-soon);position:absolute;right:0;top:100%;margin-top:8px;white-space:nowrap;font-size:10px;letter-spacing:.14em;color:var(--fg);opacity:0;transition:opacity .3s ease;pointer-events:none}
.nav nav a.soon:hover::after,.nav nav a.soon:focus-visible::after{opacity:1}
@media (prefers-reduced-motion:reduce){.view{animation:none}.logo,.nav nav a,.biglink,.featured a,.p-links a,.p-pager a,.index a,#peek{transition:none}}
/* touch: no hover preview, show a small thumbnail in each row */
@media (hover:none),(max-width:700px){
  #peek{display:none}.index:hover a{opacity:1}
  .index a{grid-template-columns:1fr;grid-template-areas:"th" "ti" "meta";gap:6px;align-items:start;padding:20px 0}
  .index .yr{display:none}.index .ti{grid-area:ti}.index .th{display:block;grid-area:th;width:100%;height:auto;aspect-ratio:1200/630;object-fit:cover;margin-bottom:6px}
  .index .st{grid-area:meta}.index .ty{display:none}
}
@media (max-width:700px){.p-cols{grid-template-columns:1fr}}
@media (max-width:480px){.nav{flex-wrap:wrap;row-gap:8px}.nav nav{flex:1 0 100%;display:flex;justify-content:space-between}.nav nav a{margin-left:0}.clients{grid-template-columns:1fr}}

/* examples (same layout as v2b): 3 across (2 on phones), natural proportions, no frames */
.p-quote{max-width:820px;margin:64px auto 0 0;padding:40px 0 34px;border-top:1px solid var(--fg);border-bottom:1px solid var(--fg);text-align:center}
.p-quote::before{content:"\201C";display:block;font:700 96px/.7 var(--font-head);height:44px;color:var(--fg)}
.p-quote blockquote{margin:0}.p-quote blockquote p{font:700 clamp(26px,4.2vw,46px)/1.15 var(--font-head);letter-spacing:-.02em;color:var(--fg);white-space:normal;max-width:none;margin:0 auto}
.p-quote figcaption{margin-top:22px;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--mute)}
.p-ex{max-width:1100px;margin-top:44px}
.p-ex h2{font:600 12px 'Inter',system-ui,sans-serif;letter-spacing:.2em;text-transform:uppercase;color:var(--mute);margin:0 0 16px}
.ex-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px 20px}
.ex{position:relative;min-width:0}
.ex img,.ex video{display:block;width:100%;height:auto;background:#000}
.ex-yt{grid-column:1/-1;aspect-ratio:16/9;background:#0d0d0d;border:1px solid var(--line);padding:0;color:#fff;display:flex;align-items:center;justify-content:center;overflow:hidden;cursor:pointer}
.ex-yt img{height:100%;object-fit:cover;opacity:.8;transition:opacity .3s}.ex-yt:hover img{opacity:1}
.ex-yt span{position:absolute;padding:12px 24px;border:1px solid #fff;background:#000a;color:#fff;font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.ex-yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
@media(max-width:720px){.ex-grid{grid-template-columns:1fr;gap:14px}.ex-grid .ex{grid-column:1/-1!important}}
.ex-film{grid-column:1/-1;margin:0 0 18px}
.ex-film video{display:block;width:100%;aspect-ratio:16/9;background:#0d0d0d;border:1px solid var(--line)}
.ex-film figcaption{margin-top:10px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}