/* ==========================================================================
   SINLIMITE — Work page motion system
   A GSAP-driven, Habito-inspired experience: load reveal, split-text intros,
   a mouse-tracked reel, marquees, a paper→ink Selected Work flip with hover
   reveals, an inline-image approach headline, sliding service cards and a
   partner-quote accordion. Monochrome + a single swappable accent.

   Palette is intentionally warm-mono. Change --wk-accent freely
   (anything but green/lime, per brief). Inherits font/reset from page.css.
   ========================================================================== */

.wk{
  --wk-paper:#F3F2ED;              /* warm off-white ground */
  --wk-ink:#0B0B0A;               /* near-black */
  --wk-copy:#57564F;              /* muted text */
  --wk-line:rgba(11,11,10,.14);
  --wk-field:#E6E4DC;             /* image / placeholder ground */
  --wk-accent:#FF4A1C;            /* single accent — swap freely, never green/lime */
  --wk-pad:clamp(16px,3vw,44px);
  --wk-ease:cubic-bezier(.16,1,.3,1);
  background:var(--wk-paper);
  color:var(--wk-ink);
  overflow-x:hidden;
}
.wk img{display:block;max-width:100%}
.wk button{font:inherit;color:inherit;cursor:pointer}
.wk [hidden]{display:none!important}
.wk a:focus-visible,.wk button:focus-visible{outline:2px solid var(--wk-accent);outline-offset:4px}

.skip-link{position:fixed;top:12px;left:var(--wk-pad);z-index:1200;background:var(--wk-paper);border:1px solid var(--wk-ink);padding:12px;transform:translateY(-180%)}
.skip-link:focus{transform:none}

.wk-label{font-size:.8125rem;line-height:1.4;color:var(--wk-copy);margin:0}

/* ------------------------------- LOADER -------------------------------- */
/* flex + text-align centering (works on all mobile browsers; grid place-items
   shorthand is unreliable on some iOS Safari versions) */
.wk-loader{position:fixed;inset:0;width:100%;z-index:1000;background:var(--wk-ink);color:var(--wk-paper);display:flex;align-items:center;justify-content:center;text-align:center;will-change:transform}
.wk-loader__mark{display:block;font-weight:900;letter-spacing:-.045em;font-size:clamp(30px,7vw,86px);text-transform:uppercase}

/* -------------------------------- HERO --------------------------------- */
/* A compact editorial cover: the headline owns the upper-left, while the
   reel enters from outside the frame and locks into the lower-right. The
   overlap is intentional and keeps the first screen visually full. */
.wk-hero{position:relative;min-height:100svh;padding:clamp(18px,2vw,30px) var(--wk-pad) clamp(24px,3vw,44px);overflow:hidden}
.wk-hero__stage{position:relative;min-height:calc(100svh - clamp(42px,5vw,74px));display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:clamp(18px,2.5vh,34px)}
.wk-hero__top{position:relative;z-index:5;display:grid;grid-template-columns:1fr 2fr;gap:var(--wk-pad);align-items:start;padding-bottom:12px;border-bottom:1px solid var(--wk-line);font-size:.75rem;line-height:1.2;text-transform:uppercase;letter-spacing:.055em}
.wk-hero__index{display:flex;justify-content:space-between;gap:18px;margin:2px 0 0;color:var(--wk-copy)}

.wk-hero__composition{position:relative;min-height:clamp(470px,70vh,850px);isolation:isolate}
.wk-hero__head{position:absolute;top:clamp(8px,3.5vh,46px);left:0;z-index:3;margin:0;text-align:left;font-weight:900;text-transform:uppercase;letter-spacing:-.058em;line-height:.78;font-size:clamp(4.2rem,10.4vw,11.5rem);color:var(--wk-ink);pointer-events:none}
.wk-hero__line{display:inline-block;width:max-content;max-width:94vw}
.wk-hero__line--shift{margin-left:clamp(18px,8vw,150px);color:var(--wk-paper);-webkit-text-stroke:1.5px var(--wk-ink);text-shadow:0 0 0 var(--wk-ink)}
.wk-hero__line--small{margin-left:clamp(0px,2.4vw,42px);font-size:.66em;letter-spacing:-.045em;color:var(--wk-paper);-webkit-text-stroke:1.25px var(--wk-ink)}

