:root{
  --void:#08080B;--soot:#111116;--crust:#1A1A21;--bone:#E9E6E0;--haze:#8B8994;
  --lav:#B49CFF;--cyan:#5FE3E3;--pink:#FF5CA8;--line:rgba(233,230,224,.14);
  --pad:clamp(1.1rem,4vw,4rem);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--void);color:var(--bone);
  font-family:"Space Grotesk",system-ui,sans-serif;
  font-size:clamp(1rem,.95rem + .2vw,1.0625rem);line-height:1.6;
  overflow-x:hidden;position:relative
}
body::after{
  content:"";position:fixed;inset:-50%;pointer-events:none;z-index:300;opacity:.15;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 700ms steps(3) infinite
}
@keyframes grain{0%{transform:translate(0,0)}33%{transform:translate(-3%,2%)}66%{transform:translate(2%,-3%)}100%{transform:translate(0,0)}}
h1,h2,h3,h4{font-family:"Anton",Impact,sans-serif;font-weight:400;text-transform:uppercase;line-height:.88;margin:0;letter-spacing:.005em}
a{color:inherit}
img{max-width:100%;display:block}
:focus-visible{outline:2px solid var(--lav);outline-offset:4px}
.wrap{max-width:1280px;margin:0 auto;padding-inline:var(--pad)}
.band{padding-block:clamp(3.5rem,8vw,7rem)}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:200;background:rgba(8,8,11,.82);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;gap:1rem;height:62px;justify-content:space-between}
.nav-links{display:none;gap:1.75rem;list-style:none;margin:0;padding:0;font-size:.875rem;font-weight:500;flex:1}
@media(min-width:860px){.nav-links{display:flex}}
.nav-links a{text-decoration:none;color:var(--haze);transition:color .2s}
.nav-links a:hover{color:var(--bone)}
.wordmark{display:flex;align-items:center;gap:.55rem;text-decoration:none}
.wordmark img{width:28px;height:28px;border-radius:50%;object-fit:cover;object-position:50% 20%;filter:grayscale(1) contrast(1.25);border:1px solid var(--line)}
.wordmark b{font-family:"Anton",sans-serif;font-weight:400;text-transform:uppercase;font-size:1rem;letter-spacing:.04em}
.nav-right{display:flex;align-items:center;gap:.6rem;flex:1;justify-content:flex-end}
.pill{
  display:inline-flex;align-items:center;gap:.45rem;text-decoration:none;border:1px solid var(--line);
  border-radius:999px;padding:.45rem 1rem;font-size:.8125rem;font-weight:500;color:var(--bone);
  transition:border-color .2s,color .2s,background .2s;white-space:nowrap
}
.pill:hover{border-color:var(--lav);color:var(--lav)}
.pill.solid{background:var(--lav);border-color:var(--lav);color:var(--void);font-weight:700}
.pill.solid:hover{background:var(--bone);border-color:var(--bone);color:var(--void)}
.dot{width:7px;height:7px;border-radius:50%;background:var(--cyan);box-shadow:0 0 0 0 rgba(95,227,227,.6);animation:ping 2.4s ease-out infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(95,227,227,.55)}70%{box-shadow:0 0 0 9px rgba(95,227,227,0)}100%{box-shadow:0 0 0 0 rgba(95,227,227,0)}}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;padding-block:clamp(1.5rem,4vw,3rem) clamp(2.5rem,6vw,4.5rem)}
.hero::before{
  content:"";position:absolute;left:50%;top:-10%;transform:translateX(-50%);
  width:min(900px,120vw);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(180,156,255,.30),rgba(255,92,168,.10) 45%,transparent 68%);
  filter:blur(10px);pointer-events:none
}
.stage{position:relative;min-height:min(62vw,520px);display:grid;place-items:end center}
.ghostword{
  position:absolute;top:0;left:50%;transform:translateX(-50%);width:100%;text-align:center;
  font-family:"Anton",sans-serif;text-transform:uppercase;line-height:.78;white-space:nowrap;
  font-size:clamp(4.5rem,21vw,17rem);color:transparent;-webkit-text-stroke:1px rgba(233,230,224,.26);
  -webkit-mask-image:linear-gradient(180deg,#000 38%,transparent 94%);
  mask-image:linear-gradient(180deg,#000 38%,transparent 94%);pointer-events:none;user-select:none
}
.figure{position:relative;z-index:2;width:min(64vw,320px);aspect-ratio:1;border-radius:50%;overflow:hidden;border:1px solid rgba(180,156,255,.35);box-shadow:0 0 90px rgba(180,156,255,.22)}
.figure img{width:100%;height:100%;object-fit:cover;object-position:50% 18%;filter:grayscale(1) contrast(1.15) brightness(.95)}
.chip{
  position:absolute;z-index:3;background:var(--crust);border:1px solid var(--line);border-radius:999px;
  padding:.4rem .9rem;font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--bone)
}
.chip.a{left:2%;top:34%}
.chip.b{right:2%;top:22%;color:var(--lav);border-color:rgba(180,156,255,.45)}
.chip.c{right:8%;bottom:14%;color:var(--cyan);border-color:rgba(95,227,227,.4)}
@media(max-width:640px){.chip{position:static;display:inline-block;margin:.25rem .25rem 0 0}
  .stage .chip{display:none}
  .chips-mobile{position:relative;z-index:3;text-align:center;margin-top:.9rem}}
@media(min-width:641px){.chips-mobile{display:none}}
.hero-name{
  position:relative;z-index:4;text-align:center;margin-top:-.4em;
  font-family:"Anton",sans-serif;text-transform:uppercase;
  font-size:clamp(2.5rem,10vw,7rem);line-height:.85;
  background:linear-gradient(96deg,var(--lav),var(--pink) 42%,var(--cyan) 78%,var(--lav));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  background-size:280% 100%;animation:shift 9s ease-in-out infinite alternate
}
@keyframes shift{to{background-position:100% 0}}
.hero-bottom{display:grid;gap:clamp(1.5rem,3vw,2.5rem);margin-top:clamp(2rem,5vw,3rem)}
@media(min-width:900px){.hero-bottom{grid-template-columns:1.15fr .85fr;align-items:end}}
.hero-bottom h1{font-size:clamp(2.25rem,1.2rem + 5vw,4.5rem);max-width:14ch}
.hero-bottom h1 i{font-style:normal;color:var(--lav)}
.card{border:1px solid var(--line);background:var(--soot);padding:clamp(1.25rem,2.5vw,1.9rem);display:grid;gap:.9rem}
.card p{margin:0;color:var(--haze);font-size:.9375rem;max-width:40ch}
.card .row{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center}

/* ---------- marquee ---------- */
.marquee{overflow:hidden;border-block:1px solid var(--line);background:var(--soot);padding-block:.8rem}
.marquee-track{display:flex;gap:2.5rem;width:max-content;animation:slide 32s linear infinite}
.marquee-track span{font-family:"Anton",sans-serif;text-transform:uppercase;font-size:clamp(1rem,3vw,1.5rem);color:var(--crust);-webkit-text-stroke:1px rgba(233,230,224,.3);white-space:nowrap}
.marquee-track span:nth-child(3n){color:var(--lav);-webkit-text-stroke:0}
@keyframes slide{to{transform:translateX(-50%)}}

/* ---------- section heads ---------- */
.sechead{display:grid;gap:1rem;margin-bottom:clamp(1.75rem,3.5vw,2.75rem)}
@media(min-width:900px){.sechead{grid-template-columns:minmax(0,1fr) minmax(0,38ch);align-items:end}}
.sechead h2{font-size:clamp(2.5rem,1.4rem + 5.5vw,5.5rem)}
.sechead p{margin:0;color:var(--haze);max-width:42ch}
.label{font-size:.6875rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--lav);display:block;margin-bottom:.9rem}

