:root{
  --bg:#0c0e0d; --bg2:#121514; --surf:#171b19; --line:rgba(230,228,220,.12); --line2:rgba(230,228,220,.22);
  --tx:#e6e4dc; --mut:#959a92; --acc:#e2613a; --acc2:#f07a52;
  --fd:'Archivo','Arial Narrow',sans-serif; --fb:'IBM Plex Sans','Helvetica Neue',sans-serif; --fm:'JetBrains Mono',ui-monospace,monospace;
  --pad:clamp(1.25rem,4vw,3rem); --sec:clamp(4.5rem,10vw,8.5rem);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--tx);font:400 1rem/1.65 var(--fb);-webkit-font-smoothing:antialiased}
body.menu-open{overflow:hidden}
img{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3,p,ul,ol,dl,figure{margin:0}
ul,ol{padding:0;list-style:none}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--acc);outline-offset:3px}
.skip{position:absolute;left:-999px;top:0;background:var(--acc);color:#000;padding:.5rem 1rem;z-index:99}
.skip:focus{left:1rem}
.wrap{width:100%;max-width:1320px;margin:0 auto;padding-inline:var(--pad)}
.mono{font-family:var(--fm);font-size:.75rem;letter-spacing:.08em;text-transform:uppercase}
.kicker{color:var(--acc);margin-bottom:1.1rem;display:flex;align-items:center;gap:.6rem}
.kicker::before{content:"";width:1.5rem;height:1px;background:currentColor}
.h2{font:800 clamp(2rem,4.4vw,3.6rem)/1.1 var(--fd);font-stretch:72%;text-transform:uppercase;letter-spacing:-.005em;text-wrap:balance}
.lead{color:var(--mut);font-size:1.0625rem;max-width:58ch}
.sec{padding-block:var(--sec)}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:.5rem;background:var(--acc);color:#120806;border:1px solid var(--acc);padding:.95rem 1.4rem;font:600 .875rem/1 var(--fb);letter-spacing:.02em;text-decoration:none;transition:background .2s,color .2s,border-color .2s}
.btn:hover{background:var(--acc2);border-color:var(--acc2)}
.btn--ghost{background:transparent;color:var(--tx);border-color:var(--line2)}
.btn--ghost:hover{background:rgba(230,228,220,.06);border-color:var(--tx)}
.btn--sm{padding:.65rem 1rem;font-size:.8125rem}

/* nav */
.nav{position:fixed;inset:0 0 auto;z-index:50;transition:background .3s,border-color .3s;border-bottom:1px solid transparent}
.nav.is-solid{background:rgba(12,14,13,.88);backdrop-filter:blur(10px);border-color:var(--line)}
.nav__in{max-width:1320px;margin:0 auto;padding:1rem var(--pad);display:flex;align-items:center;gap:2rem}
.brand{font:800 1.15rem/1 var(--fd);font-stretch:80%;letter-spacing:.06em;text-decoration:none;white-space:nowrap}
.brand span{color:var(--acc);margin:0 .12em}
.nav nav{margin-left:auto}
.nav__links{display:flex;gap:1.75rem}
.nav__links a{text-decoration:none;font-size:.875rem;color:var(--mut);transition:color .2s}
.nav__links a:hover{color:var(--tx)}
.nav__toggle{display:none;background:none;border:0;width:40px;height:40px;position:relative}
.nav__toggle span{position:absolute;left:9px;right:9px;height:1.5px;background:var(--tx);transition:transform .25s}
.nav__toggle span:first-child{top:15px}.nav__toggle span:last-child{top:24px}
.nav__toggle[aria-expanded="true"] span:first-child{transform:translateY(4.5px) rotate(45deg)}
.nav__toggle[aria-expanded="true"] span:last-child{transform:translateY(-4.5px) rotate(-45deg)}

/* hero */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;isolation:isolate}
.hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;animation:slow 22s ease-out both}
@keyframes slow{from{transform:scale(1.08)}to{transform:scale(1)}}
.hero__shade{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(12,14,13,.55) 0%,rgba(12,14,13,.15) 35%,rgba(12,14,13,.75) 72%,var(--bg) 100%)}
.hero__in{padding-top:8rem;padding-bottom:3rem;text-shadow:0 1px 18px rgba(0,0,0,.55)}
.hero__title{font:800 clamp(2.9rem,8.6vw,7.4rem)/1.04 var(--fd);font-stretch:68%;text-transform:uppercase;letter-spacing:-.01em;max-width:14ch}
.hero__lead{margin-top:1.75rem;max-width:56ch;color:#c9c8c0;font-size:1.0625rem}
.hero__cta{margin-top:2.25rem;display:flex;flex-wrap:wrap;gap:.75rem}
.hero__strip{display:flex;flex-wrap:wrap;gap:.5rem 1.75rem;padding-block:1.4rem 1.6rem;border-top:1px solid var(--line);color:var(--mut)}
.hero__strip li{white-space:nowrap}
.hero__strip li::before{content:"/";color:var(--acc);margin-right:.6rem}

/* approach */
.approach{display:grid;grid-template-columns:5fr 7fr;gap:clamp(2rem,6vw,6rem)}
.pillars{margin-top:3rem;display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.pillars li{border-top:1px solid var(--line2);padding-top:1.25rem}
.pillars span{color:var(--acc)}
.pillars h3{font:600 1.125rem/1.3 var(--fb);margin:.6rem 0 .5rem}
.pillars p{color:var(--mut);font-size:.9375rem}

/* programs */
.programs{background:var(--bg2);border-block:1px solid var(--line)}
.programs__head{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;flex-wrap:wrap;margin-bottom:3rem}
.filters{display:flex;flex-wrap:wrap;gap:.5rem}
.chip{background:transparent;border:1px solid var(--line2);padding:.55rem .95rem;font-size:.8125rem;color:var(--mut);transition:all .2s}
.chip:hover{color:var(--tx);border-color:var(--tx)}
.chip.is-on{background:var(--tx);color:var(--bg);border-color:var(--tx)}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.card{background:var(--bg2);animation:in .5s calc(var(--i)*40ms) both}
.card[hidden]{display:none}
@keyframes in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.card__btn{all:unset;box-sizing:border-box;display:flex;flex-direction:column;width:100%;height:100%;cursor:pointer}
.card__btn:focus-visible{outline:2px solid var(--acc);outline-offset:-2px}
.card__media{aspect-ratio:16/10;overflow:hidden;background:#000}
.card__media img{width:100%;height:100%;object-fit:cover;filter:grayscale(.35) brightness(.85);transition:transform .6s,filter .4s}
.card__btn:hover img{transform:scale(1.04);filter:none}
.card__body{padding:1.5rem 1.5rem 1.75rem;display:flex;flex-direction:column;gap:.5rem;flex:1}
.card__code{color:var(--acc)}
.card__title{font:800 1.6rem/1.15 var(--fd);font-stretch:75%;text-transform:uppercase}
.card__body p{color:var(--mut);font-size:.9375rem;flex:1}
.card__more{color:var(--tx);margin-top:.75rem;transition:color .2s}
.card__btn:hover .card__more{color:var(--acc)}
.note{margin-top:1.75rem;color:var(--mut);font-size:.875rem}
.note b{color:var(--tx);font-weight:500}

/* band */
.band{position:relative;min-height:70vh;display:flex;align-items:flex-end;overflow:hidden;isolation:isolate}
.band img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.band__shade{position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(12,14,13,.85),rgba(12,14,13,.2) 70%)}
.band__q{margin-block:0;padding-block:4rem}
.band__q p{font:800 clamp(2rem,5vw,4.2rem)/1.1 var(--fd);font-stretch:68%;text-transform:uppercase;max-width:16ch}

/* detective */
.detect{display:grid;grid-template-columns:5fr 7fr;gap:clamp(2rem,6vw,6rem);align-items:start}
.detect__fig{position:sticky;top:6rem}
.detect__fig img{width:100%;aspect-ratio:4/5;object-fit:cover}
.detect__fig figcaption{color:var(--mut);margin-top:.9rem}
.detect .lead{margin-top:1.25rem}
.svc{margin:2.5rem 0;display:grid;grid-template-columns:1fr 1fr;gap:0 2rem}
.svc li{border-top:1px solid var(--line);padding:1.25rem 0 1.5rem}
.svc h3{font:600 1.0625rem/1.3 var(--fb);margin-bottom:.4rem}
.svc p{color:var(--mut);font-size:.9375rem}

/* steps */
.steps{background:var(--bg2);border-block:1px solid var(--line)}
.steps__list{margin-top:3rem;display:grid;grid-template-columns:repeat(4,1fr);counter-reset:s}
.steps__list li{padding:1.5rem 1.5rem 0 0;border-top:2px solid var(--line2);position:relative}
.steps__list li::before{content:"";position:absolute;top:-2px;left:0;width:2.5rem;height:2px;background:var(--acc)}
.steps__list span{color:var(--acc)}
.steps__list h3{font:800 1.5rem/1.15 var(--fd);font-stretch:75%;text-transform:uppercase;margin:.6rem 0 .6rem}
.steps__list p{color:var(--mut);font-size:.9375rem;max-width:30ch}

/* clients */
.clients{display:grid;grid-template-columns:5fr 7fr;gap:clamp(2rem,6vw,6rem)}
.clients .lead{margin-top:1.25rem}
.clients__list{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line)}
.clients__list li{padding:1.15rem 0;border-bottom:1px solid var(--line);font-size:1rem;display:flex;gap:.8rem;padding-right:1rem}
.clients__list li::before{content:"—";color:var(--acc)}

/* rules */
.rules{background:linear-gradient(180deg,var(--bg2),var(--bg));border-top:1px solid var(--line)}
.rules__in{display:grid;grid-template-columns:5fr 7fr;gap:clamp(2rem,6vw,6rem)}
.rules__list li{padding:1.2rem 0;border-bottom:1px solid var(--line);color:var(--mut)}
.rules__list li:first-child{border-top:1px solid var(--line)}
.rules__list b{color:var(--tx);font-weight:600}

/* contact */
.contact{display:grid;grid-template-columns:5fr 7fr;gap:clamp(2rem,6vw,6rem)}
.contact .lead{margin-top:1.25rem}
.form{display:grid;gap:1.1rem}
.row{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
.form label{display:grid;gap:.45rem;font-size:.8125rem;color:var(--mut)}
.form input:not([type=checkbox]),.form select,.form textarea{width:100%;background:var(--surf);border:1px solid var(--line2);color:var(--tx);padding:.85rem .9rem;font:400 1rem/1.4 var(--fb);border-radius:0;transition:border-color .2s}
.form select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--mut) 50%),linear-gradient(-45deg,transparent 50%,var(--mut) 50%);background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;background-size:5px 5px;background-repeat:no-repeat;padding-right:2.5rem}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--acc)}
.form textarea{resize:vertical}
.form .check{display:flex;gap:.7rem;align-items:flex-start;line-height:1.5}
.check input{accent-color:var(--acc);width:1.05rem;height:1.05rem;margin-top:.15rem;flex:none}
.form .btn{justify-self:start}
.form__msg{font-size:.875rem;min-height:1.4em}
.form__msg.is-ok{color:#9fd18b}.form__msg.is-err{color:var(--acc2)}

/* footer */
.foot{border-top:1px solid var(--line);padding-block:2rem}
.foot__in{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;color:var(--mut)}
.foot a{text-decoration:none}.foot a:hover{color:var(--tx)}

/* dialog */
.dlg{padding:0;border:1px solid var(--line2);background:var(--bg2);color:var(--tx);width:min(1040px,94vw);max-height:90vh;display:none;grid-template-columns:5fr 7fr;overflow:hidden}
.dlg[open]{display:grid;animation:in .3s both}
.dlg::backdrop{background:rgba(5,6,6,.8);backdrop-filter:blur(4px)}
.dlg__media img{width:100%;height:100%;object-fit:cover}
.dlg__body{padding:2.5rem;overflow:auto;max-height:90vh}
.dlg__body .lead{margin-top:1rem}
.dlg__h{font:600 .9375rem/1 var(--fb);margin:2rem 0 .75rem}
.dlg__list li{padding:.6rem 0;border-bottom:1px solid var(--line);font-size:.9375rem;display:flex;gap:.7rem}
.dlg__list li::before{content:"/";color:var(--acc)}
.dlg__meta{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin:1.75rem 0 2rem}
.dlg__meta dt{color:var(--mut);font-size:.6875rem;margin-bottom:.3rem}
.dlg__meta dd{margin:0;font-size:.875rem}
.dlg__act{display:flex;gap:.75rem;flex-wrap:wrap}
.dlg__x{position:absolute;top:.75rem;right:.75rem;width:40px;height:40px;background:rgba(12,14,13,.7);border:1px solid var(--line2);font-size:1.4rem;line-height:1}

/* responsive */
@media (max-width:1020px){
  .grid{grid-template-columns:repeat(2,1fr)}
  .steps__list{grid-template-columns:repeat(2,1fr);gap:2.5rem 0}
  .approach,.detect,.clients,.rules__in,.contact{grid-template-columns:1fr}
  .detect__fig{position:static}.detect__fig img{aspect-ratio:16/10}
}
@media (max-width:860px){
  .nav__toggle{display:block;margin-left:auto}
  .nav nav{margin:0}
  .nav .btn--sm{display:none}
  .nav__links{position:fixed;inset:64px 0 0;background:var(--bg);flex-direction:column;gap:0;padding:1rem var(--pad);transform:translateX(100%);transition:transform .3s;visibility:hidden}
  .nav__links.open{transform:none;visibility:visible}
  .nav__links a{display:block;padding:1.1rem 0;border-bottom:1px solid var(--line);font-size:1.25rem;color:var(--tx)}
  .nav:has(.open){background:var(--bg)}
  .pillars{grid-template-columns:1fr}
  .dlg{grid-template-columns:1fr;overflow:auto}
  .dlg__media{height:200px}
  .dlg__body{max-height:none;padding:1.75rem}
}
@media (max-width:620px){
  .grid,.svc,.clients__list,.row,.steps__list{grid-template-columns:1fr}
  .dlg__meta{grid-template-columns:1fr 1fr}
  .hero__strip{gap:.4rem 1.1rem}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}}
