:root{
  --ink:#0d0c0a;
  --ink-2:#141311;
  --bone:#ece7dd;
  --bone-2:#e2dcd0;
  --grey:#8f8a80;
  --grey-dark:#55524b;
  --line:rgba(236,231,221,.16);
  --line-dark:rgba(13,12,10,.18);
  --accent:#e83a1d;
  --disp:'Archivo',Helvetica,Arial,sans-serif;
  --mono:'Space Mono',ui-monospace,monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--ink);color:var(--bone);
  font-family:var(--disp);font-weight:400;font-stretch:100%;
  font-size:16px;line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--accent);color:var(--ink)}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-weight:900;font-stretch:118%;text-transform:uppercase;line-height:.92;letter-spacing:-.015em;text-wrap:balance}
p{text-wrap:pretty}
html[data-lang="es"] [lang="en"],html:not([data-lang="es"]) [lang="es"]{display:none!important}

/* ------- chrome ------- */
.chrome{
  position:fixed;top:0;left:0;right:0;z-index:60;
  display:flex;justify-content:space-between;align-items:center;
  padding:14px 28px;
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  border-bottom:1px solid var(--line);
  mix-blend-mode:difference;color:#ece7dd;
}
.chrome a:hover{color:#fff}
.chrome .c-mid{display:flex;gap:28px;align-items:center}
.chrome .c-tabs,.chrome .c-anch{display:flex;gap:24px}
.chrome .c-anch{border-left:1px solid rgba(236,231,221,.35);padding-left:28px}
.chrome .c-tabs a[aria-current="page"]{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
.lang-tg{background:none;border:0;cursor:pointer;color:inherit;font:inherit;letter-spacing:inherit;text-transform:inherit;padding:4px 0}
.lang-tg span{opacity:.45;transition:opacity .2s}
html:not([data-lang="es"]) .lang-tg .l-en,html[data-lang="es"] .lang-tg .l-es{opacity:1;text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
.lang-tg:hover span{opacity:1}
@media(max-width:1100px){.chrome .c-anch{display:none}}
@media(max-width:760px){
  .chrome{flex-wrap:wrap;row-gap:10px}
  .chrome .c-mid{order:3;width:100%;gap:0}
  .chrome .c-tabs{gap:22px}
}

/* ------- kickers / labels ------- */
.kicker{font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--grey);text-wrap:pretty}
.chip{
  display:inline-block;font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;
  border:1px solid currentColor;border-radius:999px;padding:5px 12px 4px;
}
.num{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--accent)}

/* ------- cover ------- */
.cover{position:relative;height:100vh;min-height:640px;overflow:hidden;display:flex;align-items:flex-end}
.cover video,.cover .cover-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.5}
.cover::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(13,12,10,.25) 0%,rgba(13,12,10,.05) 45%,rgba(13,12,10,.88) 100%)}
.cover-inner{position:relative;z-index:2;width:100%;padding:0 28px 8vh}
.cover-title{font-size:clamp(64px,14.5vw,240px);margin:12px 0 4vh}
.cover-title span{display:block}
.cover-meta{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:18px}
.cover-meta .lead{max-width:44ch;font-size:15px;color:#cfcabf}
.cover-meta .right{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;text-align:right;color:var(--grey);line-height:2}

/* ------- index ------- */
.section-pad{padding:16vh 28px}
.sec-head{display:flex;justify-content:space-between;align-items:baseline;border-bottom:1px solid var(--line);padding-bottom:16px;margin-bottom:8px}
#works .sec-head{gap:16px}
.sec-head h2{font-size:clamp(34px,5vw,72px)}
.sec-head-r{display:flex;flex-direction:column;align-items:flex-end;gap:7px}
@media(max-width:900px){
  .sec-head-triangle{flex-direction:column;align-items:flex-start;gap:16px}
}
.reel-link{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);transition:opacity .2s}
.reel-link:hover{opacity:.65;text-decoration:underline;text-underline-offset:3px}
.index-list{list-style:none}
.index-row{
  display:grid;grid-template-columns:56px 1fr 220px 160px 90px 70px;gap:20px;align-items:baseline;
  padding:22px 0;border-bottom:1px solid var(--line);cursor:pointer;position:relative;
  transition:padding .35s cubic-bezier(.2,.7,.2,1);
}
.index-row:hover{padding-left:18px}
.index-row:hover .ix-title{color:var(--accent)}
.ix-title{font-weight:900;font-stretch:118%;text-transform:uppercase;font-size:clamp(18px,2.6vw,34px);line-height:1;letter-spacing:-.01em;transition:color .25s;text-wrap:balance}
.ix-cell{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--grey)}
.ix-cell.right{text-align:right}
@media(max-width:900px){
  .index-row{grid-template-columns:40px 1fr 80px}
  .ix-hide{display:none}
}
#ix-thumb{
  position:fixed;z-index:50;width:300px;aspect-ratio:16/9;pointer-events:none;
  background-size:cover;background-position:center;opacity:0;transform:scale(.96);
  transition:opacity .25s,transform .25s;
}

