/* KRITIVITY — style.css */
/* ============ TOKENS ============ */
:root{
  --ink:#0b0709;
  --ink-2:#120c0e;
  --crimson:#83080f;
  --crimson-hot:#c00f1c;
  --bone:#ece5da;
  --bone-dim:rgba(236,229,218,.55);
  --bone-ghost:rgba(236,229,218,.14);
  --font-d:"Archivo",sans-serif;
  --font-s:"Instrument Serif",serif;
  --font-m:"Space Mono",monospace;
  --ease:cubic-bezier(.76,0,.24,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:auto}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{
  background:var(--ink);
  color:var(--bone);
  font-family:var(--font-d);
  font-weight:400;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--crimson);color:var(--bone)}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
img{max-width:100%;display:block}

/* ============ GRAIN + PROGRESS + CURSOR ============ */
.grain{position:fixed;inset:-100%;width:300%;height:300%;pointer-events:none;z-index:2000;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 8s steps(10) infinite}
@keyframes grain{0%,100%{transform:translate(0,0)}10%{transform:translate(-5%,-8%)}30%{transform:translate(3%,-12%)}50%{transform:translate(-9%,4%)}70%{transform:translate(7%,9%)}90%{transform:translate(-4%,6%)}}
.progress{position:fixed;top:0;left:0;height:3px;width:100%;z-index:1500;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,var(--crimson),var(--crimson-hot))}
.cursor,.cursor-dot{position:fixed;top:0;left:0;pointer-events:none;z-index:3000;border-radius:50%;transform:translate(-50%,-50%)}
.cursor{width:36px;height:36px;border:1px solid var(--bone);opacity:.7;transition:width .35s var(--ease),height .35s var(--ease),opacity .3s,background-color .3s;display:flex;align-items:center;justify-content:center}
.cursor-dot{width:5px;height:5px;background:var(--crimson-hot)}
.cursor .cursor-label{font-family:var(--font-m);font-size:10px;letter-spacing:.15em;text-transform:uppercase;opacity:0;transition:opacity .25s;color:var(--bone)}
.cursor.is-hover{width:70px;height:70px;background:rgba(131,8,15,.85);border-color:transparent;opacity:1}
.cursor.is-hover .cursor-label{opacity:1}
.cursor.is-down{transform:translate(-50%,-50%) scale(.8)}
@media (hover:none),(pointer:coarse){.cursor,.cursor-dot{display:none}}

/* ============ PRELOADER ============ */
.preloader{position:fixed;inset:0;z-index:4000;display:flex;align-items:center;justify-content:center;background:var(--ink)}
.preloader__panel{position:absolute;inset:0;background:var(--crimson);transform:scaleY(0);transform-origin:50% 100%}
.preloader__count{position:absolute;bottom:4vw;right:4vw;font-family:var(--font-m);font-size:clamp(3rem,8vw,7rem);font-weight:700;line-height:1;color:var(--bone)}
.preloader__words{overflow:hidden;height:1.4em;font-family:var(--font-s);font-style:italic;font-size:clamp(1.6rem,4vw,3rem);color:var(--bone-dim)}
.preloader__words span{display:block;line-height:1.4}

/* ============ NAV ============ */
.nav{position:fixed;top:0;left:0;right:0;z-index:1000;display:flex;align-items:center;justify-content:space-between;padding:1.4rem 4vw;mix-blend-mode:difference}
.nav__logo{font-weight:900;font-stretch:125%;letter-spacing:.02em;font-size:1.25rem;text-transform:uppercase;display:flex;align-items:baseline;gap:.35rem}
/* .nav__logo em{font-family:var(--font-s);font-style:italic;font-weight:400;color:var(--bone)} */
.nav__logo img {max-width: 180px; height: auto;}
.nav__right{display:flex;align-items:center;gap:2rem}
.nav__cta{font-family:var(--font-m);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;border:1px solid var(--bone-ghost);padding:.7rem 1.2rem;border-radius:99px;transition:.3s}
.nav__cta:hover{background:var(--bone);color:var(--ink)}
.burger{display:flex;flex-direction:column;gap:6px;width:34px}
.burger span{height:2px;width:100%;background:var(--bone);transition:transform .45s var(--ease),width .45s var(--ease)}
.burger span:nth-child(2){width:60%;margin-left:auto}
.burger:hover span:nth-child(2){width:100%}
body.menu-open .burger span:first-child{transform:translateY(4px) rotate(45deg)}
body.menu-open .burger span:nth-child(2){transform:translateY(-4px) rotate(-45deg);width:100%}
@media screen and (max-width:600px){
  .nav__cta {display: none;}
}