.wk-reel{position:absolute;right:0;bottom:0;width:min(74vw,1450px);aspect-ratio:16/9;margin:0;overflow:hidden;background:var(--wk-ink);z-index:1;will-change:transform,clip-path;box-shadow:0 32px 70px -45px rgba(11,11,10,.5)}
.wk-reel::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;border:1px solid rgba(243,242,237,.18);mix-blend-mode:screen}
.wk-reel__float{--hero-x:0px;--hero-y:0px;--hero-rx:0deg;--hero-ry:0deg;position:absolute;inset:-2%;will-change:transform;transform:translate3d(var(--hero-x),var(--hero-y),0) rotateX(var(--hero-rx)) rotateY(var(--hero-ry));transform-origin:center;transition:transform .65s var(--wk-ease)}
.wk-reel__media{display:block;width:100%;height:100%;object-fit:cover}
.wk-reel__label{position:absolute;right:calc(min(74vw,1450px) + 18px);bottom:0;z-index:4;margin:0;display:flex;flex-direction:column;align-items:flex-end;gap:5px;font-size:.72rem;line-height:1.2;text-transform:uppercase;letter-spacing:.06em;color:var(--wk-copy);white-space:nowrap;writing-mode:vertical-rl;transform:rotate(180deg)}
.wk-reel__label>span+span{color:var(--wk-ink)}

.wk-hero__foot{position:relative;z-index:5;display:grid;grid-template-columns:minmax(240px,1fr) auto;gap:var(--wk-pad);align-items:end;padding-top:2px}
.wk-hero__lede{max-width:34ch;margin:0;font-size:clamp(1.05rem,1.45vw,1.5rem);line-height:1.25}
.wk-hero__actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}

.wk-btn{display:inline-flex;align-items:center;gap:8px;padding:12px 24px;border:1px solid var(--wk-ink);border-radius:100px;font-size:.9375rem;transition:background .45s var(--wk-ease),color .45s var(--wk-ease),border-color .45s var(--wk-ease)}
.wk-btn:hover{background:var(--wk-ink);color:var(--wk-paper)}
.wk-btn--ghost{border-color:var(--wk-line)}
.wk-btn--ghost:hover{background:var(--wk-accent);border-color:var(--wk-accent);color:#fff}

/* ------------------------------- MARQUEE ------------------------------- */
.wk-marquee{overflow:hidden;border-top:1px solid var(--wk-line);border-bottom:1px solid var(--wk-line);padding:14px 0;background:var(--wk-paper)}
.wk-marquee__track{display:flex;width:max-content;white-space:nowrap;will-change:transform}
.wk-marquee__track span{font-weight:900;text-transform:uppercase;letter-spacing:-.02em;font-size:clamp(1.1rem,2.4vw,2.1rem)}
.wk-marquee--foot{border-top:0}

/* -------- INTRO: studio statement paired with the 3:4 motion study -------- */
.wk-intro{min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding:clamp(70px,10vw,150px) var(--wk-pad)}
.wk-intro__grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,.82fr);gap:clamp(38px,6vw,110px);align-items:center}
.wk-intro .wk-label{margin-bottom:clamp(26px,3vw,44px)}
.wk-intro__body{max-width:60ch}
.wk-intro__lead{font-size:clamp(1.5rem,2.7vw,2.6rem);font-weight:600;line-height:1.14;letter-spacing:-.02em;margin:0}
.wk-intro__sub{font-size:clamp(1.05rem,1.4vw,1.35rem);line-height:1.42;color:var(--wk-copy);margin:clamp(28px,3vw,40px) 0 0;max-width:52ch}
.wk-intro__reel{margin:0;justify-self:end;width:100%;max-width:440px}
/* height:auto is load-bearing. The element carries width/height attributes for
   CLS, and those map to a presentational height hint. With no height declared
   here that hint wins over aspect-ratio, and the video renders at its full
   intrinsic 1920px instead of the 3/4 box. */