/* ------- project ------- */
.project{padding-top:14vh}
.p-hero{position:relative;overflow:hidden}
.p-hero img{width:100%;height:min(92vh,860px);object-fit:cover}
.p-hero.scope{margin-bottom:2vh}
.p-hero.scope img{height:auto;aspect-ratio:2548/1080;object-fit:cover}
.p-hero .credit-chip{position:absolute;left:16px;bottom:14px}
.p-hero .runtime{position:absolute;right:16px;bottom:14px}
.credit-chip,.runtime{
  font-family:var(--mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(236,231,221,.85);background:rgba(13,12,10,.55);padding:6px 10px;backdrop-filter:blur(6px);
}
.play-btn{
  position:absolute;inset:0;width:100%;height:100%;background:transparent;border:0;cursor:pointer;
}
.play-btn .pb{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  display:flex;align-items:center;gap:14px;
  font-family:var(--mono);font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--bone);
  opacity:0;transition:opacity .35s;
}
.play-btn .pb::before{
  content:"";width:74px;height:74px;border:1px solid var(--bone);border-radius:50%;
  background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23ece7dd"><path d="M8 5v14l11-7z"/></svg>') center/26px no-repeat;
  transition:transform .35s;
}
.p-hero:hover .pb{opacity:1}
.p-hero:hover .pb::before{transform:scale(1.06)}
@media(hover:none){.play-btn .pb{opacity:1}}
.p-hero.vertical{display:flex;justify-content:center;background:#000}
.p-hero.vertical .vbg{position:absolute;inset:-60px;background-position:center;background-size:cover;filter:blur(48px) brightness(.32)}
.p-hero.vertical img{position:relative;width:auto;height:min(92vh,860px);aspect-ratio:9/16;object-fit:cover}
@media(max-width:900px){
  .p-hero img{height:auto;aspect-ratio:16/9;object-fit:contain;background:#000}
  .p-hero.scope img{aspect-ratio:2548/1080;object-fit:contain}
  .p-hero.ratio-ceviche img{aspect-ratio:2400/1200}
  .p-hero.ratio-esencia img{aspect-ratio:1376/768}
  .p-hero.vertical img{height:auto;width:min(78vw,420px);aspect-ratio:9/16;object-fit:cover}
}

.p-body{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:6vw;padding:8vh 28px 0;align-items:start}
.p-body.flip{direction:rtl}
.p-body.flip>*{direction:ltr}
.p-title{font-size:clamp(40px,7vw,110px);margin:14px 0 26px}
.p-title.t-sm{font-size:clamp(30px,5vw,80px)}
.p-desc{max-width:52ch;font-size:16.5px;color:#cfcabf}
.p-links{margin-top:34px;display:flex;gap:14px;flex-wrap:wrap}
.watch{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  border:1px solid var(--bone);padding:13px 22px;transition:all .25s;
}
.watch:hover{background:var(--accent);border-color:var(--accent);color:var(--ink)}
.watch.ghost{border-color:var(--line);color:var(--grey)}
.watch.ghost:hover{background:var(--bone);border-color:var(--bone);color:var(--ink)}
.credits{border-top:1px solid var(--line);margin-top:8px}
.credits dl{display:grid;grid-template-columns:110px 1fr;gap:0 18px}
.credits dt,.credits dd{
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  padding:11px 0;border-bottom:1px solid var(--line);
}
.credits dt{color:var(--grey)}
@media(max-width:900px){.p-body{grid-template-columns:1fr;gap:40px}}

.p-stills{padding:6vh 28px 0;display:grid;gap:16px}
.p-stills figure{position:relative;overflow:hidden}
.p-stills img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.p-stills figure:hover img{transform:scale(1.025)}
.p-stills .credit-chip{position:absolute;left:12px;bottom:10px}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-1-2{grid-template-columns:3fr 2fr}
.grid-1-2 figure:first-child{grid-row:span 2}
.grid-4{grid-template-columns:repeat(4,1fr)}
.grid-2{grid-template-columns:1fr 1fr}
.grid-off{grid-template-columns:repeat(12,1fr)}
.grid-off figure:nth-child(1){grid-column:1/8}
.grid-off figure:nth-child(2){grid-column:8/13;align-self:end}
.grid-off figure:nth-child(3){grid-column:4/10;margin-top:2vh}
@media(max-width:760px){
  .grid-3,.grid-4,.grid-1-2,.grid-2{grid-template-columns:1fr}
  .grid-off figure{grid-column:1/13!important;margin:0!important}
  .grid-4.v-stills{grid-template-columns:1fr 1fr}
}

/* series band */
.series-band{
  margin:14vh 28px 0;border:1px solid var(--line);padding:5vh 4vw;
  display:flex;justify-content:space-between;gap:4vw;align-items:flex-end;flex-wrap:wrap;
}
.series-band h3{font-size:clamp(30px,4.6vw,64px)}
.series-band p{max-width:40ch;font-size:14.5px;color:var(--grey)}

/* ------- interstitials ------- */
.silent{
  min-height:88vh;display:flex;align-items:center;justify-content:center;text-align:center;
  padding:14vh 28px;position:relative;overflow:hidden;
}
.silent .ghost{
  position:absolute;inset:auto 0 4vh;font-weight:900;font-stretch:118%;text-transform:uppercase;
  font-size:16vw;line-height:.85;color:transparent;-webkit-text-stroke:1px rgba(236,231,221,.07);
  white-space:nowrap;pointer-events:none;user-select:none;
}
.silent h3{font-size:clamp(30px,5.4vw,84px);max-width:20ch}
.silent h3 em{font-style:normal;color:var(--accent)}
.silent.red{background:var(--accent);color:var(--ink);min-height:70vh}
.silent.red h3{max-width:22ch}
.silent.red .ghost{-webkit-text-stroke:1px rgba(13,12,10,.14)}
@media(max-width:900px){
  .silent{min-height:clamp(260px,46vh,420px);padding:clamp(48px,8vh,90px) 24px}
  .silent.red{min-height:clamp(200px,37vh,345px)}
}
.silent-img{position:relative;height:92vh;overflow:hidden}
.silent-img img{width:100%;height:100%;object-fit:cover}
.silent-img .credit-chip{position:absolute;left:16px;bottom:14px}

/* ------- method (light ground) ------- */
.method{background:var(--bone);color:var(--ink)}
.method .kicker{color:var(--grey-dark)}
.method .sec-head{border-color:var(--line-dark)}
.m-open{padding:16vh 28px 10vh}
.m-open h2{font-size:clamp(48px,10vw,170px)}
.m-open h2 em{font-style:normal;color:var(--accent)}
.m-lead{display:grid;grid-template-columns:1fr 1fr;gap:6vw;padding:0 28px 12vh}
.m-lead p{max-width:46ch;font-size:17px;color:#3a382f}
.m-lead p+p{margin-top:1em}
@media(max-width:900px){.m-lead{grid-template-columns:1fr}}
.m-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--line-dark);border-bottom:1px solid var(--line-dark);margin:0 28px}
.m-col{padding:5vh 2.4vw;border-right:1px solid var(--line-dark)}
.m-col:last-child{border-right:0}
.m-col h4{font-weight:900;font-stretch:118%;text-transform:uppercase;font-size:clamp(17px,1.7vw,24px);margin:18px 0 10px}
.m-col p{font-size:14px;color:#4a473e;max-width:34ch}
.m-col .num{color:var(--accent)}
@media(max-width:900px){.m-cols{grid-template-columns:1fr}.m-col{border-right:0;border-bottom:1px solid var(--line-dark)}.m-col:last-child{border-bottom:0}}
.m-sys{padding:12vh 28px}
.m-sys ol{list-style:none;counter-reset:s;display:grid;grid-template-columns:repeat(6,1fr);gap:14px;margin-top:6vh}
.m-sys li{counter-increment:s;border-top:1px solid var(--ink);padding-top:14px}
.m-sys li::before{content:"0" counter(s);font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--accent);display:block;margin-bottom:10px}
.m-sys h5{font-weight:900;font-stretch:118%;text-transform:uppercase;font-size:14px;margin-bottom:8px}
.m-sys p{font-size:12.5px;color:#4a473e;line-height:1.5}
@media(max-width:1100px){.m-sys ol{grid-template-columns:repeat(3,1fr)}}
@media(max-width:700px){.m-sys ol{grid-template-columns:1fr 1fr}}
.m-rule{padding:0 28px 14vh}
.m-rule .box{border:1px solid var(--ink);padding:6vh 4vw;text-align:center}
.m-rule h3{font-size:clamp(24px,3.6vw,54px);max-width:30ch;margin:0 auto}
.m-rule h3 em{font-style:normal;color:var(--accent)}

/* ------- bio ------- */
.bio{background:var(--bone);color:var(--ink);padding:0 28px 16vh}
.bio-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:6vw;align-items:start;border-top:1px solid var(--line-dark);padding-top:8vh}
.bio-grid img{width:100%;filter:grayscale(1) contrast(1.05)}
.bio h2{font-size:clamp(40px,6vw,96px);margin:16px 0 30px}
.bio .b-copy p{max-width:56ch;font-size:17px;color:#3a382f}
.bio .b-copy p+p{margin-top:1.1em}
.b-now{margin-top:6vh;border-top:1px solid var(--ink);padding-top:16px}
.b-now h5{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin-bottom:14px}
.b-now .b-role{font-weight:900;font-stretch:118%;text-transform:uppercase;font-size:clamp(17px,1.7vw,24px);line-height:1.1;color:var(--ink);margin-bottom:12px}
.b-now p{max-width:56ch;font-size:15px;color:#3a382f}
.services{margin-top:7vh;display:grid;grid-template-columns:repeat(3,1fr);gap:0 3vw}
.services div{border-top:1px solid var(--ink);padding:16px 0 26px}
.services h5{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin-bottom:14px}
.services ul{list-style:none}
.services li{font-weight:700;font-stretch:112%;text-transform:uppercase;font-size:15px;padding:7px 0;border-bottom:1px solid var(--line-dark);text-wrap:pretty}
@media(max-width:1100px){.services{grid-template-columns:1fr 1fr}}
@media(max-width:900px){.bio-grid{grid-template-columns:1fr}.bio-grid img{max-width:420px}}
@media(max-width:560px){.services{grid-template-columns:1fr}}

/* ------- reels ------- */
.reels{padding:16vh 28px}
.reel-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:6vh}
@media(max-width:1100px){.reel-grid{grid-template-columns:1fr 1fr}}
.reel-card{position:relative;overflow:hidden;cursor:pointer;border:1px solid var(--line)}
.reel-card img{width:100%;height:46vh;object-fit:cover;opacity:.55;transition:opacity .4s,transform 1.2s cubic-bezier(.2,.7,.2,1)}
.reel-card:hover img{opacity:.8;transform:scale(1.02)}
.reel-card .r-label{position:absolute;left:22px;right:22px;bottom:20px}
.reel-card .r-label .kicker{color:#cfcabf}
.reel-card .r-label h3{font-size:clamp(22px,2.2vw,34px);margin-top:8px}
@media(max-width:760px){.reel-card .r-label h3{font-size:clamp(24px,7vw,34px)}}
@media(max-width:760px){.reel-grid{grid-template-columns:1fr}}

/* ------- contact ------- */
.contact{padding:18vh 28px 10vh;position:relative;overflow:hidden}
.contact .ghost{position:absolute;bottom:-2vw;left:0;right:0;font-weight:900;font-stretch:118%;text-transform:uppercase;font-size:17.5vw;line-height:.8;color:transparent;-webkit-text-stroke:1px rgba(236,231,221,.08);white-space:nowrap;pointer-events:none}
.contact h2{font-size:clamp(34px,8.2vw,150px);margin:16px 0 8vh}
.contact h2 a{transition:color .25s}
.contact h2 a:hover{color:var(--accent)}
.c-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:4vw;border-top:1px solid var(--line);padding-top:5vh}
.c-grid h5{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--grey);margin-bottom:16px}
.c-grid a,.c-grid span{display:block;font-weight:700;font-stretch:112%;text-transform:uppercase;font-size:15px;padding:6px 0;text-wrap:pretty}
.c-grid a:hover{color:var(--accent)}
.c-note{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--grey)}
@media(max-width:900px){.c-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.contact h2{font-size:clamp(20px,6.6vw,34px)}}
.footer{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:6vh 28px 4vh;border-top:1px solid var(--line);font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--grey)}
.footer-badge{display:flex;align-items:center;gap:10px}
.footer-badge img{height:26px;width:auto;display:block}