/* ============ MENU ============ */
.menu{position:fixed;inset:0;z-index:900;background:var(--crimson);clip-path:circle(0% at calc(100% - 4vw - 17px) 2.4rem);visibility:hidden;display:flex;flex-direction:column;justify-content:center;padding:0 6vw}
.menu__links{list-style:none;display:flex;flex-direction:column}
.menu__links li{overflow:hidden}
.menu__links a{display:flex;align-items:baseline;gap:1.5rem;font-weight:900;font-stretch:110%;text-transform:uppercase;font-size:clamp(2.4rem,7.5vw,5.6rem);line-height:1.12;transform:translateY(110%);transition:color .3s;color:var(--bone)}
.menu__links a i{font-family:var(--font-m);font-style:normal;font-weight:400;font-size:.8rem;color:rgba(236,229,218,.6)}
.menu__links a:hover{color:var(--ink)}
.menu__foot{position:absolute;bottom:3rem;left:6vw;right:6vw;display:flex;justify-content:space-between;font-family:var(--font-m);font-size:.72rem;letter-spacing:.15em;text-transform:uppercase;color:rgba(236,229,218,.7)}
.menu__foot a:hover{color:var(--ink)}
@media screen and (max-width:600px){
  .menu__foot {display: flex; flex-direction: column;}
}