.wk-intro__reel-media{display:block;width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;background:var(--wk-field)}
.wk-intro__reel figcaption{display:flex;justify-content:space-between;gap:8px;margin-top:12px;font-size:.75rem;text-transform:uppercase;letter-spacing:.05em;color:var(--wk-copy)}

/* line-reveal mask */
[data-text-reveal] .wk-line-mask{overflow:hidden;padding-bottom:.02em}

/* ---------------------------- SELECTED WORK ---------------------------- */
.wk-work{position:relative;background:var(--wk-paper);color:var(--wk-ink);padding:0 0 clamp(50px,7vw,110px);overflow:hidden}
.wk-work__headblock{min-height:82vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:clamp(60px,10vh,120px) var(--wk-pad) clamp(30px,5vh,60px)}
.wk-work__headwrap{will-change:transform;transform-origin:center}
.wk-work__head{font-weight:900;text-transform:uppercase;letter-spacing:-.045em;line-height:.82;font-size:clamp(3.6rem,16vw,16rem);margin:0}
.wk-work__years{font-size:.9rem;opacity:.55;margin:14px 0 0}

.wk-work__strip{display:flex;gap:clamp(16px,2vw,34px);padding:0 var(--wk-pad);overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;cursor:grab;scrollbar-width:none;-ms-overflow-style:none}
.wk-work__strip::-webkit-scrollbar{display:none}
.wk-work__strip.is-dragging{cursor:grabbing;scroll-snap-type:none}
.wk-item{flex:0 0 clamp(250px,27vw,390px);scroll-snap-align:start;text-decoration:none;color:inherit;min-width:0}
.wk-item--wide{flex-basis:clamp(360px,46vw,720px)}
.wk-item__meta{display:flex;justify-content:space-between;gap:10px;font-size:.78rem;text-transform:uppercase;letter-spacing:.03em;padding:0 2px 10px;opacity:.75}
.wk-item__frame{position:relative;aspect-ratio:3/4;overflow:hidden;background:var(--wk-field)}
.wk-item--wide .wk-item__frame{aspect-ratio:16/9}
.wk-item__img{position:absolute;inset:0;will-change:transform}
.wk-item__img img{width:100%;height:100%;object-fit:cover;transition:filter .35s var(--wk-ease)}
.wk-item__overlay{position:absolute;inset:0;display:flex;align-items:flex-end;padding:16px;opacity:0;background:linear-gradient(0deg,rgba(11,11,10,.6),rgba(11,11,10,.05) 55%,transparent)}
.wk-item__big{display:block;overflow:hidden;font-weight:900;text-transform:uppercase;letter-spacing:-.03em;line-height:.92;font-size:clamp(2rem,4.2vw,3.6rem);color:var(--wk-accent)}
.wk-item__cat{display:flex;justify-content:space-between;align-items:baseline;gap:18px;font-size:.92rem;opacity:.75;margin:14px 2px 0}
.wk-item__open{flex:none;border-bottom:1px solid currentColor;padding-bottom:2px;white-space:nowrap}
.wk-work__hint{padding:20px var(--wk-pad) 0;font-size:.78rem;letter-spacing:.03em;text-transform:uppercase;opacity:.5;text-align:right}

