/* ============================================================
   KRAFTIMA — "Signal" v4 · interaction-led creative technology
   Static-first art direction: with cursor+motion removed, the
   composition must still read as an elite international studio.
   ============================================================ */
:root{
  /* ============================================================
     KRAFTIMA BRAND TOKENS — sampled from the authentic logo
     (k.fatimsa.png): Blue #003A9B, Gold #FEB600. All derived.
     ============================================================ */
  /* raw brand anchors */
  --k-blue:#003A9B;        --k-blue-elec:#1F52A7;   --k-blue-soft:#4771B7;
  --k-blue-deep:#002665;   --k-blue-dark:#001841;
  --k-gold:#FEB600;        --k-gold-bright:#FEBF1F; --k-gold-soft:#E5AA10;  --k-gold-deep:#D09500;
  /* surfaces — blue-black DNA (not brown/orange) */
  --surface-black:#020511; --surface-0:#03081A;     --surface-1:#000816;
  --surface-2:#000C1F;     --surface-3:#00102B;
  /* text — cool soft-white */
  --text-primary:#F4F6FB;  --text-secondary:#AEB6C6; --text-dim:#7F8AA0;
  --line-subtle:rgba(244,246,251,.10); --line-strong:rgba(244,246,251,.20);
  --scrim:2,5,17; /* surface-black rgb for gradient scrims */
  /* semantic roles */
  --accent-primary:var(--k-gold);      /* precision highlight: CTA, cursor, progress, active */
  --accent-secondary:var(--k-blue-soft);/* interactive blue */
  --brand-atmos:var(--k-blue);         /* large lighting fields, transitions */

  /* ---- legacy aliases mapped to brand roles (so existing rules just work) ----
     old warm palette RETIRED; these now resolve to the Kraftima system. */
  --ink:var(--surface-0); --ink-1:var(--surface-1); --ink-2:var(--surface-2); --ink-3:var(--surface-3);
  --bone:var(--text-primary); --bone-dim:var(--text-secondary); --muted:var(--text-dim);
  --hair:var(--line-subtle); --hair-2:var(--line-strong);
  --amber:var(--accent-primary); --amber-2:var(--k-gold-bright);

  --sans:"Space Grotesk","Helvetica Neue",Arial,sans-serif;
  --serif:"Fraunces",Georgia,serif;
  --d0:clamp(3.4rem,12vw,14rem); --d1:clamp(2.8rem,8.5vw,9.5rem); --d2:clamp(2.2rem,6vw,5.6rem);
  --d3:clamp(1.8rem,4vw,3.4rem); --h:clamp(1.05rem,1.4vw,1.4rem); --body:clamp(.98rem,1.05vw,1.1rem); --small:.76rem;
  --ease:cubic-bezier(.22,1,.36,1); --ease-io:cubic-bezier(.76,0,.24,1);
  --t-fast:.35s; --t-base:.6s; --t-slow:.9s; --t-hero:1.15s;
  --gutter:clamp(1.1rem,4vw,4.5rem); --maxw:1720px;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{background:var(--ink);color:var(--bone);font-family:var(--sans);font-size:var(--body);line-height:1.55;letter-spacing:-.01em;overflow-x:hidden;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
body.is-locked{overflow:hidden;}
a{color:inherit;text-decoration:none;} img{max-width:100%;display:block;}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer;}
::selection{background:var(--amber);color:var(--ink);}
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter);}
.eyebrow{font-size:var(--small);letter-spacing:.22em;text-transform:uppercase;color:var(--muted);font-weight:500;display:flex;align-items:center;gap:.4rem;}
.eyebrow .n{color:var(--amber);}
.serif{font-family:var(--serif);font-style:italic;font-weight:400;}
.grain{position:fixed;inset:0;z-index:3;pointer-events:none;opacity:.045;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}
.scrub{position:fixed;top:0;left:0;height:2px;width:0;background:var(--amber);z-index:200;transition:width .1s linear;}

/* CURSOR */
.cursor{position:fixed;top:0;left:0;z-index:9999;pointer-events:none;mix-blend-mode:difference;will-change:transform;}
.cursor__dot{position:absolute;width:6px;height:6px;border-radius:50%;background:var(--bone);transform:translate(-50%,-50%);transition:width .3s var(--ease),height .3s,opacity .3s;}
.cursor__ring{position:absolute;width:40px;height:40px;border-radius:50%;border:1px solid var(--bone);transform:translate(-50%,-50%) scale(1);transition:transform .45s var(--ease),opacity .4s,border-color .3s;display:flex;align-items:center;justify-content:center;}
.cursor__label{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--bone);opacity:0;transform:scale(.5);transition:opacity .3s,transform .3s var(--ease);white-space:nowrap;}
body[class*="cur-"] .cursor__ring{transform:translate(-50%,-50%) scale(2.6);}
body.cur-view .cursor__ring{background:var(--amber);border-color:var(--amber);} body.cur-view .cursor__label{color:var(--ink);}
body[class*="cur-"] .cursor__dot{opacity:0;} body[class*="cur-"] .cursor__label{opacity:1;transform:scale(1);}
body.cur-hidden .cursor{opacity:0;}
@media(hover:none){.cursor{display:none;}}