/* ============ HERO ============ */
.hero{min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;position:relative;padding:0 4vw 0;overflow:hidden}
.hero__bg{position:absolute;inset:0;pointer-events:none}
.hero__orb{position:absolute;top:-20%;right:-15%;width:60vw;height:60vw;border-radius:50%;background:radial-gradient(circle at 35% 35%,rgba(192,15,28,.5),rgba(131,8,15,.22) 45%,transparent 70%);filter:blur(20px)}
.hero__k{position:absolute;bottom:-12vw;left:-3vw;font-weight:900;font-stretch:125%;font-size:56vw;line-height:1;color:transparent;-webkit-text-stroke:1px rgba(236,229,218,.07)}
.hero__meta{display:flex;justify-content:space-between;align-items:flex-end;font-family:var(--font-m);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--bone-dim);padding:7.5rem 0 4vh;position:relative;z-index:2}
.hero__meta .avail i{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--crimson-hot);margin-right:.5rem;animation:pulse 1.8s infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(192,15,28,.7)}60%{box-shadow:0 0 0 9px rgba(192,15,28,0)}}
.hero__meta .typecycle{display:inline-flex;align-items:baseline}
.hero__meta .typecycle__caret{display:inline-block;width:2px;height:.85em;margin-left:2px;background:var(--crimson-hot);animation:caretBlink .8s step-end infinite}
@keyframes caretBlink{0%,100%{opacity:1}50%{opacity:0}}
.hero__title{position:relative;z-index:2;font-weight:900;font-stretch:116%;text-transform:uppercase;font-size:clamp(2.9rem,10.2vw,10.2rem);line-height:.94;letter-spacing:-.01em;padding-right:2vw}
.hero__title .line{display:block;overflow:hidden}
.hero__title .line>span{display:block;transform:translateY(115%) rotate(4deg);transform-origin:0 100%;padding-right:.1em;padding-bottom:.04em}
.hero__title em{font-family:var(--font-s);font-style:italic;font-weight:400;text-transform:none;font-size:.92em;color:var(--crimson-hot);letter-spacing:0}
.hero__title .line--indent{padding-left:12vw}
.hero__row{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:3rem;padding:4.5vh 0 5vh;flex-wrap:wrap}
.hero__sub{max-width:38ch;font-size:clamp(.95rem,1.15vw,1.15rem);line-height:1.65;color:var(--bone-dim)}
.hero__sub strong{color:var(--bone);font-weight:600}
.badge{position:relative;width:120px;height:120px;flex:none}
.badge svg{width:100%;height:100%;animation:spin 14s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.badge__arrow{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:1.6rem;color:var(--crimson-hot)}
.badge text{font-family:var(--font-m);font-size:9.2px;letter-spacing:.32em;text-transform:uppercase;fill:var(--bone-dim)}
@media screen and (max-width:600px){
  .hero__meta {display: flex;flex-direction: column;align-items: flex-start;}
}

/* marquee band */
.band{position:relative;z-index:2;border-top:1px solid var(--bone-ghost);border-bottom:1px solid var(--bone-ghost);overflow:hidden;padding:1.1rem 0;margin:0 -4vw}
.band__track{display:flex;gap:3.5rem;width:max-content;white-space:nowrap;will-change:transform}
.band__track span{font-family:var(--font-m);font-size:.8rem;letter-spacing:.25em;text-transform:uppercase;color:var(--bone-dim);display:flex;align-items:center;gap:3.5rem}
.band__track span::after{content:"✦";color:var(--crimson-hot);font-size:.9rem}

/* ============ SECTION SCAFFOLD ============ */
.section{padding:16vh 4vw;position:relative}
.sec-head{display:flex;align-items:baseline;gap:2rem;margin-bottom:8vh}
.sec-head__no{font-family:var(--font-m);font-size:.8rem;color:var(--crimson-hot);letter-spacing:.2em}
.sec-head__t{font-weight:900;font-stretch:120%;text-transform:uppercase;font-size:clamp(2rem,5.4vw,4.6rem);line-height:1;letter-spacing:-.01em}
.sec-head__t em{font-family:var(--font-s);font-style:italic;font-weight:400;text-transform:none;color:var(--crimson-hot)}
.reveal .line{display:block;overflow:hidden}
.reveal .line>span{display:block;transform:translateY(115%);transition:transform 1s var(--ease-out);padding-right:.1em;padding-bottom:.05em}
.reveal.in .line>span{transform:translateY(0)}
@keyframes mq{to{transform:translateX(var(--mq-dist,-50%))}}
.mq-run{animation:mq var(--mq-dur,30s) linear infinite}
.mq-run.mq-rev{animation-direction:reverse}

/* ============ MANIFESTO ============ */
.manifesto{position:relative;overflow:hidden}
.manifesto__k{position:absolute;top:50%;right:-8vw;transform:translateY(-50%);font-weight:900;font-stretch:125%;font-size:44vw;color:transparent;-webkit-text-stroke:1px rgba(131,8,15,.25);pointer-events:none}
.manifesto__label{font-family:var(--font-m);font-size:.72rem;letter-spacing:.25em;text-transform:uppercase;color:var(--crimson-hot);margin-bottom:3rem}
.manifesto__text{font-weight:700;font-stretch:105%;font-size:clamp(1.7rem,4.4vw,3.9rem);line-height:1.22;max-width:22ch;text-transform:uppercase;letter-spacing:-.01em}
.manifesto__text .w{color:var(--bone-ghost);transition:color .3s linear}
.manifesto__text .w.lit{color:var(--bone)}
.manifesto__text .w.accent.lit{color:var(--crimson-hot)}
.manifesto__sig{margin-top:4rem;font-family:var(--font-s);font-style:italic;font-size:clamp(1.2rem,2vw,1.7rem);color:var(--bone-dim)}

/* ============ STATS ============ */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));border-top:1px solid var(--bone-ghost);border-bottom:1px solid var(--bone-ghost);margin:0 4vw}
.stat{padding:4rem 2rem;border-right:1px solid var(--bone-ghost);position:relative;overflow:hidden}
.stat:last-child{border-right:0}
.stat::before{content:"";position:absolute;inset:0;background:var(--crimson);transform:translateY(101%);transition:transform .5s var(--ease)}
.stat:hover::before{transform:translateY(0)}
.stat>*{position:relative}
.stat__n{font-weight:900;font-stretch:120%;font-size:clamp(2.6rem,5vw,4.4rem);line-height:1;display:flex;align-items:baseline}
.stat__n sup{font-size:.45em;color:var(--crimson-hot);transition:color .3s}
.stat:hover .stat__n sup{color:var(--bone)}
.stat__l{margin-top:1rem;font-family:var(--font-m);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--bone-dim)}
.stat:hover .stat__l{color:rgba(236,229,218,.85)}

/* ============ SERVICES ============ */
.services__list{border-top:1px solid var(--bone-ghost)}
.srv{border-bottom:1px solid var(--bone-ghost);position:relative;overflow:hidden}
.srv__fill{position:absolute;inset:0;background:var(--crimson);transform:scaleY(0);transform-origin:50% 100%;transition:transform .55s var(--ease)}
.srv:hover .srv__fill,.srv.open .srv__fill{transform:scaleY(1)}
.srv__head{position:relative;display:grid;grid-template-columns:5rem 1fr auto;align-items:center;gap:2rem;padding:2.6rem 1rem;cursor:pointer}
.srv__no{font-family:var(--font-m);font-size:.78rem;color:var(--crimson-hot);letter-spacing:.15em;transition:color .3s}
.srv:hover .srv__no,.srv.open .srv__no{color:var(--bone)}
.srv__t{font-weight:900;font-stretch:118%;text-transform:uppercase;font-size:clamp(1.5rem,4.6vw,3.8rem);line-height:1;letter-spacing:-.01em;transition:transform .5s var(--ease)}
.srv:hover .srv__t{transform:translateX(1.4vw) skewX(-4deg)}
.srv__arrow{font-size:clamp(1.4rem,2.6vw,2.2rem);transition:transform .5s var(--ease)}
.srv:hover .srv__arrow{transform:rotate(45deg)}
.srv.open .srv__arrow{transform:rotate(225deg)}
.srv__body{position:relative;max-height:0;overflow:hidden;transition:max-height .7s var(--ease)}
.srv.open .srv__body{max-height:340px}
.srv__inner{display:flex;flex-wrap:wrap;gap:2.5rem;justify-content:space-between;padding:0 1rem 3rem 7rem}
.srv__desc{max-width:52ch;line-height:1.7;color:rgba(236,229,218,.85)}
.srv__tags{display:flex;flex-wrap:wrap;gap:.6rem;max-width:420px;align-content:flex-start}
.srv__tags span{font-family:var(--font-m);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;border:1px solid rgba(236,229,218,.35);padding:.5rem .9rem;border-radius:99px;transition:.3s}
.srv__tags span:hover{background:var(--bone);color:var(--crimson);border-color:var(--bone)}
@media(max-width:720px){.srv__head{grid-template-columns:3rem 1fr auto;padding:1.8rem .5rem}.srv__inner{padding:0 1.5rem 1.5rem 1.5rem;}}

