/* 94 Agency – "How a website project runs" section */
/* =========================================================
     94 AGENCY – "How a website project runs" (v4)
     The arrow hops from stage to stage as you scroll.
     Light by default. Add data-theme="dark" to <section> for dark.
     ========================================================= */
  .p94{
    --bg:#FBFAF7; --shape:#E3E0DB; --shape2:#EFEDE8; --faint:#F1EFEB;
    --ink:#1B1D26; --eye:#FFFFFF; --acc:#FF5A1F; --amb:#FF7A00;
    --txt:#1B1D26; --body:#383B48; --mut:#A4A7B3; --tab:#9B9DA9; --line:#DDD8D2;
    --wb:#1B1D26; --bk:#DDD8D2;
    --chip-bg:rgba(255,90,31,.08); --chip-bd:rgba(255,90,31,.35);
    position:relative;height:600vh;height:600svh;background:var(--bg);color:var(--txt);
    font-family:'Hanken Grotesk',system-ui,sans-serif;-webkit-font-smoothing:antialiased;
  }
  .p94[data-theme="dark"]{
    --bg:#06070c; --shape:#262A37; --shape2:#12141C; --faint:#0E1017;
    --wb:#E4E7F0; --bk:#232838;
    --ink:#ECEFF7; --eye:#06070C; --txt:#ECEFF7; --body:#C4C9DA; --mut:#6F7487; --tab:#7F8499; --line:#2A2E3D;
    --chip-bg:rgba(255,90,31,.1); --chip-bd:rgba(255,90,31,.35);
  }
  .p94 *{box-sizing:border-box}
  .p94 svg,.p94 img{max-width:none}
  .p94-stage{position:sticky;top:var(--p94-top,0px);height:calc(100vh - var(--p94-top,0px));height:calc(100svh - var(--p94-top,0px));overflow:hidden;touch-action:pan-y;user-select:none;-webkit-user-select:none;background:var(--bg)}

  .p94-layer{position:absolute;left:0;bottom:0;will-change:transform;pointer-events:none}
  .p94-layer svg{display:block;overflow:hidden;max-width:none!important;height:auto}
  .p94-mask{position:absolute;inset:0;z-index:2;pointer-events:none}
  .p94-layer.far{z-index:1}.p94-layer.mid{z-index:2}
  .p94 .wb{fill:var(--wb)} .p94 .bk{fill:var(--bk)}
  .p94 .sh{fill:var(--shape)} .p94 .sh2{fill:var(--shape2)} .p94 .faint{fill:var(--faint)}
  .p94 .ink{fill:var(--ink)} .p94 .eye{fill:var(--eye)} .p94 .acc{fill:var(--acc)} .p94 .amb{fill:var(--amb)}
  .p94 .frame{fill:var(--bg);stroke:var(--ink);stroke-width:7}

  .p94-text{position:absolute;z-index:6;top:clamp(118px,19%,178px);left:6%;width:min(540px,42vw);--o:0;--a:0;
    transform:translate3d(calc(var(--o) * 96vw),0,0);opacity:1;pointer-events:none}
  .p94-text.is-active{pointer-events:auto}
  .p94-num{font:700 clamp(54px,6.6vw,96px)/.9 'Outfit',sans-serif;letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1.5px var(--acc);margin:0 0 4px}
  .p94-text h3{font:300 clamp(34px,4.1vw,60px)/1.08 'Outfit',sans-serif;letter-spacing:-.025em;margin:0 0 16px;color:var(--txt)}
  .p94-text h3 .mut{color:var(--mut)}
  .p94-text p{margin:0 0 20px;max-width:44ch;color:var(--body);font-size:clamp(15px,1.28vw,18px);line-height:1.6;font-weight:400}
  .p94-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 24px;padding:0;list-style:none}
  .p94-chips li{padding:7px 13px;border-radius:99px;font:400 13px/1 'Hanken Grotesk',sans-serif;letter-spacing:.01em;color:var(--txt);background:var(--chip-bg);border:1px solid var(--chip-bd)}
  .p94-cta{display:inline-block;text-decoration:none;background:var(--acc);color:#1a0d05;font:500 14px/1 'Hanken Grotesk',sans-serif;letter-spacing:.12em;text-transform:uppercase;padding:18px 26px;border-radius:3px;border:1px solid rgba(0,0,0,.08);transition:background .25s,transform .25s}
  .p94-cta:hover{background:var(--amb);transform:translateY(-2px)}
  .p94-cta:focus-visible{outline:3px solid var(--amb);outline-offset:3px}

  .p94-head{position:absolute;z-index:10;left:0;right:0;top:0;padding:16px 20px 0;display:flex;flex-direction:column;align-items:center;pointer-events:none;
    background:linear-gradient(var(--bg) 62%,transparent)}
  .p94-head > *{pointer-events:auto}
  .p94-logo{position:absolute;left:clamp(16px,3vw,40px);top:14px;height:30px;width:auto}
  .p94-kicker{margin:0 0 8px;font:500 11px/1 'Hanken Grotesk',sans-serif;letter-spacing:.22em;text-transform:uppercase;color:var(--acc)}
  .p94-rail{position:relative}
  .p94-tabs{display:flex}
  .p94-tab{appearance:none;background:none;border:0;cursor:pointer;padding:10px clamp(14px,2vw,28px) 13px;font:500 13px/1 'Hanken Grotesk',sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--tab);white-space:nowrap;transition:color .3s}
  .p94-tab b{color:var(--acc);margin-right:8px;font-weight:500;opacity:.9}
  .p94-tab:hover,.p94-tab.is-active{color:var(--txt)}
  .p94-tab:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
  .p94-track{position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--line)}
  .p94-fill{position:absolute;inset:0;background:var(--acc);transform-origin:left;transform:scaleX(.25)}

  /* ---------- loops ---------- */
  .p94 .bob{animation:p94bob 3.2s ease-in-out infinite}
  .p94 .hop{animation:p94hop 1.9s ease-in-out infinite;animation-delay:calc(var(--i) * -.55s)}
  .p94 .float{animation:p94float 6s ease-in-out infinite;animation-delay:calc(var(--i) * -1.4s)}
  .p94 .blk{animation:p94blk 2.6s steps(1,end) infinite;animation-delay:calc(var(--i) * -.5s)}
  .p94 .flame{transform-box:fill-box;transform-origin:50% 0;animation:p94flame .22s ease-in-out infinite alternate}
  .p94 .trail{stroke-dasharray:14 14;animation:p94trail 1.1s linear infinite}
  .p94 .trail2{fill:none;stroke:var(--acc);stroke-opacity:.8;stroke-width:7;stroke-linecap:round;stroke-dasharray:1 18;animation:p94trail2 1.6s linear infinite}
  .p94 .belt{animation:p94belt 2.4s linear infinite}
  .p94 .belt2{animation:p94belt2 1.2s linear infinite}
  .p94 .ping{transform-box:fill-box;transform-origin:center;animation:p94ping 1.8s ease-out infinite}
  .p94 .rise{animation:p94rise 3.4s ease-out infinite;animation-delay:calc(var(--i) * -1.1s)}
  .p94 .wave{animation:p94wave 1.6s ease-out infinite;animation-delay:calc(var(--i) * -.4s)}
  .p94 .tick{animation:p94tick 7s ease-in-out infinite;animation-delay:calc(var(--i) * -1.6s)}
  .p94 .dot{animation:p94dot 1.2s ease-in-out infinite;animation-delay:calc(var(--i) * -.25s)}
  .p94 .arm{transform-box:fill-box;transform-origin:0% 100%;animation:p94arm 1.5s ease-in-out infinite alternate}
  .p94 .drift{animation:p94drift 16s ease-in-out infinite alternate;animation-delay:calc(var(--i) * -3s)}
  .p94.is-off *{animation-play-state:paused!important}
  @keyframes p94belt{to{transform:translateX(80px)}}
  @keyframes p94belt2{to{transform:translateX(40px)}}
  @keyframes p94ping{0%{transform:scale(.3);opacity:1}100%{transform:scale(1.6);opacity:0}}
  @keyframes p94rise{0%{opacity:0;transform:translateY(0)}20%{opacity:1}100%{opacity:0;transform:translateY(-80px)}}
  @keyframes p94wave{0%{opacity:0;transform:translateX(-10px)}30%{opacity:1}100%{opacity:0;transform:translateX(26px)}}
  @keyframes p94tick{0%,6%{opacity:0}14%,88%{opacity:1}100%{opacity:0}}
  @keyframes p94dot{0%,100%{transform:translateY(0);opacity:.35}50%{transform:translateY(-6px);opacity:1}}
  @keyframes p94arm{from{transform:rotate(-14deg)}to{transform:rotate(18deg)}}
  @keyframes p94bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
  @keyframes p94hop{0%,45%,100%{transform:translateY(0)}22%{transform:translateY(-34px)}}
  @keyframes p94float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
  @keyframes p94blk{0%{opacity:1}55%{opacity:.14}100%{opacity:1}}
  @keyframes p94flame{from{transform:scaleY(.8)}to{transform:scaleY(1.25)}}
  @keyframes p94trail{to{stroke-dashoffset:-28}}
  @keyframes p94trail2{to{stroke-dashoffset:-19}}
  @keyframes p94drift{from{transform:translateY(-10px)}to{transform:translateY(12px)}}

  @media (max-width:700px){
    .p94-mask{-webkit-mask-image:none;mask-image:none}
    .p94-logo{display:none}
    .p94-kicker{font-size:10px;margin-bottom:4px}
    .p94-tab{padding:8px 6px 11px;font-size:10px;letter-spacing:.06em}
    .p94-tab b{display:none}
    .p94-text{left:0!important;right:0;width:auto;top:66px;padding:22px 20px 34px;background:linear-gradient(var(--bg) 0,var(--bg) calc(100% - 34px),transparent)}
    .p94-num{font-size:44px}
    .p94-text h3{font-size:30px;margin-bottom:8px}
    .p94-text p{font-size:14.5px;line-height:1.5;margin-bottom:14px}
    .p94-chips{display:none}
    .p94-cta{padding:15px 20px;font-size:12.5px}
  }
  @media (max-height:640px) and (min-width:701px){ .p94-kicker{display:none} .p94-num{font-size:52px} .p94-text{top:96px} .p94-chips{display:none} }
  @media (prefers-reduced-motion:reduce){ .p94 *{animation:none!important;transition-duration:.01s!important} }