.only-m{display:none}@media (max-width:860px){.only-m{display:block}}
.hero .kicker{color:var(--tx);background:rgba(12,14,13,.6);padding:.4rem .7rem;display:inline-flex;text-shadow:none}.hero .kicker::before{background:var(--acc)}
.brand{display:inline-flex;align-items:center;gap:.6rem}
.brand img{width:40px;height:40px}
.foot .brand img{width:32px;height:32px}
.hero__in{position:relative}
.hero__badge{position:absolute;right:var(--pad);bottom:3rem;width:clamp(180px,22vw,300px);height:auto;filter:drop-shadow(0 10px 40px rgba(0,0,0,.6))}
.ref{color:var(--acc);margin-top:1.5rem;display:inline-block;border:1px solid rgba(226,97,58,.45);padding:.45rem .75rem}
.contact__mail{display:flex;align-items:center;gap:2rem;border:1px solid var(--line2);background:var(--bg2);padding:clamp(1.5rem,4vw,3rem);align-self:start}
.contact__mail img{width:clamp(96px,12vw,160px);height:auto;flex:none}
.contact__mail .mono{color:var(--mut)}
.mail{display:block;font:800 clamp(1.4rem,2.4vw,2.1rem)/1.15 var(--fd);font-stretch:75%;text-decoration:none;margin-top:.4rem;overflow-wrap:anywhere;transition:color .2s}
.mail:hover{color:var(--acc)}
.contact__mail .ref{color:var(--acc)}
@media (max-width:1020px){.hero__badge{position:static;width:140px;margin-bottom:1.5rem}}
@media (max-width:520px){.contact__mail{flex-direction:column;align-items:flex-start;gap:1.25rem}.brand img{width:32px;height:32px}}
.brand__t{font-weight:inherit}