/* ============ TILTED DIVIDER ============ */
.tilt{position:relative;padding:9vh 0;overflow:hidden}
.tilt__strip{background:var(--crimson);transform:rotate(-2.5deg) scale(1.06);padding:1.3rem 0;overflow:hidden;box-shadow:0 0 60px rgba(131,8,15,.45)}
.tilt__track{display:flex;gap:3rem;width:max-content;white-space:nowrap;will-change:transform}
.tilt__track span{font-weight:900;font-stretch:120%;text-transform:uppercase;font-size:clamp(1.1rem,2.2vw,1.9rem);letter-spacing:.04em;display:flex;align-items:center;gap:3rem;color:var(--bone)}
.tilt__track span::after{content:"◆";font-size:.7em;color:var(--ink)}

/* ============ PROCESS (horizontal pin) ============ */
.process{padding:16vh 0 0}
.process .sec-head{padding:0 4vw}
.process__viewport{overflow:hidden}
.process__track{display:flex;gap:3vw;padding:0 4vw 14vh;width:max-content;will-change:transform}
.pcard{flex:none;width:min(74vw,520px);border:1px solid var(--bone-ghost);padding:3rem 2.5rem 3.4rem;position:relative;background:var(--ink-2);transition:border-color .4s}
.pcard:hover{border-color:var(--crimson-hot)}
.pcard__no{font-family:var(--font-s);font-style:italic;font-size:clamp(4rem,7vw,6.5rem);line-height:1;color:transparent;-webkit-text-stroke:1px var(--crimson-hot)}
.pcard__t{font-weight:900;font-stretch:118%;text-transform:uppercase;font-size:clamp(1.5rem,2.6vw,2.2rem);margin:1.8rem 0 1.2rem}
.pcard__d{color:var(--bone-dim);line-height:1.7}
.pcard__bar{position:absolute;left:0;top:0;width:100%;height:4px;background:var(--crimson);transform:scaleX(0);transform-origin:0 50%;transition:transform .6s var(--ease)}
.pcard:hover .pcard__bar{transform:scaleX(1)}
.process__viewport{scrollbar-width:none;-ms-overflow-style:none}
.process__viewport::-webkit-scrollbar{display:none}
.process__hint{display:flex;align-items:center;gap:.8rem;margin-left:auto;font-family:var(--font-m);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--bone-dim)}
.process__hint i{font-style:normal;color:var(--crimson-hot);animation:chev 1.2s infinite}
.process__hint i:nth-child(2){animation-delay:.15s}
.process__hint i:nth-child(3){animation-delay:.3s}
@keyframes chev{0%,100%{opacity:.2;transform:translateX(0)}50%{opacity:1;transform:translateX(4px)}}
.process__bar{height:2px;background:var(--bone-ghost);margin:0 4vw 10vh;position:relative}
.process__bar i{position:absolute;inset:0;background:var(--crimson-hot);transform:scaleX(0);transform-origin:0 50%}