/* ============ MEDIA TREATMENTS (type-driven, fix #5) ============ */
.pm{position:absolute;inset:0;overflow:hidden;background:var(--ink-2);}
.pm__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;}
.pm__grid{position:absolute;inset:0;z-index:0;opacity:.3;background-image:linear-gradient(var(--hair) 1px,transparent 1px),linear-gradient(90deg,var(--hair) 1px,transparent 1px);background-size:44px 44px;}
.pm__glow{position:absolute;width:60%;aspect-ratio:1;border-radius:50%;filter:blur(60px);background:var(--brand-atmos);opacity:.20;top:50%;left:50%;transform:translate(-50%,-50%);z-index:0;}
.pm--noimg .pm__glow,.pm--deco.pm--noimg .pm__glow{opacity:.22;}
/* packaging → dimensional plinth + floor shadow */
.pm--pack{display:flex;align-items:center;justify-content:center;background:radial-gradient(120% 90% at 50% 30%,var(--ink-2),var(--ink));}
.pm--pack .pm__plinth{position:relative;width:64%;height:74%;border-radius:6px;overflow:hidden;box-shadow:0 40px 80px rgba(0,0,0,.55),0 0 0 1px var(--hair);transform:perspective(1200px) rotateX(4deg);z-index:1;}
.pm--pack .pm__plinth .pm__img{position:absolute;}
.pm--pack .pm__floor{position:absolute;bottom:8%;left:12%;right:12%;height:14%;background:radial-gradient(60% 100% at 50% 0,rgba(0,0,0,.6),transparent 70%);filter:blur(10px);z-index:0;}
/* commerce → browser/device frame */
.pm--screen{display:flex;align-items:center;justify-content:center;padding:8% 10%;background:linear-gradient(140deg,var(--ink-1),var(--ink));}
.pm--screen .pm__browser{position:relative;width:100%;height:100%;border-radius:8px;overflow:hidden;box-shadow:0 30px 70px rgba(0,0,0,.5),0 0 0 1px var(--hair-2);}
.pm--screen .pm__bar{position:absolute;top:0;left:0;right:0;height:26px;background:var(--ink-3);display:flex;align-items:center;gap:6px;padding:0 10px;z-index:2;}
.pm--screen .pm__bar i{width:8px;height:8px;border-radius:50%;background:var(--muted);opacity:.6;}
.pm--screen .pm__img{top:26px;height:calc(100% - 26px);}
/* identity → brand board + swatch rail */
.pm--brand{display:flex;align-items:center;justify-content:center;background:linear-gradient(120deg,var(--ink-2),var(--ink));}
.pm--brand .pm__board{position:relative;width:72%;height:72%;border-radius:6px;overflow:hidden;box-shadow:0 30px 60px rgba(0,0,0,.45),0 0 0 1px var(--hair);z-index:1;}
.pm--brand .pm__swatches{position:absolute;right:8%;bottom:10%;display:flex;flex-direction:column;gap:8px;z-index:2;}
.pm--brand .pm__swatches i{width:34px;height:34px;border-radius:4px;box-shadow:0 6px 14px rgba(0,0,0,.4);}
.pm--brand .pm__swatches i:nth-child(1){background:var(--k-blue);} .pm--brand .pm__swatches i:nth-child(2){background:var(--k-gold);} .pm--brand .pm__swatches i:nth-child(3){background:var(--text-primary);border:1px solid var(--hair-2);}
/* campaign → keyframe with rec tick */
.pm--frame{display:flex;align-items:center;justify-content:center;background:var(--ink);}
.pm--frame .pm__keyframe{position:relative;width:84%;height:78%;border-radius:4px;overflow:hidden;box-shadow:0 0 0 1px var(--hair-2);z-index:1;}
.pm--frame .pm__keyframe::before,.pm--frame .pm__keyframe::after{content:"";position:absolute;top:8px;bottom:8px;width:2px;background:rgba(244,246,251,.4);z-index:3;}
.pm--frame .pm__keyframe::before{left:8px;} .pm--frame .pm__keyframe::after{right:8px;}
.pm--frame .pm__rec{position:absolute;top:12px;right:16px;width:10px;height:10px;border-radius:50%;background:var(--amber);z-index:4;box-shadow:0 0 12px var(--amber);}
.pm--deco{background:var(--ink-2);}

