/* ============================================================
   WANNA BE SOCIALS — styles.css
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Poppins:wght@300;400;500;600;700&family=Meddon&display=swap');

:root{
  --cream: #F5F1E9;
  --cream-deep: #ECE3D2;
  --paper: #FFFDF9;
  --maroon: #6B1F24;
  --maroon-dark: #45141A;
  --blush: #E3C3BE;
  --blush-deep: #CC968D;
  --gold: #C98A3E;
  --charcoal: #2B2521;
  --muted: #766f65;
  --line: rgba(43,37,33,0.14);
  --shadow-soft: 0 24px 50px -30px rgba(43,20,20,0.35);
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:'Poppins',sans-serif;
  background:var(--cream);
  color:var(--charcoal);
  font-weight:300;
  line-height:1.65;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
.serif{font-family:'Playfair Display',serif;}
.script{font-family:'Meddon',cursive;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
button{font-family:inherit;}
.wrap{max-width:1180px;margin:0 auto;padding:0 32px;}

/* focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline:2px solid var(--maroon);
  outline-offset:3px;
}

/* ---------- REVEAL ---------- */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease, transform .6s ease;transition-delay:var(--d,0ms);}
.reveal--in{opacity:1;transform:translateY(0);}

/* ---------- MARQUEE ---------- */
.marquee{
  background:var(--maroon);
  color:var(--cream);
  overflow:hidden;
  white-space:nowrap;
  padding:9px 0;
  font-size:13px;
  letter-spacing:0.03em;
}
.marquee__track{
  display:inline-block;
  animation:marquee 26s linear infinite;
}
.marquee span{padding:0 22px;}
.marquee span::after{content:'\2726'; margin-left:22px; opacity:0.6; font-size:11px;}
@keyframes marquee{
  0%{transform:translateX(0);}
  100%{transform:translateX(-50%);}
}
@media (prefers-reduced-motion: reduce){
  .marquee__track{animation:none;}
}

/* ---------- HEADER / NAV ---------- */
header{
  position:sticky; top:0; z-index:60;
  background:rgba(245,241,233,0.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:13px 32px; max-width:1180px; margin:0 auto;
}
.nav-logo{display:flex; align-items:center; gap:9px;}
.nav-logo img{height:30px;width:auto;}
.nav-links{display:flex; align-items:center; gap:30px; font-size:13.5px;}
.nav-link{
  color:var(--charcoal); opacity:0.72; letter-spacing:0.02em;
  padding:6px 0; position:relative; cursor:pointer;
}
.nav-link::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:1.5px;
  background:var(--maroon); transform:scaleX(0); transform-origin:left;
  transition:transform .25s ease;
}
.nav-link:hover{opacity:1;}
.nav-link:hover::after{transform:scaleX(1);}
.nav-link--active{opacity:1; font-weight:500;}
.nav-link--active::after{transform:scaleX(1);}
.nav-cta{
  background:var(--maroon); color:var(--cream)!important;
  padding:11px 20px; border-radius:100px; font-size:13px; font-weight:500;
  opacity:1!important; white-space:nowrap;
  transition:background .2s ease, transform .2s ease;
  display:inline-flex; align-items:center; gap:6px;
}
.nav-cta:hover{background:var(--maroon-dark); transform:translateY(-1px);}
.nav-toggle{display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:8px;}
.nav-toggle span{display:block; width:22px; height:1.6px; background:var(--charcoal); transition:transform .25s ease, opacity .25s ease;}

@media(max-width:880px){
  .nav-links{
    position:fixed; top:60px; left:0; right:0; height:calc(100vh - 60px); height:calc(100dvh - 60px);
    background:var(--cream);
    flex-direction:column; align-items:flex-start; gap:6px;
    padding:20px 28px 32px; overflow-y:auto;
    transform:translateY(-12px); opacity:0; pointer-events:none;
    transition:all .25s ease; z-index:55;
  }
  body.menu-open .nav-links{transform:translateY(0); opacity:1; pointer-events:auto;}
  .nav-link{width:100%; padding:14px 0; border-bottom:1px solid var(--line); font-size:16px;}
  .nav-cta{margin-top:14px;}
  .nav-toggle{display:flex;}
  body.menu-open .nav-toggle span:nth-child(1){transform:translateY(6.5px) rotate(45deg);}
  body.menu-open .nav-toggle span:nth-child(2){opacity:0;}
  body.menu-open .nav-toggle span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);}
}

/* ---------- VIEW ROUTER ---------- */
.view{display:none;}
.view--active{display:block; animation:viewIn .45s ease;}
@keyframes viewIn{
  from{opacity:0; transform:translateY(10px);}
  to{opacity:1; transform:translateY(0);}
}

