/* TAKE A LUKE STUDIO — design system
   Paper / Ultramarine / Poppy red / Tape yellow */
:root{
  --paper:#F6F3EA;
  --ink:#16169B;
  --ink-deep:#0D0D6E;
  --red:#E8380D;
  --tape:#F2DE2E;
  --hair:rgba(22,22,155,.25);
  --max:1320px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  background:var(--paper);color:var(--ink);
  font-family:'Archivo',sans-serif;font-size:17px;line-height:1.55;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
@media(pointer:fine){body{cursor:none} body a,body button,body summary{cursor:none}}
::selection{background:var(--red);color:var(--paper)}
a{color:inherit}
img{display:block;max-width:100%}
.wrap{max-width:var(--max);margin:0 auto;padding:0 5vw}
.label{font-weight:700;font-size:11px;letter-spacing:.22em;text-transform:uppercase}
.note{
  font-family:'Caveat',cursive;font-weight:600;color:var(--red);
  font-size:clamp(18px,2.2vw,27px);line-height:1.05;transform:rotate(-3deg);display:inline-block;
}
/* language toggle: html[data-l] controls visibility */
html[data-l="pl"] .en{display:none !important}
html[data-l="en"] .pl{display:none !important}

/* ---------- CURSOR ---------- */
.cursor,.cursor-ring{position:fixed;top:0;left:0;pointer-events:none;z-index:999;display:none}
@media(pointer:fine){.cursor,.cursor-ring{display:block}}
.cursor{width:8px;height:8px;background:var(--red);border-radius:50%;transform:translate(-50%,-50%)}
.cursor-ring{
  width:34px;height:34px;border:1.5px solid var(--red);border-radius:50%;
  transform:translate(-50%,-50%);transition:width .25s,height .25s,background .25s,opacity .25s;
}
body.hovering .cursor-ring{width:64px;height:64px;background:rgba(232,56,13,.12)}
body.on-proj .cursor-ring{opacity:0}
body.on-proj .cursor{width:60px;height:60px}
.cursor .cue{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:var(--paper);font-weight:900;font-size:10px;letter-spacing:.1em;opacity:0;transition:opacity .2s;
}
body.on-proj .cursor .cue{opacity:1}

/* ---------- NAV ---------- */
nav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  background:color-mix(in srgb,var(--paper) 86%, transparent);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--hair);
}
.nav-in{max-width:var(--max);margin:0 auto;padding:14px 5vw;display:flex;align-items:center;justify-content:space-between;gap:16px}
.logo{font-family:'Anton';font-size:20px;text-decoration:none;letter-spacing:.02em;white-space:nowrap}
.logo em{color:var(--red);font-style:normal}
.nav-links{display:flex;gap:26px;list-style:none;align-items:center}
.nav-links a{text-decoration:none;font-weight:500;font-size:14px;position:relative}
.nav-links a::after{content:"";position:absolute;left:0;bottom:-3px;height:2px;width:0;background:var(--red);transition:width .25s}
.nav-links a:hover::after,.nav-links a:focus-visible::after{width:100%}
.lang-btn{
  border:2px solid var(--ink);background:transparent;color:var(--ink);
  font-family:'Archivo';font-weight:900;font-size:12px;letter-spacing:.1em;
  padding:6px 10px;transition:background .2s,color .2s;
}
.lang-btn:hover{background:var(--ink);color:var(--paper)}
@media(max-width:700px){.nav-links{gap:14px}.nav-links a{font-size:13px}.nav-links .hide-m{display:none}}