/* ============ BACKGROUND FX ============ */
.bgfx{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.bgfx__orb{position:absolute;border-radius:50%;filter:blur(30px)}
.bgfx__orb--1{width:34vw;height:34vw;top:18%;left:-14%;background:radial-gradient(circle,rgba(131,8,15,.32),transparent 70%);animation:drift1 34s ease-in-out infinite}
.bgfx__orb--2{width:28vw;height:28vw;top:58%;right:-10%;background:radial-gradient(circle,rgba(192,15,28,.22),transparent 70%);animation:drift2 42s ease-in-out infinite}
@keyframes drift1{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(9vw,-7vh) scale(1.15)}66%{transform:translate(3vw,9vh) scale(.92)}}
@keyframes drift2{0%,100%{transform:translate(0,0) scale(1)}40%{transform:translate(-8vw,-10vh) scale(1.1)}75%{transform:translate(-3vw,6vh) scale(.9)}}
.bgfx__glyph{position:absolute;font-weight:900;font-stretch:120%;color:transparent;-webkit-text-stroke:1px rgba(236,229,218,.07);user-select:none}
.bgfx__glyph--1{font-size:11vw;top:24%;right:12%;animation:floaty 18s ease-in-out infinite}
.bgfx__glyph--2{font-size:8vw;top:66%;left:8%;font-family:var(--font-s);font-style:italic;-webkit-text-stroke-color:rgba(131,8,15,.22);animation:floaty 22s ease-in-out infinite reverse}
.bgfx__glyph--3{font-size:6vw;top:44%;left:46%;-webkit-text-stroke-color:rgba(236,229,218,.05);animation:spinfloat 40s linear infinite}
@keyframes floaty{0%,100%{transform:translateY(0) rotate(-6deg)}50%{transform:translateY(-5vh) rotate(6deg)}}
@keyframes spinfloat{to{transform:rotate(360deg)}}
main,footer,.stats{position:relative;z-index:1}

/* ============ WHY US ============ */
.why__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1px;background:var(--bone-ghost);border:1px solid var(--bone-ghost)}
.why__cell{background:var(--ink);padding:3rem 2.4rem;position:relative;overflow:hidden;transition:background .4s}
.why__cell::after{content:"";position:absolute;right:-30px;bottom:-30px;width:110px;height:110px;border-radius:50%;background:radial-gradient(circle,rgba(131,8,15,.5),transparent 70%);opacity:0;transition:opacity .5s;filter:blur(6px)}
.why__cell:hover::after{opacity:1}
.why__cell b{display:block;font-family:var(--font-m);font-size:.7rem;letter-spacing:.2em;color:var(--crimson-hot);margin-bottom:1.4rem}
.why__cell h3{font-weight:900;font-stretch:115%;text-transform:uppercase;font-size:clamp(1.15rem,1.9vw,1.5rem);margin-bottom:1rem}
.why__cell p{color:var(--bone-dim);line-height:1.7;font-size:.95rem}
.why__cell p i{font-style:normal;color:var(--bone);font-family:var(--font-m);font-size:.78em}
.award{display:flex;flex-wrap:wrap;align-items:center;gap:1.6rem;border:1px solid rgba(131,8,15,.6);background:linear-gradient(100deg,rgba(131,8,15,.22),transparent 60%);padding:2rem 2.4rem;margin-top:4rem;position:relative;overflow:hidden}
.award::before{content:"";position:absolute;top:0;left:-80%;width:60%;height:100%;background:linear-gradient(100deg,transparent,rgba(236,229,218,.07),transparent);animation:sheen 4s ease-in-out infinite}
@keyframes sheen{0%,60%{left:-80%}100%{left:130%}}
.award__medal{font-size:2.2rem}
.award b{font-weight:900;font-stretch:115%;text-transform:uppercase;font-size:clamp(1rem,1.8vw,1.35rem);display:block}
.award span{color:var(--bone-dim);font-size:.9rem}
.award .msme{margin-left:auto;font-family:var(--font-m);font-size:.65rem;letter-spacing:.2em;text-transform:uppercase;border:1px solid var(--bone-ghost);padding:.6rem 1rem;border-radius:99px;color:var(--bone-dim)}
@media screen and (max-width:600px){
  .award .msme {margin-left: 0;}
}