/* ---------- BUTTONS ---------- */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:14px 28px; border-radius:100px; font-size:14.5px; font-weight:500;
  cursor:pointer; transition:all .2s ease; border:1px solid transparent;
}
.btn-solid{background:var(--maroon); color:var(--cream);}
.btn-solid:hover{background:var(--maroon-dark); transform:translateY(-1px);}
.btn-outline{border-color:var(--charcoal); color:var(--charcoal);}
.btn-outline:hover{background:var(--charcoal); color:var(--cream);}
.btn-light{background:var(--paper); color:var(--maroon);}
.btn-light:hover{background:#fff;}
.btn-ghost-light{border-color:rgba(255,253,249,0.45); color:#fff;}
.btn-ghost-light:hover{background:rgba(255,253,249,0.14);}
.btn-block{width:100%; justify-content:center;}

/* ---------- STICKERS ---------- */
.sticker{
  display:inline-flex; align-items:center; gap:6px;
  background:var(--gold); color:var(--maroon-dark);
  font-size:12px; font-weight:600; letter-spacing:0.02em;
  padding:6px 13px; border-radius:100px;
  transform:rotate(-3deg);
}

/* =====================================================
   HOME
   ===================================================== */
.hero{position:relative; padding:64px 0 90px; overflow:hidden;}
.hero-blob{
  position:absolute; top:-160px; right:-160px; width:560px; height:560px;
  background:var(--blush); opacity:0.5;
  border-radius:62% 38% 55% 45% / 48% 45% 55% 52%;
}
.hero-blob--2{
  position:absolute; bottom:-120px; left:-160px; width:340px; height:340px;
  background:var(--gold); opacity:0.18;
  border-radius:55% 45% 60% 40% / 40% 55% 45% 60%;
}
.hero-inner{position:relative; z-index:1;}
.hero-kicker{
  font-size:14px; color:var(--maroon); font-weight:500; margin-bottom:18px;
  display:flex; align-items:center; gap:10px;
}
.hero h1{
  font-size:clamp(38px,7vw,80px); font-weight:500; line-height:1.06; max-width:820px;
}
.hero h1 .line2{display:block; color:var(--maroon); font-style:italic; font-weight:400;}
.hero-sub{margin-top:24px; max-width:460px; color:var(--muted); font-size:17px;}
.hero-ctas{margin-top:38px; display:flex; gap:14px; flex-wrap:wrap; align-items:center;}
.hero-note{margin-top:20px; font-size:13.5px; color:var(--muted);}

.usp-strip{
  background:var(--maroon); color:var(--cream);
  padding:26px 24px; text-align:center; overflow:hidden;
}
.usp-strip__text{
  font-family:'Playfair Display',serif; font-weight:600;
  font-size:clamp(22px,4.4vw,44px); letter-spacing:0.01em;
  line-height:1.15;
}
.usp-strip__text span{
  display:inline-block; margin-left:0.4em;
  color:var(--gold); font-style:italic; font-weight:500;
}
@media(max-width:560px){
  .usp-strip__text span{display:block; margin-left:0;}
}

.teasers{padding:20px 0 90px;}
.annotation--dark{color:var(--maroon); margin-bottom:18px;}

.teaser-bento{
  display:grid;
  grid-template-columns:1.3fr 1fr;
  gap:20px;
  align-items:stretch;
}
.teaser{
  cursor:pointer; text-align:left;
  display:flex; flex-direction:column; gap:14px;
  border:none; width:100%;
  transition:transform .2s ease, box-shadow .2s ease;
}
.teaser:hover{transform:translateY(-3px);}
.teaser__num{font-family:'Playfair Display',serif; font-style:italic; font-size:14px;}
.teaser h3{font-family:'Playfair Display',serif; font-weight:500;}
.teaser p{font-size:14.5px; flex-grow:1;}
.teaser__go{font-size:13px; font-weight:500;}

.teaser--feature{
  background:var(--maroon);
  color:var(--cream);
  border-radius:28px;
  padding:44px 40px;
  justify-content:center;
}
.teaser--feature .teaser__num{color:var(--gold);}
.teaser--feature h3{font-size:clamp(26px,3vw,34px);}
.teaser--feature p{color:rgba(245,241,233,0.82); max-width:360px;}
.teaser--feature .teaser__go{color:var(--gold);}

.teaser-stack{display:flex; flex-direction:column; gap:20px;}
.teaser--small{
  border-radius:22px;
  padding:28px 26px;
  flex:1;
  justify-content:center;
}
.teaser--outline{
  background:transparent;
  border:1.5px solid var(--charcoal)!important;
}
.teaser--outline .teaser__num{color:var(--blush-deep);}
.teaser--outline h3{font-size:19px;}
.teaser--outline .teaser__go{color:var(--maroon);}
.teaser--cream{background:var(--cream-deep);}
.teaser--cream .teaser__num{color:var(--maroon);}
.teaser--cream h3{font-size:19px;}
.teaser--cream .teaser__go{color:var(--maroon);}

@media(max-width:820px){
  .teaser-bento{grid-template-columns:1fr;}
  .teaser-stack{flex-direction:row;}
}
@media(max-width:600px){
  .teaser-stack{flex-direction:column;}
  .teaser--feature{padding:34px 28px;}
}

.home-strip{
  background:var(--maroon-dark); color:var(--cream); padding:70px 0; text-align:center;
}
.home-strip h2{font-family:'Playfair Display',serif; font-weight:500; font-size:clamp(24px,3.4vw,34px); max-width:640px; margin:0 auto 26px;}
.home-strip .btn-solid{background:var(--gold); color:var(--maroon-dark);}
.home-strip .btn-solid:hover{background:#dda056;}

/* =====================================================
   SECTION SCAFFOLDING (used across views)
   ===================================================== */
.page-head{padding:70px 0 46px;}
.page-head .kicker{font-size:13.5px; color:var(--maroon); font-weight:500; margin-bottom:14px;}
.page-head h1{font-family:'Playfair Display',serif; font-weight:500; font-size:clamp(32px,5vw,52px); line-height:1.12; max-width:720px;}
.page-head p{margin-top:16px; color:var(--muted); font-size:16.5px; max-width:520px;}
section{padding:0 0 90px;}
.section-head{max-width:600px; margin-bottom:44px;}
.kicker{font-size:13.5px; color:var(--maroon); font-weight:500; margin-bottom:12px;}
.section-head h2{font-family:'Playfair Display',serif; font-size:clamp(26px,3.4vw,38px); font-weight:500; line-height:1.2;}
.section-head p{margin-top:14px; color:var(--muted); font-size:15.5px;}

/* ---------- WHAT WE DO ---------- */
.pillars{display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line);}
.pillar{padding:34px 30px 8px 0; border-right:1px solid var(--line);}
.pillar:last-child{border-right:none;}
.pillar-mark{font-family:'Playfair Display',serif; font-style:italic; font-size:14px; color:var(--blush-deep); margin-bottom:16px;}
.pillar h3{font-family:'Playfair Display',serif; font-weight:500; font-size:21px; margin-bottom:10px;}
.pillar p{color:var(--muted); font-size:14.5px; max-width:280px;}
@media(max-width:760px){.pillars{grid-template-columns:1fr;} .pillar{border-right:none; border-bottom:1px solid var(--line); padding:26px 0;}}

.timeline{display:grid; grid-template-columns:repeat(4,1fr); gap:26px; position:relative; margin-top:8px;}
.timeline::before{content:''; position:absolute; top:9px; left:0; right:0; height:1px; background:var(--line);}
.tl-item{position:relative; padding-top:34px;}
.tl-dot{position:absolute; top:0; left:0; width:19px; height:19px; border-radius:50%; background:var(--cream); border:1px solid var(--maroon);}
.tl-dot::after{content:''; position:absolute; top:5px; left:5px; width:7px; height:7px; border-radius:50%; background:var(--maroon);}
.tl-item h4{font-family:'Playfair Display',serif; font-weight:500; font-size:18px; margin-bottom:6px;}
.tl-item p{color:var(--muted); font-size:14px;}
@media(max-width:760px){.timeline{grid-template-columns:1fr 1fr; gap:30px 20px;} .timeline::before{display:none;}}
@media(max-width:480px){.timeline{grid-template-columns:1fr;}}

.approach{display:grid; grid-template-columns:1fr 1fr; gap:20px;}
.approach-quote{background:var(--maroon); color:var(--cream); border-radius:28px; padding:44px 40px; display:flex; flex-direction:column; justify-content:center;}
.approach-quote .case-label{color:rgba(245,241,233,0.7);}
.approach-quote h3{font-family:'Playfair Display',serif; font-style:italic; font-weight:400; font-size:clamp(24px,2.8vw,32px); line-height:1.28; margin-top:14px;}
.approach-list{background:var(--paper); border:1px solid var(--line); border-radius:28px; padding:44px 40px;}
.approach-list ul{list-style:none;}
.approach-list li{padding:12px 0 12px 22px; border-bottom:1px solid var(--line); font-size:14.5px; position:relative;}
.approach-list li:last-child{border-bottom:none;}
.approach-list li::before{content:''; position:absolute; left:0; top:19px; width:6px; height:6px; border-radius:50%; background:var(--blush-deep);}
@media(max-width:800px){.approach{grid-template-columns:1fr;}}

/* ---------- INDUSTRIES ---------- */
.industries{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:20px; overflow:hidden;}
.industry{background:var(--cream); padding:28px 24px; display:flex; flex-direction:column; gap:12px;}
.ind-mono{width:36px; height:36px; border-radius:50%; background:var(--blush); color:var(--maroon-dark); font-family:'Playfair Display',serif; font-style:italic; font-size:15px; display:flex; align-items:center; justify-content:center;}
.industry h4{font-size:15px; font-weight:500;}
.industry p{font-size:12.5px; color:var(--muted);}
@media(max-width:900px){.industries{grid-template-columns:repeat(2,1fr);}}
@media(max-width:520px){.industries{grid-template-columns:1fr;}}

/* ---------- PACKAGES ---------- */
.trial-panel{display:grid; grid-template-columns:0.85fr 1.15fr; border-radius:32px 56px 32px 56px; overflow:hidden; box-shadow:var(--shadow-soft);}
.trial-left{background:var(--maroon); color:var(--cream); padding:48px 42px; display:flex; flex-direction:column; justify-content:center;}
.trial-left .case-label{color:rgba(245,241,233,0.7);}
.trial-price{font-family:'Playfair Display',serif; font-size:58px; font-weight:500; margin-top:16px;}
.trial-left p.trial-desc{margin-top:16px; opacity:0.9; font-size:15px; max-width:260px;}
.trial-note{margin-top:28px; font-size:12px; opacity:0.65; letter-spacing:0.03em;}
.trial-right{background:var(--paper); padding:48px 44px;}
.trial-right ul{list-style:none; margin-top:20px;}
.trial-right li{padding:10px 0; border-bottom:1px solid var(--line); font-size:14.5px; padding-left:22px; position:relative;}
.trial-right li:last-child{border-bottom:none;}
.trial-right li::before{content:''; position:absolute; left:0; top:18px; width:6px; height:6px; border-radius:50%; background:var(--blush-deep);}
@media(max-width:760px){.trial-panel{grid-template-columns:1fr; border-radius:26px;}}

.packages{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; align-items:stretch;}
.pkg{background:var(--paper); border:1px solid var(--line); border-radius:24px; padding:34px 28px; display:flex; flex-direction:column; transition:transform .2s ease, box-shadow .2s ease;}
.pkg:hover{transform:translateY(-4px); box-shadow:0 26px 40px -30px rgba(43,20,20,0.3);}
.pkg.featured{background:var(--maroon); color:var(--cream); border-color:var(--maroon); transform:translateY(-8px);}
.pkg.featured:hover{transform:translateY(-11px);}
.pkg-name{font-family:'Playfair Display',serif; font-size:22px; font-weight:500;}
.pkg-period{font-size:12px; letter-spacing:0.03em; color:var(--muted); margin-top:5px;}
.pkg.featured .pkg-period{color:rgba(245,241,233,0.7);}
.pkg-price{font-family:'Playfair Display',serif; font-size:34px; margin-top:16px; font-weight:500;}
.pkg-loved{display:inline-block; margin-top:12px; font-size:11.5px; background:var(--gold); color:var(--maroon-dark); font-weight:600; padding:5px 12px; border-radius:100px; width:fit-content;}
.pkg ul{list-style:none; margin-top:22px; flex-grow:1;}
.pkg li{font-size:14px; padding:7px 0 7px 18px; position:relative; color:var(--muted);}
.pkg.featured li{color:rgba(245,241,233,0.88);}
.pkg li::before{content:''; position:absolute; left:0; top:14px; width:5px; height:5px; border-radius:50%; background:var(--blush-deep);}
.pkg.featured li::before{background:rgba(245,241,233,0.6);}
@media(max-width:900px){.packages{grid-template-columns:1fr;} .pkg.featured{transform:none;} .pkg.featured:hover{transform:translateY(-4px);}}

/* ---------- OUR WORK / PORTFOLIO ---------- */
.filter-bar{display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:38px;}
.chip{
  padding:9px 18px; border-radius:100px; border:1px solid var(--line); background:var(--paper);
  font-size:13.5px; cursor:pointer; transition:all .2s ease; color:var(--charcoal);
}
.chip:hover{border-color:var(--maroon);}
.chip--active{background:var(--maroon); color:var(--cream); border-color:var(--maroon);}

.portfolio-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:22px; grid-auto-flow:dense; align-items:start;}
.proj-card{
  background:none; border:none; padding:0; text-align:left; cursor:pointer; width:100%;
  display:flex; flex-direction:column; gap:14px;
}
.proj-card[data-size="feature"]{grid-column:span 2;}
.proj-card[data-size="small"]{grid-column:span 1;}

/* Frame: fixed height, object-fit:contain — the full artwork is always
   visible, never cropped. Height varies by size tier for editorial
   rhythm; empty space around the artwork is intentional. */
.proj-card__frame{
  position:relative; display:flex; align-items:center; justify-content:center;
  height:280px; border-radius:20px; overflow:hidden;
  background:var(--cream-deep); padding:14px;
}
.proj-card[data-size="feature"] .proj-card__frame{height:380px;}
.proj-card[data-size="small"] .proj-card__frame{height:230px;}
.proj-card__frame img{
  max-width:100%; max-height:100%; width:auto; height:auto;
  object-fit:contain; transition:transform .4s ease;
  display:block;
}
.proj-card__frame--logo{
  background:var(--paper);
  border:1px solid var(--line);
  padding:12% 14%;
}
.proj-card:hover .proj-card__frame img{transform:scale(1.035);}
.proj-card__hover{
  position:absolute; inset:0; background:linear-gradient(180deg, rgba(43,20,20,0) 60%, rgba(43,20,20,0.5) 100%);
  display:flex; align-items:flex-end; justify-content:space-between;
  padding:16px 18px; opacity:0; transition:opacity .3s ease;
  color:var(--cream); font-size:13.5px; font-weight:500;
}
.proj-card:hover .proj-card__hover{opacity:1;}
.proj-card__meta{display:flex; flex-direction:column; gap:4px;}
.proj-card__client{font-family:'Playfair Display',serif; font-size:18px; font-weight:500;}
.proj-card[data-size="feature"] .proj-card__client{font-size:22px;}
.proj-card[data-size="small"] .proj-card__client{font-size:15.5px;}
.proj-card__cat{font-size:12.5px; color:var(--muted);}

@media(max-width:900px){
  .portfolio-grid{grid-template-columns:repeat(2,1fr);}
  .proj-card[data-size="feature"]{grid-column:span 2;}
}
@media(max-width:560px){
  .portfolio-grid{grid-template-columns:1fr;}
  .proj-card[data-size="feature"], .proj-card[data-size="small"]{grid-column:span 1;}
  .proj-card__frame, .proj-card[data-size="feature"] .proj-card__frame, .proj-card[data-size="small"] .proj-card__frame{height:260px;}
}


/* ---------- RECEIPTS ---------- */
.receipts-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:18px;
  margin-bottom:60px;
}
.receipt-card{
  background:var(--cream);
  border:none;
  border-radius:20px;
  padding:28px 26px;
  color:var(--charcoal);
}
.receipt-card:nth-child(3n+2){background:var(--paper);}
.receipt-client{
  font-family:'Playfair Display',serif;
  font-size:18px;
  font-weight:500;
  margin-bottom:18px;
  color:var(--maroon-dark);
}
.receipt-place{
  display:block;
  font-family:'Poppins',sans-serif;
  font-size:12px;
  font-weight:400;
  color:var(--muted);
  margin-top:3px;
}
.receipt-stats{display:grid; grid-template-columns:repeat(3,1fr); gap:14px;}
.receipt-stat{display:flex; flex-direction:column; gap:4px;}
.stat-num{
  font-family:'Playfair Display',serif;
  font-size:clamp(19px,2.2vw,24px);
  font-weight:500;
  color:var(--maroon);
  line-height:1.1;
  font-variant-numeric:tabular-nums;
}
.stat-label{font-size:11px; color:var(--muted); line-height:1.3;}

