:root{
  --bg:#111111;
  --panel:#161616;
  --line:#2B2B2B;
  --text:#F7F4F1;
  --muted:#D8D1CB;
  --accent:#A32024;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:'Montserrat',sans-serif;
}
img{display:block;max-width:100%}
a{text-decoration:none;color:inherit}
button{font:inherit}
.page{min-height:100vh}
.container{
  width:min(1280px, calc(100vw - 48px));
  margin:0 auto;
}
.sample-work{padding:80px 0 96px}
.intro{max-width:920px}
.eyebrow{
  margin:0;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.28em;
  font-size:11px;
}
h1{
  margin:14px 0 0;
  font-family:'Cormorant Garamond',serif;
  font-weight:400;
  font-size:clamp(46px,7vw,84px);
  line-height:.96;
}
.lede{
  margin:20px 0 0;
  max-width:820px;
  color:var(--muted);
  font-size:15px;
  line-height:1.95;
}
.chips-wrap{
  margin-top:48px;
}
.chips-row{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:12px;
}
.chips-row + .chips-row{
  margin-top:12px;
}
.chips-row-secondary{
  opacity:.9;
}
.chips-row-tertiary{
  opacity:.78;
}
.chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:40px;
  padding:11px 16px;
  border:1px solid var(--line);
  border-radius:999px;
  text-align:center;
  text-transform:uppercase;
  letter-spacing:.18em;
  font-size:10px;
  line-height:1.2;
  color:var(--muted);
  transition:.3s ease;
  white-space:nowrap;
}
.chip:hover{
  border-color:rgba(163,32,36,.45);
  color:var(--text);
  transform:translateY(-1px);
}
.chip.secondary{
  color:rgba(216,209,203,.82);
  border-color:rgba(43,43,43,.92);
}
.chip.tertiary{
  color:rgba(216,209,203,.72);
  border-color:rgba(43,43,43,.88);
}
.chip-note{
  margin:12px auto 0;
  max-width:760px;
  color:rgba(216,209,203,.68);
  font-size:12px;
  line-height:1.8;
  text-align:center;
}