/* ---------- BUTTONS ---------- */
.btn{
  font-weight:700;font-size:14px;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;
  padding:16px 26px;border:2px solid var(--ink);background:var(--ink);color:var(--paper);
  display:inline-block;transition:box-shadow .2s;will-change:transform;text-align:center;
}
.btn:hover{box-shadow:5px 5px 0 var(--red)}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.invert{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.btn.tape-btn{background:var(--tape);color:var(--ink);border-color:var(--ink)}
.btn.tape-btn:hover{box-shadow:5px 5px 0 var(--ink)}

/* ---------- HERO ---------- */
header.hero{min-height:100svh;position:relative;display:flex;align-items:center;padding:110px 0 50px;overflow:hidden}
.crop{position:absolute;width:26px;height:26px;border:2px solid var(--ink);opacity:.55;z-index:5}
.crop.tl{top:84px;left:3.5vw;border-right:0;border-bottom:0}
.crop.tr{top:84px;right:3.5vw;border-left:0;border-bottom:0}
.crop.bl{bottom:20px;left:3.5vw;border-right:0;border-top:0}
.crop.br{bottom:20px;right:3.5vw;border-left:0;border-top:0}
.hero-wrap{position:relative;width:100%;max-width:var(--max);margin:0 auto;padding:0 5vw}
.hero-kicker{display:flex;align-items:center;gap:14px;margin-bottom:2.2vh;flex-wrap:wrap}
.hero-kicker .line{flex:0 0 48px;height:2px;background:var(--red)}
h1{
  font-family:'Anton';font-weight:400;text-transform:uppercase;
  font-size:clamp(54px,11.5vw,168px);line-height:.92;letter-spacing:.004em;
  user-select:none;
}
h1 .row{display:block;white-space:nowrap}
h1 .row.hollow{color:transparent;-webkit-text-stroke:2.5px var(--ink)}
@media(max-width:640px){h1 .row.hollow{-webkit-text-stroke:1.5px var(--ink)}}
h1 .ch{display:inline-block;transition:transform 1s cubic-bezier(.16,1.2,.3,1),opacity .8s;will-change:transform;transform-origin:50% 80%}
@media(pointer:fine){h1 .ch{cursor:none}}
body.hero-live h1 .ch{transition:opacity .8s}
.scattered h1 .ch{transform:translate(var(--dx),var(--dy)) rotate(var(--dr)) scale(var(--ds));opacity:.2}
.hero-sub{margin-top:4vh;display:flex;flex-wrap:wrap;gap:30px;align-items:flex-end;justify-content:space-between}
.hero-sub p{font-size:clamp(16px,1.5vw,20px);font-weight:500;max-width:46ch}
.hero-sub p strong{background:var(--ink);color:var(--paper);padding:0 .25em;font-weight:700}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap}
.hero-note{position:absolute;right:6vw;bottom:6vh;z-index:3}
@media(max-width:880px){.hero-note{display:none}}
.hl-tape{
  background:linear-gradient(104deg,transparent 1.5%,var(--tape) 2.5%,var(--tape) 97%,transparent 98%);
  padding:0 .2em;
}

/* ---------- STICKER ---------- */
.sticker{
  display:inline-block;background:var(--tape);color:var(--ink);
  font-weight:900;font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  padding:8px 14px;transform:rotate(-4deg);
  box-shadow:2px 3px 0 rgba(13,13,110,.25);
  transition:transform .2s;
}
.sticker:hover{transform:rotate(-1deg) scale(1.04)}

/* ---------- MARQUEE ---------- */
.marquee{border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);overflow:hidden;padding:13px 0;background:var(--paper)}
.marquee-track{display:flex;width:max-content;will-change:transform}
.marquee span{font-family:'Anton';font-size:clamp(22px,3vw,34px);text-transform:uppercase;white-space:nowrap;padding:0 .6em}
.marquee i{color:var(--red);font-style:normal}

/* ---------- SECTIONS ---------- */
section{padding:13vh 0}
.sec-head{display:flex;align-items:baseline;gap:20px;margin-bottom:6vh;border-bottom:1px solid var(--hair);padding-bottom:18px;flex-wrap:wrap}
h2{font-family:'Anton';font-weight:400;text-transform:uppercase;font-size:clamp(38px,6.6vw,84px);line-height:1;overflow:hidden}
h2 .ln{display:inline-block;transform:translateY(110%);transition:transform .8s cubic-bezier(.2,.9,.25,1)}
.in h2 .ln{transform:none}
.reveal{opacity:0;transform:translateY(34px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.9,.25,1)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  h2 .ln{transform:none;transition:none}
}