.spotlights{display:grid; grid-template-columns:1fr 1fr; gap:22px;}
.spotlight-card{
  background:var(--cream);
  border-radius:22px;
  overflow:hidden;
  display:grid;
  grid-template-columns:120px 1fr;
}
.spotlight-media{background:#000;}
.spotlight-media img{width:100%; height:100%; object-fit:cover; display:block;}
.spotlight-body{padding:22px 20px; color:var(--charcoal);}
.spotlight-tag{
  font-family:'Meddon',cursive;
  color:var(--maroon);
  font-size:15px;
  margin-bottom:6px;
}
.spotlight-client{font-weight:500; font-size:14px; margin-bottom:6px; color:var(--maroon-dark);}
.spotlight-caption{font-size:12.5px; color:var(--muted); margin-bottom:16px; line-height:1.5;}
.spotlight-stats{display:flex; gap:18px; flex-wrap:wrap;}
.spotlight-stats .stat-num{color:var(--maroon); font-size:18px;}
.spotlight-stats .stat-label{color:var(--muted);}

@media(max-width:820px){
  .receipts-grid{grid-template-columns:1fr;}
  .spotlights{grid-template-columns:1fr;}
}
@media(max-width:480px){
  .spotlight-card{grid-template-columns:1fr;}
  .spotlight-media{aspect-ratio:16/9;}
  .receipt-stats{grid-template-columns:1fr 1fr;}
}

/* ---------- COLOR BANDS (section rhythm) ---------- */
.band{padding:70px 0;}
.band--white{background:var(--paper);}
.band--maroon{background:var(--maroon); color:var(--cream); padding:80px 0 84px;}
.band--maroon .kicker--light{color:var(--gold);}
.band--maroon p{color:rgba(245,241,233,0.82);}
.band--maroon .section-head p{color:rgba(245,241,233,0.75);}

.work-transition{
  text-align:center;
  padding:34px 0 30px;
  background:var(--cream);
}
.work-transition .script{font-size:22px; color:var(--maroon); margin-bottom:6px;}
.work-transition__arrow{font-size:20px; color:var(--blush-deep);}

.receipts-head{max-width:640px; margin-bottom:20px;}
.receipts-head h2{font-size:clamp(28px,4vw,42px); line-height:1.18; margin:6px 0 16px;}

.annotation{
  font-family:'Meddon',cursive;
  font-size:14px;
  color:var(--maroon);
  transform:rotate(-2deg);
  display:inline-block;
}
.annotation--inline{margin-left:auto; padding-left:10px;}
.annotation--light{color:var(--blush); margin-top:10px; display:block; transform:rotate(-1.5deg);}
.filter-bar{position:relative;}

/* ---------- HERO STAT (asymmetric feature tile) ---------- */
.hero-stat{
  margin:12px 0 44px;
  padding:34px 0 12px;
  border-top:1px solid rgba(245,241,233,0.18);
  border-bottom:1px solid rgba(245,241,233,0.18);
}
.hero-stat__num{
  font-family:'Playfair Display',serif;
  font-weight:500;
  font-style:italic;
  font-size:clamp(52px,10vw,110px);
  line-height:0.95;
  color:var(--gold);
  display:block;
}
.hero-stat__label{
  display:block;
  margin-top:10px;
  font-size:14px;
  letter-spacing:0.02em;
  color:rgba(245,241,233,0.75);
  max-width:320px;
}

/* ---------- MODAL: case study ---------- */
.modal{
  position:fixed; inset:0; z-index:100; background:rgba(30,14,14,0.6);
  display:flex; align-items:flex-start; justify-content:center;
  padding:40px 20px; opacity:0; pointer-events:none; transition:opacity .28s ease;
  overflow-y:auto;
}
.modal--open{opacity:1; pointer-events:auto;}
.modal__panel{
  background:var(--paper); border-radius:26px; max-width:920px; width:100%;
  position:relative; padding:52px 44px 44px; margin:auto;
  transform:translateY(18px) scale(0.98); transition:transform .3s ease;
}
.modal--open .modal__panel{transform:translateY(0) scale(1);}
.modal__close{
  position:absolute; top:20px; right:20px; width:38px; height:38px; border-radius:50%;
  background:var(--cream); border:1px solid var(--line); font-size:20px; cursor:pointer;
  display:flex; align-items:center; justify-content:center; color:var(--charcoal); line-height:1;
}
.modal__close:hover{background:var(--maroon); color:var(--cream); border-color:var(--maroon);}
body.modal-lock{overflow:hidden;}

.case-label{font-size:12px; letter-spacing:0.05em; text-transform:uppercase; color:var(--maroon); font-weight:600; margin-bottom:8px;}
.case__header{margin-bottom:30px;}
.case__title{font-size:clamp(26px,3.4vw,36px); font-weight:500; margin:4px 0 10px;}
.case__tagline{color:var(--muted); font-size:15.5px; max-width:520px;}
.case__row{display:grid; grid-template-columns:1fr 1fr; gap:28px; margin-bottom:30px;}
.case__note{font-size:14.5px; color:var(--charcoal); line-height:1.7; margin-bottom:30px; max-width:560px;}
.case__col p{font-size:14.5px; color:var(--charcoal); line-height:1.7;}
@media(max-width:700px){.case__row{grid-template-columns:1fr;}}

.case-stats{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-bottom:8px;}
.case-stat{background:var(--cream); border-radius:16px; padding:18px 16px; text-align:center;}
.case-stat strong{display:block; font-family:'Playfair Display',serif; font-size:22px; color:var(--maroon);}
.case-stat span{font-size:12px; color:var(--muted);}
.case-stats-note{font-size:12.5px; color:var(--muted); font-style:italic; margin:10px 0 30px;}
@media(max-width:600px){.case-stats{grid-template-columns:repeat(2,1fr);}}

.case-video{margin-bottom:34px;}
.case-video__el{width:100%; max-width:280px; border-radius:16px; display:block; background:#000;}
.case-video__el--feature{max-width:320px;}
.case-instagram{margin:-14px 0 30px;}
.case-instagram a{
  font-size:13.5px; color:var(--maroon); font-weight:500;
  border-bottom:1px solid var(--maroon); padding-bottom:2px;
}
.case-instagram a:hover{color:var(--maroon-dark); border-color:var(--maroon-dark);}

.case-gallery{margin-bottom:30px;}
.case-gallery__grid{display:grid; grid-template-columns:repeat(3,1fr); gap:10px;}
.case-gallery__grid:has(.case-gallery__img:only-child){grid-template-columns:1fr;}
.case-gallery__img{
  width:100%; height:200px; object-fit:contain; background:var(--cream);
  border-radius:12px; cursor:zoom-in; transition:opacity .2s ease; padding:8px;
}
.case-gallery__grid:has(.case-gallery__img:only-child) .case-gallery__img{height:auto; max-height:520px; padding:0;}
.case-gallery__img--contain{background:var(--cream); padding:12%;}
.case-gallery__img:hover{opacity:0.85;}
@media(max-width:600px){.case-gallery__grid{grid-template-columns:repeat(2,1fr);}}

.case-files__list{display:flex; flex-wrap:wrap; gap:10px;}
.file-chip{
  display:inline-flex; align-items:center; gap:10px; background:var(--cream);
  border:1px solid var(--line); padding:12px 16px; border-radius:14px; font-size:13.5px;
  transition:border-color .2s ease, background .2s ease;
}
.file-chip:hover{border-color:var(--maroon); background:var(--paper);}
.file-chip__dl{color:var(--maroon); font-weight:500; font-size:12px; margin-left:4px;}

/* ---------- LIGHTBOX ---------- */
.lightbox{
  position:fixed; inset:0; z-index:120; background:rgba(20,10,10,0.92);
  display:flex; align-items:center; justify-content:center; padding:30px;
  opacity:0; pointer-events:none; transition:opacity .25s ease; cursor:zoom-out;
}
.lightbox--open{opacity:1; pointer-events:auto;}
.lightbox img{max-width:100%; max-height:90vh; border-radius:8px; box-shadow:0 30px 80px rgba(0,0,0,0.5);}

/* ---------- ABOUT ---------- */
.about-grid{display:grid; grid-template-columns:1.1fr 0.9fr; gap:50px; align-items:start; min-width:0;}
.about-grid > *{min-width:0;}
.about-body p{margin-bottom:18px; font-size:16px; color:var(--charcoal);}
.about-body p.lede{font-family:'Playfair Display',serif; font-size:22px; font-style:italic; color:var(--maroon); line-height:1.5;}
.about-facts{background:var(--paper); border:1px solid var(--line); border-radius:24px; padding:34px;}
.about-facts dl{display:grid; grid-template-columns:auto 1fr; gap:14px 18px; font-size:14.5px;}
.about-facts dt{color:var(--muted); font-size:12.5px; letter-spacing:0.03em; text-transform:uppercase; padding-top:2px;}
.about-facts dd{font-weight:500; min-width:0; overflow-wrap:break-word;}
@media(max-width:860px){.about-grid{grid-template-columns:1fr;}}

.community{background:var(--maroon-dark); color:var(--cream); border-radius:32px; padding:56px 48px; position:relative; overflow:hidden; margin-top:70px;}
.community-blob{position:absolute; bottom:-100px; left:-80px; width:320px; height:320px; background:rgba(227,195,190,0.16); border-radius:55% 45% 60% 40% / 45% 55% 45% 55%;}
.community-inner{position:relative; z-index:1; max-width:620px;}
.community .script-tag{font-family:'Meddon',cursive; font-size:22px; color:var(--blush); margin-bottom:4px;}
.community h2{font-family:'Playfair Display',serif; font-weight:500; font-size:clamp(24px,3vw,32px); margin-bottom:18px; line-height:1.28;}
.community p{font-size:15px; opacity:0.9; margin-bottom:14px; max-width:540px;}
.community-ctas{margin-top:24px; display:flex; gap:12px; flex-wrap:wrap;}
@media(max-width:600px){.community{padding:38px 26px;}}

/* ---------- TRIAL VIEW ---------- */
.trial-hero{padding:64px 0 40px; text-align:left;}
.trial-hero h1{font-family:'Playfair Display',serif; font-weight:500; font-size:clamp(30px,4.6vw,48px); max-width:640px; line-height:1.15;}
.trial-hero .lede{font-family:'Playfair Display',serif; font-style:italic; color:var(--maroon); font-size:19px; margin-top:16px; max-width:440px;}
.trial-flow{display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:start;}
.flow-copy p{margin-bottom:14px; font-size:15.5px; color:var(--charcoal);}
.flow-list{list-style:none; margin-top:24px;}
.flow-list li{padding:10px 0 10px 24px; border-bottom:1px solid var(--line); position:relative; font-size:14.5px;}
.flow-list li::before{content:''; position:absolute; left:0; top:17px; width:6px; height:6px; border-radius:50%; background:var(--blush-deep);}
@media(max-width:860px){.trial-flow{grid-template-columns:1fr;}}

/* ---------- FORMS ---------- */
.form-card{background:var(--paper); border:1px solid var(--line); border-radius:26px; padding:38px; position:relative; overflow:hidden;}
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px; min-width:0;}
.form-grid .field--full{grid-column:1 / -1;}
.field{display:flex; flex-direction:column; gap:6px; margin-bottom:16px; min-width:0;}
.field input, .field textarea{width:100%; min-width:0;}
@media(max-width:560px){
  .form-grid{grid-template-columns:1fr;}
}
.field label{font-size:12.5px; color:var(--muted); letter-spacing:0.02em;}
.field input, .field textarea, .field select{
  border:1px solid var(--line); background:var(--cream); border-radius:12px;
  padding:12px 14px; font-family:inherit; font-size:14.5px; color:var(--charcoal);
  transition:border-color .2s ease;
}
.field input:focus, .field textarea:focus, .field select:focus{
  outline:none; border-color:var(--maroon);
}
.field textarea{resize:vertical; min-height:90px;}
.form-note{font-size:12.5px; color:var(--muted); margin-top:14px;}
.form--sent{opacity:0.35; pointer-events:none;}
.form-confirm{
  display:none; position:absolute; inset:0; background:var(--paper);
  flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:40px;
}
.form-confirm--show{display:flex;}
.form-confirm .script{font-size:26px; color:var(--maroon); margin-bottom:10px;}
.form-confirm h3{font-family:'Playfair Display',serif; font-size:24px; margin-bottom:10px;}
.form-confirm p{color:var(--muted); font-size:14.5px; max-width:340px;}

.discovery-card{background:var(--maroon); color:var(--cream); border-radius:26px; padding:38px; display:flex; flex-direction:column; justify-content:center; gap:16px;}
.discovery-card h3{font-family:'Playfair Display',serif; font-size:24px; font-weight:500;}
.discovery-card p{opacity:0.88; font-size:14.5px;}

/* ---------- CONTACT ---------- */
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:start; min-width:0;}
.contact-grid > *{min-width:0;}
.contact-details{margin-top:20px;}
.contact-row{display:flex; gap:16px; padding:15px 0; border-bottom:1px solid var(--line); font-size:14.5px; flex-wrap:wrap;}
.contact-row a, .contact-row span{min-width:0; overflow-wrap:break-word; word-break:break-word;}
.contact-row:last-child{border-bottom:none;}
.contact-row .label{color:var(--muted); min-width:100px; font-size:12.5px; letter-spacing:0.02em; padding-top:2px; text-transform:uppercase;}
.contact-row a:hover{color:var(--maroon);}
@media(max-width:860px){.contact-grid{grid-template-columns:1fr;}}