/* ============ WORK GALLERY ============ */
.work{padding:16vh 0;overflow:hidden}
.work .sec-head{padding:0 4vw;margin-bottom:5vh}
.work__strip{display:flex;gap:2vw;width:max-content;padding:2vh 4vw;will-change:transform;cursor:grab}
.work__strip.dragging{cursor:grabbing}
.wcard{flex:none;display:block;width:min(78vw,420px);aspect-ratio:4/4.7;position:relative;overflow:hidden;border:1px solid var(--bone-ghost);background:var(--ink-2);transition:border-color .4s;user-select:none;-webkit-user-drag:none}
.wcard:hover{border-color:var(--crimson-hot)}
.wcard__art{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;overflow:hidden}
.wcard__art::before{content:attr(data-letter);font-weight:900;font-stretch:125%;font-size:19rem;line-height:1;color:transparent;-webkit-text-stroke:1.5px rgba(236,229,218,.16);transition:transform .8s var(--ease),-webkit-text-stroke-color .5s}
.wcard:hover .wcard__art::before{transform:scale(1.12) rotate(-5deg);-webkit-text-stroke-color:rgba(192,15,28,.7)}
.wcard--a .wcard__art{background:linear-gradient(150deg,#1c0508 0%,var(--ink-2) 55%,#25060a 100%)}
.wcard--b .wcard__art{background:radial-gradient(circle at 75% 20%,rgba(131,8,15,.5),var(--ink-2) 60%)}
.wcard--c .wcard__art{background:linear-gradient(25deg,var(--ink-2) 40%,rgba(131,8,15,.35))}
.wcard__meta{position:absolute;left:0;right:0;bottom:0;padding:1.6rem;background:linear-gradient(transparent,rgba(11,7,9,.94) 40%)}
.wcard__cat{font-family:var(--font-m);font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:var(--crimson-hot)}
.wcard__t{font-weight:900;font-stretch:115%;text-transform:uppercase;font-size:1.25rem;margin-top:.5rem}
.wcard__d{color:var(--bone-dim);font-size:.85rem;margin-top:.4rem;line-height:1.6}
.wcard__no{position:absolute;top:1.2rem;right:1.4rem;font-family:var(--font-s);font-style:italic;font-size:1.6rem;color:var(--bone-dim)}
.wcard__go{display:inline-block;margin-top:.9rem;font-family:var(--font-m);font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:var(--bone-dim);opacity:0;transform:translateY(6px);transition:opacity .4s,transform .4s var(--ease-out),color .4s}
.wcard:hover .wcard__go{opacity:1;transform:translateY(0);color:var(--crimson-hot)}
@media (hover:none){.wcard__go{opacity:1;transform:none}}

/* ============ LOGO GRID ============ */
.logos{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:1px;background:var(--bone-ghost);border:1px solid var(--bone-ghost);margin:6vh 4vw 0}
.logo-tile{background:var(--ink);display:flex;align-items:center;justify-content:center;padding:0;min-height:96px;position:relative;overflow:hidden}
.logo-tile img{height:auto;max-width:80%;object-fit:contain;filter:grayscale(1) invert(.88) opacity(.55);transition:filter .4s,transform .4s}
.logo-tile:hover img{filter:grayscale(0) invert(0) opacity(1);transform:scale(1.06)}
.logo-tile:hover{background:var(--bone)}
.logo-tile--more{font-family:var(--font-s);font-style:italic;font-size:1.05rem;color:var(--bone-dim)}
.logo-tile--more:hover{background:var(--ink)}

/* ============ LIFE GALLERY ============ */
.life{padding:16vh 4vw}
.life__grid{display:grid;grid-template-columns:repeat(12,1fr);gap:1.2vw;grid-auto-rows:7.5vw}
.gtile{position:relative;overflow:hidden;border:1px solid var(--bone-ghost);background:var(--ink-2)}
.gtile--a{grid-column:span 5;grid-row:span 4}
.gtile--b{grid-column:span 4;grid-row:span 3}
.gtile--c{grid-column:span 3;grid-row:span 3}
.gtile--d{grid-column:span 4;grid-row:span 3;grid-row-start:auto}
.gtile--e{grid-column:span 5;grid-row:span 3; transform: translate(0%, 3.382%) translate3d(0px, 0px, 0px);}
.gtile--f{grid-column:span 3;grid-row:span 4}
.gtile img{width:100%;height:100%;object-fit:cover;filter:grayscale(.35) contrast(1.05);transition:transform 1s var(--ease),filter .6s;transform:scale(1.01)}
.gtile:hover img{transform:scale(1.08);filter:grayscale(0) contrast(1)}
.gtile__cap{position:absolute;left:0;right:0;bottom:0;padding:1.1rem 1.3rem;background:linear-gradient(transparent,rgba(11,7,9,.9));display:flex;justify-content:space-between;align-items:baseline;opacity:0;transform:translateY(10px);transition:.45s var(--ease)}
.gtile:hover .gtile__cap{opacity:1;transform:none}
.gtile__cap b{font-weight:900;font-stretch:115%;text-transform:uppercase;font-size:.9rem}
.gtile__cap span{font-family:var(--font-m);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--crimson-hot)}
.gtile.noimg img{display:none}
.gtile.noimg::before{content:attr(data-ph);position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:1rem;font-family:var(--font-s);font-style:italic;font-size:clamp(.9rem,1.4vw,1.2rem);color:var(--bone-dim);background:radial-gradient(circle at 30% 30%,rgba(131,8,15,.25),var(--ink-2) 70%)}
.gtile.noimg::after{content:"✦";position:absolute;top:1rem;right:1.2rem;color:var(--crimson-hot)}
@media(max-width:760px){.life__grid{grid-template-columns:repeat(6,1fr);grid-auto-rows:16vw}.gtile--a,.gtile--e{grid-column:span 6}.gtile--b,.gtile--d{grid-column:span 3}.gtile--c,.gtile--f{grid-column:span 3}}

/* ============ FAQ ============ */
.faq__list{max-width:880px}
.fq{border-bottom:1px solid var(--bone-ghost)}
.fq__q{width:100%;display:flex;justify-content:space-between;align-items:center;gap:2rem;text-align:left;padding:1.8rem .4rem;font-weight:700;font-stretch:110%;font-size:clamp(1rem,1.7vw,1.3rem);transition:color .3s}
.fq__q:hover{color:var(--crimson-hot)}
.fq__q em{font-style:normal;font-family:var(--font-m);font-size:1.3rem;color:var(--crimson-hot);transition:transform .45s var(--ease);flex:none}
.fq.open .fq__q em{transform:rotate(45deg)}
.fq__a{max-height:0;overflow:hidden;transition:max-height .55s var(--ease)}
.fq__a p{padding:0 .4rem 1.8rem;color:var(--bone-dim);line-height:1.75;max-width:65ch}

/* ============ FOOTER COLUMNS ============ */
.footer__cols{display:grid;grid-template-columns:2fr 1fr 1fr 1.4fr;gap:3rem;padding-bottom:7vh;border-bottom:1px solid var(--bone-ghost);margin-bottom:7vh}
.footer__cols h4{font-family:var(--font-m);font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;color:var(--crimson-hot);margin-bottom:1.4rem}
.footer__cols ul{list-style:none}
.footer__cols li{margin-bottom:.7rem}
.footer__cols a{color:var(--bone-dim);transition:color .3s,padding-left .3s}
.footer__cols a:hover{color:var(--bone);padding-left:.4rem}
.footer__brand p{color:var(--bone-dim);line-height:1.75;max-width:34ch;margin-top:1rem}
.footer__brand .nav__logo{font-size:1.4rem}
.footer__cols address{font-style:normal;color:var(--bone-dim);line-height:1.9;font-size:.92rem}
.footer__cols address a{color:var(--bone)}
@media(max-width:860px){.footer__cols{grid-template-columns:1fr 1fr}}

/* ============ CLIENTS ============ */
.clients{padding:16vh 0}
.clients .sec-head{padding:0 4vw}
.crow{overflow:hidden;padding:.6rem 0}
.crow__track{display:flex;gap:4rem;width:max-content;white-space:nowrap;will-change:transform}
.crow__track span{font-weight:900;font-stretch:120%;text-transform:uppercase;font-size:clamp(2rem,5vw,4.2rem);line-height:1.1;color:transparent;-webkit-text-stroke:1px rgba(236,229,218,.28);transition:color .35s,-webkit-text-stroke-color .35s;display:flex;align-items:center;gap:4rem}
.crow__track span::after{content:"·";color:var(--crimson-hot);-webkit-text-stroke:0}
.crow__track span:hover{color:var(--crimson-hot);-webkit-text-stroke-color:transparent}
.clients__note{padding:5vh 4vw 0;font-family:var(--font-s);font-style:italic;font-size:1.25rem;color:var(--bone-dim);text-align:center}

/* ============ TESTIMONIALS ============ */
.testi{position:relative;padding-top:10vh;padding-bottom:10vh}
.testi__mark{position:absolute;top:4vh;left:4vw;font-family:var(--font-s);font-size:clamp(4.5rem,8vw,7rem);line-height:.6;color:var(--crimson);opacity:.9}
.testi__stage{position:relative;max-width:780px;margin:0 auto;padding:0 4vw;min-height:clamp(210px,30vh,280px);width:100%}
.tslide{position:absolute;inset:0;padding:0 4vw;opacity:0;transform:translateY(24px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out);pointer-events:none}
.tslide.active{opacity:1;transform:none;pointer-events:auto}
.tslide blockquote{font-family:var(--font-s);font-style:italic;font-size:clamp(1.1rem,1.9vw,1.55rem);line-height:1.5}
.tslide figcaption{margin-top:1.4rem;display:flex;align-items:center;gap:1rem}
.tslide .avatar{width:44px;height:44px;border-radius:50%;background:var(--crimson);display:flex;align-items:center;justify-content:center;font-weight:900;font-size:.9rem;flex:none}
.tslide .who b{display:block;font-weight:700}
.tslide .who i{font-style:normal;font-family:var(--font-m);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--bone-dim)}
.testi__nav{display:flex;gap:1rem;justify-content:center;margin-top:3vh}
.testi__nav button{width:46px;height:46px;border:1px solid var(--bone-ghost);border-radius:50%;font-size:1.1rem;transition:.3s}
.testi__nav button:hover{background:var(--crimson);border-color:var(--crimson)}
.testi__dots{display:flex;gap:.5rem;align-items:center}
.testi__dots i{width:6px;height:6px;border-radius:50%;background:var(--bone-ghost);transition:.3s}
.testi__dots i.on{background:var(--crimson-hot);transform:scale(1.5)}

