/* PUFAMIX CASE STUDIES 20261007 */

.case-page .case-hero{
  padding:72px 0 78px;
  position:relative;
  overflow:hidden;
}

.case-breadcrumb{
  display:flex;
  align-items:center;
  gap:9px;
  margin-bottom:23px;
  color:#958b82;
  font-size:.78rem
}

.case-breadcrumb a{color:var(--gold)}
.case-breadcrumb a:hover{text-decoration:underline}

.case-hero-grid{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:52px;
  align-items:center
}

.case-hero h1{
  font-size:clamp(3.1rem,6.5vw,6.4rem);
  margin:22px 0
}

.case-hero h1 em{
  color:var(--gold);
  font-style:normal
}

.case-hero-copy>p{
  max-width:690px;
  font-size:1.08rem
}

.case-meta{
  display:flex;
  flex-wrap:wrap;
  gap:9px;
  margin-top:27px
}

.case-meta span{
  padding:8px 12px;
  border:1px solid var(--line);
  border-radius:999px;
  color:#d4cbc2;
  font-size:.76rem
}

.case-visual{
  min-height:430px;
  border:1px solid rgba(244,197,112,.3);
  border-radius:28px;
  background:
    radial-gradient(circle at 72% 25%,rgba(241,61,45,.19),transparent 30%),
    radial-gradient(circle at 23% 75%,rgba(244,197,112,.14),transparent 34%),
    linear-gradient(145deg,#171513,#0b0a09);
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden
}

.case-visual:before{
  content:'';
  position:absolute;
  width:320px;
  height:320px;
  border:1px solid rgba(244,197,112,.16);
  border-radius:50%;
  right:-100px;
  top:-95px
}

.case-visual:after{
  content:'';
  position:absolute;
  width:220px;
  height:220px;
  border:1px solid rgba(241,61,45,.15);
  border-radius:50%;
  left:-85px;
  bottom:-85px
}

.case-monogram{
  position:relative;
  z-index:1;
  text-align:center;
  padding:30px
}

.case-monogram span{
  display:block;
  color:var(--red);
  font:800 clamp(3rem,7vw,6rem) Manrope,sans-serif;
  letter-spacing:-.08em;
  line-height:.9
}

.case-monogram strong{
  display:block;
  margin-top:20px;
  color:var(--gold);
  font-size:.76rem;
  letter-spacing:.16em;
  text-transform:uppercase
}

.case-overview{
  background:#0d0c0b;
  border-block:1px solid rgba(255,255,255,.06)
}

.case-overview-grid{
  display:grid;
  grid-template-columns:.72fr 1.28fr;
  gap:65px;
  align-items:start
}

.case-overview-title{
  position:sticky;
  top:110px
}

.case-overview-title h2{
  margin-top:18px
}

.case-story{
  display:grid;
  gap:16px
}

.case-story article{
  padding:28px;
  border:1px solid var(--line);
  border-radius:20px;
  background:linear-gradient(145deg,#171513,#100f0e)
}

.case-story small{
  color:var(--gold);
  font-size:.69rem;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase
}

.case-story h3{
  margin:14px 0 10px;
  font-size:1.45rem
}

.case-highlights-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:14px
}

.case-highlight{
  padding:27px;
  border:1px solid var(--line);
  border-radius:20px;
  background:#121110
}

.case-highlight small{
  color:var(--red);
  font-size:.68rem;
  font-weight:800;
  letter-spacing:.14em
}

.case-highlight h3{
  margin:18px 0 11px;
  font-size:1.35rem
}

.case-highlight p{
  font-size:.91rem
}

.case-services{
  background:#0d0c0b;
  border-block:1px solid rgba(255,255,255,.06)
}

.case-services-list{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:30px
}

.case-services-list span{
  padding:11px 16px;
  border:1px solid rgba(244,197,112,.24);
  border-radius:999px;
  color:var(--gold);
  font-size:.84rem;
  font-weight:700
}

.case-live-box{
  display:grid;
  grid-template-columns:1fr auto;
  gap:35px;
  align-items:center;
  padding:42px;
  border:1px solid rgba(244,197,112,.27);
  border-radius:24px;
  background:
    radial-gradient(ellipse at 100% 0%,rgba(241,61,45,.12),transparent 43%),
    #141210
}

.case-live-box h2{
  font-size:clamp(2rem,4vw,3.5rem);
  margin:16px 0
}

.case-live-box p{
  max-width:740px
}

.case-related-links{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:25px
}

.case-related-links a{
  padding:10px 15px;
  border:1px solid var(--line);
  border-radius:999px;
  color:var(--gold);
  font-size:.84rem;
  font-weight:700
}

.case-related-links a:hover{
  border-color:var(--gold);
  background:rgba(244,197,112,.05)
}

.case-home-label{
  display:inline-flex;
  margin-top:13px;
  color:var(--gold);
  font-size:.78rem;
  font-weight:700
}

@media(max-width:850px){
  .case-hero-grid,
  .case-overview-grid{
    grid-template-columns:1fr
  }

  .case-overview-title{
    position:static
  }

  .case-live-box{
    grid-template-columns:1fr
  }
}

@media(max-width:640px){
  .case-highlights-grid{
    grid-template-columns:1fr
  }

  .case-visual{
    min-height:280px
  }

  .case-live-box{
    padding:27px 23px
  }
}