/* ---------- SITUATIONS ---------- */
.sit-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
@media(max-width:920px){.sit-grid{grid-template-columns:1fr}}
.sit-card{
  border:2px solid var(--ink);background:var(--paper);padding:30px 26px;
  position:relative;text-decoration:none;display:block;
  transition:transform .25s,box-shadow .25s;
}
.sit-card:nth-child(1){transform:rotate(-.8deg)}
.sit-card:nth-child(3){transform:rotate(.9deg)}
.sit-card:hover{transform:rotate(0) translateY(-8px);box-shadow:8px 8px 0 var(--red)}
.sit-card .q{font-family:'Anton';font-size:clamp(20px,2.2vw,27px);line-height:1.15;text-transform:none;margin-bottom:16px}
.sit-card .d{color:var(--ink-deep);font-size:15px;margin-bottom:22px}
.sit-card .go{font-weight:900;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--red)}
.sit-card::before{
  content:"";position:absolute;top:-12px;left:50%;transform:translateX(-50%) rotate(-2deg);
  width:84px;height:24px;background:var(--tape);opacity:.9;
}

/* ---------- PRICING ---------- */
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;align-items:stretch}
@media(max-width:920px){.price-grid{grid-template-columns:1fr;max-width:560px;margin:0 auto}}
.price-card{
  border:2px solid var(--ink);background:var(--paper);padding:34px 28px;position:relative;
  display:flex;flex-direction:column;gap:0;
}
.price-card.feat{border-width:3px;box-shadow:10px 10px 0 var(--ink)}
.price-card .pk-sticker{
  position:absolute;top:-16px;right:18px;transform:rotate(4deg);
  background:var(--tape);font-weight:900;font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;padding:7px 12px;box-shadow:2px 3px 0 rgba(13,13,110,.25);
}
.price-card h3{font-family:'Anton';font-weight:400;text-transform:uppercase;font-size:clamp(26px,2.6vw,36px);line-height:1}
.price-card .tag{margin-top:8px;color:var(--ink-deep);font-weight:500;font-size:15px;min-height:44px}
.price-card ul{list-style:none;margin:22px 0;border-top:1px solid var(--hair)}
.price-card li{padding:11px 0 11px 26px;border-bottom:1px solid var(--hair);font-size:15px;position:relative}
.price-card li::before{content:"→";position:absolute;left:0;color:var(--red);font-weight:700}
.price-card .price{
  font-family:'Anton';font-size:clamp(26px,2.4vw,34px);margin:auto 0 18px;
  background:linear-gradient(100deg,transparent 1%,var(--tape) 3%,var(--tape) 97%,transparent 99%);
  display:inline-block;padding:2px 10px;width:fit-content;transform:rotate(-1.2deg);
}
.price-card .price small{font-family:'Archivo';font-weight:700;font-size:13px;letter-spacing:.05em}
.price-foot{margin-top:5vh;text-align:center;color:var(--ink-deep);font-weight:500}

/* ---------- PROCESS ---------- */
.proc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:2px solid var(--ink)}
@media(max-width:920px){.proc-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.proc-grid{grid-template-columns:1fr}}
.proc-step{padding:30px 24px;border-right:2px solid var(--ink);position:relative}
.proc-step:last-child{border-right:0}
@media(max-width:920px){.proc-step:nth-child(2){border-right:0}.proc-step:nth-child(-n+2){border-bottom:2px solid var(--ink)}}
@media(max-width:560px){.proc-step{border-right:0;border-bottom:2px solid var(--ink)}.proc-step:last-child{border-bottom:0}}
.proc-step .num{font-family:'Anton';font-size:42px;color:transparent;-webkit-text-stroke:2px var(--red);line-height:1}
.proc-step h3{font-family:'Anton';font-weight:400;text-transform:uppercase;font-size:22px;margin:14px 0 10px}
.proc-step p{font-size:15px;color:var(--ink-deep)}