/* ============================ HERO ============================ */
.hero{position:relative;height:100svh;min-height:660px;overflow:hidden;}
#hero-gl{position:absolute;inset:0;z-index:0;width:100%;height:100%;display:block;opacity:0;transition:opacity 1.2s var(--ease);}
.hero__stage{position:absolute;inset:0;z-index:1;}
.hero.gl-live .hslide__media{opacity:0;transition:opacity .5s var(--ease);} /* WebGL owns media once transitioning */
.hslide{position:absolute;inset:0;opacity:0;pointer-events:none;transition:opacity var(--t-base) var(--ease);}
.hslide.is-active{opacity:1;pointer-events:auto;}
.hslide__media{position:absolute;inset:-6%;border-radius:8px;overflow:hidden;transform:translate3d(calc(var(--px,0)*-20px),calc(var(--py,0)*-20px),0) scale(1.06);transition:transform .5s var(--ease),opacity .5s;}
.hslide__scrim{position:absolute;inset:0;background:linear-gradient(90deg,var(--ink) 0%,rgba(var(--scrim),.74) 44%,rgba(var(--scrim),.28) 100%);}
.hslide__content{position:absolute;left:var(--gutter);bottom:clamp(6rem,13vh,8.5rem);right:var(--gutter);z-index:2;transform:translate3d(calc(var(--px,0)*7px),calc(var(--py,0)*7px),0);}
.hslide__kicker{margin-bottom:1.3rem;}
.hslide__title{font-size:var(--d1);line-height:.9;font-weight:600;letter-spacing:-.04em;max-width:15ch;}
.hslide__title .serif{display:block;}
.hslide__sub{margin-top:1.4rem;max-width:44ch;color:var(--bone-dim);font-size:var(--h);}
.hslide__facts{display:flex;flex-wrap:wrap;gap:1.6rem;margin-top:1.6rem;}
.hslide__facts span{display:flex;flex-direction:column;gap:.2rem;font-size:.9rem;color:var(--bone);}
.hslide__facts i{font-style:normal;font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);}
.hslide__cta{margin-top:1.8rem;display:inline-flex;align-items:center;gap:.7em;font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;color:var(--amber);}
.hslide__cta .arw{transition:transform var(--t-fast) var(--ease);} .hslide__cta:hover .arw{transform:translate(4px,-4px);}
/* per-slide compositions */
.hslide--right .hslide__media{inset:-6% -6% -6% 42%;} .hslide--right .hslide__scrim{background:linear-gradient(270deg,var(--ink) 0%,rgba(var(--scrim),.72) 44%,rgba(var(--scrim),.22) 100%);}
.hslide--right .hslide__content{text-align:right;} .hslide--right .hslide__title,.hslide--right .hslide__sub{margin-left:auto;} .hslide--right .hslide__facts{justify-content:flex-end;}
.hslide--full .hslide__scrim{background:radial-gradient(130% 100% at 28% 74%,rgba(var(--scrim),.18),var(--ink) 76%);}
.hslide--split .hslide__media{inset:-6% -6% -6% 48%;clip-path:polygon(14% 0,100% 0,100% 100%,0 100%);} .hslide--split .hslide__scrim{background:linear-gradient(90deg,var(--ink) 32%,transparent 72%);}
.hslide--center .hslide__media{inset:5% 16%;} .hslide--center .hslide__scrim{background:radial-gradient(92% 82% at 50% 50%,transparent,var(--ink) 84%);}
.hslide--center .hslide__content{text-align:center;left:0;right:0;padding-inline:var(--gutter);} .hslide--center .hslide__title,.hslide--center .hslide__sub{margin-inline:auto;} .hslide--center .hslide__facts{justify-content:center;}
.hslide--lower .hslide__media{inset:-6% -6% 34% -6%;} .hslide--lower .hslide__scrim{background:linear-gradient(0deg,var(--ink) 10%,rgba(var(--scrim),.32) 62%,transparent 100%);}
.line-mask{display:block;overflow:hidden;} .line-mask>span{display:block;transform:translateY(108%);transition:transform var(--t-hero) var(--ease);}
.hslide.is-active .line-mask>span{transform:translateY(0);} .hslide.is-active .line-mask:nth-child(2)>span{transition-delay:.09s;}
.hslide__sub,.hslide__facts,.hslide__cta{opacity:0;transform:translateY(16px);}
.hslide.is-active .hslide__sub{transition:opacity var(--t-slow) var(--ease) .3s,transform var(--t-slow) var(--ease) .3s;opacity:1;transform:none;}
.hslide.is-active .hslide__facts{transition:opacity var(--t-slow) var(--ease) .4s,transform var(--t-slow) var(--ease) .4s;opacity:1;transform:none;}
.hslide.is-active .hslide__cta{transition:opacity var(--t-slow) var(--ease) .5s,transform var(--t-slow) var(--ease) .5s;opacity:1;transform:none;}
.hero__foot{position:absolute;left:0;right:0;bottom:0;z-index:4;display:flex;align-items:center;gap:1.5rem;padding:1.5rem var(--gutter);}
.hero__count{font-size:.95rem;font-weight:500;white-space:nowrap;} .hero__count .tot{color:var(--muted);}
.hero__prog{flex:1;height:1px;background:var(--hair-2);position:relative;overflow:hidden;}
.hero__prog i{position:absolute;left:0;top:0;height:100%;width:0;background:var(--amber);transition:width var(--t-base) var(--ease-io);}
.hero__dots{display:flex;gap:.6rem;} .hero__dots button{width:8px;height:8px;border-radius:50%;background:var(--hair-2);transition:background var(--t-fast),transform var(--t-fast) var(--ease);}
.hero__dots button.on{background:var(--amber);transform:scale(1.35);}
.hero__hint{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);white-space:nowrap;}

/* ============================ PROP ============================ */
.prop{padding:clamp(6rem,15vh,13rem) 0;}
.prop__lead{font-size:var(--d3);line-height:1.1;font-weight:500;letter-spacing:-.02em;max-width:24ch;}
.prop__lead .word{display:inline-block;opacity:.14;transition:opacity .5s var(--ease);} .prop__lead .word.lit{opacity:1;}
.prop__lead em{font-family:var(--serif);font-style:italic;color:var(--amber);font-weight:400;}
.prop__meta{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem;margin-top:5rem;border-top:1px solid var(--hair);padding-top:2.5rem;}
.prop__stat .k{font-size:clamp(2rem,4vw,3.4rem);font-weight:600;letter-spacing:-.02em;}
.prop__stat .l{color:var(--muted);font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;margin-top:.4rem;}