/* =========================================================
   Case studies mosaic (homepage "Our work") – 2x2, wide/narrow alternating.
   Layers are stacked in one grid cell (no absolute positioning), so the tiles
   always size themselves from their own content and can never collapse.
   ========================================================= */
.mz{display:grid!important;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px;width:100%;min-width:0;align-self:stretch;box-sizing:border-box;margin:0;padding:0}
.mz-tile{display:grid!important;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(clamp(320px,30vw,430px),auto);grid-column:span 5;
  position:relative;overflow:hidden;border-radius:14px;color:#ECEFF7;text-decoration:none;min-width:0;
  border:1px solid rgba(236,239,247,.1);background:#0f121b radial-gradient(circle at 70% 20%,rgba(255,90,31,.18),transparent 60%)}
.mz-tile.mz-wide{grid-column:span 7}
.mz-tile>img,.mz-tile::before,.mz-tag,.mz-body{grid-area:1/1}
.mz-tile>img{position:relative;z-index:0;width:100%;height:100%;max-width:none;min-height:0;object-fit:cover;display:block;
  transform:scale(1.02);transition:transform .8s cubic-bezier(.2,.8,.2,1),opacity .3s}
.mz-tile>img.mz-missing{opacity:0}
.mz-tile::before{content:"";position:relative;z-index:1;width:100%;height:100%;
  background:linear-gradient(180deg,rgba(6,7,12,.45) 0%,rgba(6,7,12,.62) 40%,rgba(6,7,12,.96) 100%)}
.mz-tile::after{content:"";position:absolute;inset:0;z-index:4;border-radius:inherit;box-shadow:inset 0 0 0 1px transparent;transition:box-shadow .3s;pointer-events:none}
.mz-tag{position:relative;z-index:2;align-self:start;justify-self:start;margin:16px;padding:7px 12px;border-radius:99px;
  font:500 11px/1 'Hanken Grotesk',sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#ECEFF7;
  background:rgba(6,7,12,.55);border:1px solid rgba(255,90,31,.45);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.mz-body{position:relative;z-index:3;align-self:end;display:grid;gap:10px;padding:64px 26px 26px;min-width:0}
.mz-body h3{margin:0;font:300 clamp(1.5rem,2.3vw,2.1rem)/1.08 'Outfit',sans-serif;letter-spacing:-.015em;color:#fff}
.mz-wide .mz-body h3{font-size:clamp(1.8rem,3vw,2.6rem)}
.mz-body p{margin:0;max-width:50ch;color:rgba(236,239,247,.8);font:400 .95rem/1.55 'Hanken Grotesk',sans-serif}
.mz-body .mz-result{display:flex;align-items:center;gap:12px;margin-top:4px;padding-top:14px;border-top:1px solid rgba(236,239,247,.14);
  color:#fff;font:400 1rem/1.35 'Hanken Grotesk',sans-serif;max-width:none}
.mz-n{font:300 clamp(2.2rem,3.4vw,3rem)/1 'Outfit',sans-serif;color:#FF5A1F;letter-spacing:-.03em;flex:none}
.mz-ic{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:rgba(255,90,31,.14);border:1px solid rgba(255,90,31,.5);color:#FF5A1F}
.mz-ic svg{width:19px;height:19px;max-width:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.mz-r{max-width:30ch}
.mz-go{display:inline-flex;align-items:center;gap:8px;font:500 .8rem/1 'Hanken Grotesk',sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#FF5A1F;margin-top:4px}
.mz-go::after{content:"";width:18px;height:1.5px;background:currentColor;transition:width .3s}
.mz-tile:hover>img,.mz-tile:focus-visible>img{transform:scale(1.07)}
.mz-tile:hover::after,.mz-tile:focus-visible::after{box-shadow:inset 0 0 0 1px #FF5A1F}
.mz-tile:hover .mz-go::after{width:30px}
.mz-tile:focus-visible{outline:2px solid #FF5A1F;outline-offset:3px}
@media (max-width:900px){
  .mz{grid-template-columns:minmax(0,1fr)}
  .mz-tile,.mz-tile.mz-wide{grid-column:auto;grid-template-rows:minmax(440px,auto)}
}
@media (max-width:600px){.mz-body{padding:72px 20px 20px}}
@media (prefers-reduced-motion:reduce){.mz-tile>img{transition:none}}

/* =========================================================
   Reviews ("What our clients say") – carousel runs full screen width.
   The heading stays in the page column; the cards start in line with it
   and scroll right out to both edges of the screen.
   ========================================================= */
#revCar{width:100vw;max-width:100vw;margin-left:calc(50% - 50vw);margin-right:0;align-self:auto;box-sizing:border-box}
#revCar .rev{padding-inline:max(20px,calc((100vw - 1200px) / 2 + 20px));scroll-padding-inline:max(20px,calc((100vw - 1200px) / 2 + 20px));box-sizing:border-box}