/* ---------- PROJECTS LIST ---------- */
.projects-sec{background:var(--ink);color:var(--paper);position:relative}
.projects-sec .sec-head{border-color:rgba(246,243,234,.3)}
.projects-sec .label{color:#ff6a44}
.proj-list{list-style:none;counter-reset:proj;border-top:1px solid rgba(246,243,234,.35);position:relative;z-index:2}
.proj-list a{
  counter-increment:proj;
  display:grid;grid-template-columns:64px 1fr auto;gap:3vw;align-items:center;
  padding:24px 10px;border-bottom:1px solid rgba(246,243,234,.35);
  text-decoration:none;transition:background .2s,color .2s,padding-left .25s;
}
.proj-list a::before{content:counter(proj,decimal-leading-zero);font-weight:700;font-size:13px;opacity:.6;letter-spacing:.1em}
.proj-list .pname{font-family:'Anton';font-weight:400;text-transform:uppercase;font-size:clamp(22px,3.8vw,50px);line-height:1.05}
.proj-list .pmeta{display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.proj-list .pyear{font-weight:700;font-size:14px;letter-spacing:.12em}
.proj-list .ptag{font-size:11px;letter-spacing:.16em;text-transform:uppercase;opacity:.65}
.proj-list a:hover,.proj-list a:focus-visible{background:var(--paper);color:var(--ink);padding-left:28px}
.proj-list a:hover::before{color:var(--red);opacity:1}
.proj-list .pthumb{display:none}
@media(max-width:880px){
  .proj-list a{grid-template-columns:84px 1fr auto}
  .proj-list a::before{display:none}
  .proj-list .pthumb{display:block;width:84px;height:62px;object-fit:cover}
}
@media(max-width:520px){.proj-list .pmeta{display:none}}
.preview{
  position:fixed;z-index:40;width:min(420px,34vw);aspect-ratio:4/3;pointer-events:none;
  opacity:0;transform:translate(-50%,-50%) rotate(0deg) scale(.9);
  transition:opacity .25s,transform .25s;overflow:hidden;
  border:3px solid var(--paper);box-shadow:10px 12px 0 rgba(0,0,0,.25);display:none;
}
@media(pointer:fine) and (min-width:881px){.preview{display:block}}
.preview img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .25s}
.preview img.on{opacity:1}
.preview.show{opacity:1;transform:translate(-50%,-50%) rotate(var(--pr,0deg)) scale(1)}

/* ---------- HUMAN ---------- */
.human-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:6vw;align-items:center}
@media(max-width:860px){.human-grid{grid-template-columns:1fr}}
.human-portrait{position:relative;max-width:420px}
.human-portrait .frame{background:var(--ink);overflow:hidden}
.human-portrait img{filter:grayscale(1) contrast(1.12) brightness(1.02);mix-blend-mode:screen;transform:scale(1.05)}
.human-portrait .note{position:absolute;bottom:-30px;right:-8px;transform:rotate(4deg)}
.human-portrait::before{
  content:"";position:absolute;top:-14px;left:24px;width:110px;height:28px;
  background:var(--tape);transform:rotate(-3deg);z-index:2;opacity:.92;
}
.human-text h3{font-family:'Anton';font-weight:400;text-transform:uppercase;font-size:clamp(26px,3.4vw,44px);line-height:1.05;margin-bottom:20px}
.human-text p{margin-bottom:16px;max-width:60ch}
.human-text .punch{font-weight:700}

/* ---------- TESTIMONIALS ---------- */
.t-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
@media(max-width:900px){.t-grid{grid-template-columns:1fr}}
.t-card{border:2px solid var(--ink);padding:28px;position:relative;background:var(--paper);transition:transform .25s,box-shadow .25s}
.t-card:nth-child(2){transform:rotate(.8deg)}
.t-card:nth-child(3){transform:rotate(-.7deg)}
.t-card:hover{transform:rotate(0) translateY(-6px);box-shadow:8px 8px 0 var(--red)}
.t-card p{font-size:17px;font-weight:500;line-height:1.5}
.t-card cite{display:block;margin-top:18px;font-style:normal;font-weight:700;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--red)}
.t-card::before{content:"“";font-family:'Anton';font-size:64px;line-height:0;position:absolute;top:34px;right:20px;color:var(--red);opacity:.25}