/* ---------- accordion ---------- */
.acc{display:grid;gap:.6rem}
details{border:1px solid var(--line);background:var(--soot);transition:border-color .25s}
details[open]{border-color:rgba(180,156,255,.4)}
summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:clamp(1rem,2.2vw,1.5rem) clamp(1.1rem,2.5vw,1.9rem)
}
summary::-webkit-details-marker{display:none}
summary h3{font-size:clamp(1.5rem,1.1rem + 1.8vw,2.5rem);transition:color .25s}
details[open] summary h3{color:var(--lav)}
.plus{position:relative;width:20px;height:20px;flex:none}
.plus::before,.plus::after{content:"";position:absolute;background:var(--bone);transition:transform .25s,background .25s}
.plus::before{left:0;top:9px;width:20px;height:2px}
.plus::after{top:0;left:9px;width:2px;height:20px}
details[open] .plus::after{transform:scaleY(0)}
details[open] .plus::before{background:var(--lav)}
.acc-body{padding:0 clamp(1.1rem,2.5vw,1.9rem) clamp(1.1rem,2.5vw,1.6rem)}
.acc-body p{margin:0 0 .85rem;color:var(--haze);max-width:56ch}
.acc-body ul{margin:0;padding-left:1.1rem;color:var(--haze);font-size:.9375rem}
.acc-body li{margin-bottom:.3rem}