/* ---------- FOOTER ---------- */
footer{border-top:1px solid var(--line); padding:34px 0 42px; margin-top:20px;}
.footer-grid{display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:24px;}
.footer-brand{font-family:'Playfair Display',serif; font-style:italic; color:var(--maroon); font-size:19px;}
.footer-sub{font-size:12.5px; color:var(--muted); margin-top:6px; max-width:280px;}
.footer-ctas{display:flex; gap:10px; margin-top:16px; flex-wrap:wrap;}
.btn-sm{padding:9px 18px; font-size:12.5px;}
.footer-signoff{
  margin-top:22px;
  font-size:20px;
  color:var(--blush-deep);
}
.footer-links{display:flex; gap:26px; font-size:13.5px; flex-wrap:wrap;}
.footer-bottom{margin-top:26px; padding-top:20px; border-top:1px solid var(--line); font-size:12.5px; color:var(--muted); display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;}
.footer-contact-link{display:inline-flex; align-items:center; color:var(--muted);}
.footer-contact-link:hover{color:var(--maroon);}

/* ---------- INLINE ICONS (contact info, headings) ---------- */
.icon-inline{
  width:14px; height:14px; display:inline-block; vertical-align:-2px;
  margin-right:6px; flex-shrink:0;
}
.contact-row a, .footer-links a, dd a{overflow-wrap:break-word; word-break:break-word;}
.icon-heading{
  width:18px; height:18px; display:inline-block; vertical-align:-3px;
  margin-right:8px; color:var(--maroon); flex-shrink:0;
}

/* ---------- RESPONSIVE GLOBAL ---------- */
@media(max-width:600px){
  .wrap{padding:0 22px;}
  nav{padding:13px 22px;}
  section{padding-bottom:64px;}
  .page-head{padding:50px 0 34px;}
  .modal__panel{padding:44px 22px 30px;}
}