/* Slate site: shared design system, staged the way the reference site moves.
   Everything that animates is driven by site.js from scroll position (transform / opacity / clip only).
   White is used on purpose: the statement fills to it, the intent cards are white, and the client band is white,
   so the dark, acid and white sections read as a rhythm rather than one long black page. */

.mk{--dim:#3b3b37;--white:#f5f3ec;--tile-line:rgba(11,11,11,.1)}
.mk em{font-style:normal;color:var(--acid)}
.mk section:not(.hero){position:relative}

/* background: ink with a soft vignette behind the Creo loop, and film grain in FRONT of the loop
   (between the loop and the content), so the tube reads like part of a filmed B&W print.
   Text and images sit above the grain and stay clean. No image files: the grain is inline SVG noise. */
.mk-bg{position:fixed;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(ellipse 80% 70% at 50% 45%,transparent 40%,rgba(0,0,0,.55) 100%),var(--ink)}
.mk-over{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.mk-over i{position:absolute;inset:-20%;display:block;opacity:.13;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.6 -.45'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:mk-grain .9s steps(6) infinite}
@keyframes mk-grain{0%{transform:translate(0,0)}20%{transform:translate(-4%,3%)}40%{transform:translate(3%,-5%)}60%{transform:translate(-6%,-2%)}80%{transform:translate(5%,4%)}100%{transform:translate(0,0)}}
@media(prefers-reduced-motion:reduce){.mk-over i{animation:none}}

/* ---------------------------------------------------------------- header: yellow 2D Creo menu button */
.menu-toggle{width:64px;height:64px;justify-content:center;align-items:center}
.mk-creo{width:54px!important;height:54px!important;overflow:visible;transition:transform .9s cubic-bezier(.23,1,.32,1)}
.mk-creo path{stroke:var(--acid)!important;stroke-width:2.6;stroke-linecap:round;fill:none;transition:stroke-width .4s var(--ease)}
.menu-toggle:hover .mk-creo{transform:rotate(-40deg)}
.menu-toggle:hover .mk-creo path{stroke-width:3.2}
.menu-toggle[aria-expanded=true] .mk-creo{transform:rotate(540deg) scale(.82)}
.menu-toggle:active .mk-creo{transform:rotate(-40deg) scale(.92)}
/* over the white client band the fixed logo and menu loop turn ink so they stay visible */
.site-header .brand img{transition:filter .35s cubic-bezier(.23,1,.32,1)}
.mk-on-light .site-header .brand img{filter:brightness(0)}   /* solid ink; invert would turn the logo's yellow mark blue */
.mk-on-light .site-header .mk-creo{filter:drop-shadow(0 0 .6px rgba(11,11,11,.9)) drop-shadow(0 1px 1px rgba(11,11,11,.35))}   /* stays yellow on white, with a hairline for contrast */

/* menu: every page, plus the services as a second column */
.mk-menu-nav a{font-size:clamp(34px,5.4vw,84px)!important;line-height:1.18!important}
.mk-menu-svc{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 24px;margin:0 0 44px}
.mk-menu-svc a{font:600 12px/1.4 var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);transition:color .25s var(--ease)}
.mk-menu-svc a:hover{color:var(--acid)}

/* ---------------------------------------------------------------- hero */
.mk .hero{padding-bottom:110px}
.mk .hero-bottom{margin-top:6vh}
/* the switch: a quiet ring with an arrow; an acid arc fills while the next word waits, click to skip */
.mk-switch{position:relative;flex:0 0 .62em;width:.62em;height:.62em;padding:0;background:transparent;border-radius:50%;font-size:inherit;
  display:grid;place-items:center;margin-right:.06em;transition:background-color .3s cubic-bezier(.23,1,.32,1),transform .2s cubic-bezier(.23,1,.32,1)}
.mk-switch svg{width:100%;height:100%;overflow:visible}
.mk-switch .ring{stroke:rgba(245,243,236,.32);stroke-width:1.4}
.mk-switch .prog{stroke:var(--acid);stroke-width:2.4;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;transform:rotate(-90deg);transform-origin:50% 50%}
.mk-switch.is-timing .prog{animation:mk-ring 3.4s linear forwards}
.mk-switch .arr{stroke:var(--paper);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .35s cubic-bezier(.23,1,.32,1),stroke .3s}
.mk-switch:hover{background:var(--acid)}
.mk-switch:hover .ring{stroke:var(--acid)}
.mk-switch:hover .arr{stroke:var(--ink);transform:translateX(2px)}
.mk-switch:active{transform:scale(.94)}
@keyframes mk-ring{to{stroke-dashoffset:0}}

/* ---------------------------------------------------------------- shared */
.mk-h{margin:0 0 34px;font:600 clamp(18px,1.5vw,24px)/1.2 var(--title);letter-spacing:-.01em;color:var(--paper)}
.mk-rule{position:relative;display:flex;align-items:center;height:9px;margin:0 0 30px}
.mk-rule b{flex:1;height:1px;background:var(--line);transform-origin:0 50%;transform:scaleX(var(--p,1))}
.mk-rule i{width:7px;height:7px;border:1px solid var(--line);border-radius:50%;flex:none;opacity:var(--p,1)}
.mk-links{display:flex;gap:46px;margin-top:48px}
.mk-center{justify-content:center}
.mk-ul{position:relative;font:600 11px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;padding-bottom:9px}
.mk-ul::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transform-origin:0 50%;transition:transform .5s cubic-bezier(.23,1,.32,1)}
.mk-ul:hover::after{transform:scaleX(.35)}
.mk-ul:hover{color:var(--acid)}

/* masked letter titles */
.mk-title,.mk-talk-title,.mk-big{font:600 clamp(58px,8.2vw,150px)/.9 var(--title);letter-spacing:-.05em;text-transform:uppercase;margin:0}
.mk-ch{display:inline-block;overflow:hidden;vertical-align:top;padding:.04em .12em .08em;margin:-.04em -.12em -.08em}   /* mask with room for glyph overhang */
.mk-ch>span{display:inline-block;transform:translateY(var(--y,0%));will-change:transform}
.mk-sp{display:inline-block;width:.24em}
.mk-wd,.mk-nb{display:inline-block;white-space:nowrap}

/* ---------------------------------------------------------------- statement: words fill to white */
.mk-statement{padding-top:16vh;padding-bottom:12vh;padding-left:calc(var(--gutter) + 18vw)}
.mk-fill{font:500 clamp(30px,3.5vw,58px)/1.08 var(--title);letter-spacing:-.025em;text-transform:uppercase;max-width:20ch;margin:0}
.mk-w{color:var(--dim);transition:color .35s var(--ease)}
.mk-w.on{color:var(--white)}

/* ---------------------------------------------------------------- services: staggered cards at their own speeds */
.mk-work{padding-top:4vh;padding-bottom:8vh}
.mk-work .mk-title{margin:0;max-width:6ch;font-size:clamp(54px,7vw,128px)}
.mk-cards{position:relative;height:clamp(1100px,124vw,1900px);margin-top:-4vw}
.mk-card{position:absolute;display:block;transform:translate3d(0,var(--py,0px),0)}
.mk-card.c1{left:0;top:16vw;width:31vw}
.mk-card.c2{right:0;top:0;width:35vw}
.mk-card.c3{left:6vw;top:66vw;width:31vw}
.mk-card.c4{right:3vw;top:74vw;width:29vw}
.mk-media{display:block;overflow:hidden;aspect-ratio:1122/1402;background:#141414;clip-path:var(--clip,none)}
.mk-media img{display:block;width:100%;height:114%;object-fit:cover;transform:translate3d(0,var(--iy,0%),0) scale(1.04);transition:filter .6s var(--ease)}
.mk-card:hover img{filter:brightness(1.08)}
.mk-cap{display:flex;gap:14px;align-items:baseline;margin-top:20px;font:600 clamp(30px,3.3vw,58px)/.95 var(--title);letter-spacing:-.04em;text-transform:uppercase;color:var(--white);transition:color .3s var(--ease)}   /* names large: a first-time visitor should read what Slate does on the first scroll */
.mk-cap b{flex:none;font:600 12px/1 var(--body);letter-spacing:.1em;color:var(--acid);transform:translateY(-.9em)}
.mk-card:hover .mk-cap{color:var(--acid)}

/* ---------------------------------------------------------------- intent: pinned, 2D. The word wipes acid left to right,
   three white cards slide up into a row, then everything lifts away flat. */
.mk-pin{height:300vh}
.mk-stage{position:sticky;top:0;height:100vh;overflow:hidden;padding:0 calc(var(--gutter) - 10px)}
.mk-stage-h{position:absolute;left:calc(var(--gutter) - 10px);top:15vh;margin:0;opacity:var(--ho,1);transform:translate3d(0,var(--hy,0px),0)}
.mk-word{position:absolute;left:50%;top:40%;margin:0;font:600 clamp(130px,27vw,470px)/.8 var(--title);letter-spacing:-.065em;white-space:nowrap;
  transform:translate(-50%,-50%) translate3d(0,var(--wy,0px),0);opacity:var(--wo,1)}
.mk-word span{display:block;padding:0 .1em}   /* the box must cover glyph overhang, or the fill stops short of the last t */
.mk-word-base{color:#1a1a1a}
.mk-word-fill{position:absolute;inset:0}
.mk-intent-cards{position:absolute;left:calc(var(--gutter) - 10px);right:calc(var(--gutter) - 10px);bottom:7vh;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.mk-rulecard{padding:26px 26px 30px;background:var(--white);color:var(--ink);transform:translate3d(0,var(--cy,0px),0);opacity:var(--co,1);will-change:transform,opacity}
.mk-rulecard>b{font:600 11px/1 var(--body);letter-spacing:.1em;color:var(--ink);display:inline-block;padding:6px 8px;background:var(--acid)}
.mk-rulecard h3{margin:20px 0 14px;font:600 clamp(24px,2.1vw,34px)/1 var(--title);letter-spacing:-.03em;text-transform:uppercase}
.mk-rulecard p{margin:0;font-size:15px;line-height:1.55;color:#3b3b37}

/* ---------------------------------------------------------------- clients: a white band, logos in ink */
.mk-company{background:var(--white);color:var(--ink);padding-top:14vh;padding-bottom:16vh;overflow:hidden}
.mk-company-head{display:flex;justify-content:space-between;align-items:end;gap:6vw}
.mk-company .mk-title{color:var(--ink)}
.mk-company .mk-title em{color:var(--ink)}
.mk-intro{margin:0 0 .6em;max-width:24ch;font:500 clamp(18px,1.5vw,24px)/1.3 var(--title);color:#3b3b37;text-align:right}
.mk-grid{margin-top:9vh;display:grid;gap:18px}
.mk-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;transform:translate3d(var(--dx,0px),0,0)}
.mk-tile{display:grid;place-items:center;aspect-ratio:1.5;border:1px solid var(--tile-line);transition:background-color .4s cubic-bezier(.23,1,.32,1)}
.mk-tile:hover{background:#ebe8df}
.mk-tile img{max-width:54%;max-height:40%;object-fit:contain;filter:brightness(0);opacity:.88}

/* ---------------------------------------------------------------- let's talk */
.mk-talk{padding-top:14vh;padding-bottom:10vh}
.mk-talk-title{text-align:center;margin:6vh 0 3vh;font-size:clamp(70px,11vw,200px)}
.mk-talk-sub{max-width:40ch;margin:0 auto 8vh;text-align:center;font-size:18px;line-height:1.55;color:var(--white)}
.mk-foot{display:grid;grid-template-columns:1fr 1fr 1fr;gap:4vw;align-items:end;padding:5vh 0 7vh}
.mk-foot p{margin:20px 0 0;font-size:12px;line-height:1.8;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.mk-foot p a:hover,.mk-svc a:hover{color:var(--acid)}
.mk-svc{list-style:none;margin:0;padding:0;font-size:11px;line-height:2;letter-spacing:.08em;text-transform:uppercase;color:#cbc9c3;align-self:center}
.mk-big{display:block;font-size:clamp(54px,7vw,128px)}
.mk-talk-title a,.mk-big a{color:inherit}
.mk-talk-title a:hover,a.mk-big:hover,.mk-big a:hover{color:var(--acid)}
.mk-talk-title a,a.mk-big,.mk-big a{transition:color .3s cubic-bezier(.23,1,.32,1)}
.mk-right{text-align:right}
.mk-talk>.mk-big{margin-top:5vh}

@media(max-width:760px){
  .mk-switch{flex-basis:.8em;width:.8em;height:.8em}
  .mk-statement{padding-left:calc(var(--gutter) - 6px);padding-top:12vh}
  .mk-cards{height:auto;display:grid;gap:10vh;margin-top:6vh}
  .mk-card,.mk-card.c1,.mk-card.c2,.mk-card.c3,.mk-card.c4{position:relative;left:auto;right:auto;top:auto;width:88%}
  .mk-cap{font-size:clamp(28px,8.5vw,44px)}
  .mk-card:nth-child(even){margin-left:auto}
  .mk-stage-h{top:13vh}
  .mk-word{top:30%}
  .mk-intent-cards{display:block;bottom:5vh}
  .mk-rulecard{position:absolute;left:0;right:0;bottom:calc(var(--i) * 14px)}
  .mk-company-head{display:block}
  .mk-intro{text-align:left;margin-top:20px}
  .mk-foot{grid-template-columns:1fr}
  .mk-row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mk-row .mk-tile:nth-child(3){display:none}
  .mk-right{text-align:left}
  .mk-menu-svc{grid-template-columns:1fr 1fr}
}
@media(prefers-reduced-motion:reduce){
  .mk-creo,.mk-switch{transition:none}
  .mk-w{color:var(--white);transition:none}
  .mk-ch>span,.mk-card,.mk-media img,.mk-row,.mk-rulecard{transform:none!important;opacity:1!important}
  .mk-media{clip-path:none!important}
  .mk-pin{height:auto}
  .mk-stage{position:relative;height:auto;display:grid;gap:28px;padding:12vh calc(var(--gutter) - 10px)}
  .mk-stage-h,.mk-word,.mk-intent-cards{position:relative;left:auto;right:auto;top:auto;bottom:auto;transform:none}
  .mk-word{font-size:clamp(90px,20vw,320px)}
  .mk-word-fill,.pg-word .f{clip-path:none}
  .mk-intent-cards{display:grid}
  .mk-rulecard{position:relative}
}

/* ---------------------------------------------------------------- wave fill
   The big words (intent, embedded, system, hello, and one per service page) fill the way the menu opens:
   solid acid rising through the word behind a wave edge that swells mid-way and settles flat.
   site.js writes the wave as a clip-path polygon into --wave; until then the fill is hidden. */
.mk-word-fill,.pg-word .f{color:var(--acid);clip-path:var(--wave,inset(100% 0 0 0))}

/* ---------------------------------------------------------------- menu: fully yellow */
.menu-wave path{fill:var(--acid)!important}
.site-menu{color:var(--ink)}
.site-menu::backdrop{background:rgb(255 232 0 / .12)}
.site-menu .menu-brand img{filter:brightness(0)}
.site-menu .menu-inner nav a{color:var(--ink);border-bottom-color:rgba(11,11,11,.22)}
.site-menu .menu-inner nav a:hover{color:var(--ink);padding-left:22px}
.site-menu .menu-inner nav a span{transition:letter-spacing .45s cubic-bezier(.23,1,.32,1)}
.site-menu .menu-inner nav a:hover span{letter-spacing:-.02em}
.site-menu .menu-inner nav i{color:var(--ink)}
.site-menu .menu-meta,.site-menu .menu-meta>span,.site-menu .menu-meta a{color:var(--ink)}
.site-menu .menu-meta a:hover{text-decoration:underline;text-underline-offset:4px}
.site-menu .mk-creo path{stroke:var(--ink)!important}
.site-menu a:focus-visible,.site-menu button:focus-visible{outline-color:var(--ink)}