/* ---------- FAQ ---------- */
.faq details{border-bottom:2px solid var(--ink)}
.faq details:first-of-type{border-top:2px solid var(--ink)}
.faq summary{
  list-style:none;display:flex;justify-content:space-between;align-items:center;gap:20px;
  padding:24px 4px;font-family:'Anton';font-weight:400;text-transform:uppercase;
  font-size:clamp(17px,2.4vw,27px);line-height:1.12;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:'Archivo';font-size:34px;color:var(--red);transition:transform .25s;flex:0 0 auto}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .a{padding:0 4px 28px;max-width:68ch;color:var(--ink-deep)}

/* ---------- FOOTER ---------- */
footer{background:var(--ink);color:var(--paper);padding:13vh 0 5vh;position:relative;overflow:hidden}
.foot-grid{display:grid;grid-template-columns:1fr auto;gap:5vw;align-items:end}
@media(max-width:880px){.foot-grid{grid-template-columns:1fr}}
.foot-kicker{opacity:.75;max-width:40ch;margin-bottom:4vh}
.foot-cta-h{font-family:'Anton';font-weight:400;text-transform:uppercase;font-size:clamp(44px,9vw,124px);line-height:.95}
.foot-cta-h .hollow{color:transparent;-webkit-text-stroke:2px var(--paper);display:block}
.foot-actions{margin-top:4vh;display:flex;gap:16px;flex-wrap:wrap;align-items:center}
.foot-mail{font-weight:500;text-decoration:none;border-bottom:2px solid var(--red)}
.foot-mail:hover{color:#ff6a44}
.foot-portrait{width:clamp(180px,20vw,300px);position:relative}
.foot-portrait .frame{background:var(--ink-deep);overflow:hidden}
.foot-portrait img{filter:grayscale(1) contrast(1.1);mix-blend-mode:screen;transform:scale(1.05)}
.foot-portrait .note{position:absolute;top:-34px;right:-6px;transform:rotate(5deg);color:var(--tape)}
@media(max-width:880px){.foot-portrait{display:none}}
.foot-meta{
  margin-top:8vh;display:flex;flex-wrap:wrap;gap:24px;justify-content:space-between;
  border-top:1px solid rgba(246,243,234,.3);padding-top:24px;font-size:13px;opacity:.85;
}
.foot-meta ul{display:flex;gap:22px;list-style:none;flex-wrap:wrap}
.foot-meta a{text-decoration:none}
.foot-meta a:hover{color:#ff6a44}

/* ---------- CASE STUDY ---------- */
.case-hero{padding:150px 0 8vh}
.case-hero .back{font-weight:700;font-size:13px;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;color:var(--red)}
.case-hero h1{font-size:clamp(40px,8vw,110px);margin:24px 0 18px}
.case-hero .lead{font-size:clamp(17px,1.8vw,22px);font-weight:500;max-width:56ch}
.case-meta{display:flex;gap:30px;margin-top:26px;flex-wrap:wrap}
.case-meta div{border-left:3px solid var(--red);padding-left:14px}
.case-meta .k{font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;opacity:.7}
.case-meta .v{font-family:'Anton';font-size:20px;text-transform:uppercase}
.case-body{padding-bottom:10vh}
.case-sec{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:5vw;padding:7vh 0;border-top:1px solid var(--hair);align-items:start}
@media(max-width:860px){.case-sec{grid-template-columns:1fr}}
.case-sec h2{font-size:clamp(26px,3.6vw,46px)}
.case-sec p{color:var(--ink-deep);max-width:62ch;margin-bottom:14px}
.case-img{margin:0 0 7vh;border:2px solid var(--ink)}
/* Lottie embeds */
.lottie-box{margin:0 0 7vh;border:2px solid var(--ink);background:var(--paper);position:relative;overflow:hidden}
.lottie-box dotlottie-player,.lottie-box lottie-player{width:100%;display:block}
.lottie-box::after{
  content:attr(data-cap);position:absolute;left:0;bottom:0;
  font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink);opacity:.6;padding:8px 12px;
}
.case-next{background:var(--ink);color:var(--paper);padding:9vh 0;text-align:left}
.case-next a{text-decoration:none;display:block}
.case-next .k{font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:#ff6a44}
.case-next .n{font-family:'Anton';font-size:clamp(34px,6vw,76px);text-transform:uppercase;line-height:1;margin-top:10px;transition:color .2s}
.case-next a:hover .n{color:var(--tape)}

:focus-visible{outline:3px solid var(--red);outline-offset:3px}

/* ---------- CASE STUDY: NATIVE RESEARCH BLOCKS ---------- */
.cs-band{padding:8vh 0;border-top:1px solid var(--hair)}
.cs-band.dark{background:var(--ink);color:var(--paper);border-color:transparent}
.cs-band.dark .cs-eyebrow{color:var(--tape)}
.cs-eyebrow{font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--red);margin-bottom:14px}
.cs-h{font-family:'Anton';font-weight:400;text-transform:uppercase;font-size:clamp(28px,4.4vw,56px);line-height:1.02;margin-bottom:30px}
.cs-lead{font-size:clamp(17px,1.8vw,21px);font-weight:500;max-width:60ch;margin-bottom:10px}

/* objectives list */
.obj-list{list-style:none;counter-reset:obj;display:grid;grid-template-columns:1fr 1fr;gap:0 5vw}
@media(max-width:760px){.obj-list{grid-template-columns:1fr}}
.obj-list li{counter-increment:obj;padding:18px 0 18px 52px;border-bottom:1px solid var(--hair);position:relative;font-weight:500}
.obj-list li::before{content:counter(obj,decimal-leading-zero);position:absolute;left:0;top:18px;font-family:'Anton';font-size:18px;color:var(--red)}

/* stat trio */
.stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin:2vh 0 0}
@media(max-width:760px){.stat-row{grid-template-columns:1fr;gap:24px}}
.stat .n{font-family:'Anton';font-size:clamp(54px,7vw,92px);line-height:.9;color:var(--tape)}
.stat p{margin-top:10px;opacity:.9;max-width:30ch}