/* ------------------------------ APPROACH ------------------------------- */
.wk-approach{position:relative;background:var(--wk-paper);color:var(--wk-ink);padding:clamp(30px,5vw,80px) var(--wk-pad) clamp(70px,10vw,170px);overflow:hidden}
.wk-approach__headwrap{min-height:78vh;display:flex;align-items:center;justify-content:center;will-change:transform;transform-origin:center}
.wk-approach__head{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.02em .2em;text-align:center;font-weight:900;text-transform:uppercase;letter-spacing:-.035em;line-height:.9;font-size:clamp(2.3rem,9vw,8.5rem);margin:0;transform-origin:center}
.wk-approach__img{display:inline-block;overflow:hidden;width:0;height:.74em;background:var(--wk-field);align-self:center;flex:0 0 auto}
.wk-approach__img img{height:100%;width:100%;object-fit:cover;filter:grayscale(1)}
.wk-approach__list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(30px,4vw,64px) var(--wk-pad)}
.wk-approach__item{will-change:transform,opacity}
.wk-approach__num{display:block;font-size:.85rem;color:var(--wk-accent);margin-bottom:14px}
.wk-approach__item h3{font-size:clamp(1.35rem,2.4vw,2.4rem);font-weight:700;letter-spacing:-.02em;line-height:1.02;margin:0 0 14px}
.wk-approach__item p{font-size:clamp(1rem,1.15vw,1.2rem);line-height:1.46;color:var(--wk-copy);margin:0;max-width:46ch}