/* ============ CAREERS ============ */
.careers__wrap{border:1px solid var(--bone-ghost);position:relative;overflow:hidden}
.careers__ticker{background:var(--crimson);overflow:hidden;padding:.8rem 0}
.careers__ticker .band__track span{color:var(--bone);font-weight:700}
.careers__ticker .band__track span::after{color:var(--ink)}
.role{display:flex;justify-content:space-between;align-items:center;gap:2rem;padding:2rem 3rem;border-bottom:1px solid var(--bone-ghost);position:relative;overflow:hidden}
.role:last-child{border-bottom:0}
.role::before{content:"";position:absolute;inset:0;background:var(--bone);transform:translateX(-101%);transition:transform .45s var(--ease)}
.role:hover::before{transform:translateX(0)}
.role>*{position:relative;transition:color .3s}
.role:hover>*{color:var(--ink)}
.role__t{font-weight:900;font-stretch:115%;text-transform:uppercase;font-size:clamp(1.1rem,2.4vw,1.9rem)}
.role__a{font-family:var(--font-m);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;display:flex;align-items:center;gap:.6rem}
.role__a::after{content:"→";font-size:1rem;transition:transform .3s}
.role:hover .role__a::after{transform:translateX(6px)}
.careers__blurb{padding:3rem;color:var(--bone-dim);line-height:1.7;max-width:60ch}
.careers__blurb b{color:var(--bone)}
@media screen and (max-width:600px) {
  .careers__blurb {padding: 2rem 1rem;}
  .role {padding: 2rem 1rem;}
}