/* challenge grid */
.chal-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
@media(max-width:860px){.chal-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.chal-grid{grid-template-columns:1fr}}
.chal h4{font-family:'Anton';font-weight:400;text-transform:uppercase;font-size:19px;color:var(--red);margin-bottom:10px}
.chal.dark h4{color:#ff6a44}
.chal p{font-size:15px;opacity:.9}

/* persona card */
.persona{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.6fr);gap:5vw;align-items:start;
  border:2px solid var(--ink);padding:36px;background:var(--paper)}
@media(max-width:760px){.persona{grid-template-columns:1fr;gap:30px}}
.persona .who{text-align:center}
.persona .ava{width:120px;height:120px;border-radius:50%;background:var(--ink);margin:0 auto 16px;overflow:hidden}
.persona .ava img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05);mix-blend-mode:screen}
.persona .pname{font-family:'Anton';font-size:26px}
.persona .role{color:var(--red);font-weight:700;font-size:13px;letter-spacing:.12em;text-transform:uppercase;margin-top:4px}
.persona .facts{list-style:none;margin-top:18px;font-size:14px;display:inline-block;text-align:left}
.persona .facts li{padding:5px 0;border-bottom:1px solid var(--hair)}
.persona .facts li b{color:var(--ink-deep)}
.persona blockquote{font-family:'Caveat',cursive;font-weight:600;font-size:clamp(20px,2.4vw,30px);
  line-height:1.25;color:var(--ink);border-left:3px solid var(--red);padding-left:20px;margin:6px 0 22px}
.persona .pain{list-style:none}
.persona .pain li{padding:9px 0 9px 26px;position:relative;border-bottom:1px solid var(--hair)}
.persona .pain li::before{content:"!";position:absolute;left:4px;color:var(--red);font-weight:900}
.persona h5{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;opacity:.6;margin:0 0 6px}

/* taskflow */
.flow{display:flex;flex-wrap:wrap;align-items:stretch;gap:14px;counter-reset:fl}
.flow .node{counter-increment:fl;flex:1 1 150px;border:2px solid var(--paper);padding:18px 16px;
  display:flex;flex-direction:column;gap:6px;min-width:140px;position:relative}