/* ============================ WORK ============================ */
.work{padding:clamp(3rem,6vh,6rem) 0 clamp(2rem,4vh,4rem);}
.work__head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:2rem;flex-wrap:wrap;gap:1rem;}
.work__head h2{font-size:var(--d3);font-weight:600;letter-spacing:-.02em;line-height:1;}
.work__toggle{display:flex;gap:.4rem;border:1px solid var(--hair);border-radius:100px;padding:.3rem;}
.work__toggle button{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding:.5em 1.1em;border-radius:100px;transition:background .3s,color .3s;}
.work__toggle button.on{background:var(--amber);color:var(--ink);}
.reveal{opacity:0;transform:translateY(48px);transition:opacity var(--t-slow) var(--ease),transform var(--t-slow) var(--ease);} .reveal.in{opacity:1;transform:none;}
.ws{position:relative;margin-bottom:var(--gutter);border-radius:10px;overflow:hidden;}
.pfacts{display:flex;flex-wrap:wrap;gap:1.2rem;} .pfacts.center{justify-content:center;}
.pf{display:flex;flex-direction:column;gap:.15rem;font-size:.82rem;color:var(--bone);} .pf i{font-style:normal;font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);}
.ws .num{font-size:.78rem;color:var(--bone-dim);letter-spacing:.14em;}
/* 1 full-bleed */
.ws1{height:92vh;min-height:600px;} .ws1 .pm{transform:scale(var(--scale,1.12));transition:transform .1s linear;}
.ws1 .scrim{position:absolute;inset:0;background:linear-gradient(0deg,rgba(var(--scrim),.88),transparent 55%);z-index:2;}
.ws1__cap{position:absolute;left:clamp(1.5rem,4vw,4rem);bottom:clamp(1.5rem,4vw,4rem);right:clamp(1.5rem,4vw,4rem);z-index:3;}
.ws1__cap .t{font-size:var(--d2);font-weight:600;letter-spacing:-.03em;line-height:.92;margin:.4rem 0 1.2rem;}
/* 2 spatial layers */
.ws2{height:88vh;min-height:560px;display:flex;align-items:center;justify-content:center;background:var(--ink-1);border:1px solid var(--hair);}
.ws2 .plane{position:absolute;border-radius:8px;overflow:hidden;transition:transform .4s var(--ease);}
.ws2 .p1{width:56%;height:62%;transform:translate3d(calc(var(--px,0)*-28px),calc(var(--py,0)*-28px),0);opacity:.55;}
.ws2 .p2{width:44%;height:56%;box-shadow:0 40px 90px rgba(0,0,0,.5);transform:translate3d(calc(var(--px,0)*-56px),calc(var(--py,0)*-56px),0);z-index:2;}
.ws2 .p3{width:24%;height:32%;right:14%;bottom:15%;border:1px solid var(--hair-2);transform:translate3d(calc(var(--px,0)*60px),calc(var(--py,0)*52px),0);z-index:1;}
.ws2__t{position:relative;z-index:5;font-size:var(--d2);font-weight:600;letter-spacing:-.03em;line-height:.9;text-align:center;pointer-events:none;mix-blend-mode:difference;transform:translate3d(calc(var(--px,0)*12px),calc(var(--py,0)*12px),0);}
.ws2__meta{position:absolute;bottom:2rem;left:0;right:0;justify-content:center;z-index:6;}
/* 3 sticky env */
.ws3{position:relative;height:200vh;margin-bottom:var(--gutter);}
.ws3__pin{position:sticky;top:0;height:100vh;overflow:hidden;border-radius:10px;display:flex;align-items:center;}
.ws3__env{position:absolute;inset:0;transition:transform .3s var(--ease);}
.ws3 .scrim{position:absolute;inset:0;background:linear-gradient(90deg,var(--ink) 8%,rgba(var(--scrim),.55) 45%,transparent 82%);z-index:1;}
.ws3__copy{position:relative;z-index:2;max-width:42ch;padding-left:clamp(1.5rem,5vw,5rem);}
.ws3__copy .t{font-size:var(--d2);font-weight:600;letter-spacing:-.03em;line-height:.92;margin:.4rem 0 1rem;}
.ws3__copy .d{color:var(--bone-dim);margin-bottom:1.2rem;}
.ws3__cta{margin-top:1.4rem;color:var(--amber);font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;}
/* 4 moving screens (vertical device) */
.ws4{padding:clamp(3rem,8vh,7rem) 0;text-align:center;background:linear-gradient(180deg,var(--ink),var(--ink-1));border:1px solid var(--hair);}
.ws4 .t{font-size:var(--d2);font-weight:600;letter-spacing:-.03em;line-height:.92;margin:.4rem 0 1rem;}
.ws4 .stage{margin:2.4rem auto 0;width:min(60%,520px);height:52vh;max-height:560px;position:relative;perspective:1400px;}
.ws4 .stage .pm{transform:rotateY(calc(var(--px,0)*-12deg)) rotateX(calc(var(--py,0)*6deg));transition:transform .5s var(--ease);box-shadow:0 50px 100px rgba(0,0,0,.55);border-radius:14px;}
/* 5 assets in depth */
.ws5{height:86vh;min-height:560px;background:var(--ink-1);border:1px solid var(--hair);display:flex;align-items:center;justify-content:center;}
.ws5 .mark{position:absolute;border-radius:8px;overflow:hidden;transition:transform .5s var(--ease);}
.ws5 .k1{width:22%;aspect-ratio:1;left:9%;top:16%;opacity:.5;transform:translate3d(calc(var(--px,0)*-38px),calc(var(--py,0)*-38px),0) rotate(-8deg);}
.ws5 .k2{width:14%;aspect-ratio:1;border-radius:50%;right:13%;top:20%;background:var(--brand-atmos);opacity:.30;filter:blur(2px);transform:translate3d(calc(var(--px,0)*52px),calc(var(--py,0)*40px),0);}
.ws5 .k3{width:42%;aspect-ratio:4/3;box-shadow:0 40px 90px rgba(0,0,0,.5);transform:translate3d(calc(var(--px,0)*24px),calc(var(--py,0)*24px),0);z-index:2;}
.ws5 .k4{width:16%;aspect-ratio:3/4;left:16%;bottom:14%;border:1px solid var(--hair-2);transform:translate3d(calc(var(--px,0)*-46px),calc(var(--py,0)*44px),0) rotate(8deg);}
.ws5__t{position:relative;z-index:5;text-align:center;font-size:var(--d2);font-weight:600;letter-spacing:-.03em;line-height:.9;mix-blend-mode:difference;transform:translate3d(calc(var(--px,0)*10px),calc(var(--py,0)*10px),0);}
.ws5__meta{position:absolute;bottom:2rem;left:0;right:0;justify-content:center;z-index:6;}
/* 6 type/media wide */
.ws6{padding:clamp(2rem,5vh,4rem) 0;text-align:center;}
.ws6__frame{position:relative;height:64vh;max-height:640px;border-radius:10px;overflow:hidden;}
.ws6__t{font-size:var(--d2);font-weight:600;letter-spacing:-.03em;margin:1.4rem 0 1rem;}
.pm--wide,.pm--tall{position:absolute;inset:0;}