/* ============ CONTACT ============ */
.contact{min-height:100svh;display:flex;flex-direction:column;justify-content:center;position:relative;overflow:hidden}
.contact__orb{position:absolute;bottom:-30%;left:-15%;width:55vw;height:55vw;border-radius:50%;background:radial-gradient(circle at 60% 40%,rgba(192,15,28,.4),rgba(131,8,15,.18) 50%,transparent 72%);filter:blur(24px)}
.contact__t{position:relative;font-weight:900;font-stretch:122%;text-transform:uppercase;font-size:clamp(2.6rem,8.4vw,8rem);line-height:.95;letter-spacing:-.01em}
.contact__t em{font-family:var(--font-s);font-style:italic;font-weight:400;text-transform:none;color:var(--crimson-hot)}
.contact__row{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:4rem;margin-top:7vh}
.magnet{display:inline-flex;align-items:center;justify-content:center;width:clamp(150px,17vw,210px);height:clamp(150px,17vw,210px);border-radius:50%;background:var(--crimson);font-family:var(--font-m);font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;text-align:center;line-height:1.7;transition:background .3s;will-change:transform}
.magnet:hover{background:var(--crimson-hot)}
.contact__info{font-family:var(--font-m);font-size:.78rem;letter-spacing:.1em;line-height:2.2;color:var(--bone-dim)}
.contact__info a{color:var(--bone);position:relative}
.contact__info a::after{content:"";position:absolute;left:0;bottom:-2px;width:100%;height:1px;background:var(--crimson-hot);transform:scaleX(0);transform-origin:0 50%;transition:transform .35s var(--ease)}
.contact__info a:hover::after{transform:scaleX(1)}

/* ============ FOOTER ============ */
.footer{border-top:1px solid var(--bone-ghost);padding:8vh 4vw 3vh;overflow:hidden}
.footer__giant{font-weight:900;font-stretch:125%;text-transform:uppercase;font-size:clamp(3rem,12.6vw,13rem);line-height:.9;text-align:center;color:transparent;-webkit-text-stroke:1px rgba(236,229,218,.3);transition:color .6s,-webkit-text-stroke-color .6s;cursor:default}
.footer__giant:hover{color:var(--crimson);-webkit-text-stroke-color:transparent}
.footer__row{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1.5rem;margin-top:7vh;font-family:var(--font-m);font-size:.68rem;letter-spacing:.15em;text-transform:uppercase;color:var(--bone-dim)}
.footer__row a{position:relative}
.footer__row a:hover{color:var(--crimson-hot)}