.works{
  margin-top:56px;
  border-top:1px solid var(--line);
  padding-top:48px;
}
.work{
  display:grid;
  grid-template-columns:minmax(0,1.06fr) minmax(360px,.94fr);
  gap:48px;
  padding:0 0 56px;
  margin-bottom:56px;
  border-bottom:1px solid var(--line);
  opacity:0;
  transform:translateY(22px);
  transition:opacity .8s ease, transform .8s ease;
}
.work.is-visible{
  opacity:1;
  transform:translateY(0);
}
.preview-stack{display:flex;flex-direction:column;gap:14px}
.featured-frame{
  overflow:hidden;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:24px;
  position:relative;
  box-shadow:0 20px 60px rgba(0,0,0,.22);
  transition:transform .5s ease, border-color .35s ease, box-shadow .5s ease;
}
.featured-frame:hover{
  transform:translateY(-4px);
  border-color:rgba(163,32,36,.25);
  box-shadow:0 28px 80px rgba(0,0,0,.28);
}
.frame-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:14px 16px;
  border-bottom:1px solid var(--line);
}
.frame-left{
  display:flex;
  align-items:center;
  gap:8px;
}
.dot{
  width:10px;
  height:10px;
  border-radius:50%;
}
.dot.accent{background:var(--accent)}
.dot.mid{background:rgba(216,209,203,.45)}
.dot.low{background:rgba(216,209,203,.2)}
.frame-label{
  margin-left:12px;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.16em;
  font-size:10px;
}
.slider{
  position:relative;
  aspect-ratio:16/10;
  overflow:hidden;
  background:#151515;
  cursor:zoom-in;
}
.slider.is-graphic{
  aspect-ratio:4/5;
  background:#101010;
}
.slide{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:top;
  opacity:0;
  transform:scale(1.03);
  transition:opacity .75s ease, transform .75s ease;
}
.slider.is-graphic .slide{
  object-fit:contain;
  object-position:center;
  padding:18px;
  background:radial-gradient(circle at top, rgba(163,32,36,.08), transparent 38%), #101010;
}
.slide.active{
  opacity:1;
  transform:scale(1);
}
.slider-overlay{
  pointer-events:none;
  position:absolute;
  inset:0;
  background:linear-gradient(to top, rgba(17,17,17,.26), transparent 48%);
}
.slider.is-graphic .slider-overlay{
  background:linear-gradient(to top, rgba(17,17,17,.12), transparent 40%);
}
.nav-btn{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:3;
  width:42px;
  height:42px;
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(17,17,17,.72);
  color:var(--text);
  backdrop-filter:blur(8px);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:.3s ease;
}
.nav-btn:hover{
  border-color:rgba(163,32,36,.4);
  background:#111111;
}
.nav-btn.left{left:16px}
.nav-btn.right{right:16px}
.slider-status{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}
.dots{
  display:flex;
  gap:8px;
}
.dot-btn{
  height:10px;
  width:10px;
  border-radius:999px;
  border:none;
  background:var(--line);
  cursor:pointer;
  transition:all .3s ease;
}
.dot-btn.active{
  width:32px;
  background:var(--accent);
}
.dot-btn:hover:not(.active){
  background:rgba(216,209,203,.4);
}
.counter{
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.18em;
  font-size:10px;
}
.meta{padding-top:4px}
.badge{
  display:inline-flex;
  border:1px solid rgba(163,32,36,.4);
  color:var(--accent);
  border-radius:999px;
  padding:8px 12px;
  text-transform:uppercase;
  letter-spacing:.24em;
  font-size:10px;
}
.work h2{
  margin:20px 0 0;
  font-size:clamp(28px,3vw,38px);
  line-height:1.08;
  font-weight:500;
}
.desc{
  margin:16px 0 0;
  max-width:640px;
  color:var(--muted);
  font-size:15px;
  line-height:1.95;
}
.metrics{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:24px;
}
.metric{
  border:1px solid var(--line);
  color:var(--muted);
  border-radius:999px;
  padding:8px 12px;
  text-transform:uppercase;
  letter-spacing:.18em;
  font-size:10px;
  transition:.3s ease;
}
.metric:hover{
  border-color:rgba(163,32,36,.35);
  color:var(--text);
}
.outcome-wrap{
  margin-top:30px;
  padding-top:24px;
  border-top:1px solid var(--line);
}
.outcome-title{
  margin:0;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.22em;
  font-size:11px;
}
.outcome{
  margin:12px 0 0;
  max-width:620px;
  font-size:15px;
  line-height:1.95;
}
.cta{
  margin-top:18px;
  padding-top:40px;
  border-top:1px solid var(--line);
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:32px;
}
.cta-copy{
  margin:16px 0 0;
  max-width:760px;
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(30px,3.5vw,40px);
  line-height:1.18;
}
.cta-link{
  display:inline-flex;
  align-items:center;
  gap:12px;
  padding-bottom:8px;
  border-bottom:1px solid var(--accent);
  font-size:14px;
  transition:.3s ease;
  white-space:nowrap;
}
.cta-link:hover{color:var(--accent)}
.lightbox{
  position:fixed;
  inset:0;
  background:rgba(10,10,10,.9);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:28px;
  opacity:0;
  visibility:hidden;
  transition:.3s ease;
  z-index:999;
  backdrop-filter:blur(10px);
}
.lightbox.is-open{
  opacity:1;
  visibility:visible;
}
.lightbox img{
  max-width:min(1400px, 92vw);
  max-height:88vh;
  border-radius:20px;
  border:1px solid var(--line);
  box-shadow:0 28px 80px rgba(0,0,0,.45);
  animation:fadeIn .35s ease;
  background:#101010;
}
.lightbox-close,
.lightbox-nav{
  position:absolute;
  width:46px;
  height:46px;
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(17,17,17,.92);
  color:var(--text);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:.3s ease;
}
.lightbox-close:hover,
.lightbox-nav:hover{
  border-color:rgba(163,32,36,.4);
}
.lightbox-close{
  top:18px;
  right:20px;
  font-size:28px;
}
.lightbox-nav{
  top:50%;
  transform:translateY(-50%);
  font-size:18px;
}
.lightbox-nav.left{left:20px}
.lightbox-nav.right{right:20px}
@keyframes fadeIn{
  from{opacity:0; transform:scale(.985)}
  to{opacity:1; transform:scale(1)}
}
@media (max-width: 1024px){
  .work{grid-template-columns:1fr;gap:28px}
}
@media (max-width: 720px){
  .sample-work{padding:64px 0 80px}
  .container{width:min(100vw - 28px, 1280px)}
  .chips{gap:10px}
  .chip{white-space:normal}
  .cta{flex-direction:column;align-items:flex-start}
}
@media (max-width: 520px){
  .nav-btn{width:38px;height:38px}
  .lightbox-nav{display:none}
}