/* archive index */
.idx{border-top:1px solid var(--hair);}
.idxrow{display:grid;grid-template-columns:3rem 90px 1.4fr 1fr auto;gap:1.2rem;align-items:center;padding:1rem 0;border-bottom:1px solid var(--hair);transition:padding .35s var(--ease),background .35s;}
.idxrow:hover{padding-left:1.1rem;background:linear-gradient(90deg,rgba(228,86,42,.06),transparent);}
.idxn{color:var(--muted);font-size:.8rem;} .idxthumb{height:56px;border-radius:5px;overflow:hidden;position:relative;}
.idxname{font-size:clamp(1.1rem,2.2vw,1.7rem);font-weight:600;letter-spacing:-.02em;} .idxrow:hover .idxname{color:var(--amber);}
.idxind{color:var(--bone-dim);font-size:.85rem;} .idxmeta{color:var(--muted);font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;text-align:right;}

/* ============ CAPABILITIES (work-driven envs, fix #6) ============ */
.caps{padding:clamp(5rem,10vh,9rem) 0;border-top:1px solid var(--hair);}
.caps__grid{display:grid;grid-template-columns:1fr 1.05fr;gap:var(--gutter);align-items:stretch;}
.caps__list{display:flex;flex-direction:column;}
.cap{border-bottom:1px solid var(--hair);padding:clamp(1.3rem,3vh,2.3rem) 0;cursor:pointer;} .cap:first-child{border-top:1px solid var(--hair);}
.cap__row{display:flex;align-items:baseline;gap:1.2rem;} .cap__idx{font-size:.8rem;color:var(--muted);width:2.5rem;}
.cap__name{font-size:clamp(1.6rem,3.4vw,2.9rem);font-weight:600;letter-spacing:-.02em;line-height:1;transition:color var(--t-fast) var(--ease),transform var(--t-fast) var(--ease);}
.cap.on .cap__name{color:var(--amber);transform:translateX(12px);}
.cap__body{max-height:0;overflow:hidden;transition:max-height var(--t-base) var(--ease);} .cap.on .cap__body{max-height:240px;}
.cap__desc{color:var(--bone-dim);max-width:52ch;padding:1rem 0 0 3.7rem;}
.cap__tags{display:flex;flex-wrap:wrap;gap:.5rem;padding:1rem 0 0 3.7rem;}
.cap__tags span{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);border:1px solid var(--hair);border-radius:100px;padding:.35em 1em;}
.caps__stage{position:relative;border-radius:10px;overflow:hidden;background:var(--ink-1);border:1px solid var(--hair);min-height:520px;}
.capenv{position:absolute;inset:0;opacity:0;pointer-events:none;transition:opacity var(--t-base) var(--ease);padding:clamp(1.2rem,3vw,2.2rem);}
.capenv.on{opacity:1;pointer-events:auto;}
.capenv__shots{position:absolute;inset:0;}
.capenv__shot{position:absolute;border-radius:8px;overflow:hidden;box-shadow:0 30px 70px rgba(0,0,0,.5);transition:transform .5s var(--ease);}
/* identity env: overlapping brand boards */
.capenv--identity .s0{width:56%;height:60%;left:8%;top:12%;transform:translate3d(calc(var(--px,0)*-26px),calc(var(--py,0)*-26px),0);z-index:2;}
.capenv--identity .s1{width:40%;height:46%;right:8%;top:20%;transform:translate3d(calc(var(--px,0)*30px),calc(var(--py,0)*20px),0);z-index:1;opacity:.85;}
.capenv--identity .s2{width:34%;height:38%;left:22%;bottom:10%;transform:translate3d(calc(var(--px,0)*-14px),calc(var(--py,0)*34px),0);z-index:3;}
/* commerce env: stacked device screens */
.capenv--commerce .capenv__shot{border-radius:12px;}
.capenv--commerce .s0{width:34%;height:70%;left:10%;top:12%;transform:translate3d(calc(var(--px,0)*-22px),calc(var(--py,0)*-14px),0) rotate(-4deg);z-index:2;}
.capenv--commerce .s1{width:38%;height:66%;right:12%;top:16%;transform:translate3d(calc(var(--px,0)*26px),calc(var(--py,0)*16px),0) rotate(4deg);z-index:1;}
/* campaign env: keyframe strip */
.capenv--campaign .s0{width:64%;height:44%;left:8%;top:12%;transform:translate3d(calc(var(--px,0)*-20px),0,0);z-index:2;}
.capenv--campaign .s1{width:54%;height:40%;right:8%;bottom:12%;transform:translate3d(calc(var(--px,0)*24px),0,0);z-index:1;}
/* growth env: single strong shot + rings */
.capenv--growth .s0{width:60%;height:64%;left:20%;top:14%;transform:translate3d(calc(var(--px,0)*-18px),calc(var(--py,0)*-18px),0);z-index:2;}
.capenv--growth .s1{display:none;}
.capenv__label{position:absolute;left:clamp(1.2rem,3vw,2.2rem);bottom:clamp(1.2rem,3vw,2.2rem);z-index:5;}
.capenv__k{font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--amber);}
.capenv__names{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.5rem;}
.capenv__names span{font-size:.78rem;color:var(--bone);background:rgba(var(--scrim),.6);backdrop-filter:blur(6px);border:1px solid var(--hair);border-radius:100px;padding:.3em .9em;}