/* ---------- stats ---------- */
.statband{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
@media(min-width:560px){.statband{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.statband{grid-template-columns:repeat(4,1fr)}}
.stat{background:var(--void);padding:clamp(1.2rem,2.5vw,1.9rem)}
.stat b{display:block;font-family:"Anton",sans-serif;font-size:clamp(2.4rem,6vw,3.6rem);line-height:.9}
.stat b.acc-lav{color:var(--lav)}
.stat small{display:block;margin-top:.45rem;font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase;color:var(--haze)}
.about-line{font-size:clamp(1.25rem,1rem + 1.6vw,2.25rem);font-family:"Anton",sans-serif;text-transform:uppercase;line-height:1.05;max-width:24ch;margin:0 0 clamp(1.75rem,4vw,2.75rem)}
.about-line span{color:var(--lav)}

/* ---------- portfolio ---------- */
.grid{display:grid;gap:clamp(.75rem,1.5vw,1.1rem)}
@media(min-width:640px){.grid{grid-template-columns:1fr 1fr}}
.cell{
  position:relative;display:flex;flex-direction:column;justify-content:flex-end;
  min-height:clamp(230px,34vw,340px);padding:clamp(1.1rem,2.5vw,1.6rem);
  text-decoration:none;border:1px solid var(--line);overflow:hidden;isolation:isolate;
  background:var(--soot)
}
.cell::before{
  content:"";position:absolute;inset:0;z-index:-2;background:var(--grad);
  transition:transform .6s cubic-bezier(.2,.8,.3,1)
}
.cell:hover::before,.cell:focus-visible::before{transform:scale(1.06)}
.cell::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(8,8,11,.25) 0%,rgba(8,8,11,.45) 40%,rgba(8,8,11,.88))}
.cell::before{filter:grayscale(.55) contrast(1.05)}
.cell:hover::before,.cell:focus-visible::before{filter:grayscale(0) contrast(1.05)}
.cell h3{font-size:clamp(1.5rem,1.1rem + 1.6vw,2.4rem);margin-bottom:.4rem}
.cell p{margin:0;font-size:.875rem;color:rgba(233,230,224,.72);max-width:34ch}
.cell .chiplink{
  position:absolute;top:clamp(1.1rem,2.5vw,1.6rem);left:clamp(1.1rem,2.5vw,1.6rem);
  background:rgba(8,8,11,.6);border:1px solid var(--line);border-radius:999px;padding:.35rem .85rem;
  font-size:.6875rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;backdrop-filter:blur(4px)
}
.cell.wide{grid-column:1/-1}
.g1{--grad:radial-gradient(120% 130% at 20% 10%,rgba(180,156,255,.55),transparent 62%),linear-gradient(140deg,#241C3E,#0C0C12)}
.g2{--grad:radial-gradient(120% 130% at 80% 20%,rgba(255,92,168,.45),transparent 60%),linear-gradient(140deg,#2A1520,#0C0C12)}
.g3{--grad:radial-gradient(120% 130% at 30% 80%,rgba(95,227,227,.38),transparent 60%),linear-gradient(140deg,#0E2429,#0C0C12)}
.g4{--grad:radial-gradient(120% 130% at 70% 70%,rgba(180,156,255,.35),transparent 60%),linear-gradient(140deg,#1C1C28,#0C0C12)}
.g5{--grad:radial-gradient(120% 130% at 15% 30%,rgba(255,92,168,.3),transparent 60%),linear-gradient(140deg,#231821,#0C0C12)}
.g6{--grad:radial-gradient(120% 130% at 85% 40%,rgba(95,227,227,.3),transparent 60%),linear-gradient(140deg,#131C24,#0C0C12)}
.g7{--grad:radial-gradient(110% 140% at 50% 0%,rgba(180,156,255,.45),transparent 65%),linear-gradient(140deg,#1E1833,#0C0C12)}

/* ---------- testimonials ---------- */
.quote{border-top:1px solid var(--line);padding-block:clamp(1.5rem,3vw,2.25rem);display:grid;gap:1rem}
@media(min-width:760px){.quote{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:2.5rem}}
.quote blockquote{margin:0;font-size:clamp(1.125rem,1rem + .9vw,1.75rem);line-height:1.35;max-width:40ch}
.quote cite{display:block;margin-top:.75rem;font-style:normal;font-size:.8125rem;letter-spacing:.08em;text-transform:uppercase;color:var(--haze)}
.stars{color:var(--lav);font-size:.875rem;letter-spacing:.2em}
.avatar-sq{width:76px;height:76px;border-radius:50%;background:var(--crust);border:1px solid var(--line)}

/* ---------- contact ---------- */
.contact-split{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
@media(min-width:880px){.contact-split{grid-template-columns:.85fr 1.15fr}}
.contact-side{
  background:
    radial-gradient(110% 120% at 20% 10%,rgba(180,156,255,.5),transparent 60%),
    radial-gradient(100% 120% at 90% 90%,rgba(255,92,168,.35),transparent 60%),
    var(--crust);
  padding:clamp(1.6rem,3.5vw,2.75rem);display:flex;flex-direction:column;justify-content:space-between;gap:2rem;min-height:280px
}
.contact-side h3{font-size:clamp(2rem,1.2rem + 3vw,3.25rem);max-width:11ch}
.contact-side a{color:var(--bone)}
.contact-form{background:var(--void);padding:clamp(1.6rem,3.5vw,2.75rem)}
form{display:grid;gap:1.1rem}
@media(min-width:620px){.two{grid-template-columns:1fr 1fr;display:grid;gap:1.1rem}}
label{display:block;font-size:.6875rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--haze);margin-bottom:.3rem}
input,textarea{width:100%;background:transparent;border:0;border-bottom:1px solid var(--line);color:var(--bone);font:inherit;padding:.55rem 0;border-radius:0}
input:focus,textarea:focus{outline:none;border-bottom-color:var(--lav)}
textarea{resize:vertical;min-height:96px}
button{justify-self:start;background:var(--lav);color:var(--void);border:0;font:inherit;font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-size:.8125rem;padding:.9rem 1.9rem;cursor:pointer;transition:box-shadow .2s,transform .2s}
button:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--pink)}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line);background:var(--soot);padding-top:clamp(2.5rem,5vw,4rem);overflow:hidden}
.foot-top{display:flex;flex-wrap:wrap;gap:1.25rem;justify-content:space-between;align-items:center;color:var(--haze);font-size:.8125rem}
.foot-top ul{display:flex;flex-wrap:wrap;gap:1.25rem;list-style:none;margin:0;padding:0}
.foot-top a{text-decoration:none}
.foot-top a:hover{color:var(--bone)}
.footmark{
  font-family:"Anton",sans-serif;text-transform:uppercase;text-align:center;white-space:nowrap;
  font-size:clamp(3.5rem,18vw,15rem);line-height:.82;color:transparent;
  -webkit-text-stroke:1px rgba(233,230,224,.16);margin-top:clamp(1.5rem,4vw,2.5rem);
  -webkit-mask-image:linear-gradient(180deg,#000 40%,transparent 92%);
  mask-image:linear-gradient(180deg,#000 40%,transparent 92%)
}
@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}html{scroll-behavior:auto}}


/* ================= CASE STUDY / INNER PAGES ================= */
.top{
  padding-block:clamp(3rem,8vw,6rem) clamp(2.5rem,6vw,4rem);
  background:
    radial-gradient(100% 120% at 78% 0%, rgba(180,156,255,.22), transparent 60%),
    radial-gradient(80% 110% at 4% 90%, rgba(255,92,168,.12), transparent 62%),
    var(--void);
  border-bottom:1px solid var(--line)
}
.back{display:inline-block;font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--lav);text-decoration:none;margin-bottom:1.5rem}
.back:hover{color:var(--bone)}
.top h1{font-size:clamp(3.5rem,1.5rem + 12vw,9rem);letter-spacing:-.01em}
.top .sub{margin:1.25rem 0 0;font-size:clamp(1.125rem,1rem + .6vw,1.5rem);max-width:44ch;line-height:1.35}
.taglines{margin-top:1.5rem;color:var(--lav);font-size:.9375rem}
.meta{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);margin-top:clamp(2rem,5vw,3.5rem)}
@media(min-width:620px){.meta{grid-template-columns:repeat(2,1fr)}}
@media(min-width:960px){.meta{grid-template-columns:repeat(4,1fr)}}
.meta div{background:var(--void);padding:1.15rem}
.meta dt{font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase;color:var(--haze);margin:0 0 .4rem}
.meta dd{margin:0;font-size:.9375rem;line-height:1.45}

.band{padding-block:clamp(3rem,7vw,5.5rem);border-bottom:1px solid var(--line)}
.band h2{font-size:clamp(2.25rem,1.4rem + 4.5vw,4.25rem);margin-bottom:1.5rem}
.band p{max-width:62ch;margin:0 0 1.1rem}
.band p.dim{color:var(--haze)}
.pull{
  border-left:3px solid var(--lav);padding:.25rem 0 .25rem 1.4rem;margin:2rem 0;
  font-family:"Anton",sans-serif;text-transform:uppercase;font-size:clamp(1.5rem,1rem + 2.5vw,2.75rem);
  line-height:1;max-width:20ch
}
.cols{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);margin-top:2rem}
@media(min-width:700px){.cols{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.cols.three{grid-template-columns:repeat(3,1fr)}}
.col{background:var(--void);padding:clamp(1.3rem,2.5vw,1.9rem)}
.col h3{font-size:1.35rem;margin-bottom:.6rem;color:var(--lav)}
.col p{font-size:.9375rem;color:var(--haze);margin:0;max-width:38ch}
.steps{counter-reset:s;list-style:none;padding:0;margin:2rem 0 0;display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
.steps li{background:var(--void);padding:clamp(1.3rem,2.5vw,2rem);display:grid;gap:.5rem}
@media(min-width:760px){.steps li{grid-template-columns:5rem minmax(0,1fr);gap:1.5rem;align-items:start}}
.steps li::before{
  counter-increment:s;content:"0" counter(s);
  font-family:"Anton",sans-serif;font-size:2.25rem;color:var(--crust);
  -webkit-text-stroke:1px rgba(180,156,255,.55);line-height:1
}
.steps h3{font-size:clamp(1.3rem,1.1rem + .6vw,1.7rem);margin-bottom:.5rem}
.steps p{margin:0;color:var(--haze);font-size:.9375rem;max-width:52ch}
.stack{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.75rem;padding:0;list-style:none}
.stack li{border:1px solid var(--line);padding:.4rem .85rem;font-size:.8125rem;color:var(--haze)}
.stack li:nth-child(3n+1){color:var(--lav);border-color:rgba(180,156,255,.35)}

.cta{
  display:inline-block;margin-top:1.75rem;text-decoration:none;font-weight:700;font-size:.875rem;
  letter-spacing:.06em;text-transform:uppercase;padding:.9rem 1.8rem;background:var(--lav);color:var(--void);
  transition:box-shadow .2s,transform .2s
}
.cta:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--pink)}
.closer{background:var(--soot);padding-block:clamp(3rem,7vw,5.5rem)}
.closer h2{font-size:clamp(2.25rem,1.4rem + 4.5vw,4.5rem);max-width:16ch}
footer{background:var(--soot);color:var(--haze);font-size:.8125rem;padding-bottom:2.5rem}
@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}html{scroll-behavior:auto}}


/* ================= COLLECTION PAGES ================= */
.page-top{
  padding-block:clamp(2.5rem,6vw,5rem) clamp(2rem,4vw,3rem);
  border-bottom:1px solid var(--line);position:relative;overflow:hidden;
  background:radial-gradient(100% 130% at 80% 0%, var(--accent-wash), transparent 62%), var(--void);
}
.page-top h1{font-size:clamp(3rem,1.5rem + 10vw,8rem);letter-spacing:-.005em}
.page-top .sub{margin:1.25rem 0 0;font-size:clamp(1.0625rem,1rem + .55vw,1.4rem);max-width:46ch;line-height:1.4;color:var(--bone)}
.crumbs{display:flex;gap:.5rem;align-items:center;font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--haze);margin-bottom:1.5rem}
.crumbs a{color:var(--lav);text-decoration:none}
.crumbs a:hover{color:var(--bone)}
.facts{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);margin-top:clamp(2rem,4vw,3rem)}
@media(min-width:620px){.facts{grid-template-columns:repeat(2,1fr)}}
@media(min-width:960px){.facts{grid-template-columns:repeat(4,1fr)}}
.facts div{background:var(--void);padding:1.15rem}
.facts dt{font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase;color:var(--haze);margin:0 0 .4rem}
.facts dd{margin:0;font-size:.9375rem;line-height:1.45}

.writeup{display:grid;gap:clamp(1.5rem,4vw,3.5rem)}
@media(min-width:900px){.writeup{grid-template-columns:1.1fr .9fr;align-items:start}}
.writeup h2{font-size:clamp(2rem,1.3rem + 3.5vw,3.5rem);margin-bottom:1.25rem}
.writeup p{color:var(--haze);max-width:56ch;margin:0 0 1rem}
.writeup p.lead{color:var(--bone);font-size:clamp(1.0625rem,1rem + .4vw,1.25rem)}
.checks{list-style:none;margin:0;padding:0;display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
.checks li{background:var(--void);padding:1rem 1.25rem;font-size:.9375rem;display:flex;gap:.85rem;align-items:baseline}
.checks li::before{content:"";width:7px;height:7px;background:var(--lav);flex:none;transform:translateY(-1px)}

/* gallery with self-healing placeholders */
.gallery{columns:1;column-gap:clamp(.75rem,1.5vw,1.1rem)}
@media(min-width:620px){.gallery{columns:2}}
@media(min-width:1040px){.gallery{columns:3}}
.shot{
  position:relative;break-inside:avoid;margin:0 0 clamp(.75rem,1.5vw,1.1rem);
  border:1px solid var(--line);overflow:hidden;background:var(--soot)
}
.shot img{width:100%;height:auto;display:block;transition:transform .6s cubic-bezier(.2,.8,.3,1)}
.shot:hover img{transform:scale(1.04)}
.shot figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:1.5rem 1rem .85rem;
  background:linear-gradient(transparent,rgba(8,8,11,.85));
  font-size:.8125rem;color:rgba(233,230,224,.85);opacity:0;transition:opacity .3s
}
.shot:hover figcaption,.shot:focus-within figcaption{opacity:1}
.shot.missing img{display:none}
.shot.missing::before{
  content:attr(data-file);position:absolute;inset:0;display:grid;place-content:center;text-align:center;
  padding:1rem;font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--haze);
  background:
    repeating-linear-gradient(45deg,rgba(180,156,255,.07) 0 10px,transparent 10px 20px),
    var(--crust);
  z-index:1
}
.shot.missing{aspect-ratio:var(--ar,4/5)}
.shot.missing figcaption{display:none}
.note{
  border:1px dashed rgba(180,156,255,.4);padding:1rem 1.25rem;margin-bottom:2rem;
  font-size:.875rem;color:var(--haze);background:rgba(180,156,255,.05)
}
.note b{color:var(--lav)}

/* next / prev */
.pager{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
@media(min-width:700px){.pager{grid-template-columns:1fr 1fr}}
.pager a{
  background:var(--void);padding:clamp(1.3rem,3vw,2.25rem);text-decoration:none;display:grid;gap:.5rem;
  transition:background .3s
}
.pager a:hover{background:var(--soot)}
.pager small{font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--lav)}
.pager b{font-family:"Anton",sans-serif;font-weight:400;text-transform:uppercase;font-size:clamp(1.5rem,1.1rem + 1.6vw,2.4rem);line-height:1}
.pager a:last-child{text-align:left}
@media(min-width:700px){.pager a:last-child{text-align:right}}


/* ================= GALLERY UPGRADES ================= */
/* every gallery image links to its full size file, site.js turns that into a lightbox */
.shot a.zoom{display:block;cursor:zoom-in;color:inherit}
.shot a.zoom:focus-visible{outline-offset:-3px}
/* phones and tablets never hover, so captions sit under the image instead */
@media(hover:none){
  .shot figcaption{position:static;opacity:1;background:var(--soot);padding:.7rem .9rem;border-top:1px solid var(--line)}
}
.gallery.solo{columns:1;max-width:560px}
@media(min-width:620px){.gallery.duo{columns:2}}
@media(min-width:1040px){.gallery.duo{columns:2}}
/* app screens: a real grid so they read left to right in order, unlike the masonry columns */
.phones{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(.75rem,1.5vw,1.1rem)}
@media(min-width:760px){.phones{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:1040px){.phones{grid-template-columns:repeat(4,minmax(0,1fr))}}
.phones .shot{margin:0}

/* client groups: name, one line brief, then that client's images */
.client{padding-block:clamp(2rem,4vw,3.25rem);border-top:1px solid var(--line)}
.client:first-of-type{border-top:0;padding-top:0}
.client-head{display:grid;gap:.6rem;margin-bottom:clamp(1.1rem,2.5vw,1.75rem)}
@media(min-width:900px){.client-head{grid-template-columns:minmax(0,1fr) minmax(0,46ch);align-items:end;gap:2.5rem}}
.client-head h3{font-size:clamp(1.9rem,1.2rem + 2.6vw,3.25rem)}
.client-head p{margin:0;color:var(--haze);max-width:52ch}
.client-head p a{color:var(--lav)}
.client-head .label{margin-bottom:.6rem}

/* related pages, chip row */
.xlinks{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.25rem;padding:0;list-style:none}

/* ---------- lightbox ---------- */
dialog.lb{
  width:100vw;height:100vh;max-width:none;max-height:none;margin:0;padding:0;border:0;
  background:rgba(8,8,11,.94);color:var(--bone);overflow:hidden
}
dialog.lb::backdrop{background:rgba(8,8,11,.6);backdrop-filter:blur(6px)}
.lb figure{margin:0;height:100%;display:grid;grid-template-rows:minmax(0,1fr) auto;place-items:center;padding:clamp(3.5rem,6vw,4.5rem) clamp(.75rem,5vw,5rem) 1rem}
.lb img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;border:1px solid var(--line);background:var(--soot)}
.lb figcaption{padding:.9rem 0 .4rem;max-width:70ch;text-align:center;font-size:.875rem;color:var(--haze)}
.lb figcaption b{font-weight:500;color:var(--bone)}
dialog.lb button{
  position:absolute;z-index:2;display:grid;place-items:center;width:48px;height:48px;padding:0;
  background:rgba(17,17,22,.8);color:var(--bone);border:1px solid var(--line);border-radius:50%;
  font-size:1.25rem;line-height:1;letter-spacing:0;text-transform:none;transition:border-color .2s,color .2s
}
dialog.lb button:hover{transform:none;box-shadow:none;border-color:var(--lav);color:var(--lav)}
.lb-x{top:1rem;right:1rem}
.lb-prev,.lb-next{top:50%;margin-top:-24px}
.lb-prev{left:clamp(.5rem,2vw,1.5rem)}
.lb-next{right:clamp(.5rem,2vw,1.5rem)}
@media(max-width:620px){.lb-prev,.lb-next{top:auto;bottom:1rem;margin-top:0}}
.lb-count{position:absolute;top:1.6rem;left:1.25rem;font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--haze)}

/* ---------- hero cutout ---------- */
/* monochrome cutout replaces the circle crop so the ghost wordmark sits behind the shoulders.
   no glow: it made the cutout read like a sticker. the long bottom fade lets it rise out of the page */
.figure.cut{width:min(80vw,400px);aspect-ratio:433/399;border-radius:0;overflow:visible;border:0;box-shadow:none}
.figure.cut img{
  object-fit:contain;object-position:50% 100%;filter:none;
  -webkit-mask-image:linear-gradient(180deg,#000 58%,transparent 97%);
  mask-image:linear-gradient(180deg,#000 58%,transparent 97%)
}
.hero:has(.figure.cut)::before{background:radial-gradient(circle,rgba(180,156,255,.16),rgba(255,92,168,.05) 45%,transparent 68%)}

/* numeral nav sits on the shared nav styles, this just marks the current page */
.nav-links a.on{color:var(--bone)}