@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700;800;900&family=Space+Grotesk:wght@400;500;600;700&family=Work+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;1,500&display=swap');

:root{
  --ink:#111111;
  --paper:#FFFFFF;
  --gray-bg:#EAEAEA;
  --gray-bg-2:#F3F3F1;
  --gray-text:#6E6E6E;
  --gray-line:#E4E4E1;
  --black-band:#111111;
  --coral:#E4573D;
  --sage:#3FA35E;
  --lavender:#6C4CE0;
  --violet:#7C3AED;
  --pink:#EC4899;
  --lilac:#F3EDFF;
  --rose:#FFF0F7;
  --butter:#F5EFC7;
  --radius:16px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:linear-gradient(180deg, #fff 0%, #fff 28%, #fcfaff 100%);
  color:var(--ink);
  font-family:'Work Sans', sans-serif;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3, .display{
  font-family:'Poppins', sans-serif;
  font-weight:800;
  letter-spacing:-0.02em;
  line-height:1.05;
  margin:0;
  text-transform:none;
}
.mono{font-family:'Space Grotesk',monospace; letter-spacing:0.02em;}
a{color:inherit;}
img{max-width:100%; display:block;}
.wrap{max-width:1200px; margin:0 auto; padding:0 32px;}

.dots{display:inline-flex; gap:7px; align-items:center;}
.dot{width:11px;height:11px;border-radius:50%; display:inline-block; border:2px solid var(--ink);}
.dot.r{background:var(--coral);}
.dot.g{background:var(--sage);}
.dot.p{background:var(--lavender);}

/* ===== NAV ===== */
header{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,0.85);
  backdrop-filter:blur(10px);
}
.navrow{display:flex; align-items:center; justify-content:space-between; padding:20px 32px; max-width:1200px; margin:0 auto;}
.logo{display:flex; align-items:center; gap:6px; font-family:'Poppins'; font-weight:800; font-size:19px; text-decoration:none; color:var(--ink);}
.logo .dots{display:none;}
nav ul{list-style:none; display:flex; gap:4px; margin:0; padding:0; background:var(--lilac); border-radius:100px; padding:5px;}
nav a{text-decoration:none; font-weight:600; font-size:13.5px; padding:9px 18px; border-radius:100px; transition:background .2s ease, color .2s ease;}
nav a:hover{background:rgba(0,0,0,.05);}
nav a.navActive{background:var(--violet); color:var(--paper);}
.navcta{
  border:none; background:linear-gradient(135deg, var(--violet), var(--pink)); color:var(--paper);
  padding:11px 22px; border-radius:100px; font-weight:700; font-size:13.5px;
  text-decoration:none; transition:background .2s ease, transform .15s ease;
  box-shadow:0 8px 18px rgba(124,58,237,.2);
}
.navcta:hover{background:linear-gradient(135deg, var(--pink), var(--violet));}

/* ===== pills / buttons ===== */
.pill{
  display:inline-flex; align-items:center; gap:8px;
  border:none; border-radius:100px;
  padding:10px 12px; font-size:15px; font-weight:600;
  background:var(--gray-bg); color:var(--gray-text);
}
.pill.butter{background:var(--gray-bg); color:var(--gray-text);}
.pill.sage{background:var(--gray-bg-2);}
.pill.lav{background:var(--ink); color:var(--paper);}
.pill.coral{background:var(--ink); color:var(--paper);}

.btn{
  border:none; padding:15px 28px; border-radius:100px;
  font-weight:700; text-decoration:none; font-size:14.5px;
  display:inline-flex; align-items:center; gap:8px; cursor:pointer; transition:background .2s ease, color .2s ease, transform .15s ease;
  background:var(--gray-bg); color:var(--ink);
}
.btn.primary{background:linear-gradient(135deg, var(--violet), var(--pink)); color:var(--paper); box-shadow:0 8px 18px rgba(124,58,237,.2);}
.btn.primary:hover{background:linear-gradient(135deg, var(--pink), var(--violet));}
.btn.ghost{background:var(--paper); border:2px solid var(--ink);}
.btn.ghost:hover{background:var(--ink); color:var(--paper);}
.btn.sm{padding:11px 20px; font-size:13px;}

/* ===== HERO ===== */
.hero{padding:64px 0 0; background:radial-gradient(circle at 82% 28%, rgba(236,72,153,.15), transparent 23%), radial-gradient(circle at 68% 68%, rgba(124,58,237,.12), transparent 28%);}
.hero-grid{display:grid; grid-template-columns:1.1fr 0.9fr; gap:40px; align-items:center;}
.eyebrow{margin-bottom:18px;}
.hero h1{font-size:clamp(46px,6.4vw,80px);}
.hero h1 .accent{color:var(--gray-text);}
.hero-sub{
  font-size:17px; max-width:520px; margin:22px 0 30px; line-height:1.6; color:#3a3a3a; font-weight:400;
}
.hero-ctas{display:flex; gap:12px; flex-wrap:wrap;}

.hero-photo-zone{height:520px; display:grid; place-items:center; perspective:1000px;}
.hero-photo-card{position:relative; width:min(390px,86%); height:470px; border-radius:46% 46% 28px 28px; overflow:visible; transform-style:preserve-3d; transition:transform .2s ease; will-change:transform;}
.hero-photo-card::before{content:""; position:absolute; inset:16px -16px -16px 16px; border-radius:inherit; background:linear-gradient(140deg,var(--violet),var(--pink)); z-index:-1; transform:rotate(5deg);}
.hero-photo-card img{width:100%; height:100%; object-fit:cover; object-position:top; border-radius:inherit; border:8px solid #fff; box-shadow:0 28px 48px rgba(92,31,151,.24);}
.photo-sticker{position:absolute; display:grid; place-items:center; background:#fff; color:var(--violet); box-shadow:0 10px 24px rgba(40,20,70,.18);}
.photo-sticker-one{width:72px; height:72px; border-radius:50%; right:-20px; top:20%; font-size:36px; animation:float 3.2s ease-in-out infinite;}
.photo-sticker-two{padding:12px 16px; border-radius:100px; left:-28px; bottom:18%; font-size:12px; font-weight:800; transform:rotate(-7deg);}
@keyframes float{50%{transform:translateY(-13px) rotate(10deg);}}

.photo-card{display:none;}
.spark{position:absolute; color:#fff; font-size:30px;}
.spark.s1{top:22%; right:6%;}
.spark.s2{bottom:14%; left:4%; font-size:22px;}

.badge-available{
  display:inline-flex; align-items:center; gap:8px; border:none; border-radius:100px;
  padding:9px 18px 9px 14px; font-size:13px; font-weight:700;
  background:var(--lilac); color:var(--violet);
}
.badge-available .ping{position:relative; width:9px; height:9px; border-radius:50%; background:var(--sage); flex-shrink:0;}
.badge-available .ping::after{
  content:""; position:absolute; inset:0; border-radius:50%; background:var(--sage);
  animation:ping 1.8s cubic-bezier(0,0,.2,1) infinite;
}
@keyframes ping{ 0%{transform:scale(1); opacity:.7;} 100%{transform:scale(2.6); opacity:0;} }
.role-swap{background:linear-gradient(90deg, var(--violet), var(--pink)); color:#fff; min-width:265px; border:0; box-shadow:0 10px 24px rgba(124,58,237,.18);}
.role-swap-inner{display:inline-block; min-height:1.2em; font-weight:700;}

/* ===== TAPE (black band with stars) ===== */
.tape{
  margin-top:56px; background:linear-gradient(90deg, var(--violet), var(--pink)); color:var(--paper); overflow:hidden; padding:20px 0;
  width:100vw; position:relative; left:50%; right:50%; margin-left:-50vw; margin-right:-50vw;
}
.tape-inner{display:flex; gap:44px; white-space:nowrap; animation:scroll 24s linear infinite; width:max-content;}
.tape span{font-family:'Poppins'; font-weight:700; font-size:clamp(18px,2.6vw,28px); display:flex; align-items:center; gap:20px;}
@keyframes scroll{from{transform:translateX(0);} to{transform:translateX(-50%);}}

section{padding:88px 0;}
.section-head{margin-bottom:44px;}
.section-head h2{font-size:clamp(32px,4.8vw,52px);}
.section-tag{max-width:480px; font-size:15px; color:var(--gray-text); line-height:1.5; margin-top:12px;}

/* ===== SOBRE MI ===== */
.about-grid{display:grid; grid-template-columns:0.85fr 1.15fr; gap:48px; align-items:flex-start;}
.card{border:none; border-radius:var(--radius); padding:0; background:transparent;}
.card.sage{background:transparent;}
.card h3{font-size:15px; margin-bottom:14px; font-weight:700;}
.card p{line-height:1.7; font-size:16px; margin:0 0 16px; color:#333;}
.factgrid{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:24px;}
.fact{border-radius:18px; padding:18px 18px; background:linear-gradient(145deg,var(--lilac),var(--rose)); border:1px solid rgba(124,58,237,.1);}
.fact b{display:block; font-family:'Poppins'; font-weight:800; font-size:28px;}
.fact span{font-size:11.5px; text-transform:uppercase; letter-spacing:.04em; font-weight:700; color:var(--gray-text);}
.about-grid .card:first-child > img{width:100%; height:520px; object-fit:cover; object-position:top; border-radius:var(--radius); background:var(--gray-bg-2);}
.skills-inline{margin-top:38px; padding:24px; border-radius:22px; background:linear-gradient(135deg, var(--lilac), var(--rose));}
.skills-inline h3{margin:0 0 7px; font-size:16px; color:var(--violet);}
.skills-inline p{font-size:13px; line-height:1.5; color:var(--gray-text); margin:0 0 16px;}
.skills-inline .skill-list li{background:rgba(255,255,255,.82); color:var(--violet); border:1px solid rgba(124,58,237,.12);}

/* ===== SERVICIOS / MIS SERVICIOS ===== */
.services-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px;}
.service-card{
  border-radius:var(--radius); padding:30px 24px; background:linear-gradient(155deg,#fff,var(--lilac));
  transition:background .25s ease, transform .25s ease;
}
.service-card:hover{background:var(--rose); transform:translateY(-4px);}
.service-card .sv-num{font-family:'Space Grotesk'; font-weight:700; font-size:12px; color:var(--gray-text);}
.service-card .sv-icon{font-size:26px; margin:14px 0 10px; display:block;}
.service-card h4{font-family:'Poppins'; font-weight:700; font-size:18px; margin-bottom:10px;}
.service-card p{font-size:13.5px; line-height:1.55; color:var(--gray-text); margin:0;}

.work-modes{display:grid; grid-template-columns:repeat(2,1fr); gap:18px;}
.wm-card{border-radius:var(--radius); padding:28px; background:var(--gray-bg-2); display:flex; gap:16px; align-items:flex-start;}
.wm-card .wm-ico{flex-shrink:0; width:46px; height:46px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:19px; background:var(--paper);}
.wm-card h4{font-family:'Poppins'; font-weight:700; font-size:16px; margin-bottom:6px;}
.wm-card p{font-size:13.5px; line-height:1.55; color:var(--gray-text); margin:0;}

/* ===== LOGOFOLIO with charm accent ===== */
.logofolio-band{background:linear-gradient(100deg,var(--violet),var(--pink)); position:relative; padding:40px 0; margin:0 0 56px;}
.logofolio{display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:40px 52px;}
.logofolio-item{font-family:'Poppins'; font-weight:800; font-size:clamp(18px,2.4vw,26px); color:var(--paper); opacity:.9;}

/* ===== PROCESO ===== */
.process{display:grid; grid-template-columns:repeat(5,1fr); gap:14px;}
.proc-step{border-radius:22px; padding:22px 18px; background:linear-gradient(145deg,#f6f0ff,#fff0f8); border:1px solid rgba(124,58,237,.12); box-shadow:0 10px 22px rgba(103,47,166,.07);}
.proc-step:nth-child(2n){background:linear-gradient(145deg,#fff0f8,#f9efff);}
.proc-step .num{font-family:'Poppins'; font-weight:800; font-size:26px; color:var(--violet); opacity:.9;}
.proc-step h4{font-family:'Poppins'; font-weight:700; font-size:14.5px; margin:10px 0 8px; color:#311153;}
.proc-step p{font-size:12.5px; line-height:1.5; color:#654b75; margin:0;}

/* ===== PROYECTOS: rounded card, image + gray info panel + Ver proyecto ===== */
.filter-row{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:36px;}
.filter-btn{
  border:none; background:var(--gray-bg-2); padding:10px 20px; border-radius:100px;
  font-weight:700; font-size:13px; cursor:pointer; transition:background .2s ease, color .2s ease;
  font-family:inherit;
}
.filter-btn:hover{background:var(--gray-bg);}
.filter-btn.active{background:var(--violet); color:var(--paper);}

.bento-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:28px;}
.bento-card{
  position:relative; display:flex; flex-direction:column; text-decoration:none; color:inherit;
  cursor:pointer; border-radius:var(--radius); overflow:hidden; background:linear-gradient(145deg,#fff,var(--lilac));
  box-shadow:0 1px 2px rgba(0,0,0,.04); transition:transform .3s cubic-bezier(.16,.8,.3,1), box-shadow .3s ease;
}
.bento-card:hover{transform:translateY(-6px); box-shadow:0 18px 32px rgba(0,0,0,.12);}
.bento-card.hidden{display:none;}
.bento-card .bc-imgwrap{position:relative; width:100%; aspect-ratio:5/4; overflow:hidden; background:var(--gray-bg);}
.bento-card .bc-img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .5s cubic-bezier(.16,.8,.3,1);}
.bento-card:hover .bc-img{transform:scale(1.05);}
.bento-card .bc-scrim, .bento-card .bc-expand{display:none;}
.bento-card .bc-body{position:relative; padding:22px; display:flex; flex-direction:column; gap:10px; flex:1;}
.bento-card .bc-kicker{font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--gray-text);}
.bento-card .bc-title{font-family:'Poppins'; font-weight:800; font-size:19px; margin:0;}
.bento-card .bc-desc{font-size:13px; line-height:1.5; color:var(--gray-text); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; margin:0;}
.bento-card .bc-tags{display:flex; gap:6px; flex-wrap:wrap; margin-top:2px;}
.bento-card .bc-tags span{background:var(--violet); color:var(--paper); border-radius:100px; padding:4px 12px; font-size:10.5px; font-weight:700; text-transform:uppercase;}
.bento-card .bc-tags span:not(:first-child){display:none;}
.bento-card .bc-cta{
  margin-top:auto; background:var(--paper); border-radius:100px; padding:12px; text-align:center;
  font-weight:700; font-size:13.5px; box-shadow:0 1px 2px rgba(0,0,0,.06);
}

.bento-card.xl, .bento-card.wide, .bento-card.md, .bento-card.sm{grid-column:span 1;}

@media (max-width:980px){ .bento-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:620px){ .bento-grid{grid-template-columns:1fr;} }

.proj-feature{border-radius:var(--radius); background:var(--gray-bg-2); overflow:hidden; margin-bottom:60px; text-decoration:none; display:block; color:inherit;}
.proj-feature-top{display:grid; grid-template-columns:1fr 1fr;}
.proj-feature-top img{width:100%; height:100%; object-fit:cover;}
.proj-feature-txt{padding:38px;}
.proj-feature-txt .pill{margin-bottom:16px;}
.proj-feature-txt h3{font-size:32px; margin-bottom:14px;}
.proj-feature-txt p{font-size:15px; line-height:1.6; color:var(--gray-text); margin:0 0 20px;}
.tags{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:20px;}
.tag{background:var(--ink); color:var(--paper); border-radius:100px; padding:5px 14px; font-size:11.5px; font-weight:700;}
.proj-shots{display:grid; grid-template-columns:repeat(3,1fr);}
.proj-shots img{border-radius:0;}

.grid-cases{display:grid; grid-template-columns:repeat(3,1fr); gap:28px;}
.case-card{border-radius:var(--radius); background:var(--gray-bg-2); overflow:hidden; display:flex; flex-direction:column; text-decoration:none; color:inherit; transition:transform .25s ease;}
.case-card:hover{transform:translateY(-5px);}
.case-card.hidden{display:none;}
.case-img{aspect-ratio:5/4; overflow:hidden; background:var(--gray-bg);}
.case-img img{width:100%; height:100%; object-fit:cover;}
.case-body{padding:20px;}
.case-body .kicker{font-size:11px; font-weight:700; text-transform:uppercase; color:var(--gray-text); margin-bottom:4px;}
.case-body h4{font-family:'Poppins'; font-weight:800; font-size:18px; margin-bottom:6px;}
.case-body p{font-size:13px; line-height:1.5; color:var(--gray-text); margin:0 0 12px;}

.wide-case{border-radius:var(--radius); overflow:hidden; background:var(--gray-bg-2); margin-top:26px; text-decoration:none; color:inherit; display:block;}
.wide-case img{width:100%; display:block;}
.wide-case-body{padding:26px 30px;}

/* ===== SKILLS: interactive keycap grid ===== */
.skills-grid{display:block;}
.keycap-board{
  display:grid; grid-template-columns:repeat(6, 1fr); gap:14px; margin-top:40px; perspective:800px;
}
.keycap{
  aspect-ratio:1; border-radius:16px; background:var(--gray-bg-2);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  box-shadow:0 6px 0 var(--gray-bg), 0 8px 14px rgba(0,0,0,.10);
  transform:translateY(0); transition:transform .12s ease, box-shadow .12s ease, background .2s ease;
  cursor:pointer; user-select:none; font-family:'Space Grotesk'; font-weight:700;
}
.keycap:hover{background:var(--ink); color:var(--paper); transform:translateY(2px); box-shadow:0 4px 0 #333, 0 6px 10px rgba(0,0,0,.14);}
.keycap:active, .keycap.pressed{transform:translateY(6px); box-shadow:0 0 0 var(--gray-bg), 0 2px 4px rgba(0,0,0,.12);}
.keycap .kc-icon{font-size:26px; line-height:1;}
.keycap .kc-label{font-size:11px; letter-spacing:.02em;}
@media (max-width:820px){ .keycap-board{grid-template-columns:repeat(4,1fr);} }
@media (max-width:520px){ .keycap-board{grid-template-columns:repeat(3,1fr);} }

.tools-grid{display:none;} /* replaced by keycap-board */
.skill-list{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:10px;}
.skill-list li{display:flex; align-items:center; gap:8px; font-size:13.5px; font-weight:600; background:var(--gray-bg-2); padding:9px 16px; border-radius:100px;}
.skill-list .dot{display:none;}

/* ===== EDU timeline ===== */
.timeline{border-left:2px solid var(--gray-line); padding-left:28px; display:flex; flex-direction:column; gap:30px; margin-top:6px;}
.tl-item{position:relative;}
.tl-item::before{content:""; position:absolute; left:-35px; top:4px; width:12px; height:12px; border-radius:50%; background:var(--ink);}
.tl-item .yr{font-family:'Space Grotesk'; font-weight:700; color:var(--gray-text); font-size:12px; text-transform:uppercase; letter-spacing:.05em;}
.tl-item h4{font-size:18px; margin:4px 0 6px; font-family:'Poppins'; font-weight:700;}
.tl-item p{margin:0; font-size:14px; color:var(--gray-text); line-height:1.55;}

/* ===== APRENDIZAJES ===== */
.learn-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px;}
.learn-card{border-radius:var(--radius); padding:24px 20px; background:linear-gradient(145deg,#fff,#f3eaff); border:1px solid rgba(124,58,237,.12); box-shadow:0 10px 24px rgba(103,47,166,.07); transition:transform .2s ease, box-shadow .2s ease;}
.learn-card:nth-child(even){background:linear-gradient(145deg,#fff8fc,#fdebf6);}
.learn-card:hover{transform:translateY(-5px); box-shadow:0 18px 30px rgba(103,47,166,.14);}
.learn-card .lc-mark{font-family:'Poppins'; font-weight:800; font-size:26px; color:var(--pink); margin-bottom:8px;}
.learn-card p{font-size:13.5px; line-height:1.55; color:#442157; margin:0;}

/* ===== CTA / FOOTER ===== */
footer{background:#14110f; color:var(--paper); padding:92px 0 28px; border-radius:40px 40px 0 0; margin-top:20px;}
.foot-grid{display:grid; grid-template-columns:minmax(0,1.3fr) minmax(360px,.7fr); gap:92px; align-items:start;}
footer h2{font-size:clamp(42px,5.6vw,74px); color:#fff8ed; max-width:680px;}
.foot-intro .pill{background:transparent; border:1.5px solid #fff8ed; color:#fff8ed; margin-bottom:24px;}
.foot-intro p{font-size:18px; line-height:1.55; color:#ded6ca; max-width:530px; margin:24px 0 0;}
.foot-details{display:grid; grid-template-columns:1fr 1fr; gap:34px; padding-top:8px;}
.foot-col{text-align:left;}
.foot-col h5{text-transform:uppercase; font-size:12px; letter-spacing:.06em; color:#d6b2ff; margin:0 0 16px; font-weight:700;}
.foot-col a, .foot-col p{display:block; text-decoration:none; color:var(--paper); font-size:15px; margin-bottom:10px; line-height:1.5;}
footer .btn.primary{background:linear-gradient(135deg, var(--violet), var(--pink)); color:#fff;}
footer .btn.primary:hover{background:linear-gradient(135deg, var(--pink), var(--violet));}
.foot-grid .btn{margin:26px 0 0;}
.foot-bottom{margin-top:60px; padding-top:20px; border-top:1px solid rgba(255,255,255,.12); display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:12px; color:#8A8A8A;}

/* ===== reveal / magnetic / cursor ===== */
.reveal{opacity:0; transform:translateY(24px); transition:opacity .7s cubic-bezier(.16,.8,.3,1), transform .7s cubic-bezier(.16,.8,.3,1);}
.reveal.in{opacity:1; transform:translateY(0);}
.reveal-stagger > *{opacity:0; transform:translateY(20px); transition:opacity .6s cubic-bezier(.16,.8,.3,1), transform .6s cubic-bezier(.16,.8,.3,1);}
.reveal-stagger.in > *{opacity:1; transform:translateY(0);}
.reveal-stagger.in > *:nth-child(1){transition-delay:.03s;}
.reveal-stagger.in > *:nth-child(2){transition-delay:.09s;}
.reveal-stagger.in > *:nth-child(3){transition-delay:.15s;}
.reveal-stagger.in > *:nth-child(4){transition-delay:.21s;}
.reveal-stagger.in > *:nth-child(5){transition-delay:.27s;}
.reveal-stagger.in > *:nth-child(6){transition-delay:.33s;}
.reveal-stagger.in > *:nth-child(7){transition-delay:.39s;}
.reveal-stagger.in > *:nth-child(8){transition-delay:.45s;}
.reveal-stagger.in > *:nth-child(9){transition-delay:.51s;}

.magnetic{display:inline-flex; will-change:transform;}
.magnetic .btn{transition:transform .15s ease, box-shadow .15s ease, background .2s ease, color .2s ease;}

.cursor-dot{position:fixed; top:0; left:0; width:8px; height:8px; border-radius:50%; background:var(--ink); pointer-events:none; z-index:999; transform:translate(-50%,-50%); transition:width .18s ease,height .18s ease,opacity .18s ease; opacity:0;}
.cursor-ring{position:fixed; top:0; left:0; width:32px; height:32px; border-radius:50%; border:1.5px solid var(--ink); pointer-events:none; z-index:998; transform:translate(-50%,-50%); transition:width .22s ease,height .22s ease,opacity .22s ease; opacity:0;}
.cursor-dot.show, .cursor-ring.show{opacity:1;}
.cursor-ring.big{width:56px; height:56px; background:rgba(0,0,0,.06);}
@media (hover:none), (max-width:900px){ .cursor-dot, .cursor-ring{display:none;} }

/* ===== CASE STUDY PAGE ===== */
.case-hero{padding:48px 0 0;}
.breadcrumb{display:flex; align-items:center; gap:8px; font-size:12.5px; font-weight:700; color:var(--gray-text); margin-bottom:20px;}
.breadcrumb a{text-decoration:none; color:var(--ink);}
.case-title-row{display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap; margin-bottom:22px;}
.case-title-row h1{font-size:clamp(38px,6.4vw,74px);}
.case-meta{display:flex; gap:14px; flex-wrap:wrap; margin:26px 0 34px;}
.case-meta div{display:flex; flex-direction:column; gap:6px; background:var(--gray-bg-2); border-radius:18px; padding:14px 20px;}
.case-meta span{font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--gray-text);}
.case-meta b{font-family:'Space Grotesk'; font-size:14px; font-weight:600;}
.case-cover{border-radius:var(--radius); overflow:hidden; margin-bottom:10px;}
.case-cover img{width:100%; display:block; max-height:600px; object-fit:cover;}

.case-section{padding:60px 0;}
.case-section .stepnum{font-family:'Space Grotesk'; font-weight:700; font-size:12px; color:var(--gray-text); letter-spacing:.05em; margin-bottom:12px; display:block;}
.case-section h2{font-size:clamp(28px,4.2vw,44px); margin-bottom:22px;}
.case-body-grid{display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:start;}
.case-body-grid.single{grid-template-columns:1fr; max-width:800px;}
.case-text p{font-size:15.5px; line-height:1.7; color:#333; margin:0 0 16px;}
.chiplist{display:flex; flex-wrap:wrap; gap:8px; margin-top:16px;}
.chip{border-radius:100px; padding:7px 15px; font-size:12px; font-weight:700; background:var(--gray-bg-2);}
.chip.on{background:var(--ink); color:var(--paper);}

.insight-cards{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:10px;}
.insight-card{border-radius:20px; padding:20px; background:var(--gray-bg-2);}
.insight-card .ic-num{font-family:'Poppins'; font-weight:800; font-size:18px; color:var(--gray-text);}
.insight-card p{font-size:13.5px; line-height:1.5; margin:8px 0 0; color:#333;}

.persona-card{border-radius:var(--radius); padding:26px; background:var(--gray-bg-2);}
.persona-card h4{font-family:'Poppins'; font-weight:800; font-size:20px; margin-bottom:2px;}
.persona-card .p-sub{font-size:12px; font-weight:700; margin-bottom:16px; color:var(--gray-text);}
.persona-cols{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
.persona-cols h5{font-size:11px; text-transform:uppercase; margin:0 0 8px; color:var(--gray-text);}
.persona-cols ul{margin:0; padding-left:18px; font-size:13.5px; line-height:1.6;}
.warn-card{border-radius:18px; padding:16px 18px; background:var(--ink); color:var(--paper); font-weight:700; font-size:13.5px; line-height:1.5; margin-top:18px;}

.gallery{display:grid; grid-template-columns:1fr; gap:20px; margin-top:6px;}
.gallery.g2{grid-template-columns:1fr 1fr;}
.gallery img{border-radius:20px; max-height:580px; width:auto; max-width:100%; margin:0 auto; object-fit:contain; background:var(--gray-bg-2);}
.gallery.wide img{max-height:none; width:100%;}
.gallery.contain-tall img{max-height:660px;}

.quote-block{border-left:3px solid var(--ink); padding:6px 0 6px 22px; margin:18px 0;}
.quote-block p{font-family:'Poppins'; font-weight:800; font-size:20px; line-height:1.3; margin:0;}

.next-project{border-radius:32px; background:var(--ink); color:var(--paper); padding:50px; display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; text-decoration:none; margin:0 0 80px;}
.next-project .np-label{font-size:12px; color:#9A9A9A; font-weight:700; margin-bottom:8px;}
.next-project h3{font-size:clamp(26px,4.2vw,46px); color:var(--paper);}
.next-project .arrow{display:none;}

.compare-grid{display:grid; grid-template-columns:1fr 1fr; gap:18px;}
.compare-col{border-radius:20px; overflow:hidden; background:var(--gray-bg-2);}
.compare-frame img{width:100%; display:block;}
.compare-label{font-family:'Space Grotesk'; font-weight:700; font-size:11px; padding:10px 14px; color:var(--gray-text);}
@media (max-width:820px){ .compare-grid{grid-template-columns:1fr;} }

.finzo{--fz-violet:var(--lavender); --fz-lav:#F1EEFB; --fz-mint:#3FA35E; --fz-red:#D8483B;}
.flow-card{border-radius:20px; padding:22px 22px 24px; background:var(--gray-bg-2); margin-bottom:18px;}
.flow-card .flow-obj{font-size:12px; font-weight:700; color:var(--gray-text); margin-bottom:4px;}
.flow-card h4{font-family:'Poppins'; font-weight:800; font-size:18px; margin-bottom:10px;}
.flow-steps{display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:14px 0;}
.flow-step{border-radius:100px; padding:7px 15px; font-size:12px; font-weight:700; background:var(--paper); display:flex; align-items:center; gap:6px;}
.flow-step .n{background:var(--ink); color:#fff; border-radius:50%; width:18px; height:18px; display:inline-flex; align-items:center; justify-content:center; font-size:10px;}
.flow-step.coral{background:var(--ink); color:#fff;}
.flow-arrow{color:var(--gray-text); font-weight:700;}
.flow-result{font-size:13.5px; line-height:1.5; color:var(--gray-text); margin:0;}
.flow-result b{color:var(--ink);}

.ia-areas{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:20px;}
.ia-area{border-radius:18px; padding:18px 16px; background:var(--gray-bg-2);}
.ia-area .ia-label{font-family:'Poppins'; font-weight:700; font-size:14px; margin-bottom:10px;}
.ia-area ul{margin:0; padding-left:18px; font-size:12.5px; line-height:1.65; font-weight:600; color:var(--gray-text);}

.screen-inv{display:grid; grid-template-columns:repeat(5,1fr); gap:10px; margin-top:20px;}
.screen-chip{border-radius:16px; padding:14px 8px; text-align:center; background:var(--gray-bg-2); font-size:11.5px; font-weight:700;}
.screen-chip .sc-n{display:block; font-family:'Poppins'; font-weight:800; font-size:18px; color:var(--gray-text);}

.criteria-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px;}
.criteria-list li{display:flex; gap:10px; align-items:flex-start; font-size:14.5px; line-height:1.55;}
.criteria-list li::before{content:"—"; flex-shrink:0;}

.mode-toggle-note{display:inline-flex; gap:8px; font-size:11.5px; font-weight:700; color:var(--gray-text); margin-bottom:10px;}

.proto-cta{border-radius:var(--radius); padding:34px 38px; margin-top:10px; background:var(--ink); color:var(--paper); display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;}
.proto-cta h4{font-family:'Poppins'; font-weight:800; font-size:20px; margin-bottom:6px;}
.proto-cta p{margin:0; font-size:13.5px; color:#B8B8B8;}
.proto-cta .btn.primary{background:var(--paper); color:var(--ink);}

.behance-embed{display:flex; justify-content:center; margin-top:24px;}
.behance-embed iframe{border-radius:20px; max-width:100%;}

.video-frame{border-radius:20px; overflow:hidden; background:#000;}
.video-frame video{width:100%; display:block;}
.video-grid{display:grid; grid-template-columns:1.6fr 1fr; gap:24px; align-items:start; margin-top:6px;}
.video-cap{font-size:12px; font-weight:700; color:var(--gray-text); margin-top:10px;}

.walkthrough{display:grid; grid-template-columns:repeat(5,1fr); gap:16px; margin-top:24px;}
.wt-step{display:flex; flex-direction:column; gap:10px;}
.wt-img{border-radius:16px; overflow:hidden; background:var(--gray-bg-2);}
.wt-img img{width:100%; display:block;}
.wt-step h5{font-family:'Poppins'; font-weight:700; font-size:12.5px; display:flex; align-items:center; gap:6px;}
.wt-step h5 .wn{background:var(--ink); color:#fff; border-radius:50%; width:19px; height:19px; display:inline-flex; align-items:center; justify-content:center; font-size:10px; flex-shrink:0;}
.wt-step p{font-size:12px; line-height:1.45; color:var(--gray-text); margin:0;}

@media (max-width:980px){
  .hero-grid{grid-template-columns:1fr;}
  .walkthrough{grid-template-columns:repeat(3,1fr);}
  .about-grid{grid-template-columns:1fr;}
  .process{grid-template-columns:repeat(2,1fr);}
  .services-grid{grid-template-columns:1fr 1fr;}
  .work-modes{grid-template-columns:1fr;}
  .learn-grid{grid-template-columns:1fr 1fr;}
  .proj-feature-top{grid-template-columns:1fr;}
  .proj-shots{grid-template-columns:1fr 1fr;}
  .grid-cases{grid-template-columns:1fr 1fr;}
  .tools-grid{grid-template-columns:repeat(3,1fr);}
  nav ul{display:none;}
  .case-body-grid{grid-template-columns:1fr;}
  .insight-cards{grid-template-columns:1fr;}
  .persona-cols{grid-template-columns:1fr;}
  .gallery.g2{grid-template-columns:1fr;}
  .video-grid{grid-template-columns:1fr;}
  .ia-areas{grid-template-columns:1fr 1fr;}
  .screen-inv{grid-template-columns:repeat(3,1fr);}
  .foot-grid{grid-template-columns:1fr; gap:42px;}
}
@media (max-width:620px){
  .hero-photo-zone{height:400px;}
  .hero-photo-card{height:360px; width:min(320px,82%);}
  .foot-details{grid-template-columns:1fr; gap:28px;}
  .walkthrough{grid-template-columns:repeat(2,1fr);}
  .grid-cases{grid-template-columns:1fr;}
  .process{grid-template-columns:1fr 1fr;}
  .proj-shots{grid-template-columns:1fr;}
  .case-meta{gap:10px;}
  .services-grid{grid-template-columns:1fr;}
  .learn-grid{grid-template-columns:1fr;}
  .ia-areas{grid-template-columns:1fr;}
  .screen-inv{grid-template-columns:repeat(2,1fr);}
}

/* =========================================================
   JELLY CASE STUDY SYSTEM
   Applied only to project pages.
   Navbar and footer keep their original portfolio system.
   ========================================================= */


/* =========================================================
   JELLY COLOR VARIABLES
   ========================================================= */

body.jelly-case {
  --case-sage: #A7B897;
  --case-cream: #F2F0E6;
  --case-pink: #F4C7D4;
  --case-green: #3E4A34;
  --case-espresso: #4A4037;
  --case-white: #FFFDF8;
  --case-line: #DDE2D5;
  --case-muted: #758962;
  --case-body: #4D5943;
  --case-light: #D9DDCF;

  --cream: #F2F0E6;
  --sage: #A7B897;
  --pink: #F4C7D4;
  --green: #3E4A34;
  --espresso: #4A4037;
  --white: #FFFDF8;
  --line: rgba(62, 74, 52, 0.18);
  --radius: 28px;
}


/* =========================================================
   OTHER PROJECT COLOR THEMES
   ========================================================= */

body.fynzo {
  --case-sage: #EDE9FE;
  --case-cream: #FAF9FF;
  --case-pink: #C9B8FF;
  --case-green: #2D1765;
  --case-espresso: #2D1765;
  --case-white: #FAF9FF;
  --case-line: #EDE9FE;
  --case-muted: #6B5A91;
  --case-body: #2D1765;
  --case-light: #EDE9FE;
  --case-accent: #7C3AED;
}

body.levelup {
  --case-sage: #FBE4DF;
  --case-cream: #FFF9F5;
  --case-pink: #F5B6A9;
  --case-green: #111111;
  --case-espresso: #111111;
  --case-white: #FFF9F5;
  --case-line: #FBE4DF;
  --case-muted: #7A7563;
  --case-body: #111111;
  --case-light: #FBE4DF;
  --case-accent: #E4573D;
}

body.itze {
  --case-sage: #EDE7F7;
  --case-cream: #FFF8E7;
  --case-pink: #C8B8EA;
  --case-green: #19152A;
  --case-espresso: #19152A;
  --case-white: #FFF8E7;
  --case-line: #EDE7F7;
  --case-muted: #766A83;
  --case-body: #19152A;
  --case-light: #EDE7F7;
  --case-accent: #B7D34B;
}

body.lumi-store {
  --case-sage: #F4E7D3;
  --case-cream: #FFF9F2;
  --case-pink: #E6C59D;
  --case-green: #2B2118;
  --case-espresso: #2B2118;
  --case-white: #FFF9F2;
  --case-line: #F4E7D3;
  --case-muted: #7C6856;
  --case-body: #2B2118;
  --case-light: #F4E7D3;
  --case-accent: #C58A45;
}

body.karina-backery {
  --case-sage: #E7EBD9;
  --case-cream: #FFF7E8;
  --case-pink: #D9B88C;
  --case-green: #2B2A1F;
  --case-espresso: #2B2A1F;
  --case-white: #FFF7E8;
  --case-line: #E7EBD9;
  --case-muted: #6C7058;
  --case-body: #2B2A1F;
  --case-light: #E7EBD9;
  --case-accent: #6F7B4B;
}

body.arami {
  --case-sage: #E2EBF8;
  --case-cream: #FFF6D8;
  --case-pink: #F4C542;
  --case-green: #18233A;
  --case-espresso: #18233A;
  --case-white: #FFF6D8;
  --case-line: #E2EBF8;
  --case-muted: #62779C;
  --case-body: #18233A;
  --case-light: #E2EBF8;
  --case-accent: #2F5DA8;
}

body.lemon-game {
  --case-sage: #FFF2B8;
  --case-cream: #FFF8D8;
  --case-pink: #A8D86E;
  --case-green: #2E3A24;
  --case-espresso: #2E3A24;
  --case-white: #FFF8D8;
  --case-line: #FFF2B8;
  --case-muted: #6D704E;
  --case-body: #2E3A24;
  --case-light: #FFF2B8;
  --case-accent: #F2C94C;
}

body.big-burguers {
  --case-sage: #F7DFD9;
  --case-cream: #FFF4E8;
  --case-pink: #F5C16C;
  --case-green: #24110F;
  --case-espresso: #24110F;
  --case-white: #FFF4E8;
  --case-line: #F7DFD9;
  --case-muted: #7A554C;
  --case-body: #24110F;
  --case-light: #F7DFD9;
  --case-accent: #C62828;
}


/* =========================================================
   BASE JELLY PAGE
   ========================================================= */

body.case-jelly-layout {
  margin: 0;
  background: var(--case-cream);
  color: var(--case-green);
  font-family: "DM Sans", Arial, sans-serif;
  line-height: 1.55;
  --radius: 28px;
}

body.case-jelly-layout main {
  overflow: hidden;
}

body.case-jelly-layout img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}

body.case-jelly-layout a {
  color: inherit;
  text-decoration: none;
}

body.case-jelly-layout .wrap {
  width: min(1400px, calc(100% - 14vw));
  max-width: 1400px;
  margin: 0 auto;
}


/* =========================================================
   HERO
   ========================================================= */

body.case-jelly-layout .case-hero {
  min-height: 100vh;
  padding: 145px 0 80px;
  background: var(--case-cream);
}

body.case-jelly-layout .case-hero > .wrap {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  column-gap: 6vw;
  align-items: center;
}

body.case-jelly-layout .breadcrumb {
  grid-column: 1 / -1;
  margin: 0 0 35px;
  color: var(--case-muted);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

body.case-jelly-layout .breadcrumb a {
  color: var(--case-green);
}

body.case-jelly-layout .case-title-row {
  grid-column: 1;
  grid-row: 2;
  margin: 0 0 22px;
  align-self: end;
}

body.case-jelly-layout .case-title-row h1 {
  margin: 0;
  font-family: "Manrope", sans-serif;
  font-size: clamp(72px, 9vw, 150px);
  line-height: 0.82;
  letter-spacing: -0.085em;
  font-weight: 800;
  color: var(--case-green);
}

body.case-jelly-layout .case-hero > .wrap > .hero-sub {
  grid-column: 1;
  grid-row: 3;
  max-width: 560px;
  margin: 0 0 24px 8px !important;
  font-size: 18px;
  color: var(--case-espresso);
}

body.case-jelly-layout .case-meta {
  grid-column: 1;
  grid-row: 4;
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin: 0;
  max-width: 600px;
}

body.case-jelly-layout .case-meta div {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 7px;
  padding: 9px 15px;
  border: 1px solid rgba(62, 74, 52, 0.18);
  border-radius: 100px;
  background: rgba(255, 253, 248, 0.58);
}

body.case-jelly-layout .case-meta span {
  color: var(--case-muted);
  font-size: 9px;
  letter-spacing: 0.12em;
}

body.case-jelly-layout .case-meta b {
  font-family: "DM Sans", sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: var(--case-green);
}

body.case-jelly-layout .case-cover {
  grid-column: 2;
  grid-row: 2 / span 3;
  margin: 0;
  overflow: hidden;
  border-radius: 36px;
  background: var(--case-white);
  box-shadow: 0 30px 70px rgba(62, 74, 52, 0.12);
}

body.case-jelly-layout .case-cover img {
  width: 100%;
  height: auto;
  min-height: 0;
  max-height: none;
  object-fit: contain;
}


/* =========================================================
   HERO BUTTONS
   ========================================================= */

body.case-jelly-layout .hero-ctas {
  grid-column: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin: 0 0 25px;
}

body.case-jelly-layout .hero-ctas + .case-cover {
  grid-row: 2 / span 4;
}

body.case-jelly-layout .hero-ctas .btn {
  padding: 11px 18px;
  border-radius: 100px;
  font-size: 11px;
  letter-spacing: 0.04em;
}

body.case-jelly-layout .hero-ctas .btn.primary {
  background: var(--case-green);
  color: var(--case-cream);
}

body.case-jelly-layout .hero-ctas .btn.ghost {
  border: 1px solid var(--case-green);
  color: var(--case-green);
  background: transparent;
}


/* =========================================================
   SECTIONS
   ========================================================= */

body.case-jelly-layout .case-section {
  position: relative;
  padding: 120px 0;
  margin: 0;
  border: 0;
}

body.case-jelly-layout .case-section > .wrap {
  display: block;
}

body.case-jelly-layout .case-section:nth-of-type(2n) {
  background: var(--case-sage);
}

body.case-jelly-layout .case-section:nth-of-type(3n) {
  background: var(--case-white);
}

body.case-jelly-layout .case-section:nth-of-type(4n) {
  background: var(--case-pink);
}

body.case-jelly-layout .case-section:nth-of-type(5n) {
  background: var(--case-cream);
}

body.case-jelly-layout .case-section .stepnum {
  margin: 0 0 18px;
  font-family: "DM Sans", sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--case-muted);
}

body.case-jelly-layout .case-section h2 {
  max-width: 1000px;
  margin: 0;
  font-family: "Manrope", sans-serif;
  font-size: clamp(45px, 6vw, 88px);
  line-height: 0.98;
  letter-spacing: -0.055em;
  color: var(--case-green);
}

body.case-jelly-layout .case-section h2 em {
  color: var(--case-muted);
}

body.case-jelly-layout .case-body-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7vw;
  margin-top: 55px;
  align-items: start;
}

body.case-jelly-layout .case-body-grid.single {
  grid-template-columns: 1fr;
  max-width: 900px;
}

body.case-jelly-layout .case-text p {
  max-width: 650px;
  margin: 0 0 25px;
  color: var(--case-espresso);
  font-size: 17px;
  line-height: 1.6;
}

body.case-jelly-layout .case-text strong {
  color: var(--case-green);
}


/* =========================================================
   CHIPS
   ========================================================= */

body.case-jelly-layout .chiplist {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 28px;
}

body.case-jelly-layout .chip {
  padding: 8px 14px;
  border: 1px solid var(--case-green);
  border-radius: 100px;
  background: transparent;
  color: var(--case-green);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

body.case-jelly-layout .chip.on {
  background: var(--case-green);
  color: var(--case-cream);
}


/* =========================================================
   INSIGHT CARDS
   ========================================================= */

body.case-jelly-layout .insight-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 10px;
}

body.case-jelly-layout .insight-card {
  display: flex;
  min-height: 180px;
  padding: 30px;
  flex-direction: column;
  justify-content: flex-end;
  border: 1px solid rgba(62, 74, 52, 0.2);
  border-radius: 28px;
  background: rgba(255, 253, 248, 0.55);
}

body.case-jelly-layout .insight-card .ic-num {
  font-family: "Manrope", sans-serif;
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--case-muted);
}

body.case-jelly-layout .insight-card p {
  margin: 25px 0 0;
  color: var(--case-body);
  font-size: 15px;
  line-height: 1.5;
}


/* =========================================================
   SPECIAL CARDS
   ========================================================= */

body.case-jelly-layout .persona-card,
body.case-jelly-layout .warn-card,
body.case-jelly-layout .flow-card,
body.case-jelly-layout .ia-area,
body.case-jelly-layout .screen-chip,
body.case-jelly-layout .compare-col {
  border: 1px solid rgba(62, 74, 52, 0.18);
  border-radius: 28px;
  background: rgba(255, 253, 248, 0.55);
}

body.case-jelly-layout .persona-card {
  padding: 30px;
}

body.case-jelly-layout .flow-card {
  padding: 25px;
  margin-bottom: 18px;
}

body.case-jelly-layout .ia-area {
  padding: 22px;
}

body.case-jelly-layout .screen-chip {
  padding: 18px 10px;
}

body.case-jelly-layout .warn-card {
  background: var(--case-green);
  color: var(--case-cream);
}


/* =========================================================
   GALLERIES
   ========================================================= */

body.case-jelly-layout .gallery {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  margin-top: 60px;
}

body.case-jelly-layout .gallery.g2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

body.case-jelly-layout .gallery.wide {
  grid-template-columns: 1fr;
}

body.case-jelly-layout .gallery img {
  width: 100%;
  height: auto;
  min-height: 0;
  max-height: none;
  border-radius: 24px;
  background: var(--case-white);
  object-fit: contain;
}

body.case-jelly-layout .gallery img:first-child {
  min-height: 0;
}

body.case-jelly-layout .gallery.wide img {
  max-height: none;
}

body.case-jelly-layout .gallery.contain-tall img {
  object-fit: contain;
  background: var(--case-white);
}

body.case-jelly-layout .compare-grid {
  gap: 18px;
}

body.case-jelly-layout .compare-frame {
  background: var(--case-white);
}


/* =========================================================
   WALKTHROUGH / SPECIALIZED COMPONENTS
   ========================================================= */

body.case-jelly-layout .walkthrough {
  display: grid;
  gap: 18px;
  margin-top: 60px;
}

body.case-jelly-layout .wt-img {
  border-radius: 24px;
  background: var(--case-white);
}

body.case-jelly-layout .wt-img img {
  border-radius: 24px;
}

body.case-jelly-layout .wt-step h5 {
  font-family: "Manrope", sans-serif;
  font-size: 13px;
}

body.case-jelly-layout .video-frame {
  border-radius: 28px;
}

body.case-jelly-layout .proto-cta {
  border-radius: 28px;
  background: var(--case-green);
  color: var(--case-cream);
}

body.case-jelly-layout .proto-cta .btn.primary {
  background: var(--case-cream);
  color: var(--case-green);
}


/* =========================================================
   NEXT PROJECT
   ========================================================= */

body.case-jelly-layout .next-project {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 30px;
  margin: 0;
  padding: 70px 7vw;
  border-radius: 0;
  background: var(--case-sage);
  color: var(--case-green);
}

body.case-jelly-layout .next-project .np-label {
  color: var(--case-muted);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

body.case-jelly-layout .next-project h3 {
  margin: 0;
  font-family: "Manrope", sans-serif;
  font-size: clamp(45px, 6vw, 82px);
  line-height: 0.95;
  letter-spacing: -0.055em;
  color: var(--case-green);
}

body.case-jelly-layout .next-project .arrow {
  display: none;
}

body.case-jelly-layout .next-project-cta {
  padding: 12px 18px;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}


/* =========================================================
   JELLY HTML SCOPED SYSTEM
   ========================================================= */

body.case-jelly-layout .section {
  position: relative;
  padding: 120px 7vw;
}

body.case-jelly-layout .eyebrow {
  margin: 0 0 18px;
  color: var(--case-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}


/* =========================================================
   JELLY HERO
   ========================================================= */

body.case-jelly-layout .hero {
  min-height: 100vh;
  padding: 150px 7vw 80px;
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 6vw;
  align-items: center;
  background: var(--case-cream);
}

body.case-jelly-layout .hero-copy {
  max-width: 650px;
}

body.case-jelly-layout .hero h1 {
  margin: 0;
  font-family: "Manrope", sans-serif;
  font-size: clamp(90px, 15vw, 220px);
  line-height: 0.78;
  letter-spacing: -0.09em;
  font-weight: 800;
  color: var(--case-green);
}

body.case-jelly-layout .hero h1 span {
  color: var(--case-pink);
}

body.case-jelly-layout .hero-subtitle {
  margin: 24px 0 26px 8px;
  color: var(--case-green);
  font-size: clamp(22px, 3vw, 40px);
  letter-spacing: 0.28em;
  text-transform: lowercase;
}

body.case-jelly-layout .hero-description {
  max-width: 540px;
  color: var(--case-espresso);
  font-size: 18px;
}

body.case-jelly-layout .hero-tags,
body.case-jelly-layout .pack-list {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 28px;
}

body.case-jelly-layout .hero-tags span,
body.case-jelly-layout .pack-list span {
  padding: 8px 14px;
  border: 1px solid var(--case-green);
  border-radius: 100px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

body.case-jelly-layout .hero-image {
  position: relative;
}

body.case-jelly-layout .hero-image img {
  width: 100%;
  max-height: 720px;
  border-radius: 36px;
  object-fit: cover;
}

body.case-jelly-layout .floating-note {
  position: absolute;
  right: -20px;
  bottom: 28px;
  padding: 18px 22px;
  border-radius: 20px;
  background: var(--case-pink);
  color: var(--case-green);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  transform: rotate(4deg);
}

body.case-jelly-layout .section-number {
  position: absolute;
  top: 72px;
  left: 3vw;
  color: var(--case-muted);
  font-size: 11px;
  letter-spacing: 0.15em;
}


/* =========================================================
   INTRO
   ========================================================= */

body.case-jelly-layout .intro {
  background: var(--case-white);
}

body.case-jelly-layout .intro-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10vw;
  align-items: start;
}

body.case-jelly-layout h2 {
  margin: 0;
  font-family: "Manrope", sans-serif;
  font-size: clamp(45px, 6vw, 88px);
  line-height: 0.98;
  letter-spacing: -0.055em;
  color: var(--case-green);
}

body.case-jelly-layout h2 em {
  font-style: normal;
  color: var(--case-muted);
}

body.case-jelly-layout footer h2,
body.case-jelly-layout footer h2 em {
  color: #fff8ed;
}

body.case-jelly-layout .body-copy {
  max-width: 580px;
  padding-top: 42px;
  color: var(--case-espresso);
  font-size: 17px;
}

body.case-jelly-layout .body-copy p {
  margin: 0 0 25px;
}


/* =========================================================
   CONCEPT
   ========================================================= */

body.case-jelly-layout .concept {
  background: var(--case-sage);
}

body.case-jelly-layout .concept .eyebrow,
body.case-jelly-layout .ux .eyebrow {
  color: var(--case-green);
}

body.case-jelly-layout .concept-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 70px;
}

body.case-jelly-layout .concept-card {
  display: flex;
  min-height: 300px;
  padding: 30px;
  flex-direction: column;
  justify-content: flex-end;
  border: 1px solid rgba(62, 74, 52, 0.2);
  border-radius: var(--radius);
  background: rgba(255, 253, 248, 0.55);
}

body.case-jelly-layout .concept-card > span {
  margin-bottom: auto;
  font-size: 12px;
}

body.case-jelly-layout .concept-card h3 {
  margin: 0 0 12px;
  font-family: "Manrope", sans-serif;
  font-size: 40px;
  letter-spacing: -0.04em;
}

body.case-jelly-layout .concept-card p {
  margin: 0;
  color: var(--case-body);
}

body.case-jelly-layout .quote {
  max-width: 850px;
  margin: 80px auto 0;
  text-align: center;
  font-family: "Manrope", sans-serif;
  font-size: clamp(24px, 3.3vw, 42px);
  font-weight: 700;
  line-height: 1.15;
}

body.case-jelly-layout .quote span {
  display: block;
  font-size: 80px;
  line-height: 0.2;
}


/* =========================================================
   UX
   ========================================================= */

body.case-jelly-layout .ux {
  background: var(--case-cream);
}

body.case-jelly-layout .section-heading {
  max-width: 900px;
}

body.case-jelly-layout .section-intro {
  max-width: 550px;
  margin: 30px 0 0;
  color: var(--case-espresso);
  font-size: 17px;
}

body.case-jelly-layout .journey {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
  margin: 90px 0;
}

body.case-jelly-layout .journey-line {
  position: absolute;
  top: 35px;
  right: 8%;
  left: 8%;
  border-top: 1px dashed rgba(62, 74, 52, 0.45);
}

body.case-jelly-layout .journey-step {
  position: relative;
  text-align: center;
}

body.case-jelly-layout .journey-step b {
  display: grid;
  width: 70px;
  height: 70px;
  margin: 0 auto 18px;
  place-items: center;
  border: 6px solid var(--case-cream);
  border-radius: 50%;
  outline: 1px solid rgba(62, 74, 52, 0.2);
  background: var(--case-sage);
  font-size: 13px;
}

body.case-jelly-layout .journey-step:nth-child(4n) b {
  background: var(--case-pink);
}

body.case-jelly-layout .journey-step span {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

body.case-jelly-layout .journey-step small {
  color: var(--case-muted);
}

body.case-jelly-layout .ux-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
}

body.case-jelly-layout .ux-point {
  padding: 35px;
  background: var(--case-cream);
}

body.case-jelly-layout .ux-point > span {
  font-size: 11px;
  letter-spacing: 0.12em;
}

body.case-jelly-layout .ux-point h3 {
  margin: 30px 0 8px;
  font-family: "Manrope", sans-serif;
  font-size: 27px;
}

body.case-jelly-layout .ux-point p {
  margin: 0;
  color: var(--case-espresso);
}


/* =========================================================
   BRANDING
   ========================================================= */

body.case-jelly-layout .branding {
  background: var(--case-white);
}

body.case-jelly-layout .brand-showcase {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 24px;
  margin-top: 70px;
}

body.case-jelly-layout .brand-logo-card {
  display: grid;
  padding: 8vw 4vw;
  place-items: center;
  border-radius: var(--radius);
  background: var(--case-sage);
}

body.case-jelly-layout .brand-logo-card img {
  width: 100%;
  max-width: 720px;
  height: auto;
  object-fit: contain;
}

body.case-jelly-layout .brand-text {
  padding: 50px;
  border-radius: var(--radius);
  background: var(--case-cream);
  color: var(--case-espresso);
  font-size: 20px;
}

body.case-jelly-layout .mini-symbol {
  display: grid;
  width: 100px;
  height: 100px;
  margin-top: 60px;
  place-items: center;
  border-radius: 50%;
  background: var(--case-sage);
  color: var(--case-white);
  font-family: "Manrope", sans-serif;
  font-size: 55px;
  font-weight: 800;
}


/* =========================================================
   PALETTE
   ========================================================= */

body.case-jelly-layout .palette {
  display: grid;
  grid-template-columns: 0.65fr 1.35fr;
  gap: 50px;
  margin-top: 70px;
  align-items: end;
}

body.case-jelly-layout .palette h3 {
  margin: 0;
  font-family: "Manrope", sans-serif;
  font-size: 32px;
  line-height: 1.05;
}

body.case-jelly-layout .palette h3 em {
  font-style: normal;
  color: var(--case-muted);
  font-weight: 400;
}

body.case-jelly-layout .swatches {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}

body.case-jelly-layout .swatch {
  display: flex;
  height: 210px;
  padding: 16px;
  flex-direction: column;
  justify-content: flex-end;
  border-radius: 20px;
}

body.case-jelly-layout .swatch span {
  font-size: 11px;
  font-weight: 700;
}

body.case-jelly-layout .swatch small {
  margin-top: 4px;
  font-size: 10px;
}

body.case-jelly-layout .swatch-sage,
body.case-jelly-layout .sage {
  background: var(--case-sage);
}

body.case-jelly-layout .swatch-cream,
body.case-jelly-layout .cream {
  border: 1px solid var(--line);
  background: var(--case-cream);
}

body.case-jelly-layout .swatch-pink,
body.case-jelly-layout .pink {
  background: var(--case-pink);
}

body.case-jelly-layout .swatch-green,
body.case-jelly-layout .green {
  background: var(--case-green);
  color: var(--case-white);
}

body.case-jelly-layout .swatch-espresso,
body.case-jelly-layout .espresso {
  background: var(--case-espresso);
  color: var(--case-white);
}


/* =========================================================
   ART / PHOTOGRAPHY
   ========================================================= */

body.case-jelly-layout .art {
  background: var(--case-green);
  color: var(--case-cream);
}

body.case-jelly-layout .art .eyebrow {
  color: var(--case-sage);
}

body.case-jelly-layout .art h2 {
  color: var(--case-cream);
}

body.case-jelly-layout .art h2 em {
  color: var(--case-pink);
}

body.case-jelly-layout .art .section-intro {
  color: var(--case-light);
}

body.case-jelly-layout .photo-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 18px;
  margin-top: 70px;
}

body.case-jelly-layout .photo {
  position: relative;
  margin: 0;
}

body.case-jelly-layout .photo img {
  width: 100%;
  height: 100%;
  min-height: 430px;
  border-radius: 24px;
  object-fit: cover;
}

body.case-jelly-layout .photo-large {
  grid-row: span 2;
}

body.case-jelly-layout .photo-large img {
  min-height: 900px;
}

body.case-jelly-layout .photo-wide {
  grid-column: span 2;
}

body.case-jelly-layout .photo-wide img {
  max-height: 580px;
}

body.case-jelly-layout .photo figcaption {
  position: absolute;
  bottom: 18px;
  left: 18px;
  padding: 8px 12px;
  border-radius: 100px;
  background: rgba(242, 240, 230, 0.88);
  color: var(--case-green);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}


/* =========================================================
   PACKAGING
   ========================================================= */

body.case-jelly-layout .packaging {
  display: grid;
  grid-template-columns: 0.7fr 1.3fr;
  gap: 7vw;
  align-items: center;
  background: var(--case-pink);
}

body.case-jelly-layout .packaging h2 em {
  color: var(--case-green);
}

body.case-jelly-layout .packaging-copy p:not(.eyebrow) {
  max-width: 470px;
  color: var(--case-body);
  font-size: 17px;
}

body.case-jelly-layout .packaging-image img {
  border-radius: 32px;
  box-shadow: 0 25px 60px rgba(62, 74, 52, 0.12);
}


/* =========================================================
   SOCIAL
   ========================================================= */

body.case-jelly-layout .social {
  background: var(--case-white);
}

body.case-jelly-layout .social-layout {
  display: grid;
  grid-template-columns: 0.75fr 1.25fr;
  gap: 8vw;
  align-items: center;
  margin-top: 70px;
}

body.case-jelly-layout .phone-frame {
  max-width: 410px;
  padding: 13px;
  justify-self: center;
  border-radius: 44px;
  background: var(--case-green);
  box-shadow: 0 30px 70px rgba(62, 74, 52, 0.16);
}

body.case-jelly-layout .phone-frame img {
  border-radius: 32px;
}

body.case-jelly-layout .phone-top {
  width: 80px;
  height: 20px;
  margin: -2px auto 5px;
  border-radius: 0 0 20px 20px;
  background: var(--case-green);
}

body.case-jelly-layout .social-copy {
  color: var(--case-espresso);
  font-size: 18px;
}

body.case-jelly-layout .social-stats {
  display: flex;
  gap: 50px;
  margin: 50px 0;
}

body.case-jelly-layout .social-stats strong {
  display: block;
  color: var(--case-green);
  font-family: "Manrope", sans-serif;
  font-size: 35px;
}

body.case-jelly-layout .social-stats span {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

body.case-jelly-layout .social-copy blockquote {
  margin: 0;
  padding: 30px;
  border-radius: 22px;
  background: var(--case-sage);
  font-family: "Manrope", sans-serif;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.05;
}

body.case-jelly-layout .social-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 18px;
  align-items: start;
  margin-top: 90px;
}

body.case-jelly-layout .social-grid img {
  border-radius: 24px;
}


/* =========================================================
   DIGITAL
   ========================================================= */

body.case-jelly-layout .digital {
  background: var(--case-sage);
}

body.case-jelly-layout .digital-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 70px;
}

body.case-jelly-layout .digital-card {
  min-height: 300px;
  padding: 32px;
  border-radius: var(--radius);
  background: rgba(255, 253, 248, 0.5);
}

body.case-jelly-layout .digital-card span {
  font-size: 11px;
  letter-spacing: 0.15em;
}

body.case-jelly-layout .digital-card h3 {
  margin-top: 100px;
  font-family: "Manrope", sans-serif;
  font-size: 30px;
  line-height: 1;
}

body.case-jelly-layout .digital-card p {
  color: var(--case-body);
}


/* =========================================================
   FINAL
   ========================================================= */

body.case-jelly-layout .final {
  display: grid;
  grid-template-columns: 1.35fr 0.65fr;
  gap: 5vw;
  align-items: center;
  padding-top: 100px;
  padding-bottom: 100px;
  background: var(--case-cream);
}

body.case-jelly-layout .final-image img {
  border-radius: 28px;
}

body.case-jelly-layout .final-copy {
  padding: 20px 0;
}

body.case-jelly-layout .final-copy h2 {
  font-size: clamp(48px, 5vw, 76px);
}

body.case-jelly-layout .final-copy > p:not(.eyebrow):not(.final-quote):not(.credit) {
  color: var(--case-espresso);
  font-size: 17px;
}

body.case-jelly-layout .final-line {
  height: 1px;
  margin: 45px 0;
  background: var(--line);
}

body.case-jelly-layout .final-quote {
  font-family: "Manrope", sans-serif;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.25;
}

body.case-jelly-layout .credit {
  margin-top: 60px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
}


/* =========================================================
   REVEAL ANIMATION
   ========================================================= */

body.case-jelly-layout .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.8s ease,
    transform 0.8s ease;
}

body.case-jelly-layout .reveal.visible {
  opacity: 1;
  transform: none;
}


/* =========================================================
   IMAGE VIEWER / LIGHTBOX
   ========================================================= */

body.case-jelly-layout .zoomable-image {
  cursor: zoom-in;
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

body.case-jelly-layout .zoomable-image:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 32px rgba(24, 15, 56, 0.16);
}

body.case-jelly-layout .zoomable-image:focus-visible {
  outline: 3px solid var(--case-green);
  outline-offset: 4px;
}

body.lightbox-open {
  overflow: hidden;
}

.image-lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  padding: 32px;
  place-items: center;
  background: rgba(13, 9, 27, 0.92);
}

.image-lightbox.is-open {
  display: grid;
}

.image-lightbox figure {
  max-width: min(1100px, 82vw);
  max-height: 88vh;
  margin: 0;
  text-align: center;
}

.image-lightbox figure img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 82vh;
  border-radius: 14px;
  object-fit: contain;
  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.45);
}

.image-lightbox figcaption {
  margin-top: 12px;
  color: #fff;
  font-size: 13px;
}

.image-lightbox button {
  position: absolute;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 50%;
  color: #fff;
  background: rgba(255, 255, 255, 0.14);
  font-size: 34px;
  line-height: 1;
  cursor: pointer;
}

.image-lightbox button:hover {
  background: var(--case-green);
}

.lightbox-close {
  top: 24px;
  right: 24px;
}

.lightbox-prev {
  top: calc(50% - 24px);
  left: 24px;
}

.lightbox-next {
  top: calc(50% - 24px);
  right: 24px;
}


/* =========================================================
   OTHER PROJECTS USING CASE SYSTEM
   ========================================================= */

body.case-jelly-layout:not(.jelly-case) .case-hero .case-title-row h1,
body.case-jelly-layout:not(.jelly-case) .case-section h2,
body.case-jelly-layout:not(.jelly-case) .next-project h3 {
  color: var(--case-green);
}

body.case-jelly-layout:not(.jelly-case) .case-section h2 em,
body.case-jelly-layout:not(.jelly-case) .next-project .np-label,
body.case-jelly-layout:not(.jelly-case) .case-meta span {
  color: var(--case-accent);
}

body.case-jelly-layout:not(.jelly-case) .case-hero .btn.primary,
body.case-jelly-layout:not(.jelly-case) .proto-cta {
  background: var(--case-accent);
  color: var(--case-white);
}

body.case-jelly-layout:not(.jelly-case) .case-hero .btn.ghost {
  border-color: var(--case-accent);
  color: var(--case-accent);
}

body.case-jelly-layout:not(.jelly-case) .case-section:nth-of-type(2n) {
  background: var(--case-sage);
}

body.case-jelly-layout:not(.jelly-case) .case-section:nth-of-type(3n) {
  background: var(--case-white);
}

body.case-jelly-layout:not(.jelly-case) .case-section:nth-of-type(4n) {
  background: var(--case-pink);
}

body.case-jelly-layout:not(.jelly-case) .case-section:nth-of-type(5n) {
  background: var(--case-cream);
}

body.case-jelly-layout:not(.jelly-case) .chip.on {
  background: var(--case-accent);
  color: var(--case-white);
}

body.case-jelly-layout:not(.jelly-case) .warn-card {
  background: var(--case-green);
  color: var(--case-white);
}

body.case-jelly-layout:not(.jelly-case) .next-project {
  background: var(--case-green);
  color: var(--case-white);
}

body.case-jelly-layout:not(.jelly-case) .next-project h3 {
  color: var(--case-white);
}

body.case-jelly-layout:not(.jelly-case) .gallery img,
body.case-jelly-layout:not(.jelly-case) .compare-frame,
body.case-jelly-layout:not(.jelly-case) .wt-img {
  background: var(--case-white);
}

body.case-jelly-layout:not(.jelly-case) .insight-card {
  background: var(--case-white);
}

body.case-jelly-layout:not(.jelly-case) .insight-card .ic-num {
  color: var(--case-accent);
}

body.case-jelly-layout:not(.jelly-case) .persona-card,
body.case-jelly-layout:not(.jelly-case) .flow-card,
body.case-jelly-layout:not(.jelly-case) .ia-area,
body.case-jelly-layout:not(.jelly-case) .screen-chip,
body.case-jelly-layout:not(.jelly-case) .compare-col {
  border-color: var(--case-line);
}


/* =========================================================
   PROJECT NAVIGATION
   ========================================================= */

body.case-jelly-layout header {
  background: rgba(255, 255, 255, 0.92);
  border-bottom: 1px solid rgba(26, 20, 45, 0.06);
}

body.case-jelly-layout .navrow {
  max-width: 1440px;
  padding: 18px 32px;
}

body.case-jelly-layout nav ul {
  gap: 2px;
  padding: 4px;
  background: #f0eaff;
}

body.case-jelly-layout nav a {
  padding: 10px 18px;
  color: var(--ink);
}

body.case-jelly-layout .navcta {
  padding: 12px 24px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--violet), var(--pink));
  color: #fff;
  box-shadow: 0 8px 18px rgba(124,58,237,.2);
}

body.case-jelly-layout .navcta:hover {
  background: linear-gradient(135deg, var(--pink), var(--violet));
}


/* =========================================================
   TABLET — 980px
   ========================================================= */

@media (max-width: 980px) {

  body.case-jelly-layout .case-hero {
    padding-top: 125px;
  }

  body.case-jelly-layout .case-hero > .wrap {
    grid-template-columns: 1fr;
    gap: 0;
  }

  body.case-jelly-layout .breadcrumb,
  body.case-jelly-layout .case-title-row,
  body.case-jelly-layout .case-hero > .wrap > .hero-sub,
  body.case-jelly-layout .case-meta,
  body.case-jelly-layout .hero-ctas {
    grid-column: 1;
    grid-row: auto;
  }

  body.case-jelly-layout .case-title-row {
    margin-bottom: 20px;
  }

  body.case-jelly-layout .case-cover {
    grid-column: 1;
    grid-row: auto;
    margin-top: 30px;
  }

  body.case-jelly-layout .case-cover img {
    min-height: 0;
  }

  body.case-jelly-layout .case-body-grid {
    grid-template-columns: 1fr;
  }

  body.case-jelly-layout .insight-cards {
    grid-template-columns: 1fr 1fr;
  }

  body.case-jelly-layout .gallery,
  body.case-jelly-layout .gallery.g2 {
    grid-template-columns: 1fr;
  }

  body.case-jelly-layout .hero {
    grid-template-columns: 1fr;
    padding: 120px 6vw 70px;
    min-height: auto;
  }

  body.case-jelly-layout .hero h1 {
    font-size: 28vw;
  }

  body.case-jelly-layout .hero-image {
    margin-top: 20px;
  }

  body.case-jelly-layout .floating-note {
    right: 8px;
  }

  body.case-jelly-layout .intro-grid,
  body.case-jelly-layout .brand-showcase,
  body.case-jelly-layout .social-layout,
  body.case-jelly-layout .final,
  body.case-jelly-layout .packaging {
    grid-template-columns: 1fr;
  }

  body.case-jelly-layout .body-copy {
    padding-top: 0;
  }

  body.case-jelly-layout .concept-cards,
  body.case-jelly-layout .ux-grid,
  body.case-jelly-layout .digital-grid {
    grid-template-columns: 1fr;
  }

  body.case-jelly-layout .journey {
    grid-template-columns: repeat(3, 1fr);
    gap: 35px 10px;
  }

  body.case-jelly-layout .journey-line {
    display: none;
  }

  body.case-jelly-layout .palette {
    grid-template-columns: 1fr;
  }

  body.case-jelly-layout .swatches {
    grid-template-columns: repeat(2, 1fr);
  }

  body.case-jelly-layout .swatch {
    height: 150px;
  }

  body.case-jelly-layout .photo-grid {
    grid-template-columns: 1fr;
  }

  body.case-jelly-layout .photo-large {
    grid-row: auto;
  }

  body.case-jelly-layout .photo-large img {
    min-height: 500px;
  }

  body.case-jelly-layout .photo-wide {
    grid-column: auto;
  }

  body.case-jelly-layout .social-grid {
    grid-template-columns: 1fr;
  }

  body.case-jelly-layout .final {
    padding-top: 70px;
  }

  body.case-jelly-layout .section {
    padding: 85px 6vw;
  }
}


/* =========================================================
   MOBILE — 700px
   ========================================================= */

@media (max-width: 700px) {

  body.case-jelly-layout .navrow {
    padding: 15px 20px;
  }

  body.case-jelly-layout .navcta {
    padding: 10px 15px;
    font-size: 12px;
  }

  body.case-jelly-layout .gallery.g2 {
    grid-template-columns: 1fr;
  }

  .image-lightbox {
    padding: 20px;
  }

  .image-lightbox figure {
    max-width: 100%;
  }

  .image-lightbox button {
    width: 42px;
    height: 42px;
    font-size: 30px;
  }

  .lightbox-prev {
    left: 12px;
  }

  .lightbox-next {
    right: 12px;
  }

  .lightbox-close {
    top: 12px;
    right: 12px;
  }
}


/* =========================================================
   MOBILE — 620px
   ========================================================= */

@media (max-width: 620px) {

  body.case-jelly-layout .wrap {
    width: calc(100% - 12vw);
  }

  body.case-jelly-layout .case-hero {
    padding: 110px 0 50px;
  }

  body.case-jelly-layout .case-title-row h1 {
    font-size: clamp(62px, 18vw, 105px);
  }

  body.case-jelly-layout .case-meta {
    flex-direction: column;
    align-items: flex-start;
  }

  body.case-jelly-layout .case-section {
    padding: 85px 0;
  }

  body.case-jelly-layout .case-section h2 {
    font-size: clamp(43px, 12vw, 65px);
  }

  body.case-jelly-layout .case-text p {
    font-size: 16px;
  }

  body.case-jelly-layout .insight-cards {
    grid-template-columns: 1fr;
  }

  body.case-jelly-layout .next-project {
    padding: 55px 6vw;
  }

  body.case-jelly-layout .hero-subtitle {
    font-size: 17px;
    letter-spacing: 0.16em;
  }

  body.case-jelly-layout .hero-description {
    font-size: 16px;
  }

  body.case-jelly-layout h2 {
    font-size: 43px;
  }

  body.case-jelly-layout .journey {
    grid-template-columns: repeat(2, 1fr);
  }

  body.case-jelly-layout .social-stats {
    gap: 25px;
  }

  body.case-jelly-layout .social-copy blockquote {
    font-size: 24px;
  }

  body.case-jelly-layout .site-footer {
    flex-direction: column;
    gap: 8px;
  }
}


/* =========================================================
   MOBILE — 560px
   ========================================================= */

@media (max-width: 560px) {

  body.case-jelly-layout .hero {
    padding: 100px 6vw 60px;
  }

  body.case-jelly-layout .hero h1 {
    font-size: 25vw;
  }

  body.case-jelly-layout .hero-image img {
    border-radius: 24px;
  }

  body.case-jelly-layout .floating-note {
    right: 5px;
    bottom: 15px;
    padding: 14px 16px;
    font-size: 12px;
  }

  body.case-jelly-layout .concept-card {
    min-height: 240px;
  }

  body.case-jelly-layout .brand-text {
    padding: 30px;
    font-size: 17px;
  }

  body.case-jelly-layout .social-stats {
    flex-wrap: wrap;
  }

  body.case-jelly-layout .photo img {
    min-height: 300px;
  }

  body.case-jelly-layout .photo-large img {
    min-height: 400px;
  }

  body.case-jelly-layout .swatches {
    grid-template-columns: 1fr 1fr;
  }

  body.case-jelly-layout .swatch {
    height: 130px;
  }

  body.case-jelly-layout .final-copy h2 {
    font-size: 43px;
  }
}
/* =========================================================
   REPANCHO — CASE STUDY SYSTEM
   Scoped exclusively to .repancho-case
   ========================================================= */

body.repancho-case {
  --rp-red: #E53935;
  --rp-yellow: #F2C230;
  --rp-black: #2A1D0E;
  --rp-cream: #FFF3E0;
  --rp-green: #7CA72B;
  --rp-white: #FFFFFF;
  --rp-muted: #756B5F;
  --rp-line: rgba(42, 29, 14, 0.15);

  background: var(--rp-cream);
  color: var(--rp-black);
  font-family: "Work Sans", sans-serif;
  line-height: 1.55;
}

body.repancho-case main {
  overflow: hidden;
}

body.repancho-case img {
  display: block;
  max-width: 100%;
}

body.repancho-case a {
  color: inherit;
  text-decoration: none;
}

body.repancho-case .wrap {
  width: min(1400px, calc(100% - 14vw));
  max-width: 1400px;
  margin: 0 auto;
}


/* =========================================================
   REPANCHO — NAVBAR
   ========================================================= */

body.repancho-case header {
  background: rgba(255, 243, 224, 0.94);
  border-bottom: 1px solid rgba(42, 29, 14, 0.08);
}

body.repancho-case .navrow {
  max-width: 1440px;
}

body.repancho-case .logo {
  color: var(--rp-black);
}

body.repancho-case nav ul {
  background: rgba(255, 255, 255, 0.65);
}

body.repancho-case nav a {
  color: var(--rp-black);
}

body.repancho-case nav a.navActive {
  background: var(--rp-red);
  color: #fff;
}

body.repancho-case .navcta {
  background: var(--rp-red);
  color: #fff;
}

body.repancho-case .navcta:hover {
  background: var(--rp-black);
}


/* =========================================================
   REPANCHO — HERO
   ========================================================= */

body.repancho-case .repancho-hero {
  min-height: 100vh;
  padding: 145px 0 90px;
  background:
    radial-gradient(
      circle at 12% 20%,
      rgba(229, 57, 53, 0.12),
      transparent 25%
    ),
    radial-gradient(
      circle at 88% 72%,
      rgba(124, 167, 43, 0.12),
      transparent 25%
    ),
    var(--rp-cream);
}

body.repancho-case .repancho-hero > .wrap {
  display: block;
}

body.repancho-case .repancho-hero .breadcrumb {
  margin-bottom: 42px;
  color: var(--rp-muted);
}

body.repancho-case .repancho-hero .breadcrumb a {
  color: var(--rp-black);
}

body.repancho-case .repancho-hero .case-title-row {
  margin-bottom: 35px;
  align-items: flex-end;
}

body.repancho-case .repancho-hero .case-title-row h1 {
  margin: 0;
  font-family: "Poppins", sans-serif;
  font-size: clamp(75px, 13vw, 190px);
  line-height: 0.78;
  letter-spacing: -0.085em;
  font-weight: 900;
  color: var(--rp-red);
}

body.repancho-case .repancho-hero .case-meta {
  margin: 0 0 35px;
}

body.repancho-case .repancho-hero .case-meta div {
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid var(--rp-line);
}

body.repancho-case .repancho-hero .case-meta span {
  color: var(--rp-muted);
}

body.repancho-case .repancho-hero .case-meta b {
  color: var(--rp-black);
}

body.repancho-case .repancho-hero .hero-sub {
  max-width: 700px;
  margin: 0 0 45px !important;
  color: var(--rp-black);
  font-size: clamp(20px, 2.2vw, 30px);
  line-height: 1.25;
  font-weight: 500;
}

body.repancho-case .repancho-hero-image {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 38px;
  background: var(--rp-white);
  box-shadow: 0 30px 80px rgba(42, 29, 14, 0.15);
}

body.repancho-case .repancho-hero-image img {
  width: 100%;
  height: auto;
  object-fit: cover;
}


/* =========================================================
   REPANCHO — GENERAL SECTIONS
   ========================================================= */

body.repancho-case .case-section {
  position: relative;
  padding: 120px 0;
}

body.repancho-case .case-section .stepnum {
  margin: 0 0 18px;
  color: var(--rp-red);
  font-family: "Space Grotesk", sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

body.repancho-case .case-section h2 {
  max-width: 1000px;
  margin: 0;
  color: var(--rp-black);
  font-family: "Poppins", sans-serif;
  font-size: clamp(45px, 6vw, 90px);
  line-height: 0.94;
  letter-spacing: -0.06em;
  font-weight: 800;
}

body.repancho-case .case-section h2 em {
  color: var(--rp-red);
  font-style: normal;
}

body.repancho-case .case-text p {
  color: #443A30;
  font-size: 17px;
  line-height: 1.7;
}


/* =========================================================
   REPANCHO — INTRO / IDEA
   ========================================================= */

body.repancho-case .repancho-intro {
  background: var(--rp-white);
}

body.repancho-case .repancho-intro .case-body-grid {
  margin-top: 55px;
}

body.repancho-case .repancho-intro .case-text strong {
  color: var(--rp-red);
}


/* =========================================================
   REPANCHO — BRAND STRATEGY
   ========================================================= */

body.repancho-case .repancho-strategy {
  background: var(--rp-yellow);
}

body.repancho-case .repancho-strategy .case-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 65px;
}

body.repancho-case .repancho-strategy .case-card {
  min-height: 280px;
  padding: 30px;
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(42, 29, 14, 0.15);
  box-shadow: none;
  overflow: visible;
}

body.repancho-case .repancho-strategy .case-card:hover {
  transform: translateY(-5px);
}

body.repancho-case .repancho-strategy .case-card h3 {
  margin: 0 0 15px;
  color: var(--rp-red);
  font-family: "Poppins", sans-serif;
  font-size: 30px;
}

body.repancho-case .repancho-strategy .case-card p {
  margin: 0;
  color: var(--rp-black);
  font-size: 15px;
  line-height: 1.6;
}

body.repancho-case .repancho-verbal {
  margin-top: 60px;
  padding: 45px;
  border-radius: 32px;
  background: var(--rp-black);
  color: var(--rp-cream);
}

body.repancho-case .repancho-verbal h3 {
  margin: 0 0 12px;
  color: var(--rp-yellow);
  font-size: 35px;
}

body.repancho-case .repancho-verbal p {
  max-width: 800px;
  margin: 0;
  font-size: 18px;
  line-height: 1.6;
}


/* =========================================================
   REPANCHO — BRAND EXPERIENCE
   ========================================================= */

body.repancho-case .repancho-experience {
  background: var(--rp-cream);
}

body.repancho-case .repancho-experience-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 6vw;
  align-items: center;
  margin-top: 65px;
}

body.repancho-case .repancho-experience-grid .case-image-wide {
  overflow: hidden;
  border-radius: 30px;
}

body.repancho-case .repancho-experience-grid .case-image-wide img {
  width: 100%;
  height: auto;
}

body.repancho-case .repancho-experience-grid .case-text {
  max-width: 620px;
}

body.repancho-case .repancho-experience-grid .case-text h3 {
  margin: 0 0 18px;
  color: var(--rp-red);
  font-family: "Poppins", sans-serif;
  font-size: 34px;
}


/* =========================================================
   REPANCHO — VISUAL IDENTITY
   ========================================================= */

body.repancho-case .repancho-visual {
  background: var(--rp-white);
}

body.repancho-case .repancho-logo-showcase {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  margin-top: 65px;
}

body.repancho-case .repancho-logo-showcase > div {
  display: grid;
  place-items: center;
  min-height: 430px;
  padding: 50px;
  border-radius: 30px;
  overflow: hidden;
}

body.repancho-case .repancho-logo-showcase .logo-main {
  background: var(--rp-yellow);
}

body.repancho-case .repancho-logo-showcase .brand-main {
  background: var(--rp-cream);
}

body.repancho-case .repancho-logo-showcase img {
  width: 100%;
  max-width: 650px;
  height: auto;
  object-fit: contain;
}


/* =========================================================
   REPANCHO — COLOR SYSTEM
   ========================================================= */

body.repancho-case .repancho-palette {
  background: var(--rp-black);
  color: var(--rp-cream);
}

body.repancho-case .repancho-palette h2 {
  color: var(--rp-cream);
}

body.repancho-case .repancho-palette .stepnum {
  color: var(--rp-yellow);
}

body.repancho-case .repancho-palette-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  margin-top: 65px;
}

body.repancho-case .repancho-color {
  min-height: 260px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  border-radius: 22px;
}

body.repancho-case .repancho-color strong {
  font-family: "Poppins", sans-serif;
  font-size: 16px;
}

body.repancho-case .repancho-color span {
  margin-top: 4px;
  font-family: "Space Grotesk", sans-serif;
  font-size: 11px;
  font-weight: 600;
}

body.repancho-case .rp-color-red {
  background: var(--rp-red);
  color: #fff;
}

body.repancho-case .rp-color-yellow {
  background: var(--rp-yellow);
  color: var(--rp-black);
}

body.repancho-case .rp-color-black {
  background: var(--rp-black);
  color: var(--rp-cream);
  border: 1px solid rgba(255,255,255,.2);
}

body.repancho-case .rp-color-cream {
  background: var(--rp-cream);
  color: var(--rp-black);
}

body.repancho-case .rp-color-green {
  background: var(--rp-green);
  color: #fff;
}


/* =========================================================
   REPANCHO — TYPOGRAPHY
   ========================================================= */

body.repancho-case .repancho-type {
  background: var(--rp-cream);
}

body.repancho-case .repancho-type-display {
  margin-top: 65px;
  padding: 55px;
  border-radius: 32px;
  background: var(--rp-red);
  color: #fff;
}

body.repancho-case .repancho-type-display span {
  display: block;
  margin-bottom: 12px;
  font-family: "Space Grotesk", sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

body.repancho-case .repancho-type-display strong {
  display: block;
  font-family: "Poppins", sans-serif;
  font-size: clamp(55px, 9vw, 125px);
  line-height: .85;
  letter-spacing: -.07em;
}

body.repancho-case .repancho-type-secondary {
  margin-top: 20px;
  padding: 40px;
  border-radius: 28px;
  background: var(--rp-yellow);
}

body.repancho-case .repancho-type-secondary h3 {
  margin: 0 0 12px;
  font-size: 28px;
}

body.repancho-case .repancho-type-secondary p {
  max-width: 700px;
  margin: 0;
  font-size: 16px;
}

body.repancho-case .repancho-pattern {
  margin-top: 20px;
  min-height: 180px;
  border-radius: 28px;
  background:
    radial-gradient(circle at 20px 20px, var(--rp-red) 0 8px, transparent 9px),
    radial-gradient(circle at 60px 60px, var(--rp-yellow) 0 8px, transparent 9px),
    var(--rp-cream);
  background-size: 80px 80px;
}


/* =========================================================
   REPANCHO — ART DIRECTION
   ========================================================= */

body.repancho-case .repancho-art {
  background: var(--rp-red);
  color: #fff;
}

body.repancho-case .repancho-art h2 {
  color: #fff;
}

body.repancho-case .repancho-art .stepnum {
  color: var(--rp-yellow);
}

body.repancho-case .repancho-art-grid {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 18px;
  margin-top: 65px;
}

body.repancho-case .repancho-art-grid .case-image-card {
  overflow: hidden;
  border-radius: 28px;
  background: var(--rp-cream);
}

body.repancho-case .repancho-art-grid img {
  width: 100%;
  height: auto;
}


/* =========================================================
   REPANCHO — MENU
   ========================================================= */

body.repancho-case .repancho-menu {
  background: var(--rp-yellow);
}

body.repancho-case .repancho-menu-image {
  margin-top: 65px;
  overflow: hidden;
  border-radius: 32px;
  background: var(--rp-white);
}

body.repancho-case .repancho-menu-image img {
  width: 100%;
}


/* =========================================================
   REPANCHO — PACKAGING
   ========================================================= */

body.repancho-case .repancho-packaging {
  background: var(--rp-white);
}

body.repancho-case .repancho-packaging-grid {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: 6vw;
  align-items: center;
  margin-top: 65px;
}

body.repancho-case .repancho-packaging-grid .case-image-wide {
  overflow: hidden;
  border-radius: 30px;
}

body.repancho-case .repancho-packaging-grid img {
  width: 100%;
}


/* =========================================================
   REPANCHO — DELIVERY
   ========================================================= */

body.repancho-case .repancho-delivery {
  background: var(--rp-green);
  color: #fff;
}

body.repancho-case .repancho-delivery h2 {
  color: #fff;
}

body.repancho-case .repancho-delivery .stepnum {
  color: var(--rp-yellow);
}

body.repancho-case .repancho-delivery-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 65px;
}

body.repancho-case .repancho-delivery-grid .case-image-card {
  overflow: hidden;
  border-radius: 30px;
  background: var(--rp-cream);
}

body.repancho-case .repancho-delivery-grid img {
  width: 100%;
}


/* =========================================================
   REPANCHO — UNIFORMS
   ========================================================= */

body.repancho-case .repancho-uniform {
  background: var(--rp-cream);
}

body.repancho-case .repancho-uniform-grid {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 20px;
  margin-top: 65px;
}

body.repancho-case .repancho-uniform-grid .case-image-card {
  overflow: hidden;
  border-radius: 30px;
  background: var(--rp-white);
}

body.repancho-case .repancho-uniform-grid img {
  width: 100%;
}


/* =========================================================
   REPANCHO — DIGITAL EXPERIENCE
   ========================================================= */

body.repancho-case .repancho-digital {
  background: var(--rp-white);
}

body.repancho-case .repancho-digital-grid {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: 6vw;
  align-items: center;
  margin-top: 65px;
}

body.repancho-case .repancho-mobile-frame {
  max-width: 430px;
  margin: 0 auto;
  padding: 14px;
  border-radius: 42px;
  background: var(--rp-black);
  box-shadow: 0 30px 70px rgba(42, 29, 14, .18);
}

body.repancho-case .repancho-mobile-frame img {
  width: 100%;
  border-radius: 30px;
}

body.repancho-case .repancho-digital-copy {
  max-width: 600px;
}

body.repancho-case .repancho-digital-copy h3 {
  margin: 0 0 18px;
  color: var(--rp-red);
  font-family: "Poppins", sans-serif;
  font-size: 34px;
}


/* =========================================================
   REPANCHO — FINAL SYSTEM
   ========================================================= */

body.repancho-case .repancho-final {
  background: var(--rp-black);
  color: var(--rp-cream);
}

body.repancho-case .repancho-final h2 {
  color: var(--rp-cream);
}

body.repancho-case .repancho-final .stepnum {
  color: var(--rp-yellow);
}

body.repancho-case .repancho-final-grid {
  display: grid;
  grid-template-columns: 1.25fr .75fr;
  gap: 5vw;
  align-items: center;
  margin-top: 65px;
}

body.repancho-case .repancho-final-grid .case-image-wide {
  overflow: hidden;
  border-radius: 30px;
}

body.repancho-case .repancho-final-grid img {
  width: 100%;
}

body.repancho-case .repancho-final-copy {
  max-width: 500px;
}

body.repancho-case .repancho-final-copy h3 {
  margin: 0 0 18px;
  color: var(--rp-yellow);
  font-size: 34px;
}

body.repancho-case .repancho-final-copy p {
  color: rgba(255, 243, 224, .82);
}


/* =========================================================
   REPANCHO — NEXT PROJECT
   ========================================================= */

body.repancho-case .next-project {
  border-radius: 0;
  margin: 0;
  padding: 80px 7vw;
  background: var(--rp-yellow);
  color: var(--rp-black);
}

body.repancho-case .next-project .np-label {
  color: var(--rp-red);
}

body.repancho-case .next-project h3 {
  color: var(--rp-black);
}

body.repancho-case .next-project:hover {
  background: var(--rp-red);
}

body.repancho-case .next-project:hover h3,
body.repancho-case .next-project:hover .np-label {
  color: #fff;
}


/* =========================================================
   REPANCHO — LIGHTBOX
   ========================================================= */

body.repancho-case .image-lightbox button:hover {
  background: var(--rp-red);
}


/* =========================================================
   REPANCHO — RESPONSIVE 980px
   ========================================================= */

@media (max-width: 980px) {

  body.repancho-case .repancho-hero {
    padding-top: 125px;
  }

  body.repancho-case .repancho-hero .case-title-row h1 {
    font-size: clamp(70px, 15vw, 125px);
  }

  body.repancho-case .repancho-strategy .case-grid-3 {
    grid-template-columns: 1fr;
  }

  body.repancho-case .repancho-experience-grid,
  body.repancho-case .repancho-packaging-grid,
  body.repancho-case .repancho-digital-grid,
  body.repancho-case .repancho-final-grid {
    grid-template-columns: 1fr;
  }

  body.repancho-case .repancho-logo-showcase {
    grid-template-columns: 1fr;
  }

  body.repancho-case .repancho-palette-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  body.repancho-case .repancho-art-grid {
    grid-template-columns: 1fr;
  }

  body.repancho-case .repancho-delivery-grid,
  body.repancho-case .repancho-uniform-grid {
    grid-template-columns: 1fr;
  }

  body.repancho-case .repancho-final-copy {
    max-width: 700px;
  }
}


/* =========================================================
   REPANCHO — RESPONSIVE 700px
   ========================================================= */

@media (max-width: 700px) {

  body.repancho-case .wrap {
    width: calc(100% - 12vw);
  }

  body.repancho-case .repancho-hero {
    padding: 110px 0 60px;
  }

  body.repancho-case .repancho-hero .case-title-row {
    margin-bottom: 25px;
  }

  body.repancho-case .repancho-hero .case-title-row h1 {
    font-size: clamp(65px, 20vw, 105px);
  }

  body.repancho-case .repancho-hero .hero-sub {
    font-size: 19px;
  }

  body.repancho-case .repancho-hero-image {
    border-radius: 24px;
  }

  body.repancho-case .case-section {
    padding: 85px 0;
  }

  body.repancho-case .case-section h2 {
    font-size: clamp(42px, 12vw, 65px);
  }

  body.repancho-case .repancho-verbal {
    padding: 30px;
    border-radius: 24px;
  }

  body.repancho-case .repancho-logo-showcase > div {
    min-height: 300px;
    padding: 30px;
    border-radius: 24px;
  }

  body.repancho-case .repancho-palette-grid {
    grid-template-columns: 1fr 1fr;
  }

  body.repancho-case .repancho-color {
    min-height: 170px;
  }

  body.repancho-case .repancho-type-display {
    padding: 35px 25px;
    border-radius: 24px;
  }

  body.repancho-case .repancho-type-display strong {
    font-size: 18vw;
  }

  body.repancho-case .repancho-type-secondary {
    padding: 30px;
  }

  body.repancho-case .repancho-pattern {
    min-height: 130px;
  }

  body.repancho-case .repancho-mobile-frame {
    max-width: 330px;
  }

  body.repancho-case .next-project {
    padding: 55px 6vw;
  }
}


/* =========================================================
   REPANCHO — RESPONSIVE 560px
   ========================================================= */

@media (max-width: 560px) {

  body.repancho-case .repancho-hero .case-title-row h1 {
    font-size: 22vw;
  }

  body.repancho-case .repancho-hero .case-meta {
    flex-direction: column;
    align-items: flex-start;
  }

  body.repancho-case .repancho-palette-grid {
    grid-template-columns: 1fr 1fr;
    gap: 7px;
  }

  body.repancho-case .repancho-color {
    min-height: 140px;
    padding: 14px;
  }

  body.repancho-case .repancho-color strong {
    font-size: 13px;
  }

  body.repancho-case .repancho-color span {
    font-size: 9px;
  }

  body.repancho-case .repancho-verbal h3,
  body.repancho-case .repancho-experience-grid .case-text h3,
  body.repancho-case .repancho-digital-copy h3,
  body.repancho-case .repancho-final-copy h3 {
    font-size: 27px;
  }
}