/* ============ PROOF ============ */
.proof{padding:clamp(5rem,10vh,9rem) 0;border-top:1px solid var(--hair);}
.proof__lead{font-size:var(--d3);font-weight:500;letter-spacing:-.02em;line-height:1.1;max-width:20ch;} .proof__lead em{font-family:var(--serif);font-style:italic;color:var(--amber);font-weight:400;}
.proof__note{color:var(--bone-dim);max-width:60ch;margin-top:1.4rem;}
.proof__inds{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:2.4rem;}
.proof__inds span{font-size:.82rem;letter-spacing:.05em;color:var(--bone-dim);border:1px solid var(--hair);border-radius:100px;padding:.5em 1.2em;transition:border-color .3s,color .3s,transform .3s var(--ease);}
.proof__inds span:hover{border-color:var(--amber);color:var(--bone);transform:translateY(-3px);}

/* ============ CRED ============ */
.cred{padding:clamp(5rem,10vh,9rem) 0;border-top:1px solid var(--hair);}
.cred__lead{font-size:var(--d3);font-weight:500;letter-spacing:-.02em;line-height:1.1;max-width:24ch;} .cred__lead em{font-family:var(--serif);font-style:italic;color:var(--amber);font-weight:400;}
.cred__regions{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:3rem;}
.cred__regions span{font-size:.85rem;letter-spacing:.06em;color:var(--bone-dim);border:1px solid var(--hair);border-radius:100px;padding:.5em 1.3em;transition:border-color .3s,color .3s,transform .3s var(--ease);}
.cred__regions span:hover{border-color:var(--amber);color:var(--bone);transform:translateY(-3px);}
.cred__marq{margin-top:5rem;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);overflow:hidden;padding:2rem 0;}
.cred__track{display:flex;gap:4rem;white-space:nowrap;animation:marq 38s linear infinite;}
.cred__track span{font-family:var(--serif);font-style:italic;font-size:clamp(1.4rem,3vw,2.4rem);color:var(--bone-dim);}
.cred__track span::after{content:"·";margin-left:4rem;color:var(--amber);}
@keyframes marq{to{transform:translateX(-50%);}}

/* ============ START / FOOTER ============ */
.start{padding:clamp(6rem,15vh,14rem) 0;text-align:center;position:relative;overflow:hidden;}
.start__glow{position:absolute;width:75vw;aspect-ratio:1;border-radius:50%;filter:blur(130px);background:var(--brand-atmos);opacity:.22;top:50%;left:50%;transform:translate3d(calc(-50% + var(--px,0)*40px),calc(-50% + var(--py,0)*40px),0);pointer-events:none;transition:transform .5s var(--ease);}
.start__big{font-size:var(--d0);font-weight:700;letter-spacing:-.05em;line-height:.84;position:relative;} .start__big .serif{display:block;font-weight:400;}
.start__cta{display:inline-flex;align-items:center;gap:.8em;margin-top:3rem;background:var(--amber);color:var(--ink);border-radius:100px;padding:1.05em 2.4em;font-size:.92rem;letter-spacing:.08em;text-transform:uppercase;font-weight:500;transition:transform var(--t-fast) var(--ease),background var(--t-fast);}
.start__cta:hover{transform:translateY(-4px);background:var(--amber-2);}
.start__alt{display:block;margin-top:1.6rem;color:var(--muted);font-size:.85rem;} .start__alt a{color:var(--bone-dim);border-bottom:1px solid var(--hair);} .start__alt a:hover{color:var(--amber);}