/* ------- lightbox ------- */
.lightbox{
  position:fixed;inset:0;z-index:100;background:rgba(7,6,5,.96);
  display:none;align-items:center;justify-content:center;padding:4vh 4vw;
}
.lightbox.open{display:flex}
.lightbox video{max-width:100%;max-height:86vh;width:auto;height:auto;outline:none;box-shadow:0 30px 120px rgba(0,0,0,.6)}
.lb-close{
  position:absolute;top:20px;right:24px;background:none;border:0;color:var(--bone);cursor:pointer;
  font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;padding:10px;
}
.lb-close:hover{color:var(--accent)}
.lb-title{position:absolute;top:22px;left:28px;font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--grey)}

/* ------- reveal ------- */
.rv{opacity:0;transform:translateY(26px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}}

/* ------- tab pages: intro ------- */
.page-intro{padding:24vh 28px 6vh}
.page-intro h1{font-size:clamp(56px,11.5vw,190px);margin:14px 0 6vh}
.pi-meta{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:18px}
.pi-meta .lead{max-width:50ch;font-size:16px;color:#cfcabf}
.pi-index{padding:0 28px 6vh}

/* ------- case studies ------- */
.cs{padding:14vh 28px 4vh}
.cs-head{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:6vw;align-items:end;border-bottom:1px solid var(--line);padding-bottom:6vh}
.cs-head h2{font-size:clamp(40px,7vw,110px);margin:14px 0 26px}
.cs-lead{max-width:52ch;font-size:16.5px;color:#cfcabf}
.cs-head .p-links{margin-top:30px}
.cs-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:6vh}
.cs-step figure{position:relative;aspect-ratio:3/2;overflow:hidden;background:var(--ink-2);border:1px solid var(--line)}
.cs-step figure[data-zoom]{cursor:zoom-in}
.cs-step img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.cs-step figure[data-zoom]:hover img{transform:scale(1.03)}
.cs-step figure .credit-chip{position:absolute;left:10px;bottom:9px}
.cs-step figure .zoom-ic{position:absolute;right:10px;top:9px;font-family:var(--mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:rgba(236,231,221,.85);background:rgba(13,12,10,.55);padding:5px 8px;opacity:0;transition:opacity .3s}
.cs-step figure[data-zoom]:hover .zoom-ic{opacity:1}
@media(hover:none){.cs-step figure .zoom-ic{opacity:1}}
.cs-step .st-n{display:block;margin:16px 0 8px}
.cs-step h4{font-weight:900;font-stretch:118%;text-transform:uppercase;font-size:clamp(15px,1.3vw,19px);line-height:1.05;margin-bottom:8px}
.cs-step p{font-size:13.5px;color:var(--grey);max-width:34ch}
.cs-card{aspect-ratio:3/2;border:1px solid var(--line);background:var(--ink-2);padding:clamp(14px,1.6vw,26px);display:flex;flex-direction:column;justify-content:space-between}
.cs-card .cc-t{font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--grey)}
.cs-card ul{list-style:none}
.cs-card li{display:flex;gap:12px;align-items:baseline;font-family:var(--mono);font-size:clamp(9px,.78vw,11px);letter-spacing:.1em;text-transform:uppercase;padding:6px 0;border-top:1px solid var(--line)}
.cs-card li b{color:var(--accent);font-weight:400;min-width:4.2em}
.cs-quote{padding:9vh 0 7vh;text-align:center}
.cs-quote h3{font-size:clamp(22px,2.9vw,44px);max-width:30ch;margin:0 auto}
.cs-quote h3 em{font-style:normal;color:var(--accent)}
.cs-dec{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.cs-dec>div{padding:4vh 2.4vw 4.4vh;border-right:1px solid var(--line)}
.cs-dec>div:first-child{padding-left:0}
.cs-dec>div:last-child{border-right:0}
.cs-dec h4{font-weight:900;font-stretch:118%;text-transform:uppercase;font-size:clamp(16px,1.5vw,22px);line-height:1.08;margin:14px 0 10px;text-wrap:balance}
.cs-dec p{font-size:14px;color:var(--grey);max-width:36ch}
.cs-sep{border:0;border-top:1px solid var(--line);margin:10vh 28px 0}
@media(max-width:1100px){.cs-steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:900px){
  .cs-head{grid-template-columns:1fr;gap:40px}
  .cs-dec{grid-template-columns:1fr}
  .cs-dec>div{padding:4vh 0;border-right:0;border-bottom:1px solid var(--line)}
  .cs-dec>div:last-child{border-bottom:0}
  .page-intro{padding-top:20vh}
}
@media(max-width:560px){.cs-steps{grid-template-columns:1fr}.cs-card li{font-size:10px}}

/* ------- lightbox image + cross-links ------- */
.lightbox img{max-width:100%;max-height:88vh;width:auto;height:auto;box-shadow:0 30px 120px rgba(0,0,0,.6)}
.lightbox [hidden]{display:none!important}
.cs-link{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;padding:13px 22px;border:1px solid var(--accent);color:var(--accent);transition:all .25s}
.cs-link:hover{background:var(--accent);color:var(--ink)}

/* ------- systems ------- */
.sy-legend{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:0 28px}
.sy-legend>div{padding:3vh 2.4vw 3.4vh;border-right:1px solid var(--line)}
.sy-legend>div:first-child{padding-left:0}
.sy-legend>div:last-child{border-right:0}
.sy-legend h4{font-weight:900;font-stretch:118%;text-transform:uppercase;font-size:clamp(16px,1.5vw,22px);margin:10px 0 6px;line-height:1.05}
.sy-legend p{font-size:13.5px;color:var(--grey);max-width:38ch}
.sy-group{padding:12vh 28px 0}
.sy-group .sec-head h2{font-size:clamp(30px,4.2vw,60px)}
.sy-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4vw;margin-top:5vh}
.sy figure{position:relative;overflow:hidden;background:var(--ink-2);border:1px solid var(--line);cursor:zoom-in}
.sy figure img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.sy figure.top img{object-position:top}
.sy figure.left img{object-position:left center}
.sy figure:hover img{transform:scale(1.025)}
.sy figure .zoom-ic{position:absolute;right:10px;top:9px;font-family:var(--mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:rgba(236,231,221,.85);background:rgba(13,12,10,.55);padding:5px 8px;opacity:0;transition:opacity .3s}
.sy figure:hover .zoom-ic{opacity:1}
@media(hover:none){.sy figure .zoom-ic{opacity:1}}
.sy figure .credit-chip{position:absolute;left:10px;bottom:9px}
.sy-main{aspect-ratio:16/10}
.sy-thumbs{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.sy-thumbs figure{aspect-ratio:16/10}
.sy-body{margin-top:26px}
.sy-meta{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.sy h3{font-size:clamp(28px,3.3vw,50px);margin:16px 0 16px;line-height:.95}
.sy-what{font-size:15.5px;color:#cfcabf;max-width:54ch}
.sy-list{list-style:none;margin-top:20px;border-top:1px solid var(--line)}
.sy-list li{font-size:13.5px;color:var(--grey);padding:10px 0 10px 22px;border-bottom:1px solid var(--line);position:relative}
.sy-list li::before{content:"—";position:absolute;left:0;color:var(--accent)}
.sy-foot{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-top:18px}
.sy-stack{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--grey)}
.sy-status{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.sy .cs-link{margin-top:20px}
.sy-end{padding:14vh 28px 10vh;text-align:center}
.sy-end h3{font-size:clamp(24px,3.2vw,48px);max-width:28ch;margin:0 auto}
.sy-end h3 em{font-style:normal;color:var(--accent)}
@media(max-width:900px){
  .sy-grid{grid-template-columns:1fr;gap:10vh}
  .sy-legend{grid-template-columns:1fr}
  .sy-legend>div{padding:3vh 0;border-right:0;border-bottom:1px solid var(--line)}
  .sy-legend>div:last-child{border-bottom:0}
}

/* ------- case study: instagram story strip ------- */
.cs-story{margin-top:9vh}
.cs-story-head{display:flex;justify-content:space-between;align-items:baseline;gap:24px;flex-wrap:wrap;border-bottom:1px solid var(--line);padding-bottom:14px}
.cs-story-head p{font-size:14px;color:var(--grey);max-width:60ch}
.cs-story-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;margin-top:3vh}
.cs-story-grid figure{position:relative;aspect-ratio:9/16;overflow:hidden;background:var(--ink-2);border:1px solid var(--line);cursor:zoom-in}
.cs-story-grid figure.cs-vid{cursor:pointer;border-color:var(--accent)}
.cs-story-grid img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.cs-story-grid figure:hover img{transform:scale(1.03)}
.cs-story-grid .zoom-ic{position:absolute;right:8px;top:8px;font-family:var(--mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:rgba(236,231,221,.85);background:rgba(13,12,10,.55);padding:5px 8px;opacity:0;transition:opacity .3s}
.cs-story-grid figure:hover .zoom-ic{opacity:1}
.cs-story-grid .vid-ic{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink);background:var(--accent);padding:10px 14px}
.cs-story-grid .credit-chip{position:absolute;left:8px;bottom:8px}
.cs-story-cap{margin-top:16px;font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--grey);text-align:right}
@media(hover:none){.cs-story-grid .zoom-ic{opacity:1}}
@media(max-width:1100px){.cs-story-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:560px){.cs-story-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* single-system groups: full-width feature card */
@media(min-width:901px){
  .sy-grid>.sy:only-child{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);grid-template-rows:auto 1fr;gap:10px 4vw;align-items:start}
  .sy-grid>.sy:only-child .sy-main{grid-column:1;grid-row:1}
  .sy-grid>.sy:only-child .sy-thumbs{grid-column:1;grid-row:2;margin-top:0}
  .sy-grid>.sy:only-child .sy-body{grid-column:2;grid-row:1/span 2;margin-top:0}
}

/* chrome brand lockup */
.chrome .c-name{display:flex;align-items:center;gap:12px}
.chrome .c-name img{height:22px;width:auto;display:block;border-radius:50%}
.chrome .c-sep{width:1px;height:14px;background:rgba(236,231,221,.45);display:block}
.chrome .c-cp{color:rgba(236,231,221,.7)}
@media(max-width:760px){.chrome .c-cp{display:none}}
/* thin strip between a film's stills and the red interstitial */
.project+.silent.red{margin-top:28px}
.silent.red+.project{padding-top:0}

/* vertical films: hero + text side by side, stills as a compact row */
@media(min-width:901px){
  .project.vfilm{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);column-gap:5vw;align-items:center;padding-left:28px;padding-right:28px}
  .project.vfilm .p-hero{grid-column:1;grid-row:1}
  .project.vfilm .p-hero.vertical img{height:min(84vh,780px)}
  .project.vfilm .p-body{grid-column:2;grid-row:1;grid-template-columns:1fr;gap:5vh;padding:0}
  .project.vfilm .p-body.flip{direction:ltr}
  .project.vfilm .p-stills{grid-column:1/-1;grid-row:2;padding:3vh 0 0}
  .project.vfilm .p-stills figure{aspect-ratio:3/4}
}
.project.vfilm .p-stills.v-stills figure{aspect-ratio:3/4}
/* custom cursor */
@media(hover:hover) and (pointer:fine){
  html.has-cur,html.has-cur *{cursor:none!important}
  .cur{position:fixed;left:0;top:0;z-index:300;pointer-events:none;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:#e83a1d;mix-blend-mode:difference;transition:width .28s cubic-bezier(.2,.7,.2,1),height .28s cubic-bezier(.2,.7,.2,1),margin .28s cubic-bezier(.2,.7,.2,1),background .2s,opacity .2s;will-change:transform}
  .cur.on-link{width:54px;height:54px;margin:-27px 0 0 -27px;background:#ece7dd}
  .cur.on-media{width:84px;height:84px;margin:-42px 0 0 -42px;background:#ece7dd}
  .cur.down{width:8px;height:8px;margin:-4px 0 0 -4px}
  .cur.hide{opacity:0}
}
@media(hover:none),(pointer:coarse){.cur{display:none}}

.chrome .c-chip{font-size:8.5px;padding:4px 10px 3px;letter-spacing:.16em;color:rgba(236,231,221,.85)}
@media(max-width:760px){.chrome .c-chip{display:none}}

/* text is not selectable / copyable */
html{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
img,video{-webkit-user-drag:none;user-drag:none}

/* thin strip between the last film and the light method section */
.project+.method{margin-top:28px}
/* printing / save-as-PDF renders a black page */
@media print{
  html,body{background:#000!important}
  body *{visibility:hidden!important}
  @page{margin:0}
}

/* small screens: stack section heads and contact columns */
@media(max-width:560px){
  .sec-head{flex-direction:column;align-items:flex-start;gap:10px}
  .sec-head .sec-head-r{align-items:flex-start}
  .c-grid{grid-template-columns:1fr;gap:28px}
  .c-grid a,.c-grid span{overflow-wrap:anywhere}
}

/* WITNESS case study */
.wt-pair{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:6vh}
.wt-pair figure{position:relative;aspect-ratio:1/1;overflow:hidden;background:var(--ink-2);border:1px solid var(--line);cursor:zoom-in}
.wt-pair img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.wt-pair figure:hover img{transform:scale(1.02)}
.wt-pair .credit-chip{position:absolute;left:12px;bottom:10px}
.wt-pair .zoom-ic{position:absolute;right:10px;top:9px;font-family:var(--mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:rgba(236,231,221,.85);background:rgba(13,12,10,.55);padding:5px 8px;opacity:0;transition:opacity .3s}
.wt-pair figure:hover .zoom-ic{opacity:1}
.wt-epi{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:4vh}
.wt-epi>div{padding:2.6vh 2vw 2.8vh 0}
.wt-epi>div+div{padding-left:2vw;border-left:1px solid var(--line)}
.wt-epi b{display:block;font-family:var(--mono);font-weight:400;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin-bottom:8px}
.wt-epi p{font-size:13px;color:var(--grey);max-width:34ch}
@media(max-width:900px){
  .wt-pair{grid-template-columns:1fr}
  .wt-epi{grid-template-columns:1fr 1fr}
  .wt-epi>div:nth-child(3){padding-left:0;border-left:0}
  .wt-epi>div:nth-child(n+3){border-top:1px solid var(--line)}
}
@media(hover:none){.wt-pair .zoom-ic{opacity:1}}
@media(max-width:560px){.cs-head h2{font-size:clamp(26px,9.2vw,48px)}}

/* fixed menu: blurred glass once the page scrolls */
.chrome{transition:background .35s,backdrop-filter .35s,-webkit-backdrop-filter .35s}
.chrome.scrolled{mix-blend-mode:normal;background:rgba(13,12,10,.74);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);color:#ece7dd;border-bottom-color:rgba(236,231,221,.12)}

/* scroll hint: liquid-glass pill */
.scroll-hint{position:fixed;left:50%;bottom:22px;z-index:55;transform:translate(-50%,0);display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 15px 10px;border-radius:999px;
  background:linear-gradient(160deg,rgba(255,255,255,.22),rgba(255,255,255,.05));border:1px solid rgba(255,255,255,.28);
  -webkit-backdrop-filter:blur(14px) saturate(1.6);backdrop-filter:blur(14px) saturate(1.6);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),inset 0 -8px 14px rgba(255,255,255,.04),0 8px 28px rgba(0,0,0,.35);
  color:#ece7dd;font-family:var(--mono);font-size:8.5px;letter-spacing:.24em;text-transform:uppercase;pointer-events:none;transition:opacity .5s,transform .5s}
.scroll-hint svg{width:14px;height:14px;animation:sh-bob 1.6s ease-in-out infinite}
.scroll-hint.gone{opacity:0;transform:translate(-50%,12px)}
@keyframes sh-bob{0%,100%{transform:translateY(-2px);opacity:.55}50%{transform:translateY(3px);opacity:1}}
@media(prefers-reduced-motion:reduce){.scroll-hint svg{animation:none}}
@media print{.scroll-hint{display:none!important}}

/* viewer lock screen */
.wm-lock{position:fixed;inset:0;z-index:3000;background:#000;display:flex;align-items:center;justify-content:center;text-align:center;cursor:pointer}
.wm-lock[hidden]{display:none}
.wm-lock .wl-t{font-weight:900;font-stretch:118%;text-transform:uppercase;font-size:clamp(28px,5vw,64px);line-height:.95;margin:14px 0 26px}
@media print{.wm,.wm-lock{display:none!important}}

/* systems reel */
.sy-reel{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:5vw;align-items:center;padding:6vh 28px 8vh}
.sy-reel-v{position:relative;aspect-ratio:16/9;background:#000;border:1px solid var(--line);overflow:hidden}
.sy-reel-v video{width:100%;height:100%;object-fit:cover}
.sy-reel-v .credit-chip{position:absolute;left:12px;bottom:10px}
.reel-sound{position:absolute;right:12px;bottom:10px;z-index:3;font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--bone);background:rgba(13,12,10,.55);border:1px solid rgba(236,231,221,.35);border-radius:999px;padding:7px 14px 6px;cursor:pointer;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.reel-sound .rs-on{display:none}.reel-sound[aria-pressed="true"] .rs-on{display:inline}.reel-sound[aria-pressed="true"] .rs-off{display:none}
.sy-reel-t h2{font-size:clamp(40px,6vw,96px);margin:14px 0 22px}
.sy-cta{padding:8vh 28px 10vh;text-align:center;border-top:1px solid var(--line)}
.sy-cta h3{font-size:clamp(28px,4.4vw,64px);margin-bottom:28px}
.sy-cta h3 em{font-style:normal;color:var(--accent)}
@media(max-width:900px){.sy-reel{grid-template-columns:1fr;gap:5vh}}

/* Kiln & Ronin surprise duels */
.jb-duel{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:1500}
.jb-duel.lock{z-index:3100}
span.jb-w{display:inline!important;white-space:nowrap}
span.jb-ch{display:inline!important}
span.jb-ch.jb-ib,span.jb-ch.jb-cut{display:inline-block!important}
.jb-cut{position:relative}
.jb-cut .jb-a{display:inline-block;clip-path:polygon(0 0,100% 0,100% 36%,0 64%);transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.jb-cut .jb-b{position:absolute;left:0;top:0;clip-path:polygon(0 64%,100% 36%,100% 100%,0 100%);transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.jb-cut.jb-cut-on .jb-a{transform:translate(-.02em,-.025em) rotate(-2.5deg)}
.jb-cut.jb-cut-on .jb-b{transform:translate(.03em,.045em) rotate(3deg)}
.jb-cut::after{content:"";position:absolute;left:-18%;width:136%;top:50%;height:.05em;min-height:2px;background:#e83a1d;box-shadow:0 0 .25em rgba(232,58,29,.9);transform:rotate(-16deg) scaleX(0);transform-origin:left center;animation:jbSlash .2s forwards,jbFade 1.6s .5s forwards;pointer-events:none}
.jb-scar{position:absolute;height:3px;background:#e83a1d;box-shadow:0 0 10px rgba(232,58,29,.9),0 0 2px #fff;transform-origin:left center;z-index:4;pointer-events:none;animation:jbScar .22s ease-out both}
.jb-scorch{position:absolute;top:-6px;width:26px;height:10px;margin-left:-13px;pointer-events:none;background:radial-gradient(closest-side,rgba(232,58,29,.85),rgba(232,58,29,.25) 55%,transparent);filter:blur(.4px);z-index:4}
@keyframes jbSlash{to{transform:rotate(-16deg) scaleX(1)}}
@keyframes jbFade{to{opacity:.35}}
@keyframes jbScar{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@media print{.jb-duel{display:none!important}}

.cur.cur-lens{opacity:0!important}
.jb-uline{position:absolute;left:0;bottom:-.04em;height:3px;width:0;background:#e83a1d;box-shadow:0 0 8px rgba(232,58,29,.8);pointer-events:none;z-index:2}

/* the red-dot cursor stays above the lock screen, so it never disappears there either */
.cur{z-index:3200}

@media(hover:none),(pointer:coarse){#ix-thumb{display:none!important}}

/* public: two reels */
.reel-grid{grid-template-columns:repeat(2,1fr)}
@media(max-width:760px){.reel-grid{grid-template-columns:1fr}}