/* ------------------------------ SERVICES ------------------------------- */
.wk-services{position:relative;background:var(--wk-paper);color:var(--wk-ink);padding:clamp(80px,12vw,200px) 0;overflow:hidden}
.wk-services__bg{position:absolute;top:32%;left:0;width:100%;display:flex;pointer-events:none;z-index:0}
.wk-services__bg span{font-weight:900;text-transform:uppercase;font-size:clamp(9rem,30vw,32rem);line-height:.8;letter-spacing:-.04em;color:var(--wk-ink);opacity:.07;white-space:nowrap;will-change:transform;padding-left:30vw}
.wk-services__label{position:relative;z-index:1;padding:0 var(--wk-pad)}
.wk-services__grid{position:relative;z-index:1;display:grid;grid-template-columns:repeat(3,1fr);align-items:start;gap:var(--wk-pad);padding:clamp(34px,5vw,72px) var(--wk-pad) 0}
.wk-service{background:#fff;border:1px solid rgba(11,11,10,.06);box-shadow:0 40px 70px -40px rgba(11,11,10,.25);padding:clamp(24px,2.4vw,42px);will-change:transform}
.wk-service:nth-child(2){margin-top:clamp(20px,5vw,70px)}
.wk-service:nth-child(3){margin-top:clamp(40px,10vw,140px)}
.wk-service__title{font-size:clamp(1.6rem,2.4vw,2.5rem);font-weight:700;letter-spacing:-.02em;line-height:1;margin:0 0 24px}
.wk-service__list{list-style:none;margin:0;padding:0;display:grid;gap:13px}
.wk-service__list li{position:relative;padding-left:30px;font-size:1rem;line-height:1.3}
.wk-service__list li::before{content:"";position:absolute;left:0;top:.05em;width:18px;height:18px;border-radius:50%;background:var(--wk-accent)}
.wk-service__list li::after{content:"";position:absolute;left:6px;top:.42em;width:6px;height:3px;border-left:1.5px solid #fff;border-bottom:1.5px solid #fff;transform:rotate(-45deg)}

/* ------------------------------ PARTNERS ------------------------------- */
.wk-partners{background:var(--wk-field);color:var(--wk-ink);padding:clamp(60px,9vw,140px) var(--wk-pad)}
.wk-partners__head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:clamp(28px,4vw,56px)}
.wk-partners__title{font-weight:900;text-transform:uppercase;letter-spacing:-.035em;line-height:.85;font-size:clamp(2.6rem,7vw,7rem);margin:0}
.wk-partners__list{border-top:1px solid var(--wk-line)}
.wk-partner{border-bottom:1px solid var(--wk-line)}
.wk-partner__bar{display:grid;grid-template-columns:56px minmax(0,1.4fr) minmax(0,1.4fr) 70px 34px;align-items:center;gap:16px;width:100%;background:none;border:0;text-align:left;padding:22px 0}
.wk-partner__num{color:var(--wk-copy);font-size:.85rem}
.wk-partner__name{font-size:clamp(1.1rem,1.9vw,1.7rem);font-weight:600;letter-spacing:-.01em;transition:color .35s var(--wk-ease)}
.wk-partner__co{color:var(--wk-copy);font-size:1rem}
.wk-partner__year{color:var(--wk-copy);font-size:.85rem;text-align:right}
.wk-partner__toggle{justify-self:end;font-size:1.1rem;transition:transform .5s var(--wk-ease),color .35s var(--wk-ease)}
.wk-partner:hover .wk-partner__name{color:var(--wk-accent)}
.wk-partner.is-active .wk-partner__toggle{transform:rotate(180deg);color:var(--wk-accent)}
.wk-partner__panel{overflow:hidden;height:0}
.wk-partner.is-active .wk-partner__panel{height:auto}
.wk-partner__quote{max-width:72ch;font-size:clamp(1.1rem,1.6vw,1.5rem);line-height:1.42;margin:0 0 20px;padding-top:2px}
.wk-partner__tags{list-style:none;display:flex;gap:10px;flex-wrap:wrap;margin:0 0 28px;padding:0}
.wk-partner__tags li{border:1px solid var(--wk-line);border-radius:100px;padding:7px 16px;font-size:.85rem}

/* ------------------------------- PROCESS ------------------------------- */
.wk-process{position:relative;background:var(--wk-ink);color:var(--wk-paper);padding:clamp(70px,10vw,160px) var(--wk-pad)}
.wk-label--light{color:rgba(243,242,237,.62)}
.wk-process__head{margin-bottom:clamp(38px,6vw,84px)}
.wk-process__head .wk-label{margin-bottom:clamp(22px,3vw,38px)}
.wk-process__title{font-weight:900;text-transform:uppercase;letter-spacing:-.035em;line-height:.9;font-size:clamp(2.3rem,7vw,7rem);margin:0}
.wk-process__list{list-style:none;margin:0;padding:0;border-top:1px solid rgba(243,242,237,.18)}
.wk-process__step{display:grid;grid-template-columns:120px minmax(0,1fr);gap:24px;align-items:start;padding:clamp(26px,3vw,46px) 0;border-bottom:1px solid rgba(243,242,237,.18);will-change:transform,opacity}
.wk-process__num{color:var(--wk-accent);font-size:1rem;padding-top:.4em}
.wk-process__body h3{font-size:clamp(1.5rem,3vw,3rem);font-weight:700;letter-spacing:-.02em;line-height:1;margin:0 0 14px}
.wk-process__body p{font-size:clamp(1.05rem,1.3vw,1.35rem);line-height:1.45;color:rgba(243,242,237,.76);margin:0;max-width:62ch}

/* -------------------------------- CTA ---------------------------------- */
.wk-cta{background:var(--wk-paper);color:var(--wk-ink);text-align:center;padding:clamp(80px,12vw,200px) var(--wk-pad) clamp(56px,8vw,120px)}
.wk-cta .wk-label{margin-bottom:0}
.wk-cta__title{font-weight:900;text-transform:uppercase;letter-spacing:-.045em;line-height:.85;font-size:clamp(3.4rem,14vw,13rem);margin:clamp(20px,3vw,36px) 0 clamp(28px,4vw,48px)}
.wk-cta__link{display:inline-flex;align-items:center;gap:10px;font-size:clamp(1.1rem,1.6vw,1.5rem);border-bottom:1px solid var(--wk-ink);padding:8px 2px}
.wk-cta__link span{transition:transform .4s var(--wk-ease)}
.wk-cta__link:hover span{transform:translate(5px,-5px)}

/* ------------------------------- FOOTER -------------------------------- */
.wk-footer{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;padding:26px var(--wk-pad) 42px;font-size:.9rem;background:var(--wk-paper)}
.wk-footer__nav{display:flex;gap:22px}
.wk-footer__copy{color:var(--wk-copy)}
.wk-footer a{transition:color .3s var(--wk-ease)}
.wk-footer a:hover{color:var(--wk-accent)}

/* section stacking (added by JS): each stacked section casts a soft shadow up
   onto the previous one as it slides over, which parallaxes down + darkens */
.wk-stack{box-shadow:0 -30px 60px -26px rgba(11,11,10,.28)}
.wk-overlay{position:absolute;inset:0;background:var(--wk-ink);opacity:0;pointer-events:none;z-index:5}

/* ---------------------------- RESPONSIVE ------------------------------- */
@media (max-width:900px){
  .wk-hero{min-height:auto;padding-top:18px}
  .wk-hero__stage{min-height:0;grid-template-rows:auto auto auto;gap:clamp(22px,4vh,38px)}
  .wk-hero__top{grid-template-columns:1fr}
  .wk-hero__index span:last-child{display:none}
  .wk-hero__index{width:100%;justify-content:flex-end}
  .wk-hero__composition{min-height:clamp(550px,82vw,700px)}
  .wk-hero__head{top:0;font-size:clamp(3.8rem,15vw,7.2rem);line-height:.8}
  .wk-hero__line--shift{margin-left:clamp(10px,7vw,56px)}
  .wk-hero__line--small{margin-left:0;font-size:.62em}
  .wk-reel{width:min(84vw,680px);bottom:0}
  .wk-reel__label{right:auto;left:0;bottom:0;writing-mode:horizontal-tb;transform:none;align-items:flex-start}
  .wk-hero__foot{grid-template-columns:1fr;align-items:start}
  .wk-hero__actions{justify-content:flex-start}
  .wk-intro{min-height:auto}
  .wk-intro__grid{grid-template-columns:1fr;gap:clamp(28px,6vw,44px)}
  .wk-intro__reel{justify-self:start;max-width:340px}
  .wk-approach__list{grid-template-columns:1fr;gap:30px}
  .wk-services__grid{grid-template-columns:1fr}
  .wk-service:nth-child(2),.wk-service:nth-child(3){margin-top:0}
  .wk-process__step{grid-template-columns:1fr;gap:10px}
  .wk-process__num{padding-top:0}
  .wk-partner__bar{grid-template-columns:40px 1fr 30px;row-gap:4px}
  .wk-partner__co{grid-column:2;font-size:.9rem}
  .wk-partner__year{display:none}
  .wk-item{flex-basis:56vw}
  .wk-item--wide{flex-basis:76vw}
}
@media (max-width:580px){
  .wk-hero{padding-bottom:30px}
  .wk-hero__stage{gap:24px}
  .wk-hero__composition{min-height:clamp(430px,120vw,600px)}
  .wk-hero__head{font-size:clamp(3.15rem,16.8vw,5.2rem);letter-spacing:-.06em}
  .wk-hero__line--shift{margin-left:0}
  .wk-hero__line--small{font-size:.58em;margin-top:.16em}
  .wk-reel{width:92%;bottom:24px}
  .wk-reel__label{bottom:0;font-size:.66rem;flex-direction:row;gap:8px}
  .wk-hero__foot{gap:22px}
  .wk-hero__actions{display:grid;grid-template-columns:1fr 1fr;width:100%}
  .wk-btn{justify-content:center;padding:11px 14px;font-size:.84rem}
  .wk-item{flex-basis:72vw}
  .wk-item--wide{flex-basis:88vw}
}

/* --------------------------- REDUCED MOTION ---------------------------- */
@media (prefers-reduced-motion:reduce){
  .wk-loader{display:none}
  .wk-reel,.wk-reel__float{transform:none!important;clip-path:none!important}
  .wk-approach__img{width:4.5em!important}
  .wk-marquee__track{transform:none!important}
}