/* ============ PROJECT OVERLAY ============ */
.ov{position:fixed;inset:0;z-index:300;background:rgba(8,7,5,.72);backdrop-filter:blur(10px);opacity:0;pointer-events:none;transition:opacity .4s var(--ease);display:flex;align-items:center;justify-content:center;padding:clamp(1rem,4vw,3rem);}
.ov.on{opacity:1;pointer-events:auto;}
.ov__panel{width:min(1100px,100%);max-height:90vh;overflow:auto;background:var(--ink-1);border:1px solid var(--hair-2);border-radius:12px;transform:translateY(30px) scale(.98);transition:transform .5s var(--ease);position:relative;}
.ov.on .ov__panel{transform:none;}
.ov__close{position:absolute;top:1rem;right:1rem;z-index:5;width:40px;height:40px;border-radius:50%;border:1px solid var(--hair-2);color:var(--bone);font-size:1rem;transition:background .3s,color .3s;}
.ov__close:hover{background:var(--amber);color:var(--ink);border-color:var(--amber);}
.ov__media{position:relative;height:44vh;min-height:280px;}
.ov__info{padding:clamp(1.5rem,4vw,3rem);}
.ov__title{font-size:var(--d3);font-weight:600;letter-spacing:-.02em;margin:.6rem 0 1rem;}
.ov__desc{color:var(--bone-dim);max-width:60ch;}
.ov__facts{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;margin:2rem 0;border-top:1px solid var(--hair);padding-top:1.5rem;}
.ov__facts i{display:block;font-style:normal;font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:.3rem;}
.ov__cta{display:inline-flex;align-items:center;gap:.6em;color:var(--amber);font-size:.85rem;letter-spacing:.1em;text-transform:uppercase;}

/* ============ MOBILE ART DIRECTION (fix #8) — 3 families ============ */
@media(max-width:900px){
  .header{mix-blend-mode:normal;background:linear-gradient(180deg,rgba(var(--scrim),.9),transparent);}
  .caps__grid{grid-template-columns:1fr;} .caps__stage{min-height:340px;order:-1;}
  .prop__meta{grid-template-columns:repeat(2,1fr);}
  .ov__facts{grid-template-columns:repeat(2,1fr);}
  .idxrow{grid-template-columns:2rem 1fr;gap:.5rem 1rem;} .idxthumb,.idxind,.idxmeta{display:none;}
  /* FAMILY A — hero: media top third, content lower, always left-aligned */
  .hslide__media{inset:0 0 52% 0 !important;clip-path:none !important;border-radius:0;}
  .hslide__scrim{background:linear-gradient(0deg,var(--ink) 34%,rgba(var(--scrim),.35) 62%,rgba(var(--scrim),.5) 100%) !important;}
  .hslide__content{text-align:left !important;bottom:6.5rem;top:auto;} .hslide__title,.hslide__sub{margin:0 !important;max-width:none;} .hslide__facts{justify-content:flex-start !important;gap:1rem;}
  .hero__hint{display:none;}
  /* FAMILY B — full-bleed systems become tall single-image cards */
  .ws1{height:78vh;min-height:460px;} .ws2,.ws5{height:auto;min-height:0;flex-direction:column;padding:2rem 1.2rem;}
  .ws2 .plane,.ws5 .mark{position:relative;inset:auto;width:100%!important;height:auto!important;aspect-ratio:4/3;transform:none!important;opacity:1!important;margin-bottom:1rem;}
  .ws2 .p1,.ws2 .p3,.ws5 .k1,.ws5 .k2,.ws5 .k4{display:none;}
  .ws2__t,.ws5__t{position:relative;font-size:var(--d3);margin-top:1rem;mix-blend-mode:normal;} .ws2__meta,.ws5__meta{position:relative;bottom:auto;margin-top:1rem;justify-content:flex-start;}
  /* FAMILY C — sticky + screens flatten to standard stacked blocks */
  .ws3{height:auto;} .ws3__pin{position:relative;height:auto;min-height:60vh;padding:2.5rem 0;}
  .ws3 .scrim{background:linear-gradient(0deg,var(--ink) 30%,rgba(var(--scrim),.4) 100%);}
  .ws4 .stage{width:70%;height:44vh;} .ws6__frame{height:44vh;}
  .prop__lead,.cred__lead,.proof__lead{max-width:none;}
}
@media(max-width:480px){
  .prop__meta{grid-template-columns:repeat(2,1fr);gap:1.4rem;}
  .hslide__facts span{font-size:.8rem;} .work__head{align-items:flex-start;flex-direction:column;}
}