.flow .node .s{font-family:'Anton';font-size:14px;color:var(--tape)}
.flow .node .t{font-weight:500;font-size:15px}
.flow .node.end{background:var(--tape);color:var(--ink);border-color:var(--tape)}
.flow .arrow{align-self:center;color:var(--tape);font-size:22px}
@media(max-width:640px){.flow{flex-direction:column}.flow .arrow{transform:rotate(90deg)}}

/* solution callout */
.solve{border:3px solid var(--tape);padding:30px;background:rgba(242,222,46,.08)}
.solve .cs-eyebrow{color:var(--tape)}
.solve p{font-size:clamp(17px,1.9vw,22px);font-weight:500;max-width:58ch}

/* ---------- PROCESS STEPPER (Rennes) ---------- */
.stepper{display:flex;align-items:stretch;gap:0;margin:3vh 0 2vh;flex-wrap:nowrap}
.step{flex:1 1 0;background:none;border:0;text-align:center;padding:0;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:14px;position:relative;opacity:.5;
  transition:opacity .3s}
.step.active,.step:hover{opacity:1}
.step .dot{width:clamp(54px,7vw,78px);height:clamp(54px,7vw,78px);border-radius:50%;
  border:2.5px solid var(--ink);display:flex;align-items:center;justify-content:center;
  background:var(--paper);transition:background .3s,transform .3s}
.step.active .dot{background:var(--tape);transform:scale(1.06)}
.cs-band.dark .step .dot{border-color:var(--paper);background:transparent}
.cs-band.dark .step.active .dot{background:var(--tape)}
.step .dot svg{width:46%;height:46%;color:var(--ink)}
.cs-band.dark .step .dot svg{color:var(--paper)}
.cs-band.dark .step.active .dot svg{color:var(--ink)}
.step .sn{font-family:'Anton';font-size:14px}
.step .st{font-weight:700;font-size:clamp(12px,1.3vw,15px);letter-spacing:.04em}
.step:not(:last-child)::after{content:"";position:absolute;top:clamp(27px,3.5vw,39px);
  left:calc(50% + clamp(34px,4vw,46px));right:calc(-50% + clamp(34px,4vw,46px));height:2px;
  background:var(--hair)}
.cs-band.dark .step:not(:last-child)::after{background:rgba(246,243,234,.3)}
.step-desc{max-width:62ch;margin:0 auto;text-align:center;min-height:80px}
.step-desc .dt{font-family:'Anton';text-transform:uppercase;font-size:clamp(20px,2.6vw,30px);margin-bottom:8px}
.step-desc .dd{font-size:clamp(15px,1.6vw,18px);opacity:.9}
@media(max-width:640px){
  .stepper{flex-wrap:wrap;gap:18px;justify-content:center}
  .step{flex:0 0 40%}
  .step:not(:last-child)::after{display:none}
}

/* research method rows */
.method{display:flex;gap:18px;align-items:flex-start;padding:20px 0;border-bottom:1px solid var(--hair)}
.cs-band.dark .method{border-color:rgba(246,243,234,.25)}
.method .mi{width:34px;height:34px;color:var(--red);flex:0 0 auto;margin-top:2px}
.cs-band.dark .method .mi{color:var(--tape)}
.method h4{font-family:'Anton';font-weight:400;text-transform:uppercase;font-size:clamp(17px,2vw,22px);margin-bottom:4px}
.method p{opacity:.88;max-width:60ch}

/* strategy tabs */
.tabs{display:flex;gap:10px;flex-wrap:wrap;margin:2vh 0 0}
.tab-btn{font-weight:700;font-size:13px;letter-spacing:.06em;text-transform:uppercase;
  padding:13px 20px;border:2px solid var(--ink);background:transparent;color:var(--ink);cursor:pointer;
  transition:background .2s,color .2s}