/* reduced motion */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important;}
  .line-mask>span{transform:none;} .reveal{opacity:1;transform:none;}
  .cred__track{animation:none;} .prop__lead .word{opacity:1;}
  .hslide__sub,.hslide__facts,.hslide__cta{opacity:1;transform:none;}
  .hslide__media,.ws2 .plane,.ws5 .mark,.capenv__shot{transform:none!important;}
  .ws3{height:auto;} .ws3__pin{position:relative;height:auto;}
}

/* ============================================================
   KRAFTIMA BRAND REFINEMENT LAYER (v5 realignment)
   Blue = authority/atmosphere · Gold = precision accent
   ============================================================ */
/* Hero: persistent Kraftima-blue atmosphere so the first viewport
   reads as the logo's identity even before the logo is noticed. */
.hero::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(70% 90% at 18% 30%, rgba(0,58,155,.30), transparent 60%),
    radial-gradient(60% 80% at 88% 78%, rgba(31,82,167,.20), transparent 62%),
    linear-gradient(180deg, var(--k-blue-dark) 0%, var(--surface-0) 60%);}
.hero__foot{ z-index:5; }
/* a single controlled gold light in the hero — precision, not wash */
.hero::after{content:"";position:absolute;right:8%;top:22%;width:34vw;height:34vw;max-width:520px;max-height:520px;
  z-index:0;pointer-events:none;border-radius:50%;filter:blur(120px);
  background:radial-gradient(circle, rgba(254,182,0,.14), transparent 68%);}

/* Header: blue-aware translucent environment (fix #12), real logo unfiltered */
.header{background:linear-gradient(180deg, rgba(2,5,17,.55), transparent);backdrop-filter:blur(2px);}
.header.is-hidden{backdrop-filter:none;}

/* BUTTON SYSTEM (fix #13) ---------------------------------- */
/* Primary = gold, high-contrast action (used sparingly) */
.btn-primary,.start__cta{background:var(--k-gold);color:var(--surface-black);
  box-shadow:0 8px 30px rgba(254,182,0,.22);}
.btn-primary:hover,.start__cta:hover{background:var(--k-gold-bright);box-shadow:0 12px 40px rgba(254,182,0,.32);}
/* Secondary = blue, outlined→filled */
.btn-secondary,.header__cta{border:1px solid var(--k-blue-soft);color:var(--text-primary);background:transparent;}
.btn-secondary:hover,.header__cta:hover{background:var(--k-blue);border-color:var(--k-blue);color:var(--text-primary);}
/* Text CTAs stay neutral→gold (already gold via --amber alias) */

/* START section: cinematic blue depth + gold precision, not a yellow box */
.start{background:
  radial-gradient(80% 90% at 50% 40%, var(--k-blue-deep), var(--surface-0) 68%);}
.start__big{ text-shadow:0 0 60px rgba(0,58,155,.4); }
.start__big .serif{ color:var(--k-gold); }   /* precision gold on the emphasis line */

/* Capabilities active env: blue depth base + gold precision label (fix #15) */
.caps__stage{background:radial-gradient(90% 90% at 30% 20%, var(--k-blue-deep), var(--surface-1) 70%);}
.capenv__k{color:var(--k-gold);}

/* Footer: close the brand loop — blue-black + gold micro accents (fix #17) */
.foot{background:linear-gradient(180deg, var(--surface-0), var(--k-blue-dark));}
.foot__bar{color:var(--text-dim);}

/* Selection + eyebrow index = gold precision (kept) */
::selection{background:var(--k-gold);color:var(--surface-black);}

/* Section eyebrow numerals in gold, labels neutral (precision hierarchy) */
.eyebrow .n{color:var(--k-gold);font-weight:600;}

/* Nav hover: blue underline is authority; keep text neutral */
.header__nav a::after{background:var(--k-gold);} /* thin gold underline = precision */
.header__nav a:hover{color:var(--text-primary);}

/* Progress + dots + cursor = gold precision (kept via alias) */

/* Work toggle active = gold pill on blue-black (kept) */
/* Grain tint now cool (handled in .grain override below) */

/* Selected clients — refined proof wall (monogram + name; flagships link to case) */
.proof__clients{margin-top:3rem;padding-top:2.5rem;border-top:1px solid var(--line-subtle);}
.proof__ck{display:block;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--k-gold);margin-bottom:1.6rem;}
.proof__clientlist{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1px;background:var(--line-subtle);border:1px solid var(--line-subtle);border-radius:12px;overflow:hidden;}
.cl{display:flex;align-items:center;gap:1rem;padding:1.2rem 1.4rem;background:var(--surface-0);position:relative;transition:background .35s var(--ease);}
a.cl{cursor:pointer;} a.cl:hover{background:var(--surface-2);}
.cl__mono{flex:none;width:44px;height:44px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:.9rem;letter-spacing:.02em;color:var(--k-gold);background:linear-gradient(150deg,rgba(0,58,155,.35),rgba(2,5,17,.6));border:1px solid var(--line-strong);}
.cl__name{font-size:.98rem;font-weight:500;letter-spacing:-.01em;color:var(--text-secondary);transition:color .3s;}
a.cl:hover .cl__name{color:var(--text-primary);}
.cl__go{margin-left:auto;color:var(--text-dim);font-size:.9rem;opacity:0;transform:translateX(-4px);transition:opacity .3s,transform .3s var(--ease),color .3s;}
a.cl:hover .cl__go{opacity:1;transform:none;color:var(--k-gold);}