.tab-btn.active{background:var(--ink);color:var(--paper)}
.tab-panel{display:none;margin-top:26px;border-top:2px solid var(--ink);padding-top:26px}
.tab-panel.active{display:block}
.tab-panel ul{list-style:none}
.tab-panel li{padding:12px 0 12px 28px;border-bottom:1px solid var(--hair);position:relative;max-width:70ch}
.tab-panel li::before{content:"→";position:absolute;left:0;color:var(--red);font-weight:700}
.tab-panel .pnum{font-family:'Anton';font-size:clamp(28px,4vw,48px);color:var(--tape);
  -webkit-text-stroke:1.5px var(--ink);display:inline-block;margin-bottom:8px}

/* inline icons in case studies */
.cs-ic{width:30px;height:30px;color:var(--red);flex:0 0 auto}
.cs-band.dark .cs-ic{color:var(--tape)}
.cs-eyebrow-row{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.cs-eyebrow-row .cs-eyebrow{margin-bottom:0}

/* art-direction gallery */
.gal{display:grid;grid-template-columns:repeat(12,1fr);gap:18px;margin-top:2vh}
.gal figure{margin:0;border:2px solid var(--ink);overflow:hidden;background:var(--paper);position:relative}
.gal img,.gal dotlottie-player{width:100%;height:100%;object-fit:cover;display:block}
.gal .g-wide{grid-column:span 8}
.gal .g-half{grid-column:span 4}
.gal .g-third{grid-column:span 4}
.gal .g-two{grid-column:span 6}
.gal .g-full{grid-column:span 12}
.gal figure.tall{aspect-ratio:3/4}
.gal figure.wide{aspect-ratio:16/9}
.gal figure.sq{aspect-ratio:1/1}
.gal figcaption.gcap{position:absolute;left:0;bottom:0;background:var(--ink);color:var(--paper);
  font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding:6px 10px}
@media(max-width:760px){
  .gal{grid-template-columns:repeat(2,1fr);gap:12px}
  .gal .g-wide,.gal .g-half,.gal .g-third,.gal .g-two,.gal .g-full{grid-column:span 2}
}
.gal-placeholder{border:2px dashed var(--hair)!important;display:flex;align-items:center;justify-content:center;
  min-height:200px;color:var(--ink);opacity:.55;font-weight:600;text-align:center;padding:20px}

/* ---------- ECLIPSE MECHANISM (Expondo) ---------- */
.eclipse-band{background:#0B0B14;color:var(--paper);padding:11vh 0}
.eclipse-band .cs-eyebrow{color:var(--tape)}
.eclipse-band .cs-h{color:var(--paper)}
.eclipse-stage{display:flex;justify-content:center;align-items:center;gap:clamp(10px,3vw,40px);
  margin:5vh 0 2vh;flex-wrap:nowrap}
.phase{background:none;border:0;padding:0;display:flex;flex-direction:column;align-items:center;gap:14px;
  flex:0 0 auto;opacity:.4;transition:opacity .3s,transform .3s}
.phase.anchor{cursor:pointer;opacity:.7}
.phase.anchor.active,.phase.anchor:hover{opacity:1;transform:translateY(-4px)}
.phase svg{width:clamp(54px,9vw,104px);height:auto;display:block;filter:drop-shadow(0 0 14px rgba(242,222,46,.25))}
.phase.trans svg{width:clamp(34px,6vw,68px);filter:none}
.phase .plabel{font-weight:700;font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--tape);opacity:0;transition:opacity .3s;white-space:nowrap}
.phase.anchor.active .plabel,.phase.anchor:hover .plabel{opacity:1}
.eclipse-desc{max-width:64ch;margin:0 auto;text-align:center;min-height:96px}
.eclipse-desc .et{font-family:'Anton';text-transform:uppercase;font-size:clamp(22px,3vw,34px);color:var(--tape);margin-bottom:10px}
.eclipse-desc .ed{font-size:clamp(16px,1.7vw,19px);opacity:.92;font-weight:500}
.eclipse-hint{text-align:center;font-size:12px;letter-spacing:.14em;text-transform:uppercase;opacity:.5;margin-top:30px}
@media(max-width:640px){
  .eclipse-stage{gap:6px}
  .phase.trans{display:none}
}